Aller au contenu
Aubui · Accueil
Design system AUBOTA

Un script.
Du HTML qui dit ce qu’il veut.
Tout AUBOTA en harmonie.

Aubui donne à chaque module les mêmes boutons, couleurs, dialogues, notifications et réflexes clavier. Tu décris l’intention, Aubui s’occupe de la forme — et de l’accessibilité.

Installer en 30 secondes Extraits à copier
Le minimum
<script src="https://ui.aubota.xyz/js/aubui.js" defer></script>

<button aub-btn primary data-aub-confirm="Publier maintenant ?">Publier</button>

Tout Aubui

Chaque page : à quoi ça sert, la balise exacte à poser, l’API, un exemple qui tourne pour de vrai, et l’accessibilité.

Démarrer

Installation

Une balise script : complet, léger ou auth. Cache, versions, ordre de chargement.

Fondations

Tokens

Couleurs, surfaces, espaces, rayons, typo — lus en direct dans tokens.css.

 Thème & accentNouveau

Sombre/clair, 6 pastilles d’accent, synchro entre sous-domaines et compte Hub.

 Motion

Durées, courbes, ce qui bouge et comment respecter « réduire les animations ».

Composants

Boutons

Primary, ghost, danger, success, tailles, pleine largeur.

 Formulaires

Champs, labels, aides, erreurs, choix, barre de filtres.

 Cartes & alertes

Cartes, badges, points de statut, alertes.

 Navbar

Barre globale AUBOTA (window.AubotaNav) et navbar de module aub-nav.

 NotificationsNouveau

Cloche Comlink : badge, liste, toasts de nouveauté, Web Push.

 Dialogues & toastsNouveau

AubuiDialog (alert, confirm, prompt) et AubuiToast — jamais de popup native.

 RechercheNouveau

AubuiSearch : une barre, deux sources (endpoint ou liste locale), clavier complet.

 Sélecteur d’heure

aub-time : roue heure puis minutes, valeur HH:MM dans un champ caché.

 Visionneuse PDFNouveau

AubuiPdf : pages rendues par NOTRE serveur (PdfPages, Ghostscript, WebP), chargées à la demande ; zoom, pincer, plein écran, recherche. Sans pdf.js.

 VisionneuseNouveau

AubuiVisionneuse : voir n’importe quel fichier sans quitter la page (image, PDF, vidéo, audio, texte, sinon Télécharger). Plein écran, gestes, clavier.

 Panneau latéralNouveau

AubuiPanneau : un formulaire ou un détail à côté de la page (plein écran sur téléphone). Focus piégé, Échap, fond, question avant de perdre une saisie.

 ScannerNouveau

AubuiScanner : la caméra lit un papier en direct, sur n’importe quelle surface, une info à la fois (rouge → vert), puis « Document validé » ; « ✎ Je te le dis » quand AIA ne sait pas ; contour, conseils, photo du capteur, lampe ; ce qui est lu s’envole vers AIA.

 Envoi chiffréNouveau

AubuiEnvoi : envoyer un fichier sans qu’il soit jamais lisible sur le disque du serveur (chiffré dans le navigateur, morceau par morceau, déchiffré en mémoire). Sans WebCrypto, rien ne part.

 Puces de filtreNouveau

.aub-puce : des boutons ronds qui filtrent une liste (aria-pressed), une ligne qui défile sur téléphone, tons pour « À faire ».

 Logo d’enseigneNouveau

.aub-logo : le petit logo propre d’une enseigne (taille fixe, fond blanc), sinon une pastille initiale + couleur ; .aub-logos : choisir parmi des logos.

 Plein écran caisseNouveau

AubuiCaisse : un code-barres ou un QR en plein écran blanc pour la caisse, écran au maximum, quart de tour, Retour ferme.

 Invitation (démo)Nouveau

AubInvite : en mode démo, inviter à créer un compte plutôt que bloquer.

 Visite guidée (Waza)Nouveau

WazaTour : assombrit la page, entoure un élément et l’explique, étape par étape. Visites écrites en .md.

 Kommand (Ctrl+K)Nouveau

Palette de commandes du Hub, chargée par aubui.js sur tous les modules : aller, créer, chercher, /commandes, aide Waza.

Comportements

Moteur déclaratif

Attributs aub-btn, aub-card… → classes. Aubui.process() pour le contenu injecté.

 Actions data-aubNouveau

toggle, show, hide, copy, dismiss et confirmations data-aub-confirm, sans JS métier.

Modèles & états

Ton prochain pasNouveau

.aub-pas : une seule action proposée en tête de page, avec son pourquoi (tons accent, warning, danger, success).

 États vides & chargementHub seulement

.aub-empty (état vide encourageant) et skeletons — aujourd’hui côté Hub.

 MailsNouveau

AubotaMail : LE modèle de mail d’AUBOTA (couleurs du mail de Share), pied selon la sorte, « ne plus recevoir » sans compte.

 Pages d’erreur

403, 404, 500 et messages métier avec .aub-error.

Référence

Catalogue

Extraits prêts à copier.

 API figée (API.md)

Le contrat : attributs et classes autorisés.

 README & journal

Philosophie, règles et historique d’Aubui.

Nouveautés

  • Installation — Toasts en haut de l’écran sur téléphone (≤ 640 px) : ils ne couvrent plus le bouton Enregistrer d’un panneau.
  • Scanner — AubuiScanner v2 (AUB_BUILD 2026-10-30-8) : parcours guidé champ par champ (rouge → vert, lecture ciblée de la zone en grand), photo du capteur (ImageCapture), mise au point continue, lampe, contour par la couleur du fond (papiers à deux tons), « Document validé » + images pour la reconstruction en arrière-plan (en lot, une requête par image), bilan pour que l’AIA apprenne ; toute image envoyée part chiffrée (AES-256-GCM, WebCrypto) : jamais en clair dans un fichier temporaire du serveur.
  • Envoi chiffré — Nouveau composant AubuiEnvoi (AUB_BUILD 2026-10-31-1, chargé à la demande par la page qui envoie) + EnvoiChiffre côté serveur : AES-256-GCM par WebCrypto, une clé par fichier, un IV par morceau, en-têtes X-Aub-Chiffre / X-Aub-Cle / X-Aub-Iv / X-Aub-Envoi. Premiers usages : Drive (tous les envois) et Gestion (documents des papiers, rangés chiffrés au repos).
  • Logo d’enseigne — Nouveau composant .aub-logo / .aub-logos (pastille de repli, rangée de choix). Premier usage : Wallet (cartes, « pas le bon magasin ? »).
  • Ton prochain pas — Le « Ton prochain pas » de Gestion remonté dans Aubui (.aub-pas). Premier usage : Wallet.
  • Plein écran caisse — Nouveau composant AubuiCaisse (AUB_BUILD 2026-10-31-4, chargé à la demande) : fond blanc, luminosité max dans l’app, Wake Lock, double appui pour tourner. Premier usage : Wallet.
  • Visionneuse PDF — Nouveau composant AubuiPdf ([data-aubui-pdf], chargé tout seul par aubui.js) + service serveur PdfPages. Premier usage : Learning.
  • Visionneuse — Nouveau composant AubuiVisionneuse (API + [data-aubui-visionneuse], chargé à la demande par aubui.js). Premiers usages : Drive (/voir/<id>) et Gestion (fiche d’un papier).
  • Panneau latéral — Nouveau composant AubuiPanneau (.aub-panneau + API ouvrir / fermer / propre, chargé à la demande par aubui.js). Premier usage : Gestion › Papiers (Ajouter / Modifier).
  • Scanner — Nouveau composant AubuiScanner (chargé à la demande par aubui.js, AUB_BUILD 2026-10-30-7) : caméra, contour et redressement dans le téléphone, lecture en direct par le serveur de la page, animation vers AIA. Premier usage : Gestion › Ajouter un papier.
  • Puces de filtre — Nouvelles puces de filtre .aub-puces / .aub-puce (tons danger, warning, accent). Premier usage : Gestion › Papiers.
  • Mails — Modèle de mail unique AubotaMail (serveur) : inscription, mot de passe oublié, Share, Réunions, Listes, Préversions, Administration › Mails. Liens « ne plus recevoir » signés, liste d’opposition des adresses sans compte.
  • Kommand (Ctrl+K) — Kommand partout : chargé par aubui.js hors du Hub (connecté uniquement), API du Hub en CORS liste blanche.
  • Visite guidée (Waza) — Nouveau composant WazaTour (start / open / stop) + #waza-tour=<id> dans l’URL.
  • Installation — aubui.js installe une file d’attente AubuiDialog/AubuiToast dès son exécution (plus de popup native avant le chargement de dialog.js).
  • Thème & accent — Modèle unique thème/accent : cookie partagé aub-prefs (.aubota.xyz), AubuiPrefsSync, endpoint du Hub, événements aubui:theme / aubui:accent.
  • Notifications — Cloche fiable : poll sans cache, dédup entre onglets, toast si visible / notification système si caché, « marquer lu » au seul endpoint actif.
  • Dialogues & toasts — AubuiDialog + AubuiToast partout ; window.alert redirigé vers la lightbox ; data-aub-confirm déclaratif.
  • Invitation (démo) — Nouveau composant AubInvite (require / isDemo / guard).
  • Actions data-aub — data-aub-confirm (+ -title, -ok, data-aub-danger) sur liens, boutons et formulaires.
  • Recherche — Composant de recherche unique AubuiSearch (data-aubui-search).

Couverture de la doc

1 fichier(s) Aubui sans page de doc
À documenter avant d’être utilisé dans un module (et à déclarer dans docs/registry.php) : css/aubui/components/motion.css.

La règle d’or

Toute nouveauté Aubui = une section de doc.
  • Nouveau fichier ou nouvelle API dans ui.aubota.xyz → une page (ou une section) dans pages/, déclarée dans docs/registry.php avec ses sources et une ligne news.
  • La section dit : à quoi ça sert, la balise exacte, l’API (lue dans le code, pas devinée), un exemple vivant, l’accessibilité.
  • Pas de classe ou d’attribut inventé dans un module : d’abord ici et dans l’API figée, ensuite l’usage.
Aubui · design system AUBOTA · version 2026-10-31-4 · API figée · README · Une nouveauté Aubui = une section ici.