La línea de comandos

amset-ui es la línea de comandos que viene dentro de @amset/ui: no se instala aparte, se llama con npx amset-ui. Crea una aplicación, monta la biblioteca en un proyecto que ya existe, lo diagnostica, pone al día el código de una versión anterior, genera tu tema y copia componentes y pantallas enteras a tu repositorio.

Todo lo que se ve en esta página es salida de verdad: cada comando se ejecuta al construir la web, en una carpeta limpia, con la CLI de @amset/ui 0.17.1, sobre dos proyectos de ejemplo —una aplicación de Next recién creada y un panel que viene de la 0.14—. Si la CLI cambia un mensaje, esta página cambia con ella.

Los comandos

Comando	Para qué
`create`	Una aplicación nueva, de Next o de Vite, con la biblioteca ya puesta.
`init`	Montar la biblioteca en un proyecto que ya existe.
`doctor`	Diagnosticar un proyecto que ya la usa. Sale con 1 si hay errores.
`migrate`	Reescribir el código que usa nombres que la biblioteca retiró.
`theme`	Generar el CSS de tu tema desde `amset-ui.config.js`.
`knobs`	Listar lo que se puede tocar de cada componente.
`add` y `list`	Copiar a tu proyecto el código de un componente o de una pantalla entera.

amset-ui - el tema de @amset/ui   npx amset-ui create <carpeta> [--template next|vite] [--brand <#hex>] [--install] [--dry-run]      Una aplicacion nueva con la biblioteca ya puesta: TypeScript estricto,      ESLint, sin Tailwind, el armazon con su menu y cada pagina en su propio      fichero. Next (App Router) por defecto. No escribe en una carpeta que ya      tenga algo dentro.   npx amset-ui add <componente o bloque>... [--dest <ruta>] [--overwrite] [--dry-run]  npx amset-ui list [<texto>] [--blocks]      Copia a tu proyecto el codigo de un componente, o un bloque: una pantalla      entera (panel, alta de cliente, factura, ajustes...) hecha solo con      componentes de la biblioteca. --blocks lista solo los bloques.   npx amset-ui init [--brand <#hex>] [--install] [--dry-run]      Deja el proyecto con la biblioteca puesta como toca: el .npmrc, las hojas      en el orden de capas correcto, tu tema, el proveedor y el enrutador de      Next. Idempotente: lo que ya esta bien no se toca. --dry-run cuenta que      haria sin escribir nada.   npx amset-ui migrate [<carpeta o fichero>...] [--dry-run] [--check]      Pone al dia el codigo que usa nombres que @amset/ui retiro en la 0.14      (props y columnas de Table, sentido del orden, Formulario y los campos      *Form, PropsCalendarRange...). Lo reescribe con el arbol de TypeScript de      tu proyecto, no con expresiones regulares, y deja como aviso, con fichero      y linea, lo que no puede decidir solo. --check no escribe y sale con 1 si      queda algo que migrar (sirve en la CI).   npx amset-ui doctor [--json]      Diagnostica un proyecto que ya usa la biblioteca: capas CSS, Tailwind 3,      data-theme, tema sin generar, enlaces sin enrutador, Pages Router, Jest.      Sale con codigo 1 si hay algun error (sirve en la CI).   npx amset-ui theme [--config <ruta>] [--out <ruta>]      Genera tu CSS de tema desde amset-ui.config.js (o .mjs, o .json).   npx amset-ui knobs [<componente>]      Lista lo que puedes tocar de cada componente. El fichero de configuracion:   export default {    palette:    { brand, secondary, tertiary, error, success, warning, info, neutral },  // en hex; DERIVA respetando la luminosidad    colors:     { dark: { ink: '#E6FAFF' } },                       // un rol EXACTO, sin derivar    base:       { radius, 'border-width', font, ... },              // tokens globales, NO colores    components: { button: { radius: '999px' } },                    // ver "amset-ui knobs"    selector:   ':root',        // la raiz del tema; otra cosa = una marca por seccion    out:        'amset-theme.css',  } El CSS generado se importa DESPUES de @amset/ui/styles.css: va sin @layera proposito, asi gana sobre la capa de la biblioteca sin !important.

Código de salida 0 La ayuda completa, tal como la escribe npx amset-ui --help.

create: una aplicación nueva

Escribe una aplicación desde las plantillas que viajan en el paquete (starters/) y después pasa init sobre ella, así que sale con el .npmrc, tu tema y el proveedor montados y doctor no tiene nada que decir. Next con App Router por defecto; --template vite para Vite. No escribe en una carpeta que ya tenga algo dentro.

Opción	Qué hace
`--template next` o `vite`	La plantilla. Sin ella, Next con App Router.
`--brand <#hex>`	El color de tu marca: el tema sale generado con él.
`--install`	Instala las dependencias con tu gestor de paquetes.
`--dry-run`	Dice lo que escribiría, sin escribir nada.

TypeScript estricto y ESLint de serie, y sin Tailwind.
El armazón de una aplicación: AppShell, TopBar, ThemeButton y SideNav, que marca la página en la que estás.
Cada página en su propio fichero. En Next, páginas de servidor con su loading.tsx, error.tsx y not-found.tsx; en Vite, React.lazy y la página adelantada al pasar por su enlace.

 Creado: mi-app, starter de next con 13 ficheros, en mi-app Para arrancarlo:  cd mi-app  npm install  npm run dev El token del registro de @amset va en tu ~/.npmrc; el .npmrc del proyecto solo dice de donde sale el paquete.

Código de salida 0 Una aplicación de Next.

  nuevo  .gitignore  nuevo  eslint.config.js  nuevo  index.html  nuevo  package.json  nuevo  src/App.tsx  nuevo  src/PageErrorBoundary.tsx  nuevo  src/index.css  nuevo  src/main.tsx  nuevo  src/pages/CustomersPage.tsx  nuevo  src/pages/HomePage.tsx  nuevo  src/pages/NotFoundPage.tsx  nuevo  src/router.ts  nuevo  src/routes.ts  nuevo  src/vite-env.d.ts  nuevo  tsconfig.json  nuevo  vite.config.ts Escribiria: mi-panel, starter de vite con 16 ficheros, en mi-panel Para arrancarlo:  cd mi-panel  npm install  npm run dev El token del registro de @amset va en tu ~/.npmrc; el .npmrc del proyecto solo dice de donde sale el paquete.

Código de salida 0 La de Vite, con otro color y en seco: la lista de lo que escribiría.

Qué trae cada una y cómo arrancarlas.

init: la biblioteca en un proyecto que ya existe

Deja un proyecto de Next (App Router o Pages Router) o de Vite con la biblioteca puesta como toca: la línea @amset:registry en el .npmrc del proyecto (nunca un token), @amset/ui/styles/base.css arriba del CSS global —lo que fija el orden de las capas sin pagar el CSS dos veces—, tu tema generado y AmsetProvider con el enrutador de Next montados en el layout, en _app o alrededor de <App />.

Es idempotente: lo que ya está bien no se toca. No pisa un fichero tuyo, solo le añade líneas, y si no sabe dónde va algo te dice la línea exacta. Con Tailwind 3 no reordena el CSS, porque eso no se arregla con un import: lo explica doctor.

Opción	Qué hace
`--brand <#hex>`	El color de tu marca para el tema.
`--install`	Instala `@amset/ui` con tu gestor de paquetes. El token del registro sigue yendo en tu `~/.npmrc`.
`--dry-run`	Cuenta lo que haría, sin escribir nada.

  nuevo  .npmrc  nuevo  amset-ui.config.js  modificado  app/globals.css  modificado  app/layout.tsx  modificado  package.json Cambiaria: 5 fichero(s).  - Falta instalar el paquete: npm install @amset/ui  (el token del registro va en tu ~/.npmrc; con --install lo hago yo).  - Generaria el tema con: npx amset-ui theme --config amset-ui.config.js  - Para que el tema no parpadee al cargar en el servidor: <script dangerouslySetInnerHTML={{ __html: INITIAL_THEME_SCRIPT }} /> en el <head> (INITIAL_THEME_SCRIPT sale de '@amset/ui').

Código de salida 0 En seco, sobre una aplicación de Next recién creada: los cinco ficheros que tocaría.

  nuevo  .npmrc  nuevo  amset-ui.config.js  modificado  app/globals.css  modificado  app/layout.tsx  modificado  package.json Cambiado: 5 fichero(s).  - Falta instalar el paquete: npm install @amset/ui  (el token del registro va en tu ~/.npmrc; con --install lo hago yo).  - Tema generado desde amset-ui.config.js.  - Para que el tema no parpadee al cargar en el servidor: <script dangerouslySetInnerHTML={{ __html: INITIAL_THEME_SCRIPT }} /> en el <head> (INITIAL_THEME_SCRIPT sale de '@amset/ui'). Comprueba el resultado con: npx amset-ui doctor

Código de salida 0 Y de verdad.

import type { ReactNode } from 'react' import './globals.css' export default function RootLayout({ children }: { readonly children: ReactNode }) {  return (    <html lang="es">      <body>{children}</body>    </html>  )}

El layout antes…

import type { ReactNode } from 'react' import './globals.css'import { AmsetProvider } from '@amset/ui'import { NextRouterProvider } from '@amset/ui/next' export default function RootLayout({ children }: { readonly children: ReactNode }) {  return (    <html lang="es">      <body><AmsetProvider><NextRouterProvider>{children}</NextRouterProvider></AmsetProvider></body>    </html>  )}

…y después: el proveedor y el enrutador de Next, añadidos sin tocar lo demás.

@import '@amset/ui/styles/base.css';@import './amset-theme.css';body {  margin: 0;}

La hoja base y el tema, arriba del CSS global.

doctor: lo que falla sin avisar

Diagnostica un proyecto que ya usa la biblioteca y busca lo que se rompe sin dar ningún error. Cada aviso es una trampa que ya se encontró en un proyecto real:

Tailwind 3 sin orden de capas: su preflight y sus utilidades le ganan a los componentes, y el botón se queda sin fondo.
Un data-theme del proyecto con otros valores (claro, oscuro): la biblioteca no aplica ningún tema y sigue al sistema operativo.
Un token escrito como ${VARIABLE} en el .npmrc del repositorio.
El Pages Router sin transpilePackages.
El tema sin generar, desfasado de amset-ui.config.js o sin importar.
Enlaces que recargan la página entera porque falta el enrutador.
Jest sin un moduleNameMapper para los .css.
Nombres que la biblioteca ya retiró, con el fichero donde están.

Sale con código 1 si hay algún error, así que sirve de puerta en la CI. Con --json escribe lo mismo para una máquina: cada hallazgo con su id, su nivel y su título.

ok     @amset/ui ^0.17.1 esta en package.jsonok     React ^19.3.0ok     El .npmrc del repo apunta @amset al registro de GitLabok     El CSS global importa @amset/ui/styles/base.cssok     app/amset-theme.css esta al dia con amset-ui.config.jsok     No queda ningun nombre retirado en la 0.14 ni en la 0.16ok     AmsetProvider esta montadook     Los enlaces usan el enrutador de Next Todo en orden.

Código de salida 0 El proyecto de antes, después de init y de instalar el paquete.

ok     @amset/ui ^0.14.0 esta en package.jsonok     React ^19.3.0ok     El .npmrc del repo apunta @amset al registro de GitLaberror  Tailwind 3 no emite capas nativas y gana a los componentes       Su preflight, @tailwindcss/forms y sus utilidades salen sin @layer, y eso gana sobre cualquier capa: el boton se queda sin fondo ni borde y el input coge el borde de forms. Medido en un navegador.       Arreglo: Declara '@layer tw-base, amset-ui, tw-utils;' y compila Tailwind en dos ficheros (@tailwind base por un lado; components y utilities por otro). Los pasos exactos estan en el README, apartado 'With Tailwind 3'.aviso  app/globals.css no importa ninguna hoja de @amset/ui       Los componentes llevan su CSS, pero nada fija el orden de las capas ni carga los tokens de forma explicita.       Arreglo: npx amset-ui initerror  1 fichero(s) usan nombres que @amset/ui retiro en la 0.14 o en la 0.16       Ya no existen y no dan aviso: la compilacion falla o la prop se ignora. app/pedidos.tsx (@amset/ui/estilos/boton.css, numerica, ordenable, paginacion, para).       Arreglo: npx amset-ui migrate  (los reescribe; --dry-run cuenta antes lo que haria)ok     AmsetProvider esta montadoaviso  Los enlaces de la biblioteca no estan conectados al enrutador de Next       Sin NextRouterProvider, Link y ButtonLink navegan recargando la pagina entera, sin ningun error.       Arreglo: <NextRouterProvider> de '@amset/ui/next' alrededor de la aplicacion. npx amset-ui init lo pone. 2 error(es), 2 aviso(s).

Código de salida 1 Un panel que viene de la 0.14, con Tailwind 3 y nombres retirados: dos errores y código de salida 1.

{  "findings": [    {      "id": "installed",      "level": "ok",      "title": "@amset/ui ^0.17.1 esta en package.json"    },    {      "id": "react",      "level": "ok",      "title": "React ^19.3.0"    },    {      "id": "registry",      "level": "ok",      "title": "El .npmrc del repo apunta @amset al registro de GitLab"    },    {      "id": "styles",      "level": "ok",      "title": "El CSS global importa @amset/ui/styles/base.css"    },    {      "id": "theme",      "level": "ok",      "title": "app/amset-theme.css esta al dia con amset-ui.config.js"    },    {      "id": "legacy-names",      "level": "ok",      "title": "No queda ningun nombre retirado en la 0.14 ni en la 0.16"    },    {      "id": "provider",      "level": "ok",      "title": "AmsetProvider esta montado"    },    {      "id": "router",      "level": "ok",      "title": "Los enlaces usan el enrutador de Next"    }  ],  "errors": 0,  "warnings": 0}

Código de salida 0 El mismo diagnóstico del primer proyecto, con --json.

Mira también el CSS: una hoja de la 0.14 importada desde una hoja (@import '@amset/ui/estilos.css') sale como error, porque desde la 0.17 ya no existe, y migrate la reescribe a @amset/ui/styles.css. Y un data-tema en el <html>, que la biblioteca ya no lee, se señala con su línea: el atributo es data-theme.

migrate: el código de una versión anterior, al día

Reescribe el código que usa nombres que la biblioteca retiró: lo de la 0.14 (las props y las claves de columna de Table, el sentido del orden, Formulario y los campos *Form…) y lo que la 0.17 pasó al inglés (las hojas por componente, la prop para de Tooltip, que es trigger, o nueva de PasswordField, que es newPassword…).

Lo hace con el árbol de sintaxis del TypeScript de tu proyecto, no con expresiones regulares: distingue una prop de la misma palabra en un comentario, una cadena u otro componente, respeta tu sangría y tus comentarios, y sigue los imports con alias. Lo que no puede decidir solo lo deja como aviso, con fichero y línea, en vez de adivinarlo.

Opción	Qué hace
`<carpeta o fichero>…`	Dónde mirar. Sin nada, el proyecto entero.
`--dry-run`	Cuenta los cambios, sin escribir.
`--check`	No escribe y sale con 1 si queda algo que migrar: para la CI.

  app/pedidos.tsx  6 cambio(s) Cambiaria: 6 cambio(s) en 1 fichero(s).

Código de salida 1 En la CI, antes de migrar: queda algo y sale con 1.

  app/pedidos.tsx  6 cambio(s) Cambiado: 6 cambio(s) en 1 fichero(s).

Código de salida 0 La migración.

import { Button, Table, Tooltip } from '@amset/ui'import '@amset/ui/estilos/boton.css' const columnas = [  { key: 'cliente', title: 'Cliente', ordenable: true },  { key: 'total', title: 'Total', numerica: true },] export function Pedidos({ filas }: { readonly filas: readonly { id: string; cliente: string; total: number }[] }) {  return (    <>      <Tooltip content="Exportar" para={<Button>Exportar</Button>} />      <Table aria-label="Pedidos" columns={columnas} rows={filas} enServidor paginacion={{ pageSize: 20 }} />    </>  )}

Antes.

import { Button, Table, Tooltip } from '@amset/ui'import '@amset/ui/styles/button.css' const columnas = [  { key: 'cliente', title: 'Cliente', sortable: true },  { key: 'total', title: 'Total', numeric: true },] export function Pedidos({ filas }: { readonly filas: readonly { id: string; cliente: string; total: number }[] }) {  return (    <>      <Tooltip content="Exportar" trigger={<Button>Exportar</Button>} />      <Table aria-label="Pedidos" columns={columnas} rows={filas} serverSide pagination={{ pageSize: 20 }} />    </>  )}

Después: seis cambios, y lo demás del fichero tal como estaba.

 Nada que migrar: no queda ningun nombre retirado en lo que he podido leer.

Código de salida 0 Y la misma comprobación, ya en verde.

El paso a paso, y lo que cambió en cada versión.

theme: tu tema, generado

Genera el CSS de tu tema desde amset-ui.config.js (o .mjs, o .json). Deriva cada color de la paleta respetando la luminosidad de cada rol y comprueba el contraste; si un color pide más saturación de la que una pantalla puede enseñar, la baja y lo dice.

Opción	Qué hace
`--config <ruta>`	Otro fichero de configuración.
`--out <ruta>`	Dónde escribir el CSS. También se puede decir en la configuración, con `out`.

export default {  palette: { brand: '#7c3aed', secondary: '#0f766e' },  colors: { dark: { ink: '#f5f3ff' } },  base: { radius: '10px' },  components: { button: { radius: '999px' } },  out: 'app/amset-theme.css',}

Dos colores de marca, un rol fijado a mano para el tema oscuro, el radio y un mando del botón.

Aviso: accent-active (light) pedia una saturacion de 0.2336 y la pantalla solo llega a 0.2222. Se ha bajado para que el color sea el mismo en todas partes.Aviso: accent-soft (light) pedia una saturacion de 0.0273 y la pantalla solo llega a 0.0234. Se ha bajado para que el color sea el mismo en todas partes.Aviso: secondary-hover (light) pedia una saturacion de 0.0861 y la pantalla solo llega a 0.0787. Se ha bajado para que el color sea el mismo en todas partes.Aviso: secondary-active (light) pedia una saturacion de 0.081 y la pantalla solo llega a 0.07. Se ha bajado para que el color sea el mismo en todas partes.Aviso: secondary-text (light) pedia una saturacion de 0.0861 y la pantalla solo llega a 0.0823. Se ha bajado para que el color sea el mismo en todas partes.Aviso: accent-text (dark) pedia una saturacion de 0.1363 y la pantalla solo llega a 0.117. Se ha bajado para que el color sea el mismo en todas partes.Aviso: focus (dark) pedia una saturacion de 0.1363 y la pantalla solo llega a 0.117. Se ha bajado para que el color sea el mismo en todas partes.Aviso: secondary-hover (dark) pedia una saturacion de 0.0861 y la pantalla solo llega a 0.0823. Se ha bajado para que el color sea el mismo en todas partes.Aviso: secondary-active (dark) pedia una saturacion de 0.081 y la pantalla solo llega a 0.0735. Se ha bajado para que el color sea el mismo en todas partes.Escrito app/amset-theme.css (3.1 kB).Importalo despues de @amset/ui/styles.css.

Código de salida 0 Lo que dice al generarlo: cada color que ha tenido que ajustar.

/* Generado por "npx amset-ui theme" - no editar a mano. * Va sin @layer a proposito: asi gana sobre la capa amset-ui sin !important. * Importalo DESPUES de @amset/ui/styles.css. */:root {  --amset-accent: oklch(0.5 0.2466 293.01);  --amset-accent-hover: oklch(0.45 0.2466 293.01);  --amset-accent-active: oklch(0.4 0.2222 293.01);  --amset-accent-text: oklch(0.47 0.2466 293.01);  --amset-accent-soft: oklch(0.955 0.0234 293.01);  --amset-accent-ink: oklch(0.985 0.0077 293.01);  --amset-secondary: oklch(0.5 0.0861 186.39);  --amset-secondary-hover: oklch(0.45 0.0787 186.39);  --amset-secondary-active: oklch(0.4 0.07 186.39);  --amset-secondary-text: oklch(0.47 0.0823 186.39);  --amset-secondary-soft: oklch(0.955 0.0101 186.39);  --amset-secondary-ink: oklch(0.985 0.003 186.39);  --amset-focus: oklch(0.5 0.2466 293.01);  --amset-radius: 10px;} [data-theme='dark'] {  --amset-accent: oklch(0.52 0.2466 293.01);  --amset-accent-hover: oklch(0.47 0.2466 293.01);  --amset-accent-active: oklch(0.42 0.2334 293.01);  --amset-accent-text: oklch(0.79 0.117 293.01);  --amset-accent-soft: oklch(0.32 0.0908 293.01);  --amset-accent-ink: oklch(0.985 0.0077 293.01);  --amset-secondary: oklch(0.52 0.0861 186.39);  --amset-secondary-hover: oklch(0.47 0.0823 186.39);  --amset-secondary-active: oklch(0.42 0.0735 186.39);  --amset-secondary-text: oklch(0.79 0.0506 186.39);  --amset-secondary-soft: oklch(0.32 0.0329 186.39);  --amset-secondary-ink: oklch(0.985 0.003 186.39);  --amset-focus: oklch(0.79 0.117 293.01);  --amset-ink: #f5f3ff;} @media (prefers-color-scheme: dark) {  :root:not([data-theme='light']) {    --amset-accent: oklch(0.52 0.2466 293.01);    --amset-accent-hover: oklch(0.47 0.2466 293.01);    --amset-accent-active: oklch(0.42 0.2334 293.01);    --amset-accent-text: oklch(0.79 0.117 293.01);    --amset-accent-soft: oklch(0.32 0.0908 293.01);    --amset-accent-ink: oklch(0.985 0.0077 293.01);    --amset-secondary: oklch(0.52 0.0861 186.39);    --amset-secondary-hover: oklch(0.47 0.0823 186.39);    --amset-secondary-active: oklch(0.42 0.0735 186.39);    --amset-secondary-text: oklch(0.79 0.0506 186.39);    --amset-secondary-soft: oklch(0.32 0.0329 186.39);    --amset-secondary-ink: oklch(0.985 0.003 186.39);    --amset-focus: oklch(0.79 0.117 293.01);    --amset-ink: #f5f3ff;  }} @media print {  :root,  [data-theme='dark'],  :root:not([data-theme='light']) {    --amset-accent: oklch(0.5 0.2466 293.01);    --amset-accent-hover: oklch(0.45 0.2466 293.01);    --amset-accent-active: oklch(0.4 0.2222 293.01);    --amset-accent-text: oklch(0.47 0.2466 293.01);    --amset-accent-soft: oklch(0.955 0.0234 293.01);    --amset-accent-ink: oklch(0.985 0.0077 293.01);    --amset-secondary: oklch(0.5 0.0861 186.39);    --amset-secondary-hover: oklch(0.45 0.0787 186.39);    --amset-secondary-active: oklch(0.4 0.07 186.39);    --amset-secondary-text: oklch(0.47 0.0823 186.39);    --amset-secondary-soft: oklch(0.955 0.0101 186.39);    --amset-secondary-ink: oklch(0.985 0.003 186.39);    --amset-focus: oklch(0.5 0.2466 293.01);  }} .amset-button {  --amset-button-radius: 999px;}

El CSS que escribe. Va sin @layer a propósito: así gana a la capa de la biblioteca sin !important.

Cada clave de la configuración, y el probador en vivo.

knobs: lo que se puede tocar

Lista las variables --amset-<componente>-* de cada componente con su valor por defecto: son las claves que admite components en amset-ui.config.js. Sin nombre, salen las 678 de los 108 componentes que tienen; con un nombre, las de los que lo llevan.

 button  .amset-button  color              var(--amset-ink)  ink                var(--amset-surface)  soft               var(--amset-divider)  text               var(--amset-ink)  text-active        var(--amset-button-text)  border             var(--amset-border-bold)  height             var(--amset-height-control)  padding            var(--amset-space-3)  font               var(--amset-text-base)  icon               1rem  radius             var(--amset-radius)  weight             var(--amset-weight-bold)  family             var(--amset-font)  transform          none  spacing            normal  line               1  gap                var(--amset-space-2)  shadow             none  background         transparent  background-hover   var(--amset-button-background)  background-active  var(--amset-button-background) textbutton  .amset-textbutton  color              var(--amset-accent-text)  offset             0.15em togglebutton  .amset-togglebutton  selected-background var(--amset-accent-soft)  selected-ink       var(--amset-accent-text)  mark               calc(var(--amset-border-width) * 2) 3 componentes, 26 mandos.

Código de salida 0 Las de los botones.

add y list: el código en tu repositorio

Para quien prefiere tener el código en su repositorio a depender de una versión publicada: add copia el de un componente con todo lo que necesita, sus hojas de estilo y un catálogo de textos con solo lo copiado; list enseña lo que hay: 216 componentes y 7 bloques. Quita la extensión .js de los imports, no pisa un fichero que ya habías cambiado y apunta lo copiado en amset-ui.json.

Un bloque es una pantalla entera: el panel, el alta de un cliente, una factura… Importa @amset/ui como tu aplicación, así que no copia el código de ningún componente: solo el suyo.

Opción	Qué hace
`--all`	Todos los componentes.
`--dest <ruta>`	Dónde copiar. Por defecto, `amset-ui/`.
`--overwrite`	Pisa también lo que habías cambiado.
`--keep-js`	Deja la extensión `.js` en los imports.
`--dry-run`	Lista lo que copiaría.
`list --blocks`	Solo los bloques.

  nuevo  base/attributes.ts  nuevo  components/button-group-context.ts  nuevo  components/button-parts.ts  nuevo  components/button.tsx  nuevo  components/choice-parts.tsx  nuevo  components/link.tsx  nuevo  messages/bundle.ts  nuevo  messages/texts/button.ts  nuevo  utils/cn.ts  nuevo  utils/links.ts  nuevo  utils/locale.tsx  nuevo  utils/messages.ts  nuevo  utils/reference.ts  nuevo  utils/routing.tsx  nuevo  utils/variants.ts  nuevo  messages/es.ts  nuevo  messages/en.ts  nuevo  styles/base.css  nuevo  styles/button-group.css  nuevo  styles/button.css  nuevo  styles/floating-button.css  nuevo  styles/print.css  nuevo  styles/text.css  nuevo  styles/theme-button.css  nuevo  styles.css Copiaria: 1 componente(s) en amset-ui (25 nuevos, 0 pisados, 0 iguales, 0 conservados).  import { Button } from './amset-ui/components/button' Importa los estilos una vez, arriba de la aplicacion: amset-ui/styles.css

Código de salida 0 Un botón, en seco: el componente, lo que usa y sus hojas.

Bloques (pantallas enteras):dashboard                        Dashboard                        Panel de gestióncustomer-list                    CustomerList                     Listado de clientescustomer-form                    CustomerForm                     Alta de clientecustomer-detail                  CustomerDetail                   Ficha de clienteinvoice-form                     InvoiceForm                      Emisión de facturasettings                         Settings                         Ajustessign-in                          SignIn                           Inicio de sesión 0 componentes y 7 bloques. "npx amset-ui add <nombre>" copia el codigo.

Código de salida 0 Las pantallas enteras que hay.

  nuevo  blocks/dashboard/dashboard.tsx  nuevo  blocks/shared/dates.ts  nuevo  blocks/shared/invoices.tsx  nuevo  blocks/shared/screen.ts Copiado: 1 bloque(s) en amset-ui (4 nuevos, 0 pisados, 0 iguales, 0 conservados).  import { Dashboard } from './amset-ui/blocks/dashboard/dashboard'

Código de salida 0 Un bloque: solo su código; los componentes los pone el paquete.

Cada pantalla, con su captura y lo que lleva.

En la CI

doctor y migrate --check salen con 1 cuando algo falla, así que entran en la CI como un paso más. En GitLab CI:

amset-ui:  stage: test  script:    - npm ci    - npx amset-ui doctor    - npx amset-ui migrate src --check