@kapiuara/ui 0.0.0-stage → 0.1.0

package/dist/components/overlays/dialogStore.d.ts

@@ -0,0 +1,114 @@
+import type { ReactNode } from "react";
+import type { KapiConfirmVariant } from "./KapiConfirm";
+/** Opciones de `kapiConfirm()`: las mismas de `KapiConfirm` sin el estado de apertura. */
+export type KapiConfirmOptions = {
+    /** Pregunta principal (nombra al diálogo). */
+    title: string;
+    /** Detalle bajo el título. */
+    message?: ReactNode;
+    /** danger (default) · warning · success · info · question. */
+    variant?: KapiConfirmVariant;
+    /** Texto del botón de confirmar (default según `variant`). */
+    confirmLabel?: string;
+    /** Texto del botón de cancelar (default `labels.cancel` de `confirm`). */
+    cancelLabel?: string;
+    /**
+     * Acción al confirmar. Mientras corre, el botón de confirmar muestra un spinner, los dos
+     * botones quedan deshabilitados y el diálogo no se cierra. Si resuelve, el diálogo se cierra y
+     * la promesa de `kapiConfirm` da `true`; si rechaza, el diálogo sigue abierto con el error
+     * adentro y se puede reintentar o cancelar. La promesa tiene que terminar: mientras corre no hay
+     * forma de cerrar el diálogo. `kapiCloseDialogs()` lo cierra igual y resuelve `false`, pero la
+     * acción ya iniciada sigue su curso.
+     */
+    onConfirm?: () => unknown | Promise<unknown>;
+};
+export type KapiAlertDialogVariant = "success" | "error" | "info" | "warning";
+/** Opciones de `kapiAlert()`: aviso con un solo botón. */
+export type KapiAlertOptions = {
+    /** Título del aviso (nombra al diálogo). */
+    title: string;
+    /** Detalle bajo el título. */
+    message?: ReactNode;
+    /** success · error · info (default) · warning: define ícono y color. */
+    variant?: KapiAlertDialogVariant;
+    /** Texto del botón (default `labels.accept` de `dialog`: "Aceptar"). */
+    acceptLabel?: string;
+};
+/** Pedido en la cola del host: uno por llamada a `kapiConfirm`/`kapiAlert`. */
+export type KapiDialogRequest = {
+    id: number;
+    kind: "confirm";
+    options: KapiConfirmOptions;
+} | {
+    id: number;
+    kind: "alert";
+    options: KapiAlertOptions;
+};
+/** Estado de la capa de carga: el mensaje de la carga abierta más reciente. */
+export type KapiLoadingState = {
+    message: string | undefined;
+};
+export type KapiDialogSnapshot = {
+    /** Cabeza de la cola (el diálogo visible) o `null`. */
+    dialog: KapiDialogRequest | null;
+    /** Capa de carga visible o `null` si no hay ninguna abierta. */
+    loading: KapiLoadingState | null;
+};
+/** Handle de una carga abierta con `kapiLoading()`. */
+export type KapiLoadingHandle = {
+    /** Cambia el mensaje de esta carga. */
+    update: (message: string) => void;
+    /** Cierra esta carga; repetirlo no hace nada. */
+    close: () => void;
+};
+export type KapiLoadingTask<T> = Promise<T> | (() => Promise<T>);
+export type KapiDialogStore = {
+    subscribe: (listener: () => void) => () => void;
+    getSnapshot: () => KapiDialogSnapshot;
+    /** Encola una confirmación: `true` al confirmar, `false` ante cualquier cierre. */
+    confirm: (options: KapiConfirmOptions) => Promise<boolean>;
+    /** Encola un aviso: se resuelve al cerrarse. */
+    alert: (options: KapiAlertOptions) => Promise<void>;
+    /**
+     * Resuelve la cabeza de la cola (si `id` coincide) y pasa al siguiente. `confirmed` es la
+     * respuesta de una confirmación; en un aviso se ignora (siempre resuelve `undefined`).
+     */
+    settle: (id: number, confirmed: boolean) => void;
+    /** Resuelve toda la cola como cerrada (confirm `false`, alert `undefined`) y cierra las cargas. */
+    closeAll: () => void;
+    /** Abre una carga bloqueante. Encolar un diálogo la cierra (como SweetAlert). */
+    loading: (message?: string) => KapiLoadingHandle;
+    /**
+     * Abre una carga mientras corre `task` y la cierra al terminar (también si falla). Un diálogo
+     * encolado durante la tarea la oculta en vez de cerrarla: vuelve al cerrarse el diálogo.
+     */
+    run: <T>(task: KapiLoadingTask<T>, message?: string) => Promise<T>;
+};
+/**
+ * Store imperativo para `useSyncExternalStore`: guarda estado mutable en un closure (cola de
+ * diálogos y cargas abiertas) y emite snapshots inmutables. Sin DOM ni React: testeable.
+ */
+export declare const createDialogStore: () => KapiDialogStore;
+/** Store global que usan `kapiConfirm`/`kapiAlert`/`kapiLoading` y `KapiDialogHost`. */
+export declare const dialogStore: KapiDialogStore;
+/** Confirmación imperativa: `if (await kapiConfirm({ title: "¿Eliminar?" })) …`. */
+export declare const kapiConfirm: (options: KapiConfirmOptions) => Promise<boolean>;
+/** Aviso imperativo con un solo botón: `await kapiAlert({ title: "Guardado", variant: "success" })`. */
+export declare const kapiAlert: (options: KapiAlertOptions) => Promise<void>;
+/**
+ * Cierra todo: resuelve los diálogos en cola como cerrados (`kapiConfirm` → `false`,
+ * `kapiAlert` → `undefined`) y cierra todas las cargas abiertas.
+ */
+export declare const kapiCloseDialogs: () => void;
+/**
+ * Texto a mostrar por el rechazo de un `onConfirm`: `error.message` o el string rechazado; `null`
+ * para cualquier otro valor o un texto vacío (el host usa el label `confirm.error`). Nunca lanza.
+ */
+export declare const confirmErrorMessage: (error: unknown) => string | null;
+/**
+ * Carga bloqueante imperativa: `const h = kapiLoading("Guardando…"); … h.close()`, o
+ * `await kapiLoading.run(guardar(), "Guardando…")`, que cierra en el `finally`.
+ */
+export declare const kapiLoading: ((message?: string) => KapiLoadingHandle) & {
+    run: <T>(task: KapiLoadingTask<T>, message?: string) => Promise<T>;
+};

package/dist/components/overlays/dialogStore.js

@@ -0,0 +1,76 @@
+//#region src/components/overlays/dialogStore.ts
+var e = () => {
+	let e = [], t = [], n = 0, r = {
+		dialog: null,
+		loading: null
+	}, i = /* @__PURE__ */ new Set(), a = !1, o = !1, s = () => {
+		let n = t[t.length - 1];
+		r = {
+			dialog: e[0]?.request ?? null,
+			loading: n ? { message: n.message } : null
+		}, i.forEach((e) => e());
+	}, c = (n, r) => {
+		e = [...e, {
+			request: n,
+			resolve: r
+		}], t = t.filter((e) => e.owned), s(), !(i.size > 0 || a) && (a = !0, setTimeout(() => {
+			a = !1, !(i.size > 0 || e.length === 0 || o) && (o = !0, console.warn("kapiConfirm/kapiAlert: no hay ningún KapiDialogHost montado. El diálogo queda en cola hasta que se monte uno."));
+		}, 0));
+	}, l = (t, n) => {
+		let r = e[0];
+		r && r.request.id === t && (e = e.slice(1), r.resolve(n), s());
+	}, u = () => {
+		if (e.length === 0 && t.length === 0) return;
+		let n = e;
+		e = [], t = [], n.forEach((e) => e.resolve(!1)), s();
+	}, d = (e, r) => {
+		let i = ++n;
+		return t = [...t, {
+			id: i,
+			message: e,
+			owned: r
+		}], s(), {
+			update: (e) => {
+				t.some((e) => e.id === i) && (t = t.map((t) => t.id === i ? {
+					...t,
+					message: e
+				} : t), s());
+			},
+			close: () => {
+				t.some((e) => e.id === i) && (t = t.filter((e) => e.id !== i), s());
+			}
+		};
+	};
+	return {
+		subscribe: (e) => (i.add(e), o = !1, () => {
+			i.delete(e);
+		}),
+		getSnapshot: () => r,
+		confirm: (e) => new Promise((t) => c({
+			id: ++n,
+			kind: "confirm",
+			options: e
+		}, t)),
+		alert: (e) => new Promise((t) => c({
+			id: ++n,
+			kind: "alert",
+			options: e
+		}, () => t())),
+		settle: l,
+		closeAll: u,
+		loading: (e) => d(e, !1),
+		run: async (e, t) => {
+			let n = d(t, !0);
+			try {
+				return await (typeof e == "function" ? e() : e);
+			} finally {
+				n.close();
+			}
+		}
+	};
+}, t = e(), n = (e) => t.confirm(e), r = (e) => t.alert(e), i = () => t.closeAll(), a = (e) => {
+	let t = e instanceof Error ? e.message : typeof e == "string" ? e : "";
+	return typeof t == "string" && t !== "" ? t : null;
+}, o = Object.assign((e) => t.loading(e), { run: (e, n) => t.run(e, n) });
+//#endregion
+export { a as confirmErrorMessage, e as createDialogStore, t as dialogStore, r as kapiAlert, i as kapiCloseDialogs, n as kapiConfirm, o as kapiLoading };

package/dist/components/overlays/dialogUtils.d.ts

@@ -0,0 +1,72 @@
+export declare const clamp: (value: number, min: number, max: number) => number;
+/**
+ * Normaliza un ancho: número → px, string numérico → px, otro string → tal cual
+ * (`"40rem"`, `"min(520px, 90vw)"`). Vacío / inválido → `fallback`.
+ */
+export declare const toCssSize: (size: number | string | undefined, fallback: string) => string;
+export type DialogNameInput = {
+    /** id del título visible del header. */
+    titleId: string;
+    /** Título del header; si es string sirve de nombre cuando no hay header. */
+    title: unknown;
+    /** Sin header visible. */
+    hideHeader: boolean;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+};
+/**
+ * Nombre accesible de un diálogo (KapiModal, KapiSplitModal). Precedencia: `aria-labelledby` del
+ * consumidor > `aria-label` del consumidor > título del header visible (por id) > título string
+ * (sin header). Nunca emite los dos atributos a la vez.
+ */
+export declare const dialogNameProps: ({ titleId, title, hideHeader, "aria-label": label, "aria-labelledby": labelledBy }: DialogNameInput) => {
+    "aria-labelledby": string | undefined;
+    "aria-label": string | undefined;
+};
+export type KapiModalSize = "sm" | "md" | "lg" | "full";
+/** Clases de la tarjeta del modal (mismas del original). */
+export declare const modalClasses: (size?: KapiModalSize, className?: string) => string;
+/**
+ * transform-origin ("x y") a partir del rect de un botón disparador y el viewport:
+ * tercios izquierdo/centro/derecho y arriba/centro/abajo. Se pasa al modal vía
+ * `className="kapi-modal--origin"` + `style={{ transformOrigin }}` para que "crezca"
+ * desde el botón (misma heurística de la referencia).
+ */
+export declare const originFromRect: (rect: {
+    left: number;
+    top: number;
+    width: number;
+}, viewport: {
+    width: number;
+    height: number;
+}) => string;
+/** "0.28s" → 280, "150ms" → 150. Valor inválido → 0. */
+export declare const parseCssTime: (token: string) => number;
+/**
+ * Duración total más larga (delay + duration) de una lista de transiciones
+ * (`getComputedStyle().transitionDuration` / `.transitionDelay`). Las listas se
+ * repiten cíclicamente como define CSS. 0 = nada que esperar.
+ */
+export declare const maxTransitionMs: (durations: string, delays: string) => number;
+export type ScrollLockTarget = {
+    style: {
+        overflow: string;
+        paddingRight: string;
+    };
+};
+export type ScrollLockDeps = {
+    getTarget: () => ScrollLockTarget | null;
+    /** Ancho de la barra de scroll y padding-right actual (px) para evitar el salto de layout. */
+    measure: () => {
+        scrollbar: number;
+        padding: number;
+    };
+};
+/**
+ * Bloqueo de scroll con contador de referencias: varios diálogos apilados lo
+ * adquieren a la vez y sólo el último en soltarlo restaura el estilo original.
+ */
+export declare const createScrollLock: ({ getTarget, measure }: ScrollLockDeps) => {
+    acquire: () => (() => void);
+    getCount: () => number;
+};

package/dist/components/overlays/dialogUtils.js

@@ -0,0 +1,62 @@
+//#region src/components/overlays/dialogUtils.ts
+var e = (e, t, n) => Math.min(n, Math.max(t, e)), t = (e, t) => {
+	if (typeof e == "number") return Number.isFinite(e) && e > 0 ? `${e}px` : t;
+	let n = e?.trim();
+	return n ? /^\d+(\.\d+)?$/.test(n) ? `${n}px` : n : t;
+}, n = ({ titleId: e, title: t, hideHeader: n, "aria-label": r, "aria-labelledby": i }) => i === void 0 ? r === void 0 ? n ? {
+	"aria-labelledby": void 0,
+	"aria-label": typeof t == "string" ? t : void 0
+} : {
+	"aria-labelledby": e,
+	"aria-label": void 0
+} : {
+	"aria-labelledby": void 0,
+	"aria-label": r
+} : {
+	"aria-labelledby": i,
+	"aria-label": void 0
+}, r = {
+	sm: " kapi-modal--sm",
+	md: "",
+	lg: " kapi-modal--lg",
+	full: " kapi-modal--full"
+}, i = (e = "md", t = "") => `kapi-modal${r[e] ?? ""}${t ? ` ${t}` : ""}`, a = (e) => {
+	let t = /^\s*(-?\d*\.?\d+)(ms|s)\s*$/.exec(e);
+	if (!t) return 0;
+	let n = Number(t[1]);
+	return t[2] === "s" ? n * 1e3 : n;
+}, o = (e, t) => {
+	let n = e.split(",").map(a), r = t.split(",").map(a), i = Math.max(n.length, r.length), o = 0;
+	for (let e = 0; e < i; e += 1) {
+		let t = (n[e % n.length] ?? 0) + (r[e % r.length] ?? 0);
+		t > o && (o = t);
+	}
+	return o;
+}, s = ({ getTarget: e, measure: t }) => {
+	let n = 0, r = null;
+	return {
+		acquire: () => {
+			if (n += 1, n === 1) {
+				let n = e();
+				if (n) {
+					r = {
+						overflow: n.style.overflow,
+						paddingRight: n.style.paddingRight
+					};
+					let { scrollbar: e, padding: i } = t();
+					n.style.overflow = "hidden", e > 0 && (n.style.paddingRight = `${i + e}px`);
+				}
+			}
+			let i = !1;
+			return () => {
+				if (!i && (i = !0, n = Math.max(0, n - 1), n === 0 && r)) {
+					let t = e();
+					t && (t.style.overflow = r.overflow, t.style.paddingRight = r.paddingRight), r = null;
+				}
+			};
+		},
+		getCount: () => n
+	};
+};
+//#endregion
+export { e as clamp, s as createScrollLock, n as dialogNameProps, o as maxTransitionMs, i as modalClasses, a as parseCssTime, t as toCssSize };

package/dist/components/overlays/exitPresenceLogic.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Red de seguridad de una salida (ms que se suman a la duración medida del CSS). El cierre termina en
+ * el `animationend`/`transitionend` del elemento; este margen solo cubre un evento que no llega
+ * (pestaña en segundo plano, animación cancelada). Mismo rol que `TOAST_LEAVE_MS` en el toast.
+ */
+export declare const EXIT_SAFETY_MARGIN_MS = 100;
+/** `open`: montado y visible · `closing`: `open` pasó a false, sigue montado animando la salida · `closed`: desmontado. */
+export type ExitPhase = "open" | "closing" | "closed";
+/** Fase siguiente según `open`. Abrir gana siempre (también reabriendo en pleno `closing`). */
+export declare const nextExitPhase: (phase: ExitPhase, open: boolean) => ExitPhase;
+/** Las cuatro propiedades de `getComputedStyle` que definen cuánto dura una salida. */
+export type ExitTiming = Pick<CSSStyleDeclaration, "animationDuration" | "animationDelay" | "transitionDuration" | "transitionDelay">;
+/** Espera de la salida (ms): la mayor entre las animaciones y las transiciones del elemento. 0 = nada que esperar. */
+export declare const exitWaitMs: (t: ExitTiming) => number;

package/dist/components/overlays/exitPresenceLogic.js

@@ -0,0 +1,5 @@
+import { maxTransitionMs as e } from "./dialogUtils.js";
+//#region src/components/overlays/exitPresenceLogic.ts
+var t = (e, t) => t ? "open" : e === "open" ? "closing" : e, n = (t) => Math.max(e(t.animationDuration || "0s", t.animationDelay || "0s"), e(t.transitionDuration || "0s", t.transitionDelay || "0s"));
+//#endregion
+export { n as exitWaitMs, t as nextExitPhase };

package/dist/components/overlays/index.d.ts

@@ -0,0 +1,38 @@
+export { KapiContextMenu } from "./KapiContextMenu";
+export type { KapiMenuItem, KapiContextMenuProps } from "./KapiContextMenu";
+export { KapiMenuButton } from "./KapiMenuButton";
+export type { KapiMenuButtonProps } from "./KapiMenuButton";
+export { KapiDropdown } from "./KapiDropdown";
+export type { KapiDropdownDrop, KapiDropdownOption, KapiDropdownProps } from "./KapiDropdown";
+export { KapiTooltip } from "./KapiTooltip";
+export type { KapiTooltipProps, KapiTooltipSide } from "./KapiTooltip";
+export { KapiPhotoView, DEFAULT_PHOTO_VIEW_LABELS } from "./KapiPhotoView";
+export type { KapiPhotoViewLabels, KapiPhotoViewProps } from "./KapiPhotoView";
+export { KapiShapeSheet, DEFAULT_SHAPE_SHEET_LABELS } from "./KapiShapeSheet";
+export type { KapiShapeSheetProps, KapiShapeSheetLabels } from "./KapiShapeSheet";
+export { KapiModal, DEFAULT_MODAL_LABELS } from "./KapiModal";
+export type { KapiModalLabels, KapiModalProps, KapiModalSize } from "./KapiModal";
+export { KapiSplitModal, DEFAULT_SPLIT_MODAL_LABELS } from "./KapiSplitModal";
+export type { KapiSplitModalAside, KapiSplitModalProps, KapiSplitModalLabels } from "./KapiSplitModal";
+export { KapiConfirm, DEFAULT_CONFIRM_LABELS } from "./KapiConfirm";
+export type { KapiConfirmLabels, KapiConfirmProps, KapiConfirmVariant } from "./KapiConfirm";
+export { KapiDialogHost, DEFAULT_DIALOG_LABELS } from "./KapiDialogHost";
+export type { KapiDialogHostProps, KapiDialogLabels } from "./KapiDialogHost";
+export { kapiAlert, kapiCloseDialogs, kapiConfirm, kapiLoading, createDialogStore } from "./dialogStore";
+export type { KapiAlertOptions, KapiAlertDialogVariant, KapiConfirmOptions, KapiDialogRequest, KapiDialogSnapshot, KapiDialogStore, KapiLoadingHandle, KapiLoadingState, KapiLoadingTask } from "./dialogStore";
+export { KapiLoading } from "./KapiLoading";
+export type { KapiLoadingProps } from "./KapiLoading";
+export { KapiOffcanvas, DEFAULT_OFFCANVAS_LABELS } from "./KapiOffcanvas";
+export type { KapiOffcanvasProps, KapiOffcanvasCompanion, KapiOffcanvasLabels } from "./KapiOffcanvas";
+export { KapiOffcanvasStack, useKapiOffcanvasPanel, useKapiOffcanvasStack } from "./KapiOffcanvasStack";
+export type { KapiOffcanvasPanelApi, KapiOffcanvasPanelConfig, KapiOffcanvasStackControls } from "./KapiOffcanvasStack";
+export { KapiOverlayPortal } from "./overlayPortal";
+export type { KapiOverlayPortalProps } from "./overlayPortal";
+export { KapiCanvasForm, DEFAULT_CANVAS_FORM_LABELS } from "./KapiCanvasForm";
+export type { KapiCanvasFormLabels, KapiCanvasFormProps } from "./KapiCanvasForm";
+export { KapiCommandPalette, DEFAULT_COMMAND_PALETTE_LABELS } from "./KapiCommandPalette";
+export type { KapiCommand, KapiCommandGroup, KapiCommandPaletteLabels, KapiCommandPaletteProps } from "./KapiCommandPalette";
+export { KapiPopover } from "./KapiPopover";
+export type { KapiPopoverProps } from "./KapiPopover";
+export { isOutsidePopover, placePopover, samePlacement, shiftIntoView } from "./popoverLogic";
+export type { KapiPlacePopoverOptions, KapiPopoverAlign, KapiPopoverAnchor, KapiPopoverFlip, KapiPopoverPlacement, KapiPopoverPoint, KapiPopoverRect, KapiPopoverSide, KapiPopoverSize, KapiPopoverWidth } from "./popoverLogic";

package/dist/components/overlays/menuButtonLogic.d.ts

@@ -0,0 +1,58 @@
+import type { KapiMenuItem } from "./KapiContextMenu";
+import { type MenuNavKey } from "./menuKeyboardLogic";
+export type { MenuNavKey } from "./menuKeyboardLogic";
+export type MenuButtonPlacement = {
+    top: number;
+    left: number;
+    placement: "bottom" | "top";
+    align?: "left" | "right";
+};
+/** True for non-interactive entries (separators and section headers). */
+export declare const isStaticMenuItem: (item: KapiMenuItem) => boolean;
+/** Indexes of the actionable (not separator / header / disabled) items, in visual order. */
+export declare const actionableIndexes: (items: readonly KapiMenuItem[]) => number[];
+/**
+ * Next focused index skipping separators, headers and disabled items, with wrap. `current` of -1 means nothing focused yet.
+ * Returns -1 when there is no actionable item.
+ */
+export declare const nextMenuIndex: (current: number, dir: MenuNavKey, items: readonly KapiMenuItem[]) => number;
+/** Alto de un ítem accionable: padding `--kapi-space-4` × 2 + línea de `--kapi-fs-base` (overlays/kapi.css). */
+export declare const MENU_ITEM_HEIGHT = 40;
+/** Alto de un separador: 1px + margen `--kapi-space-2` × 2. */
+export declare const MENU_SEP_HEIGHT = 9;
+/** Alto de un encabezado: padding `--kapi-space-4` + `--kapi-space-2` + línea de `--kapi-fs-2xs` (~14px). */
+export declare const MENU_HEADER_HEIGHT = 26;
+/** Padding `--kapi-space-3` × 2 + borde de 1px × 2 del contenedor del menú. */
+export declare const MENU_PADDING = 14;
+/**
+ * Alto estimado de un menú según el tipo de cada ítem (separadores y encabezados no miden como una
+ * fila). Sólo es el valor provisorio de `usePlacement` hasta que hay medida real.
+ */
+export declare const estimateMenuHeight: (items: readonly KapiMenuItem[]) => number;
+export type MenuAlign = "left" | "right";
+/** Engine options the component uses: auto edge align, flip, and the horizontal clamp (`clampMenuLeft`). */
+export declare const ACTION_MENU_PLACEMENT: {
+    readonly align: "auto";
+    readonly flip: "auto";
+    readonly shift: true;
+};
+/**
+ * Menu position (viewport coordinates). Horizontally the menu is anchored to the trigger edge that
+ * has room: left-aligned by default, right-aligned when left-align would overflow the viewport or the
+ * trigger sits in the right half. Vertically it opens in the preferred direction and flips when it
+ * does not fit and the opposite side has more room. Thin wrapper over `placePopover` (`align: "auto"`).
+ */
+export declare const placeActionMenu: (rect: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}, menu: {
+    width: number;
+    height: number;
+}, viewport: {
+    width: number;
+    height: number;
+}, gap?: number, prefer?: "down" | "up", margin?: number) => MenuButtonPlacement;
+/** Last-resort safety net: keeps the menu inside the viewport horizontally. */
+export declare const clampMenuLeft: (left: number, menuWidth: number, viewportWidth: number, margin?: number) => number;

package/dist/components/overlays/menuButtonLogic.js

@@ -0,0 +1,9 @@
+import { nextEnabledIndex as e } from "./menuKeyboardLogic.js";
+//#region src/components/overlays/menuButtonLogic.ts
+var t = (e) => e.sep === !0 || "header" in e, n = (e) => t(e) || "label" in e && e.disabled === !0, r = (e) => e.flatMap((e, t) => n(e) ? [] : [t]), i = (t, n, i) => e(t, n, r(i)), a = (e) => e.reduce((e, t) => e + (t.sep === !0 ? 9 : "header" in t ? 26 : 40), 14), o = {
+	align: "auto",
+	flip: "auto",
+	shift: !0
+};
+//#endregion
+export { o as ACTION_MENU_PLACEMENT, r as actionableIndexes, a as estimateMenuHeight, t as isStaticMenuItem, i as nextMenuIndex };

package/dist/components/overlays/menuKeyboardLogic.d.ts

@@ -0,0 +1,25 @@
+/** Keyboard model shared by every menu (MenuButton, Dropdown, ContextMenu). Pure. */
+export type MenuNavKey = "next" | "prev" | "first" | "last";
+export type MenuKeyIntent = {
+    kind: "move";
+    dir: MenuNavKey;
+} | {
+    kind: "close";
+    returnFocus: boolean;
+} | {
+    kind: "none";
+};
+/**
+ * What a key does inside an open menu. Escape closes and returns focus to the trigger; Tab closes
+ * and lets focus move on. Enter/Space are left to the native `<button>` items.
+ */
+export declare const menuKeyIntent: (key: string) => MenuKeyIntent;
+/**
+ * Next focused index among `enabled` (indexes in visual order), with wrap. `current` of -1 means
+ * nothing focused yet. Returns -1 when nothing is enabled.
+ */
+export declare const nextEnabledIndex: (current: number, dir: MenuNavKey, enabled: readonly number[]) => number;
+/** Index to focus when the menu opens: `preferred` (e.g. the selected option) if enabled, else the first. */
+export declare const initialMenuFocus: (enabled: readonly number[], preferred?: number) => number;
+/** Reads the `data-menu-index` of the focused element (-1 when focus is outside the items). */
+export declare const focusedMenuIndex: (el: Element | null) => number;

package/dist/components/overlays/menuKeyboardLogic.js

@@ -0,0 +1,30 @@
+//#region src/components/overlays/menuKeyboardLogic.ts
+var e = {
+	ArrowDown: "next",
+	ArrowUp: "prev",
+	Home: "first",
+	End: "last"
+}, t = (t) => {
+	let n = e[t];
+	return n ? {
+		kind: "move",
+		dir: n
+	} : t === "Escape" ? {
+		kind: "close",
+		returnFocus: !0
+	} : t === "Tab" ? {
+		kind: "close",
+		returnFocus: !1
+	} : { kind: "none" };
+}, n = (e, t, n) => {
+	if (n.length === 0) return -1;
+	if (t === "first") return n[0];
+	if (t === "last") return n[n.length - 1];
+	let r = n.indexOf(e);
+	return t === "next" ? r < 0 ? n[0] : n[(r + 1) % n.length] : r < 0 ? n[n.length - 1] : n[(r - 1 + n.length) % n.length];
+}, r = (e, t) => t !== void 0 && e.includes(t) ? t : e[0] ?? -1, i = (e) => {
+	let t = e?.getAttribute("data-menu-index");
+	return t == null ? -1 : Number(t);
+};
+//#endregion
+export { i as focusedMenuIndex, r as initialMenuFocus, t as menuKeyIntent, n as nextEnabledIndex };

package/dist/components/overlays/offcanvasCompanion.d.ts

@@ -0,0 +1,16 @@
+import { type OffcanvasSide } from "./offcanvasSide";
+export declare const DEFAULT_COMPANION_WIDTH = "400px";
+/** DOM order of the dock: a right drawer is [companion | main], a left drawer is [main | companion]. */
+export type CompanionPanelOrder = ["companion", "main"] | ["main", "companion"];
+/** Only left/right drawers can dock a companion; top/bottom ignore it. */
+export declare const supportsCompanion: (side: OffcanvasSide) => boolean;
+/** The companion sits on the INNER side: left of a right drawer, right of a left drawer. */
+export declare const resolveCompanionOrder: (side: OffcanvasSide) => CompanionPanelOrder;
+/** Companion width as a CSS length (number → px, numeric string → px, other strings untouched). */
+export declare const resolveCompanionWidth: (width: number | string | undefined) => string;
+/** True when the companion should actually render for this side/state. */
+export declare const isCompanionActive: (side: OffcanvasSide, companion: {
+    open: boolean;
+} | undefined) => boolean;
+/** Class list of the dock wrapper (always present so the main panel never changes parent). */
+export declare const companionDockClasses: (active: boolean) => string;

package/dist/components/overlays/offcanvasCompanion.js

@@ -0,0 +1,6 @@
+import { toCssSize as e } from "./dialogUtils.js";
+import { isHorizontalSide as t } from "./offcanvasSide.js";
+//#region src/components/overlays/offcanvasCompanion.ts
+var n = "400px", r = (e) => t(e), i = (e) => e === "left" ? ["main", "companion"] : ["companion", "main"], a = (t) => e(t, n), o = (e, t) => t?.open === !0 && r(e), s = (e) => e ? "kapi-offc__dock kapi-offc__dock--companion" : "kapi-offc__dock";
+//#endregion
+export { n as DEFAULT_COMPANION_WIDTH, s as companionDockClasses, o as isCompanionActive, i as resolveCompanionOrder, a as resolveCompanionWidth, r as supportsCompanion };

package/dist/components/overlays/offcanvasResize.d.ts

@@ -0,0 +1,22 @@
+import type { OffcanvasSide } from "./offcanvasSide";
+export declare const DEFAULT_OFFCANVAS_MIN_WIDTH = 320;
+/** Tope de respaldo cuando no hay viewport disponible (SSR). */
+export declare const FALLBACK_OFFCANVAS_MAX_WIDTH = 960;
+/** Paso de teclado en px. */
+export declare const OFFCANVAS_RESIZE_STEP = 16;
+/** Acota `width` a [min, max]. Si min > max gana min. */
+export declare const clampOffcanvasWidth: (width: number, min: number, max: number) => number;
+/** Máximo efectivo: el pedido, o el 90 % del viewport, o el respaldo. */
+export declare const resolveMaxWidth: (maxWidth: number | undefined, viewportWidth?: number) => number;
+/**
+ * Ancho resultante de arrastrar el borde interno. `right`: mover a la izquierda agranda;
+ * `left`: mover a la derecha agranda. top/bottom no redimensionan: devuelve el ancho inicial.
+ */
+export declare const widthFromDrag: (side: OffcanvasSide, startWidth: number, startClientX: number, currentClientX: number, min: number, max: number) => number;
+/**
+ * Teclado sobre el separador. Flechas horizontales según el lado (en `right`, ArrowLeft agranda;
+ * en `left`, ArrowRight agranda); ArrowUp agranda y ArrowDown achica. Otra tecla: sin cambio (null).
+ */
+export declare const stepOffcanvasWidth: (side: OffcanvasSide, width: number, key: string, min: number, max: number, step?: number) => number | null;
+/** Número inicial desde number | string | undefined; un string no numérico cae al respaldo. */
+export declare const resolveInitialWidth: (width: number | string | undefined, fallback: number) => number;

package/dist/components/overlays/offcanvasResize.js

@@ -0,0 +1,10 @@
+var e = (e, t, n) => Math.round(Math.max(t, Math.min(n, e))), t = (e, t) => typeof e == "number" && Number.isFinite(e) ? e : typeof t == "number" && t > 0 ? Math.round(t * .9) : 960, n = (t, n, r, i, a, o) => t === "right" ? e(n + (r - i), a, o) : t === "left" ? e(n + (i - r), a, o) : n, r = (t, n, r, i, a, o = 16) => t !== "left" && t !== "right" ? null : r === (t === "right" ? "ArrowLeft" : "ArrowRight") || r === "ArrowUp" ? e(n + o, i, a) : r === (t === "right" ? "ArrowRight" : "ArrowLeft") || r === "ArrowDown" ? e(n - o, i, a) : null, i = (e, t) => {
+	if (typeof e == "number") return Number.isFinite(e) ? e : t;
+	if (typeof e == "string") {
+		let n = e.trim(), r = /^(\d+(?:\.\d+)?)(px)?$/.exec(n);
+		return r ? Number(r[1]) : t;
+	}
+	return t;
+};
+//#endregion
+export { e as clampOffcanvasWidth, i as resolveInitialWidth, t as resolveMaxWidth, r as stepOffcanvasWidth, n as widthFromDrag };

package/dist/components/overlays/offcanvasSide.d.ts

@@ -0,0 +1,30 @@
+import type { PushTransform } from "./offcanvasStack";
+export type OffcanvasSide = "right" | "left" | "top" | "bottom";
+export declare const DEFAULT_OFFCANVAS_SIDE: OffcanvasSide;
+/** Cross-size of a top/bottom panel when `height` is omitted. */
+export declare const DEFAULT_OFFCANVAS_HEIGHT = "60vh";
+/** Unknown / missing values fall back to the default edge (right). */
+export declare const normalizeSide: (side: unknown) => OffcanvasSide;
+/** left/right panels slide on the X axis and are sized by `width`. */
+export declare const isHorizontalSide: (side: OffcanvasSide) => boolean;
+/**
+ * Value for the `data-side` attribute. The default edge (right) emits NO attribute so
+ * its markup and CSS path stay exactly as they were before `side` existed.
+ */
+export declare const sideDataAttr: (side: OffcanvasSide) => OffcanvasSide | undefined;
+/**
+ * Which CSS variable carries the panel's cross-size, and its value:
+ * left/right use `width` (`--kapi-offc-width`); top/bottom use `height` (`--kapi-offc-height`)
+ * and ignore `width` altogether.
+ */
+export declare const sizeVar: (side: OffcanvasSide, width: number | string | undefined, height: number | string | undefined, defaultWidth: string) => {
+    name: "--kapi-offc-width" | "--kapi-offc-height";
+    value: string;
+};
+/**
+ * Adapts the stack push (computed for the right edge: shrink + shift LEFT) per side.
+ * - right: unchanged.
+ * - left: mirrored X shift (panel peeks out to the right as it is pushed back).
+ * - top/bottom: no push (vertical stacking is out of scope); the panel stays put.
+ */
+export declare const pushForSide: (side: OffcanvasSide, push: PushTransform) => PushTransform;

package/dist/components/overlays/offcanvasSide.js

@@ -0,0 +1,29 @@
+import { toCssSize as e } from "./dialogUtils.js";
+//#region src/components/overlays/offcanvasSide.ts
+var t = "right", n = "60vh", r = [
+	"right",
+	"left",
+	"top",
+	"bottom"
+], i = (e) => r.includes(e) ? e : t, a = (e) => e === "left" || e === "right", o = (e) => e === "right" ? void 0 : e, s = (t, r, i, o) => a(t) ? {
+	name: "--kapi-offc-width",
+	value: e(r, o)
+} : {
+	name: "--kapi-offc-height",
+	value: e(i, n)
+}, c = (e, t) => {
+	switch (e) {
+		case "right": return t;
+		case "left": return {
+			scale: t.scale,
+			translateX: t.translateX === 0 ? 0 : -t.translateX
+		};
+		case "top":
+		case "bottom": return {
+			scale: 1,
+			translateX: 0
+		};
+	}
+};
+//#endregion
+export { n as DEFAULT_OFFCANVAS_HEIGHT, t as DEFAULT_OFFCANVAS_SIDE, a as isHorizontalSide, i as normalizeSide, c as pushForSide, o as sideDataAttr, s as sizeVar };