@navette-js/panels 1.0.0-beta.1 → 1.0.0-beta.3

package/lib/notifications.d.ts

@@ -14,17 +14,17 @@ export type NotificationData = {
     iconColor: string | null;
     actions?: NotificationActionData[];
 };
-/** Ce qu'il faut d'un stockage de notifications pour y écrire (voir `DatabaseNotificationStore`). */
+/** The part of a notification store needed to write to it (see `DatabaseNotificationStore`). */
 type NotificationSink = {
     send(user: string | number, notification: NotificationData): Promise<void>;
 };
-/** Exécute `fn` dans le contexte d'une requête : `Notification.send()` y dépose ses notifications. */
+/** 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;
-/** Retire et rend les notifications des lots demandés (tous si `batches` est nul). */
+/** 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;
@@ -40,21 +40,21 @@ export declare class Notification {
     iconColor(color: string): this;
     duration(ms: number): this;
     persistent(): this;
-    /** Liens proposés sous le texte. Ils ne sont affichés que dans le panneau des notifications en base. */
+    /** Links shown under the text. Only displayed in the database notifications panel. */
     actions(actions: {
         label: string;
         url?: string | null;
         openUrlInNewTab?: boolean;
     }[]): this;
     getData(): NotificationData;
-    /** Enregistre la notification pour cet utilisateur (cloche du panel) : `await Notification.make()….sendToDatabase(panel.getDatabaseNotifications(), user.id)`. Sans stockage, rien n'est fait. */
+    /** 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>;
-    /** Dépose la notification pour le navigateur de la requête en cours. */
+    /** Queues the notification for the browser of the current request. */
     send(): this;
 }
-/** Port de Notification::toEmbeddedHtml (sans date, actions ni mode « inline »). Le titre et le corps sont échappés. */
+/** Renders a flash notification (no date, actions or inline mode). Title and body are escaped. */
 export declare function renderNotification(n: NotificationData): string;
-/** Conteneur des notifications (port de Filament\Notifications\Livewire\Notifications). */
+/** Container component for flash notifications. */
 export declare class Notifications extends Component {
     static callable: string[];
     isFilamentNotificationsComponent: boolean;
@@ -66,7 +66,7 @@ export declare class Notifications extends Component {
         notificationClosed: string;
     };
     private get mailbox();
-    /** À l'affichage d'un document (hors navigation SPA et préchargement), les notifications en attente sont tirées tout de suite. */
+    /** 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;

package/lib/notifications.js

@@ -1,16 +1,16 @@
-// Notifications flash — port de filament/notifications : Notification, boîte aux lettres, composant d'affichage.
+// 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();
-/** Exécute `fn` dans le contexte d'une requête : `Notification.send()` y dépose ses notifications. */
+/** 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 }));
 }
-// Boîte aux lettres en mémoire, par navigateur (identifiant = jeton CSRF) puis par lot. Filament utilise le cache de l'application.
+// 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) {
@@ -23,7 +23,7 @@ export function publish(mailbox, notifications) {
     mailboxes.set(mailbox, box);
     return batch;
 }
-/** Retire et rend les notifications des lots demandés (tous si `batches` est nul). */
+/** 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)
@@ -53,22 +53,22 @@ export class Notification {
     iconColor(color) { this.data.iconColor = color; return this; }
     duration(ms) { this.data.duration = ms; return this; }
     persistent() { this.data.duration = 'persistent'; return this; }
-    /** Liens proposés sous le texte. Ils ne sont affichés que dans le panneau des notifications en base. */
+    /** 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 }; }
-    /** Enregistre la notification pour cet utilisateur (cloche du panel) : `await Notification.make()….sendToDatabase(panel.getDatabaseNotifications(), user.id)`. Sans stockage, rien n'est fait. */
+    /** 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; }
-    /** Dépose la notification pour le navigateur de la requête en cours. */
+    /** Queues the notification for the browser of the current request. */
     send() {
         const store = requestStore.getStore();
         if (!store)
-            throw new Error('Notification.send() doit être appelé pendant le traitement d\'une requête.');
+            throw new Error('Notification.send() must be called while handling a request.');
         store.pending.push({ ...this.data });
         return this;
     }
 }
-/** Port de Notification::toEmbeddedHtml (sans date, actions ni mode « inline »). Le titre et le corps sont échappés. */
+/** 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()
@@ -79,7 +79,7 @@ export function renderNotification(n) {
     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>`;
 }
-/** Conteneur des notifications (port de Filament\Notifications\Livewire\Notifications). */
+/** Container component for flash notifications. */
 export class Notifications extends Component {
     static callable = ['pullNotifications'];
     isFilamentNotificationsComponent = true;
@@ -88,7 +88,7 @@ export class Notifications extends Component {
     static locked = ['isFilamentNotificationsComponent', 'notifications', 'hasPulledNotificationsOnMount'];
     static listeners = { notificationsSent: 'pullNotifications', notificationClosed: 'removeNotification' };
     get mailbox() { return String(this._ctx?.mailbox ?? ''); }
-    /** À l'affichage d'un document (hors navigation SPA et préchargement), les notifications en attente sont tirées tout de suite. */
+    /** 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'))
@@ -99,7 +99,7 @@ export class Notifications extends Component {
     }
     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, 'Lots de notifications invalides.');
+            throw new WireError(422, 'Invalid notification batches.');
         for (const n of pull(this.mailbox, batches))
             this.notifications[n.id] = n;
     }

package/lib/topbar.d.ts

@@ -1,6 +1,6 @@
 import { Component } from '@navette-js/wire';
 import type { NotificationData } from './notifications.ts';
-/** Corps d'une notification : du HTML est nettoyé (balises de l'éditeur de texte enrichi seulement), un texte simple est échappé. */
+/** 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;
@@ -11,7 +11,7 @@ export type GlobalSearchCategory = {
     label: string;
     results: GlobalSearchResult[];
 };
-/** Suffixe du champ d'après la plateforme du navigateur, comme `globalSearchFieldKeyBindingSuffix()` : rien si elle est inconnue. */
+/** 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;
@@ -33,9 +33,9 @@ export type DatabaseNotificationRecord = {
     createdAt: Date | null;
     unread: boolean;
 };
-/** Stockage des notifications d'un utilisateur. `knexNotificationStore()` en fournit un sur la table `notifications` de Laravel. */
+/** Storage for a user's notifications. `knexNotificationStore()` provides one backed by a `notifications` table. */
 export interface DatabaseNotificationStore {
-    /** Notifications les plus récentes d'abord ; `offset` : nombre à sauter (pagination). */
+    /** 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>;
@@ -48,20 +48,20 @@ export interface DatabaseNotificationStore {
     clear(user: string | number): Promise<void>;
 }
 /**
- * Stockage sur la table `notifications` de Laravel, au format de Filament : les notifications déjà présentes sont lues telles quelles,
- * et celles envoyées d'ici restent lisibles par une application Filament. `mapUrl` réécrit l'adresse des actions lues en base.
+ * 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;
-/** « 2 days ago », comme `diffForHumans()` de Carbon. */
+/** Relative time in English, e.g. "2 days ago". */
 export declare function timeAgo(date: Date, now?: Date): string;
-/** Cloche et panneau des notifications enregistrées en base pour l'utilisateur connecté. */
+/** Bell and slide-over listing the signed-in user's database notifications. */
 export declare class DatabaseNotifications extends Component {
     static callable: string[];
-    /** Page du panneau (pagination simple, comme `simplePaginate(50)` de Filament). */
+    /** Current page of the panel (simple pagination). */
     paginators: Record<string, number>;
     private get notificationsPage();
     previousPage(): void;
@@ -73,10 +73,10 @@ export declare class DatabaseNotifications extends Component {
         markedNotificationAsRead: string;
         markedNotificationAsUnread: string;
     };
-    /** Nombre de notifications par page du panneau (50, comme Filament). */
+    /** Notifications per page. */
     static limit: number;
     isOpen: boolean;
-    /** Le stockage et l'utilisateur viennent du serveur : chaque opération est bornée aux notifications de cet utilisateur. */
+    /** 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>;

package/lib/topbar.js

@@ -1,11 +1,10 @@
-// Recherche globale et notifications en base — ports de Filament\Livewire\GlobalSearch et de
-// Filament\Notifications\Livewire\DatabaseNotifications. Les deux composants vivent dans la sidebar du panel.
+// 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';
-/** Corps d'une notification : du HTML est nettoyé (balises de l'éditeur de texte enrichi seulement), un texte simple est échappé. */
+/** 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) => {
@@ -18,9 +17,9 @@ const safeIcon = (name, size, classes) => {
         return '';
     }
 };
-/** Seules une adresse du site (`/…`) ou une adresse http(s) peuvent devenir un lien. */
+/** 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);
-/** Suffixe du champ d'après la plateforme du navigateur, comme `globalSearchFieldKeyBindingSuffix()` : rien si elle est inconnue. */
+/** 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)
@@ -84,8 +83,8 @@ export class GlobalSearch extends Component {
 }
 const stamp = (date) => date.toISOString().slice(0, 19).replace('T', ' ');
 /**
- * Stockage sur la table `notifications` de Laravel, au format de Filament : les notifications déjà présentes sont lues telles quelles,
- * et celles envoyées d'ici restent lisibles par une application Filament. `mapUrl` réécrit l'adresse des actions lues en base.
+ * 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';
@@ -100,7 +99,7 @@ export function knexNotificationStore(knex, options = {}) {
                 try {
                     data = JSON.parse(row.data) ?? {};
                 }
-                catch { /* données illisibles : notification vide */ }
+                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),
@@ -125,7 +124,7 @@ export function knexNotificationStore(knex, options = {}) {
         async clear(user) { await scope(user).delete(); },
     };
 }
-/** « 2 days ago », comme `diffForHumans()` de Carbon. */
+/** 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']];
@@ -137,7 +136,7 @@ export function timeAgo(date, now = new Date()) {
     }
     return '0 seconds ago';
 }
-/** Notification affichée dans le panneau (mode « inline » de Filament). Titre et corps sont échappés. */
+/** 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']);
@@ -155,25 +154,25 @@ function renderDatabaseNotification(n) {
 }
 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>`;
-/** Cloche et panneau des notifications enregistrées en base pour l'utilisateur connecté. */
+/** 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'];
-    /** Page du panneau (pagination simple, comme `simplePaginate(50)` de Filament). */
+    /** 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' };
-    /** Nombre de notifications par page du panneau (50, comme Filament). */
+    /** Notifications per page. */
     static limit = 50;
     isOpen = false;
-    /** Le stockage et l'utilisateur viennent du serveur : chaque opération est bornée aux notifications de cet utilisateur. */
+    /** 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, 'Non authentifié.');
+            throw new WireError(401, 'Unauthenticated.');
         return { store, user: user.id, interval: panel.getDatabaseNotificationsPollingInterval() };
     }
     refresh() { }
@@ -232,7 +231,7 @@ export class DatabaseNotifications extends Component {
         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"';
-        // La fenêtre porte `autofocus` : le piège de focus s'y pose, et non sur « Mark all as read » qu'Entrée déclencherait aussitôt.
+        // 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)";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@navette-js/panels",
-  "version": "1.0.0-beta.1",
-  "description": "Admin panels for Node.js: a port of Filament (resources, pages, navigation, authentication, tenancy).",
+  "version": "1.0.0-beta.3",
+  "description": "Admin panels for Node.js: resources, pages, navigation, authentication, tenancy.",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -36,7 +36,6 @@
   },
   "keywords": [
     "navette",
-    "filament",
     "admin",
     "panel",
     "livewire",
@@ -44,14 +43,14 @@
     "node"
   ],
   "dependencies": {
-    "@navette-js/support": "1.0.0-beta.1",
-    "@navette-js/schemas": "1.0.0-beta.1",
-    "@navette-js/forms": "1.0.0-beta.1",
-    "@navette-js/actions": "1.0.0-beta.1",
-    "@navette-js/wire": "1.0.0-beta.1",
-    "@navette-js/tables": "1.0.0-beta.1",
-    "@navette-js/infolists": "1.0.0-beta.1",
-    "@navette-js/database": "1.0.0-beta.1",
+    "@navette-js/support": "1.0.0-beta.3",
+    "@navette-js/schemas": "1.0.0-beta.3",
+    "@navette-js/forms": "1.0.0-beta.3",
+    "@navette-js/actions": "1.0.0-beta.3",
+    "@navette-js/wire": "1.0.0-beta.3",
+    "@navette-js/tables": "1.0.0-beta.3",
+    "@navette-js/infolists": "1.0.0-beta.3",
+    "@navette-js/database": "1.0.0-beta.3",
     "express": "^5.1.0"
   },
   "publishConfig": {

package/theme.css

@@ -1,8 +1,8 @@
-/* Thème de base de Navette : le thème de FilamentPHP (MIT), compilé par Tailwind avec les sources de l'application.
-   Une application l'importe depuis sa propre feuille de thème, puis déclare ses sources avec `@source`. */
+/* Navette's base theme (MIT-licensed sources under resources/), compiled by Tailwind with the application's sources.
+   An application imports it from its own theme stylesheet, then declares its sources with `@source`. */
 @import './resources/filament/packages/panels/resources/css/theme.css';
 
-/* Classes utilitaires écrites dans les vues et le code de Navette lui-même. */
+/* Utility classes used in Navette's own views and code. */
 @source './views/**/*.ejs';
 @source './src/**/*.ts';
 @source '../forms/src/**/*.ts';

package/views/components/logo.ejs

@@ -1,4 +1,4 @@
-<%# Logo ou nom de marque — port de filament-panels::components.logo %>
+<%# Brand logo or brand name %>
 <% if (brand.logo) { %>
     <img alt="<%= t('filament-panels::layout.logo.alt', { name: brand.name }) %>" src="<%= brand.logo %>" style="height: <%- brand.height %>;" class="<%- brand.darkLogo ? 'fi-logo fi-logo-light' : 'fi-logo' %>" />
     <% if (brand.darkLogo) { %>

package/views/components/tenant-menu.ejs

@@ -1,4 +1,4 @@
-<%# Menu du locataire — port de filament-panels::components.tenant-menu (sans recherche au-delà de dix locataires : voir README) %>
+<%# Tenant menu (no search, even beyond ten tenants) %>
 <%- renderHook('panels::tenant-menu.before') %>
 <div x-data="filamentDropdown({ isMenu: true })" class="fi-dropdown fi-tenant-menu" ><div x-on:mousedown="if ($event.button === 0) toggle($event)" class="fi-dropdown-trigger" ><button<% if (isSidebarCollapsibleOnDesktop) { %> x-data="{ tooltip: false }" x-effect="
                     tooltip = $store.sidebar.isOpen

package/views/components/user-menu.ejs

@@ -1,4 +1,4 @@
-<%# Menu utilisateur (sidebar ou barre du haut) — port de filament-panels::components.user-menu, theme-switcher et dropdown %>
+<%# User menu (sidebar or topbar), with the theme switcher %>
 <% const topbar = locals.position === 'topbar'; const collapsible = locals.isSidebarCollapsibleOnDesktop === true; const before = locals.itemsBefore ?? []; const after = locals.itemsAfter ?? []; %>
 <%- renderHook('panels::user-menu.before') %>
 <div x-data="filamentDropdown({ isMenu: true })" class="fi-dropdown fi-user-menu">
@@ -51,7 +51,7 @@
         </div>
 
         <% if (locals.themes && themes.length > 1) { %>
-            <%# Écart assumé avec Filament : choix d'un thème prédéfini du panel (Panel.themes()). %>
+            <%# Choice of one of the panel's predefined themes (Panel.themes()). %>
             <div role="group" aria-label="Theme" class="fi-dropdown-list nv-theme-list">
                 <% for (const theme of themes) { %>
                     <button role="menuitemradio" aria-checked="<%= theme.id === activeTheme ? 'true' : 'false' %>" tabindex="-1" type="button" wire:click="setTheme(<%= js(theme.id) %>)" data-theme="<%= theme.id %>" class="<%- cls(['fi-dropdown-list-item', theme.id === activeTheme && 'fi-active']) %>">

package/views/layout/base.ejs

@@ -1,4 +1,4 @@
-<%# Document HTML d'un panel — port de filament-panels::components.layout.base %>
+<%# Panel HTML document %>
 <!DOCTYPE html>
 <html lang="en" dir="ltr" class="fi">
     <head>
@@ -44,7 +44,7 @@
 
         <%- colorVariables %>
 
-        <%# Thème compilé par l'application s'il existe, sinon la feuille par défaut de Filament %>
+        <%# The application's compiled theme if any, otherwise the default stylesheet %>
         <link rel="stylesheet" href="<%- locals.theme ? theme : assetUrl('css/filament/filament/app.css') %>" data-navigate-track="reload" />
 
         <% if (font.url) { %>

package/views/layout/index.ejs

@@ -1,4 +1,4 @@
-<%# Mise en page d'un panel — port de filament-panels::components.layout.index %>
+<%# Full panel layout %>
 <% const collapsible = isSidebarCollapsibleOnDesktop || isSidebarFullyCollapsibleOnDesktop; %>
 <a x-data="{}" x-bind:inert="$store.sidebar.isOpenMobile" href="#fi-main-content" class="fi-skip-link fi-sr-only">
     <%= t('filament-panels::layout.skip_to_content.label') %>

package/views/layout/simple.ejs

@@ -1,4 +1,4 @@
-<%# Mise en page « simple » — port de filament-panels::components.layout.simple %>
+<%# Simple layout (login, registration…) %>
 <div class="fi-simple-layout">
 <% if (locals.header) { %>
     <a href="#fi-main-content" class="fi-skip-link fi-sr-only">

package/views/livewire/sidebar.ejs

@@ -1,4 +1,4 @@
-<%# Sidebar — port de filament-panels::livewire.sidebar, components.sidebar.group et components.sidebar.item %>
+<%# Sidebar: navigation groups and items %>
 <% const collapsible = isSidebarCollapsibleOnDesktop || isSidebarFullyCollapsibleOnDesktop; %>
 <div>
     <div x-data="filamentSidebar({
@@ -113,7 +113,7 @@
             <%- userMenu ?? '' %>
         </div>
 <% } %>
-        <%# Comme Filament : après le pied de sidebar, pas dedans. %>
+        <%# Rendered after the sidebar footer, not inside it. %>
         <%- renderHook('panels::sidebar.footer') %>
     </div>
 

package/views/livewire/topbar.ejs

@@ -1,4 +1,4 @@
-<%# Barre du haut — port de filament-panels::livewire.topbar et components.topbar.item %>
+<%# Topbar and its navigation items %>
 <div x-data="filamentSidebarBackground" x-bind:inert="$store.sidebar.isOpenMobile && ! hasOpenModal" class="fi-topbar-ctn" ><nav aria-label="<%= t('filament-panels::layout.topbar.label') %>" class="fi-topbar" >
 <%- renderHook('panels::topbar.start') %>
 <% if (hasNavigation) { %>

package/views/pages/page.ejs

@@ -1,11 +1,11 @@
-<%# Page d'un panel — port de filament-panels::components.page.index, components.header.index et filament::components.breadcrumbs %>
+<%# Panel page: header, breadcrumbs, sub-navigation and content %>
 <% const beforeHeaderActions = renderHook('panels::page.header.actions.before', renderHookScopes), afterHeaderActions = renderHook('panels::page.header.actions.after', renderHookScopes); %>
 <% const subNavigation = locals.subNavigation ?? []; const activeSubItem = subNavigation.find((item) => item.active) ?? subNavigation[0]; const subNavigationPosition = locals.subNavigationPosition ?? 'top'; %>
 <div class="<%- cls(['fi-page', subNavigation.length ? `fi-page-has-sub-navigation fi-page-has-sub-navigation-${subNavigationPosition}` : null, ...(locals.pageClasses ?? [])]) %>">
     <%- renderHook('panels::page.start', renderHookScopes) %>
     <div class="fi-page-header-main-ctn">
         <% if (subNavigation.length) { %>
-            <%# Sous-navigation : menu déroulant sur mobile ; sur grand écran, onglets (top) ou colonne (start, end) %>
+            <%# Sub-navigation: a dropdown on mobile; on desktop, tabs (top) or a column (start, end) %>
             <div class="fi-page-main-sub-navigation-mobile-menu-render-hook-ctn"><%- renderHook('panels::page.sub-navigation.module-menu.before', renderHookScopes) %></div>
             <div x-data="filamentDropdown({ isMenu: true })" class="fi-dropdown fi-page-sub-navigation-dropdown">
                 <div x-on:mousedown="if ($event.button === 0) toggle($event)" class="fi-dropdown-trigger">
@@ -54,7 +54,7 @@
                 <%- renderHook('panels::page.header.heading.after', renderHookScopes) %>
             </div>
 
-            <%# Comme Filament : le conteneur existe dès qu'il y a une action ou qu'un des deux emplacements rend quelque chose. %>
+            <%# The container exists as soon as there is an action or either render hook outputs something. %>
             <% if (headerActions.length || (beforeHeaderActions + afterHeaderActions).trim() !== '') { %>
                 <div class="fi-header-actions-ctn">
                     <%- beforeHeaderActions %>

package/views/pages/simple.ejs

@@ -1,4 +1,4 @@
-<%# Page « simple » — port de filament-panels::components.page.simple + header.simple + logo %>
+<%# Simple page: logo, header and content %>
 <div class="fi-simple-page">
     <%- renderHook('panels::simple-page.start', renderHookScopes) %>
     <div class="fi-simple-page-content">