@the-portland-company/canvas-editor 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## 0.3.0 — feature + styling parity with the main VRM app's email editor
+
+Per Spencer's 2026-09-11 direction: bring the shared editor to parity with the
+app.politogyvrm.com email editor. Gap analysis in `docs/APP_EDITOR_PARITY_MANIFEST.md`.
+
+- **Rich text is now tiptap v3** (`CanvasRichText`): 42-stack font-family menu
+  with Email-safe / Not-email-safe badges and the brand font first, 10-step
+  font sizes, line-spacing (Single/1.5/Double), text color, B/I/U, align incl.
+  justify, lists, link popover (no `window.prompt`), heading levels P/H1–H6,
+  emoji picker, personalization tokens at the cursor. Sanitizer now keeps
+  `h5/h6`, inline `line-height`, and heading/list `style`.
+  **New peer deps:** `@tiptap/{core,react,starter-kit,extension-underline,
+  extension-text-align,extension-link,extension-text-style,extension-color,
+  extension-font-family}` ^3.27 and `emoji-picker-react` ^4.19.
+- **New block types:** `hero`, `card`, `container`, `pdf`, `html` (sanitized,
+  code/visual modes); `column` gains `distribution` + `gap`; `section` gains
+  `backgroundImage` / `borderRadius` / `columnPadding`; social icons gain
+  `style` solid|outline|minimal and `colorScheme` brand|black|white|custom.
+  Footer derives defaults from `BrandInfo.org` with cleared-vs-unset semantics
+  and is enforced singleton + last via `normalizeFooter`.
+- **Padding presets** S/M/L/Custom per block kind (`blocks/padding.ts`,
+  `PaddingFields presetKind`), with shorthand ⇄ `{t,r,b,l}` converters.
+- **Undo / redo** (depth 50) with ⌘Z / ⌘⇧Z / Ctrl+Y and TopBar buttons.
+- **Insert model:** animated exact-slot drop zones between blocks (root +
+  nested), type-sized drag ghost, grouped Basic / Layout insert menu, `side`
+  gutter mode via the new `insertMode` prop; `pointerWithin` collision with a
+  `closestCenter` fallback.
+- **Canvas settings:** width Fixed/Fluid, content width px, top/bottom padding
+  (new nullable `EmailSettings` fields, honored by canvas + renderer).
+- **Draft safety:** draft signature skips no-op saves; stale-read reseed guard
+  ignores an older host document.
+- **Modals + toasts** replace `window.prompt/confirm/alert`.
+- **Preview shells:** Plain / Desktop (mac window) / Mobile (phone), fullscreen.
+- **Styling:** `.ce-*` class contract (300px rails, selection outline, drop
+  accents, pills/toggles, toolbar groups, badges, modals, preview shells),
+  token-driven light + neutral-black dark.
+- `BrandInfo.org` (companyName/address/websiteUrl/privacyUrl/contactUrl/logoUrl)
+  for hosts to feed footer defaults.
+
 ## 0.2.0
 
 - **Passthrough `unsupported` block** — a non-destructive block type so hosts

package/README.md

@@ -25,6 +25,14 @@ and a Vite (React 18) app alike.
 | `@the-portland-company/canvas-editor/skeletons` | `Skeleton` / `SkeletonBar` (self-contained, token-driven) | Server-renderable. |
 | `@the-portland-company/canvas-editor/css` | Primitive component classes (`.card`/`.input`/`.btn`/`.skeleton`…) | Import once in the app. |
 
+### Peer dependencies (install alongside)
+
+React 18 || 19, `@dnd-kit/{core,sortable,utilities}`, and — since 0.3.0, for the
+tiptap rich-text editor — `@tiptap/core @tiptap/react @tiptap/starter-kit
+@tiptap/extension-underline @tiptap/extension-text-align @tiptap/extension-link
+@tiptap/extension-text-style @tiptap/extension-color @tiptap/extension-font-family`
+(^3.27) and `emoji-picker-react` (^4.19). The package externalizes all of them.
+
 **Never import `/editor` from a server module** — `@dnd-kit` evaluates
 `React.createContext` at module load and will crash in an RSC / server-action
 context. Server code that needs block logic imports the root (`.`) only.
@@ -77,9 +85,13 @@ context. Server code that needs block logic imports the root (`.`) only.
      initialUpdatedAt={updatedAt}
      nextAction={{ label: "Next: Sender →", href: senderHref }}
      metaPanel={({ doc, setMeta }) => <MyEmailMetaPanel doc={doc} setMeta={setMeta} />}
+     insertMode="center"   // or "side" — host owns the preference
    />
    ```
 
+   `brand()` may also return `org: { companyName, address, websiteUrl, privacyUrl,
+   contactUrl, logoUrl }` so the Footer block derives its defaults from the host.
+
 ## The boundary
 
 - **The package owns:** the document model (`CanvasDocument` = `name` + `blocks`

package/dist/canvas.css

@@ -65,3 +65,489 @@
   border: 8px solid var(--color-border); border-radius: 2rem;
   background: var(--color-surface-2); padding: 1rem 0.75rem; min-height: 12rem;
 }
+
+/* ==========================================================================
+   Canvas Editor layout + interaction classes (`.ce-*`)
+   --------------------------------------------------------------------------
+   PUBLIC CONTRACT — these are the class names editor components consume.
+   Everything is token-driven (var(--color-*)); `.dark` overrides exist only
+   where a token cannot express the value (shadow alpha, device chrome).
+
+     .ce-layout           3-column editor grid: 300px rail / canvas / 300px rail
+     .ce-layout.is-left-collapsed   left rail collapsed to a 44px strip
+     .ce-rail             a side rail panel (surface, border, scrolls)
+     .ce-rail-header      sticky rail heading row
+     .ce-canvas           center scroll column, 24px padding
+     .ce-canvas-sheet     the white/surface page the blocks render on
+     .ce-block            one block wrapper (hover/selection host)
+     .ce-block.is-selected   2px accent outline
+     .ce-block-toolbar    floating hover toolbar (drag + delete), top:-40px right:0
+     .ce-block-toolbar-btn  a button inside that toolbar
+     .ce-dropzone         collapsed 8px drop target between blocks
+     .ce-dropzone.is-hover        expanded 32px, accent dashed + tint
+     .ce-dropzone.is-drag-active  armed while a drag is in flight
+     .ce-dropzone-label   the 11px uppercase "Insert" prompt inside a dropzone
+     .ce-file-overlay     dashed-accent full-surface file-drop overlay
+     .ce-insert-pill      the round "+" affordance that opens the insert menu
+     .ce-insert-menu      floating insert-menu card (scrolls, deep shadow)
+     .ce-insert-item      one row in the insert menu
+     .ce-ghost            drag ghost / dnd-kit DragOverlay card
+     .ce-pill             outline pill (padding presets, filters)
+     .ce-pill.is-active   solid accent pill
+     .ce-toggle           full-radius segmented control wrapper
+     .ce-toggle-btn       a segment; .is-active marks the selected one
+     .ce-toolbar          rich-text toolbar row (wraps, .25rem gap)
+     .ce-btngroup         attached button group inside a toolbar
+     .ce-toolbar-btn      a toolbar button; .is-active = accent-tinted mark
+     .ce-badge-safe       email-safe font badge (green tint)
+     .ce-badge-unsafe     non-email-safe font badge (amber tint)
+     .ce-modal-backdrop   dimmed modal backdrop
+     .ce-modal            modal card; .ce-modal-sm/-lg size variants
+     .ce-modal-header / .ce-modal-body / .ce-modal-footer
+     .ce-preview-shell    neutral stage a preview is centred on
+     .ce-preview-desktop  mac-window chrome around a desktop preview
+     .ce-preview-mobile   phone body around a mobile preview
+     .ce-toast-host       fixed toast stack (bottom-right)
+     .ce-toast            one toast; .is-success/.is-error/.is-info
+   ========================================================================== */
+
+/* ---- layout -------------------------------------------------------------- */
+
+.ce-layout {
+  display: grid;
+  grid-template-columns: 300px 1fr 300px;
+  gap: 1rem;
+  height: calc(100vh - 8rem);
+  min-height: 32rem;
+}
+
+.ce-layout.is-left-collapsed { grid-template-columns: 44px 1fr 300px; }
+
+@media (max-width: 1100px) {
+  .ce-layout, .ce-layout.is-left-collapsed { grid-template-columns: 1fr; height: auto; }
+}
+
+.ce-rail {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius, 0.375rem);
+  overflow: auto;
+  padding: 0.75rem;
+  min-height: 0;
+}
+
+.ce-rail-header {
+  position: sticky; top: -0.75rem; z-index: 1;
+  margin: -0.75rem -0.75rem 0.5rem;
+  padding: 0.6rem 0.75rem;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
+  font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted);
+}
+
+.ce-canvas {
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 1.5rem;
+  background: var(--color-bg, var(--color-surface-2));
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius, 0.375rem);
+  min-height: 0;
+}
+
+.ce-canvas-sheet {
+  margin: 0 auto;
+  max-width: 640px;
+  background: var(--color-surface);
+  border-radius: var(--radius, 0.375rem);
+  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.14);
+}
+
+.dark .ce-canvas-sheet { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); }
+
+/* ---- blocks -------------------------------------------------------------- */
+
+.ce-block {
+  position: relative;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  border-radius: var(--radius, 0.375rem);
+  transition: outline-color 0.12s, background 0.12s;
+}
+
+.ce-block:hover { outline-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
+
+.ce-block.is-selected { outline: 2px solid var(--color-accent); }
+
+.ce-block-toolbar {
+  position: absolute; top: -40px; right: 0; z-index: 5;
+  display: inline-flex; align-items: center; gap: 0.125rem;
+  padding: 0.2rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 11px;
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s;
+}
+
+.ce-block:hover > .ce-block-toolbar,
+.ce-block:focus-within > .ce-block-toolbar,
+.ce-block.is-selected > .ce-block-toolbar { opacity: 1; pointer-events: auto; }
+
+.ce-block-toolbar-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 1.5rem; min-width: 1.5rem; padding: 0 0.3rem;
+  border: 0; border-radius: 8px; background: transparent;
+  color: var(--color-text-muted); font-size: 0.8rem; line-height: 1; cursor: pointer;
+}
+
+.ce-block-toolbar-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
+.ce-block-toolbar-btn.is-danger:hover { background: color-mix(in srgb, var(--color-red) 14%, transparent); color: var(--color-red); }
+.ce-block-toolbar-btn.is-grab { cursor: grab; }
+.ce-block-toolbar-btn.is-grab:active { cursor: grabbing; }
+
+/* ---- drop targets -------------------------------------------------------- */
+
+.ce-dropzone {
+  height: 8px;
+  margin: 0.125rem 0;
+  border-radius: var(--radius, 0.375rem);
+  border: 1px dashed transparent;
+  display: flex; align-items: center; justify-content: center;
+  overflow: hidden;
+  transition: height 0.14s ease, background 0.14s, border-color 0.14s;
+}
+
+.ce-dropzone.is-drag-active {
+  height: 20px;
+  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
+  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
+}
+
+.ce-dropzone.is-hover {
+  height: 32px;
+  border-color: var(--color-accent);
+  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+}
+
+.ce-dropzone-label {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
+  color: var(--color-accent);
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+
+.ce-dropzone.is-hover .ce-dropzone-label { opacity: 1; }
+
+.ce-file-overlay {
+  position: absolute; inset: 0; z-index: 20;
+  display: flex; align-items: center; justify-content: center;
+  flex-direction: column; gap: 0.4rem;
+  border: 2px dashed var(--color-accent);
+  border-radius: var(--radius, 0.375rem);
+  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
+  font-size: 0.875rem; font-weight: 600; color: var(--color-accent);
+}
+
+/* ---- insert menu --------------------------------------------------------- */
+
+.ce-insert-pill {
+  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
+  height: 1.6rem; padding: 0 0.7rem;
+  border: 1px solid var(--color-accent);
+  border-radius: 999px;
+  background: var(--color-surface);
+  color: var(--color-accent);
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
+  cursor: pointer;
+}
+
+.ce-insert-pill:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
+
+.ce-insert-menu {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 11px;
+  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.28);
+  max-height: 24rem;
+  overflow-y: auto;
+  padding: 0.3rem;
+  min-width: 14rem;
+  z-index: 30;
+}
+
+.dark .ce-insert-menu { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6); }
+
+.ce-insert-item {
+  display: flex; align-items: center; gap: 0.5rem; width: 100%;
+  padding: 0.4rem 0.55rem;
+  border: 0; border-radius: 0.375rem; background: transparent;
+  color: var(--color-text); font-size: 0.875rem; text-align: left; cursor: pointer;
+}
+
+.ce-insert-item:hover { background: var(--color-surface-2); }
+.ce-insert-item[aria-selected="true"] { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
+
+.ce-ghost {
+  background: var(--color-surface);
+  border: 1px solid var(--color-accent);
+  border-radius: var(--radius, 0.375rem);
+  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.28);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--color-text);
+  opacity: 0.95;
+  cursor: grabbing;
+}
+
+.dark .ce-ghost { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6); }
+
+/* ---- pills + segmented toggles ------------------------------------------- */
+
+.ce-pill {
+  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
+  height: 1.75rem; padding: 0 0.7rem;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 0.78rem; font-weight: 600; white-space: nowrap; cursor: pointer;
+  transition: background 0.12s, border-color 0.12s, color 0.12s;
+}
+
+.ce-pill:hover { background: var(--color-surface-2); }
+
+.ce-pill.is-active {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: #fff;
+}
+
+.ce-pill.is-active:hover { background: var(--color-accent-hover, var(--color-accent)); }
+
+.ce-pill:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.ce-toggle {
+  display: inline-flex; align-items: center;
+  padding: 2px;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  background: var(--color-surface-2);
+}
+
+.ce-toggle-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
+  height: 1.6rem; padding: 0 0.8rem;
+  border: 0; border-radius: 999px; background: transparent;
+  color: var(--color-text-muted);
+  font-size: 0.78rem; font-weight: 600; cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+
+.ce-toggle-btn:hover { color: var(--color-text); }
+
+.ce-toggle-btn.is-active {
+  background: var(--color-surface);
+  color: var(--color-text);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
+}
+
+/* ---- rich-text toolbar --------------------------------------------------- */
+
+.ce-toolbar {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
+  padding: 0.35rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius, 0.375rem);
+}
+
+.ce-btngroup { display: inline-flex; align-items: center; }
+
+.ce-btngroup > .ce-toolbar-btn { border-radius: 0; margin-left: -1px; }
+.ce-btngroup > .ce-toolbar-btn:first-child { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; margin-left: 0; }
+.ce-btngroup > .ce-toolbar-btn:last-child { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }
+
+.ce-toolbar-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
+  height: 1.85rem; min-width: 1.85rem; padding: 0 0.45rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 0.78rem; font-weight: 600; line-height: 1; cursor: pointer;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+
+.ce-toolbar-btn:hover { background: var(--color-surface-2); }
+
+.ce-toolbar-btn.is-active {
+  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
+  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
+  color: var(--color-accent);
+  position: relative; z-index: 1;
+}
+
+.ce-toolbar-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+
+.ce-toolbar-sep { width: 1px; align-self: stretch; margin: 0.15rem 0.2rem; background: var(--color-border); }
+
+/* ---- email-safe font badges ---------------------------------------------- */
+
+.ce-badge-safe, .ce-badge-unsafe {
+  display: inline-flex; align-items: center; gap: 0.25rem;
+  padding: 0.1rem 0.45rem;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font-size: 0.7rem; font-weight: 600; white-space: nowrap;
+}
+
+.ce-badge-safe {
+  background: color-mix(in srgb, var(--color-green, #10b981) 14%, transparent);
+  border-color: color-mix(in srgb, var(--color-green, #10b981) 40%, transparent);
+  color: var(--color-green, #10b981);
+}
+
+.ce-badge-unsafe {
+  background: color-mix(in srgb, var(--color-yellow, #f59e0b) 16%, transparent);
+  border-color: color-mix(in srgb, var(--color-yellow, #f59e0b) 42%, transparent);
+  color: var(--color-yellow, #f59e0b);
+}
+
+/* ---- modals -------------------------------------------------------------- */
+
+.ce-modal-backdrop {
+  position: fixed; inset: 0; z-index: 50;
+  display: flex; align-items: center; justify-content: center;
+  padding: 1rem;
+  background: rgba(15, 23, 42, 0.38);
+}
+
+.dark .ce-modal-backdrop { background: rgba(0, 0, 0, 0.6); }
+
+.ce-modal {
+  display: flex; flex-direction: column;
+  width: 100%; max-width: 32rem; max-height: 85vh;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 11px;
+  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.28);
+  overflow: hidden;
+}
+
+.dark .ce-modal { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7); }
+
+.ce-modal-sm { max-width: 24rem; }
+.ce-modal-lg { max-width: 48rem; }
+
+.ce-modal-header {
+  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--color-border);
+  font-size: 0.875rem; font-weight: 600; color: var(--color-text);
+}
+
+.ce-modal-body { padding: 1rem; overflow-y: auto; font-size: 0.875rem; color: var(--color-text); }
+
+.ce-modal-footer {
+  display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--color-border);
+  background: var(--color-surface-2);
+}
+
+/* ---- previews ------------------------------------------------------------ */
+
+.ce-preview-shell {
+  display: flex; align-items: flex-start; justify-content: center;
+  padding: 1.5rem;
+  background: var(--color-surface-2);
+  border-radius: 18px;
+  overflow: auto;
+}
+
+.ce-preview-desktop {
+  width: 100%; max-width: 880px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 18px;
+  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.14);
+  overflow: hidden;
+}
+
+.dark .ce-preview-desktop { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); }
+
+.ce-preview-desktop::before {
+  content: "";
+  display: block; height: 34px;
+  background: var(--color-surface-2);
+  border-bottom: 1px solid var(--color-border);
+  /* three mac window dots — device chrome, intentionally literal colors */
+  background-image:
+    radial-gradient(circle 5px at 18px 17px, #ef4444 98%, transparent 100%),
+    radial-gradient(circle 5px at 36px 17px, #f59e0b 98%, transparent 100%),
+    radial-gradient(circle 5px at 54px 17px, #10b981 98%, transparent 100%);
+}
+
+.ce-preview-mobile {
+  width: 100%; max-width: 430px;
+  padding: 14px;
+  /* phone body: a device color, not a theme surface */
+  background: #202124;
+  border-radius: 32px;
+  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.14);
+  position: relative;
+}
+
+.dark .ce-preview-mobile { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); }
+
+.ce-preview-mobile::before {
+  content: "";
+  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
+  width: 96px; height: 5px; border-radius: 999px;
+  background: #3a3a3a;
+}
+
+.ce-preview-mobile > * {
+  display: block;
+  background: var(--color-surface);
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+/* ---- toasts -------------------------------------------------------------- */
+
+.ce-toast-host {
+  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
+  display: flex; flex-direction: column; gap: 0.5rem;
+  pointer-events: none;
+}
+
+.ce-toast {
+  pointer-events: auto;
+  display: flex; align-items: center; gap: 0.5rem;
+  min-width: 14rem; max-width: 22rem;
+  padding: 0.6rem 0.8rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-left: 3px solid var(--color-border);
+  border-radius: 11px;
+  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.28);
+  font-size: 0.875rem; color: var(--color-text);
+}
+
+.dark .ce-toast { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6); }
+
+.ce-toast.is-success { border-left-color: var(--color-green, #10b981); }
+.ce-toast.is-error { border-left-color: var(--color-red); }
+.ce-toast.is-info { border-left-color: var(--color-accent); }
+
+.ce-toast-close {
+  margin-left: auto; border: 0; background: transparent; cursor: pointer;
+  color: var(--color-text-muted); font-size: 0.85rem; line-height: 1; padding: 0.1rem 0.2rem;
+}
+
+.ce-toast-close:hover { color: var(--color-text); }