@navette-js/panels 0.0.0-stage → 1.0.0-beta.2

package/lib/notifications.d.ts

@@ -0,0 +1,76 @@
+import { Component } from '@navette-js/wire';
+export type NotificationActionData = {
+    label: string;
+    url: string | null;
+    openUrlInNewTab: boolean;
+};
+export type NotificationData = {
+    id: string;
+    title: string | null;
+    body: string | null;
+    status: string | null;
+    duration: number | 'persistent';
+    icon: string | null;
+    iconColor: string | null;
+    actions?: NotificationActionData[];
+};
+/** The part of a notification store needed to write to it (see `DatabaseNotificationStore`). */
+type NotificationSink = {
+    send(user: string | number, notification: NotificationData): Promise<void>;
+};
+/** Runs `fn` in a request context, where `Notification.send()` queues its notifications. */
+export declare function runInRequest<T>(mailbox: string, fn: () => Promise<T>): Promise<{
+    result: T;
+    pending: NotificationData[];
+}>;
+export declare function publish(mailbox: string, notifications: NotificationData[]): string;
+/** Removes and returns the notifications of the given batches (all of them if `batches` is null). */
+export declare function pull(mailbox: string, batches: string[] | null): NotificationData[];
+export declare class Notification {
+    private data;
+    static make(): Notification;
+    title(title: string): this;
+    body(body: string): this;
+    status(status: 'success' | 'danger' | 'warning' | 'info'): this;
+    success(): this;
+    danger(): this;
+    warning(): this;
+    info(): this;
+    icon(name: string): this;
+    iconColor(color: string): this;
+    duration(ms: number): this;
+    persistent(): this;
+    /** Links shown under the text. Only displayed in the database notifications panel. */
+    actions(actions: {
+        label: string;
+        url?: string | null;
+        openUrlInNewTab?: boolean;
+    }[]): this;
+    getData(): NotificationData;
+    /** Stores the notification for this user (panel bell): `await Notification.make()….sendToDatabase(panel.getDatabaseNotifications(), user.id)`. Does nothing without a store. */
+    sendToDatabase(store: NotificationSink | null, user: string | number): Promise<this>;
+    /** Queues the notification for the browser of the current request. */
+    send(): this;
+}
+/** Renders a flash notification (no date, actions or inline mode). Title and body are escaped. */
+export declare function renderNotification(n: NotificationData): string;
+/** Container component for flash notifications. */
+export declare class Notifications extends Component {
+    static callable: string[];
+    isFilamentNotificationsComponent: boolean;
+    notifications: Record<string, NotificationData>;
+    hasPulledNotificationsOnMount: boolean;
+    static locked: string[];
+    static listeners: {
+        notificationsSent: string;
+        notificationClosed: string;
+    };
+    private get mailbox();
+    /** On a full document load (not SPA navigation or prefetch), pending notifications are pulled right away. */
+    mount(): void;
+    pullNotifications(batches?: unknown): void;
+    pullNotificationsFromSession(batches?: unknown): void;
+    removeNotification(id: unknown): void;
+    render(): string;
+}
+export {};

package/lib/notifications.js

@@ -0,0 +1,112 @@
+// Flash notifications: the Notification builder, a per-browser mailbox, and the component that displays them.
+import { AsyncLocalStorage } from 'node:async_hooks';
+import { randomBytes, randomUUID } from 'node:crypto';
+import { Attributes, e, icon, js } from '@navette-js/support';
+import { t } from '@navette-js/support/i18n';
+import { Component, WireError } from '@navette-js/wire';
+const requestStore = new AsyncLocalStorage();
+/** Runs `fn` in a request context, where `Notification.send()` queues its notifications. */
+export function runInRequest(mailbox, fn) {
+    const store = { mailbox, pending: [] };
+    return requestStore.run(store, async () => ({ result: await fn(), pending: store.pending }));
+}
+// In-memory mailbox, keyed by browser (the CSRF token) then by batch.
+const mailboxes = new Map();
+const TTL = 5 * 60 * 1000;
+export function publish(mailbox, notifications) {
+    const batch = randomBytes(20).toString('hex');
+    const box = mailboxes.get(mailbox) ?? new Map();
+    for (const [key, entry] of box)
+        if (Date.now() - entry.at > TTL)
+            box.delete(key);
+    box.set(batch, { at: Date.now(), notifications });
+    mailboxes.set(mailbox, box);
+    return batch;
+}
+/** Removes and returns the notifications of the given batches (all of them if `batches` is null). */
+export function pull(mailbox, batches) {
+    const box = mailboxes.get(mailbox);
+    if (!box)
+        return [];
+    const out = [];
+    for (const key of batches ?? [...box.keys()]) {
+        const entry = box.get(key);
+        if (entry) {
+            out.push(...entry.notifications);
+            box.delete(key);
+        }
+    }
+    return out;
+}
+const STATUS_ICON = { danger: 'o-x-circle', info: 'o-information-circle', success: 'o-check-circle', warning: 'o-exclamation-circle' };
+export class Notification {
+    data = { id: randomUUID(), title: null, body: null, status: null, duration: 6000, icon: null, iconColor: null };
+    static make() { return new Notification(); }
+    title(title) { this.data.title = title; return this; }
+    body(body) { this.data.body = body; return this; }
+    status(status) { this.data.status = status; return this; }
+    success() { return this.status('success'); }
+    danger() { return this.status('danger'); }
+    warning() { return this.status('warning'); }
+    info() { return this.status('info'); }
+    icon(name) { this.data.icon = name; return this; }
+    iconColor(color) { this.data.iconColor = color; return this; }
+    duration(ms) { this.data.duration = ms; return this; }
+    persistent() { this.data.duration = 'persistent'; return this; }
+    /** Links shown under the text. Only displayed in the database notifications panel. */
+    actions(actions) { this.data.actions = actions.slice(0, 10).map((action) => ({ label: String(action.label), url: action.url ?? null, openUrlInNewTab: action.openUrlInNewTab === true })); return this; }
+    getData() { return { ...this.data }; }
+    /** Stores the notification for this user (panel bell): `await Notification.make()….sendToDatabase(panel.getDatabaseNotifications(), user.id)`. Does nothing without a store. */
+    async sendToDatabase(store, user) { if (store)
+        await store.send(user, { ...this.data, id: randomUUID() }); return this; }
+    /** Queues the notification for the browser of the current request. */
+    send() {
+        const store = requestStore.getStore();
+        if (!store)
+            throw new Error('Notification.send() must be called while handling a request.');
+        store.pending.push({ ...this.data });
+        return this;
+    }
+}
+/** Renders a flash notification (no date, actions or inline mode). Title and body are escaped. */
+export function renderNotification(n) {
+    const closeLabel = t('filament-notifications::notification.actions.close.label');
+    const attributes = new Attributes()
+        .merge({ role: n.status === 'danger' ? 'alert' : null, 'wire:key': `${n.id}.notifications.${n.id}`, 'x-on:close-notification.window': `if ($event.detail.id == ${js(n.id)}) close()` })
+        .class(['fi-no-notification', n.status ? `fi-status-${n.status}` : null]);
+    const iconName = n.icon ?? (n.status ? STATUS_ICON[n.status] : null);
+    const iconColor = n.iconColor ?? n.status;
+    const iconHtml = iconName ? icon(iconName, { size: 'lg', attributes: new Attributes().class([...(iconColor && iconColor !== 'gray' ? ['fi-color', `fi-color-${iconColor}`] : []), 'fi-no-notification-icon']) }) : '';
+    return `<div x-data="notificationComponent({ notification: ${e(js({ id: n.id, duration: n.duration }))} })" x-transition:enter-start="fi-transition-enter-start" x-transition:enter-end="fi-transition-enter-end" x-transition:leave-start="fi-transition-leave-start" x-transition:leave-end="fi-transition-leave-end" x-on:mouseenter="pauseDuration('hover')" x-on:mouseleave="resumeDuration('hover')" x-on:focusin="handleFocusIn($event)" x-on:focusout="handleFocusOut($event)" x-on:keydown.escape="handleEscape($event)" ${attributes.toHtml().replace(/"if \(\$event\.detail\.id == '([^']*)'\) close\(\)"/, (_m, id) => `"if ($event.detail.id == '${id}') close()"`)}>${iconHtml}<div class="fi-no-notification-main">${n.title !== null || n.body !== null ? `<div class="fi-no-notification-text">${n.title !== null ? `<h3 class="fi-no-notification-title">${e(n.title)}</h3>` : ''}${n.body !== null ? `<div class="fi-no-notification-body">${e(n.body)}</div>` : ''}</div>` : ''}</div><button type="button" x-on:click="dismiss()" aria-label="${e(closeLabel)}" title="${e(closeLabel)}" class="fi-icon-btn fi-no-notification-close-btn">${icon('m-x-mark')}</button></div>`;
+}
+/** Container component for flash notifications. */
+export class Notifications extends Component {
+    static callable = ['pullNotifications'];
+    isFilamentNotificationsComponent = true;
+    notifications = {};
+    hasPulledNotificationsOnMount = false;
+    static locked = ['isFilamentNotificationsComponent', 'notifications', 'hasPulledNotificationsOnMount'];
+    static listeners = { notificationsSent: 'pullNotifications', notificationClosed: 'removeNotification' };
+    get mailbox() { return String(this._ctx?.mailbox ?? ''); }
+    /** On a full document load (not SPA navigation or prefetch), pending notifications are pulled right away. */
+    mount() {
+        const req = this._ctx?.req;
+        if (!req || req.method !== 'GET' || req.headers['sec-fetch-dest'] !== 'document' || req.headers['x-livewire-navigate'] !== undefined || String(req.headers['sec-purpose'] ?? '').toLowerCase().includes('prefetch'))
+            return;
+        for (const n of pull(this.mailbox, null))
+            this.notifications[n.id] = n;
+        this.hasPulledNotificationsOnMount = true;
+    }
+    pullNotifications(batches = []) {
+        if (!Array.isArray(batches) || batches.length > 50 || batches.some((b) => typeof b !== 'string' || !/^[a-f0-9]{40}$/.test(b)))
+            throw new WireError(422, 'Invalid notification batches.');
+        for (const n of pull(this.mailbox, batches))
+            this.notifications[n.id] = n;
+    }
+    pullNotificationsFromSession(batches = []) { this.pullNotifications(batches); }
+    removeNotification(id) { if (typeof id === 'string')
+        delete this.notifications[id]; }
+    render() {
+        return `<div x-data="notificationsComponent()" data-filament-notifications="${this.hasPulledNotificationsOnMount ? 'mounted' : 'pending'}"><div class="fi-no fi-align-right fi-vertical-align-start" role="status" aria-atomic="false">${Object.values(this.notifications).map(renderNotification).join('')}</div></div>`;
+    }
+}

package/lib/topbar.d.ts

@@ -0,0 +1,90 @@
+import { Component } from '@navette-js/wire';
+import type { NotificationData } from './notifications.ts';
+/** Notification body: HTML is sanitized (rich editor tags only), plain text is escaped. */
+export declare const notificationBodyHtml: (body: string) => string;
+export type GlobalSearchResult = {
+    title: string;
+    url: string;
+    details: Record<string, string>;
+};
+export type GlobalSearchCategory = {
+    label: string;
+    results: GlobalSearchResult[];
+};
+/** Search field suffix showing the first key binding for the browser's platform; `null` if the platform is unknown. */
+export declare function keyBindingSuffix(keyBindings: string[], userAgent: string): string | null;
+export declare class GlobalSearch extends Component {
+    search: string;
+    render(): Promise<string>;
+}
+export type DatabaseNotificationAction = {
+    label: string;
+    url: string | null;
+    openUrlInNewTab: boolean;
+};
+export type DatabaseNotificationRecord = {
+    id: string;
+    title: string | null;
+    body: string | null;
+    icon: string | null;
+    iconColor: string | null;
+    status: string | null;
+    actions: DatabaseNotificationAction[];
+    createdAt: Date | null;
+    unread: boolean;
+};
+/** Storage for a user's notifications. `knexNotificationStore()` provides one backed by a `notifications` table. */
+export interface DatabaseNotificationStore {
+    /** Most recent first; `offset` is the number of notifications to skip (pagination). */
+    list(user: string | number, limit: number, offset?: number): Promise<DatabaseNotificationRecord[]>;
+    count(user: string | number): Promise<number>;
+    unreadCount(user: string | number): Promise<number>;
+    send(user: string | number, notification: NotificationData & {
+        actions?: DatabaseNotificationAction[];
+    }): Promise<void>;
+    delete(user: string | number, id: string): Promise<void>;
+    markAsRead(user: string | number, id: string, read: boolean): Promise<void>;
+    markAllAsRead(user: string | number): Promise<void>;
+    clear(user: string | number): Promise<void>;
+}
+/**
+ * Store backed by a `notifications` table (polymorphic `notifiable_type`/`notifiable_id`, JSON `data` with `format: 'filament'`).
+ * Existing rows in that format are read as-is. `mapUrl` rewrites action URLs read from the table.
+ */
+export declare function knexNotificationStore(knex: any, options?: {
+    table?: string;
+    notifiableType?: string;
+    mapUrl?: (url: string) => string;
+}): DatabaseNotificationStore;
+/** Relative time in English, e.g. "2 days ago". */
+export declare function timeAgo(date: Date, now?: Date): string;
+/** Bell and slide-over listing the signed-in user's database notifications. */
+export declare class DatabaseNotifications extends Component {
+    static callable: string[];
+    /** Current page of the panel (simple pagination). */
+    paginators: Record<string, number>;
+    private get notificationsPage();
+    previousPage(): void;
+    nextPage(): void;
+    gotoPage(page: unknown): void;
+    static listeners: {
+        databaseNotificationsSent: string;
+        notificationClosed: string;
+        markedNotificationAsRead: string;
+        markedNotificationAsUnread: string;
+    };
+    /** Notifications per page. */
+    static limit: number;
+    isOpen: boolean;
+    /** Store and user come from the server: every operation is restricted to this user's notifications. */
+    private get scope();
+    refresh(): void;
+    removeNotification(id: unknown): Promise<void>;
+    markNotificationAsRead(id: unknown): Promise<void>;
+    markNotificationAsUnread(id: unknown): Promise<void>;
+    clearNotifications(): Promise<void>;
+    markAllNotificationsAsRead(): Promise<void>;
+    private trigger;
+    placeholder(): Promise<string>;
+    render(): Promise<string>;
+}

package/lib/topbar.js

@@ -0,0 +1,240 @@
+// Global search and database notifications: two components that live in the panel sidebar.
+import { Attributes, e, icon, js, loadingIndicator, renderHook } from '@navette-js/support';
+import { t } from '@navette-js/support/i18n';
+import { Component, WireError } from '@navette-js/wire';
+import { richDocumentToHtml, richHtmlToDocument } from '@navette-js/forms';
+import { pagination } from '@navette-js/support/ui';
+/** Notification body: HTML is sanitized (rich editor tags only), plain text is escaped. */
+export const notificationBodyHtml = (body) => (/<[a-z][\s\S]*>/i.test(body) ? (richDocumentToHtml(richHtmlToDocument(body)) ?? '') : e(body));
+const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+const safeIcon = (name, size, classes) => {
+    if (!name || !/^[a-z0-9-]+$/.test(name))
+        return '';
+    try {
+        return icon(name, { size, attributes: new Attributes().class(classes) });
+    }
+    catch {
+        return '';
+    }
+};
+/** Only a same-site path (`/…`) or an http(s) URL can become a link (no `javascript:` or protocol-relative URLs). */
+const safeUrl = (url) => (typeof url === 'string' && /^(\/(?!\/)|https?:\/\/)/.test(url) ? url : null);
+/** Search field suffix showing the first key binding for the browser's platform; `null` if the platform is unknown. */
+export function keyBindingSuffix(keyBindings, userAgent) {
+    const first = keyBindings[0];
+    if (!first)
+        return null;
+    if (/Macintosh|Mac OS/i.test(userAgent))
+        return first.replace(/alt|option/g, '⌥').replace(/meta|command|mod/g, '⌘').replace(/ctrl/g, '⌃').toUpperCase();
+    if (!/Windows|Linux/i.test(userAgent))
+        return null;
+    return first.replace(/option/g, 'alt').replace(/command/g, 'meta').replace(/mod/g, 'ctrl').toUpperCase();
+}
+export class GlobalSearch extends Component {
+    search = '';
+    async render() {
+        const { panel, user, req } = (this._ctx ?? {});
+        if (!user || !panel)
+            return '<div class="fi-global-search-ctn"></div>';
+        const search = (typeof this.search === 'string' ? this.search : '').slice(0, 1000).trim();
+        this.search = typeof this.search === 'string' ? this.search.slice(0, 1000) : '';
+        const categories = search === '' ? null : await panel.getGlobalSearchResults(search, user);
+        if (categories !== null)
+            this.dispatch('open-global-search-results');
+        const count = categories?.reduce((total, category) => total + category.results.length, 0) ?? 0;
+        const [one, many] = t('filament-panels::global-search.results_count').split('|');
+        const message = count ? (count === 1 ? one : (many ?? one)).replace(':count', String(count)) : t('filament-panels::global-search.no_results_message');
+        const id = `global-search-${this.id}`;
+        const bindings = panel.getGlobalSearchKeyBindings();
+        const suffix = panel.getGlobalSearchFieldSuffix(String(req?.headers?.['user-agent'] ?? ''));
+        const input = `<input ${new Attributes({
+            autocomplete: 'off', maxlength: '1000', placeholder: t('filament-panels::global-search.field.placeholder'), type: 'search', 'wire:key': 'global-search.field.input', id: `${id}-input`,
+            'aria-controls': `${id}-results`, 'aria-describedby': `${id}-instructions`, 'x-ref': 'input', [`wire:model.live.debounce.${panel.getGlobalSearchDebounce()}`]: 'search',
+            ...(bindings.length ? { [`x-mousetrap.global.${bindings.map((binding) => binding.replace(/\+/g, '-')).join('.')}`]: '$refs.input?.focus()' } : {}),
+        }).class(['fi-input', 'fi-input-has-inline-prefix']).toHtml()} />`;
+        const focus = "if (! $event.target.closest('.fi-input-wrp-actions')) $dispatch('focus-input')";
+        const field = `<div class="fi-input-wrp"><div x-on:click="${e(focus)}" class="fi-input-wrp-prefix fi-input-wrp-prefix-has-content fi-inline">${icon('m-magnifying-glass', { attributes: new Attributes({ 'wire:loading.remove.delay.default': '1', 'wire:target': 'search' }) })}${loadingIndicator(new Attributes({ 'wire:loading.delay.default': '', 'wire:target': 'search' }))}</div><div class="fi-input-wrp-content-ctn">${input}</div>${suffix ? `<div x-on:click="${e(focus)}" class="fi-input-wrp-suffix fi-inline fi-input-wrp-suffix-has-label"><span class="fi-input-wrp-label">${e(suffix)}</span></div>` : ''}</div>`;
+        let results = '';
+        if (categories !== null) {
+            results = categories.length === 0
+                ? `<p class="fi-global-search-no-results-message">${e(t('filament-panels::global-search.no_results_message'))}</p>`
+                : `<ul class="fi-global-search-results">${categories.map((category, groupIndex) => {
+                    const groupId = `${id}-group-${groupIndex}`;
+                    return `<li class="fi-global-search-result-group"><h3 id="${e(groupId)}" class="fi-global-search-result-group-header">${e(category.label)}</h3><ul class="fi-global-search-result-group-results">${category.results.map((result, index) => {
+                        const details = Object.entries(result.details);
+                        return `<li class="fi-global-search-result"><a href="${e(result.url)}" wire:navigate class="fi-global-search-result-link"><h4 id="${e(`${groupId}-result-${index}`)}" class="fi-global-search-result-heading">${e(result.title)}</h4>${details.length ? `<dl class="fi-global-search-result-details">${details.map(([label, value]) => `<div class="fi-global-search-result-detail"><dt class="fi-global-search-result-detail-label">${e(label)}:</dt><dd class="fi-global-search-result-detail-value">${e(value)}</dd></div>`).join('')}</dl>` : ''}</a></li>`;
+                    }).join('')}</ul></li>`;
+                }).join('')}</ul>`;
+        }
+        const root = new Attributes({
+            'x-data': `filamentGlobalSearch({ loadingMessage: ${js(t('filament-panels::global-search.loading_message'))}, failureMessage: ${js(t('filament-panels::global-search.failure_message'))}, })`,
+            'x-on:input': 'if ($event.target === $refs.input) inputChanged($event.target.value)', 'x-on:focusin': 'if ($event.target === $refs.input) reopen()', 'x-on:focusout': 'focusLeft($event)',
+            'x-on:keydown': 'keydown($event)', 'x-on:click.outside': 'dismiss()',
+            'x-on:open-modal.window.capture': 'if ($refs.results.contains(document.activeElement)) {\n dismiss()\n restoreFocus()\n }',
+            'x-on:livewire:navigate.window': 'navigationStarted($event)', 'x-on:livewire:navigated.window': 'navigationCompleted()',
+        }).class(['fi-global-search']);
+        const region = new Attributes({
+            id: `${id}-results`, role: 'region', 'aria-label': t('filament-panels::global-search.results_label'), 'data-query': search, 'data-has-results': categories !== null ? 'true' : 'false', 'data-message': message,
+            'x-ref': 'results', 'x-show': 'isOpen', 'x-bind:inert': '! isOpen', 'x-bind:aria-hidden': '! isOpen', 'x-cloak': '', 'x-on:mousedown.self.prevent': '', 'x-on:click': 'linkActivated($event)',
+            'x-transition:enter-start': 'fi-transition-enter-start', 'x-transition:leave-end': 'fi-transition-leave-end',
+        }).class(['fi-global-search-results-ctn']);
+        return `<div class="fi-global-search-ctn">${renderHook('panels::global-search.start')}<div ${root.toHtml()}><div class="fi-global-search-field"><label for="${e(id)}-input" class="fi-sr-only">${e(t('filament-panels::global-search.field.label'))}</label>${field}</div><p id="${e(id)}-instructions" class="fi-sr-only">${e(t('filament-panels::global-search.field.instructions'))}</p><p wire:ignore role="status" aria-atomic="true" x-text="status" class="fi-sr-only"></p><div ${region.toHtml()}>${results}</div></div>${renderHook('panels::global-search.end')}</div>`;
+    }
+}
+const stamp = (date) => date.toISOString().slice(0, 19).replace('T', ' ');
+/**
+ * Store backed by a `notifications` table (polymorphic `notifiable_type`/`notifiable_id`, JSON `data` with `format: 'filament'`).
+ * Existing rows in that format are read as-is. `mapUrl` rewrites action URLs read from the table.
+ */
+export function knexNotificationStore(knex, options = {}) {
+    const table = options.table ?? 'notifications';
+    const notifiableType = options.notifiableType ?? 'App\\Models\\User';
+    const scope = (user) => knex(table).where({ notifiable_type: notifiableType, notifiable_id: user }).whereRaw("json_extract(data, '$.format') = ?", ['filament']);
+    const text = (value) => (typeof value === 'string' && value !== '' ? value : null);
+    return {
+        async list(user, limit, offset = 0) {
+            const rows = await scope(user).orderBy('created_at', 'desc').limit(limit).offset(Math.max(0, Math.floor(offset)));
+            return rows.map((row) => {
+                let data = {};
+                try {
+                    data = JSON.parse(row.data) ?? {};
+                }
+                catch { /* unreadable data: empty notification */ }
+                const iconName = text(data.icon)?.replace(/^heroicon-/, '') ?? null;
+                return {
+                    id: String(row.id), title: text(data.title), body: text(data.body), icon: iconName, iconColor: text(data.iconColor), status: text(data.status),
+                    actions: (Array.isArray(data.actions) ? data.actions : []).slice(0, 10).map((action) => ({ label: String(action?.label ?? action?.name ?? ''), url: typeof action?.url === 'string' ? (options.mapUrl ? options.mapUrl(action.url) : action.url) : null, openUrlInNewTab: action?.shouldOpenUrlInNewTab === true })),
+                    createdAt: row.created_at ? new Date(`${String(row.created_at).replace(' ', 'T').slice(0, 19)}Z`) : null, unread: row.read_at === null || row.read_at === undefined,
+                };
+            });
+        },
+        async count(user) { return Number((await scope(user).count({ n: '*' }).first())?.n ?? 0); },
+        async unreadCount(user) { return Number((await scope(user).whereNull('read_at').count({ n: '*' }).first())?.n ?? 0); },
+        async send(user, notification) {
+            const at = stamp(new Date());
+            const data = {
+                actions: (notification.actions ?? []).map((action) => ({ name: action.label, color: null, icon: null, isDisabled: false, label: action.label, shouldClose: false, shouldMarkAsRead: false, shouldMarkAsUnread: false, shouldOpenUrlInNewTab: action.openUrlInNewTab, size: 'sm', url: action.url, view: 'filament::components.link' })),
+                body: notification.body, color: null, duration: 'persistent', icon: notification.icon ? `heroicon-${notification.icon}` : null, iconColor: notification.iconColor, status: notification.status, title: notification.title, view: null, viewData: [], format: 'filament',
+            };
+            await knex(table).insert({ id: notification.id, type: 'Filament\\Notifications\\DatabaseNotification', notifiable_type: notifiableType, notifiable_id: user, data: JSON.stringify(data), read_at: null, created_at: at, updated_at: at });
+        },
+        async delete(user, id) { await scope(user).where({ id }).delete(); },
+        async markAsRead(user, id, read) { await scope(user).where({ id }).update({ read_at: read ? stamp(new Date()) : null }); },
+        async markAllAsRead(user) { await scope(user).whereNull('read_at').update({ read_at: stamp(new Date()) }); },
+        async clear(user) { await scope(user).delete(); },
+    };
+}
+/** Relative time in English, e.g. "2 days ago". */
+export function timeAgo(date, now = new Date()) {
+    const seconds = Math.max(0, Math.floor((now.getTime() - date.getTime()) / 1000));
+    const units = [[365 * 86400, 'year'], [30 * 86400, 'month'], [7 * 86400, 'week'], [86400, 'day'], [3600, 'hour'], [60, 'minute'], [1, 'second']];
+    for (const [size, name] of units) {
+        if (seconds >= size) {
+            const n = Math.floor(seconds / size);
+            return `${n} ${name}${n === 1 ? '' : 's'} ago`;
+        }
+    }
+    return '0 seconds ago';
+}
+/** A notification rendered inline in the panel. Title and body are escaped. */
+function renderDatabaseNotification(n) {
+    const color = n.iconColor ?? n.status;
+    const iconHtml = safeIcon(n.icon ?? (n.status ? { danger: 'o-x-circle', info: 'o-information-circle', success: 'o-check-circle', warning: 'o-exclamation-circle' }[n.status] ?? null : null), 'md', [...(color && color !== 'gray' && /^[a-z]+$/.test(color) ? ['fi-color', `fi-color-${color}`] : []), 'fi-no-notification-icon']);
+    const actions = n.actions.filter((action) => action.label !== '').map((action) => {
+        const url = safeUrl(action.url);
+        return `<a ${new Attributes({ href: url, ...(action.openUrlInNewTab ? { target: '_blank', rel: 'noopener noreferrer' } : url?.startsWith('/') ? { 'wire:navigate': true } : {}) }).class(['fi-ac-link-action', 'fi-link', 'fi-size-sm', 'fi-color', 'fi-color-primary', 'fi-text-color-600', 'dark:fi-text-color-300']).toHtml()}><span class="fi-link-label">${e(action.label)}</span></a>`;
+    });
+    const closeLabel = t('filament-notifications::notification.actions.close.label');
+    const attributes = new Attributes({
+        'x-data': `notificationComponent({ notification: ${js({ id: n.id, duration: 'persistent' })} })`,
+        'x-transition:enter-start': 'fi-transition-enter-start', 'x-transition:enter-end': 'fi-transition-enter-end', 'x-transition:leave-start': 'fi-transition-leave-start', 'x-transition:leave-end': 'fi-transition-leave-end',
+        'wire:key': `${n.id}.notifications.${n.id}`, 'x-on:close-notification.window': `if ($event.detail.id == ${js(n.id)}) close()`,
+    }).class(['fi-no-notification', n.status && /^[a-z]+$/.test(n.status) ? `fi-status-${n.status}` : null, 'fi-inline']);
+    return `<div ${attributes.toHtml()}>${iconHtml}<div class="fi-no-notification-main"><div class="fi-no-notification-text">${n.title ? `<h3 class="fi-no-notification-title">${e(n.title)}</h3>` : ''}${n.createdAt ? `<time class="fi-no-notification-date">${e(timeAgo(n.createdAt))}</time>` : ''}${n.body ? `<div class="fi-no-notification-body">${notificationBodyHtml(n.body)}</div>` : ''}</div>${actions.length ? `<div class="fi-ac fi-no-notification-actions">${actions.join('')}</div>` : ''}</div><button type="button" x-on:click="close" aria-label="${e(closeLabel)}" title="${e(closeLabel)}" class="fi-icon-btn fi-no-notification-close-btn">${icon('m-x-mark')}</button></div>`;
+}
+const BADGE = 'fi-color fi-color-primary fi-text-color-600 dark:fi-text-color-200 fi-badge';
+const linkAction = (label, method, color, extra = '') => `<button type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="fi-ac-link-action fi-link fi-size-md fi-color fi-color-${color} fi-text-color-600 dark:fi-text-color-300" wire:click="${method}"${extra}>${loadingIndicator(new Attributes({ 'wire:loading.delay.default': '', 'wire:target': method }))}<span class="fi-link-label">${e(label)}</span></button>`;
+/** Bell and slide-over listing the signed-in user's database notifications. */
+export class DatabaseNotifications extends Component {
+    static callable = ['refresh', 'removeNotification', 'markNotificationAsRead', 'markNotificationAsUnread', 'clearNotifications', 'markAllNotificationsAsRead', 'previousPage', 'nextPage', 'gotoPage'];
+    /** Current page of the panel (simple pagination). */
+    paginators = { 'database-notifications-page': 1 };
+    get notificationsPage() { return Math.max(1, Math.min(10_000, Math.floor(Number(this.paginators?.['database-notifications-page']) || 1))); }
+    previousPage() { this.paginators = { 'database-notifications-page': Math.max(1, this.notificationsPage - 1) }; }
+    nextPage() { this.paginators = { 'database-notifications-page': this.notificationsPage + 1 }; }
+    gotoPage(page) { this.paginators = { 'database-notifications-page': Math.max(1, Math.floor(Number(page)) || 1) }; }
+    static listeners = { databaseNotificationsSent: 'refresh', notificationClosed: 'removeNotification', markedNotificationAsRead: 'markNotificationAsRead', markedNotificationAsUnread: 'markNotificationAsUnread' };
+    /** Notifications per page. */
+    static limit = 50;
+    isOpen = false;
+    /** Store and user come from the server: every operation is restricted to this user's notifications. */
+    get scope() {
+        const { panel, user } = (this._ctx ?? {});
+        const store = panel?.getDatabaseNotifications() ?? null;
+        if (!user || !store)
+            throw new WireError(401, 'Unauthenticated.');
+        return { store, user: user.id, interval: panel.getDatabaseNotificationsPollingInterval() };
+    }
+    refresh() { }
+    async removeNotification(id) { if (typeof id === 'string' && UUID.test(id))
+        await this.scope.store.delete(this.scope.user, id); }
+    async markNotificationAsRead(id) { if (typeof id === 'string' && UUID.test(id))
+        await this.scope.store.markAsRead(this.scope.user, id, true); }
+    async markNotificationAsUnread(id) { if (typeof id === 'string' && UUID.test(id))
+        await this.scope.store.markAsRead(this.scope.user, id, false); }
+    async clearNotifications() { await this.scope.store.clear(this.scope.user); }
+    async markAllNotificationsAsRead() { await this.scope.store.markAllAsRead(this.scope.user); }
+    trigger(unread) {
+        return `<button class="fi-sidebar-database-notifications-btn">${icon('o-bell', { size: 'lg' })}<span class="fi-sidebar-database-notifications-btn-label">${e(t('filament-panels::layout.actions.open_database_notifications.label'))}</span>${unread ? `<span class="fi-sidebar-database-notifications-btn-badge-ctn"><span class="${BADGE} fi-size-md"><span class="fi-badge-label-ctn"><span class="fi-badge-label">${unread}</span></span></span></span>` : ''}</button>`;
+    }
+    async placeholder() {
+        const { panel, user } = (this._ctx ?? {});
+        const store = panel?.getDatabaseNotifications() ?? null;
+        return `<div>${user && store ? this.trigger(await store.unreadCount(user.id)) : ''}</div>`;
+    }
+    async render() {
+        const { store, user, interval } = this.scope;
+        this.isOpen = this.isOpen === true;
+        const limit = this.constructor.limit;
+        const page = this.notificationsPage;
+        const fetched = this.isOpen ? await store.list(user, limit + 1, (page - 1) * limit) : null;
+        const hasMore = fetched !== null && fetched.length > limit;
+        const notifications = fetched ? fetched.slice(0, limit) : null;
+        const unread = await store.unreadCount(user);
+        const has = notifications ? notifications.length > 0 : (await store.count(user)) > 0;
+        const id = 'database-notifications';
+        const close = `$dispatch('close-modal', { id: ${js(id)} })`;
+        const key = (part) => `${this.id}.modal.${id}.${part}`;
+        const closeLabel = t('filament::components/modal.actions.close.label');
+        const closeButton = `<button class="fi-icon-btn fi-size-md fi-modal-close-btn" title="${e(closeLabel)}" aria-label="${e(closeLabel)}" tabindex="-1" type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" x-on:click="${e(close)}">${icon('o-x-mark', { size: 'lg' })}</button>`;
+        const heading = t('filament-notifications::database.modal.heading');
+        let header;
+        let content = '';
+        if (has) {
+            header = `<div wire:key="${e(key('header'))}" class="fi-modal-header">${closeButton}<div><h2 id="${id}.heading" class="fi-modal-heading">${e(heading)}${unread ? ` <span class="${BADGE} fi-size-xs">${unread}</span>` : ''}</h2><div class="fi-ac">${unread ? linkAction(t('filament-notifications::database.modal.actions.mark_all_as_read.label'), 'markAllNotificationsAsRead', 'primary') : ''}${linkAction(t('filament-notifications::database.modal.actions.clear.label'), 'clearNotifications', 'danger', ' x-on:click="close()"')}</div></div></div>`;
+            const body = notifications
+                ? `<div aria-label="${e(heading)}" role="list" class="fi-no-notifications">${notifications.map((n) => `<div role="listitem" wire:key="${e(n.id)}.database-notifications.ctn" class="${n.unread ? 'fi-no-notification-unread-ctn' : 'fi-no-notification-read-ctn'}">${n.unread ? `<span class="fi-sr-only">${e(t('filament-notifications::database.modal.unread_label'))}</span>` : ''}${renderDatabaseNotification(n)}</div>`).join('')}</div>`
+                : `<div role="status" aria-busy="true" class="fi-no-notifications-loading-ctn">${loadingIndicator()}<span class="fi-sr-only">${e(t('filament::components/loading-section.label'))}</span></div>`;
+            content = `<div wire:key="${e(key('content'))}" class="fi-modal-content">${body}</div>`;
+            if (notifications && (page > 1 || hasMore))
+                content += `<div wire:key="${e(key('footer'))}" class="fi-modal-footer fi-align-start">${pagination({ id: this.id, page, perPage: limit, hasMore })}</div>`;
+        }
+        else {
+            header = `<div wire:key="${e(key('header'))}" class="fi-modal-header">${closeButton}<div class="fi-modal-icon-ctn"><div class="fi-modal-icon-bg">${icon('o-bell-slash', { size: 'lg' })}</div></div><div><h2 id="${id}.heading" class="fi-modal-heading">${e(t('filament-notifications::database.modal.empty.heading'))}</h2><p id="${id}.description" class="fi-modal-description">${e(t('filament-notifications::database.modal.empty.description'))}</p></div></div>`;
+        }
+        const modal = new Attributes({
+            'aria-labelledby': `${id}.heading`, 'aria-modal': 'true', id, role: 'dialog', tabindex: '-1',
+            'x-data': `filamentModal({ id: ${js(id)}, isScrollLocked: true, shouldRestoreFocus: true, })`, 'data-fi-modal-id': id,
+            'x-on:close-modal.window': `if (($event.detail.id === ${js(id)}) && isOpen) close()`, 'x-on:close-modal-quietly.window': `if (($event.detail.id === ${js(id)}) && isOpen) closeQuietly()`,
+            'x-on:open-modal.window': `if (($event.detail.id === ${js(id)}) && (! isOpen)) open()`, 'x-bind:class': "{ 'fi-modal-open': isOpen, }", 'x-cloak': '', 'x-show': 'isOpen',
+        }).class(['fi-modal', 'fi-absolute-positioning-context', 'fi-modal-slide-over', 'fi-modal-slide-over-from-end', has ? 'fi-modal-has-sticky-header' : null, 'fi-no-database']);
+        const poll = interval && /^[0-9]+(ms|s)$/.test(interval) ? ` wire:poll.${interval}=""` : '';
+        const windowClasses = ['fi-modal-window', 'fi-modal-window-has-close-btn', has ? 'fi-modal-window-has-content' : 'fi-modal-window-has-icon', `fi-align-${has ? 'start' : 'center'}`, 'fi-width-md'].join(' ');
+        const transitions = 'x-transition:enter="fi-transition-enter" x-transition:leave="fi-transition-leave" x-transition:enter-start="fi-transition-enter-start" x-transition:enter-end="fi-transition-enter-end" x-transition:leave-start="fi-transition-leave-start" x-transition:leave-end="fi-transition-leave-end"';
+        // The window has `autofocus` so the focus trap lands on it, not on "Mark all as read", which Enter would trigger at once.
+        const dialog = `<div ${modal.toHtml()}${poll}><div aria-hidden="true" x-show="isOpen" x-transition.duration.300ms.opacity class="fi-modal-close-overlay"></div><div tabindex="-1" x-on:click.self="${e(close)}" x-trap.noreturn="isTrapActive" class="fi-modal-window-ctn fi-clickable"><div x-on:keydown.window.escape="if (isTopmost()) ${e(close)}" x-show="isWindowVisible" ${transitions} wire:key="${e(key('window'))}" tabindex="-1" autofocus="autofocus" class="${windowClasses}">${header}${content}</div></div></div>`;
+        const opened = "if ($event.detail.id === 'database-notifications' && ! $wire.isOpen) $wire.set('isOpen', true)";
+        const closed = "if ($event.detail.id === 'database-notifications') $wire.set('isOpen', false, false)";
+        return `<div x-data x-on:x-modal-opened.window="${e(opened)}" x-on:modal-closed.window="${e(closed)}" class="fi-no-database"><div><div x-on:click="$dispatch('open-modal', { id: 'database-notifications' })" class="fi-modal-trigger">${this.trigger(unread)}</div><template x-teleport="body">${dialog}</template></div></div>`;
+    }
+}

package/package.json

@@ -1,6 +1,60 @@
 {
   "name": "@navette-js/panels",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0-beta.2",
+  "description": "Admin panels for Node.js: resources, pages, navigation, authentication, tenancy.",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./theme.css": "./theme.css"
+  },
+  "types": "./lib/index.d.ts",
+  "files": [
+    "lib",
+    "views",
+    "dist",
+    "resources",
+    "theme.css",
+    "LICENSE",
+    "README.md",
+    "THIRD-PARTY-NOTICES.md"
+  ],
+  "engines": {
+    "node": ">=24"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NavetteJS/navette.git",
+    "directory": "packages/panels"
+  },
+  "homepage": "https://github.com/NavetteJS/navette#readme",
+  "bugs": {
+    "url": "https://github.com/NavetteJS/navette/issues"
+  },
+  "keywords": [
+    "navette",
+    "admin",
+    "panel",
+    "livewire",
+    "express",
+    "node"
+  ],
+  "dependencies": {
+    "@navette-js/support": "1.0.0-beta.2",
+    "@navette-js/schemas": "1.0.0-beta.2",
+    "@navette-js/forms": "1.0.0-beta.2",
+    "@navette-js/actions": "1.0.0-beta.2",
+    "@navette-js/wire": "1.0.0-beta.2",
+    "@navette-js/tables": "1.0.0-beta.2",
+    "@navette-js/infolists": "1.0.0-beta.2",
+    "@navette-js/database": "1.0.0-beta.2",
+    "express": "^5.1.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "beta"
+  }
+}

package/resources/filament/LICENSE.md

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright (c) Filament
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/resources/filament/README.md

@@ -0,0 +1,2 @@
+Sources CSS de FilamentPHP v5.11.2 (https://github.com/filamentphp/filament), copiées sans modification par `tools/vendor-filament-css.mjs`.
+Licence MIT : voir LICENSE.md. Ne pas modifier à la main : relancer le script.