@nsail/ui 0.0.0-stage → 0.1.135

package/dist/app.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import { type Mediator } from "@nsail/stack";
+export interface NsAppProps {
+    mediator: Mediator;
+    language: string;
+    /** The app's catalog for a language, merged over the Stack's. */
+    strings?: (language: string) => Promise<Record<string, string>>;
+    children: ReactNode;
+}
+/** The app's root: the stack's providers, the catalog read before the first paint, and the one
+ * confirmation surface. */
+export declare function NsApp({ mediator, language, strings, children }: NsAppProps): import("react").JSX.Element;

package/dist/app.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StackProvider, useCatalog } from "@nsail/stack";
+import { NsDialogHost } from "./dialog";
+/** The app's root: the stack's providers, the catalog read before the first paint, and the one
+ * confirmation surface. */
+export function NsApp({ mediator, language, strings, children }) {
+    const catalog = useCatalog(language, strings);
+    if (!catalog.strings) {
+        return _jsx("div", { className: "ns-boot", "aria-busy": "true" });
+    }
+    return (_jsxs(StackProvider, { mediator: mediator, strings: catalog.strings, children: [catalog.failed && _jsx("div", { className: "ns-banner ns-banner-error", children: catalog.strings.translate("Common.UnhandledError") }), _jsx(NsDialogHost, { children: children })] }));
+}

package/dist/button.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonHTMLAttributes } from "react";
+export interface NsButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** A string key, never a sentence: the label is the catalog's. */
+    text: string;
+    variant?: "default" | "primary" | "danger" | "quiet";
+    busy?: boolean;
+}
+export declare function NsButton({ text, variant, busy, type, disabled, className, ...rest }: NsButtonProps): import("react").JSX.Element;

package/dist/button.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStrings } from "@nsail/stack";
+export function NsButton({ text, variant = "default", busy = false, type = "button", disabled, className, ...rest }) {
+    const strings = useStrings();
+    return (_jsx("button", { ...rest, type: type, disabled: disabled || busy, "aria-busy": busy || undefined, className: `ns-button ns-button-${variant}${className ? ` ${className}` : ""}`, children: strings.translate(text) }));
+}

package/dist/dialog.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from "react";
+export declare function NsDialogHost({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useConfirm(): (text: string, danger?: boolean) => Promise<boolean>;

package/dist/dialog.js

@@ -0,0 +1,33 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2026 Leonardo Porro and Emmanuel Arias. https://github.com/nsail-ar/nsail-stack
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { NsButton } from "./button";
+const DialogContext = createContext(null);
+// One confirmation surface for the whole app, a native <dialog>: focus trapping, Escape and the
+// backdrop come from the browser instead of from code this package would own.
+export function NsDialogHost({ children }) {
+    const [pending, setPending] = useState(null);
+    const dialog = useRef(null);
+    const confirm = useCallback((text, danger = false) => {
+        return new Promise((resolve) => setPending({ text, danger, resolve }));
+    }, []);
+    useEffect(() => {
+        if (pending && dialog.current && !dialog.current.open) {
+            dialog.current.showModal();
+        }
+    }, [pending]);
+    function close(confirmed) {
+        pending?.resolve(confirmed);
+        dialog.current?.close();
+        setPending(null);
+    }
+    return (_jsxs(DialogContext.Provider, { value: confirm, children: [children, _jsx("dialog", { ref: dialog, className: "ns-dialog", onCancel: () => close(false), children: pending && (_jsxs(_Fragment, { children: [_jsx("p", { children: pending.text }), _jsxs("div", { className: "ns-actions", children: [_jsx(NsButton, { text: "Actions.Cancel", onClick: () => close(false) }), _jsx(NsButton, { text: "Actions.Confirm", variant: pending.danger ? "danger" : "primary", onClick: () => close(true), autoFocus: true })] })] })) })] }));
+}
+export function useConfirm() {
+    const confirm = useContext(DialogContext);
+    if (!confirm) {
+        throw new Error("useConfirm needs an <NsApp> above it.");
+    }
+    return confirm;
+}

package/dist/field.d.ts

@@ -0,0 +1,10 @@
+export interface NsFieldProps<T> {
+    name: keyof T & string;
+    multiline?: boolean;
+    autoFocus?: boolean;
+    /** A string key replacing the one the field's own key derives. */
+    label?: string;
+}
+/** One member of the form's message, drawn from its descriptor: the input fits the wire kind,
+ * the label is the member's key, the bounds are the message's own DataAnnotations. */
+export declare function NsField<T>({ name, multiline, autoFocus, label }: NsFieldProps<T>): import("react").JSX.Element;

package/dist/field.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2026 Leonardo Porro and Emmanuel Arias. https://github.com/nsail-ar/nsail-stack
+import { useId } from "react";
+import { memberOf, useStrings } from "@nsail/stack";
+import { useFormContext } from "./form";
+const inputTypes = { email: "email", phone: "tel", url: "url" };
+/** One member of the form's message, drawn from its descriptor: the input fits the wire kind,
+ * the label is the member's key, the bounds are the message's own DataAnnotations. */
+export function NsField({ name, multiline = false, autoFocus, label }) {
+    const form = useFormContext();
+    const strings = useStrings();
+    const id = useId();
+    const field = form.message.fields[name];
+    const value = form.value[name];
+    const issues = form.issues(name);
+    const caption = strings.translate(label ?? field.key, memberOf(field));
+    const invalid = issues.length > 0;
+    function set(next) {
+        form.set(name, next);
+    }
+    function text(event) {
+        const raw = event.target.value;
+        set(raw === "" && field.nullable ? null : raw);
+    }
+    function number(event) {
+        const raw = event.target.value;
+        set(raw === "" ? (field.nullable ? null : undefined) : Number(raw));
+    }
+    const common = {
+        id,
+        name,
+        autoFocus,
+        "aria-invalid": invalid || undefined,
+        "aria-describedby": invalid ? `${id}-issues` : undefined,
+        required: field.required,
+    };
+    let control;
+    switch (field.kind) {
+        case "boolean":
+            control = _jsx("input", { ...common, type: "checkbox", checked: value === true, onChange: (e) => set(e.target.checked) });
+            break;
+        case "integer":
+        case "number":
+            control = (_jsx("input", { ...common, type: "number", min: field.min, max: field.max, step: field.kind === "integer" ? 1 : "any", value: value === null || value === undefined ? "" : String(value), onChange: number }));
+            break;
+        case "enum":
+            control = (_jsxs("select", { ...common, value: value ?? "", onChange: text, children: [(field.nullable || value === undefined) && _jsx("option", { value: "" }), field.enum?.values.map((option) => (_jsx("option", { value: option, children: strings.enumValue(field.enum, option) }, option)))] }));
+            break;
+        case "date":
+            control = _jsx("input", { ...common, type: "date", value: value ?? "", onChange: text });
+            break;
+        case "time":
+            control = _jsx("input", { ...common, type: "time", value: value ?? "", onChange: text });
+            break;
+        default:
+            control = multiline ? (_jsx("textarea", { ...common, rows: 4, maxLength: field.maxLength, value: value ?? "", onChange: text })) : (_jsx("input", { ...common, type: (field.format && inputTypes[field.format]) || "text", maxLength: field.maxLength, value: value ?? "", onChange: text }));
+    }
+    return (_jsxs("div", { className: `ns-field ns-field-${field.kind}${invalid ? " ns-field-invalid" : ""}`, children: [_jsxs("label", { htmlFor: id, children: [caption, field.required && _jsx("span", { className: "ns-required", "aria-hidden": "true", children: " *" })] }), control, invalid && (_jsx("div", { id: `${id}-issues`, className: "ns-issues", children: issues.map((issue, index) => (_jsx("div", { children: strings.issue(issue) }, index))) }))] }));
+}

package/dist/form.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+import { type Form } from "@nsail/stack";
+export declare function useFormContext<T>(): Form<T>;
+/** "Saved" beside the form's buttons, for as long as nothing has changed since the send. */
+export declare function NsSaved(): import("react").JSX.Element | null;
+export interface NsFormProps<T> {
+    form: Form<T>;
+    onSubmit: (value: T) => Promise<void>;
+    /** The screen's first read, run again: offered only while the refusal is a Conflict, because
+     * re-applying the edit over what someone else saved is the user's act, never a merge. */
+    onReload?: () => void;
+    children: ReactNode;
+}
+export declare function NsForm<T>({ form, onSubmit, onReload, children }: NsFormProps<T>): import("react").JSX.Element;

package/dist/form.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2026 Leonardo Porro and Emmanuel Arias. https://github.com/nsail-ar/nsail-stack
+import { createContext, useContext } from "react";
+import { memberOf, useStrings } from "@nsail/stack";
+import { NsButton } from "./button";
+const FormContext = createContext(null);
+export function useFormContext() {
+    const form = useContext(FormContext);
+    if (!form) {
+        throw new Error("An NsField needs an <NsForm> around it.");
+    }
+    return form;
+}
+/** "Saved" beside the form's buttons, for as long as nothing has changed since the send. */
+export function NsSaved() {
+    const form = useFormContext();
+    const strings = useStrings();
+    return form.saved ? (_jsx("span", { className: "ns-saved", role: "status", children: strings.translate("Common.Saved") })) : null;
+}
+export function NsForm({ form, onSubmit, onReload, children }) {
+    const strings = useStrings();
+    function handle(event) {
+        event.preventDefault();
+        void form.submit(onSubmit);
+    }
+    // A refusal no field can show — a missing row, a rule about the whole act, a lost
+    // connection — is drawn above the fields instead of vanishing.
+    const members = new Set(Object.values(form.message.fields).map(memberOf));
+    const loose = form.problem?.issues.filter((issue) => !issue.source || !members.has(issue.source)) ?? [];
+    const banner = form.problem && (form.problem.code !== "InvalidModel" || loose.length > 0);
+    return (_jsx(FormContext.Provider, { value: form, children: _jsxs("form", { className: "ns-form", onSubmit: handle, noValidate: true, children: [banner && form.problem && (_jsxs("div", { className: "ns-banner ns-banner-error", role: "alert", children: [_jsx("strong", { children: strings.problem(form.problem) }), loose.map((issue, index) => (_jsx("div", { children: strings.issue(issue) }, index))), onReload && form.problem.code === "Conflict" && _jsx(NsButton, { text: "Common.Reload", onClick: onReload })] })), children] }) }));
+}

package/dist/format.d.ts

@@ -0,0 +1,3 @@
+import type { Field, Strings } from "@nsail/stack";
+/** A wire value as a person reads it: the member's kind decides, the language formats. */
+export declare function display(strings: Strings, field: Field, value: unknown): string;

package/dist/format.js

@@ -0,0 +1,26 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2026 Leonardo Porro and Emmanuel Arias. https://github.com/nsail-ar/nsail-stack
+/** A wire value as a person reads it: the member's kind decides, the language formats. */
+export function display(strings, field, value) {
+    if (value === null || value === undefined || value === "") {
+        return "";
+    }
+    switch (field.kind) {
+        case "enum":
+            return field.enum ? strings.enumValue(field.enum, String(value)) : String(value);
+        case "boolean":
+            return strings.translate(value ? "Common.Yes" : "Common.No");
+        case "date": {
+            // A business date carries no zone; read as UTC midnight it cannot slide a day.
+            const date = new Date(`${String(value)}T00:00:00Z`);
+            return date.toLocaleDateString(strings.language, { timeZone: "UTC" });
+        }
+        case "datetime":
+            return new Date(String(value)).toLocaleString(strings.language, { dateStyle: "short", timeStyle: "short" });
+        case "integer":
+        case "number":
+            return Number(value).toLocaleString(strings.language);
+        default:
+            return String(value);
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./app";
+export * from "./button";
+export * from "./dialog";
+export * from "./load";
+export * from "./form";
+export * from "./field";
+export * from "./format";
+export * from "./table";
+export * from "./pager";
+export * from "./page";
+export * from "./search";
+export * from "./select";

package/dist/index.js

@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2026 Leonardo Porro and Emmanuel Arias. https://github.com/nsail-ar/nsail-stack
+export * from "./app";
+export * from "./button";
+export * from "./dialog";
+export * from "./load";
+export * from "./form";
+export * from "./field";
+export * from "./format";
+export * from "./table";
+export * from "./pager";
+export * from "./page";
+export * from "./search";
+export * from "./select";

package/dist/load.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import { type Load } from "@nsail/stack";
+export interface NsLoadProps<T> {
+    load: Load<T>;
+    children: (data: T) => ReactNode;
+}
+/** A region that owns its read: a spinner the first time, the last answer (dimmed) while it
+ * re-reads, and a failure in place with a retry — never a toast, never an empty state that
+ * lies about a read that failed. */
+export declare function NsLoad<T>({ load, children }: NsLoadProps<T>): import("react").JSX.Element;

package/dist/load.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStrings } from "@nsail/stack";
+import { NsButton } from "./button";
+/** A region that owns its read: a spinner the first time, the last answer (dimmed) while it
+ * re-reads, and a failure in place with a retry — never a toast, never an empty state that
+ * lies about a read that failed. */
+export function NsLoad({ load, children }) {
+    const strings = useStrings();
+    if (load.state === "failed") {
+        return (_jsxs("div", { className: "ns-failure", role: "alert", children: [_jsx("strong", { children: strings.problem(load.problem) }), load.problem.issues.map((issue, index) => (_jsx("div", { children: strings.issue(issue) }, index))), _jsx(NsButton, { text: "Common.Retry", onClick: load.reload })] }));
+    }
+    if (load.data === undefined) {
+        return _jsxs("div", { className: "ns-loading", "aria-busy": "true", children: [strings.translate("Common.Loading"), "\u2026"] });
+    }
+    return _jsx("div", { className: load.state === "loading" ? "ns-region ns-stale" : "ns-region", children: children(load.data) });
+}

package/dist/ns.css

@@ -0,0 +1,339 @@
+:root {
+  --ns-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --ns-bg: #f6f7f9;
+  --ns-surface: #ffffff;
+  --ns-ink: #1d2433;
+  --ns-muted: #5d6677;
+  --ns-line: #e1e4ea;
+  --ns-primary: #2f5bd3;
+  --ns-primary-ink: #ffffff;
+  --ns-danger: #c4342d;
+  --ns-danger-ink: #ffffff;
+  --ns-error-bg: #fdeceb;
+  --ns-hover: #f0f3f8;
+  --ns-radius: 8px;
+  --ns-shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 10%);
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ns-bg: #12151b;
+    --ns-surface: #1b1f27;
+    --ns-ink: #e6e9ef;
+    --ns-muted: #9aa3b2;
+    --ns-line: #2c323d;
+    --ns-primary: #6f93ff;
+    --ns-primary-ink: #0d1120;
+    --ns-danger: #ff6b63;
+    --ns-danger-ink: #1a0b0a;
+    --ns-error-bg: #3a1d1c;
+    --ns-hover: #232935;
+    color-scheme: dark;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--ns-font);
+  font-size: 15px;
+  line-height: 1.45;
+  background: var(--ns-bg);
+  color: var(--ns-ink);
+}
+
+.ns-boot {
+  min-height: 100vh;
+}
+
+.ns-page {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 24px 16px 48px;
+}
+
+.ns-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+
+.ns-page-header h1 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 650;
+}
+
+.ns-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.ns-toolbar {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.ns-card {
+  background: var(--ns-surface);
+  border: 1px solid var(--ns-line);
+  border-radius: var(--ns-radius);
+  box-shadow: var(--ns-shadow);
+  padding: 16px;
+}
+
+.ns-button {
+  font: inherit;
+  font-weight: 550;
+  border: 1px solid var(--ns-line);
+  border-radius: var(--ns-radius);
+  background: var(--ns-surface);
+  color: var(--ns-ink);
+  padding: 7px 14px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.ns-button:hover:not(:disabled) {
+  background: var(--ns-hover);
+}
+
+.ns-button:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.ns-button-primary {
+  background: var(--ns-primary);
+  border-color: var(--ns-primary);
+  color: var(--ns-primary-ink);
+}
+
+.ns-button-primary:hover:not(:disabled) {
+  background: var(--ns-primary);
+  filter: brightness(1.08);
+}
+
+.ns-button-danger {
+  background: var(--ns-danger);
+  border-color: var(--ns-danger);
+  color: var(--ns-danger-ink);
+}
+
+.ns-button-danger:hover:not(:disabled) {
+  background: var(--ns-danger);
+  filter: brightness(1.08);
+}
+
+.ns-button-quiet {
+  border-color: transparent;
+  background: transparent;
+}
+
+.ns-button[aria-busy="true"] {
+  cursor: progress;
+}
+
+.ns-search,
+.ns-field input:not([type="checkbox"]),
+.ns-field select,
+.ns-field textarea,
+.ns-select {
+  font: inherit;
+  color: inherit;
+  background: var(--ns-surface);
+  border: 1px solid var(--ns-line);
+  border-radius: var(--ns-radius);
+  padding: 7px 10px;
+  min-width: 0;
+}
+
+.ns-search {
+  flex: 1 1 240px;
+}
+
+.ns-table-scroll {
+  overflow-x: auto;
+  background: var(--ns-surface);
+  border: 1px solid var(--ns-line);
+  border-radius: var(--ns-radius);
+}
+
+.ns-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.ns-table th,
+.ns-table td {
+  text-align: left;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--ns-line);
+  white-space: nowrap;
+}
+
+.ns-table th {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ns-muted);
+}
+
+.ns-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.ns-table .ns-col-integer,
+.ns-table .ns-col-number {
+  text-align: right;
+}
+
+.ns-table .ns-col-actions {
+  text-align: right;
+  width: 1%;
+}
+
+.ns-clickable {
+  cursor: pointer;
+}
+
+.ns-clickable:hover {
+  background: var(--ns-hover);
+}
+
+.ns-pager {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  justify-content: flex-end;
+  padding-top: 8px;
+  color: var(--ns-muted);
+}
+
+.ns-pager span {
+  margin-right: 8px;
+}
+
+.ns-empty,
+.ns-loading {
+  padding: 32px 16px;
+  text-align: center;
+  color: var(--ns-muted);
+  background: var(--ns-surface);
+  border: 1px dashed var(--ns-line);
+  border-radius: var(--ns-radius);
+}
+
+.ns-stale {
+  opacity: 0.6;
+  transition: opacity 0.15s;
+}
+
+.ns-failure,
+.ns-banner-error {
+  display: grid;
+  gap: 4px;
+  justify-items: start;
+  padding: 12px 14px;
+  border-radius: var(--ns-radius);
+  background: var(--ns-error-bg);
+  color: var(--ns-ink);
+  border: 1px solid var(--ns-danger);
+  margin-bottom: 12px;
+}
+
+.ns-form {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 14px 16px;
+}
+
+.ns-form > .ns-banner-error,
+.ns-form > .ns-actions,
+.ns-form > .ns-field-wide {
+  grid-column: 1 / -1;
+}
+
+.ns-field {
+  display: grid;
+  gap: 4px;
+  align-content: start;
+}
+
+.ns-field label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ns-muted);
+}
+
+.ns-field-boolean {
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  align-self: end;
+  padding-bottom: 8px;
+}
+
+.ns-field-boolean label {
+  order: 2;
+}
+
+.ns-field-boolean .ns-issues {
+  grid-column: 1 / -1;
+}
+
+.ns-field-invalid input,
+.ns-field-invalid select,
+.ns-field-invalid textarea {
+  border-color: var(--ns-danger) !important;
+}
+
+.ns-issues {
+  font-size: 13px;
+  color: var(--ns-danger);
+}
+
+.ns-saved {
+  color: var(--ns-muted);
+  font-size: 13px;
+}
+
+.ns-required {
+  color: var(--ns-danger);
+}
+
+.ns-dialog {
+  border: 1px solid var(--ns-line);
+  border-radius: var(--ns-radius);
+  background: var(--ns-surface);
+  color: var(--ns-ink);
+  box-shadow: var(--ns-shadow);
+  padding: 20px;
+  width: min(420px, calc(100vw - 32px));
+}
+
+.ns-dialog::backdrop {
+  background: rgb(0 0 0 / 35%);
+}
+
+.ns-dialog .ns-actions {
+  justify-content: flex-end;
+}
+
+@media (max-width: 600px) {
+  .ns-table .ns-hide-narrow {
+    display: none;
+  }
+}

package/dist/page.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+export interface NsPageProps {
+    /** A string key. */
+    title: string;
+    actions?: ReactNode;
+    children: ReactNode;
+}
+export declare function NsPage({ title, actions, children }: NsPageProps): import("react").JSX.Element;

package/dist/page.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2026 Leonardo Porro and Emmanuel Arias. https://github.com/nsail-ar/nsail-stack
+import { useEffect } from "react";
+import { useStrings } from "@nsail/stack";
+export function NsPage({ title, actions, children }) {
+    const strings = useStrings();
+    const text = strings.translate(title);
+    useEffect(() => {
+        document.title = text;
+    }, [text]);
+    return (_jsxs("main", { className: "ns-page", children: [_jsxs("header", { className: "ns-page-header", children: [_jsx("h1", { children: text }), actions && _jsx("div", { className: "ns-actions", children: actions })] }), children] }));
+}

package/dist/pager.d.ts

@@ -0,0 +1,9 @@
+export interface PageInfo {
+    pageIndex: number;
+    pageSize: number;
+    totalCount: number;
+}
+export declare function NsPager({ page, onPage }: {
+    page: PageInfo;
+    onPage: (pageIndex: number) => void;
+}): import("react").JSX.Element;

package/dist/pager.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2026 Leonardo Porro and Emmanuel Arias. https://github.com/nsail-ar/nsail-stack
+import { useStrings } from "@nsail/stack";
+import { NsButton } from "./button";
+export function NsPager({ page, onPage }) {
+    const strings = useStrings();
+    const from = page.totalCount === 0 ? 0 : page.pageIndex * page.pageSize + 1;
+    const to = Math.min((page.pageIndex + 1) * page.pageSize, page.totalCount);
+    const last = Math.max(0, Math.ceil(page.totalCount / page.pageSize) - 1);
+    return (_jsxs("nav", { className: "ns-pager", children: [_jsx("span", { children: strings.format("Mud.MudDataGridPager_InfoFormat", [String(from), String(to), String(page.totalCount)]) }), _jsx(NsButton, { text: "Mud.MudTablePager_PreviousPage", variant: "quiet", disabled: page.pageIndex <= 0, onClick: () => onPage(page.pageIndex - 1) }), _jsx(NsButton, { text: "Mud.MudTablePager_NextPage", variant: "quiet", disabled: page.pageIndex >= last, onClick: () => onPage(page.pageIndex + 1) })] }));
+}

package/dist/search.d.ts

@@ -0,0 +1,10 @@
+import { type Field } from "@nsail/stack";
+export interface NsSearchProps {
+    /** The message member the term is sent as: its key is the label, its bound the input's. */
+    field: Field;
+    value: string | null | undefined;
+    onSearch: (term: string | null) => void;
+    delay?: number;
+}
+/** A search box that sends once the typing stops, not on every key. */
+export declare function NsSearch({ field, value, onSearch, delay }: NsSearchProps): import("react").JSX.Element;

package/dist/search.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2026 Leonardo Porro and Emmanuel Arias. https://github.com/nsail-ar/nsail-stack
+import { useEffect, useState } from "react";
+import { useStrings } from "@nsail/stack";
+/** A search box that sends once the typing stops, not on every key. */
+export function NsSearch({ field, value, onSearch, delay = 300 }) {
+    const strings = useStrings();
+    const [term, setTerm] = useState(value ?? "");
+    useEffect(() => {
+        const trimmed = term.trim();
+        if (trimmed === (value ?? "")) {
+            return;
+        }
+        const timer = setTimeout(() => onSearch(trimmed.length > 0 ? trimmed : null), delay);
+        return () => clearTimeout(timer);
+    }, [term, value, onSearch, delay]);
+    return (_jsx("input", { className: "ns-search", type: "search", "aria-label": strings.translate(field.key), placeholder: strings.translate("Common.Search"), maxLength: field.maxLength, value: term, onChange: (event) => setTerm(event.target.value) }));
+}

package/dist/select.d.ts

@@ -0,0 +1,12 @@
+import { type Field } from "@nsail/stack";
+export interface NsEnumSelectProps<TValue extends string> {
+    /** A member whose kind is enum: its key labels the select, its values are the options. */
+    field: Field;
+    value: TValue | null | undefined;
+    onChange: (value: TValue | null) => void;
+    /** A string key: what "no value" reads as, offered when the member is nullable. */
+    none?: string;
+}
+/** A filter or a pick over an enum member, outside a form: the options and their words come
+ * from the descriptor, so the page never lists them itself. */
+export declare function NsEnumSelect<TValue extends string>({ field, value, onChange, none }: NsEnumSelectProps<TValue>): import("react").JSX.Element;

package/dist/select.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2026 Leonardo Porro and Emmanuel Arias. https://github.com/nsail-ar/nsail-stack
+import { useStrings } from "@nsail/stack";
+/** A filter or a pick over an enum member, outside a form: the options and their words come
+ * from the descriptor, so the page never lists them itself. */
+export function NsEnumSelect({ field, value, onChange, none = "Common.All" }) {
+    const strings = useStrings();
+    if (!field.enum) {
+        throw new Error(`${field.key} is not an enum member.`);
+    }
+    const type = field.enum;
+    return (_jsxs("select", { className: "ns-select", "aria-label": strings.translate(field.key), value: value ?? "", onChange: (event) => onChange((event.target.value || null)), children: [field.nullable && _jsx("option", { value: "", children: strings.translate(none) }), type.values.map((option) => (_jsx("option", { value: option, children: strings.enumValue(type, option) }, option)))] }));
+}

package/dist/table.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import { type ModelType } from "@nsail/stack";
+export interface NsTableProps<T> {
+    model: ModelType<T>;
+    rows: readonly T[];
+    columns: readonly (keyof T & string)[];
+    rowKey: keyof T & string;
+    onRowClick?: (row: T) => void;
+    actions?: (row: T) => ReactNode;
+    /** A string key: what an empty answer says. */
+    empty?: string;
+}
+/** Rows of a projection: each header is the member's key, each cell its value formatted by kind. */
+export declare function NsTable<T>({ model, rows, columns, rowKey, onRowClick, actions, empty }: NsTableProps<T>): import("react").JSX.Element;

package/dist/table.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memberOf, useStrings } from "@nsail/stack";
+import { display } from "./format";
+/** Rows of a projection: each header is the member's key, each cell its value formatted by kind. */
+export function NsTable({ model, rows, columns, rowKey, onRowClick, actions, empty = "Common.NoRecords" }) {
+    const strings = useStrings();
+    if (rows.length === 0) {
+        return _jsx("div", { className: "ns-empty", children: strings.translate(empty) });
+    }
+    return (_jsx("div", { className: "ns-table-scroll", children: _jsxs("table", { className: "ns-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [columns.map((column) => {
+                                const field = model.fields[column];
+                                return (_jsx("th", { className: `ns-col-${field.kind}`, children: strings.translate(field.key, memberOf(field)) }, column));
+                            }), actions && _jsx("th", { className: "ns-col-actions" })] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { className: onRowClick ? "ns-clickable" : undefined, onClick: onRowClick ? () => onRowClick(row) : undefined, children: [columns.map((column) => {
+                                const field = model.fields[column];
+                                return (_jsx("td", { className: `ns-col-${field.kind}`, children: display(strings, field, row[column]) }, column));
+                            }), actions && (_jsx("td", { className: "ns-col-actions", onClick: (event) => event.stopPropagation(), children: actions(row) }))] }, String(row[rowKey])))) })] }) }));
+}

package/package.json

@@ -1,6 +1,45 @@
 {
   "name": "@nsail/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.135",
+  "description": "The Ns* components for a React client, drawn from the descriptors an Sdk generates.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nsail-ar/nsail-stack.git",
+    "directory": "src/Stack/React/NSail.React.Ui"
+  },
+  "homepage": "https://github.com/nsail-ar/nsail-stack#readme",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "@nsail/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./ns.css": {
+      "@nsail/source": "./src/ns.css",
+      "default": "./dist/ns.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "dependencies": {
+    "@nsail/stack": "0.1.135"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node -e \"require('fs').copyFileSync('src/ns.css', 'dist/ns.css')\"",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-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.