pixelize-design-library 3.0.0 → 3.1.0

package/dist/Components/NotificationCenter/core/NotificationSourceProps.d.ts

@@ -0,0 +1,284 @@
+import type { ElementType, KeyboardEvent, MouseEvent, ReactNode } from "react";
+import type { Tone } from "../../../Theme/tokens/builders/tone";
+/** A run of title text: a plain string, or `{ b }` for a bold run. Always rendered as text, never as markup. */
+export type NotificationTitlePart = string | {
+    b: string;
+};
+/** The person behind an entry; shown as an avatar with the category glyph on its corner. */
+export interface NotificationActor {
+    /** Initials, the avatar colour and the alt text come from this. */
+    name: string;
+    /** Avatar image; initials show until it loads, or when it fails. */
+    avatarUrl?: string;
+}
+/** How a decision button reads: positive gets a check, negative asks in red, primary is the solid button in the detail. */
+export type NotificationActionIntent = "positive" | "negative" | "primary" | "neutral";
+/** One button on an entry: a decision sent through `onAction`, or a link (with `href`) opened through `onOpen`. */
+export interface NotificationAction {
+    /** Stable id passed to `onAction`; a bulk decision needs every selected entry to carry it. */
+    id: string;
+    /** Button text, e.g. "Approve"; the accessible name adds the entry's subject. */
+    label: string;
+    /** Past tense for the status line and the toast, e.g. "Approved". Defaults to `label`. */
+    doneLabel?: string;
+    /** Defaults to "neutral". */
+    intent?: NotificationActionIntent;
+    /** "required" asks inline and blocks an empty send; "optional" asks but allows one. Omit to decide in one click. */
+    reason?: "required" | "optional";
+    /** Label over the inline reason box; defaults to `labels.reasonLabel`. */
+    reasonLabel?: string;
+    /** Makes this a link: the row calls `onOpen` with this href instead of deciding. */
+    href?: string;
+}
+/** One notification as the app passes it in; each app writes one adapter from its rows to this shape. */
+export interface NotificationEntry {
+    /** Unique across everything the app passes; duplicates are dropped, first one wins. */
+    id: string;
+    /** Key into `categories`; an unknown key renders as a neutral Activity entry. */
+    category: string;
+    /** Bold parts as `{ b }`, so apps can translate templates without markup. */
+    title: NotificationTitlePart[];
+    /** Short name for button labels and toasts, e.g. "Priya's leave". */
+    subject: string;
+    /** Epoch ms. */
+    createdAt: number;
+    /** Leave out when the entry has no read state (most decisions). */
+    isRead?: boolean;
+    /** Shows an avatar with the category glyph; without it the row shows the category tile. */
+    actor?: NotificationActor;
+    /** A short code before the title, e.g. "PT-231". */
+    eyebrow?: string;
+    /** One muted line under the title. */
+    context?: string;
+    /** A quoted excerpt, clamped to two lines in rows. */
+    preview?: string;
+    /** Full text for the detail view; falls back to `preview`. */
+    body?: string;
+    /** Label/value facts for the detail view. */
+    fields?: Array<[label: string, value: string]>;
+    /** A from-to change, shown as two chips. */
+    change?: {
+        from: string;
+        to: string;
+    };
+    /** The app route; the row renders a real link, so a modifier-click opens a new tab. */
+    href?: string;
+    /** Entries sharing a key collapse into one thread in Activity. */
+    groupKey?: string;
+    /** Decisions and links shown on the row; decisions also need `onAction`. */
+    actions?: NotificationAction[];
+    /** Why it can't be opened any more; the detail shows this instead of the facts. */
+    blocked?: string;
+    /** True for entries in the Archived list; only meaningful with `onArchive`. */
+    archived?: boolean;
+    /** Test id root: the row gets it, its controls get `${testId}-link`, `-read`, `-archive`, `-restore`, `-more`, `-<action id>`. */
+    testId?: string;
+}
+/** Where a category's entries land: "always" in Needs you (decisions), "untilRead" while unread (mentions, assignments). */
+export type NotificationNeedsYouRule = "always" | "untilRead";
+/** How one category looks and which list its entries land in. */
+export interface NotificationCategory {
+    /** Group heading in Needs you, the type filter and the detail kicker. */
+    label: string;
+    /** A lucide-react icon component; pass the component, not an element. */
+    icon: ElementType;
+    /** Tints the icon tile; defaults to "neutral". */
+    tone?: Tone;
+    /** Omit to land in Activity. */
+    needsYou?: NotificationNeedsYouRule;
+}
+/** The app's category map; its key order is the group order in Needs you. */
+export type NotificationCategories = Record<string, NotificationCategory>;
+/** Server counts, never computed from loaded rows; the library moves them optimistically and never below 0. */
+export interface NotificationCounts {
+    /** Open decisions plus unread `untilRead` entries; the bell number. */
+    needsYou: number;
+    /** Unread entries in Activity; the bell dot and the Activity tab count. */
+    unread: number;
+}
+/** Why a decision did not go through: conflict = already decided, forbidden = no longer the approver, reasonRequired = the server wants a comment. */
+export type NotificationActionErrorKind = "conflict" | "forbidden" | "reasonRequired" | "failed";
+/** What `onAction` rejects with; build it with `notificationActionError`. An HTTP 409 maps to conflict and 403 to forbidden. */
+export interface NotificationActionError {
+    /** Picks the row state: denied for conflict and forbidden, the reason form for reasonRequired, retry for failed. */
+    kind: NotificationActionErrorKind;
+    /** Shown in the row and the toast; defaults per kind from `labels`. */
+    message?: string;
+}
+/** The lists the panel and the inbox show. */
+export type NotificationZoneKey = "needsYou" | "activity" | "archived";
+/** What "Mark all read" covers: one list plus the inbox filters. No category and no query means the whole list, loaded or not. */
+export interface NotificationMarkAllScope {
+    /** The list the button sits in. */
+    zone: Exclude<NotificationZoneKey, "archived">;
+    /** The inbox type filter, a key of `categories`. */
+    category?: string;
+    /** The inbox search text. */
+    query?: string;
+}
+/** An app-specific row action, e.g. tickets' "Stop watching PT-108"; shown on hover and in the phone menu. */
+export interface NotificationExtraAction {
+    /** Unique within the entry; also the test id suffix. */
+    id: string;
+    /** Accessible name and tooltip. */
+    label: string;
+    /** A lucide-react icon component. */
+    icon: ElementType;
+    /** Shown as a success toast once `onSelect` resolves. */
+    doneLabel?: string;
+    /** Runs the action; a rejected promise shows "Couldn't …" in a toast. */
+    onSelect: (entry: NotificationEntry) => void | Promise<unknown>;
+}
+/** The list's load state; "noAccess" means the person's role can't see notifications at all. */
+export type NotificationLoadStatus = "loading" | "ready" | "error" | "noAccess";
+/** Every string the shared parts render; English defaults in `DEFAULT_NOTIFICATION_LABELS`. Lane components add their own. */
+export interface NotificationLabels {
+    /** Screen-reader prefix of an unread row, and the detail's Unread chip. */
+    unread: string;
+    /** A decision button's accessible name, e.g. "Approve: Priya's leave". */
+    actionName: (actionLabel: string, subject: string) => string;
+    markRead: string;
+    markUnread: string;
+    archive: string;
+    restore: string;
+    /** The phone row's menu button. */
+    moreActions: (title: string) => string;
+    /** The inbox row checkbox. */
+    select: (title: string) => string;
+    /** `count` is how many older rows sit behind the thread's newest. */
+    threadShow: (count: number) => string;
+    threadHide: (count: number) => string;
+    /** Chip on a decision waiting 3 days or more. */
+    waiting: (days: number) => string;
+    /** Chip on a row whose entry is `blocked`. */
+    noAccess: string;
+    /** Spoken between the two change chips. */
+    changedTo: string;
+    /** Beside the disabled buttons while offline. */
+    offlineNote: string;
+    reasonLabel: string;
+    reasonOptional: string;
+    /** Placeholder of the reason box on a negative action. */
+    reasonPlaceholder: string;
+    /** A required reason left empty on a negative action. */
+    reasonMissingNegative: string;
+    /** A required reason left empty on any other action. */
+    reasonMissing: string;
+    keyCtrl: string;
+    keyEnter: string;
+    keyEsc: string;
+    toSend: string;
+    toCancel: string;
+    cancel: string;
+    undo: string;
+    /** Status line while a decision is on its way. */
+    sending: string;
+    /** Status line lead-in when a decision failed, e.g. "Couldn't approve." */
+    couldNot: (actionLabel: string) => string;
+    retry: string;
+    dismiss: string;
+    conflictMessage: string;
+    forbiddenMessage: string;
+    failedMessage: string;
+    reasonRequiredMessage: string;
+    offlineMessage: string;
+    /** Toast title of a decision, e.g. "Approved · Priya's leave". */
+    decided: (doneLabel: string, subject: string) => string;
+    /** Spoken when a decision is made, with the undo hint. */
+    decidedAnnouncement: (doneLabel: string, subject: string) => string;
+    /** The subject of a bulk decision, e.g. "3 requests". */
+    requests: (count: number) => string;
+    /** Toast description when a reason was given. */
+    reasonQuote: (reason: string) => string;
+    /** Toast title when decisions failed; `count` is above 1 for a bulk decision. */
+    decisionFailed: (actionLabel: string, count: number) => string;
+    /** Toast title when someone else decided first. */
+    conflicted: (count: number) => string;
+    /** Toast title when the person may no longer decide. */
+    forbidden: (count: number) => string;
+    /** Toast title when the server asked for a comment. */
+    reasonNeeded: (actionLabel: string) => string;
+    archived: (count: number) => string;
+    restored: string;
+    markedRead: (count: number) => string;
+    markAllFailed: string;
+    readFailed: (read: boolean) => string;
+    archiveFailed: string;
+    restoreFailed: string;
+    /** Toast title when an extra action rejects. */
+    extraFailed: (actionLabel: string) => string;
+    undone: string;
+    decisionUndone: string;
+    arrivedOne: (title: string) => string;
+    arrivedMany: (count: number) => string;
+    /** The detail's footer button; `appName` comes from the source. */
+    openIn: (appName?: string) => string;
+    blockedTitle: string;
+    back: string;
+    /** Category label of an entry whose key is not in `categories`. */
+    otherCategory: string;
+    now: string;
+    justNow: string;
+    todayAt: (time: string) => string;
+    yesterdayAt: (time: string) => string;
+    today: string;
+    yesterday: string;
+    thisWeek: string;
+    older: string;
+}
+/** Second argument of `onOpen`: the click or key press that opened the entry. */
+export type NotificationOpenEvent = MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>;
+/** The data and callbacks every notification component on a page shares; a feature appears only when its callback is passed. */
+export interface NotificationSourceProps {
+    /** All loaded entries, any order; the app's cache stays the source of truth. */
+    entries: NotificationEntry[];
+    /** From the server, never counted from `entries`. */
+    counts: NotificationCounts;
+    /** Label, icon, tone and list rule per category key; keep it stable, a new object re-derives every row. */
+    categories: NotificationCategories;
+    /** Row click and "Open in …"; the app navigates. An unread entry is marked read first. For a link action, `entry.href` is the action's. */
+    onOpen: (entry: NotificationEntry, event?: NotificationOpenEvent, action?: NotificationAction) => void;
+    /** Sends a decision once its 6 s undo window ends. Reject with a `NotificationActionError` or an HTTP error. Omit for no inline decisions. */
+    onAction?: (entry: NotificationEntry, action: NotificationAction, reason?: string) => Promise<unknown>;
+    /** Read and unread, one or many, sent at once. Omit for no read toggles. */
+    onMarkRead?: (ids: string[], read: boolean) => Promise<unknown>;
+    /** Everything in the scope, loaded or not; sent after the undo window. Omit to hide "Mark all read". */
+    onMarkAllRead?: (scope: NotificationMarkAllScope) => Promise<unknown>;
+    /** Sent after the undo window; Needs-you entries can't be archived. Omit for no archive and no Archived tab. */
+    onArchive?: (ids: string[]) => Promise<unknown>;
+    /** Moves archived entries back to Activity, sent at once. Omit to hide "Move back". */
+    onRestore?: (ids: string[]) => Promise<unknown>;
+    /** Next page by cursor. Omit and the list ends at what is loaded. */
+    onLoadMore?: () => void;
+    /** Shows the load-more control. */
+    hasMore?: boolean;
+    /** Puts the load-more control in its busy state. */
+    isLoadingMore?: boolean;
+    /** App-specific row actions for one entry. */
+    extraActions?: (entry: NotificationEntry) => NotificationExtraAction[];
+    /** Defaults to "ready". Pass "loading" until the first fetch resolves, so it is not announced as new arrivals. */
+    status?: NotificationLoadStatus;
+    /** Retries a failed load from the error state. */
+    onRetry?: () => void;
+    /** Disables every change and shows the offline banner. */
+    isOffline?: boolean;
+    /** When the loaded entries were fetched, epoch ms; the offline banner names it. */
+    loadedAt?: number;
+    /** As in "Open in hrms". */
+    appName?: string;
+    /** Overrides for the shared strings, anything left out stays English; keep it stable across renders. */
+    labels?: Partial<NotificationLabels>;
+    /** BCP 47 tag for dates, relative times and numbers. Defaults to "en-IN". */
+    locale?: string;
+}
+/** Shares one overlay (undo windows, sends, optimistic counts, the announcer) across every notification component below it. Needs a `ToasterProvider` above. */
+export interface NotificationCenterProviderProps extends NotificationSourceProps {
+    /** The bell, panel, inbox or custom layout that reads `useNotificationCenter()`. */
+    children: ReactNode;
+}
+/** No source props at all: the component reads the nearest `NotificationCenterProvider`. `labels` stays free for the component's own strings. */
+export type NotificationSourceOmitted = {
+    [K in Exclude<keyof NotificationSourceProps, "labels">]?: undefined;
+};
+/** Pass every source prop when there is no provider above, or none inside one; a mix is a type error. */
+export type NotificationSourceBinding = NotificationSourceProps | NotificationSourceOmitted;

package/dist/Components/NotificationCenter/core/NotificationSourceProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/NotificationCenter/core/actionError.d.ts

@@ -0,0 +1,4 @@
+import type { NotificationActionError, NotificationActionErrorKind } from "./NotificationSourceProps";
+export declare const isNotificationActionError: (value: unknown) => value is NotificationActionError;
+export declare const notificationActionError: (kind: NotificationActionErrorKind, message?: string) => Error & NotificationActionError;
+export declare const toNotificationActionError: (error: unknown) => NotificationActionError;

package/dist/Components/NotificationCenter/core/actionError.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toNotificationActionError = exports.notificationActionError = exports.isNotificationActionError = void 0;
+const apiError_1 = require("../../../Utils/apiError");
+const KINDS = ["conflict", "forbidden", "reasonRequired", "failed"];
+const asRecord = (value) => typeof value === "object" && value !== null ? value : {};
+const text = (value) => typeof value === "string" && value.trim() ? value : undefined;
+const isNotificationActionError = (value) => KINDS.includes(asRecord(value).kind);
+exports.isNotificationActionError = isNotificationActionError;
+const notificationActionError = (kind, message) => {
+    const error = new Error(message !== null && message !== void 0 ? message : "");
+    error.name = "NotificationActionError";
+    error.kind = kind;
+    return error;
+};
+exports.notificationActionError = notificationActionError;
+const statusOf = (error) => {
+    const direct = (0, apiError_1.getApiErrorStatus)(error);
+    if (direct !== null)
+        return direct;
+    const status = asRecord(asRecord(error).response).status;
+    return typeof status === "number" ? status : null;
+};
+const serverMessage = (error) => {
+    var _a;
+    const record = asRecord(error);
+    return (_a = text(asRecord(record.data).message)) !== null && _a !== void 0 ? _a : text(asRecord(asRecord(record.response).data).message);
+};
+const kindFor = (status) => {
+    if (status === 409)
+        return "conflict";
+    if (status === 403)
+        return "forbidden";
+    return "failed";
+};
+const toNotificationActionError = (error) => {
+    if ((0, exports.isNotificationActionError)(error)) {
+        const message = text(error.message);
+        return message ? { kind: error.kind, message } : { kind: error.kind };
+    }
+    const message = serverMessage(error);
+    const kind = kindFor(statusOf(error));
+    return message ? { kind, message } : { kind };
+};
+exports.toNotificationActionError = toNotificationActionError;

package/dist/Components/NotificationCenter/core/format.d.ts

@@ -0,0 +1,4 @@
+import type { NotificationLabels } from "./NotificationSourceProps";
+import type { NotificationFormatter } from "./NotificationEngineProps";
+export declare const DAY_MS: number;
+export declare const createNotificationFormatter: (locale: string, labels: NotificationLabels) => NotificationFormatter;

package/dist/Components/NotificationCenter/core/format.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNotificationFormatter = exports.DAY_MS = void 0;
+const MINUTE_MS = 60000;
+const HOUR_MS = 60 * MINUTE_MS;
+exports.DAY_MS = 24 * HOUR_MS;
+const WEEK_DAYS = 7;
+const startOfDay = (at) => {
+    const date = new Date(at);
+    date.setHours(0, 0, 0, 0);
+    return date.getTime();
+};
+const daysBefore = (dayStart, days) => {
+    const date = new Date(dayStart);
+    date.setDate(date.getDate() - days);
+    return date.getTime();
+};
+const sameYear = (a, b) => new Date(a).getFullYear() === new Date(b).getFullYear();
+const createNotificationFormatter = (locale, labels) => {
+    const time = new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit" });
+    const shortDate = new Intl.DateTimeFormat(locale, { day: "numeric", month: "short" });
+    const shortDateWithYear = new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", year: "numeric" });
+    const full = new Intl.DateTimeFormat(locale, {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+        hour: "numeric",
+        minute: "2-digit",
+    });
+    const relative = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+    const narrow = (unit) => new Intl.NumberFormat(locale, { style: "unit", unit, unitDisplay: "narrow" });
+    const minutes = narrow("minute");
+    const hours = narrow("hour");
+    const days = narrow("day");
+    const digits = new Intl.NumberFormat(locale);
+    const elapsed = (at, now) => Math.max(0, now - at);
+    const dayBucket = (at, now) => {
+        const today = startOfDay(now);
+        if (at >= today)
+            return "today";
+        if (at >= daysBefore(today, 1))
+            return "yesterday";
+        if (at >= daysBefore(today, WEEK_DAYS - 1))
+            return "thisWeek";
+        return "older";
+    };
+    const dayLabels = {
+        today: labels.today,
+        yesterday: labels.yesterday,
+        thisWeek: labels.thisWeek,
+        older: labels.older,
+    };
+    return {
+        shortAge: (at, now) => {
+            const gap = elapsed(at, now);
+            if (gap < MINUTE_MS)
+                return labels.now;
+            if (gap < HOUR_MS)
+                return minutes.format(Math.floor(gap / MINUTE_MS));
+            if (gap < exports.DAY_MS)
+                return hours.format(Math.floor(gap / HOUR_MS));
+            if (gap < WEEK_DAYS * exports.DAY_MS)
+                return days.format(Math.floor(gap / exports.DAY_MS));
+            return (sameYear(at, now) ? shortDate : shortDateWithYear).format(at);
+        },
+        longAge: (at, now) => {
+            const gap = elapsed(at, now);
+            if (gap < MINUTE_MS)
+                return labels.justNow;
+            if (gap < HOUR_MS)
+                return relative.format(-Math.floor(gap / MINUTE_MS), "minute");
+            if (gap < exports.DAY_MS)
+                return relative.format(-Math.floor(gap / HOUR_MS), "hour");
+            return full.format(at);
+        },
+        absolute: (at, now) => {
+            const bucket = dayBucket(at, now);
+            if (bucket === "today")
+                return labels.todayAt(time.format(at));
+            if (bucket === "yesterday")
+                return labels.yesterdayAt(time.format(at));
+            return full.format(at);
+        },
+        dayBucket,
+        dayLabel: (bucket) => dayLabels[bucket],
+        daysSince: (at, now) => Math.floor(elapsed(at, now) / exports.DAY_MS),
+        number: (value) => digits.format(value),
+        iso: (at) => new Date(at).toISOString(),
+    };
+};
+exports.createNotificationFormatter = createNotificationFormatter;

package/dist/Components/NotificationCenter/core/grouping.d.ts

@@ -0,0 +1,14 @@
+import type { NotificationCategories, NotificationCategory, NotificationEntry, NotificationTitlePart, NotificationZoneKey } from "./NotificationSourceProps";
+import type { LiveNotificationEntry, NotificationFormatter, NotificationGroup, NotificationThread } from "./NotificationEngineProps";
+export declare const OTHER_CATEGORY_KEY = "__other";
+export declare const plainTitle: (parts: NotificationTitlePart[]) => string;
+export declare const findCategory: (categories: NotificationCategories, key: string) => NotificationCategory | undefined;
+export declare const zoneFor: (entry: Pick<NotificationEntry, "category" | "isRead" | "archived">, categories: NotificationCategories) => NotificationZoneKey;
+export declare const byNewest: (a: LiveNotificationEntry, b: LiveNotificationEntry) => number;
+export declare const matchesNotificationQuery: (entry: NotificationEntry, query: string) => boolean;
+export declare const threadify: (items: LiveNotificationEntry[]) => NotificationThread[];
+export declare const threadEntries: (thread: NotificationThread) => LiveNotificationEntry[];
+export declare const threadIds: (thread: NotificationThread) => string[];
+export declare const threadHasUnread: (thread: NotificationThread) => boolean;
+export declare const groupByCategory: (items: LiveNotificationEntry[], categories: NotificationCategories, otherLabel: string) => NotificationGroup[];
+export declare const groupByDay: (items: LiveNotificationEntry[], format: NotificationFormatter, now: number) => NotificationGroup[];

package/dist/Components/NotificationCenter/core/grouping.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.groupByDay = exports.groupByCategory = exports.threadHasUnread = exports.threadIds = exports.threadEntries = exports.threadify = exports.matchesNotificationQuery = exports.byNewest = exports.zoneFor = exports.findCategory = exports.plainTitle = exports.OTHER_CATEGORY_KEY = void 0;
+exports.OTHER_CATEGORY_KEY = "__other";
+const plainTitle = (parts) => parts.map((part) => (typeof part === "string" ? part : part.b)).join("");
+exports.plainTitle = plainTitle;
+const findCategory = (categories, key) => Object.prototype.hasOwnProperty.call(categories, key) ? categories[key] : undefined;
+exports.findCategory = findCategory;
+const zoneFor = (entry, categories) => {
+    var _a;
+    if (entry.archived)
+        return "archived";
+    const rule = (_a = (0, exports.findCategory)(categories, entry.category)) === null || _a === void 0 ? void 0 : _a.needsYou;
+    if (rule === "always")
+        return "needsYou";
+    if (rule === "untilRead" && entry.isRead === false)
+        return "needsYou";
+    return "activity";
+};
+exports.zoneFor = zoneFor;
+const byNewest = (a, b) => b.entry.createdAt - a.entry.createdAt;
+exports.byNewest = byNewest;
+const matchesNotificationQuery = (entry, query) => {
+    const words = query.toLowerCase().split(/\s+/).filter(Boolean);
+    if (!words.length)
+        return true;
+    const haystack = [(0, exports.plainTitle)(entry.title), entry.context, entry.preview, entry.eyebrow, entry.subject, entry.body]
+        .filter((part) => Boolean(part))
+        .join(" ")
+        .toLowerCase();
+    return words.every((word) => haystack.includes(word));
+};
+exports.matchesNotificationQuery = matchesNotificationQuery;
+const threadify = (items) => {
+    const threads = [];
+    const byKey = new Map();
+    items.forEach((item) => {
+        const key = item.entry.groupKey;
+        const existing = key === undefined ? undefined : byKey.get(key);
+        if (existing) {
+            existing.rest.push(item);
+            return;
+        }
+        const thread = { key: item.entry.id, lead: item, rest: [] };
+        threads.push(thread);
+        if (key !== undefined)
+            byKey.set(key, thread);
+    });
+    return threads;
+};
+exports.threadify = threadify;
+const threadEntries = (thread) => [thread.lead, ...thread.rest];
+exports.threadEntries = threadEntries;
+const threadIds = (thread) => (0, exports.threadEntries)(thread).map((item) => item.entry.id);
+exports.threadIds = threadIds;
+const threadHasUnread = (thread) => (0, exports.threadEntries)(thread).some((item) => item.entry.isRead === false);
+exports.threadHasUnread = threadHasUnread;
+const isShown = (item) => !item.state.isHidden;
+const single = (item) => ({ key: item.entry.id, lead: item, rest: [] });
+const groupByCategory = (items, categories, otherLabel) => {
+    const byCategory = new Map();
+    items.forEach((item) => {
+        const key = (0, exports.findCategory)(categories, item.entry.category) ? item.entry.category : exports.OTHER_CATEGORY_KEY;
+        const list = byCategory.get(key);
+        if (list)
+            list.push(item);
+        else
+            byCategory.set(key, [item]);
+    });
+    const order = [...Object.keys(categories), exports.OTHER_CATEGORY_KEY].filter((key) => byCategory.has(key));
+    const groups = order.flatMap((key) => {
+        const list = byCategory.get(key);
+        if (!list || !list.some(isShown))
+            return [];
+        const category = (0, exports.findCategory)(categories, key);
+        return [
+            {
+                key,
+                label: category ? category.label : otherLabel,
+                count: list.filter((item) => item.state.isPending).length,
+                threads: list.map(single),
+            },
+        ];
+    });
+    return groups.length === 1 ? [{ ...groups[0], label: null }] : groups;
+};
+exports.groupByCategory = groupByCategory;
+const groupByDay = (items, format, now) => {
+    const buckets = new Map();
+    items.forEach((item) => {
+        const bucket = format.dayBucket(item.entry.createdAt, now);
+        const list = buckets.get(bucket);
+        if (list)
+            list.push(item);
+        else
+            buckets.set(bucket, [item]);
+    });
+    return [...buckets]
+        .filter(([, list]) => list.some(isShown))
+        .map(([bucket, list]) => ({ key: bucket, label: format.dayLabel(bucket), count: 0, threads: (0, exports.threadify)(list) }));
+};
+exports.groupByDay = groupByDay;

package/dist/Components/NotificationCenter/core/labels.d.ts

@@ -0,0 +1,6 @@
+import type { NotificationLabels } from "./NotificationSourceProps";
+export declare const DEFAULT_NOTIFICATION_LOCALE = "en-IN";
+export declare const defaultNotificationLabels: (locale?: string) => NotificationLabels;
+export declare const DEFAULT_NOTIFICATION_LABELS: NotificationLabels;
+export declare const mergeDefined: <T extends object>(base: T, overrides?: Partial<T>) => T;
+export declare const resolveNotificationLabels: (locale?: string, overrides?: Partial<NotificationLabels>) => NotificationLabels;

package/dist/Components/NotificationCenter/core/labels.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveNotificationLabels = exports.mergeDefined = exports.DEFAULT_NOTIFICATION_LABELS = exports.defaultNotificationLabels = exports.DEFAULT_NOTIFICATION_LOCALE = void 0;
+exports.DEFAULT_NOTIFICATION_LOCALE = "en-IN";
+const defaultNotificationLabels = (locale = exports.DEFAULT_NOTIFICATION_LOCALE) => {
+    const english = new Intl.PluralRules("en");
+    const digits = new Intl.NumberFormat(locale);
+    const n = (count) => digits.format(count);
+    const many = (count, one, other) => (english.select(count) === "one" ? one : other);
+    const verb = (label) => label.toLowerCase();
+    return {
+        unread: "Unread",
+        actionName: (actionLabel, subject) => `${actionLabel}: ${subject}`,
+        markRead: "Mark as read",
+        markUnread: "Mark as unread",
+        archive: "Archive",
+        restore: "Move back to Activity",
+        moreActions: (title) => `More actions: ${title}`,
+        select: (title) => `Select: ${title}`,
+        threadShow: (count) => `Show ${n(count)} more from this thread`,
+        threadHide: (count) => `Hide ${n(count)} more from this thread`,
+        waiting: (days) => `Waiting ${n(days)} ${many(days, "day", "days")}`,
+        noAccess: "No access",
+        changedTo: "changed to",
+        offlineNote: "Reconnect to respond",
+        reasonLabel: "Add a note",
+        reasonOptional: "(optional)",
+        reasonPlaceholder: "The requester sees this",
+        reasonMissingNegative: "Add a reason so they know what to change.",
+        reasonMissing: "This needs a comment before it can be sent.",
+        keyCtrl: "Ctrl",
+        keyEnter: "Enter",
+        keyEsc: "Esc",
+        toSend: "to send",
+        toCancel: "to cancel",
+        cancel: "Cancel",
+        undo: "Undo",
+        sending: "Saving…",
+        couldNot: (actionLabel) => `Couldn't ${verb(actionLabel)}.`,
+        retry: "Try again",
+        dismiss: "Dismiss",
+        conflictMessage: "Someone already decided this.",
+        forbiddenMessage: "You can't decide this anymore.",
+        failedMessage: "The server didn't respond. Nothing was changed.",
+        reasonRequiredMessage: "This needs a comment before it can be sent.",
+        offlineMessage: "You're offline. Reconnect, then try again.",
+        decided: (doneLabel, subject) => `${doneLabel} · ${subject}`,
+        decidedAnnouncement: (doneLabel, subject) => `${doneLabel}: ${subject}. Undo available for 6 seconds.`,
+        requests: (count) => `${n(count)} ${many(count, "request", "requests")}`,
+        reasonQuote: (reason) => `Reason: ${reason}`,
+        decisionFailed: (actionLabel, count) => count > 1 ? `Couldn't ${verb(actionLabel)} ${n(count)} requests` : `Couldn't ${verb(actionLabel)}`,
+        conflicted: (count) => (count > 1 ? `Someone already decided ${n(count)} of these` : "Someone already decided this"),
+        forbidden: (count) => (count > 1 ? `You can't decide ${n(count)} of these anymore` : "You can't decide this anymore"),
+        reasonNeeded: (actionLabel) => `${actionLabel} needs a comment`,
+        archived: (count) => (count > 1 ? `${n(count)} notifications archived` : "Archived"),
+        restored: "Moved back to Activity",
+        markedRead: (count) => `Marked ${n(count)} as read`,
+        markAllFailed: "Couldn't mark them as read",
+        readFailed: (read) => (read ? "Couldn't mark as read" : "Couldn't mark as unread"),
+        archiveFailed: "Couldn't archive",
+        restoreFailed: "Couldn't move it back",
+        extraFailed: (actionLabel) => `Couldn't ${verb(actionLabel)}`,
+        undone: "Undone",
+        decisionUndone: "Undone. The request is back in Needs you.",
+        arrivedOne: (title) => `New notification: ${title}`,
+        arrivedMany: (count) => `${n(count)} new notifications`,
+        openIn: (appName) => (appName ? `Open in ${appName}` : "Open"),
+        blockedTitle: "You can't open this anymore",
+        back: "Back",
+        otherCategory: "Other",
+        now: "now",
+        justNow: "just now",
+        todayAt: (time) => `Today, ${time}`,
+        yesterdayAt: (time) => `Yesterday, ${time}`,
+        today: "Today",
+        yesterday: "Yesterday",
+        thisWeek: "This week",
+        older: "Older",
+    };
+};
+exports.defaultNotificationLabels = defaultNotificationLabels;
+exports.DEFAULT_NOTIFICATION_LABELS = (0, exports.defaultNotificationLabels)();
+const mergeDefined = (base, overrides = {}) => {
+    const merged = { ...base };
+    Object.keys(overrides).forEach((key) => {
+        const value = overrides[key];
+        if (value !== undefined)
+            merged[key] = value;
+    });
+    return merged;
+};
+exports.mergeDefined = mergeDefined;
+const resolveNotificationLabels = (locale = exports.DEFAULT_NOTIFICATION_LOCALE, overrides = {}) => (0, exports.mergeDefined)((0, exports.defaultNotificationLabels)(locale), overrides);
+exports.resolveNotificationLabels = resolveNotificationLabels;