@olddevs/ui 0.0.0-stage → 4.0.1

package/dist/components/content/NotificationCenter.d.ts

@@ -0,0 +1,68 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface NotificationCenterProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+    /** Заголовок центра. Умолчание — «Уведомления» из каталога. */
+    title?: ReactNode;
+    /**
+     * Уровень заголовка, 2–4: заголовок становится настоящим `<h2>`–`<h4>`.
+     *
+     * Уровень зависит от того, куда центр встал, — в поповер под `h1` страницы
+     * или в ящик, — и это знает потребитель, а не кит. Без пропа заголовок
+     * остаётся обычным текстом и в структуру заголовков страницы не входит.
+     *
+     * Называется `level`, как у `SectionHeader`: одно понятие — одно имя на весь
+     * кит (словарь пропсов в `docs/conventions.md`).
+     */
+    level?: 2 | 3 | 4;
+    /**
+     * `id` заголовка — для `aria-labelledby` поповера или ящика потребителя.
+     *
+     * Ложится на элемент заголовка, какой бы он ни был: с `level` это
+     * `<hN>`, без него — обычный текст, и имя поверхности всё равно приходит от
+     * него.
+     */
+    titleId?: string;
+    /**
+     * Сколько непрочитанных всего — пропом, а не счётом по строкам.
+     *
+     * Список бывает страницей, а счётчик относится ко всей коллекции: посчитав по
+     * детям, центр показывал бы «3» там, где непрочитанных триста.
+     */
+    unreadCount?: number;
+    /** Фильтры — слот. Их состав доменный: типы событий знает приложение. */
+    filters?: ReactNode;
+    /** Действия шапки — обычно «прочитать всё». */
+    actions?: ReactNode;
+    /** Сколько строк выбрано. При нуле полосы массовых действий нет вовсе. */
+    selectedCount?: number;
+    /** Вызывается, когда пользователь снимает выделение. */
+    onClearSelection?: () => void;
+    /** Действия над выбранным — обычно `Button size="sm"`. */
+    selectionActions?: ReactNode;
+    /** Список событий — обычно `NotificationList`. */
+    children?: ReactNode;
+    /** Низ: «Показать все», ссылка на страницу событий. */
+    footer?: ReactNode;
+}
+/**
+ * Оболочка ленты событий: заголовок, счётчик непрочитанных, фильтры, массовые
+ * действия.
+ *
+ * ПОВЕРХНОСТИ У ЦЕНТРА НЕТ, и это главное решение
+ * (ADR-0027). Он не
+ * попап, не ящик и не страница — он их содержимое. Потребитель ставит его
+ * внутрь существующих `Popover` или `Drawer` либо прямо на страницу, и центр не
+ * открывает и не закрывает себя: состояние поверхности живёт снаружи.
+ *
+ * Иначе пришлось бы выбрать одну поверхность за все приложения сразу — а в
+ * админке лента чаще страница, в клиентском приложении чаще попап.
+ *
+ * МАССОВЫЕ ДЕЙСТВИЯ — СУЩЕСТВУЮЩИЙ `SelectionBar`, а не своя полоса: он уже
+ * несёт счётчик, снятие выделения, два слота действий и правило «при нуле
+ * полосы нет вовсе». Липкость у него здесь выключена — центр стоит в попапе
+ * или в ящике, где прилипать не к чему.
+ *
+ * СЧЁТЧИК ПРИХОДИТ ПРОПОМ. Считать его по детям нельзя: список бывает страницей
+ * коллекции, и «3» вместо «300» — не округление, а неправда.
+ */
+export declare const NotificationCenter: import("react").ForwardRefExoticComponent<NotificationCenterProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=NotificationCenter.d.ts.map

package/dist/components/content/NotificationCenter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCenter.d.ts","sourceRoot":"","sources":["../../../src/components/content/NotificationCenter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,wBAAwB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlF,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAC7F,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAClB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,kDAAkD;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,kBAAkB,oHA4F9B,CAAC"}

package/dist/components/content/NotificationCenter.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useMessages } from "../../i18n/useMessages.js";
+import { cn } from "../../lib/cn.js";
+import { hasContent } from "../../lib/empty.js";
+import { Badge } from "./Badge.js";
+import { SelectionBar } from "../navigation/SelectionBar.js";
+export const NotificationCenter = forwardRef(function NotificationCenter({ title, level, titleId, unreadCount, filters, actions, selectedCount = 0, onClearSelection, selectionActions, children, footer, className, ...rest }, ref) {
+    const messages = useMessages();
+    const Title = level === 2 || level === 3 || level === 4 ? `h${level}` : "span";
+    return (_jsxs("div", { ref: ref, className: cn("flex min-h-0 flex-col", className), ...rest, children: [_jsxs("div", { className: "border-line-soft flex items-center gap-2 border-b px-3 py-2.5", children: [_jsx(Title, { id: titleId, className: "text-[13px] font-semibold", children: hasContent(title) ? title : messages.notifications.label }), unreadCount != null && unreadCount > 0 && (_jsxs(_Fragment, { children: [_jsx(Badge, { tone: "accent", "aria-hidden": true, children: unreadCount }), _jsx("span", { className: "sr-only", children: messages.notifications.unreadCount({ count: unreadCount }) })] })), actions != null && _jsx("div", { className: "ml-auto flex items-center gap-1.5", children: actions })] }), filters != null && (_jsx("div", { className: "border-line-soft flex flex-wrap items-center gap-1.5 border-b px-3 py-2", children: filters })), selectedCount > 0 && (_jsx("div", { className: "px-3 pt-2", children: _jsx(SelectionBar, { count: selectedCount, onClear: onClearSelection, sticky: false, className: "mb-0", children: selectionActions }) })), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: children }), footer != null && (_jsx("div", { className: "border-line-soft border-t px-3 py-2 text-center", children: footer }))] }));
+});
+//# sourceMappingURL=NotificationCenter.js.map

package/dist/components/content/NotificationCenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCenter.js","sourceRoot":"","sources":["../../../src/components/content/NotificationCenter.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAiD,MAAM,OAAO,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAoE7D,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAC1C,SAAS,kBAAkB,CACzB,EACE,KAAK,EACL,KAAK,EACL,OAAO,EACP,WAAW,EACX,OAAO,EACP,OAAO,EACP,aAAa,GAAG,CAAC,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAK/B,MAAM,KAAK,GAAG,KAAK,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAE,IAAI,KAAK,EAAY,CAAC,CAAC,CAAC,MAAM,CAAC;IAE1F,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAAM,IAAI,aACxE,eAAK,SAAS,EAAC,+DAA+D,aAC5E,KAAC,KAAK,IAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC,2BAA2B,YAEtD,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,GACnD,EACP,WAAW,IAAI,IAAI,IAAI,WAAW,GAAG,CAAC,IAAI,CAazC,8BACE,KAAC,KAAK,IAAC,IAAI,EAAC,QAAQ,iCACjB,WAAW,GACN,EACR,eAAM,SAAS,EAAC,SAAS,YACtB,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,GACtD,IACN,CACJ,EACA,OAAO,IAAI,IAAI,IAAI,cAAK,SAAS,EAAC,mCAAmC,YAAE,OAAO,GAAO,IAClF,EAEL,OAAO,IAAI,IAAI,IAAI,CAClB,cAAK,SAAS,EAAC,yEAAyE,YACrF,OAAO,GACJ,CACP,EAOA,aAAa,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,WAAW,YACxB,KAAC,YAAY,IACX,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE,gBAAgB,EACzB,MAAM,EAAE,KAAK,EACb,SAAS,EAAC,MAAM,YAEf,gBAAgB,GACJ,GACX,CACP,EAID,cAAK,SAAS,EAAC,gCAAgC,YAAE,QAAQ,GAAO,EAE/D,MAAM,IAAI,IAAI,IAAI,CACjB,cAAK,SAAS,EAAC,iDAAiD,YAAE,MAAM,GAAO,CAChF,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/components/content/NotificationList.d.ts

@@ -0,0 +1,111 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { type Tone } from "../../lib/variants.js";
+interface NotificationItemBaseProps extends Omit<ComponentPropsWithoutRef<"li">, "title"> {
+    /** О чём событие. Первая строка. */
+    title: ReactNode;
+    /** Подробности. Вторая строка. */
+    description?: ReactNode;
+    /**
+     * Когда — уже отформатированное.
+     *
+     * «5 минут назад» и «вчера в 14:03» кит не считает: относительное время
+     * зависит от локали и часового пояса потребителя, а не от дизайн-системы.
+     */
+    time?: ReactNode;
+    /** Иконка слева. Тип события — знание приложения, поэтому иконка приходит. */
+    icon?: ReactNode;
+    /**
+     * Превью объекта, о котором событие, — второй визуальный слот рядом с
+     * текстом.
+     *
+     * Независим от `icon`: иконка говорит, ЧТО случилось, превью — С ЧЕМ. Размер
+     * задаёт потребитель самим элементом (картинка 36px, `Avatar`); слот лишь не
+     * даёт ему сжаться и ставит по верхнему краю. Декоративное превью — с
+     * `alt=""`: заголовок уже называет объект.
+     */
+    media?: ReactNode;
+    /** Тон иконки и точки непрочитанного. */
+    tone?: Tone;
+    /**
+     * Непрочитанное.
+     *
+     * Отличается НЕ ТОЛЬКО ЦВЕТОМ: рядом с заголовком встаёт слово для
+     * скринридера. Точка и подложка — сигнал для глаз, и человек, который их не
+     * видит, иначе не отличит новое событие от старого вовсе.
+     */
+    unread?: boolean;
+}
+/**
+ * Действие строки: либо `actions` справа, либо `onAction` на всю строку.
+ *
+ * Вместе нельзя, и это сказано типом: кнопки внутри кнопки — недопустимая
+ * разметка, на которой потребитель уже забраковал свою строку очереди.
+ */
+export type NotificationItemProps = NotificationItemBaseProps & ({
+    /** Действия справа — «отметить прочитанным», «перейти». */
+    actions?: ReactNode;
+    onAction?: never;
+} | {
+    actions?: never;
+    /**
+     * Вся строка — одна кнопка: щелчок, Enter и Space вызывают обработчик.
+     *
+     * Доступное имя кнопки — заголовок (и слово «Не прочитано»), а время и
+     * подробности — её описание: полным содержимым имя получилось бы на
+     * полстраницы. Строка остаётся `<li>`, кнопка лежит внутри неё.
+     */
+    onAction: () => void;
+});
+/**
+ * Строка события: что произошло, когда и прочитано ли.
+ *
+ * ТИПОВ СОБЫТИЙ КИТ НЕ ЗНАЕТ. «Публикация не прошла», «канал отключён»,
+ * «модерация завершена» — словарь приложения; сюда приходят иконка, тон и
+ * текст. Тот же раздел обязанностей, что у `StatusBadge`, который приехал из
+ * фронта, оставив снаружи одиннадцать доменных статусов
+ * (ADR-0027).
+ *
+ * Строка не навигирует и не отмечает себя прочитанной: и переход, и отметка —
+ * действия потребителя. Они приходят в `actions`, в `onAction` (вся строка —
+ * кнопка) или оборачивают строку.
+ */
+export declare const NotificationItem: import("react").ForwardRefExoticComponent<NotificationItemProps & import("react").RefAttributes<HTMLLIElement>>;
+export interface NotificationGroup {
+    /** Идентификатор группы. */
+    id: string;
+    /** Подпись группы: «Сегодня», «Вчера», «Раньше». */
+    label: ReactNode;
+    /** Строки группы — обычно `NotificationItem`. */
+    children: ReactNode;
+}
+export interface NotificationListProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    /**
+     * Группы событий — уже собранные потребителем.
+     *
+     * Что такое «вчера», знает локаль и часовой пояс потребителя, а не кит: у
+     * приложения с ночными сменами граница суток своя, и считать её здесь значило
+     * бы навязать чужой календарь.
+     */
+    groups?: NotificationGroup[];
+    /** Строки без группировки. Используется вместо `groups`, а не вместе с ними. */
+    children?: ReactNode;
+    /** Что показать при пустом списке — обычно `EmptyState`. */
+    empty?: ReactNode;
+    /** Доступное имя списка для скринридера. По умолчанию — стандартная подпись пакета. */
+    "aria-label"?: string;
+}
+/**
+ * Список событий с группировкой по времени и пустым состоянием.
+ *
+ * ГРУППА — НАСТОЯЩАЯ ГРУППА (`role="group"` с подписью), а не заголовок над
+ * набором строк. Заголовок уровня `h3` здесь поставить нельзя: уровень зависит
+ * от того, куда список встал — в попап, в ящик или на страницу, — и кит этого
+ * не знает. Группа с именем сообщает структуру, не занимая уровня.
+ *
+ * ПУСТОЕ СОСТОЯНИЕ — существующий `EmptyState`, приходящий пропом: у пустоты
+ * «нет уведомлений» и пустоты «ничего не нашлось по фильтру» разный текст и
+ * разные действия, и выбирает их потребитель.
+ */
+export declare const NotificationList: import("react").ForwardRefExoticComponent<NotificationListProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=NotificationList.d.ts.map

package/dist/components/content/NotificationList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationList.d.ts","sourceRoot":"","sources":["../../../src/components/content/NotificationList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,wBAAwB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKzF,OAAO,EAAe,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE/D,UAAU,yBAA0B,SAAQ,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACvF,oCAAoC;IACpC,KAAK,EAAE,SAAS,CAAC;IACjB,kCAAkC;IAClC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yCAAyC;IACzC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;GAKG;AACH,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CACI;IACE,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB;;;;;;OAMG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CACJ,CAAC;AAEJ;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,gBAAgB,iHA0J5B,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,KAAK,EAAE,SAAS,CAAC;IACjB,iDAAiD;IACjD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC9F;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC7B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uFAAuF;IACvF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,kHAkD5B,CAAC"}

package/dist/components/content/NotificationList.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { useMessages } from "../../i18n/useMessages.js";
+import { cn } from "../../lib/cn.js";
+import { devWarn } from "../../lib/dev-warn.js";
+import { hasContent } from "../../lib/empty.js";
+import { TONE_TOKENS } from "../../lib/variants.js";
+export const NotificationItem = forwardRef(function NotificationItem({ title, description, time, icon, media, tone = "accent", unread, actions, onAction, className, ...rest }, ref) {
+    const messages = useMessages();
+    const baseId = useId();
+    const t = TONE_TOKENS[tone];
+    if (onAction != null && actions != null) {
+        devWarn("NotificationItem: both `onAction` and `actions` were passed, but they are mutually " +
+            "exclusive (a button cannot contain buttons). `actions` wins and `onAction` is ignored, " +
+            "so clicking the row does nothing. Pass only one: `onAction` for a clickable row, or " +
+            "`actions` for buttons on the right.");
+    }
+    const asButton = onAction != null && actions == null;
+    const idOf = (part) => (asButton ? `${baseId}-${part}` : undefined);
+    const titleId = idOf("title");
+    const unreadId = idOf("unread");
+    const descriptionId = idOf("description");
+    const timeId = idOf("time");
+    const Block = asButton ? "span" : "div";
+    const layout = "flex items-start gap-3 px-3 py-2.5";
+    const content = (_jsxs(_Fragment, { children: [icon != null && (_jsx("span", { className: cn("flex shrink-0 items-center pt-0.5", t.fg), children: icon })), hasContent(media) && _jsx("span", { className: "flex shrink-0 items-start", children: media }), _jsxs(Block, { className: "min-w-0 flex-1", children: [_jsxs(Block, { className: "flex items-baseline gap-2", children: [_jsx("span", { id: titleId, className: "min-w-0 text-[13px] font-medium", children: title }), unread && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: cn("size-1.5 shrink-0 rounded-full", t.dotBg) }), _jsx("span", { id: unreadId, className: "sr-only", children: messages.notifications.unread })] })), time != null && (_jsx("span", { id: timeId, className: "text-fg-2 ml-auto shrink-0 text-[11px]", children: time }))] }), description != null && (_jsx(Block, { id: descriptionId, className: cn("text-fg-2 mt-0.5 text-xs leading-relaxed", asButton && "block"), children: description }))] })] }));
+    if (asButton) {
+        const describedBy = [hasContent(description) && descriptionId, hasContent(time) && timeId]
+            .filter(Boolean)
+            .join(" ");
+        return (_jsx("li", { ref: ref, className: cn(unread && "bg-accent-soft", className), ...rest, children: _jsx("button", { type: "button", onClick: () => onAction(), "aria-labelledby": unread ? `${titleId} ${unreadId}` : titleId, "aria-describedby": describedBy || undefined, className: cn(layout, "focus-visible:outline-accent-strong w-full cursor-pointer text-left transition-colors", unread ? "hover:bg-accent/10" : "hover:bg-bg-2", "focus-visible:outline-2 focus-visible:-outline-offset-2"), children: content }) }));
+    }
+    return (_jsxs("li", { ref: ref, className: cn(layout, unread && "bg-accent-soft", className), ...rest, children: [content, actions != null && _jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })] }));
+});
+export const NotificationList = forwardRef(function NotificationList({ groups, children, empty, className, "aria-label": ariaLabel, ...rest }, ref) {
+    const messages = useMessages();
+    const baseId = useId();
+    const label = ariaLabel ?? messages.notifications.label;
+    const isEmpty = groups != null ? groups.length === 0 : !hasContent(children);
+    if (isEmpty)
+        return _jsx(_Fragment, { children: empty });
+    return (_jsx("div", { ref: ref, role: "group", "aria-label": label, className: cn("flex flex-col", className), ...rest, children: groups != null ? (groups.map((group, index) => {
+            const labelId = `${baseId}-${group.id}`;
+            return (_jsxs("div", { role: "group", "aria-labelledby": labelId, children: [_jsx("div", { id: labelId, className: cn("text-fg-2 px-3 pb-1 text-[11px] font-bold tracking-wide uppercase", index === 0 ? "pt-2" : "pt-4"), children: group.label }), _jsx("ul", { className: "flex flex-col", children: group.children })] }, group.id));
+        })) : (_jsx("ul", { className: "flex flex-col", children: children })) }));
+});
+//# sourceMappingURL=NotificationList.js.map

package/dist/components/content/NotificationList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationList.js","sourceRoot":"","sources":["../../../src/components/content/NotificationList.tsx"],"names":[],"mappings":"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"}

package/dist/components/content/ScrollArea.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentPropsWithoutRef } from "react";
+export interface ScrollAreaProps extends ComponentPropsWithoutRef<"div"> {
+    /** Направление прокрутки: `vertical` или `horizontal`. По умолчанию `vertical`. */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * Доступное имя области.
+     *
+     * Задавать его стоит там, где прокручиваемый кусок — самостоятельная часть
+     * экрана: список пунктов, панель фильтров. Без имени область остаётся просто
+     * прокручиваемым блоком — это законно и не хуже: `role="region"` без имени
+     * скринридер называет только по роли: «регион».
+     */
+    label?: string;
+}
+/**
+ * Прокручиваемая область со стилизованной полосой.
+ *
+ * Своя, а не зависимость. `@radix-ui/react-scroll-area` подменяет родную
+ * прокрутку своей: рисует полосу дивами и считает положение в JS. Это даёт
+ * одинаковый вид во всех браузерах — и отнимает инерцию прокрутки на
+ * тачпадах, `scroll-behavior`, поиск по странице, прокрутку колесом с
+ * зажатым Shift. Кит арендует поведение там, где своё было бы второй
+ * библиотекой (см. ADR-0005), а здесь родное поведение уже есть и лучше.
+ *
+ * Полоса красится псевдоэлементами WebKit и `scrollbar-*` в Firefox. В
+ * браузерах, где не работает ни то, ни другое, останется системная полоса —
+ * это вид, а не поломка.
+ */
+export declare function ScrollArea({ orientation, label, className, children, ...rest }: ScrollAreaProps): import("react").JSX.Element;
+//# sourceMappingURL=ScrollArea.d.ts.map

package/dist/components/content/ScrollArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/content/ScrollArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGtD,MAAM,WAAW,eAAgB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACtE,mFAAmF;IACnF,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,EACzB,WAAwB,EACxB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,eAAe,+BA6BjB"}

package/dist/components/content/ScrollArea.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+export function ScrollArea({ orientation = "vertical", label, className, children, ...rest }) {
+    return (_jsx("div", { tabIndex: 0, role: label ? "region" : undefined, "aria-label": label, className: cn("focus-visible:outline-accent-strong focus-visible:outline-2 focus-visible:outline-offset-2", orientation === "vertical" ? "overflow-y-auto" : "overflow-x-auto", "[scrollbar-width:thin] [scrollbar-color:var(--border-default)_transparent]", "[&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar]:w-2", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:bg-line [&::-webkit-scrollbar-thumb]:rounded-full", "[&::-webkit-scrollbar-thumb:hover]:bg-fg-4", className), ...rest, children: children }));
+}
+//# sourceMappingURL=ScrollArea.js.map

package/dist/components/content/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","sourceRoot":"","sources":["../../../src/components/content/ScrollArea.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AA8BrC,MAAM,UAAU,UAAU,CAAC,EACzB,WAAW,GAAG,UAAU,EACxB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACS;IAChB,OAAO,CACL,cAOE,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,gBACtB,KAAK,EACjB,SAAS,EAAE,EAAE,CACX,4FAA4F,EAC5F,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,EAElE,4EAA4E,EAE5E,uDAAuD,EACvD,6CAA6C,EAC7C,gFAAgF,EAChF,4CAA4C,EAC5C,SAAS,CACV,KACG,IAAI,YAEP,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/content/Separator.d.ts

@@ -0,0 +1,19 @@
+import { type SeparatorProps as RACSeparatorProps } from "react-aria-components";
+export interface SeparatorProps extends Omit<RACSeparatorProps, "elementType"> {
+    /** Отступы вокруг черты. `none` — когда расстояние задаёт раскладка снаружи. */
+    spacing?: "none" | "sm" | "md";
+}
+/**
+ * Разделительная черта.
+ *
+ * Взят у react-aria, а не нарисован `<div className="border-t">`, ровно из-за
+ * одной вещи: роль. Черта, разделяющая **группы** (пункты меню, блоки панели),
+ * обязана быть `role="separator"` — скринридер объявляет ею границу группы.
+ * Черта, которая просто украшает, обязана быть скрыта от него совсем.
+ *
+ * Различать эти два случая — работа вызывающего, и react-aria ставит роль сам,
+ * а вертикальной черте добавляет `aria-orientation`. Рукописная версия почти
+ * всегда останавливается на `border-t` и не сообщает ни того, ни другого.
+ */
+export declare function Separator({ orientation: orientationProp, spacing, className, ...rest }: SeparatorProps): import("react").JSX.Element;
+//# sourceMappingURL=Separator.d.ts.map

package/dist/components/content/Separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../src/components/content/Separator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,uBAAuB,CAAC;AAG/B,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC;IAC5E,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CAChC;AAOD;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAAW,EAAE,eAAe,EAC5B,OAAgB,EAChB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,+BAwBhB"}

package/dist/components/content/Separator.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Separator as RACSeparator, SeparatorContext, useSlottedContext, } from "react-aria-components";
+import { cn } from "../../lib/cn.js";
+const SPACING_CLASS = {
+    horizontal: { none: "", sm: "my-2", md: "my-4" },
+    vertical: { none: "", sm: "mx-2", md: "mx-4" },
+};
+export function Separator({ orientation: orientationProp, spacing = "none", className, ...rest }) {
+    const fromContext = useSlottedContext(SeparatorContext)?.orientation;
+    const orientation = orientationProp ?? fromContext ?? "horizontal";
+    return (_jsx(RACSeparator, { orientation: orientation, className: cn("bg-line-soft border-0", orientation === "vertical" ? "h-full w-px self-stretch" : "h-px w-full", SPACING_CLASS[orientation][spacing], className), ...rest }));
+}
+//# sourceMappingURL=Separator.js.map

package/dist/components/content/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../src/components/content/Separator.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,SAAS,IAAI,YAAY,EACzB,gBAAgB,EAChB,iBAAiB,GAElB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAOrC,MAAM,aAAa,GAAG;IACpB,UAAU,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE;IAChD,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE;CACtC,CAAC;AAcX,MAAM,UAAU,SAAS,CAAC,EACxB,WAAW,EAAE,eAAe,EAC5B,OAAO,GAAG,MAAM,EAChB,SAAS,EACT,GAAG,IAAI,EACQ;IAQf,MAAM,WAAW,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IACrE,MAAM,WAAW,GAAG,eAAe,IAAI,WAAW,IAAI,YAAY,CAAC;IACnE,OAAO,CACL,KAAC,YAAY,IACX,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,EAAE,CACX,uBAAuB,EAGvB,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,aAAa,EACvE,aAAa,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,EACnC,SAAS,CACV,KACG,IAAI,GACR,CACH,CAAC;AACJ,CAAC"}

package/dist/components/content/Skeleton.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentPropsWithoutRef } from "react";
+export interface SkeletonProps extends ComponentPropsWithoutRef<"div"> {
+    /** Ширина. Число трактуется как пиксели, строка — как CSS-значение. */
+    width?: number | string;
+    /** Высота. Число — пиксели, строка — любое CSS-значение. */
+    height?: number | string;
+    /** Скругление. По умолчанию `--r-md`. */
+    borderRadius?: number | string;
+}
+/**
+ * Плейсхолдер загрузки: прямоугольник с бегущим бликом.
+ *
+ * Единственный примитив пакета, который принимает размеры числами и кладёт их
+ * в инлайн-`style`, — и это не недосмотр. Скелетон повторяет форму того, что
+ * подменяет: 43 вызова во фронте задают 12 разных сочетаний ширины, высоты
+ * и скругления (`4`, `10`, `3`, `6`, `8`, `0`, `"50%"`, `9999`). Шкала из трёх
+ * ступеней здесь не описывает предметную область, а мешает: под каждый новый
+ * блок пришлось бы заводить ступень.
+ *
+ * Сам блик — правило `.skeleton` в `styles.css` (градиент + `shimmer`), а не
+ * утилиты: анимация с `background-position` в утилитах не выражается.
+ */
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/components/content/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/content/Skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGlE,MAAM,WAAW,aAAc,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACpE,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,0GAYnB,CAAC"}

package/dist/components/content/Skeleton.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/cn.js";
+export const Skeleton = forwardRef(function Skeleton({ width, height, borderRadius, className, style, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: cn("skeleton", className), style: { width, height, borderRadius: borderRadius ?? "var(--r-md)", ...style }, ...rest }));
+});
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/content/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/components/content/Skeleton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAiC,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAwBrC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAgC,SAAS,QAAQ,CACjF,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAC1D,GAAG;IAEH,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,EACpC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,IAAI,aAAa,EAAE,GAAG,KAAK,EAAE,KAC3E,IAAI,GACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/content/SortableList.d.ts

@@ -0,0 +1,98 @@
+import type { ReactNode } from "react";
+import { type Key } from "react-aria-components";
+export interface SortableItem {
+    /** Стабильный идентификатор строки: по нему список сообщает новый порядок. */
+    id: Key;
+    /** Содержимое строки. Может быть вёрсткой — тогда задайте `textValue`. */
+    label: ReactNode;
+    /**
+     * Строковое представление строки.
+     *
+     * Обязателен, когда `label` — не строка: из него собирается и доступное имя
+     * строки, и имя её ручки перетаскивания («Перетащить Отчёт за март»), и
+     * объявления «Вставить между … и …».
+     */
+    textValue?: string;
+}
+/** Переезд строки из одного списка группы в другой — что сообщает `onMove`. */
+export interface SortableMove {
+    /** Идентификатор строки. */
+    id: Key;
+    /** `id` списка, из которого строку унесли. */
+    from: string;
+    /** `id` списка, куда её положили. */
+    to: string;
+    /** Место в списке-приёмнике: индекс, который строка займёт в нём. */
+    index: number;
+}
+export interface SortableListProps {
+    /** Строки в текущем порядке; порядок хранит потребитель. */
+    items: SortableItem[];
+    /**
+     * Новый порядок целиком — список идентификаторов после перестановки.
+     *
+     * Порядок компонент не хранит: он приходит пропом и уходит отсюда, как
+     * сортировка у таблицы (ADR-0023). Отдаём весь список, а не «что куда
+     * переехало»: применить готовый порядок проще, чем восстановить его из
+     * события, и ошибиться негде.
+     */
+    onReorder: (ids: Key[]) => void;
+    /** Доступное имя списка. Безымянный список скринридер называет только по роли. */
+    "aria-label": string;
+    /** Что показать при пустом списке. */
+    emptyText?: ReactNode;
+    /** Классы корневого элемента. */
+    className?: string;
+    /**
+     * Имя группы списков, которые обмениваются строками, — например, колонок
+     * одной доски. Без группы список только переставляет свои строки.
+     */
+    group?: string;
+    /**
+     * Имя списка внутри группы: его получает `onMove` в `from` и `to`. В DOM не
+     * попадает — это ключ состояния экрана, а не `id` элемента.
+     */
+    id?: string;
+    /**
+     * Вызывается у списка-приёмника, когда в него перенесли строку из другого списка группы.
+     *
+     * Состав списков компонент не хранит, как и порядок: экран убирает строку
+     * из `from` и ставит её в `to` на `index` — у обоих списков сразу, потому
+     * что состояние доски одно и лежит у него.
+     */
+    onMove?: (move: SortableMove) => void;
+}
+/**
+ * Список с перетаскиванием: порядок задаёт пользователь.
+ *
+ * СТОИТ НА `useDragAndDrop` ИЗ react-aria, а не на сторонней библиотеке
+ * (ADR-0028).
+ * Это не экономия на зависимости: вместе с dnd-kit пришлось бы взять на себя и
+ * доступность, которую react-aria отдаёт даром.
+ *
+ * РУЧКА ПЕРЕТАСКИВАНИЯ ОБЯЗАТЕЛЬНА, и она здесь не украшение. Без
+ * `<Button slot="drag">` строка получает `draggable="true"` и таскается мышью,
+ * а с клавиатуры не берётся ВООБЩЕ — react-aria при этом не падает, а пишет
+ * предупреждение в консоль. То есть недоступный список выглядит рабочим.
+ * Проверено замером перед решением, поэтому ручку рисует сам компонент, а не
+ * потребитель по желанию.
+ *
+ * СВОЕЙ ЖИВОЙ ОБЛАСТИ НЕТ. react-aria объявляет перетаскивание сам и
+ * локализованно: под русской локалью замер дал «Начато перетаскивание. Нажмите
+ * клавишу Tab для выбора цели…», «Вставить между Строка 1 и Строка 2»,
+ * «Перетаскивание завершено». Своя область дублировала бы их и спорила бы с
+ * ними. `DragAnnouncer` из фронта не поднимается: он написан под dnd-kit,
+ * который молчит.
+ *
+ * ИМЯ РУЧКИ НЕ ПОВТОРЯЕТ ПОДПИСЬ СТРОКИ — библиотека дописывает её сама, и
+ * замер показал «Перетащить Строка 1». Тот же урок, что с кнопками внутри
+ * `TagGroup` в ревью 2.1.0.
+ *
+ * КЛАВИАТУРА: стрелка вправо переводит фокус со строки на ручку, Enter
+ * начинает перетаскивание, стрелки выбирают цель, Enter применяет, Escape
+ * отменяет. Объявление react-aria предлагает Tab, но в коротком списке Tab
+ * уводит фокус из кольца целей и отменяет перетаскивание — проверено в
+ * браузере. Всё это — слой поведения, а не наш код.
+ */
+export declare function SortableList({ items, onReorder, "aria-label": ariaLabel, emptyText, className, group, id: listId, onMove, }: SortableListProps): import("react").JSX.Element;
+//# sourceMappingURL=SortableList.d.ts.map

package/dist/components/content/SortableList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableList.d.ts","sourceRoot":"","sources":["../../../src/components/content/SortableList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EASL,KAAK,GAAG,EACT,MAAM,uBAAuB,CAAC;AAM/B,MAAM,WAAW,YAAY;IAC3B,8EAA8E;IAC9E,EAAE,EAAE,GAAG,CAAC;IACR,0EAA0E;IAC1E,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,+EAA+E;AAC/E,MAAM,WAAW,YAAY;IAC3B,4BAA4B;IAC5B,EAAE,EAAE,GAAG,CAAC;IACR,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,4DAA4D;IAC5D,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB;;;;;;;OAOG;IACH,SAAS,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAChC,kFAAkF;IAClF,YAAY,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CACvC;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,SAAS,EACT,KAAK,EACL,EAAE,EAAE,MAAW,EACf,MAAM,GACP,EAAE,iBAAiB,+BAkHnB"}

package/dist/components/content/SortableList.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DropIndicator, GridList, GridListItem, isTextDropItem, useDragAndDrop, } from "react-aria-components";
+import { DragHandleIcon } from "../../icons.js";
+import { useMessages } from "../../i18n/useMessages.js";
+import { cn } from "../../lib/cn.js";
+import { insertionIndex, reorder } from "../../lib/reorder.js";
+const dragType = (group) => `application/x-olddevs-sortable+${group}`;
+async function readMoves(items, type) {
+    const texts = await Promise.all(items.filter(isTextDropItem).map((item) => item.getText(type)));
+    return texts.map((text) => JSON.parse(text));
+}
+export function SortableList({ items, onReorder, "aria-label": ariaLabel, emptyText, className, group, id: listId = "", onMove, }) {
+    const messages = useMessages();
+    const type = group != null ? dragType(group) : null;
+    async function receive(dropped, target) {
+        if (type == null || onMove == null)
+            return;
+        const index = insertionIndex(items, target);
+        if (index == null)
+            return;
+        const moves = await readMoves(dropped, type);
+        moves.forEach((move, i) => onMove({ id: move.id, from: move.from, to: listId, index: index + i }));
+    }
+    const { dragAndDropHooks } = useDragAndDrop({
+        getItems: (keys) => [...keys].map((key) => ({
+            "text/plain": String(key),
+            ...(type != null && { [type]: JSON.stringify({ id: key, from: listId }) }),
+        })),
+        ...(type != null &&
+            onMove != null && {
+            acceptedDragTypes: [type],
+            onInsert: (e) => receive(e.items, e.target),
+            onRootDrop: (e) => receive(e.items, null),
+        }),
+        getAllowedDropOperations: () => ["move"],
+        onReorder(e) {
+            const next = reorder(items, e.keys, e.target);
+            if (next != null)
+                onReorder(next.map((item) => item.id));
+        },
+        renderDropIndicator: (target) => (_jsx(DropIndicator, { target: target, className: "drop-target:bg-accent-strong h-0.5 rounded-full bg-transparent" })),
+    });
+    return (_jsx(GridList, { "aria-label": ariaLabel, items: items, dragAndDropHooks: dragAndDropHooks, renderEmptyState: emptyText != null ? () => emptyText : undefined, className: cn("flex flex-col gap-1", className), children: (item) => (_jsxs(GridListItem, { id: item.id, textValue: item.textValue ?? (typeof item.label === "string" ? item.label : undefined), className: cn("border-line-soft bg-bg-2 flex items-center gap-2 rounded-lg border px-2.5 py-2 text-[13px]", "focus-visible:outline-accent-strong focus-visible:outline-2 focus-visible:outline-offset-2", "dragging:opacity-50"), children: [_jsx(Button, { slot: "drag", "aria-label": messages.sortableList.drag, className: "text-fg-3 hover:text-fg-1 focus-visible:outline-accent-strong flex size-6 shrink-0 cursor-grab items-center justify-center rounded-xs focus-visible:outline-2", children: _jsx(DragHandleIcon, { size: 14 }) }), _jsx("span", { className: "min-w-0 flex-1", children: item.label })] })) }));
+}
+//# sourceMappingURL=SortableList.js.map

package/dist/components/content/SortableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableList.js","sourceRoot":"","sources":["../../../src/components/content/SortableList.tsx"],"names":[],"mappings":"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"}