@one-million-lines/email-builder 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -6,13 +6,31 @@ This project adheres to [Semantic Versioning](https://semver.org/) and the
 
 ## [Unreleased]
 
+## [0.1.2] — 2026-06-30
+
 ### Added
 - npm library build (`dist/email-builder.js` ESM, `dist/email-builder.cjs` CommonJS).
 - Generated TypeScript declarations (`dist/index.d.ts` + per-module `.d.ts`).
-- Compiled stylesheet at `dist/styles.css`, imported via `openpostcards-builder/styles.css`.
+- Compiled stylesheet at `dist/styles.css`, imported via `@one-million-lines/email-builder/styles.css`.
 - `exports` map, `files` allowlist, and publishing metadata in `package.json`.
 - Library-only stylesheet (`src/lib.css`) that omits app `html/body/#root` globals.
 
+### Fixed
+- **CSS isolation** — `src/lib.css` no longer imports Tailwind Preflight
+  (`@import "tailwindcss"` → `@import "tailwindcss/theme"` + `@import
+  "tailwindcss/utilities"`). The global CSS reset no longer leaks into the host
+  application.
+- Added `.oml-email-builder` as the root class on the `<App>` element. All
+  builder styles are now nested under this class in the DOM.
+- Scoped minimal reset (`box-sizing`, `button`, `input`, `img` defaults) applied
+  only inside `.oml-email-builder` via `@layer base`, replacing the Preflight
+  rules that were previously global.
+- `[contenteditable="true"]:focus` selector is now scoped to
+  `.oml-email-builder` and no longer affects host page content.
+- Replaced `h-screen w-screen` on the builder root with `h-full w-full` so the
+  builder fills its container rather than always taking up the full viewport. The
+  host is responsible for sizing the container (e.g., `height: 100vh`).
+
 ### Changed
 - `react` and `react-dom` are now **peer dependencies** (no longer bundled).
 - Runtime dependencies (`@dnd-kit/*`, `lucide-react`, `zod`, `zustand`) are

package/README.md

@@ -56,15 +56,16 @@ src/
 ## Install
 
 ```bash
-npm install openpostcards-builder react react-dom
+npm install @one-million-lines/email-builder react react-dom
 ```
 
 `react` and `react-dom` (v18 or v19) are **peer dependencies** — install them in
 your app; they are never bundled into the package.
 
-> **MANUAL ACTION REQUIRED:** `openpostcards-builder` is a placeholder package
-> name. Check availability and choose/reserve your own npm name before publishing,
-> then update `package.json` `name`, `repository`, `homepage`, and `bugs`.
+> **MANUAL ACTION REQUIRED:** This package is configured to publish under the
+> `@one-million-lines` npm scope. Before publishing, confirm you own/have publish
+> access to that npm organization and that `@one-million-lines/email-builder` is
+> available (or already yours). `publishConfig.access` is set to `public`.
 
 ## Getting started
 
@@ -88,8 +89,8 @@ The production build uses `/demo/email-builder/` as the Vite base path.
 React:
 
 ```tsx
-import { EmailBuilder } from "openpostcards-builder";
-import "openpostcards-builder/styles.css";
+import { EmailBuilder } from "@one-million-lines/email-builder";
+import "@one-million-lines/email-builder/styles.css";
 
 <EmailBuilder
   initialDocument={emailJson}
@@ -101,8 +102,8 @@ import "openpostcards-builder/styles.css";
 Vanilla JS:
 
 ```ts
-import { createEmailBuilder } from "openpostcards-builder";
-import "openpostcards-builder/styles.css";
+import { createEmailBuilder } from "@one-million-lines/email-builder";
+import "@one-million-lines/email-builder/styles.css";
 
 const instance = createEmailBuilder({
   container: document.getElementById("builder")!,
@@ -115,7 +116,7 @@ const instance = createEmailBuilder({
 // instance.getDocument(); instance.exportHtml(); instance.exportJson(); instance.destroy();
 ```
 
-Always import the stylesheet once per app: `import "openpostcards-builder/styles.css";`
+Always import the stylesheet once per app: `import "@one-million-lines/email-builder/styles.css";`
 
 ### Framework integration
 
@@ -132,17 +133,58 @@ Vue and Angular mount the React-based editor through the framework-neutral
 
 ### Styling & isolation
 
-The stylesheet at `openpostcards-builder/styles.css` includes Tailwind
-**Preflight**, a global CSS reset that normalizes `margin`, `box-sizing`,
-headings, lists, etc. When embedding into an existing design system this can
-affect host styles. Mitigations:
+The stylesheet at `@one-million-lines/email-builder/styles.css` is designed to
+be embedded safely alongside any host design system (Tailwind, Bootstrap,
+shadcn/ui, Material UI, custom CSS):
+
+- **No Preflight** — Tailwind Preflight (global CSS reset) is excluded from the
+  library stylesheet. Only `theme` variables and `utilities` are imported.
+- **Scoped reset** — A minimal `box-sizing`, `button`, `input`, and `img` reset
+  is applied only inside `.oml-email-builder` via `@layer base`.
+- **Root class** — The builder's root element carries the class
+  `oml-email-builder`. Every builder style targets this class, so nothing leaks
+  to the host page.
+- **`[contenteditable]` focus** — The inline focus outline is scoped to
+  `.oml-email-builder [contenteditable]` and never affects host page content.
+- **Tailwind theme variables** — Tailwind v4 CSS custom properties
+  (`--color-*`, `--font-*`, `--spacing-*`, etc.) are declared on `:root` as
+  part of the Tailwind theme layer. They use Tailwind's own naming convention
+  and are unlikely to conflict with host variables; if they do, override them on
+  the container.
+
+**Sizing the container:**
+
+The builder fills its container (`h-full w-full`). Give the container explicit
+dimensions before mounting:
+
+```html
+<!-- HTML -->
+<div id="builder" style="height: 100vh; width: 100%;"></div>
+```
+
+```tsx
+// React
+<div style={{ height: "100vh", width: "100%" }}>
+  <EmailBuilder ... />
+</div>
+```
+
+**Modals and overlays:**
+
+The Templates modal renders with `position: fixed; z-index: 50` to cover the
+viewport. This is intentional for a full-screen editing tool. If your host has
+a higher `z-index` stacking context, wrap the builder container with
+`isolation: isolate` and ensure your modal z-indices are coordinated.
 
-- Load the editor in a dedicated route/page where the reset is acceptable, or
-- Scope/encapsulate it (e.g., render inside an iframe or a Shadow DOM host), or
-- Build your own Tailwind stylesheet without Preflight if your app already
-  provides resets.
+**Host compatibility:**
 
-The editor root uses `h-screen w-screen`; place it in a full-size container.
+| Host design system | Notes |
+|---|---|
+| Tailwind CSS | No conflict. The builder uses the same Tailwind theme tokens. |
+| Bootstrap | No conflict. No Preflight, no overriding resets. |
+| shadcn/ui | No conflict. scoped reset does not override shadcn variables. |
+| Material UI | No conflict. MUI's emotion styles are not affected. |
+| Custom global CSS | As long as your CSS does not target `.oml-email-builder` descendant elements, there is no conflict. |
 
 ### Server-side rendering
 
@@ -154,7 +196,7 @@ effect, or dynamically import it with SSR disabled in Next.js:
 import dynamic from "next/dynamic";
 
 const EmailBuilder = dynamic(
-  () => import("openpostcards-builder").then((m) => m.EmailBuilder),
+  () => import("@one-million-lines/email-builder").then((m) => m.EmailBuilder),
   { ssr: false }
 );
 ```
@@ -181,7 +223,7 @@ npm pack                   # create the .tgz to test in a consumer app
 To publish (run manually):
 
 ```bash
-# MANUAL ACTION REQUIRED — choose a real package name first, then:
+# MANUAL ACTION REQUIRED — log in to an account with publish access to the @one-million-lines scope, then:
 npm login
 npm publish --access public
 ```