odoro 0.3.4 → 1.0.1

package/dist/cli.js

@@ -131,7 +131,7 @@ function rootFrom(flags, positional) {
 async function run(argv) {
   const { command, positional, flags } = parseArgs(argv);
   if (flags["version"] === true) {
-    const manifest = await import('./package-Q2FV4K3H.js');
+    const manifest = await import('./package-LK46RV2I.js');
     console.log(manifest.default.version);
     return 0;
   }
@@ -142,7 +142,7 @@ async function run(argv) {
   switch (command) {
     case "create":
     case "new": {
-      const { createCommand } = await import('./create-IOFAPDBO.js');
+      const { createCommand } = await import('./create-LTT3SAWT.js');
       const options = {};
       if (positional[0] !== void 0) options.name = positional[0];
       if (typeof flags["template"] === "string") options.template = flags["template"];
@@ -180,7 +180,7 @@ async function run(argv) {
     case "list":
     case "diff":
     case "doctor": {
-      const registry = await import('./commands-PT3NS65O.js');
+      const registry = await import('./commands-AHMXBWQQ.js');
       const options = {
         root: typeof flags["root"] === "string" ? flags["root"] : process.cwd(),
         registry: typeof flags["registry"] === "string" ? flags["registry"] : void 0,

package/dist/{commands-PT3NS65O.js → commands-AHMXBWQQ.js}

@@ -89,9 +89,29 @@ async function saveProject(root, config) {
 
 // src/add/rewrite.ts
 var REGISTRY_TOKEN = "@registre";
-function rewriteImports(source, importPrefix) {
+function estUnAlias(prefix) {
+  return /^[@~#]/.test(prefix);
+}
+function cheminRelatif(depuis, vers) {
+  const segmentsDepuis = depuis.split("/").slice(0, -1);
+  const segmentsVers = vers.split("/");
+  let commun = 0;
+  while (commun < segmentsDepuis.length && commun < segmentsVers.length - 1 && segmentsDepuis[commun] === segmentsVers[commun]) {
+    commun += 1;
+  }
+  const montees = segmentsDepuis.length - commun;
+  const descente = segmentsVers.slice(commun).join("/");
+  return montees === 0 ? `./${descente}` : `${"../".repeat(montees)}${descente}`;
+}
+function rewriteImports(source, importPrefix, target) {
   const prefix = importPrefix.replace(/\/$/, "");
-  return source.split(`${REGISTRY_TOKEN}/`).join(`${prefix}/`);
+  if (estUnAlias(prefix) || target === void 0) {
+    return source.split(`${REGISTRY_TOKEN}/`).join(`${prefix}/`);
+  }
+  return source.replaceAll(
+    new RegExp(`${REGISTRY_TOKEN}/([^'"\\s]+)`, "g"),
+    (_tout, chemin) => cheminRelatif(target, chemin)
+  );
 }
 function usedTokens(source) {
   const pattern = new RegExp(`${REGISTRY_TOKEN}/([\\w./-]+)`, "g");
@@ -134,7 +154,7 @@ async function inspectEntry(root, config, id, upstream) {
       if (source !== void 0) {
         served.set(
           join(config.aliases.directory, file.target).replaceAll("\\", "/"),
-          rewriteImports(source, config.aliases.import)
+          rewriteImports(source, config.aliases.import, file.target)
         );
       }
     }
@@ -401,7 +421,7 @@ async function planInstall(root, config, entries) {
         await planWrite(
           root,
           targetPath(config, file.target),
-          rewriteImports(source, config.aliases.import),
+          rewriteImports(source, config.aliases.import, file.target),
           entry.id
         )
       );
@@ -505,7 +525,7 @@ async function initCommand(options) {
   const suggested = defaultAliases(guess);
   if (guess === null) {
     warn(
-      `Aucun alias trouve dans tsconfig.json : les imports seront ecrits en ${colors.cyan(suggested.import)}.`
+      `Aucun alias trouve dans tsconfig.json : les composants iront dans ${colors.cyan(suggested.directory)}/ et s importeront entre eux en relatif.`
     );
   } else {
     info(

package/dist/{create-IOFAPDBO.js → create-LTT3SAWT.js}

@@ -71,11 +71,13 @@ function paquetsDe(modules) {
     (m) => m.paquet
   );
 }
-function varianteDe(modules) {
+function variantesDe(modules) {
   const choisis = new Set(modules);
-  if (!choisis.has("libs")) return "sans-libs";
-  if (!choisis.has("router")) return "sans-routeur";
-  return void 0;
+  const variantes = [];
+  if (!choisis.has("libs")) variantes.push("sans-libs");
+  else if (!choisis.has("router")) variantes.push("sans-routeur");
+  if (choisis.has("engine")) variantes.push("avec-moteur");
+  return variantes;
 }
 function gardeLesRoutes(modules) {
   return modules.includes("router");
@@ -234,8 +236,10 @@ async function scaffold(options) {
       await rm(join(options.target, dossier), { recursive: true, force: true });
     }
   }
-  const variante = varianteDe(modules);
-  const poses = variante === void 0 ? [] : await poserVariante(source, options.target, variante);
+  const poses = [];
+  for (const variante of variantesDe(modules)) {
+    poses.push(...await poserVariante(source, options.target, variante));
+  }
   await renamePackage(
     options.target,
     options.packageName,
@@ -447,7 +451,7 @@ async function createCommand(options) {
   }
   if (database !== void 0) prompts.log.info(database.note);
   if (modules.includes("registre")) {
-    const { initCommand } = await import('./commands-PT3NS65O.js');
+    const { initCommand } = await import('./commands-AHMXBWQQ.js');
     const code = await initCommand({ root: target, yes: true });
     if (code !== 0) {
       prompts.log.warn(

package/dist/{package-Q2FV4K3H.js → package-LK46RV2I.js}

@@ -2,7 +2,7 @@
 // package.json
 var package_default = {
   name: "odoro",
-  version: "0.3.4",
+  version: "1.0.1",
   type: "module",
   license: "UNLICENSED",
   author: "BouBouw",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "odoro",
-  "version": "0.3.4",
+  "version": "1.0.1",
   "type": "module",
   "license": "UNLICENSED",
   "author": "BouBouw",

package/templates/react-ts/_variantes/avec-moteur/src/sections/Fond.tsx

@@ -0,0 +1,118 @@
+/**
+ * Le fond decoratif, en surface WebGL.
+ *
+ * Cette version remplace le degre statique parce que le moteur a ete retenu a
+ * la creation. Le reste de la page est inchange : elle place `<Fond />` et ne
+ * sait pas ce qu'il y a derriere.
+ *
+ * ## Ce que le moteur apporte, et qu'un degrade ne peut pas
+ *
+ * **Un arbitre.** La surface est demandee au gestionnaire du moteur, qui la
+ * refuse si le navigateur n'a pas WebGL, si trop de contextes sont deja
+ * ouverts, ou si l'appareil ne suivrait pas. Le refus est une valeur, pas une
+ * exception : on affiche alors le degrade, et la page tient.
+ *
+ * **Le mouvement reduit.** Sous cette preference, rien n'est monte du tout :
+ * le fond n'apportait que son mouvement, et la carte graphique n'a pas a
+ * s'allumer pour un visiteur qui a demande le calme.
+ *
+ * **Les couleurs du theme.** Les teintes sont lues dans les jetons, pas
+ * ecrites dans le nuanceur. Une bascule clair / sombre les relit, et changer
+ * `--o-palette-brand-500` repeint le fond sans toucher a ce fichier.
+ *
+ * ## Pourquoi des styles en ligne
+ *
+ * Ce fichier est pose quel que soit le reste : un projet qui a decoche les
+ * bibliotheques n'a pas les classes `o-*`, et une classe absente ne peint
+ * rien — le fond aurait alors une hauteur nulle, sans que rien ne le signale.
+ * Les quelques regles de placement sont donc ecrites ou elles sont sures.
+ *
+ * @module
+ */
+
+import {
+  AURORA_FRAGMENT,
+  readTokenColour,
+  useMotionState,
+  useShaderSurface,
+  type ShaderColour,
+} from '@odoro-cli/engine'
+import { useEffect, useMemo, useState, type ReactElement } from 'react'
+
+/** Les jetons lus pour teinter la nappe. */
+const TEINTES = ['--o-palette-brand-500', '--o-palette-brand-300', '--o-theme-bg'] as const
+
+/** Le degrade servi tant que la surface n'est pas la — ou pour toujours. */
+function Degrade(): ReactElement {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        inset: 0,
+        opacity: 0.28,
+        filter: 'blur(64px)',
+        background:
+          'radial-gradient(60% 60% at 50% 0%, var(--o-palette-brand-500, #f97316), transparent)',
+      }}
+    />
+  )
+}
+
+/** Une nappe animee derriere le haut de la page. */
+export function Fond(): ReactElement {
+  const { quality, reduced } = useMotionState()
+  const [hote, setHote] = useState<HTMLElement | null>(null)
+  const [teintes, setTeintes] = useState<readonly ShaderColour[]>([])
+
+  // Relues quand l'hote apparait et quand le theme bascule — ce dernier cas
+  // passe par la politique de mouvement, qui se renouvelle a chaque etat.
+  useEffect(() => {
+    if (hote === null) return
+    setTeintes(TEINTES.map((jeton) => readTokenColour(jeton, hote)))
+  }, [hote, reduced, quality])
+
+  const uniforms = useMemo(() => {
+    const [a, b, c] = teintes
+    if (a === undefined || b === undefined || c === undefined) return undefined
+    // Le fond du theme domine, la marque n'est qu'un reflet : ces trois
+    // couleurs vont dans un melange, et deux teintes de marque sur trois
+    // donneraient une nappe orange en pleine page plutot qu'un halo.
+    return { uColorA: c, uColorB: c, uColorC: a, uSpeed: 0.1, uScale: 1.4, uOctaves: 3 }
+  }, [teintes])
+
+  const { ref, ready, refused } = useShaderSurface<HTMLDivElement>({
+    fragment: AURORA_FRAGMENT,
+    uniforms: uniforms ?? {},
+    name: 'fond-accueil',
+  })
+
+  const repli = !ready || refused !== undefined || uniforms === undefined
+
+  return (
+    <div
+      aria-hidden="true"
+      ref={(element) => {
+        setHote(element)
+        ref.current = element
+      }}
+      style={{
+        position: 'absolute',
+        insetInline: 0,
+        top: 0,
+        height: '42rem',
+        overflow: 'hidden',
+        pointerEvents: 'none',
+        // Un fond decoratif se remarque quand on le cherche, pas avant. A
+        // pleine intensite la nappe passe devant le titre qu'elle est censee
+        // porter ; a un cinquieme, elle le souligne.
+        opacity: 0.2,
+        // Le bas se dissout dans la page : une surface qui s'arrete net
+        // dessine une ligne horizontale que rien ne justifie.
+        maskImage: 'linear-gradient(to bottom, black 45%, transparent)',
+        WebkitMaskImage: 'linear-gradient(to bottom, black 45%, transparent)',
+      }}
+    >
+      {repli ? <Degrade /> : null}
+    </div>
+  )
+}

package/templates/react-ts/_variantes/sans-libs/src/App.tsx

@@ -1,71 +1,42 @@
-import { useState } from 'react'
+import type { ReactElement } from 'react'
 
-/** Trois arguments mis en avant. */
-const FEATURES = [
-  {
-    title: 'Compilation',
-    body: 'Un serveur de developpement a rechargement a chaud, et une compilation de production.',
-  },
-  {
-    title: 'TypeScript',
-    body: 'Types stricts, alias de chemins, et verification sans emission.',
-  },
-  {
-    title: 'A vous de jouer',
-    body: 'Aucun systeme de style impose : le votre prend toute la place.',
-  },
-]
+import { Marque } from '@/composants/Marque'
+import { Cloture } from '@/sections/Cloture'
+import { Fond } from '@/sections/Fond'
+import { Hero } from '@/sections/Hero'
+import { Piliers } from '@/sections/Piliers'
 
 /**
  * Racine de l'application.
  *
  * Les bibliotheques Odoro n'ont pas ete retenues a la creation : pas de
- * classes `o-*`, pas de jetons, pas de routeur. Les styles de cette page sont
- * dans `styles.css`, en CSS ordinaire.
+ * classes `o-*`, pas de jetons, pas de routeur. Le dessin est celui de la
+ * version complete, porte par `styles.css` en CSS ordinaire.
  *
  * Pour les ajouter plus tard : `npm i @odoro-cli/libs`, puis importer
  * `@odoro-cli/libs/styles.css` dans `main.tsx`.
  */
-export function App() {
-  const [count, setCount] = useState(0)
-
+export function App(): ReactElement {
   return (
     <div className="app-shell">
       <nav className="nav">
-        <span className="marque">Odoro</span>
+        <Marque />
+        <a href="https://odoro.dev" target="_blank" rel="noreferrer" className="nav-lien">
+          odoro.dev
+        </a>
       </nav>
 
-      <main className="contenu">
-        <h1>Un point de depart maitrise.</h1>
-        <p className="chapeau">
-          Ce projet a ete genere par <code>odoro create</code>. Le moteur de
-          developpement et la compilation viennent de <code>odoro</code>.
-        </p>
-
-        <div className="grille">
-          {FEATURES.map((feature) => (
-            <article key={feature.title} className="carte">
-              <h2>{feature.title}</h2>
-              <p>{feature.body}</p>
-            </article>
-          ))}
-        </div>
-
-        <div className="ligne">
-          <button
-            type="button"
-            className="bouton"
-            onClick={() => {
-              setCount((value) => value + 1)
-            }}
-          >
-            Compter
-          </button>
-          <span className="compteur">{count}</span>
-        </div>
+      <main className="principal">
+        <Fond />
+        <Hero />
+        <Piliers />
+        <Cloture />
       </main>
 
-      <footer className="pied">Construit avec Odoro.</footer>
+      <footer className="pied">
+        <Marque />
+        <span>Construit avec Odoro.</span>
+      </footer>
     </div>
   )
 }

package/templates/react-ts/_variantes/sans-libs/src/composants/Marque.tsx

@@ -0,0 +1,37 @@
+/**
+ * La marque : le signe et le mot.
+ *
+ * Meme signe que dans la version complete, dessine en SVG avec `currentColor`
+ * pour prendre la couleur de son parent. Les bibliotheques n'ayant pas ete
+ * retenues, la teinte vient d'une variable declaree dans `styles.css`.
+ *
+ * @module
+ */
+
+import type { ReactElement } from 'react'
+
+/** Le signe seul, a la taille de la police qui l'entoure. */
+export function Signe({ className = '' }: { readonly className?: string }): ReactElement {
+  return (
+    <svg viewBox="0 0 100 100" fill="none" aria-hidden="true" className={`signe ${className}`}>
+      <path
+        d="M20.25 20.25H50a29.75 29.75 0 1 1-29.75 29.75Z"
+        stroke="currentColor"
+        strokeWidth="10.5"
+        strokeLinejoin="miter"
+      />
+    </svg>
+  )
+}
+
+/** Le signe et le mot. */
+export function Marque(): ReactElement {
+  return (
+    <span className="marque">
+      <span className="marque-signe">
+        <Signe />
+      </span>
+      Odoro
+    </span>
+  )
+}

package/templates/react-ts/_variantes/sans-libs/src/sections/Cloture.tsx

@@ -0,0 +1,60 @@
+/**
+ * La cloture : une commande, et la porte de sortie vers la documentation.
+ *
+ * @module
+ */
+
+import { useState, type ReactElement } from 'react'
+
+/** La commande que l'on copie le plus souvent. */
+const COMMANDE = 'npm i @odoro-cli/libs'
+
+/** La section de cloture. */
+export function Cloture(): ReactElement {
+  const [copie, setCopie] = useState(false)
+
+  return (
+    <section className="section section-centre">
+      <div className="contenu-etroit">
+        <h2 className="cloture-titre">Ajoutez le systeme de style quand vous voudrez.</h2>
+        <p className="cloture-chapeau">
+          Les jetons, les utilitaires et les composants vivent dans un paquet a part.
+          Ce projet tourne sans eux, et les accueille sans rien casser.
+        </p>
+
+        <div className="commande">
+          <code>{COMMANDE}</code>
+          <button
+            type="button"
+            className="bouton bouton-fantome"
+            onClick={() => {
+              // Le presse-papiers peut etre refuse — hors contexte sur, ou
+              // permission retiree. L'echec ne casse pas la page : le libelle
+              // ne change simplement pas.
+              void navigator.clipboard
+                ?.writeText(COMMANDE)
+                .then(() => {
+                  setCopie(true)
+                  setTimeout(() => {
+                    setCopie(false)
+                  }, 1600)
+                })
+                .catch(() => undefined)
+            }}
+          >
+            {copie ? 'Copie' : 'Copier'}
+          </button>
+        </div>
+
+        <a
+          href="https://odoro.dev/docs/installation"
+          target="_blank"
+          rel="noreferrer"
+          className="lien-discret"
+        >
+          Lire la marche a suivre
+        </a>
+      </div>
+    </section>
+  )
+}

package/templates/react-ts/_variantes/sans-libs/src/sections/Fond.tsx

@@ -0,0 +1,23 @@
+/**
+ * Le fond decoratif de la page.
+ *
+ * Deux nappes de couleur de marque, tres diluees. Rien ne bouge : c'est un
+ * degrade, pas une animation.
+ *
+ * Si le moteur a ete retenu, ce fichier est remplace par une version qui ouvre
+ * une surface WebGL animee.
+ *
+ * @module
+ */
+
+import type { ReactElement } from 'react'
+
+/** Deux nappes de marque derriere le haut de la page. */
+export function Fond(): ReactElement {
+  return (
+    <div className="fond" aria-hidden="true">
+      <div className="fond-nappe fond-nappe-haute" />
+      <div className="fond-nappe fond-nappe-droite" />
+    </div>
+  )
+}

package/templates/react-ts/_variantes/sans-libs/src/sections/Hero.tsx

@@ -0,0 +1,92 @@
+/**
+ * Le hero : la promesse, et la fenetre du produit.
+ *
+ * Meme dessin que la version avec bibliotheques — titre serre, pastilles de
+ * faits, fenetre de navigateur — en CSS ordinaire. Ce qui manque ici est
+ * l'animation d'entree : elle venait de `@odoro-cli/libs/motion`, et il n'y a
+ * pas lieu de la reecrire a la main dans un projet de depart.
+ *
+ * @module
+ */
+
+import type { ReactElement } from 'react'
+
+import { Signe } from '@/composants/Marque'
+
+/** Trois faits, pas trois slogans. */
+const FAITS = ['Zero configuration', 'TypeScript strict', 'Rechargement a chaud']
+
+/** Ce que la fenetre montre. */
+const EXTRAIT = `export function App() {
+  return (
+    <h1 className="titre">
+      Votre premiere page.
+    </h1>
+  )
+}`
+
+/** Une fenetre de navigateur miniature. */
+function Fenetre(): ReactElement {
+  return (
+    <div className="fenetre">
+      <div className="fenetre-barre">
+        <span className="fenetre-pastilles" aria-hidden="true">
+          <span />
+          <span />
+          <span />
+        </span>
+        <span className="fenetre-chemin">src/App.tsx</span>
+      </div>
+      <pre className="fenetre-code">{EXTRAIT}</pre>
+    </div>
+  )
+}
+
+/** Le hero de la page d'accueil. */
+export function Hero(): ReactElement {
+  return (
+    <section className="hero">
+      <div className="contenu">
+        <span className="pastille-marque">
+          <Signe />
+          Genere par odoro create
+        </span>
+
+        <h1 className="hero-titre">
+          Votre premiere page, <span className="accent">deja vivante</span>.
+        </h1>
+
+        <p className="hero-chapeau">
+          Le serveur de developpement, la compilation et le rechargement a chaud
+          viennent de <code>odoro</code>. Le systeme de style est le votre.
+        </p>
+
+        <div className="hero-actions">
+          <a href="#piliers" className="bouton bouton-primaire">
+            Voir ce qui est inclus
+          </a>
+          <a
+            href="https://odoro.dev/docs"
+            target="_blank"
+            rel="noreferrer"
+            className="bouton bouton-secondaire"
+          >
+            Documentation
+          </a>
+        </div>
+
+        <div className="faits">
+          {FAITS.map((fait) => (
+            <span key={fait} className="fait">
+              {fait}
+            </span>
+          ))}
+        </div>
+
+        <div className="hero-fenetre">
+          <Fenetre />
+        </div>
+      </div>
+    </section>
+  )
+}

package/templates/react-ts/_variantes/sans-libs/src/sections/Piliers.tsx

@@ -0,0 +1,44 @@
+/**
+ * Trois piliers : ce que le projet a deja sous la main.
+ *
+ * @module
+ */
+
+import type { ReactElement } from 'react'
+
+/** Un pilier : un titre, une phrase. */
+const PILIERS: readonly { readonly titre: string; readonly texte: string }[] = [
+  {
+    titre: 'Compilation',
+    texte:
+      'Un serveur de developpement a rechargement a chaud, et une compilation de production.',
+  },
+  {
+    titre: 'TypeScript',
+    texte: 'Types stricts, alias de chemins, et verification sans emission.',
+  },
+  {
+    titre: 'A vous de jouer',
+    texte: 'Aucun systeme de style impose : le votre prend toute la place.',
+  },
+]
+
+/** La section des piliers. */
+export function Piliers(): ReactElement {
+  return (
+    <section id="piliers" className="section">
+      <div className="contenu">
+        <h2 className="sur-titre">Ce qui est deja la</h2>
+        <div className="grille">
+          {PILIERS.map((pilier, index) => (
+            <article key={pilier.titre} className="carte">
+              <span className="carte-numero">{String(index + 1).padStart(2, '0')}</span>
+              <h3>{pilier.titre}</h3>
+              <p>{pilier.texte}</p>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}