@fraza/core 0.3.10 → 0.3.12

package/CHANGELOG.md

@@ -4,6 +4,22 @@ Historique des versions publiées de `@fraza/core`.
 
 Ce fichier est généré par `fraza-module changelog` à partir des messages de commit. Ne pas le modifier à la main.
 
+## 0.3.12 (2026-10-25)
+
+### Documentation
+
+- update screenshots for various pages (08afd94)
+
+## 0.3.11 (2026-10-25)
+
+### Corrections
+
+- **admin** : update dashboard grid layout documentation and implementation (8a86eb3)
+
+### Documentation
+
+- **form** : update section grouping and order in admin configuration (5ae2e37)
+
 ## 0.3.10 (2026-10-25)
 
 ### Autres

package/changelog.json

@@ -1,6 +1,49 @@
 {
   "name": "@fraza/core",
   "versions": [
+    {
+      "version": "0.3.12",
+      "date": "2026-10-25",
+      "breaking": [],
+      "envAdded": [],
+      "envRemoved": [],
+      "templateChanged": [],
+      "action": [],
+      "entries": [
+        {
+          "type": "docs",
+          "scope": null,
+          "subject": "update screenshots for various pages",
+          "hash": "08afd94",
+          "breaking": false
+        }
+      ]
+    },
+    {
+      "version": "0.3.11",
+      "date": "2026-10-25",
+      "breaking": [],
+      "envAdded": [],
+      "envRemoved": [],
+      "templateChanged": [],
+      "action": [],
+      "entries": [
+        {
+          "type": "fix",
+          "scope": "admin",
+          "subject": "update dashboard grid layout documentation and implementation",
+          "hash": "8a86eb3",
+          "breaking": false
+        },
+        {
+          "type": "docs",
+          "scope": "form",
+          "subject": "update section grouping and order in admin configuration",
+          "hash": "5ae2e37",
+          "breaking": false
+        }
+      ]
+    },
     {
       "version": "0.3.10",
       "date": "2026-10-25",

package/dist/docs/02-guides/etendre-l-admin.md

@@ -189,12 +189,12 @@ Le composant reçoit `data`, le retour du fetcher, `loading` et `size`. **Si le
 
 ### Largeur d'une tuile
 
-La grille compte 4 colonnes sur un écran large. `size` déclare la largeur d'une tuile en colonnes : `default` à l'arrivée, `min` et `max` pour borner ce que l'utilisateur peut choisir. Sans `size`, une tuile fait une colonne et peut s'étendre à quatre.
+La grille compte jusqu'à 4 colonnes, selon la place dont elle dispose : 3 sur un portable de 1440 px, une sur un téléphone. `size` déclare la largeur d'une tuile en colonnes : `default` à l'arrivée, `min` et `max` pour borner ce que l'utilisateur peut choisir. Sans `size`, une tuile fait une colonne et peut s'étendre à quatre.
 
 ```jsx
 function OrdersWidget({ data, loading, size }) {
   // `size` est la largeur réellement occupée : 1 sur un téléphone, au plus 2
-  // sur un écran moyen, la largeur choisie sur un grand écran.
+  // sur un écran moyen, 3 sur un portable, la largeur choisie sur un grand écran.
   const wide = size >= 2;
   return (
     <Card padding="none" spacing="none" className="px-5 py-4">

package/dist/docs/03-reference/02-features/admin.md

@@ -210,7 +210,7 @@ Le composant reçoit trois props :
 |---|---|
 | `data` | Retour du fetcher, ou `null` si le fetcher a échoué ou n'existe pas. |
 | `loading` | `true` tant que la donnée n'est pas là. |
-| `size` | Largeur réellement occupée, en colonnes : la largeur choisie, bornée par les colonnes de l'écran. |
+| `size` | Largeur réellement occupée, en colonnes : la largeur choisie, bornée par les colonnes de la grille. |
 
 `size` sert à adapter le rendu. La tuile de facturation pose son graphique à côté de ses chiffres à partir de deux colonnes, et dessous sur une seule. Sur un téléphone, `size` vaut toujours 1.
 
@@ -222,7 +222,18 @@ Une tuile `devkit` est écartée par le tableau de bord, pas par le registre. `F
 
 ## Disposition du tableau de bord
 
-Les tuiles sont posées dans une **grille de 4 colonnes** à partir de 80rem de large, de 2 colonnes à partir de 48rem, d'une seule en dessous. Une tuile occupe de 1 à 4 colonnes, bornées par celles de l'écran, et sa hauteur suit son contenu.
+Les tuiles sont posées dans une grille de 1 à 4 colonnes. Le nombre suit la **largeur de la grille elle-même**, pas celle de la fenêtre : la barre latérale prend déjà le quart d'un écran de portable, et quatre colonnes dans le reste donnaient des tuiles trop étroites pour se lire.
+
+| Largeur de la grille | Colonnes | Avec la barre latérale |
+|---|---|---|
+| 80rem (1280 px) et plus | 4 | fenêtre d'environ 1510 px et plus |
+| de 64rem (1024 px) à 80rem | 3 | de 1250 à 1510 px environ, dont le portable de 1440 px |
+| de 42rem (672 px) à 64rem | 2 | de 900 à 1250 px environ |
+| moins de 42rem | 1 | téléphone |
+
+Une tuile occupe de 1 à 4 colonnes, bornées par celles de la grille : une tuile de 4 colonnes en prend 3 sur un portable, soit toute la largeur. Sa hauteur suit son contenu.
+
+Les colonnes sont des requêtes de conteneur Tailwind (`@container`, puis `@2xl:`, `@5xl:` et `@7xl:`) : le bon nombre est déjà dans le HTML du serveur, sans saut au chargement. Le composant mesure aussi la largeur de la grille, avec les mêmes seuils, pour donner à chaque tuile son `size` et borner le redimensionnement en mode édition.
 
 La grille se tasse d'elle-même. Ses rangées font 4 px, et chaque tuile en couvre autant que sa hauteur mesurée l'exige, espacement compris : un `ResizeObserver` suit la hauteur de chaque tuile. Avec `grid-auto-flow: dense`, une tuile courte remonte dans le vide laissé à côté d'une tuile haute. Le résultat est celui d'une maçonnerie, avec en plus des tuiles qui s'étendent sur plusieurs colonnes. Avant la mesure (rendu serveur, puis premier affichage) la grille garde des rangées ordinaires : une tuile peut y laisser un vide sous elle, jamais en chevaucher une autre.
 

package/dist/docs/03-reference/04-partage/composants.md

@@ -663,6 +663,8 @@ Un clic qui part d'un contrôle de la ligne lui appartient : un bouton, un lien,
 
 Sous 1024 px de large, `Table` ne rend plus le tableau mais une liste : une ligne par élément, deux lignes de texte au plus. Une carte par élément, qui reprenait toutes les colonnes en grille, faisait défiler trois éléments par écran de téléphone. La liste en montre une dizaine, et le détail reste à un toucher.
 
+![La liste des factures sur un téléphone : une ligne par facture, le client et le numéro à gauche, le montant et le statut à droite](../../assets/reference/liste-compacte.light.webp)
+
 ```
 ┌────────────────────────────────────────────────────┐
 │ ☐  Boréalis Café inc.                  1 345,21 $  … │

package/dist/docs/06-modules/drive/index.md

@@ -25,7 +25,7 @@ L'activation, la création des tables et le réglage derrière un proxy sont dan
 
 C'est ce qui le distingue d'un Nextcloud. Il n'y a ni client de synchronisation, ni édition en ligne, ni commentaires. Il y a un navigateur de dossiers, des liens que l'on règle finement, et un historique qui répond à « qui a touché à ce fichier ».
 
-![Le navigateur de fichiers, à la racine de l'espace partagé](../../assets/modules/drive/navigateur.light.webp)
+![Le navigateur de fichiers, dans le dossier d'un client de l'espace partagé](../../assets/modules/drive/navigateur.light.webp)
 
 Le navigateur ouvre à la racine de l'espace partagé, ce que rappelle la pastille sous le titre. La barre latérale donne la surface entière du module : l'espace partagé, l'espace personnel et les favoris quand ils sont activés, ce qui a été partagé avec soi, les liens émis, l'historique et la corbeille.
 

package/dist/docs/06-modules/forms/02-configuration.md

@@ -93,11 +93,11 @@ Le module enregistre une section contenant deux items.
 
 | Élément | Valeur |
 |---|---|
-| Section | `Formulaires`, icône `ChecklistIcon`, ordre 75. |
+| Section | `Formulaires`, groupe `content`, icône `ChecklistIcon`, ordre 75. |
 | Item 1 | `Formulaires`, `/admin/forms`, icône `ChecklistIcon`, permission `forms.view`. |
 | Item 2 | `Soumissions`, `/admin/forms/submissions`, icône `InboxIcon`, permission `forms.view`. |
 
-L'ordre 75 place la section après les modules de contenu. Voir [Étendre l'admin](../../02-guides/etendre-l-admin.md).
+Le groupe `content` range la section dans la partie Contenu de la barre latérale, et l'ordre 75 la place après les pages. Voir [Étendre l'admin](../../02-guides/etendre-l-admin.md).
 
 ## Notes
 

package/dist/features/admin/components/dashboard/DashboardGrid.client.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import AdminErrorBoundary from "../../AdminErrorBoundary.client.js";
 import Button from "../../../../shared/components/Button.js";
 import { GripVerticalIcon } from "@fraza/icons/GripVerticalIcon";
@@ -8,29 +8,39 @@ import { CloseIcon } from "@fraza/icons/CloseIcon";
 import { GRID_COLUMNS, clampWidth } from "../../dashboard-layout.js";
 const ROW_HEIGHT = 4;
 const GAP = 16;
+const COLUMN_STEPS = [
+  { min: 1280, columns: GRID_COLUMNS },
+  { min: 1024, columns: 3 },
+  { min: 672, columns: 2 }
+];
+const GRID_CLASS = "grid-cols-1 @2xl:grid-cols-2 @5xl:grid-cols-3 @7xl:grid-cols-4";
 const SPAN_CLASS = {
   1: "col-span-1",
-  2: "col-span-1 md:col-span-2",
-  3: "col-span-1 md:col-span-2 xl:col-span-3",
-  4: "col-span-1 md:col-span-2 xl:col-span-4"
+  2: "col-span-1 @2xl:col-span-2",
+  3: "col-span-1 @2xl:col-span-2 @5xl:col-span-3",
+  4: "col-span-1 @2xl:col-span-2 @5xl:col-span-3 @7xl:col-span-4"
 };
-const QUERIES = [
-  { query: "(min-width: 80rem)", columns: GRID_COLUMNS },
-  { query: "(min-width: 48rem)", columns: 2 }
-];
-function subscribeColumns(onChange) {
-  const lists = QUERIES.map(({ query }) => window.matchMedia(query));
-  for (const list of lists) list.addEventListener("change", onChange);
-  return () => {
-    for (const list of lists) list.removeEventListener("change", onChange);
-  };
-}
-function readColumns() {
+function columnsFor(width) {
   var _a;
-  return ((_a = QUERIES.find(({ query }) => window.matchMedia(query).matches)) == null ? void 0 : _a.columns) ?? 1;
+  return ((_a = COLUMN_STEPS.find((step) => width >= step.min)) == null ? void 0 : _a.columns) ?? 1;
 }
-function useGridColumns() {
-  return useSyncExternalStore(subscribeColumns, readColumns, () => GRID_COLUMNS);
+function useGridColumns(ref) {
+  const [columns, setColumns] = useState(GRID_COLUMNS);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return void 0;
+    const update = (width) => setColumns(columnsFor(width));
+    update(node.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(([entry]) => {
+      var _a;
+      const box = (_a = entry.contentBoxSize) == null ? void 0 : _a[0];
+      update(box ? box.inlineSize : entry.target.getBoundingClientRect().width);
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [ref]);
+  return columns;
 }
 function WidgetError({ reset }) {
   return /* @__PURE__ */ jsxs("div", { role: "alert", className: "bg-surface border border-line rounded-card p-5 flex flex-col items-start gap-3", children: [
@@ -153,7 +163,8 @@ const move = (items, from, to) => {
   return next;
 };
 function DashboardGrid({ items, widgets, stats, loading, editing, onChange }) {
-  const columns = useGridColumns();
+  const containerRef = useRef(null);
+  const columns = useGridColumns(containerRef);
   const gridRef = useRef(null);
   const instructionsId = useId();
   const [measured, setMeasured] = useState(false);
@@ -324,11 +335,11 @@ function DashboardGrid({ items, widgets, stats, loading, editing, onChange }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     editing && /* @__PURE__ */ jsx("p", { id: instructionsId, className: "sr-only", children: "Glisser la poign\xE9e pour d\xE9placer le widget. Au clavier, les fl\xE8ches le d\xE9placent et Maj avec les fl\xE8ches gauche et droite change sa largeur." }),
     /* @__PURE__ */ jsx("div", { "aria-live": "polite", className: "sr-only", children: editing ? announcement : "" }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { ref: containerRef, className: "@container", children: /* @__PURE__ */ jsx(
       "div",
       {
         ref: gridRef,
-        className: `grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 grid-flow-row-dense gap-x-4 ${editing ? "pt-1" : ""}`,
+        className: `grid ${GRID_CLASS} grid-flow-row-dense gap-x-4 ${editing ? "pt-1" : ""}`,
         style: measured ? { gridAutoRows: `${ROW_HEIGHT}px`, rowGap: 0 } : { rowGap: GAP },
         children: items.map((item) => {
           const widget = widgets.get(item.id);
@@ -350,7 +361,7 @@ function DashboardGrid({ items, widgets, stats, loading, editing, onChange }) {
           );
         })
       }
-    ),
+    ) }),
     ghost && dragId && /* @__PURE__ */ jsx(
       "div",
       {

package/dist/shared/lib/version.js

@@ -1,4 +1,4 @@
-const CORE_VERSION = "0.3.10";
+const CORE_VERSION = "0.3.12";
 export {
   CORE_VERSION
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fraza/core",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "description": "Starter kit Next.js avec un back-office modulaire, conçu au Québec.",
   "publishConfig": {
     "access": "public"