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

package/README.md

@@ -2,7 +2,7 @@
 
 Shared utilities, colors, icons, views and translations for Navette.
 
-Part of [Navette](https://github.com/NavetteJS/navette), a Node.js port of [Filament](https://filamentphp.com). Install the whole framework with `npm install @navette-js/panels`.
+Part of [Navette](https://github.com/NavetteJS/navette), admin panels for Node.js. Start a project with `npm create navette@latest`, or install the framework with `npm install @navette-js/panels`.
 
 **Beta:** the API may still change between beta releases.
 

package/THIRD-PARTY-NOTICES.md

@@ -1,10 +1,10 @@
 # Third-party notices
 
-Navette is an independent Node.js port of Filament. It is not affiliated with or endorsed by the Filament, Livewire or Heroicons projects. It reuses the following works, each under its own license; the full license texts ship next to the files they cover.
+Navette is an independent project, not affiliated with or endorsed by the Filament, Livewire or Heroicons projects. It reuses the following works, each under its own license; the full license texts ship next to the files they cover.
 
 | Work | Used for | License | License file |
 |---|---|---|---|
-| [Filament](https://github.com/filamentphp/filament) © Filament | HTML markup ported from its Blade views, compiled CSS and JavaScript (`@navette-js/panels/dist/filament`), English translations (`@navette-js/support/data`) | MIT | `packages/panels/dist/FILAMENT-LICENSE.md` |
+| [Filament](https://github.com/filamentphp/filament) © Filament | HTML markup derived from its Blade views, compiled CSS and JavaScript (`@navette-js/panels/dist/filament`), English translations (`@navette-js/support/data`) | MIT | `packages/panels/dist/FILAMENT-LICENSE.md` |
 | [Livewire](https://github.com/livewire/livewire) © Caleb Porzio | Client script `livewire.js` (`@navette-js/wire/vendor`); the server runtime follows its protocol | MIT | `packages/wire/vendor/LIVEWIRE-LICENSE.md` |
 | [Heroicons](https://github.com/tailwindlabs/heroicons) | SVG icons (`@navette-js/support/icons`) | MIT | `packages/support/icons/HEROICONS-LICENSE.md` |
 | [Inter](https://github.com/rsms/inter) © The Inter Project Authors | Default font files (`@navette-js/panels/dist/filament/fonts`) | SIL Open Font License 1.1 | `packages/panels/dist/filament/fonts/INTER-LICENSE.txt` |

package/lib/i18n.d.ts

@@ -1,8 +1,8 @@
 export declare const setLocale: (locale: string) => void;
 export declare const getLocale: () => string;
-/** `t('filament-panels::auth/pages/login.form.email.label')` */
+/** Translates a key such as `t('filament-panels::auth/pages/login.form.email.label')`; returns the key when it is missing. */
 export declare function t(key: string, params?: Record<string, string | number>, locale?: string): string;
-/** Durée relative au passé, à la manière de Carbon::diffForHumans() en anglais : « 2 months ago ». Les dates sans fuseau sont lues en UTC. */
+/** Relative past duration in English, e.g. "2 months ago". Dates without a time zone are read as UTC. */
 export declare function diffForHumans(value: string | Date | null | undefined, now?: Date): string | null;
-/** Pluriels Laravel (`trans_choice`) : `{0} …|{1} …|[2,*] …` ou `singulier|pluriel`. `:count` est toujours disponible. */
+/** Pluralized translation: `{0} …|{1} …|[2,*] …` or `singular|plural`. `:count` is always available. */
 export declare function tc(key: string, count: number, params?: Record<string, string | number>, locale?: string): string;

package/lib/i18n.js

@@ -1,4 +1,4 @@
-// Traductions compatibles Laravel : `espace::groupe.clé`, paramètres `:nom`, repli sur l'anglais.
+// Translations: `namespace::group.key` keys, `:name` placeholders, English fallback.
 import { readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 const bundle = JSON.parse(readFileSync(fileURLToPath(new URL('../data/lang.en-fr.json', import.meta.url)), 'utf8'));
@@ -9,7 +9,7 @@ const NAMESPACES = {
 let currentLocale = 'en';
 export const setLocale = (locale) => { currentLocale = locale; };
 export const getLocale = () => currentLocale;
-/** `t('filament-panels::auth/pages/login.form.email.label')` */
+/** Translates a key such as `t('filament-panels::auth/pages/login.form.email.label')`; returns the key when it is missing. */
 export function t(key, params = {}, locale = currentLocale) {
     const [ns, rest] = key.split('::');
     const dot = rest.indexOf('.');
@@ -21,7 +21,7 @@ export function t(key, params = {}, locale = currentLocale) {
     }
     return value;
 }
-/** Durée relative au passé, à la manière de Carbon::diffForHumans() en anglais : « 2 months ago ». Les dates sans fuseau sont lues en UTC. */
+/** Relative past duration in English, e.g. "2 months ago". Dates without a time zone are read as UTC. */
 export function diffForHumans(value, now = new Date()) {
     if (value === null || value === undefined || value === '')
         return null;
@@ -39,7 +39,7 @@ export function diffForHumans(value, now = new Date()) {
     const days = Math.floor(seconds / 86400);
     if (days < 7)
         return unit(days, 'day');
-    // Mois calendaires entiers écoulés, comme Carbon.
+    // Whole calendar months elapsed, not 30-day blocks.
     let months = (now.getUTCFullYear() - date.getUTCFullYear()) * 12 + now.getUTCMonth() - date.getUTCMonth();
     if (now.getUTCDate() < date.getUTCDate() || (now.getUTCDate() === date.getUTCDate() && now.getTime() % 86400000 < date.getTime() % 86400000))
         months--;
@@ -49,7 +49,7 @@ export function diffForHumans(value, now = new Date()) {
         return unit(months, 'month');
     return unit(Math.floor(months / 12), 'year');
 }
-/** Pluriels Laravel (`trans_choice`) : `{0} …|{1} …|[2,*] …` ou `singulier|pluriel`. `:count` est toujours disponible. */
+/** Pluralized translation: `{0} …|{1} …|[2,*] …` or `singular|plural`. `:count` is always available. */
 export function tc(key, count, params = {}, locale = currentLocale) {
     const segments = t(key, {}, locale).split('|');
     let chosen = null;

package/lib/index.d.ts

@@ -1,12 +1,13 @@
+/** Escapes `&`, `<`, `>`, `"` and `'` for HTML. */
 export declare function e(value: unknown): string;
-/** Chaîne HTML sûre : n'est pas ré-échappée par les vues. */
+/** Trusted HTML string: views do not escape it again. */
 export declare class HtmlString {
     html: string;
     constructor(html: string);
     toString(): string;
 }
 export declare const raw: (html: string) => HtmlString;
-/** Sérialise une valeur en expression JavaScript, au même format que `Js::from()` de Laravel. */
+/** Serializes a value into a JavaScript expression that is safe to embed in HTML. */
 export declare function js(value: unknown): string;
 export type ClassList = (string | false | null | undefined | Record<string, unknown>)[] | Record<string, unknown>;
 export declare function cls(list: ClassList): string;
@@ -16,20 +17,20 @@ export declare class Attributes {
     constructor(initial?: Record<string, AttrValue>);
     get(key: string): AttrValue;
     has(key: string): boolean;
-    /** Port de merge() : les valeurs par défaut passent en premier, puis les attributs existants ; null/false sont ignorés. */
+    /** Defaults come first, then existing attributes (`class` and `style` are concatenated); null/false defaults are skipped. */
     merge(defaults: Record<string, AttrValue>): Attributes;
-    /** Ajoute (ou remplace) un attribut en fin de liste. */
+    /** Adds (or replaces) an attribute at the end. */
     set(key: string, value: AttrValue): Attributes;
     private clone;
-    /** Port de class() : les classes s'ajoutent après les classes existantes ; l'attribut garde sa place, ou va en fin. */
+    /** Appends classes after the existing ones; the attribute keeps its position, or goes last. */
     class(list: ClassList): Attributes;
     style(list: (string | false | null | undefined)[]): Attributes;
     when(condition: unknown, fn: (a: Attributes) => Attributes): Attributes;
-    /** Grille conteneur : port de ComponentAttributeBag::grid(). */
+    /** Grid container: `fi-grid` classes and `--cols-*` variables per breakpoint. */
     grid(columns?: Record<string, number> | number | null): Attributes;
-    /** Colonne de grille : port de ComponentAttributeBag::gridColumn(). */
+    /** Grid column: `fi-grid-col` classes and `--col-span-*` variables per breakpoint. */
     gridColumn(span?: Record<string, number | string> | number | string | null, isHidden?: boolean): Attributes;
-    /** Rendu `clé="valeur"` ; `true` devient `clé="clé"` (ou `""` pour x-data et wire:*), comme dans Laravel. Les valeurs ne sont pas ré-échappées. */
+    /** Renders `key="value"` pairs; `true` becomes `key="key"` (or `""` for x-data and wire:*). Values are not escaped again, except `"`. */
     toHtml(): string;
     toString(): string;
 }
@@ -39,39 +40,39 @@ export declare function evaluate<T, C>(value: Lazy<T, C>, ctx: C): Promise<T>;
 export type Palette = Record<number, string>;
 export declare const Color: Record<string, Palette>;
 export declare const WCAG_AA_TEXT = 4.5;
-/** Port de Color::convertToOklch : `#rrggbb`, `rgb(r, g, b)` ou `r, g, b` → `oklch(L C h)`, arrondi à trois décimales. */
+/** Converts `#rrggbb`, `rgb(r, g, b)` or `r, g, b` to `oklch(L C h)`, rounded to three decimals. */
 export declare function convertToOklch(color: string): string;
-/** Port de Color::generatePalette (`Color::hex()`, `Color::rgb()`) : onze nuances à partir d'une seule couleur, dont on garde la teinte. */
+/** Builds an eleven-shade palette from a single color, keeping its hue. */
 export declare function generatePalette(color: string): Palette;
-/** Une palette toute faite, ou une couleur (`#6366f1`, `rgb(…)`) dont la palette est générée. */
+/** A ready-made palette, or a color (`#6366f1`, `rgb(…)`) from which a palette is generated. */
 export type ColorInput = Palette | string;
 export declare function convertToRgb(color: string): [number, number, number];
-/** Rapport de contraste de Filament : luminance approchée par un gamma 2,2 (reproduit tel quel, ce n'est pas la formule WCAG exacte). */
+/** Contrast ratio with luminance approximated by a 2.2 gamma (intentionally not the exact WCAG formula; shade choices depend on it). */
 export declare function calculateContrastRatio(c1: string, c2: string): number;
 export declare function isLight(color: string): boolean;
-/** Port de ButtonComponentColorMap : choisit les nuances de fond et de texte accessibles d'un bouton plein. */
+/** Picks accessible background and text shades for a filled button. */
 export declare function buttonColorMap(palette: Palette, minRatio?: number): Record<string, number>;
-/** Port de Color::findShade : première nuance de la palette assez contrastée sur une surface. */
+/** First shade of the palette with enough contrast against a surface. */
 export declare function findShade(palette: Palette, surface: string, options?: {
     minRatio?: number;
     maxShade?: number;
     minShade?: number;
     fromDarkest?: boolean;
 }): number | null;
-/** Cartes de couleurs des composants à texte coloré (BadgeComponent, LinkComponent). */
+/** Color map of badges. */
 export declare function badgeColorMap(palette: Palette, gray: Palette): Record<string, number>;
-/** Port de DropdownComponent\ItemComponent::getColorMap. */
+/** Color map of dropdown items. */
 export declare function dropdownItemColorMap(palette: Palette, gray: Palette): Record<string, number>;
-/** Port de IconColumnComponent\IconComponent::getColorMap (contraste non textuel, 3:1). */
+/** Color map of icon columns (non-text contrast, 3:1). */
 export declare function iconColumnColorMap(palette: Palette, gray: Palette): Record<string, number>;
-/** Port de IconButtonComponentColorMap (contraste non textuel 3:1, surfaces gray-50 / gray-700). */
+/** Color map of icon buttons (non-text contrast 3:1 on gray-50 / gray-700). */
 export declare function iconButtonColorMap(palette: Palette, gray: Palette): Record<string, number>;
-/** Port de ToggleComponent::getColorMap (contraste non textuel 3:1). */
+/** Color map of toggles (non-text contrast, 3:1). */
 export declare function toggleColorMap(palette: Palette, gray: Palette): Record<string, number>;
 export declare function linkColorMap(palette: Palette, gray: Palette): Record<string, number>;
-/** Bouton à contour : seule la couleur du texte dépend de la palette (ButtonComponent, `isOutlined`). */
+/** Outlined button: only the text color depends on the palette. */
 export declare function outlinedButtonColorMap(palette: Palette, gray: Palette): Record<string, number>;
-/** Carte de couleurs de chaque composant coloré (équivalent des classes `*Component::getColorMap`). */
+/** Color map of each colored component. */
 declare const COMPONENT_COLOR_MAPS: {
     button: (palette: Palette) => Record<string, number>;
     'button-outlined': typeof outlinedButtonColorMap;
@@ -92,73 +93,73 @@ declare const COMPONENT_COLOR_MAPS: {
     };
 };
 export type ColoredComponent = keyof typeof COMPONENT_COLOR_MAPS;
-/** Port de ColorManager. */
+/** Registers named palettes and computes the color classes of components. */
 export declare class ColorManager {
     static DEFAULT_COLORS: Record<string, Palette>;
     private colors;
     private cache;
-    /** Couleurs propres à la requête en cours (thème choisi par l'utilisateur) : elles priment sur celles du panel. */
+    /** Per-request colors (theme picked by the user); they take precedence over the panel's colors. */
     private scope;
     register(colors: Record<string, ColorInput>): this;
-    /** Exécute `fn` avec des couleurs qui ne valent que pour cette requête ; `key` identifie le jeu de couleurs (cache). */
+    /** Runs `fn` with colors that only apply to this request; `key` identifies the color set for caching. */
     runWith<T>(key: string, colors: Record<string, ColorInput>, fn: () => T): T;
     getColors(): Record<string, Palette>;
     getColor(name: string): Palette | undefined;
-    /** Classes d'un composant coloré (`getComponentClasses`). Seul le bouton plein est porté pour l'instant. */
+    /** Color classes of a colored component. */
     getComponentClasses(component: ColoredComponent, color: string | null): string[];
-    /** Bloc `<style>` des variables `--<couleur>-<nuance>` injecté dans `<head>`. */
+    /** `<style>` block defining the `--<color>-<shade>` variables, injected into `<head>`. */
     renderCssVariables(): string;
 }
-/** Icône Heroicons (`m-eye`, `o-user`, `s-…`, `c-…`) avec les classes `fi-icon fi-size-<taille>`. */
+/** Heroicons icon (`m-eye`, `o-user`, `s-…`, `c-…`) with the `fi-icon fi-size-<size>` classes. */
 export declare function icon(name: string, options?: {
     size?: string;
     attributes?: Attributes;
 }): string;
-/** Déclare une icône hors Heroicons (logo de marque, pictogramme maison) : un `<svg>` complet, fourni par l'application et non par l'utilisateur. */
+/** Registers a non-Heroicons icon (brand logo, custom glyph): a full `<svg>` supplied by the application, never by end users (it is not sanitized). */
 export declare function registerIcon(name: string, svg: string): void;
-/** Indicateur de chargement (`generate_loading_indicator_html`). */
+/** Loading spinner SVG. */
 export declare function loadingIndicator(attributes?: Attributes, size?: string): string;
-/** Registre de vues : `filament-forms::components.text-input` → fichier EJS ; les dossiers de surcharge passent en premier. */
+/** View registry: `filament-forms::components.text-input` resolves to an EJS file; override directories are checked first. */
 export declare class ViewRegistry {
     private namespaces;
     private overrides;
     private compiled;
     private shared;
     namespace(name: string, dir: string): this;
-    /** Dossier de surcharge de l'application : `<dir>/<espace>/<chemin>.ejs` remplace la vue du paquet. */
+    /** Application override directory: `<dir>/<namespace>/<path>.ejs` replaces the package view. */
     overrideFrom(dir: string): this;
     share(data: Record<string, unknown>): this;
     resolve(view: string): string;
     render(view: string, data?: Record<string, unknown>): string;
 }
 export declare const views: ViewRegistry;
-/** Enregistre un réglage appliqué à chaque instance de la classe (et de ses sous-classes) créée ensuite par `make()`. */
+/** Registers a callback applied to every instance of the class (and its subclasses) created afterwards by `make()`. */
 export declare function configureUsing<T>(cls: abstract new (...args: any[]) => T, configure: (instance: T) => void): void;
-/** Applique les réglages globaux à une instance fraîchement créée, de la classe la plus générale à la plus précise. */
+/** Applies the global callbacks to a new instance, from the most general class to the most specific. */
 export declare function configured<T extends object>(instance: T): T;
-/** Oublie tous les réglages globaux (tests). */
+/** Forgets all global callbacks (for tests). */
 export declare function resetConfigurators(): void;
-/** Ce qu'un render hook reçoit : les portées de l'appel (page, resource…) et les données de l'emplacement (`action`, `column`…). */
+/** What a render hook receives: the call's scopes (page, resource…) and the slot's data (`action`, `column`…). */
 export type RenderHookContext = {
     scopes: unknown[];
     data: Record<string, any>;
 };
 export type RenderHookCallback = (context: RenderHookContext) => string | null | undefined;
-/** Registre de render hooks. Un hook sans portée est rendu partout ; avec portées, seulement quand l'appel porte l'une d'elles. */
+/** Render hook registry. Unscoped hooks render everywhere; scoped hooks only when the call carries one of their scopes. */
 export declare class RenderHookRegistry {
     private hooks;
     register(name: string, hook: RenderHookCallback, scopes?: unknown | unknown[] | null): this;
-    /** Hooks à rendre pour cet appel, dans l'ordre de Filament : sans portée d'abord, puis portée par portée, chacun une seule fois. */
+    /** Hooks to render for a call: unscoped first, then scope by scope, each hook once. */
     collect(name: string, scopes: unknown[]): RenderHookCallback[];
     has(name: string, scopes?: unknown | unknown[] | null): boolean;
     render(name: string, scopes?: unknown | unknown[] | null, data?: Record<string, any>): string;
     clear(): void;
 }
-/** Hooks communs à tout le processus (tous les panels). */
+/** Process-wide hooks (all panels). */
 export declare const renderHooks: RenderHookRegistry;
-/** Exécute un rendu avec, en plus des hooks communs, ceux d'un registre propre (celui du panel de la requête). */
+/** Renders with an extra registry (the request panel's) on top of the process-wide hooks. */
 export declare function runWithRenderHooks<T>(registry: RenderHookRegistry, fn: () => T): T;
-/** Rend un emplacement : hooks communs, puis hooks du panel en cours. */
+/** Renders a slot: process-wide hooks, then the current panel's hooks. */
 export declare function renderHook(name: string, scopes?: unknown | unknown[] | null, data?: Record<string, any>): string;
 export declare function hasRenderHook(name: string, scopes?: unknown | unknown[] | null): boolean;
 export {};

package/lib/index.js

@@ -1,23 +1,24 @@
 import { AsyncLocalStorage } from 'node:async_hooks';
-// @navette-js/support — briques transverses portées de filament/support : échappement, sac d'attributs, sérialisation JS,
-// évaluation paresseuse, couleurs, icônes, vues EJS à espaces de noms.
+// @navette-js/support — shared building blocks: escaping, attribute bags, JS serialization, lazy evaluation, colors, icons,
+// namespaced EJS views.
 import ejs from 'ejs';
 import { existsSync, readFileSync } from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-// ------------------------------------------------------------------ échappement (équivalent de e() / htmlspecialchars)
+// ------------------------------------------------------------------ escaping
+/** Escapes `&`, `<`, `>`, `"` and `'` for HTML. */
 export function e(value) {
     return String(value ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
 }
-/** Chaîne HTML sûre : n'est pas ré-échappée par les vues. */
+/** Trusted HTML string: views do not escape it again. */
 export class HtmlString {
     html;
     constructor(html) { this.html = html; }
     toString() { return this.html; }
 }
 export const raw = (html) => new HtmlString(html);
-// ------------------------------------------------------------------ Js::from (Illuminate\Support\Js)
-// Chaîne JS entre apostrophes, comme json_encode(JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT) de PHP.
+// ------------------------------------------------------------------ JS serialization
+// Quotes, `<`, `>` and `&` are written as `\uXXXX` so the output is safe inside HTML attributes and `<script>`.
 const BS = String.fromCharCode(92);
 const HEX = { '"': 'u0022', "'": 'u0027', '<': 'u003C', '>': 'u003E', '&': 'u0026', '/': '/' };
 function phpString(value) {
@@ -34,10 +35,7 @@ function phpString(value) {
     }
     return out;
 }
-/**
- * `json_encode($value, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT)` : dans les chaînes, `'`, `"`, `<`, `>` et `&`
- * sont écrits en `\uXXXX` (les guillemets de structure restent tels quels), et `/` est échappé.
- */
+/** JSON where `'`, `"`, `<`, `>` and `&` inside strings become `\uXXXX` (structural quotes are kept) and `/` is escaped. */
 function phpJson(value) {
     const json = JSON.stringify(value);
     const HEX = { "'": BS + 'u0027', '<': BS + 'u003C', '>': BS + 'u003E', '&': BS + 'u0026', '/': BS + '/' };
@@ -53,7 +51,7 @@ function phpJson(value) {
     }
     return out;
 }
-/** Sérialise une valeur en expression JavaScript, au même format que `Js::from()` de Laravel. */
+/** Serializes a value into a JavaScript expression that is safe to embed in HTML. */
 export function js(value) {
     if (value === null || value === undefined)
         return 'null';
@@ -84,7 +82,7 @@ export class Attributes {
         this.map.set(k, v); }
     get(key) { return this.map.get(key); }
     has(key) { return this.map.has(key); }
-    /** Port de merge() : les valeurs par défaut passent en premier, puis les attributs existants ; null/false sont ignorés. */
+    /** Defaults come first, then existing attributes (`class` and `style` are concatenated); null/false defaults are skipped. */
     merge(defaults) {
         const out = new Attributes();
         for (const [k, v] of Object.entries(defaults)) {
@@ -99,11 +97,11 @@ export class Attributes {
         }
         return out;
     }
-    /** Ajoute (ou remplace) un attribut en fin de liste. */
+    /** Adds (or replaces) an attribute at the end. */
     set(key, value) { const out = this.clone(); out.map.delete(key); out.map.set(key, value); return out; }
     clone() { const out = new Attributes(); for (const [k, v] of this.map)
         out.map.set(k, v); return out; }
-    /** Port de class() : les classes s'ajoutent après les classes existantes ; l'attribut garde sa place, ou va en fin. */
+    /** Appends classes after the existing ones; the attribute keeps its position, or goes last. */
     class(list) {
         const out = this.clone();
         out.map.set('class', [out.map.get('class'), cls(list)].filter((x) => x !== '' && x != null).join(' '));
@@ -119,7 +117,7 @@ export class Attributes {
         return out;
     }
     when(condition, fn) { return condition ? fn(this) : this; }
-    /** Grille conteneur : port de ComponentAttributeBag::grid(). */
+    /** Grid container: `fi-grid` classes and `--cols-*` variables per breakpoint. */
     grid(columns = {}) {
         const cols = typeof columns === 'number' ? { lg: columns } : { ...(columns ?? {}) };
         for (const k of Object.keys(cols))
@@ -131,7 +129,7 @@ export class Attributes {
             .class(['fi-grid', ...Object.keys(cols).map((bp) => (bp === 'default' ? (cols[bp] > 1 ? 'fi-grid-cols' : '') : `${bp}:fi-grid-cols`))])
             .style(Object.entries(cols).map(([bp, n]) => `--cols-${v(bp)}: repeat(${n}, minmax(0, 1fr))`));
     }
-    /** Colonne de grille : port de ComponentAttributeBag::gridColumn(). */
+    /** Grid column: `fi-grid-col` classes and `--col-span-*` variables per breakpoint. */
     gridColumn(span = {}, isHidden = false) {
         const s = span !== null && typeof span === 'object' ? { ...span } : span ? { lg: span } : {};
         for (const k of Object.keys(s))
@@ -142,7 +140,7 @@ export class Attributes {
             .class(['fi-grid-col', { 'fi-hidden': isHidden || s.default === 'hidden' }, ...Object.keys(s).map((bp) => (bp === 'default' ? '' : `${bp}:fi-grid-col-span`))])
             .style(Object.entries(s).map(([bp, n]) => `--col-span-${v(bp)}: ${n === 'full' ? '1 / -1' : `span ${n} / span ${n}`}`));
     }
-    /** Rendu `clé="valeur"` ; `true` devient `clé="clé"` (ou `""` pour x-data et wire:*), comme dans Laravel. Les valeurs ne sont pas ré-échappées. */
+    /** Renders `key="value"` pairs; `true` becomes `key="key"` (or `""` for x-data and wire:*). Values are not escaped again, except `"`. */
     toHtml() {
         const parts = [];
         for (const [k, v] of this.map) {
@@ -159,11 +157,11 @@ export const attrs = (initial = {}) => new Attributes(initial);
 export async function evaluate(value, ctx) {
     return typeof value === 'function' ? await value(ctx) : value;
 }
-// ------------------------------------------------------------------ couleurs (Filament\Support\Colors)
+// ------------------------------------------------------------------ colors
 const here = (p) => fileURLToPath(new URL(p, import.meta.url));
 export const Color = JSON.parse(readFileSync(here('../data/palettes.json'), 'utf8'));
 export const WCAG_AA_TEXT = 4.5;
-/** Port de Color::convertToOklch : `#rrggbb`, `rgb(r, g, b)` ou `r, g, b` → `oklch(L C h)`, arrondi à trois décimales. */
+/** Converts `#rrggbb`, `rgb(r, g, b)` or `r, g, b` to `oklch(L C h)`, rounded to three decimals. */
 export function convertToOklch(color) {
     if (color.startsWith('oklch('))
         return color;
@@ -173,7 +171,7 @@ export function convertToOklch(color) {
         return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
     });
     if (![r, g, b].every(Number.isFinite))
-        throw new Error(`Couleur non prise en charge : ${color}`);
+        throw new Error(`Unsupported color: ${color}`);
     const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b), m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b), s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
     const lightness = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
     const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s, bb = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
@@ -183,14 +181,14 @@ export function convertToOklch(color) {
     const round = (n) => String(Math.round(n * 1000) / 1000);
     return `oklch(${round(lightness)} ${round(Math.sqrt(a * a + bb * bb))} ${round(hue)})`;
 }
-/** Clarté et saturation de chaque nuance d'une palette générée (constantes de Color::generatePalette). */
+/** Lightness and chroma of each shade of a generated palette. */
 const GENERATED_SHADES = [
     [50, '0.97717647058824', '0.01395454545455'], [100, '0.95035294117647', '0.03272727272727'], [200, '0.90547058823529', '0.06318181818182'],
     [300, '0.84047058823529', '0.10604545454546'], [400, '0.75352941176471', '0.15027272727273'], [500, '0.68270588235294', '0.17009090909091'],
     [600, '0.59782352941176', '0.16913636363636'], [700, '0.51494117647059', '0.14940909090909'], [800, '0.44611764705882', '0.12331818181818'],
     [900, '0.39458823529412', '0.09963636363636'], [950, '0.27788235294118', '0.07136363636364'],
 ];
-/** Port de Color::generatePalette (`Color::hex()`, `Color::rgb()`) : onze nuances à partir d'une seule couleur, dont on garde la teinte. */
+/** Builds an eleven-shade palette from a single color, keeping its hue. */
 export function generatePalette(color) {
     const [, , chroma, hue] = /^oklch\(([\d.]+) ([\d.]+) ([\d.]+)\)$/.exec(convertToOklch(color)).map(Number);
     const achromatic = chroma < 0.03;
@@ -207,14 +205,14 @@ export function convertToRgb(color) {
     }
     const m = /^oklch\(([\d.]+)\s+([\d.]+)(?:\s+([\d.]+))?\)/.exec(color);
     if (!m)
-        throw new Error(`Couleur non prise en charge : ${color}`);
+        throw new Error(`Unsupported color: ${color}`);
     const L = +m[1], C = +m[2], h = ((+m[3] || 0) * Math.PI) / 180;
     const a = C * Math.cos(h), b = C * Math.sin(h);
     const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3, md = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3, s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
     const lin = [4.0767416621 * l - 3.3077115913 * md + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * md - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * md + 1.707614701 * s];
     return lin.map((x) => Math.max(0, Math.min(255, Math.round((x <= 0.0031308 ? 12.92 * x : 1.055 * x ** (1 / 2.4) - 0.055) * 255))));
 }
-/** Rapport de contraste de Filament : luminance approchée par un gamma 2,2 (reproduit tel quel, ce n'est pas la formule WCAG exacte). */
+/** Contrast ratio with luminance approximated by a 2.2 gamma (intentionally not the exact WCAG formula; shade choices depend on it). */
 export function calculateContrastRatio(c1, c2) {
     const lum = (c) => { const [r, g, b] = convertToRgb(c); return 0.2126 * (r / 255) ** 2.2 + 0.7152 * (g / 255) ** 2.2 + 0.0722 * (b / 255) ** 2.2; };
     const a = lum(c1), b = lum(c2);
@@ -223,10 +221,10 @@ export function calculateContrastRatio(c1, c2) {
 export function isLight(color) {
     const m = /^oklch\(([\d.]+)/.exec(color);
     if (!m)
-        throw new Error(`isLight : seule la notation oklch est prise en charge pour l'instant (${color})`);
+        throw new Error(`isLight: only oklch colors are supported (${color})`);
     return +m[1] >= 0.65;
 }
-/** Port de ButtonComponentColorMap : choisit les nuances de fond et de texte accessibles d'un bouton plein. */
+/** Picks accessible background and text shades for a filled button. */
 export function buttonColorMap(palette, minRatio = WCAG_AA_TEXT) {
     const light = [{ bg: 600, hover: 500, alternateHover: null }, { bg: 400, hover: 300, alternateHover: 500 }];
     const dark = [{ bg: 600, hover: 500, alternateHover: 700 }];
@@ -275,7 +273,7 @@ export function buttonColorMap(palette, minRatio = WCAG_AA_TEXT) {
     const [bg, hoverBg] = pick(light), [darkBg, darkHoverBg] = pick(dark);
     return { bg, 'hover:bg': hoverBg, 'dark:bg': darkBg, 'dark:hover:bg': darkHoverBg, text: textForBg[bg] ?? 0, 'hover:text': textForBg[hoverBg] ?? 0, 'dark:text': textForBg[darkBg] ?? 0, 'dark:hover:text': textForBg[darkHoverBg] ?? 0 };
 }
-/** Port de Color::findShade : première nuance de la palette assez contrastée sur une surface. */
+/** First shade of the palette with enough contrast against a surface. */
 export function findShade(palette, surface, options = {}) {
     const shades = Object.keys(palette).map(Number).sort((a, b) => (options.fromDarkest ? b - a : a - b));
     for (const shade of shades) {
@@ -288,11 +286,11 @@ export function findShade(palette, surface, options = {}) {
     }
     return null;
 }
-/** Cartes de couleurs des composants à texte coloré (BadgeComponent, LinkComponent). */
+/** Color map of badges. */
 export function badgeColorMap(palette, gray) {
     return { text: findShade(palette, palette[50]) ?? 900, 'dark:text': findShade(palette, gray[600], { maxShade: 500, fromDarkest: true }) ?? 200 };
 }
-/** Port de DropdownComponent\ItemComponent::getColorMap. */
+/** Color map of dropdown items. */
 export function dropdownItemColorMap(palette, gray) {
     return {
         text: findShade(palette, 'oklch(1 0 0)', { minShade: 600 }) ?? 950,
@@ -301,30 +299,30 @@ export function dropdownItemColorMap(palette, gray) {
         'dark:hover:text': findShade(palette, palette[950], { maxShade: 400, fromDarkest: true }) ?? 100,
     };
 }
-/** Port de IconColumnComponent\IconComponent::getColorMap (contraste non textuel, 3:1). */
+/** Color map of icon columns (non-text contrast, 3:1). */
 export function iconColumnColorMap(palette, gray) {
     return { text: findShade(palette, 'oklch(1 0 0)', { minRatio: 3 }) ?? 900, 'dark:text': findShade(palette, gray[800], { minRatio: 3, maxShade: 600, fromDarkest: true }) ?? 200 };
 }
-/** Port de IconButtonComponentColorMap (contraste non textuel 3:1, surfaces gray-50 / gray-700). */
+/** Color map of icon buttons (non-text contrast 3:1 on gray-50 / gray-700). */
 export function iconButtonColorMap(palette, gray) {
     const light = findShade(palette, gray[50], { minRatio: 3 });
     const dark = findShade(palette, gray[700], { minRatio: 3, maxShade: 500, fromDarkest: true });
-    // Au-delà de 500 la teinte est déjà sombre : au survol on l'assombrit au lieu de l'éclaircir.
+    // Above 500 the shade is already dark: hover darkens it instead of lightening it.
     const [text, hoverText] = light === null ? [900, 800] : light > 500 ? [light, light + 100] : [light + 100, light];
     return { text, 'hover:text': hoverText, 'dark:text': dark ?? 200, 'dark:hover:text': dark === null ? 100 : dark - 100 };
 }
-/** Port de ToggleComponent::getColorMap (contraste non textuel 3:1). */
+/** Color map of toggles (non-text contrast, 3:1). */
 export function toggleColorMap(palette, gray) {
     return { bg: findShade(palette, gray[50], { minRatio: 3 }) ?? 900, text: findShade(palette, 'oklch(1 0 0)', { minRatio: 3 }) ?? 900, 'dark:bg': findShade(palette, gray[700], { minRatio: 3, fromDarkest: true }) ?? 200 };
 }
 export function linkColorMap(palette, gray) {
     return { text: findShade(palette, gray[50]) ?? 900, 'dark:text': findShade(palette, gray[700], { maxShade: 400, fromDarkest: true }) ?? 200 };
 }
-/** Bouton à contour : seule la couleur du texte dépend de la palette (ButtonComponent, `isOutlined`). */
+/** Outlined button: only the text color depends on the palette. */
 export function outlinedButtonColorMap(palette, gray) {
     return { text: findShade(palette, gray[50]) ?? 900, 'dark:text': findShade(palette, gray[700], { maxShade: 500, fromDarkest: true }) ?? 200 };
 }
-/** Carte de couleurs de chaque composant coloré (équivalent des classes `*Component::getColorMap`). */
+/** Color map of each colored component. */
 const COMPONENT_COLOR_MAPS = {
     button: (palette) => buttonColorMap(palette),
     'button-outlined': outlinedButtonColorMap,
@@ -334,32 +332,32 @@ const COMPONENT_COLOR_MAPS = {
     'icon-column': iconColumnColorMap,
     'icon-button': iconButtonColorMap,
     toggle: toggleColorMap,
-    // Port de StatsOverviewWidgetComponentStatComponentDescriptionComponent et ChartComponent (ce dernier ne pose que `fi-color`).
+    // Stat description and stat chart (the chart only gets `fi-color`).
     'stat-description': (palette, gray) => ({ text: findShade(palette, 'oklch(1 0 0)', { minShade: 600 }) ?? 950, 'dark:text': findShade(palette, gray[900], { maxShade: 400, fromDarkest: true }) ?? 200 }),
     'stat-chart': () => ({}),
-    // Texte coloré d'une colonne ou d'une entrée. Gris : 500 / 400, relevé sur Filament ; autres couleurs : même recherche de contraste que la description d'une statistique (non comparé à Filament).
+    // Colored text of a column or entry: fixed 500 / 400 for gray, otherwise the same contrast search as stat descriptions.
     text: (palette, gray) => (palette === gray ? { text: 500, 'dark:text': 400 } : { text: findShade(palette, 'oklch(1 0 0)', { minShade: 600 }) ?? 950, 'dark:text': findShade(palette, gray[900], { maxShade: 400, fromDarkest: true }) ?? 50 }),
 };
 const CLASS_FOR = {
     bg: (s) => `fi-bg-color-${s}`, 'hover:bg': (s) => `hover:fi-bg-color-${s}`, 'dark:bg': (s) => `dark:fi-bg-color-${s}`, 'dark:hover:bg': (s) => `dark:hover:fi-bg-color-${s}`,
     text: (s) => `fi-text-color-${s}`, 'hover:text': (s) => `hover:fi-text-color-${s}`, 'dark:text': (s) => `dark:fi-text-color-${s}`, 'dark:hover:text': (s) => `dark:hover:fi-text-color-${s}`,
 };
-/** Port de ColorManager. */
+/** Registers named palettes and computes the color classes of components. */
 export class ColorManager {
     static DEFAULT_COLORS = { danger: Color.Red, gray: Color.Zinc, info: Color.Blue, primary: Color.Amber, success: Color.Green, warning: Color.Amber };
     colors = { ...ColorManager.DEFAULT_COLORS };
     cache = new Map();
-    /** Couleurs propres à la requête en cours (thème choisi par l'utilisateur) : elles priment sur celles du panel. */
+    /** Per-request colors (theme picked by the user); they take precedence over the panel's colors. */
     scope = new AsyncLocalStorage();
     register(colors) { for (const [name, color] of Object.entries(colors))
         this.colors[name] = toPalette(color); this.cache.clear(); return this; }
-    /** Exécute `fn` avec des couleurs qui ne valent que pour cette requête ; `key` identifie le jeu de couleurs (cache). */
+    /** Runs `fn` with colors that only apply to this request; `key` identifies the color set for caching. */
     runWith(key, colors, fn) {
         return this.scope.run({ key, colors: Object.fromEntries(Object.entries(colors).map(([name, color]) => [name, toPalette(color)])) }, fn);
     }
     getColors() { return { ...this.colors, ...(this.scope.getStore()?.colors ?? {}) }; }
     getColor(name) { return this.scope.getStore()?.colors[name] ?? this.colors[name]; }
-    /** Classes d'un composant coloré (`getComponentClasses`). Seul le bouton plein est porté pour l'instant. */
+    /** Color classes of a colored component. */
     getComponentClasses(component, color) {
         if (!color)
             return [];
@@ -368,7 +366,7 @@ export class ColorManager {
         if (hit)
             return hit;
         let classes = [];
-        // Seul le bouton a le gris pour couleur par défaut sans classe (HasDefaultGrayColor).
+        // Gray is the button's default color and gets no color classes; other components still get them.
         if (color !== 'gray' || component !== 'button') {
             classes = ['fi-color', 'fi-color-' + color.replace(/[^a-zA-Z0-9_-]/g, '')];
             const palette = this.getColor(color);
@@ -381,47 +379,47 @@ export class ColorManager {
         this.cache.set(key, classes);
         return classes;
     }
-    /** Bloc `<style>` des variables `--<couleur>-<nuance>` injecté dans `<head>`. */
+    /** `<style>` block defining the `--<color>-<shade>` variables, injected into `<head>`. */
     renderCssVariables() {
         const vars = Object.entries(this.getColors()).map(([name, palette]) => Object.entries(palette).map(([shade, value]) => ` --${name}-${shade}:${value}; `).join('')).join('');
         return `<style>\n    :root {\n        ${vars}}\n</style>`;
     }
 }
-// ------------------------------------------------------------------ icônes (generate_icon_html + Heroicons)
+// ------------------------------------------------------------------ icons
 const iconCache = new Map();
-/** Icône Heroicons (`m-eye`, `o-user`, `s-…`, `c-…`) avec les classes `fi-icon fi-size-<taille>`. */
+/** Heroicons icon (`m-eye`, `o-user`, `s-…`, `c-…`) with the `fi-icon fi-size-<size>` classes. */
 export function icon(name, options = {}) {
     let svg = iconCache.get(name);
     if (svg === undefined) {
         const file = here(`../icons/heroicons/${name.replace(/^heroicon-/, '')}.svg`);
         if (!existsSync(file))
-            throw new Error(`Icône introuvable : ${name}`);
+            throw new Error(`Icon not found: ${name}`);
         svg = readFileSync(file, 'utf8').trim();
         iconCache.set(name, svg);
     }
     const a = (options.attributes ?? new Attributes()).class(['fi-icon', `fi-size-${options.size ?? 'md'}`]);
     return svg.replace(/^<svg/, `<svg ${a.toHtml()}`);
 }
-/** Déclare une icône hors Heroicons (logo de marque, pictogramme maison) : un `<svg>` complet, fourni par l'application et non par l'utilisateur. */
+/** Registers a non-Heroicons icon (brand logo, custom glyph): a full `<svg>` supplied by the application, never by end users (it is not sanitized). */
 export function registerIcon(name, svg) {
     if (!/^<svg[\s>]/.test(svg.trim()))
-        throw new Error(`registerIcon(${name}) attend un élément <svg>.`);
+        throw new Error(`registerIcon(${name}) expects an <svg> element.`);
     iconCache.set(name, svg.trim());
 }
-/** Indicateur de chargement (`generate_loading_indicator_html`). */
+/** Loading spinner SVG. */
 export function loadingIndicator(attributes = new Attributes(), size = 'md') {
     const a = attributes.class(['fi-icon fi-loading-indicator', `fi-size-${size}`]);
     return `<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" ${a.toHtml()}><path clip-rule="evenodd" d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill-rule="evenodd" fill="currentColor" opacity="0.2"></path><path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path></svg>`;
 }
-// ------------------------------------------------------------------ vues EJS à espaces de noms, surchargeables
-/** Registre de vues : `filament-forms::components.text-input` → fichier EJS ; les dossiers de surcharge passent en premier. */
+// ------------------------------------------------------------------ namespaced, overridable EJS views
+/** View registry: `filament-forms::components.text-input` resolves to an EJS file; override directories are checked first. */
 export class ViewRegistry {
     namespaces = new Map();
     overrides = [];
     compiled = new Map();
     shared = {};
     namespace(name, dir) { this.namespaces.set(name, dir); return this; }
-    /** Dossier de surcharge de l'application : `<dir>/<espace>/<chemin>.ejs` remplace la vue du paquet. */
+    /** Application override directory: `<dir>/<namespace>/<path>.ejs` replaces the package view. */
     overrideFrom(dir) { this.overrides.unshift(dir); this.compiled.clear(); return this; }
     share(data) { Object.assign(this.shared, data); return this; }
     resolve(view) {
@@ -434,7 +432,7 @@ export class ViewRegistry {
         }
         const base = this.namespaces.get(ns);
         if (!base)
-            throw new Error(`Espace de noms de vues inconnu : ${ns}`);
+            throw new Error(`Unknown view namespace: ${ns}`);
         return path.join(base, rel);
     }
     render(view, data = {}) {
@@ -448,13 +446,13 @@ export class ViewRegistry {
     }
 }
 export const views = new ViewRegistry();
-// ------------------------------------------------------------------ réglages globaux (équivalent de configureUsing)
+// ------------------------------------------------------------------ global configuration
 const configurators = new Map();
-/** Enregistre un réglage appliqué à chaque instance de la classe (et de ses sous-classes) créée ensuite par `make()`. */
+/** Registers a callback applied to every instance of the class (and its subclasses) created afterwards by `make()`. */
 export function configureUsing(cls, configure) {
     configurators.set(cls, [...(configurators.get(cls) ?? []), configure]);
 }
-/** Applique les réglages globaux à une instance fraîchement créée, de la classe la plus générale à la plus précise. */
+/** Applies the global callbacks to a new instance, from the most general class to the most specific. */
 export function configured(instance) {
     if (!configurators.size)
         return instance;
@@ -466,10 +464,10 @@ export function configured(instance) {
             configure(instance);
     return instance;
 }
-/** Oublie tous les réglages globaux (tests). */
+/** Forgets all global callbacks (for tests). */
 export function resetConfigurators() { configurators.clear(); }
 const UNSCOPED = Symbol('unscoped');
-/** Registre de render hooks. Un hook sans portée est rendu partout ; avec portées, seulement quand l'appel porte l'une d'elles. */
+/** Render hook registry. Unscoped hooks render everywhere; scoped hooks only when the call carries one of their scopes. */
 export class RenderHookRegistry {
     hooks = new Map();
     register(name, hook, scopes = null) {
@@ -480,7 +478,7 @@ export class RenderHookRegistry {
             byScope.set(scope, [...(byScope.get(scope) ?? []), hook]);
         return this;
     }
-    /** Hooks à rendre pour cet appel, dans l'ordre de Filament : sans portée d'abord, puis portée par portée, chacun une seule fois. */
+    /** Hooks to render for a call: unscoped first, then scope by scope, each hook once. */
     collect(name, scopes) {
         const byScope = this.hooks.get(name);
         if (!byScope)
@@ -500,13 +498,13 @@ export class RenderHookRegistry {
     clear() { this.hooks.clear(); }
 }
 const toScopes = (scopes) => (scopes === null || scopes === undefined ? [] : Array.isArray(scopes) ? scopes : [scopes]);
-/** Hooks communs à tout le processus (tous les panels). */
+/** Process-wide hooks (all panels). */
 export const renderHooks = new RenderHookRegistry();
 const renderHookScope = new AsyncLocalStorage();
-/** Exécute un rendu avec, en plus des hooks communs, ceux d'un registre propre (celui du panel de la requête). */
+/** Renders with an extra registry (the request panel's) on top of the process-wide hooks. */
 export function runWithRenderHooks(registry, fn) { return renderHookScope.run(registry, fn); }
 const activeRegistries = () => { const own = renderHookScope.getStore(); return own && own !== renderHooks ? [renderHooks, own] : [renderHooks]; };
-/** Rend un emplacement : hooks communs, puis hooks du panel en cours. */
+/** Renders a slot: process-wide hooks, then the current panel's hooks. */
 export function renderHook(name, scopes = null, data = {}) {
     return activeRegistries().map((registry) => registry.render(name, scopes, data)).join('');
 }

package/lib/ui.d.ts

@@ -1,5 +1,5 @@
 import { cls, e, js, loadingIndicator, type ColorManager } from './index.ts';
-/** Gestionnaire de couleurs utilisé par les composants (celui du panel, ou un gestionnaire par défaut). */
+/** Sets the color manager used by the components (usually the panel's). */
 export declare const useColorManager: (colors: ColorManager) => void;
 export type Attrs = Record<string, string | number | boolean | null | undefined>;
 type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -11,7 +11,7 @@ export type BadgeProps = {
     tag?: string;
     attributes?: Attrs;
 };
-/** Pastille (`<x-filament::badge>`). */
+/** Badge. */
 export declare function badge(props?: BadgeProps, slot?: string): string;
 export type IconButtonProps = {
     icon: string;
@@ -25,7 +25,7 @@ export type IconButtonProps = {
     badgeColor?: string;
     attributes?: Attrs;
 };
-/** Bouton réduit à une icône (`<x-filament::icon-button>`) ; le libellé sert d'info-bulle et de nom accessible. */
+/** Icon-only button; the label is used as tooltip and accessible name. */
 export declare function iconButton(props: IconButtonProps): string;
 export type ButtonProps = {
     color?: string;
@@ -41,7 +41,7 @@ export type ButtonProps = {
     badgeColor?: string;
     attributes?: Attrs;
 };
-/** Bouton (`<x-filament::button>`). */
+/** Button. */
 export declare function button(props?: ButtonProps, slot?: string): string;
 export type LinkProps = {
     href?: string | null;
@@ -55,9 +55,9 @@ export type LinkProps = {
     badgeColor?: string;
     attributes?: Attrs;
 };
-/** Lien (`<x-filament::link>`). */
+/** Link. */
 export declare function link(props?: LinkProps, slot?: string): string;
-/** Avatar (`<x-filament::avatar>`) : rond par défaut. */
+/** Avatar image, circular by default. */
 export declare function avatar(props: {
     src: string;
     alt?: string;
@@ -66,20 +66,20 @@ export declare function avatar(props: {
     attributes?: Attrs;
 }): string;
 /**
- * Fil d'Ariane (`<x-filament::breadcrumbs>`). Comme dans Filament : un élément sans `url` est un simple texte ;
- * un élément dont l'`url` est vide reste un lien, mais sans adresse. Le dernier élément est la page courante.
+ * Breadcrumbs. An item without `url` is plain text; an item with an empty `url` is still a link, without `href`.
+ * The last item is the current page.
  */
 export declare function breadcrumbs(items: {
     label: string;
     url?: string | null;
 }[], label?: string): string;
-/** Case à cocher nue (`<x-filament::input.checkbox>`). */
+/** Bare checkbox. */
 export declare function checkbox(props?: {
     checked?: boolean;
     valid?: boolean;
     attributes?: Attrs;
 }): string;
-/** Roue d'attente (`<x-filament::loading-indicator>`). */
+/** Loading spinner. */
 export declare function spinner(attributes?: Attrs): string;
 export type InputWrapperProps = {
     prefix?: string | null;
@@ -94,13 +94,13 @@ export type InputWrapperProps = {
     inlineSuffix?: boolean;
     attributes?: Attrs;
 };
-/** Habillage d'un champ (`<x-filament::input.wrapper>`) : bordure, préfixe et suffixe (texte ou icône). */
+/** Input wrapper: border, prefix and suffix (text or icon). */
 export declare function inputWrapper(props?: InputWrapperProps, slot?: string): string;
-/** Champ texte nu (`<x-filament::input>`), à placer dans `inputWrapper`. */
+/** Bare text input, meant to be placed in `inputWrapper`. */
 export declare function input(attributes?: Attrs): string;
-/** Liste déroulante native nue (`<x-filament::input.select>`) ; `slot` contient les `<option>`. */
+/** Bare native select; `slot` holds the `<option>` elements. */
 export declare function select(attributes?: Attrs, slot?: string): string;
-/** Groupe de champs encadré (`<x-filament::fieldset>`). */
+/** Fieldset with an optional legend. */
 export declare function fieldset(props?: {
     label?: string | null;
     labelHidden?: boolean;
@@ -117,7 +117,7 @@ export type CalloutProps = {
     controls?: string | null;
     attributes?: Attrs;
 };
-/** Encart d'information (`<x-filament::callout>`). `footer` et `controls` reçoivent du HTML déjà rendu (boutons…). */
+/** Callout box. `footer` and `controls` take already rendered HTML (buttons…). */
 export declare function callout(props?: CalloutProps): string;
 export type EmptyStateProps = {
     heading: string;
@@ -129,21 +129,21 @@ export type EmptyStateProps = {
     contained?: boolean;
     attributes?: Attrs;
 };
-/** État vide (`<x-filament::empty-state>`) : icône, titre, description, pied (actions déjà rendues). */
+/** Empty state: icon, heading, description and footer (already rendered actions). */
 export declare function emptyState(props: EmptyStateProps): string;
 export type PaginationProps = {
-    /** Identifiant du composant hôte (préfixe des clés `wire:key`). */
+    /** Host component id (prefix of the `wire:key` values). */
     id: string;
     page: number;
     perPage: number;
-    /** Nombre total d'enregistrements ; absent pour une pagination simple (précédent / suivant). */
+    /** Total record count; omit it for simple (previous / next) pagination. */
     total?: number;
     hasMore?: boolean;
     pageOptions?: (number | 'all')[];
     extremeLinks?: boolean;
     property?: string;
 };
-/** Pagination (`<x-filament::pagination>`), liée aux méthodes `previousPage`, `nextPage` et `gotoPage` du composant hôte. */
+/** Pagination bound to the host component's `previousPage`, `nextPage` and `gotoPage` methods. */
 export declare function pagination(props: PaginationProps): string;
 export type SectionProps = {
     heading?: string | null;
@@ -164,7 +164,7 @@ export type SectionProps = {
     secondary?: boolean;
     attributes?: Attrs;
 };
-/** Section (`<x-filament::section>`) : carte avec en-tête facultatif (icône, titre, description, zone d'actions), repliable. */
+/** Collapsible card with an optional header (icon, heading, description, after-header area). */
 export declare function section(props?: SectionProps, slot?: string): string;
 export type TabItem = {
     label: string;
@@ -177,7 +177,7 @@ export type TabItem = {
     href?: string | null;
     attributes?: Attrs;
 };
-/** Onglets (`<x-filament::tabs>` et `<x-filament::tabs.item>`). */
+/** Tabs. */
 export declare function tabs(props: {
     label?: string | null;
     vertical?: boolean;
@@ -197,11 +197,11 @@ export type DropdownItem = {
     disabled?: boolean;
     attributes?: Attrs;
 };
-/** Élément de menu (`<x-filament::dropdown.list.item>`). */
+/** Dropdown menu item. */
 export declare function dropdownItem(item: DropdownItem): string;
-/** Liste d'éléments de menu (`<x-filament::dropdown.list>`). */
+/** List of dropdown menu items. */
 export declare function dropdownList(items: DropdownItem[]): string;
-/** Menu déroulant (`<x-filament::dropdown>`) : `trigger` est le HTML du déclencheur, `slot` le contenu du panneau. */
+/** Dropdown: `trigger` is the trigger's HTML, `slot` the panel content. */
 export declare function dropdown(props: {
     trigger: string;
     width?: string | null;
@@ -217,7 +217,7 @@ export type ModalProps = {
     eyebrow?: string | null;
     icon?: string | null;
     iconColor?: string;
-    /** Boutons du pied (HTML déjà rendu), ou `footer` pour un pied entièrement libre. */
+    /** Footer buttons (already rendered HTML), or `footer` for a fully custom footer. */
     footerActions?: string[];
     footer?: string | null;
     footerActionsAlignment?: 'start' | 'center' | 'end';
@@ -230,10 +230,10 @@ export type ModalProps = {
     closeButton?: boolean;
     closeByClickingAway?: boolean;
     closeByEscaping?: boolean;
-    /** Identifiant du composant hôte, préfixe des clés `wire:key` quand la modale vit dans un composant à état. */
+    /** Host component id, used to prefix `wire:key` values when the modal lives in a stateful component. */
     livewireId?: string | null;
 };
-/** Fenêtre modale (`<x-filament::modal>`), ouverte par l'événement `open-modal` portant son identifiant. */
+/** Modal, opened by an `open-modal` event carrying its id. */
 export declare function modal(props: ModalProps, slot?: string): string;
 export declare const ui: {
     avatar: typeof avatar;

package/lib/ui.js

@@ -1,35 +1,32 @@
-// @navette-js/support/ui — les composants d'interface de base de Filament, utilisables seuls (équivalent des composants Blade
-// `<x-filament::button>`, `<x-filament::badge>`…). Chaque fonction rend le même balisage que la vue Blade d'origine
-// (sources/filament/packages/support/resources/views/components) ; elles sont vérifiées scène par scène contre l'application
-// de documentation de Filament (`node tools/parity/run-scenes.mjs`).
+// @navette-js/support/ui — base UI components (button, badge, modal…) usable on their own, outside a panel.
+// Each function returns an HTML string.
 import { Attributes, cls, e, icon, js, loadingIndicator, views } from "./index.js";
 import { t, tc } from "./i18n.js";
 import { fileURLToPath } from 'node:url';
-// Les vues de base (`filament::components.*`) vivent dans ce paquet : elles sont utilisables sans panel.
+// The base views (`filament::components.*`) live in this package so they work without a panel.
 views.namespace('filament', fileURLToPath(new URL('../views', import.meta.url)));
 let manager = null;
-/** Gestionnaire de couleurs utilisé par les composants (celui du panel, ou un gestionnaire par défaut). */
+/** Sets the color manager used by the components (usually the panel's). */
 export const useColorManager = (colors) => { manager = colors; };
 const colorsOf = (component, color) => {
     if (!manager)
-        throw new Error('Aucun gestionnaire de couleurs : appelez useColorManager().');
+        throw new Error('No color manager: call useColorManager() first.');
     return color && color !== 'gray' ? manager.getComponentClasses(component, color) : [];
 };
-/** Pastille (`<x-filament::badge>`). */
+/** Badge. */
 export function badge(props = {}, slot = '') {
     const { color = 'primary', size = 'md', tag = 'span' } = props;
     const attributes = new Attributes(props.attributes ?? {}).class([...colorsOf('badge', color), 'fi-badge', `fi-size-${size}`]);
     const iconHtml = props.icon ? icon(props.icon, { size: 'sm' }) : '';
     return `<${tag} ${attributes.toHtml()}>${props.iconPosition === 'after' ? '' : iconHtml}<span class="fi-badge-label-ctn"><span class="fi-badge-label">${slot}</span></span>${props.iconPosition === 'after' ? iconHtml : ''}</${tag}>`;
 }
-/** Petit compteur posé sur un bouton ou un lien (rendu sans enveloppe de libellé, comme dans Filament). */
+/** Small counter on a button or link (rendered without the badge label wrapper). */
 const counter = (value, color = 'primary') => `<span class="${cls([...colorsOf('badge', color), 'fi-badge', 'fi-size-xs'])}">${e(String(value))}</span>`;
-/** Taille de l'icône selon celle du bouton (comme la vue Blade). */
 const ICON_BUTTON_ICON_SIZE = { xs: 'sm', sm: 'md', md: 'md', lg: 'lg', xl: 'lg' };
-/** Bouton réduit à une icône (`<x-filament::icon-button>`) ; le libellé sert d'info-bulle et de nom accessible. */
+/** Icon-only button; the label is used as tooltip and accessible name. */
 export function iconButton(props) {
     const { color = 'primary', size = 'md', disabled = false, tag = 'button' } = props;
-    // Les classes de l'appelant viennent après celles du composant (comme `$attributes->class()` de Laravel).
+    // The caller's classes go after the component's own classes.
     const { class: extraClass = null, ...rest } = (props.attributes ?? {});
     const attributes = new Attributes(rest)
         .merge({
@@ -40,7 +37,7 @@ export function iconButton(props) {
     const badgeHtml = props.badge !== null && props.badge !== undefined ? `<div class="fi-icon-btn-badge-ctn">${counter(props.badge, props.badgeColor)}</div>` : '';
     return `<${tag} ${attributes.toHtml()}>${icon(props.icon, { size: ICON_BUTTON_ICON_SIZE[size] })}${badgeHtml}</${tag}>`;
 }
-/** Bouton (`<x-filament::button>`). */
+/** Button. */
 export function button(props = {}, slot = '') {
     const { color = 'primary', size = 'md', outlined = false, disabled = false, tag = 'button', type = 'button', iconPosition = 'before' } = props;
     const attributes = new Attributes(props.attributes ?? {})
@@ -53,7 +50,7 @@ export function button(props = {}, slot = '') {
     const badgeHtml = props.badge !== null && props.badge !== undefined ? `<div class="fi-btn-badge-ctn">${counter(props.badge, props.badgeColor)}</div>` : '';
     return `<${tag} ${attributes.toHtml()}>${iconPosition === 'before' ? iconHtml : ''}${slot}${iconPosition === 'after' ? iconHtml : ''}${badgeHtml}</${tag}>`;
 }
-/** Lien (`<x-filament::link>`). */
+/** Link. */
 export function link(props = {}, slot = '') {
     const { color = 'primary', size = 'md', tag = 'a', iconPosition = 'before' } = props;
     const attributes = new Attributes(props.attributes ?? {})
@@ -64,37 +61,37 @@ export function link(props = {}, slot = '') {
     return `<${tag} ${attributes.toHtml()}>${iconPosition === 'before' ? iconHtml : ''}<span class="fi-link-label">${slot}</span>${iconPosition === 'after' ? iconHtml : ''}${badgeHtml}</${tag}>`;
 }
 // ------------------------------------------------------------------ avatar
-/** Avatar (`<x-filament::avatar>`) : rond par défaut. */
+/** Avatar image, circular by default. */
 export function avatar(props) {
     const attributes = new Attributes(props.attributes ?? {}).merge({ alt: props.alt ?? null, src: props.src }).class(['fi-avatar', { 'fi-circular': props.circular !== false }, `fi-size-${props.size ?? 'md'}`]);
     return `<img ${attributes.toHtml()} />`;
 }
 // ------------------------------------------------------------------ breadcrumbs
 /**
- * Fil d'Ariane (`<x-filament::breadcrumbs>`). Comme dans Filament : un élément sans `url` est un simple texte ;
- * un élément dont l'`url` est vide reste un lien, mais sans adresse. Le dernier élément est la page courante.
+ * Breadcrumbs. An item without `url` is plain text; an item with an empty `url` is still a link, without `href`.
+ * The last item is the current page.
  */
 export function breadcrumbs(items, label = 'Breadcrumb') {
     const separators = icon('m-chevron-right', { attributes: new Attributes({ 'aria-hidden': 'true', class: 'fi-breadcrumbs-item-separator fi-ltr' }) }) + icon('m-chevron-left', { attributes: new Attributes({ 'aria-hidden': 'true', class: 'fi-breadcrumbs-item-separator fi-rtl' }) });
     const list = items.map((item, index) => `<li class="fi-breadcrumbs-item">${index > 0 ? separators : ''}${((current) => (item.url === undefined || item.url === null ? `<span${current} class="fi-breadcrumbs-item-label">${e(item.label)}</span>` : `<a${item.url ? ` href="${e(item.url)}"` : ''}${current} class="fi-breadcrumbs-item-label">${e(item.label)}</a>`))(index === items.length - 1 ? ' aria-current="page"' : '')}</li>`);
     return `<nav class="fi-breadcrumbs" aria-label="${e(label)}"><ol class="fi-breadcrumbs-list">${list.join('')}</ol></nav>`;
 }
-// ------------------------------------------------------------------ champs de base
-/** Case à cocher nue (`<x-filament::input.checkbox>`). */
+// ------------------------------------------------------------------ basic inputs
+/** Bare checkbox. */
 export function checkbox(props = {}) {
     const attributes = new Attributes(props.attributes ?? {}).merge({ type: 'checkbox', checked: props.checked === true }).class(['fi-checkbox-input', props.valid === false ? 'fi-invalid' : 'fi-valid']);
     return `<input ${attributes.toHtml()} />`;
 }
-/** Roue d'attente (`<x-filament::loading-indicator>`). */
+/** Loading spinner. */
 export function spinner(attributes = {}) {
-    // Les classes de l'appelant viennent après celles du composant.
+    // The caller's classes go after the component's own classes.
     const { class: extra, ...rest } = attributes;
     const html = loadingIndicator(new Attributes(rest));
     return extra ? html.replace(/class="([^"]*)"/, (_, own) => `class="${own} ${e(String(extra))}"`) : html;
 }
 const FOCUS_INPUT = "if (! $event.target.closest('.fi-input-wrp-actions')) $dispatch('focus-input')";
 const affixIcon = (name, color) => icon(name, { attributes: new Attributes().class(color && color !== 'gray' ? ['fi-color', `fi-color-${color}`] : []) });
-/** Habillage d'un champ (`<x-filament::input.wrapper>`) : bordure, préfixe et suffixe (texte ou icône). */
+/** Input wrapper: border, prefix and suffix (text or icon). */
 export function inputWrapper(props = {}, slot = '') {
     const hasPrefix = !!(props.prefix || props.prefixIcon), hasSuffix = !!(props.suffix || props.suffixIcon);
     const attributes = new Attributes(props.attributes ?? {}).class(['fi-input-wrp', { 'fi-disabled': props.disabled === true, 'fi-invalid': props.valid === false }]);
@@ -102,31 +99,31 @@ export function inputWrapper(props = {}, slot = '') {
     const suffix = hasSuffix ? `<div x-on:click="${FOCUS_INPUT}" class="${cls(['fi-input-wrp-suffix', { 'fi-inline': props.inlineSuffix === true, 'fi-input-wrp-suffix-has-label': !!props.suffix }])}">${props.suffix ? `<span class="fi-input-wrp-label">${e(props.suffix)}</span>` : ''}${props.suffixIcon ? affixIcon(props.suffixIcon, props.suffixIconColor) : ''}</div>` : '';
     return `<div ${attributes.toHtml()}>${prefix}<div class="fi-input-wrp-content-ctn">${slot}</div>${suffix}</div>`;
 }
-/** Champ texte nu (`<x-filament::input>`), à placer dans `inputWrapper`. */
+/** Bare text input, meant to be placed in `inputWrapper`. */
 export function input(attributes = {}) { return `<input ${new Attributes(attributes).class(['fi-input']).toHtml()} />`; }
-/** Liste déroulante native nue (`<x-filament::input.select>`) ; `slot` contient les `<option>`. */
+/** Bare native select; `slot` holds the `<option>` elements. */
 export function select(attributes = {}, slot = '') { return `<select ${new Attributes(attributes).class(['fi-select-input']).toHtml()}>${slot}</select>`; }
-/** Groupe de champs encadré (`<x-filament::fieldset>`). */
+/** Fieldset with an optional legend. */
 export function fieldset(props = {}, slot = '') {
     const attributes = new Attributes(props.attributes ?? {}).class(['fi-fieldset', { 'fi-fieldset-label-hidden': props.labelHidden === true }]);
     return `<fieldset ${attributes.toHtml()}>${props.label ? `<legend>${e(props.label)}</legend>` : ''}${slot}</fieldset>`;
 }
 const colorMark = (color) => (color && color !== 'gray' ? ['fi-color', `fi-color-${color}`] : []);
-/** Encart d'information (`<x-filament::callout>`). `footer` et `controls` reçoivent du HTML déjà rendu (boutons…). */
+/** Callout box. `footer` and `controls` take already rendered HTML (buttons…). */
 export function callout(props = {}) {
     const attributes = new Attributes(props.attributes ?? {}).class(['fi-callout', ...colorMark(props.color)]);
     const iconHtml = props.icon ? icon(props.icon, { size: props.iconSize ?? 'lg', attributes: new Attributes().class([...colorMark(props.iconColor ?? props.color), 'fi-callout-icon']) }) : '';
     const text = `<div class="fi-callout-text">${props.heading ? `<h4 class="fi-callout-heading">${e(props.heading)}</h4>` : ''}${props.description ? `<p class="fi-callout-description">${e(props.description)}</p>` : ''}</div>`;
     return `<div ${attributes.toHtml()}>${iconHtml}<div class="fi-callout-main">${text}${props.footer ? `<div class="fi-callout-footer">${props.footer}</div>` : ''}</div>${props.controls ? `<div class="fi-callout-controls">${props.controls}</div>` : ''}</div>`;
 }
-/** État vide (`<x-filament::empty-state>`) : icône, titre, description, pied (actions déjà rendues). */
+/** Empty state: icon, heading, description and footer (already rendered actions). */
 export function emptyState(props) {
     const color = props.iconColor ?? 'primary';
     const attributes = new Attributes(props.attributes ?? {}).class(['fi-empty-state', { 'fi-empty-state-not-contained': props.contained === false }]);
     const iconHtml = props.icon ? `<div class="${cls(['fi-empty-state-icon-bg', ...colorMark(color)])}">${icon(props.icon, { size: props.iconSize ?? 'lg', attributes: new Attributes().class(colorMark(color)) })}</div>` : '';
     return `<div ${attributes.toHtml()}><div class="fi-empty-state-content">${iconHtml}<div class="fi-empty-state-text-ctn"><h2 class="fi-empty-state-heading">${e(props.heading)}</h2>${props.description ? `<p class="fi-empty-state-description">${e(props.description)}</p>` : ''}${props.footer ? `<footer class="fi-empty-state-footer">${props.footer}</footer>` : ''}</div></div></div>`;
 }
-/** Numéros de page affichés : tous jusqu'à onze pages, sinon une fenêtre autour de la page courante. */
+/** Page numbers to show: all of them up to eleven pages, otherwise a window around the current page. */
 function pageElements(current, last) {
     if (last <= 11)
         return Array.from({ length: last }, (_, i) => i + 1);
@@ -139,7 +136,7 @@ function pageElements(current, last) {
     }
     return out;
 }
-/** Pagination (`<x-filament::pagination>`), liée aux méthodes `previousPage`, `nextPage` et `gotoPage` du composant hôte. */
+/** Pagination bound to the host component's `previousPage`, `nextPage` and `gotoPage` methods. */
 export function pagination(props) {
     const simple = props.total === undefined;
     const lastPage = simple ? props.page + (props.hasMore ? 1 : 0) : Math.max(1, Math.ceil(props.total / props.perPage));
@@ -153,7 +150,7 @@ export function pagination(props) {
         attrs: (o) => new Attributes(o),
     });
 }
-/** Section (`<x-filament::section>`) : carte avec en-tête facultatif (icône, titre, description, zone d'actions), repliable. */
+/** Collapsible card with an optional header (icon, heading, description, after-header area). */
 export function section(props = {}, slot = '') {
     const collapsible = props.collapsible === true, collapsed = collapsible && props.collapsed === true;
     const hasText = !!props.heading || !!props.description;
@@ -187,7 +184,7 @@ export function section(props = {}, slot = '') {
     const body = slot !== '' || props.footer ? `<div${collapsible ? ` x-bind:id="$id('fi-section-content')"${collapsed ? ' x-cloak' : ''}` : ''} class="fi-section-content-ctn">${slot !== '' ? `<div class="fi-section-content">${slot}</div>` : ''}${props.footer ? `<footer class="fi-section-footer">${props.footer}</footer>` : ''}</div>` : '';
     return `<section ${attributes.toHtml()}>${header}${body}</section>`;
 }
-/** Onglets (`<x-filament::tabs>` et `<x-filament::tabs.item>`). */
+/** Tabs. */
 export function tabs(props, items) {
     const attributes = new Attributes(props.attributes ?? {}).merge({ 'aria-label': props.label ?? null }).class(['fi-tabs', { 'fi-contained': props.contained === true, 'fi-vertical': props.vertical === true }]);
     const html = items.map((item) => {
@@ -201,7 +198,7 @@ export function tabs(props, items) {
     });
     return `<nav ${attributes.toHtml()}>${html.join('')}</nav>`;
 }
-/** Élément de menu (`<x-filament::dropdown.list.item>`). */
+/** Dropdown menu item. */
 export function dropdownItem(item) {
     const tag = item.tag ?? 'button';
     const color = item.color ?? 'gray';
@@ -216,15 +213,15 @@ export function dropdownItem(item) {
     const badgeHtml = item.badge !== null && item.badge !== undefined ? `<span class="${cls([...colorsOf('badge', item.badgeColor ?? 'primary'), 'fi-badge'])}">${e(String(item.badge))}</span>` : '';
     return `<${tag} ${attributes.toHtml()}>${lead}<span class="fi-dropdown-list-item-label">${e(item.label)}</span>${badgeHtml}</${tag}>`;
 }
-/** Liste d'éléments de menu (`<x-filament::dropdown.list>`). */
+/** List of dropdown menu items. */
 export function dropdownList(items) { return `<div class="fi-dropdown-list">${items.map(dropdownItem).join('')}</div>`; }
-/** Menu déroulant (`<x-filament::dropdown>`) : `trigger` est le HTML du déclencheur, `slot` le contenu du panneau. */
+/** Dropdown: `trigger` is the trigger's HTML, `slot` the panel content. */
 export function dropdown(props, slot = '') {
     const attributes = new Attributes(props.attributes ?? {}).merge({ 'x-data': 'filamentDropdown({ isMenu: true })' }).class(['fi-dropdown']);
     const float = `x-float${props.placement ? `.placement.${props.placement}` : ''}.flip.offset`;
     return `<div ${attributes.toHtml()}><div x-on:mousedown="if ($event.button === 0) toggle($event)" class="fi-dropdown-trigger">${props.trigger}</div><div x-cloak ${float}="{ offset: ${props.offset ?? 8}, }" x-ref="panel" x-transition:enter-start="fi-opacity-0" x-transition:leave-end="fi-opacity-0" role="menu" class="${cls(['fi-dropdown-panel', props.width ? `fi-width-${props.width}` : null, { 'fi-scrollable': !!props.maxHeight }])}" style="${props.maxHeight ? `max-height: ${e(props.maxHeight)};` : ''}">${slot}</div></div>`;
 }
-/** Fenêtre modale (`<x-filament::modal>`), ouverte par l'événement `open-modal` portant son identifiant. */
+/** Modal, opened by an `open-modal` event carrying its id. */
 export function modal(props, slot = '') {
     const { id, alignment = 'start', width = 'sm', closeButton = true, closeByClickingAway = true, closeByEscaping = true } = props;
     const hasHeading = !!props.heading, hasDescription = !!props.description && hasHeading;
@@ -233,7 +230,7 @@ export function modal(props, slot = '') {
     const key = (part) => `${props.livewireId ? `${props.livewireId}.` : ''}modal.${id}.${part}`;
     const close = `$dispatch('close-modal', { id: ${js(id)} })`;
     const iconColor = props.iconColor ?? 'primary';
-    // Fenêtre défilante (panneau latéral, en-tête ou pied fixes) : le piège de focus est posé sur la fenêtre elle-même, pas sur son conteneur.
+    // Scrolling window (slide-over, sticky header or footer): the focus trap goes on the window itself, not its container.
     const trapOnWindow = props.slideOver === true || props.stickyHeader === true || props.stickyFooter === true;
     const closeHtml = closeButton ? iconButton({ color: 'gray', icon: 'o-x-mark', label: t('filament::components/modal.actions.close.label'), attributes: { tabindex: closeByEscaping ? '-1' : null, 'x-on:click': close, class: 'fi-modal-close-btn' } }).replace('fi-icon fi-size-md', 'fi-icon fi-size-lg') : '';
     const iconHtml = props.icon ? `<div class="fi-modal-icon-ctn"><div class="${cls([...colorMark(iconColor), 'fi-modal-icon-bg'])}">${icon(props.icon, { size: 'lg' })}</div></div>` : '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navette-js/support",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "Shared utilities, colors, icons, views and translations for Navette.",
   "license": "MIT",
   "type": "module",
@@ -42,7 +42,6 @@
   },
   "keywords": [
     "navette",
-    "filament",
     "admin",
     "panel",
     "livewire",

package/views/components/badge.ejs

@@ -1,4 +1,4 @@
-<%# Badge — port de la vue Blade filament::components.badge (sans icône ni bouton de suppression) %>
+<%# Badge without icon or delete button. %>
 <span class="<%- cls([...colorClasses, 'fi-badge', 'fi-size-' + (locals.size ?? 'md')]) %>">
     <span class="fi-badge-label-ctn">
         <span class="fi-badge-label">

package/views/components/icon-button.ejs

@@ -1,5 +1,5 @@
-<%# Bouton icône — port de la vue Blade filament::components.icon-button (couleur grise par défaut, sans badge).
-    `extra` : attributs placés après les attributs de chargement ; pour la modale, `tabindex` précède `type` et le clic vient en dernier. %>
+<%# Gray icon button without badge.
+    `extra`: attributes placed after the loading attributes; with `after` (modal close button), `extra` goes before `type` and `after` comes last. %>
 <% const lead = locals.after ? (locals.extra ? extra.toHtml() + ' ' : '') : ''; const tail = locals.after ? after.toHtml() : (locals.extra ? extra.toHtml() : ''); %>
 <button class="fi-icon-btn fi-size-<%- locals.size ?? 'md' %> <%- className %>" title="<%= label %>" aria-label="<%= label %>" <%- lead %>type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled"<% if (tail) { %> <%- tail %><% } %>>
     <%- icon(iconName, { size: locals.iconSize ?? 'md' }) %>

package/views/components/pagination.ejs

@@ -1,5 +1,5 @@
-<%# Pagination — port de la vue Blade filament::components.pagination.
-    Options : simple (précédent / suivant seulement), extremeLinks (premier / dernier), property (propriété liée au nombre par page). Sans curseur. %>
+<%# Pagination. Options: simple (previous / next only), extremeLinks (first / last), property (property bound to the per-page count).
+    Cursor pagination is not supported. %>
 <% const simple = locals.simple === true, extremeLinks = locals.extremeLinks === true, property = locals.property ?? 'tableRecordsPerPage'; %>
 <% const perPageSelect = () => { %>
     <select class="fi-select-input" wire:model.live="<%= property %>">