@sincpro/web-ui 0.1.0 → 1.0.0

package/dist/components/chatter/Chatter.js

@@ -1,232 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { usePagination } from "../listing/pages.js";
-import { Pagination } from "../listing/Pagination.js";
-import { fillCopy, useUiCopy } from "../../foundations/copy.js";
-import { Empty } from "../../primitives/notice/Notice.js";
-import { Tabs } from "../../primitives/tabs/Tabs.js";
-import { Tag } from "../../primitives/tag/Tag.js";
-import { DateValue } from "../../primitives/value/Fecha.js";
-import { Avatar } from "../../primitives/value/Person.js";
-import { ArrowRight, ChevronRight, History, MessageSquare, PanelRightClose, PanelRightOpen, Rows3, Zap, } from "lucide-react";
-import { Lock } from "lucide-react";
-import { useState } from "react";
-/* The tab names come from the copy table: the same three words on every record. */
-const TAB_LABEL = {
-    all: (copy) => copy.chatter.tabAll,
-    messages: (copy) => copy.chatter.tabMessages,
-    events: (copy) => copy.chatter.tabEvents,
-};
-/* El ícono de cada pestaña. Con tres, es lo que se reconoce sin leer — y en el
-   chatter angosto, lo único que sobrevive cuando el rótulo se trunca. */
-const TAB_ICON = {
-    all: Rows3,
-    messages: MessageSquare,
-    events: History,
-};
-/* UN SOLO ÍCONO para todos los eventos: el rayo, que es lo que pasó — algo se
-   ejecutó. Había uno por tono y eso convertía la historia en un muestrario:
-   cinco formas y cinco colores para decir cinco veces «pasó algo».
-   Lo que SÍ hay que distinguir es si falló, y eso lo dice el contenedor. */
-const EVENT_ICON = Zap;
-/* DOS estados y no seis: pasó, o falló.
- *
- * El rojo de un fallo queda en la fila entera: es el único color, y tiene que
- * verse sin señalar. El hover no lo reemplaza. Es una marca metida adentro,
- * redondeada, para no pintar el riel. */
-const ROW_SKIN = {
-    ok: "",
-    failed: "bg-bad/6",
-};
-const ROW_HOVER = {
-    ok: "group-hover/entry:bg-ink/4",
-    failed: "group-hover/entry:bg-bad/10",
-};
-const NODE_SKIN = {
-    ok: "bg-ink/8 text-muted",
-    failed: "bg-bad/12 text-bad",
-};
-function at(when) {
-    return when instanceof Date ? when.getTime() : new Date(when).getTime();
-}
-function MessageEntry({ message }) {
-    const copy = useUiCopy();
-    /* Mismo relleno que un evento: las dos clases de entrada viven en la misma
-       lista y con relleno distinto se leen como dos listas pegadas. Antes el
-       mensaje iba a ras del borde y el evento tenía caja, así que el nombre de
-       quien escribió quedaba más cerca del filo que el texto de al lado. */
-    return (_jsxs("li", { className: "flex min-w-0 gap-2.5 px-2.5 py-2", children: [_jsx(Avatar, { name: message.author, size: "sm" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5", children: [_jsx("span", { className: "text-meta font-medium text-ink", children: message.author }), _jsx(DateValue, { when: message.at, format: "relative" }), message.internal !== true ? null : (_jsxs("span", { className: "inline-flex items-center gap-1 text-micro text-muted", title: copy.chatter.internalNote, children: [_jsx(Lock, { className: "size-3", "aria-hidden": true }), copy.chatter.internal] }))] }), _jsx("p", { className: `mt-0.5 text-body whitespace-pre-line ${message.internal === true
-                            ? "rounded-control border border-warn/40 bg-warn/6 px-2 py-1 text-ink"
-                            : "text-ink"}`, children: message.body })] })] }));
-}
-/** El cambio de estado, cuando lo hubo: de qué a qué.
- *
- *  Es la línea más útil de una historia de gestión y la que peor se contaba: «el
- *  proyecto cambió de estado» obliga a buscar el evento anterior para saber de
- *  dónde venía. Dos fichas y una flecha se leen sin buscar nada.
- *
- *  El ESTADO VIEJO va apagado y el nuevo en tinta: lo que importa es dónde
- *  quedó, y el de antes está para dar contexto, no para competir.
- *
- *  La cápsula es la de `Tag`: pastilla, pelo, mismo relleno. Dos radios
- *  distintos para la misma idea de «una ficha» es una familia de más. */
-const STATE_CHIP = "inline-flex max-w-32 min-w-0 items-center truncate rounded-pill border border-line-strong bg-ink/5 px-2 py-0.5 text-micro";
-function Moved({ from, to }) {
-    return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1", children: [from === undefined ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: `${STATE_CHIP} text-muted`, children: from }), _jsx(ArrowRight, { className: "size-3 shrink-0 text-muted/60", strokeWidth: 2.5, "aria-hidden": true })] })), _jsx("span", { className: `${STATE_CHIP} font-medium text-ink`, children: to })] }));
-}
-/**
- * UN EVENTO, como línea de una línea de tiempo.
- *
- * ── Por qué hay un riel y no sólo puntos ────────────────────────────
- *
- * El riel —la línea vertical que une los puntos— es lo que convierte una lista
- * en una CRONOLOGÍA. Sin él son renglones sueltos que casualmente tienen fecha;
- * con él se lee que una cosa pasó después de la otra, que es la pregunta que
- * alguien trae cuando abre esto.
- *
- * ── El color es del punto y de nada más ─────────────────────────────
- *
- * El tono pinta el punto, y el texto se queda en tinta normal. Un renglón entero
- * en rojo no se lee más urgente: se lee peor, y cuando hay tres seguidos deja de
- * significar nada. El punto alcanza para encontrar los rojos de un vistazo, que
- * es para lo que el color sirve en una lista larga.
- */
-/** El error: la primera línea, y el resto a un clic.
- *
- *  Un stack de cuarenta renglones adentro de una historia tapa la historia; el
- *  primer renglón casi siempre alcanza. Pero el resto tiene que estar —quien
- *  mira esta pantalla muchas veces no tiene acceso a los logs— así que se
- *  guarda, no se descarta.
- *
- *  Sin color propio: el rojo ya lo puso el nodo. Esto es una cita textual de la
- *  máquina, así que se ve como lo que es — monoespaciada sobre el piso. */
-function ErrorLine({ error }) {
-    const copy = useUiCopy();
-    const [open, setOpen] = useState(false);
-    const lineas = error.split("\n");
-    const primera = lineas[0] ?? "";
-    const hayMas = lineas.length > 1 || primera.length > 120;
-    return (_jsxs("div", { className: "min-w-0 rounded-control border border-line bg-ground px-2 py-1", children: [_jsx("p", { className: `min-w-0 font-mono text-micro text-ink ${open ? "break-words whitespace-pre-wrap" : "truncate"}`, children: open ? error : primera }), !hayMas ? null : (_jsx("button", { type: "button", onClick: () => setOpen(!open), className: "mt-0.5 cursor-pointer text-micro text-muted underline-offset-2 hover:text-ink hover:underline", children: open ? copy.chatter.less : copy.chatter.more }))] }));
-}
-/**
- * UN EVENTO: una FILA que se aprieta, no un renglón.
- *
- * ── Qué se ve sin abrir ─────────────────────────────────────────────
- *
- * El rótulo, quién —si lo hubo— y cuándo. Nada más. Es lo que alguien lee para
- * recorrer la historia; todo lo demás es para cuando ese renglón no alcanzó.
- *
- * ── Un solo ícono, y el contenedor dice si falló ────────────────────
- *
- * El rayo, porque eso es lo que pasó: algo se ejecutó. Había un ícono y un color
- * por tono, y seis colores no señalan nada — una historia de veinte eventos
- * quedaba como una bolsa de caramelos, y el que falló no saltaba más que los
- * otros. El rojo sirve exactamente mientras sea el único.
- *
- * Lo que distingue un error es el TINTE DE LA FILA, translúcido. Y sirve dos
- * veces: dice que falló, y dice que la fila es una zona que se puede apretar —
- * que era lo que no se notaba.
- */
-function EventEntry({ event }) {
-    const failed = event.tone === "bad" || event.error !== undefined;
-    const skin = failed ? "failed" : "ok";
-    const Icon = event.icon ?? EVENT_ICON;
-    /* Arranca CERRADO: lo de adentro es para cuando el renglón no alcanzó. */
-    const [open, setOpen] = useState(false);
-    const hayMas = event.moved !== undefined || event.detail !== undefined || event.error !== undefined;
-    const fila = (_jsxs(_Fragment, { children: [_jsx("span", { className: `relative z-10 flex size-6 shrink-0 items-center justify-center rounded-pill ring-2 ring-surface ${NODE_SKIN[skin]}`, children: _jsx(Icon, { className: "size-3", strokeWidth: 2.5, "aria-hidden": true }) }), _jsx("span", { className: "min-w-0 flex-1 truncate text-meta text-ink", children: event.label }), event.by === undefined ? null : (_jsx("span", { className: "hidden shrink-0 truncate text-micro text-muted @xs:inline", children: event.by })), _jsx("span", { className: "shrink-0", children: _jsx(DateValue, { when: event.at, format: "relative" }) }), hayMas ? (_jsx(ChevronRight, { className: `size-3.5 shrink-0 text-muted transition-transform duration-(--duration-instant) ${open ? "rotate-90" : ""}`, strokeWidth: 2.5, "aria-hidden": true })) : (
-            /* Hueco del mismo ancho: sin él, las filas que no se abren corren la
-               fecha y la columna deja de estar alineada. */
-            _jsx("span", { className: "size-3.5 shrink-0", "aria-hidden": true }))] }));
-    return (_jsxs("li", { className: "group/event relative @container", children: [_jsx("span", { "aria-hidden": true, className: "absolute top-8 left-5.5 w-px bg-line group-last/event:hidden" }), hayMas ? (_jsxs("button", { type: "button", onClick: () => setOpen(!open), "aria-expanded": open, className: `group/entry relative flex w-full min-w-0 cursor-pointer items-center rounded-box px-2.5 py-2 text-left focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary ${ROW_SKIN[skin]}`, children: [_jsx("span", { "aria-hidden": true, className: `pointer-events-none absolute inset-x-1 inset-y-0.5 rounded-control ${ROW_HOVER[skin]}` }), _jsx("span", { className: "relative z-10 flex min-w-0 flex-1 items-center gap-2.5", children: fila })] })) : (_jsx("div", { className: `flex w-full min-w-0 items-center gap-2.5 rounded-box px-2.5 py-2 ${failed ? "bg-bad/6" : ""}`, children: fila })), !open ? null : (
-            /* Lo de adentro, alineado bajo el rótulo y sobre el piso: es el DETALLE
-               de esa línea, no una línea más de la historia. */
-            _jsxs("div", { className: "mt-0.5 mb-1 ml-11 flex min-w-0 flex-col gap-1.5 rounded-box bg-ground px-2.5 py-2", children: [event.moved === undefined ? null : (_jsx(Moved, { ...(event.moved.from === undefined ? {} : { from: event.moved.from }), to: event.moved.to })), event.by === undefined ? null : (_jsx("span", { className: "text-micro text-muted @xs:hidden", children: event.by })), event.detail === undefined ? null : (_jsx("div", { className: "min-w-0 text-micro text-muted", children: event.detail })), event.error === undefined ? null : _jsx(ErrorLine, { error: event.error })] }))] }));
-}
-export function Chatter({ messages, events, composer, current, onCurrentChange, open, onToggle, label: ownLabel, layout = "page", embedded = false, }) {
-    const copy = useUiCopy();
-    const label = ownLabel ?? copy.chatter.history;
-    const [owned, setOwned] = useState("all");
-    const view = current ?? owned;
-    const setView = onCurrentChange ?? setOwned;
-    const hasMessages = messages !== undefined;
-    const hasEvents = events !== undefined;
-    /* Las tres pestañas sólo cuando hay DOS fuentes: con una sola, «todo» y esa
-       una son la misma lista, y tres solapas donde dos dicen lo mismo es un
-       control que no decide nada. */
-    const tabs = hasMessages && hasEvents ? ["all", "messages", "events"] : [];
-    const showing = tabs.length === 0 ? "all" : view;
-    const entries = [
-        ...(showing === "events" ? [] : (messages ?? [])).map((message) => ({
-            kind: "message",
-            at: at(message.at),
-            message,
-        })),
-        ...(showing === "messages" ? [] : (events ?? [])).map((event) => ({
-            kind: "event",
-            at: at(event.at),
-            event,
-        })),
-    ].sort((a, b) => b.at - a.at);
-    const total = (messages?.length ?? 0) + (events?.length ?? 0);
-    /* Cortado acá y no por quien compone: es la misma lista en todos los
-       registros, y una historia que sólo hace scroll es una historia que se
-       abandona a la mitad. */
-    const pages = usePagination(entries, { pageSize: 15 });
-    const page = layout === "page";
-    /* Plegado. Embebido es la última fila de la hoja: el marco lo pone la hoja
-       y el hover es una marca redondeada adentro, para no pintar la línea que
-       la separa del papel. Suelta, o al costado, sí es una tarjeta. */
-    if (!open) {
-        const strip = page && embedded;
-        const face = (_jsxs(_Fragment, { children: [_jsx(MessageSquare, { className: "size-4 shrink-0 text-muted", "aria-hidden": true }), _jsx("span", { className: page
-                        ? "min-w-0 truncate text-meta text-muted"
-                        : "min-w-0 truncate text-meta text-muted @4xl:hidden", children: label }), total === 0 ? null : _jsx(Tag, { tone: "neutral", children: total }), _jsx(PanelRightOpen, { className: page
-                        ? "ml-auto size-4 shrink-0 text-muted"
-                        : "ml-auto size-4 shrink-0 text-muted @4xl:ml-0", "aria-hidden": true })] }));
-        return (_jsxs("button", { type: "button", onClick: onToggle, title: fillCopy(copy.chatter.open, { label }), className: page
-                ? strip
-                    ? "group/strip relative flex w-full shrink-0 cursor-pointer items-center px-3 py-2.5"
-                    : "flex w-full shrink-0 cursor-pointer items-center gap-2 rounded-box border border-line bg-surface px-3 py-2.5 hover:bg-ground"
-                : "flex w-full shrink-0 cursor-pointer items-center gap-2 self-start rounded-box border border-line bg-surface px-2.5 py-2 hover:bg-ground @4xl:w-auto @4xl:flex-col @4xl:px-1.5 @4xl:py-2.5", children: [strip ? (_jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-1 inset-y-0.5 rounded-control group-hover/strip:bg-ground" })) : null, strip ? (_jsx("span", { className: "relative z-10 flex min-w-0 flex-1 items-center gap-2", children: face })) : (face)] }));
-    }
-    return (_jsxs("aside", { className: page
-            ? embedded
-                ? "flex w-full flex-col"
-                : "flex w-full flex-col rounded-box border border-line bg-surface"
-            : "flex w-full shrink-0 flex-col self-start rounded-box border border-line bg-surface @4xl:w-(--container-chatter)", children: [_jsxs("header", { className: `flex min-w-0 items-end gap-1 border-b border-line bg-ground px-2 pt-2 ${page && embedded ? "" : "rounded-t-box"}`, children: [tabs.length === 0 ? (_jsxs("span", { className: "px-2 py-1.5 text-meta font-medium text-ink", children: [label, total === 0 ? null : (_jsx("span", { className: "ml-1.5 text-micro text-muted", children: total }))] })) : (_jsx(Tabs, { label: label, current: showing, onSelect: (id) => setView(id), tabs: tabs.map((tab) => ({
-                            id: tab,
-                            label: TAB_LABEL[tab](copy),
-                            icon: TAB_ICON[tab],
-                            count: tab === "messages"
-                                ? (messages?.length ?? 0)
-                                : tab === "events"
-                                    ? (events?.length ?? 0)
-                                    : total,
-                        })) })), _jsx("button", { type: "button", onClick: onToggle, title: fillCopy(copy.chatter.fold, { label }), className: "mb-1.5 ml-auto inline-flex size-(--size-control-sm) shrink-0 cursor-pointer items-center justify-center rounded-pill text-muted transition-colors duration-(--duration-instant) hover:bg-ink/6 hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", children: _jsx(PanelRightClose, { className: "size-(--size-icon-md)", "aria-hidden": true }) })] }), _jsxs("div", { className: page
-                    ? "flex w-full min-w-0 max-w-(--container-prose) flex-col gap-3 px-3.5 py-3"
-                    : "flex min-w-0 flex-col gap-3 px-2.5 py-2.5", children: [composer === undefined || showing === "events" ? null : composer, entries.length === 0 ? (_jsx(Empty, { sentence: copy.chatter.empty })) : (_jsxs(_Fragment, { children: [_jsx("ol", { className: "flex flex-col", children: pages.pageItems.map((entry) => entry.kind === "message" ? (_jsx(MessageEntry, { message: entry.message }, `m:${entry.message.id}`)) : (_jsx(EventEntry, { event: entry.event }, `e:${entry.event.id}`))) }), entries.length <= 15 ? null : _jsx(Pagination, { ...pages.bridge })] }))] })] }));
-}
-/** Whether the chatter is open, when the page has no better answer.
- *
- *  **Starts folded.** It began the other way round —a history nobody opens is a
- *  history nobody reads— and seeing it took the argument apart: open, it holds a
- *  22rem column of context on every record you open, before anybody asked for
- *  any. Folded it still says how many there are, which is the half that has to
- *  be free; reading them is a click, and a click you chose.
- *
- *  It is the same answer for both layouts. A default that depends on the width
- *  would mean the same record shows a different screen depending on how many
- *  panels happen to be open next to it, and that is not a default, it is a
- *  surprise. */
-export function useChatter(initial = false) {
-    const [open, setOpen] = useState(initial);
-    return {
-        open,
-        toggle: () => setOpen((current) => !current),
-        /** Open it without closing it if it already was. What a button from outside
-         *  needs —«events 12»— when pressing it twice must not hide the very thing
-         *  it promised to show. */
-        show: () => setOpen(true),
-    };
-}

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

@@ -1,3 +0,0 @@
-export { Chatter, type ChatterEvent, type ChatterLayout, type ChatterProps, type ChatterView, useChatter, } from "./Chatter.js";
-export { type Message, MessageComposer, type MessageComposerProps, type MessageKind, writeANote, } from "./Messages.js";
-export { Timeline, type TimelineItemProps, type TimelineProps, } from "./Timeline.js";

package/dist/components/chatter/index.js

@@ -1,4 +0,0 @@
-/* What a record has been through, beside it: messages and events in one column. */
-export { Chatter, useChatter, } from "./Chatter.js";
-export { MessageComposer, writeANote, } from "./Messages.js";
-export { Timeline, } from "./Timeline.js";

package/dist/components/navigation/CommandPalette.d.ts

@@ -1,40 +0,0 @@
-import { type PaletteCommand } from "./commands.js";
-/**
- * The search box and the list, without the modal around them.
- *
- * Context: split out so the filtering can be rendered on its own — in a test, with a query
- * already typed — since the modal is a portal that only exists in a browser.
- */
-export declare function CommandSearch({ commands, onRun, query, onQueryChange, placeholder, }: {
-    commands: readonly PaletteCommand[];
-    onRun: (id: string) => void;
-    query?: string;
-    onQueryChange?: (next: string) => void;
-    placeholder?: string;
-}): import("react").JSX.Element;
-/**
- * A modal search over everything the app can do — go to a screen, create a record — opened
- * with ⌘K (Ctrl+K) and run with Enter.
- *
- * Context: it is controlled (`open`, `onOpenChange`) and does not bind the shortcut itself,
- * because an app has ONE palette and many screens: the key is bound once, where the palette
- * lives, with `useCommandPaletteShortcut`. Running a command closes it — the palette is a
- * path, not a place to stay.
- */
-export declare function CommandPalette({ open, onOpenChange, commands, onRun, placeholder, }: {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    commands: readonly PaletteCommand[];
-    /** A command was chosen. The palette closes on its own. */
-    onRun: (id: string) => void;
-    /** The search box's prompt and its accessible name. By default, the copy table's. */
-    placeholder?: string;
-}): import("react").JSX.Element;
-/**
- * Binds ⌘K (Ctrl+K on Windows and Linux) to open the palette, anywhere in the page.
- *
- * Context: both modifiers are accepted on every platform. Telling them apart by the user
- * agent guesses wrong on a Mac with a PC keyboard, and the cost of accepting both is that
- * Ctrl+K on a Mac — «delete to the end of the line» in a text box — opens the palette.
- */
-export declare function useCommandPaletteShortcut(setOpen: (open: boolean) => void): void;

package/dist/components/navigation/CommandPalette.js

@@ -1,114 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { commandMatches, groupCommands, } from "./commands.js";
-import { AriaLocale } from "../../foundations/aria.js";
-import { useUiCopy } from "../../foundations/copy.js";
-import { tv } from "../../foundations/variants.js";
-import { Search, X } from "lucide-react";
-import { useEffect, useMemo } from "react";
-import { Autocomplete, Button as AriaButton, Dialog, Header, Input, Keyboard, Menu, MenuItem, MenuSection, Modal, ModalOverlay, SearchField, useFilter, } from "react-aria-components";
-/* ==================================================================== *
- *  COMMAND PALETTE — ⌘K, type three letters, Enter.
- *
- *  An ERP has a hundred screens and twenty «new» buttons, and the people who
- *  use it all day stop wanting to look for any of them: they know the name of
- *  what they want. The palette is the shortest path from knowing the name to
- *  being there — one key to open, a few letters, Enter — without leaving the
- *  keyboard and without knowing in which menu of which module it lives.
- *
- *      ┌──────────────────────────────────────────────┐
- *      │ 🔍 fact                                    ✕ │
- *      ├──────────────────────────────────────────────┤
- *      │ IR A…                                        │
- *      │ ▌🧾 Facturas                                 │  ← Enter runs it
- *      │ CREAR…                                       │
- *      │   ＋ Nueva factura                       ⌘N  │
- *      └──────────────────────────────────────────────┘
- *
- *  React Aria's `Autocomplete` drives it: focus stays in the search box while
- *  the arrows walk the list (virtual focus), the first match is highlighted as
- *  you type so Enter always does something, and the modal traps focus, closes
- *  on Escape and on a click outside, and gives the focus back.
- *
- *  The match is the locale's (`useFilter` inside `AriaLocale`): «facturacion»
- *  finds «Facturación» because nobody types the accent when they are in a hurry.
- * ==================================================================== */
-const overlay = tv({
-    base: "fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-scrim/40 px-4 pt-24 transition-opacity duration-(--duration-quick) ease-(--ease-out)",
-    variants: {
-        isEntering: { true: "opacity-0" },
-        isExiting: { true: "opacity-0" },
-    },
-});
-const surface = tv({
-    base: "w-full max-w-xl overflow-hidden rounded-panel border border-line-strong bg-surface text-ink shadow-window outline-0 transition-[opacity,translate] duration-(--duration-quick) ease-(--ease-out) forced-colors:bg-[Canvas]",
-    variants: {
-        isEntering: { true: "-translate-y-1 opacity-0" },
-        isExiting: { true: "opacity-0" },
-    },
-});
-const item = tv({
-    base: "flex cursor-default items-center gap-2 rounded-control px-2 py-1.5 text-meta text-ink outline-0 select-none",
-    variants: {
-        isFocused: {
-            true: "bg-primary/8 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
-        },
-        isPressed: { true: "bg-primary/12" },
-        isDisabled: { true: "text-muted forced-colors:text-[GrayText]" },
-    },
-});
-/**
- * The search box and the list, without the modal around them.
- *
- * Context: split out so the filtering can be rendered on its own — in a test, with a query
- * already typed — since the modal is a portal that only exists in a browser.
- */
-export function CommandSearch({ commands, onRun, query, onQueryChange, placeholder, }) {
-    const copy = useUiCopy();
-    const { contains } = useFilter({ sensitivity: "base" });
-    const byId = useMemo(() => new Map(commands.map((c) => [c.id, c])), [commands]);
-    const groups = useMemo(() => groupCommands(commands), [commands]);
-    const hint = placeholder ?? copy.search.placeholder;
-    return (_jsxs(Autocomplete, { ...(query === undefined ? {} : { inputValue: query }), ...(onQueryChange === undefined ? {} : { onInputChange: onQueryChange }), filter: (_text, input, node) => {
-            const command = byId.get(String(node.key));
-            return command === undefined || commandMatches(command, input, contains);
-        }, children: [_jsxs(SearchField, { "aria-label": hint, autoFocus: true, className: "group flex items-center gap-2 border-b border-line px-3", children: [_jsx(Search, { className: "size-(--size-icon-md) shrink-0 text-muted", strokeWidth: 2, "aria-hidden": true }), _jsx(Input, { placeholder: hint, className: "h-(--size-control-lg) min-w-0 flex-1 bg-transparent text-body text-ink outline-0 placeholder:text-muted [&::-webkit-search-cancel-button]:hidden" }), _jsx(AriaButton, { className: "inline-flex shrink-0 items-center justify-center rounded-mark p-1 text-muted transition-colors duration-(--duration-instant) group-empty:invisible hover:bg-ink/6 hover:text-ink pressed:bg-ink/10", children: _jsx(X, { className: "size-(--size-icon-md)", strokeWidth: 2, "aria-hidden": true }) })] }), _jsx(Menu, { "aria-label": hint, onAction: (key) => onRun(String(key)), renderEmptyState: () => (_jsx("p", { className: "px-3 py-6 text-center text-meta text-muted italic", children: copy.menu.empty })), className: "max-h-96 overflow-y-auto p-1 outline-0", children: groups.map((group) => (_jsxs(MenuSection, { id: group.section ?? "-", className: "not-first:mt-1", children: [group.section === undefined ? null : (_jsx(Header, { className: "px-2 pt-2 pb-1 text-micro font-medium text-muted", children: group.section })), group.commands.map((command) => {
-                            const Icon = command.icon;
-                            return (_jsxs(MenuItem, { id: command.id, textValue: command.label, className: item, children: [_jsx("span", { className: "flex size-(--size-icon-md) shrink-0 items-center justify-center text-muted", children: Icon === undefined ? null : (_jsx(Icon, { className: "size-(--size-icon-md)", strokeWidth: 2, "aria-hidden": true })) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: command.label }), command.shortcut === undefined ? null : (_jsx(Keyboard, { className: "shrink-0 rounded-mark border border-line px-1.5 font-sans text-micro text-muted tabular-nums", children: command.shortcut }))] }, command.id));
-                        })] }, group.section ?? ""))) })] }));
-}
-/**
- * A modal search over everything the app can do — go to a screen, create a record — opened
- * with ⌘K (Ctrl+K) and run with Enter.
- *
- * Context: it is controlled (`open`, `onOpenChange`) and does not bind the shortcut itself,
- * because an app has ONE palette and many screens: the key is bound once, where the palette
- * lives, with `useCommandPaletteShortcut`. Running a command closes it — the palette is a
- * path, not a place to stay.
- */
-export function CommandPalette({ open, onOpenChange, commands, onRun, placeholder, }) {
-    const copy = useUiCopy();
-    return (_jsx(AriaLocale, { children: _jsx(ModalOverlay, { isOpen: open, onOpenChange: onOpenChange, isDismissable: true, className: overlay, children: _jsx(Modal, { className: surface, children: _jsx(Dialog, { "aria-label": placeholder ?? copy.search.placeholder, className: "outline-0", children: _jsx(CommandSearch, { commands: commands, onRun: (id) => {
-                            onOpenChange(false);
-                            onRun(id);
-                        }, ...(placeholder === undefined ? {} : { placeholder }) }) }) }) }) }));
-}
-/**
- * Binds ⌘K (Ctrl+K on Windows and Linux) to open the palette, anywhere in the page.
- *
- * Context: both modifiers are accepted on every platform. Telling them apart by the user
- * agent guesses wrong on a Mac with a PC keyboard, and the cost of accepting both is that
- * Ctrl+K on a Mac — «delete to the end of the line» in a text box — opens the palette.
- */
-export function useCommandPaletteShortcut(setOpen) {
-    useEffect(() => {
-        const onKey = (e) => {
-            if (e.key.toLowerCase() !== "k" || !(e.metaKey || e.ctrlKey) || e.altKey)
-                return;
-            e.preventDefault();
-            setOpen(true);
-        };
-        document.addEventListener("keydown", onKey);
-        return () => document.removeEventListener("keydown", onKey);
-    }, [setOpen]);
-}

package/dist/components/navigation/commands.d.ts

@@ -1,30 +0,0 @@
-import type { LucideIcon } from "lucide-react";
-/** Something the palette can run: go to a screen, create a record, open a report. */
-export interface PaletteCommand {
-    id: string;
-    label: string;
-    /** The heading it is listed under: «Ir a…», «Crear…». Commands without one go first,
-     *  without a heading. */
-    section?: string;
-    icon?: LucideIcon;
-    /** The key that runs it without the palette, as it should be read: «⌘N», «Alt+F». It is
-     *  only drawn — the palette is where the shortcut gets learned, not where it is bound. */
-    shortcut?: string;
-    /** Other words that should find it: «factura» finds «Nueva venta» when the people who use
-     *  it call it that. */
-    keywords?: readonly string[];
-}
-/** The commands under each heading, headings in the order they first appear. */
-export declare function groupCommands(commands: readonly PaletteCommand[]): {
-    section: string | undefined;
-    commands: PaletteCommand[];
-}[];
-/**
- * Whether a command answers a query. `contains` is the locale's comparison — React Aria's
- * `useFilter` in the palette — so «facturacion» finds «Facturación» and an uppercase query
- * finds a lowercase label.
- *
- * Every word of the query has to appear, in any order, in the label or the keywords:
- * «nueva fac» finds «Nueva factura», and so does «factura nueva».
- */
-export declare function commandMatches(command: PaletteCommand, query: string, contains: (text: string, part: string) => boolean): boolean;

package/dist/components/navigation/commands.js

@@ -1,30 +0,0 @@
-/** The commands under each heading, headings in the order they first appear. */
-export function groupCommands(commands) {
-    const groups = new Map();
-    /* The commands with no heading are listed first, wherever they were written. */
-    if (commands.some((c) => c.section === undefined))
-        groups.set(undefined, []);
-    for (const command of commands) {
-        const group = groups.get(command.section);
-        if (group === undefined)
-            groups.set(command.section, [command]);
-        else
-            group.push(command);
-    }
-    return [...groups].map(([section, list]) => ({ section, commands: list }));
-}
-/**
- * Whether a command answers a query. `contains` is the locale's comparison — React Aria's
- * `useFilter` in the palette — so «facturacion» finds «Facturación» and an uppercase query
- * finds a lowercase label.
- *
- * Every word of the query has to appear, in any order, in the label or the keywords:
- * «nueva fac» finds «Nueva factura», and so does «factura nueva».
- */
-export function commandMatches(command, query, contains) {
-    const words = query.trim().split(/\s+/).filter(Boolean);
-    if (words.length === 0)
-        return true;
-    const haystack = [command.label, ...(command.keywords ?? [])].join(" ");
-    return words.every((word) => contains(haystack, word));
-}