@arroyavecommerce/cms-studio

Editor visual embebible del CMS de arroyaveCommerce: monta en la ruta /studio del storefront y permite editar bloques, zonas y tema con vista previa en vivo, sobre el motor Puck. Incluye las factories de Server Actions (guardar borrador, publicar, revertir) y el StudioProvider que conecta el editor con el backend Medusa a través del plugin @arroyavecommerce/cms-medusa.

Es peer de @arroyavecommerce/cms-core: comparte con él los tipos de bloque/tema/zona y no funciona sin él.

Instalación

npm i @arroyavecommerce/cms-studio @arroyavecommerce/cms-core

Se distribuye como código fuente TypeScript (no compilado); hay que transpilarlo en el consumidor:

// next.config.js
const nextConfig = {
  transpilePackages: ["@arroyavecommerce/cms-core", "@arroyavecommerce/cms-studio"],
};

Uso

import { StudioProvider, StudioEditor } from "@arroyavecommerce/cms-studio";
import {
  makeAuthActions,
  makeCmsActions,
  makeThemeActions,
  makeZoneActions,
} from "@arroyavecommerce/cms-studio/actions";

Cada make*Actions recibe la configuración de la tienda (URL del backend, lector de sesión, contrato de tema) y devuelve las Server Actions que el storefront re-exporta desde sus archivos delgados. Ver el contrato completo en la guía de instalación.

El storefront consumidor crea un pequeño conjunto de archivos delgados ("contrato de instalación": tema propio, bloques propios, rutas /studio, remap de Tailwind) — todo documentado paso a paso en docs/instalacion.md del repositorio.

Compatibilidad

| Dependencia | Versión mínima | | --- | --- | | React | >= 19 | | React DOM | >= 19 | | Next.js | >= 15 | | @arroyavecommerce/cms-core | >= 0.1.0 | | @puckeditor/core | >= 0.22 |

Repositorio

github.com/arroyave-yohan/arroyavecommerce-cms