@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/i18n/provider.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DirectionProvider } from "@base-ui/react/direction-provider";
+import { createContext, use, useMemo } from "react";
+import { useClock } from "../lib/clock.js";
+import { DEFAULT_LOCALE } from "./defaults.js";
+import { createFormatters, englishFormatters } from "./format.js";
+import { EN_UI_STRINGS } from "./strings/index.js";
+// No default value: nothing locale-bound is created at module scope. Without a provider the hooks
+// fall back to English ("en").
+const UiI18nContext = createContext(null);
+/**
+ * Localizes every kit component below it: its words (`strings`), formatters for the exact tag in its
+ * currency, and the writing direction for Base UI (arrow keys, sliders and popup sides follow it in a
+ * right-to-left language). Any language works: pass its table and its direction. Without a provider,
+ * components render English with "en-GB" formatting, left to right. Explicit label props on a component
+ * always win over these strings.
+ */
+export function UiI18nProvider({ locale, strings = EN_UI_STRINGS, timeZone, currency, direction = "ltr", children, }) {
+    const value = useMemo(() => ({ locale, strings, formatters: createFormatters(locale, strings, timeZone, currency) }), [locale, strings, timeZone, currency]);
+    return (_jsx(UiI18nContext, { value: value, children: _jsx(DirectionProvider, { direction: direction, children: children }) }));
+}
+/** The provider's strings; English without one. */
+export function useUiStrings() {
+    return use(UiI18nContext)?.strings ?? EN_UI_STRINGS;
+}
+/** Exactly the BCP 47 tag the provider was given ("ru-RU", "en-US"); the default language without one. */
+export function useUiLocale() {
+    return use(UiI18nContext)?.locale ?? DEFAULT_LOCALE;
+}
+/** Count, money, percent, duration, relative-time and date formatters for the provider's locale. */
+export function useFormatters() {
+    const context = use(UiI18nContext);
+    const clock = useClock();
+    const fallback = useMemo(() => (context === null ? englishFormatters() : undefined), [context]);
+    const formatters = context?.formatters ?? fallback ?? englishFormatters();
+    // A relative time given no "now" reads the kit's one clock, so a pinned clock pins it too.
+    return useMemo(() => ({ ...formatters, relativeTime: (at, now = clock.now()) => formatters.relativeTime(at, now) }), [formatters, clock]);
+}

package/dist/i18n/rich.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+/** A message's params for `richText`: numeric params stay numbers, string params may be React nodes. */
+export type RichParams<P extends Record<string, string | number>> = {
+    readonly [K in keyof P]: P[K] extends number ? number : ReactNode;
+};
+/**
+ * Renders a string message with React nodes in its placeholders. Messages stay plain
+ * `(params) => string` functions (so Paraglide or any ICU catalog can supply them); element params
+ * go in as private-use tokens and are swapped back in after the message ran. String params pass
+ * straight through; numeric params (plural selectors such as `count`) stay numbers.
+ *
+ * `richText(strings.receipts.cacheSaved, { amount: <Money amount={0.42} />, share: "(61% of input)" })`
+ */
+export declare function richText<P extends Record<string, string | number>>(message: (params: P) => string, params: RichParams<P>): ReactNode;

package/dist/i18n/rich.js

@@ -0,0 +1,44 @@
+import { createElement, Fragment } from "react";
+// Private-use code points: never typed by a translator, and they survive any string interpolation.
+const OPEN = "\uE000";
+const CLOSE = "\uE001";
+const TOKEN = /\uE000([^\uE001]*)\uE001/;
+/**
+ * Renders a string message with React nodes in its placeholders. Messages stay plain
+ * `(params) => string` functions (so Paraglide or any ICU catalog can supply them); element params
+ * go in as private-use tokens and are swapped back in after the message ran. String params pass
+ * straight through; numeric params (plural selectors such as `count`) stay numbers.
+ *
+ * `richText(strings.receipts.cacheSaved, { amount: <Money amount={0.42} />, share: "(61% of input)" })`
+ */
+export function richText(message, params) {
+    const values = {};
+    const nodes = new Map();
+    for (const [key, value] of Object.entries(params)) {
+        if (typeof value === "string" || typeof value === "number") {
+            values[key] = value;
+        }
+        else {
+            values[key] = `${OPEN}${key}${CLOSE}`;
+            nodes.set(key, value);
+        }
+    }
+    // `values` matches `P` key for key (numbers where the message takes numbers, else strings); the
+    // method-shaped type lets the message take the untyped record without an assertion.
+    const run = message;
+    const text = run(values);
+    if (nodes.size === 0)
+        return text;
+    // Children passed as arguments (not an array) need no keys.
+    const parts = [];
+    let rest = text;
+    for (let match = TOKEN.exec(rest); match !== null; match = TOKEN.exec(rest)) {
+        if (match.index > 0)
+            parts.push(rest.slice(0, match.index));
+        parts.push(nodes.get(match[1] ?? ""));
+        rest = rest.slice(match.index + match[0].length);
+    }
+    if (rest !== "")
+        parts.push(rest);
+    return createElement(Fragment, null, ...parts);
+}

package/dist/i18n/ru-plural.d.ts

@@ -0,0 +1,3 @@
+/** "# файл / # файла / # файлов": `few` doubles as `other` (fractions). */
+export declare const ru: (count: number, one: string, few: string, many: string) => string;
+export declare const NBSP = "\u00A0";

package/dist/i18n/ru-plural.js

@@ -0,0 +1,4 @@
+import { plural } from "./plural.js";
+/** "# файл / # файла / # файлов": `few` doubles as `other` (fractions). */
+export const ru = (count, one, few, many) => plural("ru", count, { one, few, many, other: few });
+export const NBSP = "\u00A0";

package/dist/i18n/strings/alert-dialog.d.ts

@@ -0,0 +1,5 @@
+/** `alertDialog.*`: the default actions of `AlertDialog` (its `confirmLabel` / `cancelLabel` props win). */
+export declare const alertDialog: {
+    confirm: string;
+    cancel: string;
+};

package/dist/i18n/strings/alert-dialog.js

@@ -0,0 +1,5 @@
+/** `alertDialog.*`: the default actions of `AlertDialog` (its `confirmLabel` / `cancelLabel` props win). */
+export const alertDialog = {
+    confirm: "Confirm",
+    cancel: "Cancel",
+};

package/dist/i18n/strings/block-stack.d.ts

@@ -0,0 +1,17 @@
+/** `blockStack.*`: a panel's collapsible, reorderable blocks (`BlockStack`). */
+export declare const blockStack: {
+    /** The grip's name. */
+    reorder: (p: {
+        title: string;
+    }) => string;
+    /** What the grip is, said in place of "button" (`aria-roledescription`). */
+    grip: string;
+    /** How to move a block, read after the grip's name. */
+    reorderHint: string;
+    /** Said after a block moved. */
+    moved: (p: {
+        title: string;
+        position: number;
+        count: number;
+    }) => string;
+};

package/dist/i18n/strings/block-stack.js

@@ -0,0 +1,11 @@
+/** `blockStack.*`: a panel's collapsible, reorderable blocks (`BlockStack`). */
+export const blockStack = {
+    /** The grip's name. */
+    reorder: (p) => `Move ${p.title}`,
+    /** What the grip is, said in place of "button" (`aria-roledescription`). */
+    grip: "sortable",
+    /** How to move a block, read after the grip's name. */
+    reorderHint: "Drag, or use the up and down arrow keys.",
+    /** Said after a block moved. */
+    moved: (p) => `${p.title} moved to position ${p.position} of ${p.count}.`,
+};

package/dist/i18n/strings/code-block.d.ts

@@ -0,0 +1,18 @@
+/** `codeBlock.*`: <CodeBlock>'s copy control, the shared <CopyButton> and <CopyCommand>. */
+export declare const codeBlock: {
+    /** <CopyButton>'s default label; a `label` prop wins. */
+    copy: string;
+    /** Tooltip and label right after copying. */
+    copied: string;
+    /** What a screen reader hears once the text is copied. */
+    copiedAnnouncement: string;
+    /** <CopyCommand>'s name: what it copies, then the command it shows (a name holds its visible text). */
+    copyCommand: (p: {
+        command: string;
+    }) => string;
+    copyLabelledCommand: (p: {
+        label: string;
+        command: string;
+    }) => string;
+    copyCode: string;
+};

package/dist/i18n/strings/code-block.js

@@ -0,0 +1,13 @@
+/** `codeBlock.*`: <CodeBlock>'s copy control, the shared <CopyButton> and <CopyCommand>. */
+export const codeBlock = {
+    /** <CopyButton>'s default label; a `label` prop wins. */
+    copy: "Copy",
+    /** Tooltip and label right after copying. */
+    copied: "Copied",
+    /** What a screen reader hears once the text is copied. */
+    copiedAnnouncement: "Copied to clipboard",
+    /** <CopyCommand>'s name: what it copies, then the command it shows (a name holds its visible text). */
+    copyCommand: (p) => `Copy ${p.command}`,
+    copyLabelledCommand: (p) => `${p.label}: ${p.command}`,
+    copyCode: "Copy code",
+};

package/dist/i18n/strings/combobox.d.ts

@@ -0,0 +1,12 @@
+/** `combobox.*`: the field's buttons, chip removal and the empty list. */
+export declare const combobox: {
+    clearSelection: string;
+    showOptions: string;
+    /** A chip's remove button when its label isn't plain text. */
+    remove: string;
+    removeItem: (p: {
+        label: string;
+    }) => string;
+    /** `Combobox` `emptyMessage` default. */
+    noMatches: string;
+};

package/dist/i18n/strings/combobox.js

@@ -0,0 +1,10 @@
+/** `combobox.*`: the field's buttons, chip removal and the empty list. */
+export const combobox = {
+    clearSelection: "Clear selection",
+    showOptions: "Show options",
+    /** A chip's remove button when its label isn't plain text. */
+    remove: "Remove",
+    removeItem: (p) => `Remove ${p.label}`,
+    /** `Combobox` `emptyMessage` default. */
+    noMatches: "No matches",
+};

package/dist/i18n/strings/command-palette.d.ts

@@ -0,0 +1,17 @@
+/** `commandPalette.*`: the launcher's search, loading and empty states, and the footer hints. */
+export declare const commandPalette: {
+    placeholder: string;
+    /** Accessible name of the dialog and listbox. */
+    label: string;
+    loadingResults: string;
+    searching: string;
+    noResults: string;
+    nothingMatches: (p: {
+        query: string;
+    }) => string;
+    hints: {
+        navigate: string;
+        select: string;
+        close: string;
+    };
+};

package/dist/i18n/strings/command-palette.js

@@ -0,0 +1,11 @@
+/** `commandPalette.*`: the launcher's search, loading and empty states, and the footer hints. */
+export const commandPalette = {
+    placeholder: "Type a command or search…",
+    /** Accessible name of the dialog and listbox. */
+    label: "Command palette",
+    loadingResults: "Loading results",
+    searching: "Searching…",
+    noResults: "No results",
+    nothingMatches: (p) => `Nothing matches “${p.query}”. Try a different word.`,
+    hints: { navigate: "Navigate", select: "Select", close: "Close" },
+};

package/dist/i18n/strings/diff-view.d.ts

@@ -0,0 +1,92 @@
+type Hunk = {
+    index: number;
+};
+/** `diffView.*`: <DiffView>'s header, hunk toolbars and inline review comments. */
+export declare const diffView: {
+    /** Badge next to the path for whole-file changes. */
+    changeKinds: {
+        new: string;
+        deleted: string;
+        renamed: string;
+    };
+    /** <DiffStat>'s spoken summary (the visible "+12 −3" is aria-hidden). */
+    stats: (p: {
+        additions: number;
+        deletions: number;
+    }) => string;
+    expandFile: (p: {
+        path: string;
+    }) => string;
+    collapseFile: (p: {
+        path: string;
+    }) => string;
+    copyFile: string;
+    copyPatch: string;
+    /** The "show unchanged lines" toggle: its name, and its tooltip in each state. */
+    showUnchangedLines: string;
+    showAllLines: string;
+    collapseUnchangedLines: string;
+    /** The soft-wrap toggle: its name, and its tooltip in each state. */
+    softWrap: string;
+    wrapLines: string;
+    unwrapLines: string;
+    /** The layout toggle names the layout it switches to. */
+    splitView: string;
+    unifiedView: string;
+    switchToSplit: string;
+    switchToUnified: string;
+    /** The expand buttons between hunks, by the way they open. */
+    expandLines: {
+        up: string;
+        down: string;
+        both: string;
+    };
+    noChanges: string;
+    nothingToCompare: string;
+    hunk: {
+        /** The toolbar's accessible name. */
+        label: (p: Hunk & {
+            total: number;
+        }) => string;
+        /** Its compact visible position. */
+        position: (p: Hunk & {
+            total: number;
+        }) => string;
+        ask: string;
+        askLabel: (p: Hunk) => string;
+        comment: string;
+        commentLabel: (p: Hunk) => string;
+        revert: string;
+        revertLabel: (p: Hunk) => string;
+        accept: string;
+        acceptLabel: (p: Hunk) => string;
+        accepted: string;
+        reverted: string;
+    };
+    comment: {
+        /** Author shown when a comment has none (the local reviewer). */
+        you: string;
+        /** After the author: "You · line 12". */
+        line: (p: {
+            line: number;
+        }) => string;
+        remove: (p: {
+            line: number;
+        }) => string;
+        /** The inline composer's accessible name, per side of the diff. */
+        onOldLine: (p: {
+            line: number;
+        }) => string;
+        onNewLine: (p: {
+            line: number;
+        }) => string;
+        placeholder: string;
+        /** The key hint; `keys` renders as the ⌘↵ keycaps: "⌘↵ to add". */
+        toAdd: (p: {
+            keys: string;
+        }) => string;
+        cancel: string;
+        submit: string;
+    };
+};
+export {};

package/dist/i18n/strings/diff-view.js

@@ -0,0 +1,68 @@
+import { plural } from "../plural.js";
+/** `diffView.*`: <DiffView>'s header, hunk toolbars and inline review comments. */
+export const diffView = {
+    /** Badge next to the path for whole-file changes. */
+    changeKinds: {
+        new: "New",
+        deleted: "Deleted",
+        renamed: "Renamed",
+    },
+    /** <DiffStat>'s spoken summary (the visible "+12 −3" is aria-hidden). */
+    stats: (p) => `${plural("en", p.additions, { one: "# line added", other: "# lines added" })}, ${plural("en", p.deletions, { one: "# line removed", other: "# lines removed" })}`,
+    expandFile: (p) => `Expand ${p.path}`,
+    collapseFile: (p) => `Collapse ${p.path}`,
+    copyFile: "Copy file",
+    copyPatch: "Copy patch",
+    /** The "show unchanged lines" toggle: its name, and its tooltip in each state. */
+    showUnchangedLines: "Show unchanged lines",
+    showAllLines: "Show all lines",
+    collapseUnchangedLines: "Collapse unchanged lines",
+    /** The soft-wrap toggle: its name, and its tooltip in each state. */
+    softWrap: "Soft wrap",
+    wrapLines: "Wrap long lines",
+    unwrapLines: "Don't wrap lines",
+    /** The layout toggle names the layout it switches to. */
+    splitView: "Split view",
+    unifiedView: "Unified view",
+    switchToSplit: "Switch to split view",
+    switchToUnified: "Switch to unified view",
+    /** The expand buttons between hunks, by the way they open. */
+    expandLines: {
+        up: "Show the lines above",
+        down: "Show the lines below",
+        both: "Show the hidden lines",
+    },
+    noChanges: "No changes.",
+    nothingToCompare: "Nothing to compare.",
+    hunk: {
+        /** The toolbar's accessible name. */
+        label: (p) => `Hunk ${p.index} of ${p.total}`,
+        /** Its compact visible position. */
+        position: (p) => `Hunk ${p.index}/${p.total}`,
+        ask: "Ask",
+        askLabel: (p) => `Ask about hunk ${p.index}`,
+        comment: "Comment",
+        commentLabel: (p) => `Comment on hunk ${p.index}`,
+        revert: "Revert",
+        revertLabel: (p) => `Revert hunk ${p.index}`,
+        accept: "Accept",
+        acceptLabel: (p) => `Accept hunk ${p.index}`,
+        accepted: "Accepted",
+        reverted: "Reverted",
+    },
+    comment: {
+        /** Author shown when a comment has none (the local reviewer). */
+        you: "You",
+        /** After the author: "You · line 12". */
+        line: (p) => `line ${p.line}`,
+        remove: (p) => `Remove comment on line ${p.line}`,
+        /** The inline composer's accessible name, per side of the diff. */
+        onOldLine: (p) => `Comment on old line ${p.line}`,
+        onNewLine: (p) => `Comment on new line ${p.line}`,
+        placeholder: "Leave a comment…",
+        /** The key hint; `keys` renders as the ⌘↵ keycaps: "⌘↵ to add". */
+        toAdd: (p) => `${p.keys} to add`,
+        cancel: "Cancel",
+        submit: "Comment",
+    },
+};

package/dist/i18n/strings/image-viewer.d.ts

@@ -0,0 +1,43 @@
+/** `imageViewer.*`: images in the transcript (a thumbnail in place) and the viewer a click opens. */
+export declare const imageViewer: {
+    /** A thumbnail's button: opens the image full size; `alt` says what it shows. */
+    open: (p: {
+        alt: string;
+    }) => string;
+    /** What an image is called when nothing says what it shows. */
+    untitled: string;
+    /** Where the viewer is among the turn's images: "2 of 5". */
+    position: (p: {
+        index: number;
+        total: number;
+    }) => string;
+    previous: string;
+    next: string;
+    zoomIn: string;
+    zoomOut: string;
+    /** The zoom button while the image is at another size: back to the whole image in the window. */
+    fit: string;
+    /** The zoom button while the image fits the window: one image pixel to one screen pixel. */
+    actualSize: string;
+    copy: string;
+    copied: string;
+    copyFailed: string;
+    save: string;
+    /** Placeholder while the image is on its way. */
+    loading: string;
+    /** The image couldn't be loaded (missing, unreadable, refused). */
+    failed: string;
+    /** The image is over what the transcript shows; `size` is its size ("12 MB"), when known. */
+    tooLarge: (p: {
+        size?: string | undefined;
+    }) => string;
+    /** A remote image in a message: `host` is where it lives; it opens in the browser, never loads here. */
+    remote: (p: {
+        host: string;
+    }) => string;
+    /** After a remote image's alt (which may be cut short): where it lives, always shown in full. */
+    remoteHost: (p: {
+        host: string;
+    }) => string;
+    openInBrowser: string;
+};

package/dist/i18n/strings/image-viewer.js

@@ -0,0 +1,32 @@
+/** `imageViewer.*`: images in the transcript (a thumbnail in place) and the viewer a click opens. */
+export const imageViewer = {
+    /** A thumbnail's button: opens the image full size; `alt` says what it shows. */
+    open: (p) => `Open image: ${p.alt}`,
+    /** What an image is called when nothing says what it shows. */
+    untitled: "Image",
+    /** Where the viewer is among the turn's images: "2 of 5". */
+    position: (p) => `${p.index} of ${p.total}`,
+    previous: "Previous image",
+    next: "Next image",
+    zoomIn: "Zoom in",
+    zoomOut: "Zoom out",
+    /** The zoom button while the image is at another size: back to the whole image in the window. */
+    fit: "Fit to window",
+    /** The zoom button while the image fits the window: one image pixel to one screen pixel. */
+    actualSize: "Actual size",
+    copy: "Copy image",
+    copied: "Image copied",
+    copyFailed: "Couldn't copy the image",
+    save: "Save image",
+    /** Placeholder while the image is on its way. */
+    loading: "Loading image",
+    /** The image couldn't be loaded (missing, unreadable, refused). */
+    failed: "Couldn't load the image",
+    /** The image is over what the transcript shows; `size` is its size ("12 MB"), when known. */
+    tooLarge: (p) => p.size === undefined ? "Too large to show here" : `Too large to show here (${p.size})`,
+    /** A remote image in a message: `host` is where it lives; it opens in the browser, never loads here. */
+    remote: (p) => `Image on ${p.host}`,
+    /** After a remote image's alt (which may be cut short): where it lives, always shown in full. */
+    remoteHost: (p) => `— image on ${p.host}`,
+    openInBrowser: "Open in browser",
+};