cuenti-dna 0.1.1-beta.2 → 0.1.1-beta.4

package/README.md

@@ -23,9 +23,13 @@ pnpm add cuenti-dna@beta
 
 Cuando publiques una version estable, podras instalar con `@latest`.
 
-### Inicializacion interactiva (estilo shadcn)
+### Inicializacion de estilos
 
-Al instalar `cuenti-dna` en una terminal interactiva, se abre automaticamente un asistente (wizard) para configurar estilos.
+Durante la instalacion (`postinstall`):
+
+- En terminal interactiva, se abre automaticamente un asistente (wizard) para configurar estilos.
+- En entorno no interactivo, se intenta configurar automaticamente el primer archivo CSS detectado (por ejemplo `app/globals.css`, `src/index.css`, `src/main.css`, etc.).
+- Si no se detecta un archivo CSS conocido, se muestra un mensaje de fallback para importar `cuenti-dna/styles.css` o ejecutar `init` manualmente.
 
 Tambien puedes ejecutarlo manualmente cuando quieras:
 
@@ -51,6 +55,8 @@ Este asistente:
 - Inserta un bloque gestionado por Cuenti y deja el contenido original del usuario al final.
 - Si hay colisiones de variables, pregunta si deseas sobrescribir.
 
+Nota: `init` es opcional. Su objetivo es exponer tokens/variables en tu CSS para estilos propios del consumidor.
+
 Opciones utiles:
 
 ```bash
@@ -78,7 +84,9 @@ Importa los componentes desde el paquete:
 import { Input, Button } from 'cuenti-dna'
 ```
 
-Importa los estilos globales una sola vez en tu app (por ejemplo en el entrypoint):
+Al importar `cuenti-dna`, la libreria inyecta automaticamente su `styles.css` compilado en runtime del navegador.
+
+Si prefieres carga explicita (por ejemplo por politicas CSP o control manual), puedes importar los estilos en tu entrypoint:
 
 ```tsx
 import 'cuenti-dna/styles.css'

package/dist/index.cjs

@@ -56,6 +56,47 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/lib/runtime-styles.ts
+var import_meta = {};
+var STYLE_LINK_ID = "cuenti-dna-runtime-styles";
+var canInjectStyles = () => typeof window !== "undefined" && typeof document !== "undefined";
+var toFileHref = (filePath) => new URL(`file://${filePath.replace(/\\/g, "/")}`).href;
+var resolveStylesHrefFromImportMeta = () => {
+  try {
+    return new URL("./styles.css", import_meta.url).href;
+  } catch {
+    return null;
+  }
+};
+var resolveStylesHrefFromCommonJsFilename = () => {
+  if (typeof __filename !== "string") {
+    return null;
+  }
+  try {
+    return new URL("./styles.css", toFileHref(__filename)).href;
+  } catch {
+    return null;
+  }
+};
+var resolveStylesHref = () => resolveStylesHrefFromImportMeta() ?? resolveStylesHrefFromCommonJsFilename();
+var injectStylesheet = (href) => {
+  if (document.getElementById(STYLE_LINK_ID)) {
+    return;
+  }
+  const link = document.createElement("link");
+  link.id = STYLE_LINK_ID;
+  link.rel = "stylesheet";
+  link.href = href;
+  link.setAttribute("data-cuenti-dna", "runtime");
+  document.head.appendChild(link);
+};
+if (canInjectStyles()) {
+  const href = resolveStylesHref();
+  if (href) {
+    injectStylesheet(href);
+  }
+}
+
 // src/components/forms/form.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function Form({ children, ...props }) {