@navette-js/support 1.0.0-beta.4 → 1.0.0-beta.5

package/THIRD-PARTY-NOTICES.md

@@ -7,6 +7,7 @@ Navette is an independent project, not affiliated with or endorsed by the Filame
 | [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`), image editor icons (`@navette-js/support/icons/filament`) | MIT | `packages/panels/dist/FILAMENT-LICENSE.md`, `packages/support/icons/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` |
+| [QR Code generator library](https://www.nayuki.io/page/qr-code-generator-library) © Project Nayuki | Structure of the QR Code encoder (`@navette-js/panels`, `qr-code.ts`) | MIT | header of `packages/panels/src/qr-code.ts` |
 | [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` |
 
 Runtime dependencies installed from npm (Express, Knex, Objection, better-sqlite3, Tiptap, EJS, Busboy…) keep their own licenses.

package/data/lang.en-fr.json

@@ -956,9 +956,22 @@
    },
    "auth/multi-factor/app/actions/set-up": {
     "label": "Set up",
-    "modal.0": "{{but}}{{you\\}}ll need them if you lose access to your authenticator app:",
     "modal.heading": "Set up authenticator app",
-    "modal.description": "BLADE{{You}}ll need an app like Google Authenticator (<x-filament::link href=\"https://itunes.apple.com/us/app/google-authenticator/id388497605\" target=\"_blank\">iOS</x-filament::link>, <x-filament::link href=\"https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2\" target=\"_blank\">Android</x-filament::link>) to complete this process.\r\n            BLADE,\r\n\r\n        {{content}} => [\r\n\r\n            {{qr_code}} => [\r\n\r\n                {{instruction}} => {{Scan}}{{this}}{{QR}}{{code}}{{with}}{{your}}{{authenticator}}{{app:}},\r\n\r\n                {{alt}} => {{QR}}{{code}}{{to}}{{scan}}{{with}}{{an}}{{authenticator}}{{app}},\r\n\r\n            ],\r\n\r\n            {{text_code}} => [\r\n\r\n                {{instruction}} => {{Or}}{{enter}}{{this}}{{code}}{{manually:}},\r\n\r\n                {{messages}} => [\r\n                    {{copied}} => {{Copied}},\r\n                ],\r\n\r\n            ],\r\n\r\n            {{recovery_codes}} => [\r\n\r\n                {{instruction}} => {{Please}}{{save}}{{the}}{{following}}{{recovery}}{{codes}}{{in}}{{a}}{{safe}}{{place}}{{They}}{{will}}{{only}}{{be}}{{shown}}{{once}}"
+    "modal.description": "You'll need an app like Google Authenticator (<x-filament::link href=\"https://itunes.apple.com/us/app/google-authenticator/id388497605\" target=\"_blank\">iOS</x-filament::link>, <x-filament::link href=\"https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2\" target=\"_blank\">Android</x-filament::link>) to complete this process.",
+    "modal.content.qr_code.instruction": "Scan this QR code with your authenticator app:",
+    "modal.content.qr_code.alt": "QR code to scan with an authenticator app",
+    "modal.content.text_code.instruction": "Or enter this code manually:",
+    "modal.content.text_code.messages.copied": "Copied",
+    "modal.content.recovery_codes.instruction": "Please save the following recovery codes in a safe place. They will only be shown once, but you'll need them if you lose access to your authenticator app:",
+    "modal.form.password.label": "Current password",
+    "modal.form.password.validation_attribute": "current password",
+    "modal.form.code.label": "Enter the 6-digit code from the authenticator app",
+    "modal.form.code.validation_attribute": "code",
+    "modal.form.code.below_content": "You will need to enter the 6-digit code from your authenticator app each time you sign in or perform sensitive actions.",
+    "modal.form.code.messages.invalid": "The code you entered is invalid.",
+    "modal.form.code.messages.rate_limited": "Too many attempts. Please try again later.",
+    "modal.actions.submit.label": "Enable authenticator app",
+    "notifications.enabled.title": "Authenticator app has been enabled"
    },
    "auth/multi-factor/app/provider": {
     "management_schema.actions.label": "Authenticator app",
@@ -1060,7 +1073,12 @@
     "notifications.saved.title": "Saved",
     "notifications.throttled.title": "Too many requests. Please try again in :seconds seconds.",
     "notifications.throttled.body": "Please try again in :seconds seconds.",
-    "actions.cancel.label": "Cancel"
+    "actions.cancel.label": "Cancel",
+    "sections.information.heading": "Profile information",
+    "sections.information.description": "Your name and the email address you sign in with.",
+    "sections.password.heading": "Password",
+    "sections.password.description": "Use a long, random password to keep your account secure.",
+    "multi_factor_authentication.description": "A second step after your password: a code from an app, a code by email or a security key."
    },
    "auth/pages/email-verification/email-verification-prompt": {
     "title": "Verify your email address",
@@ -1210,6 +1228,77 @@
    "widgets/filament-info-widget": {
     "actions.open_documentation.label": "Documentation",
     "actions.open_github.label": "GitHub"
+   },
+   "auth/multi-factor/security-keys/provider": {
+    "login_form.label": "Use a security key",
+    "login_form.credential.label": "Security key",
+    "login_form.credential.validation_attribute": "security key",
+    "login_form.credential.messages.invalid": "The security key could not be verified.",
+    "management_schema.actions.label": "Security keys",
+    "management_schema.actions.below_content": "Use a physical security key or a passkey saved on your device to verify your identity.",
+    "management_schema.actions.messages.enabled": "Enabled",
+    "management_schema.actions.messages.disabled": "Disabled",
+    "management_schema.actions.messages.added": "Added on :date",
+    "management_schema.actions.messages.last_used": "Last used on :date"
+   },
+   "auth/multi-factor/security-keys/actions/register": {
+    "label": "Add a security key",
+    "modal.heading": "Add a security key",
+    "modal.description": "Give the key a name, then follow your browser's instructions.",
+    "modal.form.name.label": "Name",
+    "modal.form.name.placeholder": "My security key",
+    "modal.form.credential.label": "Security key",
+    "modal.form.credential.validation_attribute": "security key",
+    "modal.form.credential.messages.invalid": "The security key could not be registered. Try again.",
+    "modal.form.credential.messages.rate_limited": "Too many attempts. Please try again later.",
+    "modal.form.password.label": "Current password",
+    "modal.form.password.validation_attribute": "current password",
+    "modal.actions.submit.label": "Add security key",
+    "notifications.registered.title": "Security key added"
+   },
+   "auth/multi-factor/security-keys/actions/remove": {
+    "label": "Remove a key",
+    "modal.heading": "Remove a security key",
+    "modal.description": "The key will no longer be accepted to sign in.",
+    "modal.form.key.label": "Key",
+    "modal.form.password.label": "Current password",
+    "modal.form.password.validation_attribute": "current password",
+    "modal.actions.submit.label": "Remove key",
+    "notifications.removed.title": "Security key removed"
+   },
+   "auth/multi-factor/security-keys/field": {
+    "actions.register.label": "Use my security key",
+    "actions.authenticate.label": "Use my security key",
+    "messages.waiting": "Follow your browser's instructions…",
+    "messages.registered": "Security key ready: submit the form to add it.",
+    "messages.verified": "Security key verified.",
+    "messages.cancelled": "The operation was cancelled or timed out.",
+    "messages.unsupported": "This browser does not support security keys.",
+    "messages.failed": "The security key could not be used. Try again."
+   },
+   "errors": {
+    "label": "Error :code",
+    "actions.home": "Back to home",
+    "actions.back": "Go back",
+    "actions.retry": "Try again",
+    "actions.login": "Sign in",
+    "details": "Error details",
+    "401.title": "Sign in to board",
+    "401.description": "You need to be signed in to open this page.",
+    "403.title": "This line is closed to you",
+    "403.description": "You don’t have permission to open this page. If you think you should, ask an administrator.",
+    "403.invalid_link": "This link is invalid or has expired.",
+    "403.email_change_blocked": "This email address change was blocked.",
+    "404.title": "Lost in the clouds",
+    "404.description": "The page you are looking for doesn’t exist or has been moved.",
+    "419.title": "Your cabin has left",
+    "419.description": "This page expired after a long time without activity. Reload it and try again.",
+    "429.title": "Rush hour",
+    "429.description": "Too many requests in a short time. Wait a moment before trying again.",
+    "500.title": "The cable snapped",
+    "500.description": "Something went wrong on our side. Try again in a few moments.",
+    "503.title": "Line under maintenance",
+    "503.description": "We’re servicing the line. We’ll be back very soon."
    }
   },
   "fr": {
@@ -1257,11 +1346,20 @@
    "auth/multi-factor/app/actions/set-up": {
     "label": "Configurer",
     "modal.heading": "Configurer l'application d'authentification",
-    "modal.description": "BLADE{{Vous}}{{aurez}}{{besoin}}{{d}}une application comme Google Authenticator (<x-filament::link href=\"https://itunes.apple.com/us/app/google-authenticator/id388497605\" target=\"_blank\">iOS</x-filament::link>, <x-filament::link href=\"https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2\" target=\"_blank\">Android</x-filament::link>) pour compléter cette procédure.\r\n            BLADE,\r\n\r\n        {{content}} => [\r\n\r\n            {{qr_code}} => [\r\n\r\n                {{instruction}} => {{Scannez}}{{ce}}{{QR}}{{code}}{{avec}}{{votre}}{{application}}{{d\\}}authentification :",
-    "modal.alt": "QR code à scanner avec une application d'authentification",
-    "text_code.instruction": "Ou entrez ce code manuellement :",
-    "text_code.messages.copied": "Copié",
-    "recovery_codes.instruction": "Veuillez enregistrer les codes de récupération suivants dans un endroit sécurisé. Ils ne seront affichés qu'une fois, mais vous en aurez besoin si vous perdez l'accès à votre application d'authentification :"
+    "modal.description": "Vous aurez besoin d'une application comme Google Authenticator (<x-filament::link href=\"https://itunes.apple.com/us/app/google-authenticator/id388497605\" target=\"_blank\">iOS</x-filament::link>, <x-filament::link href=\"https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2\" target=\"_blank\">Android</x-filament::link>) pour compléter cette procédure.",
+    "modal.content.qr_code.instruction": "Scannez ce QR code avec votre application d'authentification :",
+    "modal.content.qr_code.alt": "QR code à scanner avec une application d'authentification",
+    "modal.content.text_code.instruction": "Ou entrez ce code manuellement :",
+    "modal.content.text_code.messages.copied": "Copié",
+    "modal.content.recovery_codes.instruction": "Veuillez enregistrer les codes de récupération suivants dans un endroit sécurisé. Ils ne seront affichés qu'une fois, mais vous en aurez besoin si vous perdez l'accès à votre application d'authentification :",
+    "modal.form.password.label": "Mot de passe actuel",
+    "modal.form.password.validation_attribute": "mot de passe actuel",
+    "modal.form.code.label": "Entrez le code à 6 chiffres de l'application d'authentification",
+    "modal.form.code.validation_attribute": "code",
+    "modal.form.code.below_content": "Vous devrez entrer le code à 6 chiffres de votre application d'authentification à chaque fois que vous vous connecterez ou effectuerez des actions sensibles.",
+    "modal.form.code.messages.invalid": "Le code que vous avez entré est invalide.",
+    "modal.actions.submit.label": "Activer l'application d'authentification",
+    "notifications.enabled.title": "L'application d'authentification a été activée"
    },
    "auth/multi-factor/app/provider": {
     "management_schema.actions.label": "Application d'authentification",
@@ -1356,7 +1454,12 @@
     "notifications.email_change_verification_sent.title": "Demande de modification de l'adresse email envoyée",
     "notifications.email_change_verification_sent.body": "Une demande de modification de votre adresse email a été envoyée à :email. Veuillez vérifier votre email pour vérifier la modification.",
     "notifications.saved.title": "Sauvegardé",
-    "actions.cancel.label": "Annuler"
+    "actions.cancel.label": "Annuler",
+    "sections.information.heading": "Informations du profil",
+    "sections.information.description": "Votre nom et l'adresse e-mail avec laquelle vous vous connectez.",
+    "sections.password.heading": "Mot de passe",
+    "sections.password.description": "Utilisez un mot de passe long et aléatoire pour sécuriser votre compte.",
+    "multi_factor_authentication.description": "Une seconde étape après le mot de passe : un code d'application, un code par e-mail ou une clé de sécurité."
    },
    "auth/pages/email-verification/email-verification-prompt": {
     "title": "Vérifier votre adresse email",
@@ -1493,6 +1596,77 @@
    "widgets/filament-info-widget": {
     "actions.open_documentation.label": "Documentation",
     "actions.open_github.label": "GitHub"
+   },
+   "auth/multi-factor/security-keys/provider": {
+    "login_form.label": "Utiliser une clé de sécurité",
+    "login_form.credential.label": "Clé de sécurité",
+    "login_form.credential.validation_attribute": "clé de sécurité",
+    "login_form.credential.messages.invalid": "La clé de sécurité n'a pas pu être vérifiée.",
+    "management_schema.actions.label": "Clés de sécurité",
+    "management_schema.actions.below_content": "Utilisez une clé de sécurité physique ou une clé d'accès enregistrée sur votre appareil pour vérifier votre identité.",
+    "management_schema.actions.messages.enabled": "Activées",
+    "management_schema.actions.messages.disabled": "Désactivées",
+    "management_schema.actions.messages.added": "Ajoutée le :date",
+    "management_schema.actions.messages.last_used": "Utilisée le :date"
+   },
+   "auth/multi-factor/security-keys/actions/register": {
+    "label": "Ajouter une clé de sécurité",
+    "modal.heading": "Ajouter une clé de sécurité",
+    "modal.description": "Donnez un nom à la clé, puis suivez les instructions de votre navigateur.",
+    "modal.form.name.label": "Nom",
+    "modal.form.name.placeholder": "Ma clé de sécurité",
+    "modal.form.credential.label": "Clé de sécurité",
+    "modal.form.credential.validation_attribute": "clé de sécurité",
+    "modal.form.credential.messages.invalid": "La clé de sécurité n'a pas pu être enregistrée. Réessayez.",
+    "modal.form.credential.messages.rate_limited": "Trop de tentatives. Veuillez réessayer plus tard.",
+    "modal.form.password.label": "Mot de passe actuel",
+    "modal.form.password.validation_attribute": "mot de passe actuel",
+    "modal.actions.submit.label": "Ajouter la clé",
+    "notifications.registered.title": "Clé de sécurité ajoutée"
+   },
+   "auth/multi-factor/security-keys/actions/remove": {
+    "label": "Retirer une clé",
+    "modal.heading": "Retirer une clé de sécurité",
+    "modal.description": "La clé ne sera plus acceptée pour se connecter.",
+    "modal.form.key.label": "Clé",
+    "modal.form.password.label": "Mot de passe actuel",
+    "modal.form.password.validation_attribute": "mot de passe actuel",
+    "modal.actions.submit.label": "Retirer la clé",
+    "notifications.removed.title": "Clé de sécurité retirée"
+   },
+   "auth/multi-factor/security-keys/field": {
+    "actions.register.label": "Utiliser ma clé de sécurité",
+    "actions.authenticate.label": "Utiliser ma clé de sécurité",
+    "messages.waiting": "Suivez les instructions de votre navigateur…",
+    "messages.registered": "Clé prête : validez le formulaire pour l'ajouter.",
+    "messages.verified": "Clé de sécurité vérifiée.",
+    "messages.cancelled": "L'opération a été annulée ou a expiré.",
+    "messages.unsupported": "Ce navigateur ne prend pas en charge les clés de sécurité.",
+    "messages.failed": "La clé de sécurité n'a pas pu être utilisée. Réessayez."
+   },
+   "errors": {
+    "label": "Erreur :code",
+    "actions.home": "Retour à l’accueil",
+    "actions.back": "Page précédente",
+    "actions.retry": "Réessayer",
+    "actions.login": "Se connecter",
+    "details": "Détails de l’erreur",
+    "401.title": "Connectez-vous pour embarquer",
+    "401.description": "Vous devez être connecté pour ouvrir cette page.",
+    "403.title": "Cette ligne vous est fermée",
+    "403.description": "Vous n’avez pas l’autorisation d’ouvrir cette page. Si vous pensez que c’est une erreur, contactez un administrateur.",
+    "403.invalid_link": "Ce lien est invalide ou a expiré.",
+    "403.email_change_blocked": "Ce changement d’adresse e-mail a été bloqué.",
+    "404.title": "Perdu dans les nuages",
+    "404.description": "La page que vous cherchez n’existe pas ou a été déplacée.",
+    "419.title": "Votre cabine est partie",
+    "419.description": "Cette page a expiré après une longue inactivité. Rechargez-la puis réessayez.",
+    "429.title": "Heure de pointe",
+    "429.description": "Trop de requêtes en peu de temps. Patientez un instant avant de réessayer.",
+    "500.title": "Le câble a lâché",
+    "500.description": "Une erreur est survenue de notre côté. Réessayez dans quelques instants.",
+    "503.title": "Ligne en maintenance",
+    "503.description": "Nous entretenons la ligne. Nous revenons très vite."
    }
   }
  },
@@ -2087,4 +2261,4 @@
    }
   }
  }
-}
+}

package/icons/filament/m-pencil-slash.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" aria-hidden="true" data-slot="icon">
+    <line x1="3.41348" y1="3.0456" x2="17.0456" y2="17.5865" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+    <path d="M9.70948 13.2891L6.58057 16.4189C6.19757 16.8021 5.74077 17.1034 5.2378 17.3047L2.08253 18.5674C1.99181 18.6036 1.89208 18.6124 1.79639 18.5928C1.70063 18.5731 1.6126 18.5252 1.54346 18.4561C1.47439 18.3869 1.42737 18.2989 1.40772 18.2031C1.38808 18.1073 1.39676 18.0078 1.43311 17.917L2.69483 14.7617C2.89583 14.2589 3.19684 13.802 3.5796 13.4189L6.80518 10.1924L9.70948 13.2891ZM15.9995 1.87988C16.562 1.87988 17.1017 2.10331 17.4995 2.50098C17.8973 2.8988 18.1216 3.43838 18.1216 4.00098C18.1216 4.56359 17.8973 5.10315 17.4995 5.50098L12.8315 10.168L9.92823 7.07031L14.4995 2.50098C14.8972 2.10327 15.4371 1.88001 15.9995 1.87988Z" fill="currentColor"/>
+</svg>

package/icons/filament/o-align-center.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M4 6l16 0" />
+    <path d="M8 12l8 0" />
+    <path d="M6 18l12 0" />
+</svg>

package/icons/filament/o-align-end.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M4 6l16 0" />
+    <path d="M10 12l10 0" />
+    <path d="M6 18l14 0" />
+</svg>

package/icons/filament/o-align-justify.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M4 6l16 0" />
+    <path d="M4 12l16 0" />
+    <path d="M4 18l12 0" />
+</svg>

package/icons/filament/o-align-start.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M4 6l16 0" />
+    <path d="M4 12l10 0" />
+    <path d="M4 18l14 0" />
+</svg>

package/icons/filament/o-clear-formatting.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M17 15l4 4m0 -4l-4 4" />
+    <path d="M7 6v-1h11v1" />
+    <path d="M7 19l4 0" />
+    <path d="M13 5l-4 14" />
+</svg>

package/icons/filament/o-code-block.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M14.5 4h2.5a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-10a3 3 0 0 1 -3 -3v-5" />
+    <path d="M6 5l-2 2l2 2" />
+    <path d="M10 9l2 -2l-2 -2" />
+</svg>

package/icons/filament/o-code.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M7 8l-4 4l4 4" />
+    <path d="M17 8l4 4l-4 4" />
+    <path d="M14 4l-4 16" />
+</svg>

package/icons/filament/o-columns-delete.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M4 6h2" />
+    <path d="M4 10h5.5" />
+    <path d="M4 14h5.5" />
+    <path d="M4 18h5.5" />
+    <path d="M14.5 6h5.5" />
+    <path d="M14.5 10h5.5" />
+    <path d="M18 14h2" />
+    <path d="M14.5 18h3.5" />
+    <path d="M3 3l18 18" />
+</svg>

package/icons/filament/o-columns.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M4 6l5.5 0" />
+    <path d="M4 10l5.5 0" />
+    <path d="M4 14l5.5 0" />
+    <path d="M4 18l5.5 0" />
+    <path d="M14.5 6l5.5 0" />
+    <path d="M14.5 10l5.5 0" />
+    <path d="M14.5 14l5.5 0" />
+    <path d="M14.5 18l5.5 0" />
+</svg>

package/icons/filament/o-details.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M4 18v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
+    <path d="M4 9h16" />
+    <path d="M10 14l2 2l2 -2" />
+</svg>

package/icons/filament/o-h1.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M19 18v-8l-2 2" />
+    <path d="M4 6v12" />
+    <path d="M12 6v12" />
+    <path d="M11 18h2" />
+    <path d="M3 18h2" />
+    <path d="M4 12h8" />
+    <path d="M3 6h2" />
+    <path d="M11 6h2" />
+</svg>

package/icons/filament/o-h2.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M17 12a2 2 0 1 1 4 0c0 .591 -.417 1.318 -.816 1.858l-3.184 4.143l4 0" />
+    <path d="M4 6v12" />
+    <path d="M12 6v12" />
+    <path d="M11 18h2" />
+    <path d="M3 18h2" />
+    <path d="M4 12h8" />
+    <path d="M3 6h2" />
+    <path d="M11 6h2" />
+</svg>

package/icons/filament/o-h3.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M19 14a2 2 0 1 0 -2 -2" />
+    <path d="M17 16a2 2 0 1 0 2 -2" />
+    <path d="M4 6v12" />
+    <path d="M12 6v12" />
+    <path d="M11 18h2" />
+    <path d="M3 18h2" />
+    <path d="M4 12h8" />
+    <path d="M3 6h2" />
+    <path d="M11 6h2" />
+</svg>

package/icons/filament/o-h4.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M20 18v-8l-4 6h5" />
+    <path d="M4 6v12" />
+    <path d="M12 6v12" />
+    <path d="M11 18h2" />
+    <path d="M3 18h2" />
+    <path d="M4 12h8" />
+    <path d="M3 6h2" />
+    <path d="M11 6h2" />
+</svg>

package/icons/filament/o-h5.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M17 18h2a2 2 0 1 0 0 -4h-2v-4h4" />
+    <path d="M4 6v12" />
+    <path d="M12 6v12" />
+    <path d="M11 18h2" />
+    <path d="M3 18h2" />
+    <path d="M4 12h8" />
+    <path d="M3 6h2" />
+    <path d="M11 6h2" />
+</svg>

package/icons/filament/o-h6.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M19 14a2 2 0 1 0 0 4a2 2 0 0 0 0 -4" />
+    <path d="M21 12a2 2 0 1 0 -4 0v4" />
+    <path d="M4 6v12" />
+    <path d="M12 6v12" />
+    <path d="M11 18h2" />
+    <path d="M3 18h2" />
+    <path d="M4 12h8" />
+    <path d="M3 6h2" />
+    <path d="M11 6h2" />
+</svg>

package/icons/filament/o-heading.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M7 12h10" />
+    <path d="M7 5v14" />
+    <path d="M17 5v14" />
+    <path d="M15 19h4" />
+    <path d="M15 5h4" />
+    <path d="M5 19h4" />
+    <path d="M5 5h4" />
+</svg>

package/icons/filament/o-highlight.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M3 19h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" />
+    <path d="M12.5 5.5l4 4" />
+    <path d="M4.5 13.5l4 4" />
+    <path d="M21 15v4h-8l4 -4z" />
+</svg>

package/icons/filament/o-lead.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M4 19v-10.5a3.5 3.5 0 1 1 7 0v10.5" />
+    <path d="M4 13h7" />
+    <path d="M18 9v6" />
+    <path d="M21 12h-6" />
+</svg>

package/icons/filament/o-merge-tag.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M9 12h6" />
+    <path d="M12 9v6" />
+    <path d="M6 19a2 2 0 0 1 -2 -2v-4l-1 -1l1 -1v-4a2 2 0 0 1 2 -2" />
+    <path d="M18 19a2 2 0 0 0 2 -2v-4l1 -1l-1 -1v-4a2 2 0 0 0 -2 -2" />
+</svg>

package/icons/filament/o-paragraph.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M13 4v16" />
+    <path d="M17 4v16" />
+    <path d="M19 4h-9.5a4.5 4.5 0 0 0 0 9h3.5" />
+</svg>

package/icons/filament/o-small.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M4 19v-10.5a3.5 3.5 0 1 1 7 0v10.5" />
+    <path d="M4 13h7" />
+    <path d="M21 12h-6" />
+</svg>

package/icons/filament/o-subscript.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M5 7l8 10m-8 0l8 -10" />
+    <path d="M21 20h-4l3.5 -4a1.73 1.73 0 0 0 -3.5 -2" />
+</svg>

package/icons/filament/o-superscript.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M5 7l8 10m-8 0l8 -10" />
+    <path d="M21 11h-4l3.5 -4a1.73 1.73 0 0 0 -3.5 -2" />
+</svg>

package/icons/filament/o-table-add-column-after.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M6 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1z" />
+    <path d="M15 12l4 0" />
+    <path d="M17 10l0 4" />
+</svg>

package/icons/filament/o-table-add-column-before.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M14 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1z"/>
+    <path d="M5 12l4 0"/>
+    <path d="M7 10l0 4"/>
+</svg>

package/icons/filament/o-table-add-row-after.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M20 6v4a1 1 0 0 1 -1 1h-14a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h14a1 1 0 0 1 1 1z" />
+    <path d="M12 15l0 4" />
+    <path d="M14 17l-4 0" />
+</svg>

package/icons/filament/o-table-add-row-before.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M4 18v-4a1 1 0 0 1 1 -1h14a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-14a1 1 0 0 1 -1 -1z" />
+    <path d="M12 9v-4" />
+    <path d="M10 7l4 0" />
+</svg>

package/icons/filament/o-table-delete-column.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M6 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1z" />
+    <path d="M16 10l4 4" />
+    <path d="M16 14l4 -4" />
+</svg>

package/icons/filament/o-table-delete-row.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M20 6v4a1 1 0 0 1 -1 1h-14a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h14a1 1 0 0 1 1 1z" />
+    <path d="M10 16l4 4" />
+    <path d="M10 20l4 -4" />
+</svg>

package/icons/filament/o-table-delete.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M7 3h12a2 2 0 0 1 2 2v12m-.585 3.413a1.994 1.994 0 0 1 -1.415 .587h-14a2 2 0 0 1 -2 -2v-14c0 -.55 .223 -1.05 .583 -1.412"/>
+    <path d="M3 10h7m4 0h7"/>
+    <path d="M10 3v3m0 4v11"/>
+    <path d="M3 3l18 18"/>
+</svg>

package/icons/filament/o-table-merge-cells.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M12 21v-6"/>
+    <path d="M12 9V3"/>
+    <path d="M3 15h18"/>
+    <path d="M3 9h18"/>
+    <rect width="18" height="18" x="3" y="3" rx="2"/>
+</svg>

package/icons/filament/o-table-split-cell.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M12 15V9"/>
+    <path d="M3 15h18"/>
+    <path d="M3 9h18"/>
+    <rect width="18" height="18" x="3" y="3" rx="2"/>
+</svg>

package/icons/filament/o-table-toggle-header-cell.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M12 3v17a1 1 0 0 1-1 1H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6a1 1 0 0 1-1 1H3"/>
+    <path d="m16 19 2 2 4-4"/>
+</svg>

package/icons/filament/o-table-toggle-header-row.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <rect width="18" height="18" x="3" y="3" rx="2"/>
+    <path d="M14 9h1"/>
+    <path d="M19 9h2"/>
+    <path d="M3 9h2"/>
+    <path d="M9 9h1"/>
+</svg>

package/icons/filament/o-table.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z"/>
+    <path d="M3 10h18"/>
+    <path d="M10 3v18"/>
+</svg>

package/lib/components.d.ts

@@ -0,0 +1,6 @@
+/** Rewrites component tags to EJS. Templates without `<x-` are returned unchanged. */
+export declare function compileComponentTags(source: string, file?: string): string;
+/** Attribute names that go to the component's attribute bag instead of its props (HTML, Alpine and Livewire attributes). */
+export declare const isHtmlAttribute: (name: string) => boolean;
+/** `icon-position` → `iconPosition`. */
+export declare const camel: (name: string) => string;

package/lib/components.js

@@ -0,0 +1,130 @@
+// Component tags in EJS views: `<x-name …>…</x-name>`, `<x-name … />` and named slots (`<x-slot name="footer">` or `<x-slot:footer>`),
+// compiled to plain EJS before the template itself is compiled.
+//
+// A component's content is captured from the template's output buffer (`__output`, EJS's own variable): the
+// generated code remembers where the content starts, cuts it out once it is rendered, and passes it as the slot.
+const NAME = /^[A-Za-z0-9_.:-]+/;
+/** Escapes a string for a JavaScript string literal placed inside an EJS tag. */
+const literal = (value) => JSON.stringify(value).replace(/%>/g, '%\\x3e');
+function parseAttributes(source, tag) {
+    const attributes = [];
+    let rest = source.trim();
+    while (rest) {
+        const match = /^(:?)([A-Za-z_@][\w.:@-]*)(?:\s*=\s*("([^"]*)"|'([^']*)'))?/.exec(rest);
+        if (!match)
+            throw new Error(`Invalid attribute in <x-${tag}>: ${rest.slice(0, 40)}`);
+        const [whole, bound, name, quoted, double, single] = match;
+        const value = double ?? single ?? '';
+        attributes.push({ name, value, kind: bound ? 'expression' : quoted === undefined ? 'flag' : 'string' });
+        rest = rest.slice(whole.length).trim();
+    }
+    return attributes;
+}
+/** JavaScript object literal of a tag's attributes, evaluated in the template's scope. */
+function propsExpression(attributes) {
+    return `{ ${attributes.map((attribute) => `${literal(attribute.name)}: ${attribute.kind === 'expression' ? `(${attribute.value})` : attribute.kind === 'flag' ? 'true' : literal(attribute.value)}`).join(', ')} }`;
+}
+/** Finds the `>` that ends a tag, skipping quoted attribute values. */
+function tagEnd(source, from) {
+    let quote = null;
+    for (let index = from; index < source.length; index++) {
+        const char = source[index];
+        if (quote) {
+            if (char === quote)
+                quote = null;
+        }
+        else if (char === '"' || char === "'")
+            quote = char;
+        else if (char === '>')
+            return index;
+    }
+    return -1;
+}
+/** Rewrites component tags to EJS. Templates without `<x-` are returned unchanged. */
+export function compileComponentTags(source, file = 'template') {
+    if (!source.includes('<x-'))
+        return source;
+    let out = '<% var __xs = [], __xn = []; %>';
+    const open = [];
+    let index = 0;
+    const capture = '<% __xs.push(__output.length); %>';
+    const cut = 'const __s = __output.slice(__xs.pop()); __output = __output.slice(0, __output.length - __s.length);';
+    while (index < source.length) {
+        const next = source.indexOf('<', index);
+        if (next === -1) {
+            out += source.slice(index);
+            break;
+        }
+        out += source.slice(index, next);
+        // EJS tags (code, output, comments) are copied as they are: a tag quoted in a comment is not a component.
+        if (source.startsWith('<%', next)) {
+            const ejsEnd = source.indexOf('%>', next + 2);
+            if (ejsEnd === -1) {
+                out += source.slice(next);
+                break;
+            }
+            out += source.slice(next, ejsEnd + 2);
+            index = ejsEnd + 2;
+            continue;
+        }
+        const closing = source.startsWith('</x-', next);
+        if (!closing && !source.startsWith('<x-', next)) {
+            out += '<';
+            index = next + 1;
+            continue;
+        }
+        const nameStart = next + (closing ? 4 : 3);
+        const name = NAME.exec(source.slice(nameStart))?.[0];
+        if (!name) {
+            out += '<';
+            index = next + 1;
+            continue;
+        }
+        const end = tagEnd(source, nameStart + name.length);
+        if (end === -1)
+            throw new Error(`${file}: unclosed tag <x-${name}`);
+        const body = source.slice(nameStart + name.length, end);
+        index = end + 1;
+        if (closing) {
+            const current = open.pop();
+            const closesSlot = name === 'slot' && current?.name.startsWith('slot');
+            if (!current || (current.name !== name && !closesSlot))
+                throw new Error(`${file}: </x-${name}> does not close ${current ? `<x-${current.name}>` : 'any tag'}`);
+            if (name === 'slot' || name.startsWith('slot:'))
+                out += `<% { ${cut} __xn[__xn.length - 1][${current.props}] = __s; } %>`;
+            else
+                out += `<% { ${cut} const __n = __xn.pop(); %><%- __component(${literal(name)}, ${current.props}, __s, __n) %><% } %>`;
+            continue;
+        }
+        const selfClosing = body.trimEnd().endsWith('/');
+        const attributes = parseAttributes(selfClosing ? body.trimEnd().slice(0, -1) : body, name);
+        if (name === 'slot' || name.startsWith('slot:')) {
+            const slotName = name.startsWith('slot:') ? name.slice(5) : attributes.find((attribute) => attribute.name === 'name')?.value;
+            if (!slotName)
+                throw new Error(`${file}: <x-slot> needs a name`);
+            if (!open.length)
+                throw new Error(`${file}: <x-slot name="${slotName}"> must be inside a component`);
+            if (selfClosing) {
+                out += `<% __xn[__xn.length - 1][${literal(slotName)}] = ''; %>`;
+                continue;
+            }
+            open.push({ name, props: literal(slotName) });
+            out += capture;
+            continue;
+        }
+        const props = propsExpression(attributes);
+        if (selfClosing) {
+            out += `<%- __component(${literal(name)}, ${props}, '', {}) %>`;
+            continue;
+        }
+        open.push({ name, props });
+        out += `<% __xn.push({}); %>${capture}`;
+    }
+    if (open.length)
+        throw new Error(`${file}: <x-${open[open.length - 1].name}> is never closed`);
+    return out;
+}
+/** Attribute names that go to the component's attribute bag instead of its props (HTML, Alpine and Livewire attributes). */
+export const isHtmlAttribute = (name) => /^(class|style|id)$/.test(name) || /^(x-|data-|aria-|wire:|@)/.test(name) || name.includes(':');
+/** `icon-position` → `iconPosition`. */
+export const camel = (name) => name.replace(/-([a-z0-9])/g, (_match, char) => char.toUpperCase());

package/lib/index.d.ts

@@ -119,18 +119,42 @@ export declare function icon(name: string, options?: {
 export declare function registerIcon(name: string, svg: string): void;
 /** Loading spinner SVG. */
 export declare function loadingIndicator(attributes?: Attributes, size?: string): string;
-/** View registry: `filament-forms::components.text-input` resolves to an EJS file; override directories are checked first. */
+/** Renders a component from its props (camelCased, named slots included), its attribute bag and its default slot (HTML). */
+export type ComponentRenderer = (props: Record<string, any> & {
+    attributes: Record<string, any>;
+}, slot: string) => string;
+/**
+ * View registry: `filament-forms::components.text-input` resolves to an EJS file; override directories are checked first.
+ * Views may use component tags (`<x-section heading="Orders">…</x-section>`): built-in components, components registered with
+ * `component()`, and EJS files of the directories given to `components()`.
+ */
 export declare class ViewRegistry {
     private namespaces;
     private overrides;
     private compiled;
     private shared;
+    private componentRenderers;
+    private componentDirectories;
+    /** Registers a component rendered by a function: `<x-name>` in any view. Registering an existing name replaces it. */
+    component(name: string, renderer: ComponentRenderer): this;
+    /**
+     * Directory of EJS components: `<x-card>` renders `<dir>/card.ejs`, `<x-forms.field>` renders `<dir>/forms/field.ejs`.
+     * The view receives its props, `slot` (the content, already rendered), `slots` (named slots) and `attributes` (HTML attributes).
+     * Directories registered later win, and files win over components registered with `component()`.
+     */
+    components(directory: string | URL): this;
+    hasComponent(name: string): boolean;
+    private componentFile;
+    /** Renders a component tag. HTML, Alpine and Livewire attributes go to the attribute bag; the others become camelCased props. */
+    renderComponent(name: string, raw: Record<string, unknown>, slot?: string, slots?: Record<string, string>): string;
     namespace(name: string, dir: string): this;
     /** 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;
+    /** Renders an EJS file directly (component files, page views given by path). */
+    renderFile(file: string, data?: Record<string, unknown>, cacheKey?: string): string;
 }
 export declare const views: ViewRegistry;
 /** Registers a callback applied to every instance of the class (and its subclasses) created afterwards by `make()`. */

package/lib/index.js

@@ -1,4 +1,5 @@
 import { AsyncLocalStorage } from 'node:async_hooks';
+import { camel, compileComponentTags, isHtmlAttribute } from "./components.js";
 // @navette-js/support — shared building blocks: escaping, attribute bags, JS serialization, lazy evaluation, colors, icons,
 // namespaced EJS views.
 import ejs from 'ejs';
@@ -412,13 +413,68 @@ 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>`;
 }
-// ------------------------------------------------------------------ namespaced, overridable EJS views
-/** View registry: `filament-forms::components.text-input` resolves to an EJS file; override directories are checked first. */
+/**
+ * View registry: `filament-forms::components.text-input` resolves to an EJS file; override directories are checked first.
+ * Views may use component tags (`<x-section heading="Orders">…</x-section>`): built-in components, components registered with
+ * `component()`, and EJS files of the directories given to `components()`.
+ */
 export class ViewRegistry {
     namespaces = new Map();
     overrides = [];
     compiled = new Map();
     shared = {};
+    componentRenderers = new Map();
+    componentDirectories = [];
+    /** Registers a component rendered by a function: `<x-name>` in any view. Registering an existing name replaces it. */
+    component(name, renderer) {
+        if (!/^[A-Za-z0-9_.-]+$/.test(name))
+            throw new Error(`Invalid component name: ${name}`);
+        this.componentRenderers.set(name, renderer);
+        return this;
+    }
+    /**
+     * Directory of EJS components: `<x-card>` renders `<dir>/card.ejs`, `<x-forms.field>` renders `<dir>/forms/field.ejs`.
+     * The view receives its props, `slot` (the content, already rendered), `slots` (named slots) and `attributes` (HTML attributes).
+     * Directories registered later win, and files win over components registered with `component()`.
+     */
+    components(directory) {
+        this.componentDirectories.unshift(directory instanceof URL ? fileURLToPath(directory) : directory);
+        return this;
+    }
+    hasComponent(name) { return this.componentRenderers.has(name) || this.componentFile(name) !== null; }
+    componentFile(name) {
+        if (!/^[A-Za-z0-9_-]+(\.[A-Za-z0-9_-]+)*$/.test(name))
+            return null;
+        for (const dir of this.componentDirectories) {
+            const file = path.join(dir, ...name.split('.')) + '.ejs';
+            if (existsSync(file))
+                return file;
+        }
+        return null;
+    }
+    /** Renders a component tag. HTML, Alpine and Livewire attributes go to the attribute bag; the others become camelCased props. */
+    renderComponent(name, raw, slot = '', slots = {}) {
+        const props = {};
+        const attributes = {};
+        for (const [key, value] of Object.entries(raw)) {
+            if (isHtmlAttribute(key))
+                attributes[key] = value;
+            else
+                props[camel(key)] = value;
+        }
+        // A slot made of whitespace only (line breaks around named slots) counts as empty.
+        for (const [key, value] of Object.entries(slots))
+            props[camel(key)] = value.trim() === '' ? '' : value;
+        if (slot.trim() === '')
+            slot = '';
+        const file = this.componentFile(name);
+        if (file)
+            return this.renderFile(file, { ...props, slot, slots, attributes: new Attributes(attributes) });
+        const renderer = this.componentRenderers.get(name);
+        if (!renderer)
+            throw new Error(`Unknown component <x-${name}>: register it with views.component() or views.components(directory).`);
+        return renderer({ ...props, attributes }, slot);
+    }
     namespace(name, dir) { this.namespaces.set(name, dir); return this; }
     /** Application override directory: `<dir>/<namespace>/<path>.ejs` replaces the package view. */
     overrideFrom(dir) { this.overrides.unshift(dir); this.compiled.clear(); return this; }
@@ -436,14 +492,15 @@ export class ViewRegistry {
             throw new Error(`Unknown view namespace: ${ns}`);
         return path.join(base, rel);
     }
-    render(view, data = {}) {
-        let fn = this.compiled.get(view);
+    render(view, data = {}) { return this.renderFile(this.resolve(view), data, view); }
+    /** Renders an EJS file directly (component files, page views given by path). */
+    renderFile(file, data = {}, cacheKey = file) {
+        let fn = this.compiled.get(cacheKey);
         if (!fn) {
-            const file = this.resolve(view);
-            fn = ejs.compile(readFileSync(file, 'utf8'), { filename: file });
-            this.compiled.set(view, fn);
+            fn = ejs.compile(compileComponentTags(readFileSync(file, 'utf8'), file), { filename: file });
+            this.compiled.set(cacheKey, fn);
         }
-        return fn({ e, js, cls, attrs, icon, loadingIndicator, view: (v, d) => this.render(v, d), ...this.shared, ...data });
+        return fn({ e, js, cls, attrs, icon, loadingIndicator, view: (v, d) => this.render(v, d), __component: (name, props, slot, slots) => this.renderComponent(name, props, slot, slots), ...this.shared, ...data });
     }
 }
 export const views = new ViewRegistry();

package/lib/ui.d.ts

@@ -196,6 +196,8 @@ export type DropdownItem = {
     href?: string | null;
     disabled?: boolean;
     attributes?: Attrs;
+    /** Label as HTML already escaped (the content of a `<x-dropdown-item>` tag), used instead of `label`. */
+    labelHtml?: string | null;
 };
 /** Dropdown menu item. */
 export declare function dropdownItem(item: DropdownItem): string;

package/lib/ui.js

@@ -211,7 +211,7 @@ export function dropdownItem(item) {
     const iconColor = item.iconColor ?? (color !== 'gray' ? color : null);
     const lead = item.icon ? icon(item.icon, { attributes: new Attributes().class(colorMark(iconColor)) }) : item.image ? `<div class="fi-dropdown-list-item-image" style="background-image: url('${e(item.image)}')"></div>` : '';
     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}>`;
+    return `<${tag} ${attributes.toHtml()}>${lead}<span class="fi-dropdown-list-item-label">${item.labelHtml ?? e(item.label)}</span>${badgeHtml}</${tag}>`;
 }
 /** List of dropdown menu items. */
 export function dropdownList(items) { return `<div class="fi-dropdown-list">${items.map(dropdownItem).join('')}</div>`; }
@@ -250,5 +250,36 @@ export function modal(props, slot = '') {
         .class(['fi-modal', { 'fi-absolute-positioning-context': !props.slideOver, 'fi-modal-slide-over': props.slideOver === true, 'fi-modal-has-sticky-header': props.stickyHeader === true, 'fi-modal-has-sticky-footer': props.stickyFooter === true }]);
     return `<div ${outer.toHtml()}><div aria-hidden="true" x-show="isOpen" x-transition.duration.300ms.opacity class="fi-modal-close-overlay"></div><div${trapOnWindow ? '' : ' tabindex="-1"'}${closeByClickingAway ? ` x-on:click.self="${e(close)}"` : ''}${trapOnWindow ? '' : ' x-trap.noreturn="isTrapActive"'} class="${cls(['fi-modal-window-ctn', { 'fi-clickable': closeByClickingAway }])}"><div${closeByEscaping ? ` x-on:keydown.window.escape="if (isTopmost()) ${e(close)}"` : ''} x-show="isWindowVisible" x-transition:enter="fi-transition-enter" x-transition:leave="fi-transition-leave" x-transition:enter-start="fi-transition-enter-start" x-transition:enter-end="fi-transition-enter-end" x-transition:leave-start="fi-transition-leave-start" x-transition:leave-end="fi-transition-leave-end" wire:key="${e(key('window'))}"${trapOnWindow ? ' x-trap.noreturn="isTrapActive" tabindex="0"' : ''} class="${windowClasses}">${header}${content}${footer}</div></div></div>`;
 }
+// ------------------------------------------------------------------ component tags
+// Built-in components for EJS views: `<x-button color="danger">Delete</x-button>`, `<x-section heading="Orders">…</x-section>`.
+// The default slot is HTML already rendered by the template; props from `name="text"` are plain strings and are escaped by the components.
+const withSlot = (render) => (props, slot) => render(props, slot);
+views
+    .component('avatar', (props) => avatar(props))
+    // A badge rendered as a link takes its `href` from the tag.
+    .component('badge', (props, slot) => badge({ ...props, attributes: { ...props.attributes, href: props.href ?? props.attributes?.href } }, slot))
+    .component('breadcrumbs', (props) => breadcrumbs(props.items ?? [], props.label))
+    .component('button', withSlot(button))
+    .component('callout', (props, slot) => callout({ ...props, footer: props.footer ?? (slot || null) }))
+    // Every prop other than `checked` and `valid` is an attribute of the input (`name`, `value`, `disabled`…).
+    .component('checkbox', ({ checked, valid, attributes, ...rest }) => checkbox({ checked, valid, attributes: { ...rest, ...attributes } }))
+    .component('dropdown', withSlot(dropdown))
+    .component('dropdown-list', (props, slot) => (props.items ? dropdownList(props.items) : `<div class="fi-dropdown-list">${slot}</div>`))
+    .component('dropdown-item', (props, slot) => dropdownItem({ ...props, label: props.label ?? '', labelHtml: props.label === undefined ? slot.trim() : null }))
+    .component('empty-state', (props, slot) => emptyState({ ...props, footer: props.footer ?? (slot || null) }))
+    .component('fieldset', withSlot(fieldset))
+    .component('icon', (props) => icon(props.name ?? props.icon, { size: props.size, attributes: new Attributes(props.attributes) }))
+    .component('icon-button', (props) => iconButton(props))
+    .component('input', (props) => input({ ...props.attributes, ...Object.fromEntries(Object.entries(props).filter(([key]) => key !== 'attributes')) }))
+    .component('input-wrapper', withSlot(inputWrapper))
+    .component('link', withSlot(link))
+    .component('loading-indicator', (props) => loadingIndicator(new Attributes(props.attributes), props.size))
+    // `id` is an HTML attribute name, so it lands in the attribute bag: these two components need it as a prop.
+    .component('modal', (props, slot) => modal({ ...props, id: props.id ?? props.attributes?.id }, slot))
+    .component('pagination', (props) => pagination({ ...props, id: props.id ?? props.attributes?.id }))
+    .component('section', withSlot(section))
+    .component('select', (props, slot) => select({ ...props.attributes, ...Object.fromEntries(Object.entries(props).filter(([key]) => key !== 'attributes')) }, slot))
+    .component('spinner', (props) => spinner(props.attributes))
+    .component('tabs', (props) => tabs(props, props.items ?? []));
 export const ui = { avatar, badge, breadcrumbs, button, callout, checkbox, dropdown, dropdownItem, dropdownList, emptyState, fieldset, iconButton, input, inputWrapper, link, modal, pagination, section, select, spinner, tabs };
 export { cls, e, js, loadingIndicator };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navette-js/support",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "Shared utilities, colors, icons, views and translations for Navette.",
   "license": "MIT",
   "type": "module",