@stackcraftmx/calcita 0.0.0-stage → 0.25.0

package/cli/templates/form/formik/__FormName__.jsx.tpl

@@ -0,0 +1,50 @@
+// __FormName__ (formik + yup): las reglas en __formName__Schema.js y los textos en __formName__Texts.js.
+//
+// La pantalla dice qué hacer con los datos (onSubmit). Si el servidor dice que no (RFC 9457), el aviso sale arriba del
+// formulario y lo de cada campo, en su campo (applyServerProblem). Al guardar, el formulario se vacía y avisa (onSaved).
+//
+// Lo renderiza la app: arrow (regla de la casa).
+import {useMemo} from 'react';
+import Stack from '@mui/material/Stack';
+import {useToolkitTranslation} from '@stackcraftmx/calcita';
+import {Form, FormProblemAlert, FormTextField, Formik, SubmitButton, applyServerProblem} from '@stackcraftmx/calcita/forms';
+
+import {__FORM_NAME___INITIAL_VALUES, build__FormName__Schema} from '@/modules/__module__/__formName__Schema.js';
+
+// los renglones de las notas al abrir
+const NOTES_MIN_ROWS = 3;
+
+/**
+ * @param {object} props
+ * @param {(values: {name: string, notes: string}) => Promise<{message: string}>} props.onSubmit guarda; truena con el
+ *     ApiError si el servidor dice que no
+ * @param {(message: string) => void} [props.onSaved] ya se guardó: el aviso del servidor
+ */
+export const __FormName__ = ({onSubmit, onSaved}) => {
+    const {t} = useToolkitTranslation('__module__');
+    // el esquema se arma al pintar: yup toma sus mensajes al armarlo
+    const schema = useMemo(() => build__FormName__Schema(), []);
+
+    const submit = async (values, formikHelpers) => {
+        try {
+            const response = await onSubmit(values);
+            formikHelpers.resetForm();
+            onSaved?.(response.message);
+        } catch (error) {
+            applyServerProblem(error, {...formikHelpers, values});
+        }
+    };
+
+    return (
+        <Formik initialValues={__FORM_NAME___INITIAL_VALUES} validationSchema={schema} onSubmit={submit}>
+            <Form noValidate>
+                <Stack spacing={2}>
+                    <FormProblemAlert />
+                    <FormTextField name="name" label={t('__formName__.name')} />
+                    <FormTextField name="notes" label={t('__formName__.notes')} helperText={t('__formName__.notesHelp')} multiline minRows={NOTES_MIN_ROWS} />
+                    <SubmitButton sx={{alignSelf: 'flex-start'}}>{t('__formName__.submit')}</SubmitButton>
+                </Stack>
+            </Form>
+        </Formik>
+    );
+};

package/cli/templates/form/hookForm/__FormName__.jsx.tpl

@@ -0,0 +1,53 @@
+// __FormName__ (react-hook-form + yup): las reglas en __formName__Schema.js y los textos en __formName__Texts.js.
+//
+// La pantalla dice qué hacer con los datos (onSubmit). Si el servidor dice que no (RFC 9457), el aviso sale arriba del
+// formulario y lo de cada campo, en su campo (applyServerProblem). Al guardar, el formulario se vacía y avisa (onSaved).
+//
+// Lo renderiza la app: arrow (regla de la casa).
+import {useMemo} from 'react';
+import Stack from '@mui/material/Stack';
+import {useToolkitTranslation} from '@stackcraftmx/calcita';
+import {
+    FormProblemAlert, FormProvider, FormTextField, SubmitButton, applyServerProblem, useForm, yupResolver,
+} from '@stackcraftmx/calcita/react-hook-form';
+
+import {__FORM_NAME___INITIAL_VALUES, build__FormName__Schema} from '@/modules/__module__/__formName__Schema.js';
+
+// los renglones de las notas al abrir
+const NOTES_MIN_ROWS = 3;
+
+/**
+ * @param {object} props
+ * @param {(values: {name: string, notes: string}) => Promise<{message: string}>} props.onSubmit guarda; truena con el
+ *     ApiError si el servidor dice que no
+ * @param {(message: string) => void} [props.onSaved] ya se guardó: el aviso del servidor
+ */
+export const __FormName__ = ({onSubmit, onSaved}) => {
+    const {t} = useToolkitTranslation('__module__');
+    // el esquema se arma al pintar: yup toma sus mensajes al armarlo
+    const resolver = useMemo(() => yupResolver(build__FormName__Schema()), []);
+    const form = useForm({resolver, defaultValues: __FORM_NAME___INITIAL_VALUES});
+
+    const submit = form.handleSubmit(async (values) => {
+        try {
+            const response = await onSubmit(values);
+            form.reset();
+            onSaved?.(response.message);
+        } catch (error) {
+            applyServerProblem(error, form);
+        }
+    });
+
+    return (
+        <FormProvider {...form}>
+            <form onSubmit={submit} noValidate>
+                <Stack spacing={2}>
+                    <FormProblemAlert />
+                    <FormTextField name="name" label={t('__formName__.name')} />
+                    <FormTextField name="notes" label={t('__formName__.notes')} helperText={t('__formName__.notesHelp')} multiline minRows={NOTES_MIN_ROWS} />
+                    <SubmitButton sx={{alignSelf: 'flex-start'}}>{t('__formName__.submit')}</SubmitButton>
+                </Stack>
+            </form>
+        </FormProvider>
+    );
+};

package/cli/templates/form/shared/__formName__Schema.js.tpl

@@ -0,0 +1,20 @@
+// Las reglas de __FormName__ del lado del navegador (yup). La que protege es la del servidor; esta es para no gastar un
+// viaje en lo obvio.
+//
+// OJO: el esquema es una función y no una constante: yup toma sus mensajes al armarlo, y armado al importar el archivo se
+// adelantaría a buildYupLocale (main.jsx) y saldría en inglés.
+import {Yup} from '@stackcraftmx/calcita/forms';
+
+// lo más largo que acepta el servidor
+const NAME_MAX_LENGTH = 120;
+const NOTES_MAX_LENGTH = 500;
+
+/** Cómo empieza el formulario: vacío. */
+export const __FORM_NAME___INITIAL_VALUES = Object.freeze({name: '', notes: ''});
+
+export function build__FormName__Schema() {
+    return Yup.object({
+        name: Yup.string().trim().required().max(NAME_MAX_LENGTH),
+        notes: Yup.string().trim().max(NOTES_MAX_LENGTH),
+    });
+}

package/cli/templates/form/shared/__formName__Texts.js.tpl

@@ -0,0 +1,6 @@
+// Los textos de __FormName__ (namespace __module__, llave __formName__). Los mensajes de las reglas («Escriba…», «Máximo…»)
+// vienen de Calcita.
+export const __formName__Texts = {
+    es: {__module__: {__formName__: {name: 'Nombre', notes: 'Notas', notesHelp: 'Opcional.', submit: 'Guardar'}}},
+    en: {__module__: {__formName__: {name: 'Name', notes: 'Notes', notesHelp: 'Optional.', submit: 'Save'}}},
+};

package/cli/templates/module/__Name__Page.jsx.tpl

@@ -0,0 +1,75 @@
+// __LABEL_ES__: la lista que manda el servidor y el formulario para agregar uno. Es el esqueleto que armó el CLI de Calcita
+// (make:module): cámbielo a lo que pida su pantalla.
+//
+// La pantalla no sabe del servidor: llama a __name__Api.js (hoy el servidor de mentira; mañana el de verdad).
+//
+// Lo renderiza la app: arrow (regla de la casa).
+import {useCallback, useEffect, useState} from 'react';
+import Alert from '@mui/material/Alert';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import {PageHeading, SectionCard, formatDateTime, toastSuccess, useToolkitTranslation} from '@stackcraftmx/calcita';
+
+import {__Name__Form} from '@/modules/__name__/__Name__Form.jsx';
+import {addRecord, loadRecords} from '@/modules/__name__/__name__Api.js';
+
+// lo alto del esqueleto mientras llega la lista
+const LOADING_HEIGHT_PIXELS = 160;
+// lo ancho del formulario: un renglón cómodo, no toda la pantalla
+const FORM_MAX_WIDTH = 520;
+
+export const __Name__Page = () => {
+    const {t} = useToolkitTranslation('__name__');
+    // null: todavía no llega
+    const [records, setRecords] = useState(null);
+    const [loadError, setLoadError] = useState(null);
+
+    const reload = useCallback((signal) => loadRecords(signal)
+        .then((loadedRecords) => {
+            setRecords(loadedRecords);
+            setLoadError(null);
+        })
+        // cancelar (la pantalla se cerró a media carga) no es un error que enseñar
+        .catch((error) => error.name !== 'AbortError' && setLoadError(error.message)), []);
+
+    useEffect(() => {
+        const controller = new AbortController();
+        reload(controller.signal);
+        return () => controller.abort();
+    }, [reload]);
+
+    // el formulario ya guardó: el aviso del servidor y la lista al día
+    const showSaved = (message) => {
+        toastSuccess(message);
+        reload();
+    };
+
+    return (
+        <Stack spacing={3}>
+            <PageHeading title={t('page.title')} description={t('page.description')} />
+            <SectionCard title={t('page.formTitle')}>
+                <Stack sx={{maxWidth: FORM_MAX_WIDTH}}>
+                    <__Name__Form onSubmit={addRecord} onSaved={showSaved} />
+                </Stack>
+            </SectionCard>
+            <SectionCard title={t('page.listTitle')}>
+                {loadError && <Alert severity="error">{loadError}</Alert>}
+                {!records && !loadError && <Skeleton variant="rounded" height={LOADING_HEIGHT_PIXELS} />}
+                {records?.length === 0 && <Typography variant="body2" color="text.secondary">{t('page.empty')}</Typography>}
+                {records?.length > 0 && (
+                    <List disablePadding aria-label={t('page.listTitle')}>
+                        {records.map((record) => (
+                            <ListItem key={record.id} divider disableGutters>
+                                <ListItemText primary={record.name} secondary={record.notes || formatDateTime(record.createdAt)} />
+                            </ListItem>
+                        ))}
+                    </List>
+                )}
+            </SectionCard>
+        </Stack>
+    );
+};

package/cli/templates/module/__name__Api.js.tpl

@@ -0,0 +1,39 @@
+// Las llamadas de __LABEL_ES__: la ÚNICA puerta de sus pantallas al servidor. Hoy van al servidor de mentira
+// (src/fakeServer/__name__Server.js); con backend, cada una cambia por su petición con apiClient (core) sin tocar las
+// pantallas:
+//
+//   export const loadRecords = async (signal) => (await apiClient.get('/__kebab__', {signal})).map(recordOf);
+//
+// Aquí también se cambia la forma de los datos: el API manda snake_case (created_at) y las pantallas usan camelCase.
+//
+// Funciones que no renderizan: function (regla de la casa).
+import {newIdentifier} from '@stackcraftmx/calcita';
+
+import {createRecord, listRecords} from '@/fakeServer/__name__Server.js';
+
+/** Un registro como lo usan las pantallas. */
+function recordOf(record) {
+    return {id: record.id, name: record.name, notes: record.notes, createdAt: record.created_at};
+}
+
+/**
+ * La lista, del más nuevo al más viejo.
+ *
+ * @param {AbortSignal} [signal]
+ * @returns {Promise<Array<{id: string, name: string, notes: string, createdAt: string}>>}
+ */
+export async function loadRecords(signal) {
+    return (await listRecords(signal)).map(recordOf);
+}
+
+/**
+ * Agrega uno. El id lo pone el navegador (newIdentifier: UUID v7, se ordena por fecha). Truena con el ApiError si el
+ * servidor dice que no.
+ *
+ * @param {{name: string, notes: string}} values
+ * @returns {Promise<{message: string}>} el aviso del servidor, ya en el idioma de la persona
+ */
+export async function addRecord(values) {
+    const response = await createRecord({id: newIdentifier(), ...values});
+    return {message: response.message};
+}

package/cli/templates/module/__name__Texts.js.tpl

@@ -0,0 +1,27 @@
+// Los textos de __LABEL_ES__ (namespace __name__). Los de su formulario van en __name__FormTexts.js, en el mismo namespace.
+export const __name__Texts = {
+    es: {
+        __name__: {
+            menu: {label: '__LABEL_ES__', description: 'La lista y el formulario para agregar.'},
+            page: {
+                title: '__LABEL_ES__',
+                description: 'El esqueleto que armó el CLI de Calcita: la lista que manda el servidor y el formulario para agregar.',
+                formTitle: 'Agregar',
+                listTitle: 'Lista',
+                empty: 'Todavía no hay nada: agregue el primero.',
+            },
+        },
+    },
+    en: {
+        __name__: {
+            menu: {label: '__LABEL_EN__', description: 'The list and the form to add.'},
+            page: {
+                title: '__LABEL_EN__',
+                description: 'The skeleton made by the Calcita CLI: the list sent by the server and the form to add.',
+                formTitle: 'Add',
+                listTitle: 'List',
+                empty: 'Nothing here yet: add the first one.',
+            },
+        },
+    },
+};

package/cli/templates/module/menu.js.tpl

@@ -0,0 +1,21 @@
+// La entrada de __LABEL_ES__ en el menú (composeMenu la descubre sola: no hay una lista central que editar).
+//
+// access es la regla de quién lo ve; la misma protege sus rutas (withAccess en app/appRouter.jsx). Sin access, lo ve
+// cualquiera que entre. Por ejemplo, solo con el permiso de verlo: export const access = {ability: '__name__.view'};
+import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined';
+
+import {__NAME___PATH} from '@/modules/__name__/routes.js';
+
+// el lugar en el menú: los números más chicos van arriba
+export const order = __ORDER__;
+
+export function buildMenuItem() {
+    return {
+        to: __NAME___PATH,
+        labelKey: '__name__:menu.label',
+        descriptionKey: '__name__:menu.description',
+        // el título de su sección en el menú (en app/shellTexts.js); sin sectionKey va arriba, sin sección
+        sectionKey: 'shell:sections.operation',
+        Icon: FolderOutlinedIcon,
+    };
+}

package/cli/templates/module/routes.js.tpl

@@ -0,0 +1,7 @@
+// Las rutas de __LABEL_ES__. Cada pantalla viaja en su propio archivo (lazy): se descarga hasta que alguien la abre.
+// «calcita make:page __kebab__ <Pantalla>» agrega aquí la suya.
+export const __NAME___PATH = '/__kebab__';
+
+export const routes = [
+    {path: __NAME___PATH, lazy: async () => ({Component: (await import('@/modules/__name__/__Name__Page.jsx')).__Name__Page})},
+];

package/cli/templates/moduleServer/__name__Server.js.tpl

@@ -0,0 +1,68 @@
+// Lo que respondería el API de __LABEL_ES__: la lista y agregar uno. Datos de mentira en memoria: se pierden al recargar
+// la página. Cada respuesta tiene la forma que tendría el API de verdad (llaves en snake_case y errores RFC 9457 con el
+// mensaje en el idioma de la persona).
+//
+// Funciones del servidor de mentira, sin React: function (regla de la casa).
+import {ApiError} from '@stackcraftmx/calcita';
+
+import {NETWORK_DELAY_MILLISECONDS, waitLikeNetwork} from '@/fakeServer/networkDelay.js';
+import {serverTextOf} from '@/fakeServer/serverText.js';
+
+const HTTP_STATUS = Object.freeze({conflict: 409, unprocessable: 422});
+const MILLISECONDS_PER_DAY = 24 * 60 * 60 * 1000;
+const MESSAGES = Object.freeze({
+    validationTitle: {es: 'Revise los datos', en: 'Check the data'},
+    validationDetail: {es: 'Hay campos por corregir.', en: 'Some fields need to be fixed.'},
+    nameRequired: {es: 'Escriba el nombre.', en: 'Enter the name.'},
+    repeatedTitle: {es: 'Ya está en la lista', en: 'Already on the list'},
+    repeated: {es: '«{{name}}» ya está en la lista.', en: '“{{name}}” is already on the list.'},
+    created: {es: 'Se agregó «{{name}}».', en: '“{{name}}” was added.'},
+});
+
+/** La fecha de hace unos días, como texto ISO (UTC): los ejemplos siempre se ven recientes. */
+function daysAgo(days) {
+    return new Date(Date.now() - days * MILLISECONDS_PER_DAY).toISOString();
+}
+
+let records = [
+    {id: '__name__-sample-1', name: 'Primer ejemplo', notes: 'Viene de src/fakeServer/__name__Server.js', created_at: daysAgo(2)},
+    {id: '__name__-sample-2', name: 'Segundo ejemplo', notes: '', created_at: daysAgo(1)},
+];
+
+/**
+ * GET __kebab__: la lista, del más nuevo al más viejo.
+ *
+ * @param {AbortSignal} [signal]
+ */
+export async function listRecords(signal) {
+    await waitLikeNetwork(NETWORK_DELAY_MILLISECONDS, signal);
+    return [...records].sort((first, second) => second.created_at.localeCompare(first.created_at));
+}
+
+/**
+ * POST __kebab__: agrega uno. Sin nombre responde 422 (con el error en su campo); con un nombre que ya está, 409.
+ *
+ * @param {{id: string, name: string, notes?: string}} input
+ */
+export async function createRecord({id, name, notes}) {
+    await waitLikeNetwork(NETWORK_DELAY_MILLISECONDS);
+    const cleanName = name?.trim() ?? '';
+    if (!cleanName) {
+        throw new ApiError({
+            status: HTTP_STATUS.unprocessable,
+            problem: {
+                title: serverTextOf(MESSAGES.validationTitle), detail: serverTextOf(MESSAGES.validationDetail),
+                errors: {name: [serverTextOf(MESSAGES.nameRequired)]},
+            },
+        });
+    }
+    if (records.some((record) => record.name.toLowerCase() === cleanName.toLowerCase())) {
+        throw new ApiError({
+            status: HTTP_STATUS.conflict,
+            problem: {title: serverTextOf(MESSAGES.repeatedTitle), detail: serverTextOf(MESSAGES.repeated, {name: cleanName})},
+        });
+    }
+    const record = {id, name: cleanName, notes: notes?.trim() ?? '', created_at: new Date().toISOString()};
+    records = [...records, record];
+    return {record, message: serverTextOf(MESSAGES.created, {name: cleanName})};
+}

package/cli/templates/page/__PageName__Page.jsx.tpl

@@ -0,0 +1,22 @@
+// __PAGE_LABEL_ES__ (en __module__): la pantalla que armó el CLI de Calcita (make:page). Su ruta está en routes.js del
+// módulo (__PAGE_NAME___PATH) y sus textos en __pageName__PageTexts.js.
+//
+// Para hablar con el servidor, la pantalla llama a __module__Api.js (la única puerta del módulo), nunca directo.
+//
+// Lo renderiza la app: arrow (regla de la casa).
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import {PageHeading, SectionCard, useToolkitTranslation} from '@stackcraftmx/calcita';
+
+export const __PageName__Page = () => {
+    const {t} = useToolkitTranslation('__module__');
+
+    return (
+        <Stack spacing={3}>
+            <PageHeading title={t('__pageName__Page.title')} description={t('__pageName__Page.description')} />
+            <SectionCard title={t('__pageName__Page.sectionTitle')}>
+                <Typography variant="body2" color="text.secondary">{t('__pageName__Page.empty')}</Typography>
+            </SectionCard>
+        </Stack>
+    );
+};

package/cli/templates/page/__pageName__PageTexts.js.tpl

@@ -0,0 +1,23 @@
+// Los textos de __PAGE_LABEL_ES__ (namespace __module__, llave __pageName__Page).
+export const __pageName__PageTexts = {
+    es: {
+        __module__: {
+            __pageName__Page: {
+                title: '__PAGE_LABEL_ES__',
+                description: 'La pantalla que armó el CLI de Calcita.',
+                sectionTitle: 'Contenido',
+                empty: 'Aquí va lo de esta pantalla.',
+            },
+        },
+    },
+    en: {
+        __module__: {
+            __pageName__Page: {
+                title: '__PAGE_LABEL_EN__',
+                description: 'The screen made by the Calcita CLI.',
+                sectionTitle: 'Content',
+                empty: 'What this screen shows goes here.',
+            },
+        },
+    },
+};

package/cli/templates/project/README.md.tpl

@@ -0,0 +1,83 @@
+# __APP_TITLE__
+
+App de React + MUI armada con [Calcita](https://www.npmjs.com/package/@stackcraftmx/calcita) (`calcita new`).
+
+## Arrancar
+
+```bash
+pnpm install
+pnpm dev
+```
+
+//#if auth
+Para entrar: «Entrar con la cuenta de ejemplo» (la cuenta de demostración no pide contraseña).
+
+## Conectar la cuenta a su backend
+
+Entrar (con su segundo paso), «¿Olvidó su contraseña?», elegir una contraseña nueva, Mi perfil y su seguridad ya vienen
+hechos en Calcita. Lo único de la app es `src/core/accountConnector.js`:
+
+- Sin `VITE_API_URL` trabaja con la cuenta de demostración, en este navegador.
+- Con la dirección del API en `.env.local` (`VITE_API_URL=https://api.mi-tienda.com`) usa el backend de verdad. Si el
+  backend sigue el contrato REST de Calcita (README de Calcita, «La cuenta completa: conectar su backend»), no hay nada más que
+  hacer; si alguna ruta o respuesta es distinta, se cambia solo esa función en `accountConnector.js`.
+
+//#endif
+## Cómo está armado
+
+```
+src/
+  main.jsx            el tema y el router
+  app/                el único lugar donde se conecta el framework: proveedores, marco, rutas, tema y textos
+  core/               lo que comparten dos o más módulos (se importa de '@/core')
+  fakeServer/         el servidor de mentira: datos en memoria con la forma del API de verdad
+  modules/<módulo>/   cada módulo en su carpeta: menu.js, routes.js, sus pantallas, su *Api.js y sus *Texts.js
+```
+
+- **Un módulo nuevo no edita nada fuera de su carpeta**: el menú, las rutas y los textos se descubren solos.
+- **Una pantalla solo habla con el servidor por el `*Api.js` de su módulo.** Hoy esas llamadas van a `src/fakeServer`;
+  para conectar el backend de verdad, cada una cambia por su petición con `apiClient` (`src/core/apiClient.js`) y la
+  pantalla no se toca.
+- **Textos en español e inglés** en los `*Texts.js` de cada módulo; los de los componentes de Calcita (tablas, diálogos,
+  validaciones) ya vienen.
+- **Imports con el alias `@/`** (= `src/`), declarado en `vite.config.js` y en `jsconfig.json`.
+
+## Publicar una versión nueva
+
+`pnpm build` deja la app en `dist/`, con `version.json` (la versión de esa compilación). La app publicada lo vuelve a leer al
+abrirla y cada tanto: si ya hay otra, se recarga sola cuando estuvo fuera 15 minutos o más (una pestaña de ayer, la app
+anclada al inicio del iPhone) y, si no, enseña el aviso «Versión nueva» con su botón. Para que funcione, el servidor no
+debe guardar `index.html` ni `version.json` (`Cache-Control: no-cache`); los archivos de `dist/assets/` sí, un año.
+
+## Detrás de un proxy con prefijo
+
+Para publicarla en una ruta y no en un subdominio (`miempresa.com/ventas/`), el prefijo se da una vez al construir:
+
+```bash
+ASSET_URL=/ventas pnpm build
+```
+
+Vite le pone el prefijo a sus archivos y a las rutas de `index.html`, el router lo quita al leer la dirección y las pantallas
+siguen escribiendo sus rutas desde la raíz (`/contacts`). Lo de `public/` se pide con `publicUrlOf('favicon.svg')`
+(`src/core/publicPaths.js`), nunca escrito desde la raíz. En el servidor, cada dirección bajo el prefijo que no sea un archivo
+regresa su `index.html`:
+
+```nginx
+location /ventas/ {
+    try_files $uri $uri/ /ventas/index.html;
+}
+```
+
+Con otro prefijo se vuelve a construir.
+
+## Crecer la app con el CLI
+
+```bash
+pnpm exec calcita make:module purchase-orders --label-es "Órdenes de compra" --label-en "Purchase orders"
+pnpm exec calcita make:page purchase-orders OrderDetail
+pnpm exec calcita make:form purchase-orders OrderForm
+pnpm exec calcita make:component StatusBadge                  # en src/core
+pnpm exec calcita make:component OrderTotals --module purchase-orders
+```
+
+Los formularios salen con __FORMS_LIBRARY__ (lo dice `calcita.json`, que guarda lo que se eligió al crear el proyecto).

package/cli/templates/project/dot-gitignore.tpl

@@ -0,0 +1,11 @@
+node_modules
+dist
+
+# lo del editor y del sistema de cada quien
+.idea
+.vscode
+.DS_Store
+
+# las variables de cada quien (la dirección del API, llaves): nunca al repo
+.env.local
+.env.*.local

package/cli/templates/project/index.html.tpl

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+//#if pwa
+    <!-- para instalarla como app (PWA): el nombre, los íconos y los colores van en el manifiesto; el nombre corto, bajo el
+         ícono del iPhone -->
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
+    <meta name="apple-mobile-web-app-title" content="__APP_TITLE__" />
+//#endif
+    <title>__APP_TITLE__</title>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="/src/main.jsx"></script>
+</body>
+</html>

package/cli/templates/project/jsconfig.json.tpl

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "paths": {
+            "@/*": [
+                "./src/*"
+            ]
+        },
+        "jsx": "react-jsx",
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "target": "ES2022"
+    },
+    "include": [
+        "src"
+    ]
+}

package/cli/templates/project/pnpm-workspace.yaml.tpl

@@ -0,0 +1,5 @@
+# La configuración de pnpm para este proyecto (no es un workspace con varios paquetes).
+# pnpm no deja correr el script de instalación de ningún paquete sin permiso. esbuild sí lo necesita: baja el binario del
+# sistema operativo de quien instala, y Vite construye con él.
+allowBuilds:
+  esbuild: true

package/cli/templates/project/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#1E293B"/><path d="M32 14 45 32 32 50 19 32Z" fill="#FFFFFF"/></svg>

package/cli/templates/project/public/manifest.webmanifest.tpl

@@ -0,0 +1,17 @@
+{
+  "name": "__APP_TITLE__",
+  "short_name": "__APP_TITLE__",
+  "id": "./",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "background_color": "#FFFFFF",
+  "theme_color": "__PRIMARY_COLOR__",
+  "lang": "es-MX",
+  "dir": "ltr",
+  "icons": [
+    {"src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any"},
+    {"src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any"},
+    {"src": "icons/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable"}
+  ]
+}