@mpfrontend/ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -1,3 +1,62 @@
-# Temporary Holding Version
+# @mpfrontend/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Local development package. Runtime: client. Public API is exported from src/index.ts and compiled
+into dist. Nx owns build, typecheck, lint and test targets. Consumer applications install packed artifacts.
+See ../../docs/IMPLEMENTATION-STATUS.md for observed evidence and remaining work.
+
+Import `@mpfrontend/ui/tailwind.css` from the consumer's Tailwind v4 entry so its compiler scans the
+published JavaScript for structural utility classes. Import `@mpfrontend/ui/styles.css` for semantic
+token-driven state and color rules. Product values, icons, typography and DLS composition remain in the
+consumer adapter/theme. The application frame (skip link, header, navigation, page frame) is the separate
+package `@mpfrontend/app-layout`.
+
+## Dialog and one-time code
+
+`Dialog` is a modal dialog on the native `dialog` element: `aria-modal`, labelled by its `title` and described
+by its `description`, Escape and the browser's cancel call `onClose`, a focus guard keeps Tab and Shift+Tab
+inside it, and focus returns to the element that opened it. Every text is a prop (`closeLabel` names the
+close button), and it uses logical properties only.
+
+`OneTimeCodeField` accepts digits only, up to a configured `length` (4 to 10, 6 by default), with
+`autocomplete="one-time-code"` and a numeric keyboard; a pasted code keeps its digits and drops spaces,
+dashes and other characters, and a decimal digit of any script becomes its ASCII digit (`codeDigits`). It
+has an error state and never logs or stores the value.
+
+`ConfirmWithCode` confirms a sensitive action in a `Dialog`: `onConfirm(code, signal)` sends the code to
+the server through the BFF (a same-origin request with the CSRF token and an idempotency key), the browser
+never checks the code, and the code is cleared on close and on failure and never written to browser
+storage, a URL or a log. DOM behaviour (keyboard, focus, names, clearing) is tested with happy-dom 20.14.5,
+a test-only dependency chosen because the tests need focus and keyboard events without a browser.
+
+## Tree
+
+`Tree` is a controlled tree view on the WAI-ARIA tree pattern; with `columns` it is a tree table
+(`treegrid`). The consumer owns `expanded` (`onExpandedChange`) and the per-node `states`, a set it defines,
+with `stateLabels` for their visible text. Arrows move, open and close (the horizontal arrows swap in a
+right-to-left context), Home and End jump, and Enter and Space call `onActivate`, where the consumer's own
+rule decides what changes; `descendantIds(node)` helps a rule over the current children. The component has
+no access decision and no inheritance between states, and never changes the nodes it receives. Rows are
+virtualized at a fixed `rowHeight` inside a `height` viewport: ten thousand nodes render only the rows in
+view, and the focused row stays rendered. Each item carries `aria-level`, `aria-setsize`, `aria-posinset`
+and `aria-expanded`, and its accessible name includes its state label.
+
+
+## Field access in tables and forms
+
+`ResourceTable` and `ResourceForm` take `access`, a reader of `@mpfrontend/access-core` (from `useAccess()` of
+`@mpfrontend/access-react`). A column whose field may not be viewed is removed with its header. A form field that
+may not be viewed is not rendered, with its label, `helpers` text and `errors` text, and leaves validation and the
+submitted values; a field that may not be edited is disabled; a save passes `onSubmit` only the changed fields that
+may be edited, compared with `original` (`dirtyPatch`), and a changed field that may not be edited throws
+`FORBIDDEN_FIELD` instead of being sent. Without `access` both components behave as before. A hidden field is a
+presentation; the server still refuses a field the person may not write.
+
+## Paging, sorting and filtering
+
+`ResourceTable` takes `control`, a declared `mode` with controlled `page`, `size`, `sort` and `filters` and their
+change events, with the visible text of its controls from the consumer's catalog. In `server` mode it shows the rows
+the server returned and never sorts, filters or pages them itself; in `client` mode it filters, sorts and pages the
+rows it is given. The mode is never switched by the data. Sortable headers carry `aria-sort`; filters submit
+together; the pagination is a labelled navigation. A sort or a filter on a column the person may not view is
+ignored. `useTableUrlState` of `@mpfrontend/data-react` binds the controlled values to the URL. Without `control`,
+the table renders exactly as before.

package/dist/dialog.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+/** The next element of a Tab or Shift+Tab press inside a trap: the ends wrap around. */
+export declare function nextFocus<T>(elements: readonly T[], current: T | null, backwards: boolean): T | undefined;
+export type DialogProps = {
+    open: boolean;
+    title: ReactNode;
+    /** Called on Escape, on the close button and on the browser's own cancel; the parent closes the dialog. */
+    onClose: () => void;
+    /** The accessible name of the close button; every visible text is the consumer's. */
+    closeLabel: string;
+    children: ReactNode;
+    description?: ReactNode;
+};
+/**
+ * A modal dialog on the native dialog element: aria-modal, labelled by its title (and described by its
+ * description), Escape closes it, a focus guard keeps Tab inside it, and focus returns to the element that
+ * opened it. It uses logical properties only, so it reads the same in both directions.
+ */
+export declare function Dialog({ open, title, onClose, closeLabel, children, description }: DialogProps): import("react").JSX.Element;

package/dist/dialog.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from 'react';
+const focusable = 'a[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+/** The next element of a Tab or Shift+Tab press inside a trap: the ends wrap around. */
+export function nextFocus(elements, current, backwards) {
+    if (!elements.length)
+        return undefined;
+    const index = current === null ? -1 : elements.indexOf(current);
+    if (backwards)
+        return index <= 0 ? elements[elements.length - 1] : elements[index - 1];
+    return index < 0 || index === elements.length - 1 ? elements[0] : elements[index + 1];
+}
+/**
+ * A modal dialog on the native dialog element: aria-modal, labelled by its title (and described by its
+ * description), Escape closes it, a focus guard keeps Tab inside it, and focus returns to the element that
+ * opened it. It uses logical properties only, so it reads the same in both directions.
+ */
+export function Dialog({ open, title, onClose, closeLabel, children, description }) {
+    const ref = useRef(null), opener = useRef(null);
+    const titleId = useId(), descriptionId = useId();
+    useEffect(() => {
+        const dialog = ref.current;
+        if (!dialog)
+            return;
+        if (open) {
+            opener.current = document.activeElement;
+            if (!dialog.open) {
+                if (typeof dialog.showModal === 'function')
+                    dialog.showModal();
+                else
+                    dialog.setAttribute('open', '');
+            }
+            const first = dialog.querySelector('[data-autofocus]') ?? dialog.querySelector(focusable);
+            (first ?? dialog).focus();
+            return;
+        }
+        if (dialog.open) {
+            if (typeof dialog.close === 'function')
+                dialog.close();
+            else
+                dialog.removeAttribute('open');
+        }
+        const previous = opener.current;
+        opener.current = null;
+        if (previous && typeof previous.focus === 'function' && previous.isConnected)
+            previous.focus();
+    }, [open]);
+    function keyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            onClose();
+            return;
+        }
+        if (event.key !== 'Tab')
+            return;
+        const elements = [...event.currentTarget.querySelectorAll(focusable)];
+        const target = nextFocus(elements, document.activeElement, event.shiftKey);
+        if (target) {
+            event.preventDefault();
+            target.focus();
+        }
+    }
+    return _jsx("dialog", { ref: ref, "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": description === undefined ? undefined : descriptionId, onKeyDown: keyDown, onCancel: event => { event.preventDefault(); onClose(); }, className: "mp-dialog m-auto w-[min(100%-2rem,32rem)] rounded-[var(--mp-radius-surface)] border p-6", children: open && _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsx("h2", { id: titleId, className: "m-0 text-start text-xl font-semibold", children: title }), _jsx("button", { type: "button", className: "mp-dialog-close rounded-[var(--mp-radius-control)] px-2", "aria-label": closeLabel, onClick: onClose, children: "\u00D7" })] }), description !== undefined && _jsx("p", { id: descriptionId, className: "m-0", children: description }), children] }) });
+}
+//# sourceMappingURL=dialog.js.map

package/dist/dialog.js.map

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

package/dist/index.d.ts

@@ -0,0 +1,109 @@
+import { type ButtonHTMLAttributes, type InputHTMLAttributes, type SelectHTMLAttributes, type ReactNode, type Key } from 'react';
+import type { AccessReader } from '@mpfrontend/access-core';
+export type DisplayField = Readonly<{
+    key: string;
+    type: string;
+    required: boolean;
+    editable: boolean;
+    nullable: boolean;
+}>;
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    tone?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    loading?: boolean;
+    loadingLabel?: ReactNode;
+    restricted?: boolean;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+};
+export type FieldProps = InputHTMLAttributes<HTMLInputElement> & {
+    label: string;
+    helper?: string;
+    error?: string;
+};
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
+    label: string;
+    icon?: ReactNode;
+};
+export declare function Button({ tone, loading, loadingLabel, restricted, leadingIcon, trailingIcon, children, disabled, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Field({ label, helper, error, ...props }: FieldProps): import("react").JSX.Element;
+export declare function Select({ label, children, icon, ...props }: SelectProps): import("react").JSX.Element;
+export declare function Card({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export type TableSort = Readonly<{
+    field: string;
+    direction: 'asc' | 'desc';
+}>;
+/** The visible text of the table's controls, from the consumer's catalog. */
+export type TableText = Readonly<{
+    pagination: string;
+    previous: string;
+    next: string;
+    /** The current page and the page count, when the count is known. */
+    page: (page: number, count: number | undefined) => string;
+    size?: string;
+    apply?: string;
+    filters?: string;
+}>;
+/**
+ * The controlled state of a table and its change events. The mode is declared, never inferred: in `client` mode the
+ * table filters, sorts and pages the rows it is given; in `server` mode it shows them as the server returned them and
+ * never sorts, filters or pages them itself.
+ */
+export type TableControl = Readonly<{
+    mode: 'client' | 'server';
+    page: number;
+    size: number;
+    sort?: TableSort | undefined;
+    filters?: Readonly<Record<string, string>>;
+    /** The total number of rows the server reports (server mode). */
+    total?: number | undefined;
+    /** Whether a next page exists, when the server reports no total (server mode). */
+    hasMore?: boolean;
+    sortable?: readonly string[];
+    filterable?: readonly string[];
+    sizes?: readonly number[];
+    onPageChange: (page: number) => void;
+    onSizeChange?: (size: number) => void;
+    onSortChange?: (sort: TableSort | undefined) => void;
+    onFiltersChange?: (filters: Readonly<Record<string, string>>) => void;
+    text: TableText;
+}>;
+/**
+ * With `access`, a column whose field may not be viewed is removed with its header. Without it, every field shows.
+ * With `control`, the table has sortable headers, filters and paging bound to the controlled values; a sort or a
+ * filter on a column the person may not view is ignored. Without it, the table renders the rows as before.
+ */
+export declare function ResourceTable({ fields, rows, caption, format, labels, detail, rowKey, access, control }: {
+    fields: readonly DisplayField[];
+    rows: readonly Record<string, unknown>[];
+    caption: string;
+    format: (value: unknown) => string;
+    labels?: Readonly<Record<string, string>>;
+    detail?: (row: Record<string, unknown>) => ReactNode;
+    rowKey?: (row: Record<string, unknown>, index: number) => Key;
+    access?: AccessReader;
+    control?: TableControl;
+}): import("react").JSX.Element;
+/**
+ * With `access`, a field that may not be viewed is not rendered (its label, helper and error with it) and leaves
+ * validation and the submitted values; a field that may not be edited is disabled; a save passes `onSubmit` only the
+ * changed fields that may be edited, compared with `original` (dirtyPatch). Without `access`, every editable field
+ * shows and `onSubmit` receives nothing, as before.
+ */
+export declare function ResourceForm({ fields, values, onChange, onSubmit, labels, saveLabel, disabled, access, original, helpers, errors }: {
+    fields: readonly DisplayField[];
+    values: Readonly<Record<string, unknown>>;
+    onChange: (key: string, value: unknown) => void;
+    onSubmit: (patch?: Record<string, unknown>) => void;
+    labels?: Readonly<Record<string, string>>;
+    saveLabel: string;
+    disabled?: boolean;
+    access?: AccessReader;
+    original?: Readonly<Record<string, unknown>>;
+    helpers?: Readonly<Record<string, string>>;
+    errors?: Readonly<Record<string, string>>;
+}): import("react").JSX.Element;
+export { Dialog, nextFocus, type DialogProps } from './dialog.js';
+export { OneTimeCodeField, ConfirmWithCode, codeDigits, type OneTimeCodeFieldProps, type ConfirmWithCodeProps } from './one-time-code.js';
+export { Tree, visibleRows, descendantIds, treeKey, type TreeNode, type TreeRow, type TreeColumn, type TreeMove, type TreeProps } from './tree.js';

package/dist/index.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { buttonState, fieldState, isControlUnavailable } from '@mpfrontend/primitives';
+export function Button({ tone = 'primary', loading = false, loadingLabel, restricted = false, leadingIcon, trailingIcon, children, disabled, ...props }) {
+    const state = buttonState({ disabled: disabled ?? false, loading, restricted });
+    return _jsxs("button", { ...props, disabled: isControlUnavailable(state), "aria-busy": state === 'loading' || undefined, "aria-disabled": state === 'restricted' || undefined, "data-state": state, "data-tone": tone, className: ['mp-button', 'inline-flex h-[var(--mp-control-height)] items-center justify-center gap-2 whitespace-nowrap rounded-[var(--mp-radius-control)] border-0 px-[var(--mp-control-padding)]', props.className].filter(Boolean).join(' '), children: [loading ? _jsx("span", { className: "mp-button-spinner", "aria-hidden": "true" }) : leadingIcon, _jsx("span", { children: loading ? (loadingLabel ?? children) : children }), !loading && trailingIcon] });
+}
+export function Field({ label, helper, error, ...props }) {
+    const generated = useId(), id = props.id ?? generated, description = id + '-description';
+    const state = fieldState({ disabled: props.disabled ?? false, readOnly: props.readOnly ?? false, invalid: !!error });
+    return _jsxs("label", { className: "mp-field flex max-w-full flex-col gap-[var(--mp-field-gap)]", "data-state": state, htmlFor: id, children: [_jsx("span", { className: "mp-field-label text-sm font-medium", children: label }), _jsx("input", { ...props, id: id, className: ['mp-input', 'h-[var(--mp-control-height)] w-full rounded-[var(--mp-radius-control)] border px-3', props.className].filter(Boolean).join(' '), "aria-invalid": !!error, "aria-describedby": error || helper ? description : props['aria-describedby'] }), (helper || error) && _jsx("span", { id: description, className: error ? 'mp-field-helper mp-field-error text-xs' : 'mp-field-helper text-xs', children: error ?? helper })] });
+}
+export function Select({ label, children, icon, ...props }) {
+    const generated = useId(), id = props.id ?? generated;
+    const state = fieldState({ disabled: props.disabled ?? false });
+    return _jsxs("label", { className: "mp-field flex max-w-full flex-col gap-[var(--mp-field-gap)]", "data-state": state, htmlFor: id, children: [_jsx("span", { className: "mp-field-label text-sm font-medium", children: label }), _jsxs("span", { className: "mp-select-wrap relative w-full", "data-custom-icon": icon ? 'true' : undefined, children: [_jsx("select", { ...props, id: id, className: ['mp-select', 'h-[var(--mp-control-height)] w-full rounded-[var(--mp-radius-control)] border px-3', props.className].filter(Boolean).join(' '), children: children }), icon && _jsx("span", { className: "mp-select-icon pointer-events-none absolute end-3 top-1/2 -translate-y-1/2", "aria-hidden": "true", children: icon })] })] });
+}
+export function Card({ children }) { return _jsx("section", { className: "mp-card rounded-[var(--mp-radius-surface)] border p-6", children: children }); }
+function compareValues(a, b) {
+    if (a === b)
+        return 0;
+    if (a === null || a === undefined)
+        return 1;
+    if (b === null || b === undefined)
+        return -1;
+    if (typeof a === 'number' && typeof b === 'number')
+        return a - b;
+    if (typeof a === 'boolean' && typeof b === 'boolean')
+        return a === b ? 0 : a ? 1 : -1;
+    return String(a).localeCompare(String(b));
+}
+const nextSort = (sort, field) => sort?.field !== field ? { field, direction: 'asc' } : sort.direction === 'asc' ? { field, direction: 'desc' } : undefined;
+/**
+ * With `access`, a column whose field may not be viewed is removed with its header. Without it, every field shows.
+ * With `control`, the table has sortable headers, filters and paging bound to the controlled values; a sort or a
+ * filter on a column the person may not view is ignored. Without it, the table renders the rows as before.
+ */
+export function ResourceTable({ fields, rows, caption, format, labels = {}, detail, rowKey, access, control }) {
+    const columns = access ? fields.filter(field => access.field(field.key).view) : fields;
+    const visible = new Set(columns.map(field => field.key)), hiddenField = (key) => fields.some(field => field.key === key) && !visible.has(key);
+    let shown = rows, total;
+    if (control?.mode === 'client') {
+        const filters = Object.entries(control.filters ?? {}).filter(([key, value]) => value !== '' && visible.has(key));
+        let selected = rows.filter(row => filters.every(([key, value]) => format(row[key]).toLocaleLowerCase().includes(value.toLocaleLowerCase())));
+        const sort = control.sort && visible.has(control.sort.field) ? control.sort : undefined;
+        if (sort)
+            selected = [...selected].sort((a, b) => compareValues(a[sort.field], b[sort.field]) * (sort.direction === 'asc' ? 1 : -1));
+        total = selected.length;
+        shown = selected.slice((control.page - 1) * control.size, control.page * control.size);
+    }
+    else if (control)
+        total = control.total;
+    const count = control && total !== undefined ? Math.max(1, Math.ceil(total / control.size)) : undefined;
+    const header = (field) => {
+        const label = labels[field.key] ?? field.key;
+        if (!control?.onSortChange || !control.sortable?.includes(field.key))
+            return _jsx("th", { className: "border-b p-3 text-start", scope: "col", children: label }, field.key);
+        const direction = control.sort?.field === field.key ? control.sort.direction : undefined;
+        const onSortChange = control.onSortChange;
+        return _jsx("th", { className: "border-b p-3 text-start", scope: "col", "aria-sort": direction === 'asc' ? 'ascending' : direction === 'desc' ? 'descending' : 'none', children: _jsx("button", { type: "button", className: "mp-table-sort inline-flex items-center gap-1", onClick: () => onSortChange(nextSort(control.sort, field.key)), children: label }) }, field.key);
+    };
+    const filterable = control?.onFiltersChange ? (control.filterable ?? []).filter(name => !hiddenField(name)) : [];
+    const table = _jsx("div", { className: "mp-table-wrap overflow-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("caption", { children: caption }), _jsx("thead", { children: _jsxs("tr", { children: [columns.map(header), detail && _jsx("th", { className: "border-b p-3 text-start", scope: "col", children: labels.detail ?? 'Details' })] }) }), _jsx("tbody", { children: shown.map((row, index) => _jsxs("tr", { children: [columns.map(field => _jsx("td", { className: "border-b p-3 text-start", children: format(row[field.key]) }, field.key)), detail && _jsx("td", { className: "border-b p-3 text-start", children: detail(row) })] }, rowKey ? rowKey(row, index) : index)) })] }) });
+    if (!control)
+        return table;
+    const { page, size, sizes, onSizeChange, onFiltersChange, text } = control;
+    return _jsxs("div", { className: "mp-table grid gap-4", children: [filterable.length > 0 && onFiltersChange && _jsxs("form", { role: "search", "aria-label": text.filters, className: "flex flex-wrap items-end gap-4", onSubmit: event => { event.preventDefault(); const data = new FormData(event.currentTarget); onFiltersChange(Object.fromEntries(filterable.map(name => [name, String(data.get(name) ?? '')]))); }, children: [filterable.map(name => _jsx(Field, { name: name, label: labels[name] ?? name, defaultValue: control.filters?.[name] ?? '' }, name)), _jsx(Button, { type: "submit", tone: "secondary", children: text.apply })] }, JSON.stringify(control.filters ?? {})), table, _jsxs("nav", { "aria-label": text.pagination, className: "flex flex-wrap items-center gap-4", children: [_jsx(Button, { type: "button", tone: "ghost", disabled: page <= 1, onClick: () => control.onPageChange(page - 1), children: text.previous }), _jsx("span", { children: text.page(page, count) }), _jsx(Button, { type: "button", tone: "ghost", disabled: count !== undefined ? page >= count : control.hasMore !== true, onClick: () => control.onPageChange(page + 1), children: text.next }), sizes && onSizeChange && _jsx(Select, { label: text.size ?? '', value: String(size), onChange: event => onSizeChange(Number(event.target.value)), children: sizes.map(option => _jsx("option", { value: option, children: option }, option)) })] })] });
+}
+/**
+ * With `access`, a field that may not be viewed is not rendered (its label, helper and error with it) and leaves
+ * validation and the submitted values; a field that may not be edited is disabled; a save passes `onSubmit` only the
+ * changed fields that may be edited, compared with `original` (dirtyPatch). Without `access`, every editable field
+ * shows and `onSubmit` receives nothing, as before.
+ */
+export function ResourceForm({ fields, values, onChange, onSubmit, labels = {}, saveLabel, disabled = false, access, original = {}, helpers = {}, errors = {} }) {
+    const editable = fields.filter(field => field.editable);
+    if (editable.some(field => !['string', 'boolean', 'number', 'integer'].includes(field.type)))
+        throw new Error('UNSUPPORTED_FORM_FIELD');
+    const shown = access ? editable.filter(field => access.field(field.key).view) : editable;
+    const locked = (field) => disabled || (access ? !access.field(field.key).edit : false);
+    const unavailable = disabled || shown.length === 0 || shown.every(locked);
+    const submit = () => {
+        if (unavailable)
+            return;
+        if (!access) {
+            onSubmit();
+            return;
+        }
+        // Only the fields shown are compared, so a hidden field never leaves; a changed field that may not be edited
+        // throws FORBIDDEN_FIELD instead of being sent.
+        onSubmit(access.patch(original, Object.fromEntries(shown.filter(field => Object.hasOwn(values, field.key)).map(field => [field.key, values[field.key]]))));
+    };
+    return _jsxs("form", { className: "mp-form grid gap-4", onSubmit: event => { event.preventDefault(); submit(); }, children: [shown.map(field => _jsx(Field, { label: labels[field.key] ?? field.key, name: field.key, required: field.required && field.type !== 'boolean', disabled: locked(field), ...(helpers[field.key] !== undefined ? { helper: helpers[field.key] } : {}), ...(errors[field.key] !== undefined ? { error: errors[field.key] } : {}), type: field.type === 'boolean' ? 'checkbox' : field.type === 'number' || field.type === 'integer' ? 'number' : 'text', step: field.type === 'number' ? 'any' : field.type === 'integer' ? 1 : undefined, checked: field.type === 'boolean' ? values[field.key] === true : undefined, value: field.type === 'boolean' ? undefined : String(values[field.key] ?? ''), onChange: event => onChange(field.key, field.type === 'boolean' ? event.target.checked : field.type === 'number' || field.type === 'integer' ? event.target.valueAsNumber : event.target.value) }, field.key)), _jsx(Button, { disabled: unavailable, type: "submit", tone: "secondary", children: saveLabel })] });
+}
+export { Dialog, nextFocus } from './dialog.js';
+export { OneTimeCodeField, ConfirmWithCode, codeDigits } from './one-time-code.js';
+export { Tree, visibleRows, descendantIds, treeKey } from './tree.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/one-time-code.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode } from 'react';
+/**
+ * The digits of typed or pasted input, at most `length` of them: every Unicode decimal digit, of any script,
+ * becomes its ASCII digit, and every other character (spaces, dashes, letters, other numerals) is dropped.
+ * The value is never checked here.
+ */
+export declare function codeDigits(input: string, length: number): string;
+export type OneTimeCodeFieldProps = {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    /** Digits in a code; 4 to 10, 6 by default. */
+    length?: number;
+    helper?: string;
+    error?: string;
+    disabled?: boolean;
+    name?: string;
+};
+/**
+ * A one-time-code field: one input that accepts digits only, of a configured length, with
+ * autocomplete="one-time-code" so that the platform can offer a received code, paste of a formatted code,
+ * and an error state. It never logs or stores the value.
+ */
+export declare function OneTimeCodeField({ label, value, onChange, length, helper, error, disabled, name }: OneTimeCodeFieldProps): import("react").JSX.Element;
+export type ConfirmWithCodeProps = {
+    open: boolean;
+    title: ReactNode;
+    description?: ReactNode;
+    length?: number;
+    labels: Readonly<{
+        code: string;
+        confirm: string;
+        cancel: string;
+        close: string;
+        failed: string;
+        sending?: string;
+    }>;
+    /**
+     * Sends the code to the server through the BFF (a same-origin request with the CSRF token and an
+     * idempotency key) and resolves when the server accepted it. The browser never checks the code.
+     */
+    onConfirm: (code: string, signal: AbortSignal) => Promise<void>;
+    onClose: () => void;
+};
+/**
+ * Confirms a sensitive action with a code sent to the person. The code lives in component state only: it
+ * is cleared on close and on failure, and never written to browser storage, a URL or a log.
+ */
+export declare function ConfirmWithCode({ open, title, description, length, labels, onConfirm, onClose }: ConfirmWithCodeProps): import("react").JSX.Element;

package/dist/one-time-code.js

@@ -0,0 +1,86 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { Button } from './index.js';
+import { Dialog } from './dialog.js';
+const decimalDigit = /^\p{Nd}$/u;
+/**
+ * The value of a Unicode decimal digit (general category Nd), or `undefined` for any other character.
+ * Unicode encodes decimal digits in contiguous runs of ten, zero first, so a digit's value is its distance
+ * from the start of its run of digits, modulo ten.
+ */
+function digitValue(point) {
+    if (!decimalDigit.test(String.fromCodePoint(point)))
+        return undefined;
+    let start = point;
+    while (start > 0 && decimalDigit.test(String.fromCodePoint(start - 1)))
+        start--;
+    return (point - start) % 10;
+}
+/**
+ * The digits of typed or pasted input, at most `length` of them: every Unicode decimal digit, of any script,
+ * becomes its ASCII digit, and every other character (spaces, dashes, letters, other numerals) is dropped.
+ * The value is never checked here.
+ */
+export function codeDigits(input, length) {
+    let digits = '';
+    for (const character of input) {
+        const value = digitValue(character.codePointAt(0));
+        if (value !== undefined)
+            digits += String(value);
+        if (digits.length === length)
+            break;
+    }
+    return digits;
+}
+/**
+ * A one-time-code field: one input that accepts digits only, of a configured length, with
+ * autocomplete="one-time-code" so that the platform can offer a received code, paste of a formatted code,
+ * and an error state. It never logs or stores the value.
+ */
+export function OneTimeCodeField({ label, value, onChange, length = 6, helper, error, disabled = false, name }) {
+    if (!Number.isSafeInteger(length) || length < 4 || length > 10)
+        throw new Error('INVALID_CODE_LENGTH');
+    const id = useId(), description = id + '-description';
+    return _jsxs("label", { className: "mp-field flex max-w-full flex-col gap-[var(--mp-field-gap)]", "data-state": disabled ? 'disabled' : error ? 'error' : 'default', htmlFor: id, children: [_jsx("span", { className: "mp-field-label text-sm font-medium", children: label }), _jsx("input", { id: id, name: name, className: "mp-input mp-code-input h-[var(--mp-control-height)] w-full rounded-[var(--mp-radius-control)] border px-3 tracking-[0.3em]", type: "text", inputMode: "numeric", autoComplete: "one-time-code", pattern: '[0-9]{' + length + '}', maxLength: length * 3, dir: "ltr", spellCheck: false, disabled: disabled, required: true, value: value, "aria-invalid": error !== undefined, "aria-describedby": error || helper ? description : undefined, onChange: event => onChange(codeDigits(event.target.value, length)) }), (helper || error) && _jsx("span", { id: description, className: error ? 'mp-field-helper mp-field-error text-xs' : 'mp-field-helper text-xs', children: error ?? helper })] });
+}
+/**
+ * Confirms a sensitive action with a code sent to the person. The code lives in component state only: it
+ * is cleared on close and on failure, and never written to browser storage, a URL or a log.
+ */
+export function ConfirmWithCode({ open, title, description, length = 6, labels, onConfirm, onClose }) {
+    const [code, setCode] = useState(''), [status, setStatus] = useState('idle');
+    const active = useRef(null);
+    useEffect(() => { if (!open) {
+        active.current?.abort();
+        active.current = null;
+        setCode('');
+        setStatus('idle');
+    } }, [open]);
+    useEffect(() => () => active.current?.abort(), []);
+    async function submit(event) {
+        event.preventDefault();
+        if (code.length !== length || status === 'sending')
+            return;
+        const controller = new AbortController();
+        active.current = controller;
+        setStatus('sending');
+        try {
+            await onConfirm(code, controller.signal);
+            if (!controller.signal.aborted) {
+                setCode('');
+                setStatus('idle');
+            }
+        }
+        catch {
+            if (!controller.signal.aborted) {
+                setCode('');
+                setStatus('failed');
+            }
+        }
+    }
+    function close() { active.current?.abort(); setCode(''); setStatus('idle'); onClose(); }
+    return _jsx(Dialog, { open: open, title: title, description: description, onClose: close, closeLabel: labels.close, children: _jsxs("form", { className: "grid gap-4", onSubmit: submit, children: [_jsx(OneTimeCodeField, { label: labels.code, value: code, onChange: value => { setCode(value); if (status === 'failed')
+                        setStatus('idle'); }, length: length, disabled: status === 'sending', ...(status === 'failed' ? { error: labels.failed } : {}) }), _jsxs("div", { className: "flex flex-wrap justify-end gap-2", children: [_jsx(Button, { type: "button", tone: "ghost", onClick: close, children: labels.cancel }), _jsx(Button, { type: "submit", disabled: code.length !== length, loading: status === 'sending', ...(labels.sending ? { loadingLabel: labels.sending } : {}), children: labels.confirm })] })] }) });
+}
+//# sourceMappingURL=one-time-code.js.map

package/dist/one-time-code.js.map

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

package/dist/tree.d.ts

@@ -0,0 +1,64 @@
+import { type ReactNode } from 'react';
+/** A node of a hierarchy; the component reads it and never changes it. */
+export type TreeNode<T = unknown> = Readonly<{
+    id: string;
+    label: string;
+    children?: readonly TreeNode<T>[];
+    data?: T;
+}>;
+/** A visible row: the node with its position in the WAI-ARIA tree structure. */
+export type TreeRow<T = unknown> = Readonly<{
+    node: TreeNode<T>;
+    level: number;
+    setSize: number;
+    position: number;
+    parentId?: string;
+    expandable: boolean;
+    expanded: boolean;
+}>;
+export type TreeColumn<T = unknown> = Readonly<{
+    key: string;
+    header: ReactNode;
+    cell: (node: TreeNode<T>) => ReactNode;
+}>;
+/** The rows a person can see: depth first, children only under expanded nodes. */
+export declare function visibleRows<T>(nodes: readonly TreeNode<T>[], expanded: ReadonlySet<string>): TreeRow<T>[];
+/** Every descendant id of a node, for a consumer's bulk rule over the current children; read only. */
+export declare function descendantIds<T>(node: TreeNode<T>): string[];
+export type TreeMove = Readonly<{
+    focus?: string;
+    expand?: string;
+    collapse?: string;
+    activate?: string;
+}>;
+/**
+ * The WAI-ARIA tree keyboard model for one key press. In a right-to-left context the horizontal arrows swap,
+ * so that the arrow toward the start of the line always closes and moves to the parent.
+ */
+export declare function treeKey<T>(rows: readonly TreeRow<T>[], current: string | undefined, key: string, direction: 'ltr' | 'rtl'): TreeMove | undefined;
+export type TreeProps<T, S extends string> = {
+    /** The accessible name of the tree. */
+    label: string;
+    nodes: readonly TreeNode<T>[];
+    /** Controlled: the ids of expanded nodes. */
+    expanded: ReadonlySet<string>;
+    onExpandedChange: (next: ReadonlySet<string>) => void;
+    /** Controlled: the consumer-defined state of each node, and the visible text of each state. */
+    states?: Readonly<Record<string, S | undefined>>;
+    stateLabels?: Readonly<Record<S, string>>;
+    /** Enter or Space on a node; the consumer's rule decides what changes, the component decides nothing. */
+    onActivate?: (node: TreeNode<T>) => void;
+    /** Columns make it a tree table (role treegrid); the first column is the node label. */
+    columns?: readonly TreeColumn<T>[];
+    labelHeader?: ReactNode;
+    /** Rows are virtualized: a fixed row height and the viewport height in pixels. */
+    rowHeight?: number;
+    height?: number;
+    direction?: 'ltr' | 'rtl';
+};
+/**
+ * A controlled tree view, or a tree table with columns, on the WAI-ARIA tree pattern: arrows move, open and
+ * close, Home and End jump, Enter and Space activate, with roving focus. Only the rows in view are rendered,
+ * so that thousands of nodes stay responsive. It holds no access rule and no inheritance between states.
+ */
+export declare function Tree<T, S extends string = string>({ label, nodes, expanded, onExpandedChange, states, stateLabels, onActivate, columns, labelHeader, rowHeight, height, direction }: TreeProps<T, S>): import("react").JSX.Element;

package/dist/tree.js

@@ -0,0 +1,127 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useRef, useState } from 'react';
+/** The rows a person can see: depth first, children only under expanded nodes. */
+export function visibleRows(nodes, expanded) {
+    const rows = [];
+    const visit = (list, level, parentId) => {
+        list.forEach((node, index) => {
+            const expandable = (node.children?.length ?? 0) > 0, open = expandable && expanded.has(node.id);
+            rows.push({ node, level, setSize: list.length, position: index + 1, ...(parentId === undefined ? {} : { parentId }), expandable, expanded: open });
+            if (open)
+                visit(node.children, level + 1, node.id);
+        });
+    };
+    visit(nodes, 1);
+    return rows;
+}
+/** Every descendant id of a node, for a consumer's bulk rule over the current children; read only. */
+export function descendantIds(node) {
+    const ids = [];
+    const visit = (list) => { for (const child of list ?? []) {
+        ids.push(child.id);
+        visit(child.children);
+    } };
+    visit(node.children);
+    return ids;
+}
+/**
+ * The WAI-ARIA tree keyboard model for one key press. In a right-to-left context the horizontal arrows swap,
+ * so that the arrow toward the start of the line always closes and moves to the parent.
+ */
+export function treeKey(rows, current, key, direction) {
+    const index = Math.max(0, rows.findIndex(row => row.node.id === current)), row = rows[index];
+    if (!row)
+        return undefined;
+    const inward = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight', outward = direction === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+    switch (key) {
+        case 'ArrowDown': return { focus: rows[Math.min(rows.length - 1, index + 1)].node.id };
+        case 'ArrowUp': return { focus: rows[Math.max(0, index - 1)].node.id };
+        case 'Home': return { focus: rows[0].node.id };
+        case 'End': return { focus: rows[rows.length - 1].node.id };
+        case 'Enter':
+        case ' ': return { activate: row.node.id };
+        case inward:
+            if (row.expandable && !row.expanded)
+                return { expand: row.node.id };
+            if (row.expanded)
+                return { focus: rows[index + 1].node.id };
+            return {};
+        case outward:
+            if (row.expanded)
+                return { collapse: row.node.id };
+            return row.parentId === undefined ? {} : { focus: row.parentId };
+        default: return undefined;
+    }
+}
+/**
+ * A controlled tree view, or a tree table with columns, on the WAI-ARIA tree pattern: arrows move, open and
+ * close, Home and End jump, Enter and Space activate, with roving focus. Only the rows in view are rendered,
+ * so that thousands of nodes stay responsive. It holds no access rule and no inheritance between states.
+ */
+export function Tree({ label, nodes, expanded, onExpandedChange, states, stateLabels, onActivate, columns, labelHeader, rowHeight = 40, height = 480, direction }) {
+    const rows = useMemo(() => visibleRows(nodes, expanded), [nodes, expanded]);
+    const [active, setActive] = useState(undefined), [scroll, setScroll] = useState(0);
+    const viewport = useRef(null), base = useId();
+    const current = rows.some(row => row.node.id === active) ? active : rows[0]?.node.id;
+    const overscan = 4, first = Math.max(0, Math.floor(scroll / rowHeight) - overscan);
+    const last = Math.min(rows.length, Math.ceil((scroll + height) / rowHeight) + overscan);
+    const currentIndex = rows.findIndex(row => row.node.id === current);
+    // The focused row stays rendered when it is scrolled out of view, so that focus is never lost.
+    const indexes = [...Array.from({ length: Math.max(0, last - first) }, (_, i) => first + i)];
+    if (currentIndex >= 0 && (currentIndex < first || currentIndex >= last))
+        indexes.push(currentIndex);
+    const grid = columns !== undefined && columns.length > 0;
+    const id = (nodeId) => base + '-' + encodeURIComponent(nodeId);
+    function move(target) {
+        if (target === undefined)
+            return;
+        setActive(target);
+        const index = rows.findIndex(row => row.node.id === target), element = viewport.current;
+        if (element && index >= 0) {
+            if (index * rowHeight < element.scrollTop)
+                element.scrollTop = index * rowHeight;
+            else if ((index + 1) * rowHeight > element.scrollTop + height)
+                element.scrollTop = (index + 1) * rowHeight - height;
+            setScroll(element.scrollTop);
+        }
+        queueMicrotask(() => document.getElementById(id(target))?.focus());
+    }
+    function keyDown(event) {
+        const resolved = direction ?? ((event.currentTarget.closest('[dir]')?.getAttribute('dir') === 'rtl') ? 'rtl' : 'ltr');
+        const result = treeKey(rows, current, event.key, resolved);
+        if (!result)
+            return;
+        event.preventDefault();
+        if (result.expand)
+            onExpandedChange(new Set([...expanded, result.expand]));
+        if (result.collapse) {
+            const next = new Set(expanded);
+            next.delete(result.collapse);
+            onExpandedChange(next);
+        }
+        if (result.activate) {
+            const row = rows.find(entry => entry.node.id === result.activate);
+            if (row)
+                onActivate?.(row.node);
+        }
+        move(result.focus);
+    }
+    const label_ = (row) => {
+        const state = states?.[row.node.id], stateLabel = state === undefined ? undefined : stateLabels?.[state];
+        return _jsxs("span", { className: "flex min-w-0 items-center gap-2 ps-[calc(var(--mp-tree-level)*1.25rem)]", children: [_jsx("span", { "aria-hidden": "true", className: 'mp-tree-toggle inline-block w-4 text-center' + (row.expanded ? '' : ' rtl:-scale-x-100'), children: row.expandable ? (row.expanded ? '▾' : '▸') : '' }), _jsx("span", { id: id(row.node.id) + '-name', className: "truncate", children: row.node.label }), stateLabel !== undefined && _jsx("span", { id: id(row.node.id) + '-state', className: "mp-tree-state ms-auto text-xs", "data-state": state, children: stateLabel })] });
+    };
+    return _jsxs("div", { ref: viewport, role: grid ? 'treegrid' : 'tree', "aria-label": label, "aria-rowcount": grid ? rows.length + 1 : undefined, className: "mp-tree relative overflow-auto rounded-[var(--mp-radius-control)] border h-[var(--mp-tree-height)]", style: { '--mp-tree-height': height + 'px' }, onKeyDown: keyDown, onScroll: (event) => setScroll(event.currentTarget.scrollTop), children: [grid && _jsxs("div", { role: "row", "aria-rowindex": 1, className: "mp-tree-header sticky top-0 z-10 flex border-b", children: [_jsx("span", { role: "columnheader", className: "flex-1 p-2 text-start", children: labelHeader }), columns.map(column => _jsx("span", { role: "columnheader", className: "w-40 p-2 text-start", children: column.header }, column.key))] }), _jsx("div", { className: "relative h-[var(--mp-tree-total)]", style: { '--mp-tree-total': rows.length * rowHeight + 'px' }, role: grid ? 'rowgroup' : 'none', children: indexes.map(index => {
+                    const row = rows[index], focused = row.node.id === current, state = states?.[row.node.id];
+                    const shared = { id: id(row.node.id), tabIndex: focused ? 0 : -1, 'aria-level': row.level, 'aria-setsize': row.setSize, 'aria-posinset': row.position,
+                        ...(row.expandable ? { 'aria-expanded': row.expanded } : {}),
+                        'aria-labelledby': id(row.node.id) + '-name' + (state !== undefined && stateLabels?.[state] !== undefined ? ' ' + id(row.node.id) + '-state' : ''),
+                        'data-focused': focused || undefined, onFocus: () => setActive(row.node.id), onClick: () => { setActive(row.node.id); onActivate?.(row.node); },
+                        className: 'mp-tree-item absolute inset-x-0 flex h-[var(--mp-tree-row)] translate-y-[var(--mp-tree-offset)] cursor-pointer items-center',
+                        style: { '--mp-tree-row': rowHeight + 'px', '--mp-tree-offset': index * rowHeight + 'px', '--mp-tree-level': row.level - 1 } };
+                    return grid
+                        ? _jsxs("div", { role: "row", "aria-rowindex": index + 2, ...shared, children: [_jsx("span", { role: "gridcell", className: "flex-1 p-2 text-start", children: label_(row) }), columns.map(column => _jsx("span", { role: "gridcell", className: "w-40 p-2 text-start", children: column.cell(row.node) }, column.key))] }, row.node.id)
+                        : _jsx("div", { role: "treeitem", ...shared, children: _jsx("span", { className: "flex-1 px-2", children: label_(row) }) }, row.node.id);
+                }) })] });
+}
+//# sourceMappingURL=tree.js.map

package/dist/tree.js.map

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

package/package.json

@@ -1,6 +1,44 @@
 {
   "name": "@mpfrontend/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/panahister/mpfrontend.git",
+    "directory": "packages/ui"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./src/styles.css",
+    "./tailwind.css": "./src/tailwind.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "src/styles.css",
+    "src/tailwind.css"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@mpfrontend/access-core": "0.1.0",
+    "@mpfrontend/primitives": "0.1.0"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "20.14.5",
+    "happy-dom": "20.14.5"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tailwindcss": ">=4 <5"
+  }
 }

package/src/styles.css

@@ -0,0 +1,36 @@
+.mp-button { font:inherit; background:var(--mp-action-primary); color:var(--mp-on-primary); cursor:pointer; }
+.mp-button:not(:disabled):hover { background:var(--mp-action-primaryhover); }
+.mp-button:not(:disabled):active { background:var(--mp-action-primarypressed); }
+.mp-button:focus-visible { outline:2px solid var(--mp-focus-ring); outline-offset:2px; }
+.mp-button[data-tone="secondary"] { background:var(--mp-action-secondary); color:var(--mp-foreground-primary); border:1px solid var(--mp-border-subtle); }
+.mp-button[data-tone="secondary"]:not(:disabled):hover { background:var(--mp-action-secondaryhover); }
+.mp-button[data-tone="ghost"] { background:transparent; color:var(--mp-foreground-primary); }
+.mp-button[data-tone="ghost"]:not(:disabled):hover { background:var(--mp-surface-subtle); }
+.mp-button[data-tone="danger"] { background:var(--mp-action-danger); color:var(--mp-foreground-inverse,var(--mp-on-primary)); }
+.mp-button[data-tone="danger"]:not(:disabled):hover { filter:brightness(0.92); }
+.mp-button:disabled { color:var(--mp-foreground-disabled); background:var(--mp-surface-subtle); cursor:not-allowed; }
+.mp-button-spinner { width:1rem; height:1rem; border:1.5px solid currentColor; border-inline-end-color:transparent; border-radius:50%; animation:mp-spin .8s linear infinite; }
+@keyframes mp-spin { to { transform:rotate(360deg); } }
+@media (prefers-reduced-motion:reduce) { .mp-button-spinner { animation-duration:1.8s; } }
+.mp-field { font-family:var(--mp-font-family); }
+.mp-field-label { color:var(--mp-foreground-primary); }
+.mp-input,.mp-select { box-sizing:border-box; border-color:var(--mp-border-default); background:var(--mp-surface-panel); color:var(--mp-foreground-primary); font:inherit; }
+.mp-input::placeholder { color:var(--mp-foreground-muted); }
+.mp-input:disabled,.mp-select:disabled { color:var(--mp-foreground-disabled); background:var(--mp-surface-subtle); }
+.mp-input[aria-invalid="true"] { border-color:var(--mp-status-error); }
+.mp-field-helper { color:var(--mp-foreground-secondary); }
+.mp-field-error { color:var(--mp-status-error); }
+.mp-select-wrap[data-custom-icon="true"]>.mp-select { appearance:none; padding-inline-end:2.75rem; }
+.mp-card { background:var(--mp-surface-panel); border-color:var(--mp-border-default); }
+.mp-table-wrap th,.mp-table-wrap td { border-color:var(--mp-border-default); }
+.mp-table-wrap th { color:var(--mp-foreground-secondary); }
+.mp-table-wrap caption { text-align:start; padding-block:1rem; }
+.mp-dialog { background:var(--mp-surface-panel); color:var(--mp-foreground-primary); border-color:var(--mp-border-default); }
+.mp-dialog::backdrop { background:color-mix(in srgb, var(--mp-surface-canvas) 70%, transparent); }
+.mp-dialog-close { background:transparent; color:var(--mp-foreground-secondary); border:0; cursor:pointer; font:inherit; }
+.mp-dialog-close:focus-visible { outline:2px solid var(--mp-focus-ring); outline-offset:2px; }
+.mp-tree { border-color:var(--mp-border-default); background:var(--mp-surface-panel); }
+.mp-tree-header { background:var(--mp-surface-panel); border-color:var(--mp-border-default); color:var(--mp-foreground-secondary); }
+.mp-tree-item:hover { background:var(--mp-surface-subtle); }
+.mp-tree-item:focus-visible { outline:2px solid var(--mp-focus-ring); outline-offset:-2px; }
+.mp-tree-state { color:var(--mp-foreground-secondary); }

package/src/tailwind.css

@@ -0,0 +1,2 @@
+/* Registers the compiled package output as a Tailwind v4 source in consuming applications. */
+@source "../dist/**/*.js";