@sincpro/web-ui 0.2.0 → 1.0.0

package/dist/foundations/slots.js

@@ -1,4 +1,4 @@
-import { Children, Fragment, isValidElement } from "react";
+import { Children, cloneElement, Fragment, isValidElement } from "react";
 /**
  * Marca un componente como ranura y lo devuelve.
  *
@@ -26,11 +26,16 @@ export function slotOf(node) {
  * medio del árbol —lo que escribe cualquiera que ponga dos ranuras bajo un
  * condicional— escondería las ranuras que tiene adentro.
  */
-export function flatten(children) {
+export function flatten(children, prefix = "") {
     const out = [];
     for (const child of Children.toArray(children)) {
         if (isValidElement(child) && child.type === Fragment) {
-            out.push(...flatten(child.props.children));
+            /* The fragment's children are keyed from zero again («.0», «.1»…): without the
+               fragment's own key in front they collide with their new siblings. */
+            out.push(...flatten(child.props.children, `${prefix}${String(child.key)}/`));
+        }
+        else if (prefix !== "" && isValidElement(child)) {
+            out.push(cloneElement(child, { key: `${prefix}${String(child.key)}` }));
         }
         else {
             out.push(child);

package/dist/foundations/types.d.ts

@@ -21,3 +21,10 @@ export type Tone = "neutral" | "info" | "good" | "warn" | "bad" | "accent";
  *  Three and not five: a fourth intermediate step gets picked out of habit and
  *  stops meaning a place. */
 export type Size = "sm" | "md" | "lg";
+/**
+ * WHERE a record opens, in the words a workspace (the composer) uses: the page (with its crumb
+ * back), a modal over the surface that asked, a peek (a drawer, reading without leaving), a
+ * side panel, a floating window; web-ui only SAYS which one the person chose — opening is the
+ * app's (`api.open(ref, { to })`). See the guide «Cómo abrimos las cosas».
+ */
+export type OpenTarget = "modal" | "peek" | "page" | "side" | "window";

package/dist/foundations/types.js

@@ -12,39 +12,3 @@
  *  `list/`, even if it is shared across its three files.
  * ==================================================================== */
 export {};
-/* ==================================================================== *
- *  THE SYSTEM'S TWO API CONVENTIONS
- *
- *  They are here and not in the README because a convention that lives in the
- *  documentation breaks in the first component written in a hurry. Here it is
- *  read by whoever is going to write the next component.
- *
- *  ── 1. How a callback is named ──────────────────────────────────────
- *
- *      onXChange   the component proposes a NEW value for `x`, and whoever
- *                  uses it decides whether to accept it. It ALWAYS goes with
- *                  the `x` prop.
- *                  → onTermsChange(terms), onSelectedChange(set), onSortChange(sort)
- *
- *      onX         something happened that is not a value change: an intent.
- *                  → onClose(), onOpen(), onPromote(), onBrowseAll()
- *
- *  The test for knowing which one: **is there a prop with that name next to
- *  it?** If `value` exists, it is `onValueChange`. If not, it is an event and
- *  goes without a suffix.
- *
- *  ── 2. Controlled, always ───────────────────────────────────────────
- *
- *  Any state the consumer might want to read, store in the URL or restore on
- *  reload is CONTROLLED: `value` + `onValueChange`, with no internal memory.
- *  That is what lets the entire workspace live in the hash.
- *
- *  The exception, and there is only one: **what dies with the component and
- *  nobody cares about afterwards.** An open menu, an expanded filter panel, the
- *  half-typed text in the search box. That does keep state inside, because
- *  exposing it would force every consumer to declare a `useState` for something
- *  they are never going to read.
- *
- *  Put another way: if it makes sense to send it to a colleague over chat so
- *  they see the same thing, it is controlled.
- * ==================================================================== */

package/dist/primitives/block/index.d.ts

@@ -1,4 +1,4 @@
-export { Block, type BlockProps, type BlockStatus, Rule, SectionHeader, } from "./Block.js";
+export { Block, type BlockProps, type BlockStatus, Rule, } from "./Block.js";
 export { FullWidth, SectionGrid } from "./SectionGrid.js";
 export { Line } from "./Line.js";
 export { Step, type StepProps, Steps, type StepsProps, useSteps, } from "./Steps.js";

package/dist/primitives/block/index.js

@@ -1,5 +1,5 @@
 /* The structure of a view: where each section starts and ends. */
-export { Block, Rule, SectionHeader, } from "./Block.js";
+export { Block, Rule, } from "./Block.js";
 export { FullWidth, SectionGrid } from "./SectionGrid.js";
 /* La línea de tres zonas: lo que centra el centro contra la LÍNEA y no contra
    lo que sobra. La usan las dos bandas — la del registro y la de la lista. */

package/dist/primitives/cell/CellStack.d.ts

@@ -31,7 +31,7 @@ export declare function Thumb({ src, alt, icon: Icon, size, }: {
  * card. The second line wraps or truncates (`wrap`); the first always truncates, with the full
  * text on hover.
  */
-export declare function CellStack({ primary, secondary, media, wrap, }: {
+export declare function CellStack({ primary, secondary, media, avatar, wrap, }: {
     /** What the row is — the name. In ink, one line. */
     primary: ReactNode;
     /** What tells it apart — a description, a code, a reference. Small and quiet. */
@@ -42,6 +42,12 @@ export declare function CellStack({ primary, secondary, media, wrap, }: {
         alt?: string;
         icon?: LucideIcon;
     };
+    /** A person or a company instead of `media`: its round face — the photo, or the initials in
+     *  the color it has everywhere. The same contract as a list row's `avatar`. */
+    avatar?: {
+        name: string;
+        src?: string;
+    };
     /** Let the second line wrap (a description) instead of truncating (a code). */
     wrap?: boolean;
 }): import("react").JSX.Element;

package/dist/primitives/cell/CellStack.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from "../value/Avatar.js";
 /**
  * A thumbnail — the photo of a product, the logo of a customer — or, when there is none, its
  * icon on a quiet tile. One size per context so a column of them lines up.
@@ -28,6 +29,8 @@ export function Thumb({ src, alt, icon: Icon, size = "md", }) {
  * card. The second line wraps or truncates (`wrap`); the first always truncates, with the full
  * text on hover.
  */
-export function CellStack({ primary, secondary, media, wrap = false, }) {
-    return (_jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [media === undefined ? null : (_jsx(Thumb, { size: "md", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-meta font-medium text-ink", ...(typeof primary === "string" ? { title: primary } : {}), children: primary }), secondary === undefined ? null : (_jsx("span", { className: `text-micro text-muted ${wrap ? "line-clamp-2" : "truncate"}`, ...(typeof secondary === "string" ? { title: secondary } : {}), children: secondary }))] })] }));
+export function CellStack({ primary, secondary, media, avatar, wrap = false, }) {
+    return (_jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [avatar !== undefined ? (
+            /* The name is written beside it: the photo's `alt` would say it twice. */
+            _jsx("span", { "aria-hidden": true, className: "flex shrink-0", children: _jsx(Avatar, { name: avatar.name, size: "lg", ...(avatar.src === undefined ? {} : { src: avatar.src }) }) })) : media === undefined ? null : (_jsx(Thumb, { size: "md", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-meta font-medium text-ink", ...(typeof primary === "string" ? { title: primary } : {}), children: primary }), secondary === undefined ? null : (_jsx("span", { className: `text-micro text-muted ${wrap ? "line-clamp-2" : "truncate"}`, ...(typeof secondary === "string" ? { title: secondary } : {}), children: secondary }))] })] }));
 }

package/dist/primitives/choice/ComboBox.js

@@ -10,7 +10,7 @@ import { Popover } from "../overlay/Popover.js";
 import { Check, ChevronDown } from "lucide-react";
 import { ComboBox as AriaComboBox, Input, ListBox, ListBoxItem, Text, useFilter, } from "react-aria-components";
 /**
- * One of many, found by typing: the customer of an invoice, the product of a line.
+ * One of a closed list, found by typing: a country, a currency, a tax regime, a unit.
  *
  * Context: a `Select` makes you scroll a list you already know the name in; here you type
  * three letters of it. The filter is React Aria's `contains` in the locale of the copy table
@@ -18,9 +18,13 @@ import { ComboBox as AriaComboBox, Input, ListBox, ListBoxItem, Text, useFilter,
  * The value is the option's `value` string — what the backend stores — never React Aria's
  * `Key`.
  *
- * It is not `Picker`: that one chooses a RECORD among thousands, with metadata rows, a cap
- * and a "see more". This is a closed list already in memory — tens to a few hundred — where
- * one muted line under the name (a tax id, a city) is enough to tell two apart.
+ * The four ways to choose, and which is which:
+ *   - `Select`    a short closed list (a handful): open it and read it.
+ *   - `ComboBox`  a long closed list already in memory (tens to a few hundred): type three
+ *                 letters; one muted line under the name is enough to tell two apart.
+ *   - `Picker`    a RECORD — a customer, a product — among thousands: rows with face, facts
+ *                 and widgets, «Buscar más…», create, and opening the chosen one.
+ *   - `Suggest`   free text that proposes what already exists without forbidding a new one.
  *
  * When nothing matches, the list simply closes: an empty floating box tells nothing the
  * unchanged field does not, and the system has no "no results" sentence of its own here.

package/dist/primitives/choice/KanbanState.d.ts

@@ -0,0 +1,14 @@
+export type KanbanStateValue = "normal" | "done" | "blocked";
+/**
+ * Odoo's kanban state — the traffic light on a card: in progress, ready for the next stage,
+ * blocked.
+ *
+ * Context: it answers «can this move on?» without opening the record, and the stage alone does
+ * not say it — two cards in «propuesta», one waiting on the customer, one ready to send. A dot
+ * never goes alone (docs/PRINCIPLES.md §3): its word is the button's name and title, and the
+ * list it opens says all three. Without `onChange` it only shows.
+ */
+export declare function KanbanState({ value, onChange, }: {
+    value: KanbanStateValue;
+    onChange?: (next: KanbanStateValue) => void;
+}): import("react").JSX.Element;

package/dist/primitives/choice/KanbanState.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { PopoverTrigger } from "../overlay/PopoverTrigger.js";
+const ORDER = ["normal", "done", "blocked"];
+const FILL = {
+    normal: "bg-line-strong",
+    done: "bg-good",
+    blocked: "bg-bad",
+};
+/** The dot as `PopoverTrigger`'s opener: it hands over `expanded` / `haspopup`, which a bare
+ *  `<button>` would pass to the DOM as unknown attributes. */
+function DotButton({ expanded, haspopup, ...rest }) {
+    return _jsx("button", { type: "button", "aria-expanded": expanded, "aria-haspopup": haspopup, ...rest });
+}
+/**
+ * Odoo's kanban state — the traffic light on a card: in progress, ready for the next stage,
+ * blocked.
+ *
+ * Context: it answers «can this move on?» without opening the record, and the stage alone does
+ * not say it — two cards in «propuesta», one waiting on the customer, one ready to send. A dot
+ * never goes alone (docs/PRINCIPLES.md §3): its word is the button's name and title, and the
+ * list it opens says all three. Without `onChange` it only shows.
+ */
+export function KanbanState({ value, onChange, }) {
+    const copy = useUiCopy();
+    const words = copy.kanbanState;
+    const said = `${words.label}: ${words[value]}`;
+    const dot = (state) => (_jsx("span", { "aria-hidden": true, className: `block size-2.5 rounded-pill ${FILL[state]}` }));
+    if (onChange === undefined) {
+        return (_jsx("span", { role: "img", "aria-label": said, title: said, className: "inline-flex p-1", children: dot(value) }));
+    }
+    return (_jsx(PopoverTrigger, { label: words.label, placement: "bottom end", trigger: _jsx(DotButton, { "aria-label": said, title: said, className: "relative z-10 inline-flex rounded-pill p-1 transition-colors duration-(--duration-instant) hover:bg-ink/8 focus-visible:outline-2 focus-visible:outline-primary", children: dot(value) }), children: (close) => (_jsx("div", { role: "radiogroup", "aria-label": words.label, className: "flex flex-col p-1", children: ORDER.map((state) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": state === value, onClick: () => {
+                    onChange(state);
+                    close();
+                }, className: `flex items-center gap-2 rounded-control px-2 py-1.5 text-left text-meta text-ink transition-colors duration-(--duration-instant) hover:bg-ink/5 ${state === value ? "font-medium" : ""}`, children: [dot(state), words[state]] }, state))) })) }));
+}

package/dist/primitives/choice/Priority.d.ts

@@ -0,0 +1,20 @@
+export type PriorityProps = {
+    /** 0 is «sin prioridad». */
+    value: number;
+    /** How many stars. Odoo's three, by default. */
+    max?: number;
+    /** Without it the stars only show. Pressing the star already set clears it, the way Odoo
+     *  does — the only way back to «none» that needs no extra control. */
+    onChange?: (next: number) => void;
+    /** The group's name, when it is not «Prioridad». */
+    label?: string;
+};
+/**
+ * Priority as stars: how urgent a lead, a task or a ticket is, read in a list at a glance.
+ *
+ * Context: a select «baja / media / alta» is read as a word in a column of words; stars are
+ * counted without reading. They are a radio group: arrows move, and it is named — «Prioridad:
+ * 2 de 3» — so it is not colour alone. In the `warn` tone, not the gold: the gold is the
+ * screen's primary action.
+ */
+export declare function Priority({ value, max, onChange, label }: PriorityProps): import("react").JSX.Element;

package/dist/primitives/choice/Priority.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { Star } from "lucide-react";
+import { useRef } from "react";
+/**
+ * Priority as stars: how urgent a lead, a task or a ticket is, read in a list at a glance.
+ *
+ * Context: a select «baja / media / alta» is read as a word in a column of words; stars are
+ * counted without reading. They are a radio group: arrows move, and it is named — «Prioridad:
+ * 2 de 3» — so it is not colour alone. In the `warn` tone, not the gold: the gold is the
+ * screen's primary action.
+ */
+export function Priority({ value, max = 3, onChange, label }) {
+    const copy = useUiCopy();
+    const name = label ?? copy.priority.label;
+    const stars = Array.from({ length: max }, (_, at) => at + 1);
+    const buttons = useRef([]);
+    const said = value === 0 ? copy.priority.none : fillCopy(copy.priority.level, { value, max });
+    const icon = (n) => (_jsx(Star, { "aria-hidden": true, className: `size-(--size-icon-md) ${n <= value ? "fill-warn text-warn" : "text-line-strong"}`, strokeWidth: 1.75 }));
+    if (onChange === undefined) {
+        return (_jsx("span", { role: "img", "aria-label": `${name}: ${said}`, className: "inline-flex items-center gap-0.5", children: stars.map((n) => (_jsx("span", { children: icon(n) }, n))) }));
+    }
+    const step = (event, n) => {
+        const next = event.key === "ArrowRight" || event.key === "ArrowUp"
+            ? Math.min(max, n + 1)
+            : event.key === "ArrowLeft" || event.key === "ArrowDown"
+                ? Math.max(1, n - 1)
+                : null;
+        if (next === null)
+            return;
+        event.preventDefault();
+        onChange(next);
+        buttons.current[next - 1]?.focus();
+    };
+    return (_jsx("span", { role: "radiogroup", "aria-label": name, className: "inline-flex items-center gap-0.5", children: stars.map((n) => (_jsx("button", { ref: (node) => {
+                buttons.current[n - 1] = node;
+            }, type: "button", role: "radio", "aria-checked": value === n, "aria-label": fillCopy(copy.priority.level, { value: n, max }), 
+            /* One stop in the tab order — the set star, or the first — and the arrows inside. */
+            tabIndex: n === Math.max(value, 1) ? 0 : -1, onClick: () => onChange(n === value ? 0 : n), onKeyDown: (event) => step(event, n), className: "relative z-10 rounded-control p-0.5 transition-colors duration-(--duration-instant) hover:bg-ink/6 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary", children: icon(n) }, n))) }));
+}

package/dist/primitives/choice/Slider.d.ts

@@ -12,5 +12,10 @@ export type SliderProps = {
     describedBy?: string;
     /** Forces the mode. By default it inherits the form's: in read mode it draws the figure. */
     mode?: FormMode;
+    /** The name when it is NOT inside a `Field` — a toolbar's zoom. Inside a field, the
+     *  field's label names it. */
+    "aria-label"?: string;
+    /** The figure beside the track. Off for a control whose number means nothing — a zoom. */
+    output?: boolean;
 };
-export declare function Slider({ value, onChange, min, max, step, format, disabled, id: ownId, describedBy: ownDescribedBy, mode, }: SliderProps): import("react").JSX.Element;
+export declare function Slider({ value, onChange, min, max, step, format, disabled, id: ownId, describedBy: ownDescribedBy, mode, "aria-label": ariaLabel, output, }: SliderProps): import("react").JSX.Element;

package/dist/primitives/choice/Slider.js

@@ -33,7 +33,7 @@ const thumb = tv({
         },
     },
 });
-export function Slider({ value, onChange, min, max, step = 1, format, disabled = false, id: ownId, describedBy: ownDescribedBy, mode, }) {
+export function Slider({ value, onChange, min, max, step = 1, format, disabled = false, id: ownId, describedBy: ownDescribedBy, mode, "aria-label": ariaLabel, output = true, }) {
     const copy = useUiCopy();
     const { id, labelledBy, describedBy } = useFieldIds({
         id: ownId,
@@ -42,5 +42,5 @@ export function Slider({ value, onChange, min, max, step = 1, format, disabled =
     if (useFormMode(mode) === "read") {
         return _jsx(ReadValue, { value: new Intl.NumberFormat(copy.locale, format).format(value) });
     }
-    return (_jsx(AriaLocale, { children: _jsxs(AriaSlider, { id: id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, value: value, onChange: (next) => onChange?.(next), minValue: min, maxValue: max, step: step, formatOptions: format, isDisabled: disabled, className: "flex h-(--size-control-md) w-full min-w-0 items-center gap-3 disabled:opacity-45", children: [_jsxs(SliderTrack, { className: "relative flex h-(--size-control-md) min-w-0 flex-1 cursor-pointer items-center disabled:cursor-not-allowed", children: [_jsx("span", { className: "relative h-1 w-full rounded-pill bg-line-strong forced-colors:bg-[ButtonBorder]", children: _jsx(SliderFill, { className: "rounded-pill bg-primary disabled:bg-muted forced-colors:bg-[Highlight]" }) }), _jsx(SliderThumb, { "aria-labelledby": labelledBy, "aria-describedby": describedBy, className: thumb })] }), _jsx(SliderOutput, { className: "w-14 shrink-0 text-right text-meta text-ink tabular-nums" })] }) }));
+    return (_jsx(AriaLocale, { children: _jsxs(AriaSlider, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, value: value, onChange: (next) => onChange?.(next), minValue: min, maxValue: max, step: step, formatOptions: format, isDisabled: disabled, className: "flex h-(--size-control-md) w-full min-w-0 items-center gap-3 disabled:opacity-45", children: [_jsxs(SliderTrack, { className: "relative flex h-(--size-control-md) min-w-0 flex-1 cursor-pointer items-center disabled:cursor-not-allowed", children: [_jsx("span", { className: "relative h-1 w-full rounded-pill bg-line-strong forced-colors:bg-[ButtonBorder]", children: _jsx(SliderFill, { className: "rounded-pill bg-primary disabled:bg-muted forced-colors:bg-[Highlight]" }) }), _jsx(SliderThumb, { "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, className: thumb })] }), output ? (_jsx(SliderOutput, { className: "w-14 shrink-0 text-right text-meta text-ink tabular-nums" })) : null] }) }));
 }

package/dist/primitives/choice/index.d.ts

@@ -1,5 +1,7 @@
 export { ComboBox, type ComboBoxProps } from "./ComboBox.js";
+export { KanbanState, type KanbanStateValue, } from "./KanbanState.js";
 export { type ChoiceOption, type SegmentOption, } from "./options.js";
+export { Priority, type PriorityProps } from "./Priority.js";
 export { RadioGroup, type RadioGroupProps, } from "./RadioGroup.js";
 export { SearchField, type SearchFieldProps, } from "./SearchField.js";
 export { SegmentedControl, type SegmentedControlProps, } from "./SegmentedControl.js";

package/dist/primitives/choice/index.js

@@ -2,7 +2,9 @@
    (RadioGroup, SegmentedControl), prender o apagar (Switch), un valor en un rango (Slider)
    y buscar un texto suelto (SearchField). El valor es siempre un dato plano. */
 export { ComboBox } from "./ComboBox.js";
+export { KanbanState, } from "./KanbanState.js";
 export {} from "./options.js";
+export { Priority } from "./Priority.js";
 export { RadioGroup, } from "./RadioGroup.js";
 export { SearchField, } from "./SearchField.js";
 export { SegmentedControl, } from "./SegmentedControl.js";

package/dist/primitives/dialog/Dialog.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type PointerEvent, type ReactNode } from "react";
 /** Where this dialog came from. It is drawn in the header, small. */
 export interface DialogContext {
     /** The category, in small caps: «factura», «cliente». It answers *what kind of
@@ -52,13 +52,19 @@ export interface DialogProps {
      *  It is the tooltip and the accessible name, and it is not drawn. */
     expandLabel?: string;
     footer?: ReactNode;
+    /** The window can be dragged by its header, to see what is behind it — the form a «search
+     *  more» was opened from. Off on a phone, where the window is a bottom sheet. */
+    movable?: boolean;
     children: ReactNode;
 }
 /** The inside of the window: React Aria's `Dialog` with the header, body and footer.
  *
  *  Internal — exported only so a test can read its markup, which the modal (a portal)
  *  does not produce on the server. */
-export declare function DialogSurface({ title, subtitle, context, onClose, onExpand, expandLabel, footer, children, }: Omit<DialogProps, "open" | "width">): import("react").JSX.Element;
+export declare function DialogSurface({ title, subtitle, context, onClose, onExpand, expandLabel, footer, children, onDragStart, }: Omit<DialogProps, "open" | "width" | "movable"> & {
+    /** Set by a movable `Dialog`: the header is the handle. */
+    onDragStart?: (event: PointerEvent<HTMLElement>) => void;
+}): import("react").JSX.Element;
 /**
  * What has to be answered before moving on: a short form that blocks the page and keeps
  * saying what it is about.
@@ -68,7 +74,7 @@ export declare function DialogSurface({ title, subtitle, context, onClose, onExp
  * stays mounted for the exit transition after `open` turns `false`, so the window fades
  * out instead of vanishing.
  */
-export declare function Dialog({ open, width, onClose, ...surface }: DialogProps): import("react").JSX.Element;
+export declare function Dialog({ open, width, onClose, movable, ...surface }: DialogProps): import("react").JSX.Element;
 export interface WizardStep {
     id: string;
     label: string;

package/dist/primitives/dialog/Dialog.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useUiCopy } from "../../foundations/copy.js";
+import { HANDHELD_WIDTH } from "../../foundations/layout.js";
 import { cn, tv } from "../../foundations/variants.js";
 import { Button, IconButton } from "../button/Button.js";
 import { Maximize2, X } from "lucide-react";
-import { useId } from "react";
+import { useEffect, useId, useState } from "react";
 import { Dialog as AriaDialog, Heading, Modal, ModalOverlay } from "react-aria-components";
 /** The scrim. The page stays visible under it — the dialog is ABOUT something on it.
  *  On a phone it drops the padding and pushes the window to the bottom edge. */
@@ -39,11 +40,11 @@ export const dialogStyles = { overlay, modal };
  *
  *  Internal — exported only so a test can read its markup, which the modal (a portal)
  *  does not produce on the server. */
-export function DialogSurface({ title, subtitle, context, onClose, onExpand, expandLabel, footer, children, }) {
+export function DialogSurface({ title, subtitle, context, onClose, onExpand, expandLabel, footer, children, onDragStart, }) {
     const copy = useUiCopy();
     const subtitleId = useId();
     const expand = expandLabel ?? copy.dialog.expand;
-    return (_jsxs(AriaDialog, { "aria-describedby": subtitle === undefined ? undefined : subtitleId, className: "flex max-h-[inherit] min-h-0 flex-1 flex-col outline-0", children: [_jsxs("header", { className: "flex shrink-0 items-start gap-3 border-b border-line px-4 py-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [context === undefined ? null : (
+    return (_jsxs(AriaDialog, { "aria-describedby": subtitle === undefined ? undefined : subtitleId, className: "flex max-h-[inherit] min-h-0 flex-1 flex-col outline-0", children: [_jsxs("header", { onPointerDown: onDragStart, className: cn("flex shrink-0 items-start gap-3 border-b border-line px-4 py-3", onDragStart !== undefined && "cursor-grab select-none active:cursor-grabbing"), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [context === undefined ? null : (
                             /* The context, on top and small. It is what keeps the first field
                                from being «about what?». Same voice as a field label, not a
                                console kicker: mono uppercase next to a form title was a
@@ -59,11 +60,46 @@ export function DialogSurface({ title, subtitle, context, onClose, onExpand, exp
  * stays mounted for the exit transition after `open` turns `false`, so the window fades
  * out instead of vanishing.
  */
-export function Dialog({ open, width = "md", onClose, ...surface }) {
+export function Dialog({ open, width = "md", onClose, movable = false, ...surface }) {
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    /* Every opening starts centred: where it was dragged last time is not where it belongs. */
+    useEffect(() => {
+        if (open)
+            setOffset({ x: 0, y: 0 });
+    }, [open]);
+    /* `transform` and not `translate`: the window enters and leaves on `translate`, which is
+       transitioned — a drag on it would trail the pointer by the panel's duration. */
+    const drag = (event) => {
+        if (event.button !== 0 || event.pointerType === "touch")
+            return;
+        if (event.target.closest("button, a, input") !== null)
+            return;
+        /* Below it the window is a bottom sheet, and a sheet is not dragged around. */
+        if (window.innerWidth < HANDHELD_WIDTH)
+            return;
+        const from = { x: event.clientX - offset.x, y: event.clientY - offset.y };
+        /* Never further than half the screen from the centre: the header — the only handle — has
+           to stay where a pointer can reach it. */
+        const halfW = window.innerWidth / 2;
+        const halfH = window.innerHeight / 2;
+        const clamp = (value, half) => Math.max(-half, Math.min(half, value));
+        const move = (next) => setOffset({
+            x: clamp(next.clientX - from.x, halfW),
+            y: clamp(next.clientY - from.y, halfH),
+        });
+        const stop = () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", stop);
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", stop);
+    };
     return (_jsx(ModalOverlay, { isOpen: open, onOpenChange: (next) => {
             if (!next)
                 onClose();
-        }, isDismissable: true, className: overlay, children: _jsx(Modal, { className: (state) => modal({ ...state, width }), children: _jsx(DialogSurface, { onClose: onClose, ...surface }) }) }));
+        }, isDismissable: true, className: overlay, children: _jsx(Modal, { className: (state) => modal({ ...state, width }), ...(movable
+                ? { style: { transform: `translate(${offset.x}px, ${offset.y}px)` } }
+                : {}), children: _jsx(DialogSurface, { onClose: onClose, ...surface, ...(movable ? { onDragStart: drag } : {}) }) }) }));
 }
 /** A dialog with steps, for what CANNOT be answered in one go.
  *

package/dist/primitives/dialog/index.d.ts

@@ -1,2 +1 @@
 export { Dialog, type DialogContext, type DialogProps, type DialogWidth, Wizard, type WizardProps, type WizardStep, } from "./Dialog.js";
-export { Drill, type DrillContextProps, type DrillOrigin, type DrillProps, type DrillState, useDrill, } from "./Drill.js";

package/dist/primitives/dialog/index.js

@@ -1,4 +1,2 @@
 /* What has to be answered before moving on. */
 export { Dialog, Wizard, } from "./Dialog.js";
-/* One dialog that holds a stack of contexts opened from a record, and from each other. */
-export { Drill, useDrill, } from "./Drill.js";

package/dist/primitives/notice/index.d.ts

@@ -1,4 +1,4 @@
 export { Callout, type CalloutProps } from "./Callout.js";
 export { Flag, type FlagProps, type FlagTone } from "./Flag.js";
 export { Empty, Failed, ICONO_ROTO, Missing, Skeleton, } from "./Notice.js";
-export { ToastLayer, ToastProvider, type ToastSpec, useToast, useToastIfAny, } from "./Toast.js";
+export { ToastProvider, type ToastSpec, useToast, useToastIfAny, } from "./Toast.js";

package/dist/primitives/notice/index.js

@@ -3,4 +3,4 @@
 export { Callout } from "./Callout.js";
 export { Flag } from "./Flag.js";
 export { Empty, Failed, ICONO_ROTO, Missing, Skeleton, } from "./Notice.js";
-export { ToastLayer, ToastProvider, useToast, useToastIfAny, } from "./Toast.js";
+export { ToastProvider, useToast, useToastIfAny, } from "./Toast.js";

package/dist/primitives/overlay/Preview.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Popover } from "./Popover.js";
 import { isValidElement } from "react";
+import { setInteractionModality } from "react-aria";
 import { Focusable, Link, PreviewTrigger } from "react-aria-components";
 /**
  * A glance at a record without leaving the screen: the customer of an invoice, the product
@@ -53,8 +54,16 @@ const PREVIEW_DELAY = 600;
 const PREVIEW_CLOSE_DELAY = 200;
 export function Preview({ trigger, label, children, placement = "bottom start", delay = PREVIEW_DELAY, closeDelay = PREVIEW_CLOSE_DELAY, disabled = false, }) {
     const readsContext = isValidElement(trigger) && trigger.type === Link;
-    return (_jsxs(PreviewTrigger, { delay: delay, closeDelay: closeDelay, isDisabled: disabled, children: [readsContext ? (trigger) : (
-            /* React Aria types the child as an intrinsic element; a component that forwards
-               `ref` and spreads native props is the same thing to it at runtime. */
-            _jsx(Focusable, { children: trigger })), _jsx(Popover, { placement: placement, "aria-label": label, children: _jsx("div", { className: "max-h-[inherit] max-w-sm overflow-auto p-3", children: children }) })] }));
+    return (
+    /* React Aria opens a preview on hover only once it KNOWS the pointer is in use — and it
+       learns that from a press, not from a move. On a page just loaded, before any click, the
+       pointer rested on a name and nothing opened. Entering the trigger with a mouse says it,
+       in the capture phase so it is said before React Aria's own hover handler asks. */
+    _jsx("span", { className: "contents", onPointerOverCapture: (event) => {
+            if (event.pointerType === "mouse")
+                setInteractionModality("pointer");
+        }, children: _jsxs(PreviewTrigger, { delay: delay, closeDelay: closeDelay, isDisabled: disabled, children: [readsContext ? (trigger) : (
+                /* React Aria types the child as an intrinsic element; a component that forwards
+                   `ref` and spreads native props is the same thing to it at runtime. */
+                _jsx(Focusable, { children: trigger })), _jsx(Popover, { placement: placement, "aria-label": label, children: _jsx("div", { className: "max-h-[inherit] max-w-sm overflow-auto p-3", children: children }) })] }) }));
 }

package/dist/primitives/picker/MatchedText.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A text with the part that matched the search marked — internal to the lists that filter
+ * as you type (`Picker`, `TagsField`). A `<mark>`, so it is also said as marked text, and
+ * bold besides the tint: in forced colors the tint is gone and the weight is what remains.
+ */
+export declare function MatchedText({ text, query, locale, }: {
+    text: string;
+    query: string;
+    locale?: string;
+}): string | (string | import("react").JSX.Element)[];

package/dist/primitives/picker/MatchedText.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { matchSpans } from "../../foundations/match.js";
+/**
+ * A text with the part that matched the search marked — internal to the lists that filter
+ * as you type (`Picker`, `TagsField`). A `<mark>`, so it is also said as marked text, and
+ * bold besides the tint: in forced colors the tint is gone and the weight is what remains.
+ */
+export function MatchedText({ text, query, locale, }) {
+    if (query.trim() === "")
+        return text;
+    return matchSpans(text, query, locale).map((span, index) => span.hit ? (_jsx("mark", { className: "rounded-mark bg-accent/25 font-semibold text-current", children: span.text }, index)) : (span.text));
+}

package/dist/primitives/picker/Picker.d.ts

@@ -1,3 +1,4 @@
+import type { OpenTarget } from "../../foundations/types.js";
 import { type FormMode } from "../field/mode.js";
 import type { LucideIcon } from "lucide-react";
 import { type ReactNode } from "react";
@@ -21,6 +22,13 @@ export interface PickerItem {
     /** The header this item is listed under. Consecutive items with the same section share
      *  one header; an item without it is listed loose, outside any section. */
     section?: string;
+    /** A person or a company: its face before the name — the photo, or its initials when
+     *  `true`. Who is being chosen is recognised before it is read, in the list and in the field. */
+    avatar?: true | string;
+    /** What is read at a glance on the right, in tabular figures: the balance owed, the stock,
+     *  a state badge, a priority — a widget, not text. Where `meta` describes, this COMPARES:
+     *  lined up in one column, eight customers' debts are read top to bottom. */
+    aside?: ReactNode;
 }
 /**
  * What the list shows and how many are left out of it. Capped at 8 with the footer count,
@@ -40,12 +48,24 @@ export type PickerProps = {
     value?: string;
     onChange?: (id: string) => void;
     placeholder?: string;
-    /** What to do with the ones that don't fit. Without this, the footer only
-     *  informs. */
-    onBrowseAll?: () => void;
+    /** «Buscar más…»: the last option of the list, always there when this is — the record
+     *  may not be among the eight, or two of them may need their columns to tell apart. It
+     *  gets what was typed, so the list that chooses (`List onChoose`, in a modal of the
+     *  workspace) opens on the same search. */
+    onBrowseAll?: (query: string) => void;
+    /** «Crear «…»»: a record made from the typed text alone (Odoo's `name_create`); it returns
+     *  the new id — or a promise of it — and the field chooses it. Offered while something is
+     *  typed that no option is called exactly. The consumer appends the new item to `items`. */
+    onCreate?: (name: string) => string | Promise<string>;
+    /** «Crear y editar…»: the new record needs more than a name — open its form (in a workspace,
+     *  a modal) with the typed text as the name. Choosing it there is the consumer's. */
+    onCreateAndEdit?: (name: string) => void;
     /** Open the chosen record. Drawn as a trailing affordance, the way a many2one
      *  offers "open" next to "pick". Absent when there is nothing chosen. */
-    onOpen?: (id: string) => void;
+    onOpen?: (id: string, to: OpenTarget) => void;
+    /** Where the chosen record can open, the first being the button's (a modal, by default: the
+     *  form stays behind); the rest go in «Abrir en…». `onOpen` is told which was picked. */
+    openTargets?: readonly OpenTarget[];
     emptyText?: string;
     /** Placeholder of the field while it is being typed into. It is NOT a second
      *  box — the field itself is the search. */
@@ -56,7 +76,7 @@ export type PickerProps = {
     loadingText?: string;
     /** The list grows from the backend: called when its end scrolls into view. The consumer
      *  appends the next page to `items`; with nothing more to fetch it does nothing. Turns off
-     *  the cap of 8, the «see all…» row and the footer count. */
+     *  the cap of 8 and the footer count. */
     onLoadMore?: () => void;
     /** A page asked for by `onLoadMore` is on its way: a quiet row at the end says so. Unlike
      *  `loading`, the rows already there stay. */
@@ -72,15 +92,17 @@ export type PickerProps = {
 };
 export declare function Picker({ mode, ...props }: PickerProps): import("react").JSX.Element;
 /**
- * The list of a `Picker`: its rows, the section headers, the «see all…» row and the loading
+ * The list of a `Picker`: its rows, the section headers, the «Buscar más…» row and the loading
  * row at the end. Internal — not exported from the family — and apart from the combobox so it
  * can be rendered on the server without a popover, which is how the tests see the rows.
  */
-export declare function PickerOptions({ items, marks, hints, remaining, emptyText, onLoadMore, loadingMore, "aria-label": ariaLabel, }: {
+export declare function PickerOptions({ items, marks, hints, remaining, query, emptyText, onLoadMore, loadingMore, "aria-label": ariaLabel, }: {
     items: readonly PickerItem[];
     marks: boolean;
     hints: boolean;
     remaining: number;
+    /** What was typed: it is marked in every row, so each row says why it is there. */
+    query?: string;
     emptyText: string;
     onLoadMore?: () => void;
     loadingMore?: boolean;