@fraza/core 0.3.8 → 0.3.12

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.8";
+const CORE_VERSION = "0.3.12";
 export {
   CORE_VERSION
 };

package/package.json

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

package/supported.json

@@ -12,7 +12,7 @@
     "next": {
       "floor": "16.0.0",
       "range": ">=16.0.0 <17.0.0",
-      "tested": "16.3.8"
+      "tested": "16.4.3"
     },
     "react": {
       "floor": "19.0.0",

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

@@ -1,69 +0,0 @@
----
-title: Installation
-description: Installer @fraza-pro/module-drive, créer les tables et régler la taille des tranches d'envoi selon le proxy.
-related:
-  title: Étapes suivantes
-  links:
-    - 06-modules/drive/configuration
-    - 06-modules/drive/partages
----
-
-Cette page couvre l'installation de `@fraza-pro/module-drive` dans un projet déjà structuré par `@fraza/start`. Le module n'est jamais déclaré à la main : il est découvert au boot par scan des dépendances, comme décrit dans [Cycle de vie d'un module](../../02-guides/cycle-de-vie-d-un-module.md).
-
-Ce module est distribué sous la licence Fraza Pro : son utilisation en production demande une licence par projet, renouvelée chaque année, qui comprend les mises à jour, la conformité et le support. Voir [Licence et propriété](../../04-architecture/07-licence-et-propriete.md).
-
-## Prérequis
-
-- Un projet généré par `npx @fraza/start`, avec `@fraza/core` en version `0.1.14` ou plus, la première qui reconnaît la portée `@fraza-pro`.
-- La ligne `@fraza-pro:registry=https://registry.fraza.ca/` et le token du registre dans le `.npmrc` du projet, sans lesquels `npm i` échoue. `npx @fraza/start` écrit déjà la ligne de portée. Le token s'obtient avec `npm login --registry=https://registry.fraza.ca/`, puis `npx fraza-key` le reprend dans le projet. Voir [`fraza-key`](../../03-reference/05-cli/fraza-key.md).
-- Un **stockage objet compatible S3** configuré, Backblaze B2 ou Cloudflare R2. Sans lui, le module démarre mais aucun dépôt n'aboutit. Voir [Stocker des fichiers](../../02-guides/stocker-des-fichiers.md).
-- Un **PostgreSQL compilé avec ICU**, pour le tri naturel des noms. C'est le cas des images Docker officielles, et de la compilation par défaut depuis la version 16. Sans ICU, la migration du module s'arrête avec un message qui le dit.
-- `sharp`, dépendance de pair facultative du core, installé si l'on veut les miniatures d'images : sans elle, le module fonctionne à l'identique, sans vignettes. Le module n'a plus aucune dépendance de production : l'archive ZIP et les miniatures passent par le core.
-
-## Installer
-
-```bash
-npm i @fraza-pro/module-drive
-```
-
-Ajouter la variable d'activation à `.env.local`, et aux variables de la plateforme en production :
-
-```
-FRAZA_MODULE_DRIVE=true
-```
-
-Créez les tables :
-
-```bash
-npx fraza-db init
-```
-
-Puis redémarrez. L'entrée « Fichiers » apparaît dans la barre latérale de l'admin.
-
-## Mettre à jour
-
-Le schéma évolue par migrations versionnées. Après chaque mise à jour du paquet :
-
-```bash
-npx fraza-db migrate
-```
-
-Lancez-la avant de servir la nouvelle version. Le code s'appuie sur le schéma migré : sans la collation de tri, par exemple, les listes de fichiers échouent.
-
-## Aucune configuration du seau
-
-Il n'y a **aucune étape d'infrastructure**. Pas de règle CORS, pas de policy de seau, pas d'URL signée à faire circuler : tous les fichiers transitent par l'application, dans les deux sens, et le navigateur ne parle jamais au stockage.
-
-## Derrière un proxy
-
-Un proxy plafonne le corps d'une requête. Cloudflare l'arrête à 100 Mo sur le forfait gratuit, et refuse la requête avant qu'elle n'atteigne l'application.
-
-C'est pourquoi le navigateur découpe les fichiers : chaque tranche part dans sa propre requête, sous le plafond, et le serveur les réassemble dans le seau. Une tranche vaut 8 Mo par défaut, ce qui passe partout.
-
-Si votre proxy plafonne plus bas, alignez `FRAZA_MODULE_DRIVE_UPLOAD_CHUNK_MB` sur cette limite. Le minimum est 5, imposé par le stockage, donc un proxy qui plafonne sous 5 Mo empêche tout envoi de fichier volumineux.
-
-Le symptôme d'une valeur trop haute est net : les tranches partent puis échouent avec le code d'erreur du proxy, 413 chez la plupart.
-
-## Rien à câbler dans le projet
-
-Contrairement à `@fraza/module-medias`, ce module n'a **aucun fichier de route à monter**. Les binaires descendent par les routes `/za/api/drive/...`, qui existent déjà, et la page publique de partage passe par la sous-entrée `./public-page`, prise en charge par `npx fraza-modules sync`.