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

package/README.md

@@ -1,8 +1,8 @@
 # @navette-js/actions
 
-Actions and modals for Navette, the Node.js port of Filament.
+Actions and modals for Navette admin panels.
 
-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/lib/index.d.ts

@@ -1,6 +1,6 @@
 import { type ColorManager, type Lazy } from '@navette-js/support';
 import type { ComponentContext, Renderable } from '@navette-js/schemas';
-/** Emplacements de render hook d'une modale d'action — mêmes noms que `Filament\Actions\View\ActionsRenderHook`. Donnée reçue : `data.action`. */
+/** Render hook slots of an action modal. Hooks receive the action as `data.action`. */
 export declare const ActionsRenderHook: {
     readonly MODAL_CUSTOM_CONTENT_AFTER: "actions::modal.custom-content.after";
     readonly MODAL_CUSTOM_CONTENT_BEFORE: "actions::modal.custom-content.before";
@@ -10,7 +10,7 @@ export declare const ActionsRenderHook: {
     readonly MODAL_SCHEMA_BEFORE: "actions::modal.schema.before";
 };
 export declare const useColorManager: (manager: ColorManager) => void;
-/** Contexte d'exécution d'une action montée. */
+/** Execution context of a mounted action. */
 export type ActionCallContext = {
     livewire: any;
     record: any;
@@ -18,7 +18,7 @@ export type ActionCallContext = {
     data: Record<string, unknown>;
 };
 export declare class Action implements Renderable {
-    /** Réglage par défaut de toutes les instances créées ensuite par `make()` : `TextInput.configureUsing((input) => input.maxLength(255))`. */
+    /** Default setup for every instance created afterwards by `make()`, e.g. `Action.configureUsing((action) => action.size('sm'))`. */
     static configureUsing<T>(this: abstract new (...args: any[]) => T, configure: (instance: T) => void): void;
     private name;
     private _label;
@@ -52,23 +52,23 @@ export declare class Action implements Renderable {
     constructor(name: string);
     static make(name: string): Action;
     label(label: Lazy<string | null, ComponentContext>): this;
-    /** Une fonction rend la couleur dépendante de l'enregistrement (actions de ligne). */
+    /** Pass a function to make the color depend on the record (row actions). */
     color(color: string | ((ctx: ComponentContext) => string | Promise<string>)): this;
     size(size: string): this;
-    /** Bouton `type="submit"` qui déclenche la méthode de soumission du formulaire (`->submit('authenticate')`). */
+    /** Renders a `type="submit"` button that triggers the form's submit method, e.g. `.submit('authenticate')`. */
     submit(form: string | null): this;
     hidden(condition?: Lazy<boolean, ComponentContext>): this;
-    /** Action de navigation : rendue en `<a href wire:navigate>`. */
+    /** Navigation action, rendered as `<a href wire:navigate>`. */
     url(url: string | null | ((ctx: ComponentContext) => string | null)): this;
-    /** Une chaîne : méthode du composant hôte appelée au clic (`wire:click`). Une fonction : traitement de l'action, monté par `mountAction()` (avec modale si elle en a une). */
+    /** A string: host component method called on click (`wire:click`). A function: the action handler, mounted through `mountAction()` (with its modal, if any). */
     action(action: string | ((ctx: ActionCallContext) => unknown | Promise<unknown>) | null): this;
     icon(name: string | null | ((ctx: ComponentContext) => string | null | Promise<string | null>)): this;
-    /** Icône quand l'action est un lien de ligne de table. */
+    /** Icon used when the action is a table row link. */
     tableIcon(name: string | null): this;
     private _iconButton;
-    /** Action de ligne réduite à son icône ; le libellé devient l'infobulle et le nom accessible (port de `iconButton()`). */
+    /** Icon-only row action; the label becomes the tooltip and accessible name. */
     iconButton(condition?: boolean): this;
-    /** Icône quand l'action est un élément de menu (ActionGroup). */
+    /** Icon used when the action is a menu item (ActionGroup). */
     groupedIcon(name: string | null): this;
     requiresConfirmation(condition?: boolean): this;
     modalHeading(heading: Lazy<string | null, ActionCallContext>): this;
@@ -77,56 +77,56 @@ export declare class Action implements Renderable {
     modalIcon(name: string | null): this;
     private _badge;
     private _badgeColor;
-    /** Pastille affichée sur le bouton (compteur). */
+    /** Badge (counter) shown on the button. */
     badge(badge: string | number | null | (() => string | number | null | Promise<string | number | null>)): this;
     badgeColor(color: string): this;
     private _slideOver;
     private _hasSubmit;
-    /** Modale en panneau latéral. */
+    /** Opens the modal as a slide-over panel. */
     slideOver(condition?: boolean): this;
-    /** `false` : modale de consultation, sans bouton de validation. */
+    /** `false`: read-only modal, without a submit button. */
     modalSubmitAction(condition: boolean): this;
     private _cancelLabel;
-    /** Libellé du bouton de fermeture de la modale (« Cancel » par défaut). */
+    /** Label of the modal's close button ("Cancel" by default). */
     modalCancelActionLabel(label: string | null): this;
     private _tooltip;
     private _newTab;
-    /** Infobulle affichée au survol. */
+    /** Tooltip shown on hover. */
     tooltip(text: Lazy<string | null, ComponentContext>): this;
-    /** Ouvre l'adresse de l'action dans un nouvel onglet. */
+    /** Opens the action's URL in a new tab. */
     openUrlInNewTab(condition?: boolean): this;
     private tooltipAttribute;
     private _modalIconColor;
-    /** Couleur de l'icône de la modale ; par défaut celle de l'action. */
+    /** Color of the modal icon; defaults to the action's color. */
     modalIconColor(color: string | null): this;
     getColor(): string;
     getLabel(ctx: ComponentContext): Promise<string>;
     getIcon(ctx: ComponentContext): Promise<string | null>;
     private _sort;
-    /** Ordre dans un menu (menu utilisateur, menu du locataire) : négatif, avant le choix du thème ou la liste des locataires. */
+    /** Position in a menu (user menu, tenant menu); negative values go before the theme switcher or the tenant list. */
     sort(sort: number): this;
     getSort(): number;
     /**
-     * Élément d'un menu du panel (menu utilisateur, menu du locataire) — port de l'action « grouped » à adresse.
-     * Seules les actions à adresse y ont leur place : le menu n'est pas un composant qui monte des actions.
+     * Item of a panel menu (user menu, tenant menu). Only URL actions are rendered: these menus are not components
+     * that can mount actions.
      */
     toMenuItemHtml(ctx: ComponentContext, options?: {
         navigate?: boolean;
     }): Promise<string>;
-    /** Une adresse calculée ne se connaît qu'avec l'enregistrement : l'hôte la revérifie au montage (`resolveUrl`). */
+    /** A computed URL depends on the record, so the host checks it again on mount (`resolveUrl`). */
     isMountable(): boolean;
-    /** Adresse de l'action dans ce contexte ; une action qui en a une est un lien, jamais une action montée. */
+    /** URL of the action in this context; an action with a URL is a link, never a mounted action. */
     resolveUrl(ctx: ComponentContext): string | null;
     hasModal(): boolean;
-    /** Formulaire affiché dans la modale. Une fonction : les composants sont reconstruits à chaque requête. */
+    /** Form shown in the modal. With a function, the components are rebuilt on every request. */
     schema(components: any[] | ((schema: any) => any), columns?: Record<string, number> | number | null): this;
-    /** Applique le formulaire de l'action au schéma fourni par l'hôte : la fonction rend soit des composants, soit le schéma configuré. */
+    /** Applies the action's form to the host's schema; the function returns either components or the configured schema. */
     applySchema(schema: any): any | null;
-    /** Boutons ajoutés au pied de la modale, entre la validation et l'annulation. */
+    /** Extra buttons in the modal footer, after the submit button. */
     extraModalFooterActions(actions: Action[]): this;
-    /** État initial du formulaire (ex. à partir de l'enregistrement). */
+    /** Initial form state (e.g. from the record). */
     fillForm(resolver: (ctx: ActionCallContext) => Record<string, unknown> | Promise<Record<string, unknown>>): this;
-    /** Largeur de la modale (`xs` … `7xl`). Par défaut `md` pour une confirmation, `4xl` pour un formulaire. */
+    /** Modal width (`xs` … `7xl`). Defaults to `md` for a confirmation and `4xl` for a form. */
     modalWidth(width: string | null): this;
     hasSchema(): boolean;
     getFormFill(ctx: ActionCallContext): Promise<Record<string, unknown> | null>;
@@ -134,50 +134,50 @@ export declare class Action implements Renderable {
     private _mutateData;
     private _before;
     private _after;
-    /** Transforme les données validées du formulaire avant le traitement (ajouter l'auteur, normaliser une valeur…). */
+    /** Transforms the validated form data before the handler runs (add the author, normalize a value…). */
     mutateDataUsing(fn: (data: Record<string, unknown>, ctx: ActionCallContext) => Record<string, unknown> | Promise<Record<string, unknown>>): this;
-    /** Exécuté juste avant le traitement ; lever une erreur l'annule. */
+    /** Runs right before the handler; throwing cancels the action. */
     before(fn: (ctx: ActionCallContext) => unknown | Promise<unknown>): this;
-    /** Exécuté après un traitement réussi (journal, notification supplémentaire…). */
+    /** Runs after the handler succeeds (logging, extra notification…). */
     after(fn: (ctx: ActionCallContext) => unknown | Promise<unknown>): this;
     call(ctx: ActionCallContext): Promise<unknown>;
-    /** Élément de menu d'une action groupée de table — port de l'action « grouped » (`fi-ac-grouped-action`). Le clic passe par `filamentTable.mountAction()`, qui envoie la sélection. */
+    /** Menu item of a table bulk action. The click goes through the table's Alpine `mountAction()`, which sends the selection. */
     toGroupedHtml(ctx: ComponentContext, context: Record<string, unknown>): Promise<string>;
     /**
-     * Élément de menu d'une action de ligne (dans un ActionGroup) — port de l'action « grouped ».
-     * Filament a deux balisages : un chemin court, et la vue Blade dès qu'un raccourci clavier est posé (ordre des classes différent).
+     * Menu item of a row action inside an ActionGroup. Disabled-capable and key-bound items use a different class order
+     * than plain items; front-end CSS and tests rely on the exact markup.
      */
     toRecordGroupedHtml(ctx: ComponentContext, context: Record<string, unknown>, wireKey: string): Promise<string>;
-    /** Lien d'une action de ligne de table (`fi-ac-link-action`) — port de l'action « link » en petite taille. */
+    /** Small link (or icon button) for a table row action. */
     toLinkHtml(ctx: ComponentContext, context: Record<string, unknown>, wireKey: string): Promise<string>;
-    /** Fenêtre modale d'une action montée — port de filament-actions::action-modal et filament::components.modal (confirmation seulement). */
+    /** Modal of a mounted action; `content` is the rendered form, if any. */
     toModalHtml(ctx: ActionCallContext, index: number, content?: string | null): Promise<string>;
     alpineClickHandler(handler: string | null): this;
     private _livewireTarget;
     private _iconAfter;
-    /** Cible de l'indicateur de chargement (`wire:target`), quand le clic est géré par du JavaScript. */
+    /** Loading indicator target (`wire:target`) when the click is handled in JavaScript. */
     livewireTarget(target: string | null): this;
-    /** Icône (et indicateur de chargement) après le libellé : `'after'`. */
+    /** `'after'` puts the icon (and loading indicator) after the label. */
     iconPosition(position: 'before' | 'after'): this;
     keyBindings(bindings: string[]): this;
     getName(): string;
     private _authorize;
-    /** Condition d'autorisation, distincte de `visible` / `hidden` : non remplie, l'action est masquée et refusée par le serveur. */
+    /** Authorization check, separate from `visible` / `hidden`: when it fails, the action is hidden and the server refuses it. */
     authorize(condition: Lazy<boolean, ComponentContext>): this;
     isVisible(ctx: ComponentContext): Promise<boolean>;
     visible(condition?: Lazy<boolean, ComponentContext>): this;
-    /** Action affichée mais inutilisable ; le serveur refuse aussi de la monter. */
+    /** Shown but unusable; the server also refuses to mount it. */
     disabled(condition?: Lazy<boolean, ComponentContext>): this;
     isDisabled(ctx: ComponentContext): Promise<boolean>;
-    /** Bouton plein — port de la vue `filament::components.button` pour une action de soumission. */
+    /** Renders the action as a button (or as a link when it has a URL). */
     toHtml(ctx: ComponentContext, explicitMountContext?: Record<string, unknown> | null): Promise<string>;
 }
-/** Groupe d'actions replié dans un menu déroulant (port de ActionGroup, bouton-icône « ⋮ »). */
+/** Group of actions collapsed into a dropdown behind a "⋮" icon button. */
 export declare class ActionGroup {
     private actions;
     constructor(actions: Action[]);
     static make(actions: Action[]): ActionGroup;
     getActions(): Action[];
-    /** `keyOf` donne la clé `wire:key` de chaque action (elle dépend de l'enregistrement). */
+    /** `keyOf` returns each action's `wire:key` (it depends on the record). */
     toHtml(ctx: ComponentContext, context: Record<string, unknown>, keyOf: (action: Action) => string): Promise<string>;
 }

package/lib/index.js

@@ -1,9 +1,9 @@
-// @navette-js/actions — port de filament/actions : Action (bouton plein, soumission de formulaire) pour commencer.
+// @navette-js/actions — actions: buttons, links, menu items and modal actions.
 import { Attributes, e, evaluate, icon, js, loadingIndicator, renderHook, views, configured, configureUsing } from '@navette-js/support';
 import { t } from '@navette-js/support/i18n';
 import { fileURLToPath } from 'node:url';
 views.namespace('filament-actions', fileURLToPath(new URL('../views', import.meta.url)));
-/** Emplacements de render hook d'une modale d'action — mêmes noms que `Filament\Actions\View\ActionsRenderHook`. Donnée reçue : `data.action`. */
+/** Render hook slots of an action modal. Hooks receive the action as `data.action`. */
 export const ActionsRenderHook = {
     MODAL_CUSTOM_CONTENT_AFTER: 'actions::modal.custom-content.after',
     MODAL_CUSTOM_CONTENT_BEFORE: 'actions::modal.custom-content.before',
@@ -15,7 +15,7 @@ export const ActionsRenderHook = {
 let colorManager = null;
 export const useColorManager = (manager) => { colorManager = manager; };
 export class Action {
-    /** Réglage par défaut de toutes les instances créées ensuite par `make()` : `TextInput.configureUsing((input) => input.maxLength(255))`. */
+    /** Default setup for every instance created afterwards by `make()`, e.g. `Action.configureUsing((action) => action.size('sm'))`. */
     static configureUsing(configure) { configureUsing(this, configure); }
     name;
     _label = null;
@@ -49,7 +49,7 @@ export class Action {
     constructor(name) { this.name = name; }
     static make(name) { return configured(new Action(name)); }
     label(label) { this._label = label; return this; }
-    /** Une fonction rend la couleur dépendante de l'enregistrement (actions de ligne). */
+    /** Pass a function to make the color depend on the record (row actions). */
     color(color) { if (typeof color === 'function')
         this._lazyColor = color;
     else {
@@ -57,17 +57,17 @@ export class Action {
         this._lazyColor = null;
     } return this; }
     size(size) { this._size = size; return this; }
-    /** Bouton `type="submit"` qui déclenche la méthode de soumission du formulaire (`->submit('authenticate')`). */
+    /** Renders a `type="submit"` button that triggers the form's submit method, e.g. `.submit('authenticate')`. */
     submit(form) { this._submit = form; return this; }
     hidden(condition = true) { this._hidden = condition; return this; }
-    /** Action de navigation : rendue en `<a href wire:navigate>`. */
+    /** Navigation action, rendered as `<a href wire:navigate>`. */
     url(url) { if (typeof url === 'function')
         this._lazyUrl = url;
     else {
         this._url = url;
         this._lazyUrl = null;
     } return this; }
-    /** Une chaîne : méthode du composant hôte appelée au clic (`wire:click`). Une fonction : traitement de l'action, monté par `mountAction()` (avec modale si elle en a une). */
+    /** A string: host component method called on click (`wire:click`). A function: the action handler, mounted through `mountAction()` (with its modal, if any). */
     action(action) {
         if (typeof action === 'function') {
             this._handler = action;
@@ -85,12 +85,12 @@ export class Action {
         this._icon = name;
         this._lazyIcon = null;
     } return this; }
-    /** Icône quand l'action est un lien de ligne de table. */
+    /** Icon used when the action is a table row link. */
     tableIcon(name) { this._tableIcon = name; return this; }
     _iconButton = false;
-    /** Action de ligne réduite à son icône ; le libellé devient l'infobulle et le nom accessible (port de `iconButton()`). */
+    /** Icon-only row action; the label becomes the tooltip and accessible name. */
     iconButton(condition = true) { this._iconButton = condition; return this; }
-    /** Icône quand l'action est un élément de menu (ActionGroup). */
+    /** Icon used when the action is a menu item (ActionGroup). */
     groupedIcon(name) { this._groupedIcon = name; return this; }
     requiresConfirmation(condition = true) { this._requiresConfirmation = condition; return this; }
     modalHeading(heading) { this._modalHeading = heading; return this; }
@@ -99,23 +99,23 @@ export class Action {
     modalIcon(name) { this._modalIcon = name; return this; }
     _badge = null;
     _badgeColor = 'primary';
-    /** Pastille affichée sur le bouton (compteur). */
+    /** Badge (counter) shown on the button. */
     badge(badge) { this._badge = badge; return this; }
     badgeColor(color) { this._badgeColor = color; return this; }
     _slideOver = false;
     _hasSubmit = true;
-    /** Modale en panneau latéral. */
+    /** Opens the modal as a slide-over panel. */
     slideOver(condition = true) { this._slideOver = condition; return this; }
-    /** `false` : modale de consultation, sans bouton de validation. */
+    /** `false`: read-only modal, without a submit button. */
     modalSubmitAction(condition) { this._hasSubmit = condition; return this; }
     _cancelLabel = null;
-    /** Libellé du bouton de fermeture de la modale (« Cancel » par défaut). */
+    /** Label of the modal's close button ("Cancel" by default). */
     modalCancelActionLabel(label) { this._cancelLabel = label; return this; }
     _tooltip = null;
     _newTab = false;
-    /** Infobulle affichée au survol. */
+    /** Tooltip shown on hover. */
     tooltip(text) { this._tooltip = text; return this; }
-    /** Ouvre l'adresse de l'action dans un nouvel onglet. */
+    /** Opens the action's URL in a new tab. */
     openUrlInNewTab(condition = true) { this._newTab = condition; return this; }
     async tooltipAttribute(ctx) {
         const text = await evaluate(this._tooltip, ctx);
@@ -126,22 +126,22 @@ export class Action {
  }`)}" ` : '';
     }
     _modalIconColor = null;
-    /** Couleur de l'icône de la modale ; par défaut celle de l'action. */
+    /** Color of the modal icon; defaults to the action's color. */
     modalIconColor(color) { this._modalIconColor = color; return this; }
     getColor() { return this._color; }
     async getLabel(ctx) { return (await evaluate(this._label, ctx)) ?? this.getDefaultLabel(); }
     async getIcon(ctx) { return this._lazyIcon ? this._lazyIcon(ctx) : this._icon; }
     _sort = 0;
-    /** Ordre dans un menu (menu utilisateur, menu du locataire) : négatif, avant le choix du thème ou la liste des locataires. */
+    /** Position in a menu (user menu, tenant menu); negative values go before the theme switcher or the tenant list. */
     sort(sort) { this._sort = sort; return this; }
     getSort() { return this._sort; }
     /**
-     * Élément d'un menu du panel (menu utilisateur, menu du locataire) — port de l'action « grouped » à adresse.
-     * Seules les actions à adresse y ont leur place : le menu n'est pas un composant qui monte des actions.
+     * Item of a panel menu (user menu, tenant menu). Only URL actions are rendered: these menus are not components
+     * that can mount actions.
      */
     async toMenuItemHtml(ctx, options = {}) {
         if (!colorManager)
-            throw new Error('Aucun gestionnaire de couleurs : appelez useColorManager().');
+            throw new Error('No color manager: call useColorManager() first.');
         const href = this.resolveUrl(ctx);
         if (!href || !/^(\/(?!\/)|https?:\/\/)/.test(href))
             return '';
@@ -150,25 +150,25 @@ export class Action {
         const glyph = iconName ? icon(iconName, { attributes: new Attributes().class(colors.length ? ['fi-color', `fi-color-${this._color}`] : []) }) : '';
         return `<a href="${e(href)}"${this._newTab ? ' target="_blank"' : options.navigate ? ' wire:navigate' : ''} class="${['fi-dropdown-list-item', 'fi-ac-grouped-action', ...colors].join(' ')} " role="menuitem" tabindex="-1">${glyph}<span class="fi-dropdown-list-item-label">${e(await this.getLabel(ctx))}</span></a>`;
     }
-    /** Une adresse calculée ne se connaît qu'avec l'enregistrement : l'hôte la revérifie au montage (`resolveUrl`). */
+    /** A computed URL depends on the record, so the host checks it again on mount (`resolveUrl`). */
     isMountable() { return (this._handler !== null || this._schema !== null) && this._url === null; }
-    /** Adresse de l'action dans ce contexte ; une action qui en a une est un lien, jamais une action montée. */
+    /** URL of the action in this context; an action with a URL is a link, never a mounted action. */
     resolveUrl(ctx) { return this._lazyUrl ? this._lazyUrl(ctx) : this._url; }
     hasModal() { return this._requiresConfirmation || this._schema !== null; }
-    /** Formulaire affiché dans la modale. Une fonction : les composants sont reconstruits à chaque requête. */
+    /** Form shown in the modal. With a function, the components are rebuilt on every request. */
     schema(components, columns = {}) { this._schema = typeof components === 'function' ? components : () => components; this._schemaColumns = columns; return this; }
-    /** Applique le formulaire de l'action au schéma fourni par l'hôte : la fonction rend soit des composants, soit le schéma configuré. */
+    /** Applies the action's form to the host's schema; the function returns either components or the configured schema. */
     applySchema(schema) {
         if (!this._schema)
             return null;
         const result = this._schema(schema);
         return Array.isArray(result) ? schema.columns(this._schemaColumns).components(result) : result;
     }
-    /** Boutons ajoutés au pied de la modale, entre la validation et l'annulation. */
+    /** Extra buttons in the modal footer, after the submit button. */
     extraModalFooterActions(actions) { this._extraModalFooterActions = actions; return this; }
-    /** État initial du formulaire (ex. à partir de l'enregistrement). */
+    /** Initial form state (e.g. from the record). */
     fillForm(resolver) { this._fillForm = resolver; return this; }
-    /** Largeur de la modale (`xs` … `7xl`). Par défaut `md` pour une confirmation, `4xl` pour un formulaire. */
+    /** Modal width (`xs` … `7xl`). Defaults to `md` for a confirmation and `4xl` for a form. */
     modalWidth(width) { this._modalWidth = width; return this; }
     hasSchema() { return this._schema !== null; }
     async getFormFill(ctx) { return this._fillForm ? this._fillForm(ctx) : null; }
@@ -176,11 +176,11 @@ export class Action {
     _mutateData = null;
     _before = null;
     _after = null;
-    /** Transforme les données validées du formulaire avant le traitement (ajouter l'auteur, normaliser une valeur…). */
+    /** Transforms the validated form data before the handler runs (add the author, normalize a value…). */
     mutateDataUsing(fn) { this._mutateData = fn; return this; }
-    /** Exécuté juste avant le traitement ; lever une erreur l'annule. */
+    /** Runs right before the handler; throwing cancels the action. */
     before(fn) { this._before = fn; return this; }
-    /** Exécuté après un traitement réussi (journal, notification supplémentaire…). */
+    /** Runs after the handler succeeds (logging, extra notification…). */
     after(fn) { this._after = fn; return this; }
     async call(ctx) {
         if (!this._handler)
@@ -192,10 +192,10 @@ export class Action {
         await this._after?.(ctx);
         return result;
     }
-    /** Élément de menu d'une action groupée de table — port de l'action « grouped » (`fi-ac-grouped-action`). Le clic passe par `filamentTable.mountAction()`, qui envoie la sélection. */
+    /** Menu item of a table bulk action. The click goes through the table's Alpine `mountAction()`, which sends the selection. */
     async toGroupedHtml(ctx, context) {
         if (!colorManager)
-            throw new Error('Aucun gestionnaire de couleurs : appelez useColorManager().');
+            throw new Error('No color manager: call useColorManager() first.');
         const expression = `mountAction(${js(this.name)}, {}, ${js(context)})`;
         const attributes = new Attributes()
             .merge({ role: 'menuitem', tabindex: '-1', type: 'button', 'wire:loading.attr': 'aria-disabled', 'wire:loading.class': 'fi-disabled', 'wire:target': expression })
@@ -205,12 +205,12 @@ export class Action {
         return `<button ${attributes.toHtml()}>${iconHtml}${loadingIndicator(new Attributes({ 'wire:loading.delay.default': '', 'wire:target': expression }))}<span class="fi-dropdown-list-item-label">${e((await evaluate(this._label, ctx)) ?? this.getDefaultLabel())}</span></button>`;
     }
     /**
-     * Élément de menu d'une action de ligne (dans un ActionGroup) — port de l'action « grouped ».
-     * Filament a deux balisages : un chemin court, et la vue Blade dès qu'un raccourci clavier est posé (ordre des classes différent).
+     * Menu item of a row action inside an ActionGroup. Disabled-capable and key-bound items use a different class order
+     * than plain items; front-end CSS and tests rely on the exact markup.
      */
     async toRecordGroupedHtml(ctx, context, wireKey) {
         if (!colorManager)
-            throw new Error('Aucun gestionnaire de couleurs : appelez useColorManager().');
+            throw new Error('No color manager: call useColorManager() first.');
         const color = this._lazyColor ? await this._lazyColor(ctx) : this._color;
         const iconName = this._lazyIcon ? await this._lazyIcon(ctx) : (this._groupedIcon ?? this._icon);
         const expression = e(`mountAction(${js(this.name)}, {}, ${js(context)})`);
@@ -218,17 +218,17 @@ export class Action {
         const label = (await evaluate(this._label, ctx)) ?? this.getDefaultLabel();
         const iconHtml = iconName ? icon(iconName, { attributes: new Attributes({ 'wire:loading.remove.delay.default': '1', 'wire:target': `mountAction(${js(this.name)}, {}, ${js(context)})` }).class(color !== 'gray' ? ['fi-color', `fi-color-${color}`] : []) }) : '';
         const inner = `${iconHtml}${loadingIndicator(new Attributes({ 'wire:loading.delay.default': '', 'wire:target': `mountAction(${js(this.name)}, {}, ${js(context)})` }))}<span class="fi-dropdown-list-item-label">${e(label)}</span>`;
-        // Action de navigation : un lien, sans montage côté serveur.
+        // Navigation action: a plain link, nothing is mounted on the server.
         const href = this._lazyUrl ? this._lazyUrl(ctx) : this._url;
         if (href) {
             const plainIcon = iconName ? icon(iconName, { attributes: new Attributes().class(color !== 'gray' ? ['fi-color', `fi-color-${color}`] : []) }) : '';
-            // Lien externe (nouvel onglet) : pas de navigation Livewire, classes dans l'ordre de Filament.
+            // New-tab link: no `wire:navigate`.
             if (this._newTab)
                 return `<a href="${e(href)}" target="_blank" role="menuitem" tabindex="-1" wire:key="${e(wireKey)}" class="${['fi-ac-grouped-action', 'fi-dropdown-list-item', ...colors].join(' ')}">${plainIcon}<span class="fi-dropdown-list-item-label">${e(label)}</span></a>`;
             return `<a href="${e(href)}" wire:navigate wire:key="${e(wireKey)}" class="${['fi-dropdown-list-item', 'fi-ac-grouped-action', ...colors].join(' ')}" role="menuitem" tabindex="-1">${plainIcon}<span class="fi-dropdown-list-item-label">${e(label)}</span></a>`;
         }
         if (this._disabled !== false) {
-            // Désactivation conditionnelle : Filament passe alors par sa vue Blade, que l'action soit active ou non (ordre des classes différent).
+            // Conditionally disabled: this markup is used whether or not the action ends up disabled.
             const disabled = await this.isDisabled(ctx);
             return `<button ${disabled ? 'aria-disabled="true" ' : ''}role="menuitem" tabindex="-1" type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="${['fi-ac-grouped-action', 'fi-dropdown-list-item', disabled ? 'fi-disabled' : null, ...colors].filter(Boolean).join(' ')}" wire:click="${expression}" wire:key="${e(wireKey)}">${inner}</button>`;
         }
@@ -237,10 +237,10 @@ export class Action {
         }
         return `<button type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" wire:click="${expression}" wire:key="${e(wireKey)}" class="${['fi-dropdown-list-item', 'fi-ac-grouped-action', ...colors].join(' ')}" role="menuitem" tabindex="-1">${inner}</button>`;
     }
-    /** Lien d'une action de ligne de table (`fi-ac-link-action`) — port de l'action « link » en petite taille. */
+    /** Small link (or icon button) for a table row action. */
     async toLinkHtml(ctx, context, wireKey) {
         if (!colorManager)
-            throw new Error('Aucun gestionnaire de couleurs : appelez useColorManager().');
+            throw new Error('No color manager: call useColorManager() first.');
         const color = this._lazyColor ? await this._lazyColor(ctx) : this._color;
         const iconName = this._lazyIcon ? await this._lazyIcon(ctx) : (this._tableIcon ?? this._icon);
         const raw = `mountAction(${js(this.name)}, {}, ${js(context)})`;
@@ -253,27 +253,26 @@ export class Action {
             return `<button title="${e(label)}" aria-label="${e(label)}" ${disabled ? 'disabled ' : ''}type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="${buttonClasses}"${disabled ? '' : ` wire:click="${e(raw)}"`} wire:key="${e(wireKey)}">${glyph}${loadingIndicator(new Attributes({ 'wire:loading.delay.default': '', 'wire:target': raw }))}</button>`;
         }
         const iconHtml = iconName ? icon(iconName, { size: 'sm', attributes: new Attributes({ 'wire:loading.remove.delay.default': '1', 'wire:target': raw }) }) : '';
-        // Action de navigation : un lien vers la page, sans montage côté serveur.
         const href = this._lazyUrl ? this._lazyUrl(ctx) : this._url;
         const tooltip = await this.tooltipAttribute(ctx);
-        // Seules les adresses locales ou http(s) deviennent des liens.
+        // Only local or http(s) URLs become links (no `javascript:` or protocol-relative URLs).
         if (href && /^(\/(?!\/)|https?:\/\/)/.test(href))
             return `<a href="${e(href)}" ${this._newTab ? 'target="_blank" ' : ''}${tooltip}${this._newTab ? '' : 'wire:navigate '}wire:key="${e(wireKey)}" class="${classes}">${iconName ? icon(iconName, { size: 'sm' }) : ''}<span class="fi-link-label">${e(label)}</span></a>`;
         const keys = this._keyBindings.length ? `x-bind:id="$id('key-bindings')" x-mousetrap.global.${this._keyBindings.map((k) => k.replace(/\+/g, '-')).join('.')}="document.getElementById($el.id)?.click()" ` : '';
         return `<button ${keys}${tooltip}type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="${classes}" wire:click="${e(raw)}" wire:key="${e(wireKey)}">${iconHtml}${loadingIndicator(new Attributes({ 'wire:loading.delay.default': '', 'wire:target': raw }), 'sm')}<span class="fi-link-label">${e(label)}</span></button>`;
     }
-    /** Fenêtre modale d'une action montée — port de filament-actions::action-modal et filament::components.modal (confirmation seulement). */
+    /** Modal of a mounted action; `content` is the rendered form, if any. */
     async toModalHtml(ctx, index, content = null) {
         if (!colorManager)
-            throw new Error('Aucun gestionnaire de couleurs : appelez useColorManager().');
+            throw new Error('No color manager: call useColorManager() first.');
         const schemaCtx = { livewire: ctx.livewire, component: null, operation: null, record: ctx.record, get: () => undefined, state: undefined };
         const label = (await evaluate(this._label, schemaCtx)) ?? this.getDefaultLabel();
         const color = this._lazyColor ? await this._lazyColor(schemaCtx) : this._color;
         const confirmation = this._requiresConfirmation;
-        // Comme Filament : une confirmation est centrée (md) ; un formulaire est aligné au début (4xl), sauf en petite largeur.
+        // A confirmation is centered (md); a form is start-aligned (4xl), except at small widths.
         const width = this._modalWidth ?? (confirmation ? 'md' : '4xl');
         const submitLabel = this._modalSubmitActionLabel ?? t(confirmation ? 'filament-actions::modal.actions.confirm.label' : 'filament-actions::modal.actions.submit.label');
-        // Même ordre que filament-actions::action-modal : contenu libre, schéma, pied de contenu, chacun entre ses deux emplacements.
+        // Hook order: custom content, schema, content footer, each between its before/after slots.
         const scopes = ctx.livewire.getRenderHookScopes?.() ?? [];
         const hook = (name) => renderHook(name, scopes, { action: this });
         const hooked = hook(ActionsRenderHook.MODAL_CUSTOM_CONTENT_BEFORE) + hook(ActionsRenderHook.MODAL_CUSTOM_CONTENT_AFTER)
@@ -288,31 +287,31 @@ export class Action {
             description: (await evaluate(this._modalDescription, ctx)) ?? (this._requiresConfirmation ? t('filament-actions::modal.confirmation') : null),
             iconName: this._modalIcon ?? (this._requiresConfirmation ? 'o-exclamation-triangle' : null), color,
             cancel: await Action.make('cancel').label(this._cancelLabel ?? t('filament-actions::modal.actions.cancel.label')).color('gray').alpineClickHandler('close()').toHtml(schemaCtx),
-            // Comme Filament : le bouton de validation d'une action grise est en couleur primaire.
+            // The submit button of a gray action uses the primary color.
             submit: !this._hasSubmit ? '' : (await Action.make('submit').label(submitLabel).color(color === 'gray' ? 'primary' : color).submit('callMountedAction').toHtml(schemaCtx)) + (await Promise.all(this._extraModalFooterActions.map((a) => a.toHtml(schemaCtx)))).join(''),
         });
     }
     alpineClickHandler(handler) { this._alpineClick = handler; return this; }
     _livewireTarget = null;
     _iconAfter = false;
-    /** Cible de l'indicateur de chargement (`wire:target`), quand le clic est géré par du JavaScript. */
+    /** Loading indicator target (`wire:target`) when the click is handled in JavaScript. */
     livewireTarget(target) { this._livewireTarget = target; return this; }
-    /** Icône (et indicateur de chargement) après le libellé : `'after'`. */
+    /** `'after'` puts the icon (and loading indicator) after the label. */
     iconPosition(position) { this._iconAfter = position === 'after'; return this; }
     keyBindings(bindings) { this._keyBindings = bindings; return this; }
     getName() { return this.name; }
     _authorize = true;
-    /** Condition d'autorisation, distincte de `visible` / `hidden` : non remplie, l'action est masquée et refusée par le serveur. */
+    /** Authorization check, separate from `visible` / `hidden`: when it fails, the action is hidden and the server refuses it. */
     authorize(condition) { this._authorize = condition; return this; }
     async isVisible(ctx) { return !(await evaluate(this._hidden, ctx)) && (await evaluate(this._visible, ctx)) && Boolean(await evaluate(this._authorize, ctx)); }
     visible(condition = true) { this._visible = condition; return this; }
-    /** Action affichée mais inutilisable ; le serveur refuse aussi de la monter. */
+    /** Shown but unusable; the server also refuses to mount it. */
     disabled(condition = true) { this._disabled = condition; return this; }
     async isDisabled(ctx) { return evaluate(this._disabled, ctx); }
-    /** Bouton plein — port de la vue `filament::components.button` pour une action de soumission. */
+    /** Renders the action as a button (or as a link when it has a URL). */
     async toHtml(ctx, explicitMountContext = null) {
         if (!colorManager)
-            throw new Error('Aucun gestionnaire de couleurs : appelez useColorManager().');
+            throw new Error('No color manager: call useColorManager() first.');
         const linkUrl = this._lazyUrl ? this._lazyUrl(ctx) : this._url;
         if (linkUrl !== null && /^(\/(?!\/)|https?:\/\/)/.test(linkUrl)) {
             const link = new Attributes().class(['fi-ac-btn-action', 'fi-btn', `fi-size-${this._size}`, ...(this._color !== 'gray' ? colorManager.getComponentClasses('button', this._color) : [])]);
@@ -322,9 +321,9 @@ export class Action {
             return `<a href="${e(linkUrl)}" ${this._newTab ? 'target="_blank" ' : ''}${await this.tooltipAttribute(ctx)}${this._newTab ? '' : 'wire:navigate '}${link.toHtml()}>${linkIcon}${e((await evaluate(this._label, ctx)) ?? this.getDefaultLabel())}${badgeHtml}</a>`;
         }
         const isSubmit = this._submit !== null;
-        // Action à traitement : le clic monte l'action côté serveur, avec le contexte fourni par l'hôte (ex. l'enregistrement).
+        // Handler action: the click mounts the action on the server, with the host's context (e.g. the record).
         const mountContext = explicitMountContext ?? ctx.livewire?.getActionMountContext?.() ?? {};
-        // Sans contexte, Filament émet la forme courte `mountAction('nom')`.
+        // Without context, the short form `mountAction('name')` is emitted.
         const mountExpression = this._handler ? (Object.keys(mountContext).length ? `mountAction(${js(this.name)}, {}, ${js(mountContext)})` : `mountAction(${js(this.name)})`) : null;
         const attributes = new Attributes()
             .merge({
@@ -349,16 +348,16 @@ export class Action {
         });
     }
 }
-/** Groupe d'actions replié dans un menu déroulant (port de ActionGroup, bouton-icône « ⋮ »). */
+/** Group of actions collapsed into a dropdown behind a "⋮" icon button. */
 export class ActionGroup {
     actions;
     constructor(actions) { this.actions = actions; }
     static make(actions) { return configured(new ActionGroup(actions)); }
     getActions() { return this.actions; }
-    /** `keyOf` donne la clé `wire:key` de chaque action (elle dépend de l'enregistrement). */
+    /** `keyOf` returns each action's `wire:key` (it depends on the record). */
     async toHtml(ctx, context, keyOf) {
         if (!colorManager)
-            throw new Error('Aucun gestionnaire de couleurs : appelez useColorManager().');
+            throw new Error('No color manager: call useColorManager() first.');
         const items = [];
         for (const action of this.actions)
             if (await action.isVisible(ctx))

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@navette-js/actions",
-  "version": "1.0.0-beta.1",
-  "description": "Actions and modals for Navette, the Node.js port of Filament.",
+  "version": "1.0.0-beta.3",
+  "description": "Actions and modals for Navette admin panels.",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -31,7 +31,6 @@
   },
   "keywords": [
     "navette",
-    "filament",
     "admin",
     "panel",
     "livewire",
@@ -39,8 +38,8 @@
     "node"
   ],
   "dependencies": {
-    "@navette-js/support": "1.0.0-beta.1",
-    "@navette-js/schemas": "1.0.0-beta.1"
+    "@navette-js/support": "1.0.0-beta.3",
+    "@navette-js/schemas": "1.0.0-beta.3"
   },
   "publishConfig": {
     "access": "public",

package/views/button.ejs

@@ -1,4 +1,4 @@
-<%# Bouton d'action — port de la vue Blade filament::components.button %>
+<%# Action button; submit buttons show a processing message while the form is submitting. %>
 <button <%- keyBindings %><% if (isSubmit) { %>x-data="filamentFormButton" x-bind:class="{ 'fi-processing': isProcessing }" <% } %><%- attributes %>>
     <% if (!iconAfter) { %><%- iconHtml %><% if (hasWireLoader) { %><%- wireLoader %><% } %><% if (isSubmit) { %><%- formLoader %><% } %><% } %>
     <% if (isSubmit) { %>

package/views/modal.ejs

@@ -1,4 +1,4 @@
-<%# Modale d'une action montée — port de filament-actions::action-modal et filament::components.modal (modale de confirmation, centrée, largeur md) %>
+<%# Modal of a mounted action (confirmation or form). Closing it unmounts the action. %>
 <div wire:partial="action-modals.<%- index %>"<% if (description) { %> aria-describedby="<%= id %>.description"<% } %> aria-labelledby="<%= id %>.heading" aria-modal="true" id="<%= id %>" role="<%- confirmation ? 'alertdialog' : 'dialog' %>" tabindex="-1" x-data="filamentModal({
                 id: <%- js(id) %>,
                 isScrollLocked: true,
@@ -37,7 +37,7 @@
                 </div>
             </div>
 
-            <%# Les six emplacements de ActionsRenderHook sont assemblés dans `content` par Action.toModalHtml(). %>
+            <%# The six ActionsRenderHook slots are already assembled into `content` by Action.toModalHtml(). %>
             <% if (content !== null) { %>
                 <div wire:key="<%= livewireId %>.modal.<%= id %>.content" class="fi-modal-content">
                     <%- content %>
@@ -46,7 +46,7 @@
 
             <div wire:key="<%= livewireId %>.modal.<%= id %>.footer" class="fi-modal-footer fi-align-<%- confirmation ? 'center' : 'start' %>">
                 <div class="fi-modal-footer-actions">
-                    <%# Confirmation : annuler puis confirmer ; formulaire : valider puis annuler (comme Filament) %>
+                    <%# Confirmation: cancel then confirm; form: submit then cancel. %>
                     <%- confirmation ? cancel + submit : submit + cancel %>
                 </div>
             </div>