@meteo28093/equinox-ui 0.0.7 → 0.0.9

package/README.md

@@ -4,10 +4,121 @@ Equinox UI is a web component library for blogs or small web projects.
 
 You can use the bundled `equinox.css`, use a classless framework like water.css or pico.css or style the components.
 
+## Install from npm
+
+```bash
+npm install @meteo28093/equinox-ui
+```
+
+Import the package once in your browser entrypoint to register all custom elements globally:
+
+```js
+// main.js
+import "@meteo28093/equinox-ui";
+import "@meteo28093/equinox-ui/equinox.css";
+```
+
+If you only want the design tokens, import the exported token file instead:
+
+```js
+import "@meteo28093/equinox-ui/tokens.css";
+```
+
+Importing `@meteo28093/equinox-ui` registers the components globally with `customElements.define(...)`.
+
+## Supported integration modes
+
+- CDN global script via `unpkg`
+- npm package with an ESM/bundler entrypoint
+- Client-only framework integration in Vue, React, or other browser-rendered apps
+
+## Plain ESM apps
+
+Use the package in any bundler-based app by importing it from your browser entry module:
+
+```txt
+src/
+  main.js
+  App.js
+```
+
+```js
+// src/main.js
+import "@meteo28093/equinox-ui";
+import "@meteo28093/equinox-ui/equinox.css";
+
+document.body.innerHTML = `
+  <ee-card title="Hello from Equinox UI">
+    <p>Bundled ESM import works in plain browser projects.</p>
+  </ee-card>
+`;
+```
+
+## Vue / Vite
+
+Import Equinox UI once in your client bootstrap file, then use the elements directly in Vue templates.
+
+```js
+// src/main.js
+import { createApp } from "vue";
+import App from "./App.vue";
+import "@meteo28093/equinox-ui";
+import "@meteo28093/equinox-ui/equinox.css";
+
+createApp(App).mount("#app");
+```
+
+```vue
+<!-- src/App.vue -->
+<template>
+  <ee-card title="Vue + Equinox UI">
+    <p>Custom elements work after the package is imported in the app entry.</p>
+  </ee-card>
+</template>
+```
+
+## React
+
+Import Equinox UI once in your client entry file so the custom elements are registered before React renders them.
+
+```jsx
+// src/main.jsx or src/index.jsx
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "@meteo28093/equinox-ui";
+import "@meteo28093/equinox-ui/equinox.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);
+```
+
+```jsx
+// src/App.jsx
+export default function App() {
+  return (
+    <ee-card title="React + Equinox UI">
+      <p>Use Equinox UI tags directly in JSX.</p>
+    </ee-card>
+  );
+}
+```
+
+For custom DOM events or imperative APIs, use refs and `addEventListener(...)` instead of expecting React's synthetic event system to map custom events automatically.
+
+## SSR and client-only loading
+
+The ESM bundle touches `window` and `document` during module evaluation, so load it only in browser/client code.
+
+- Import it from `main.js`, `main.jsx`, or another browser entrypoint
+- In SSR-capable frameworks, keep the import behind a client boundary such as a client-only component or browser-only bootstrap file
+- Do not import the package from server-rendered modules
+
+If smoother SSR support is needed later, the next packaging improvement would be to split browser-only side effects from import-safe exports.
+
 ## Use with a CDN
 
 ```html
-<script src="https://unpkg.com/@meteo28093/equinox-ui@0.0.7/dist/equinox-ui.0.0.7.global.js"></script>
+<script src="https://unpkg.com/@meteo28093/equinox-ui@0.0.9/dist/equinox-ui.0.0.9.global.js"></script>
 ```
 
 This registers components globally.