@clepit/core 0.2.0 → 0.3.0-beta.329

package/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.3.0] — 2026-08-11
+
+### Added
+- `tokensToLightDarkBlock` is exported: turns a light/dark `ThemeTokens` pair into a `light-dark()` CSS variable block for a selector, so a host can emit theme overrides for statically rendered content (`renderBlocks`) without a live `StyleManager`.
+- `activateBlocks(container, blocks)` is exported: wires the behaviors statically rendered markup deliberately leaves out (code tab switching, language sync and the clipboard; openapi response tabs and embedded samples; table CSV download) into markup `renderBlocks` produced earlier, and returns a disposer that removes every listener it added.
+
+- `drawBlock` stamps `data-block-type` and, when the block carries an id, `data-clepit-block-id` on each drawn root element, so statically rendered markup is addressable per block.
+- Public pages are anchor-navigable: `renderPage` sets the new `DrawContext.anchorTargets` flag so identified block roots carry a real DOM `id`, and the stylesheet highlights the `:target` block. A copied block anchor link (`…/slug#blockId`) scrolls and highlights with no script.
+
+### Fixed
+- Code samples embedded in an openapi reference are now live in every path: their copy buttons and language tabs were drawn but never wired, on the client render path included. `CodeOutput.activateFromMarkup` reads the wiring inputs back out of the drawn markup (pane text as code, tab text as label, the sync key from a stamped attribute).
+- `Editor.destroy` now releases id-keyed state (theme registry, body theme attribute, pending toolbar timers) even when the container element has already left the DOM. React hosts remove the element before effect cleanup fires, so the previous early return leaked the theme registration on every unmount and left `body[data-clepit-theme]` stuck.
+
 ## [0.2.0] — 2026-04-21
 
 ### Added

package/README.md

@@ -2,7 +2,7 @@
 
 A framework-agnostic block-style editor with clean JSON output and a batteries-included renderer. Ships with 12 block types, 8 inline tools, and first-class theming.
 
-**Homepage:** [clepit.com](https://clepit.com) · **Docs:** [clepit.com/docs](https://clepit.com/docs) · **Live demo:** [clepit.com/demo](https://clepit.com/demo)
+**Homepage:** [clepit.com](https://clepit.com) · **Docs:** [clepit.com/docs](https://clepit.com/docs)
 
 ## Install
 

package/dist/core/editor/index.d.ts

@@ -13,6 +13,10 @@ export declare class Editor {
      */
     private static localizeData;
     private static render;
+    /** Runs even after the container has left the DOM (a React host removes the
+     *  element before effect cleanup fires): every helper guards its own DOM
+     *  access, and the id-keyed state — theme registry, body theme attribute,
+     *  pending toolbar timers — must be released either way. */
     static destroy(containerId: string): void;
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/core/element/index.d.ts

@@ -43,6 +43,11 @@ export type ClepitElement = {
 export type DrawContext = {
     /** A toc derives from its siblings, which no block-local data carries. */
     documentBlocks?: readonly Block[];
+    /** Stamp each identified block root with a DOM `id` so a URL fragment can
+     * land on it. Set by `renderPage` for public pages; off elsewhere, because
+     * the docs pipeline injects its own slug ids onto headings and one element
+     * must not carry two. */
+    anchorTargets?: boolean;
     /** Which variant a code block opens on. */
     activeVariant?: number;
     /** Google Maps embeds need a key to build a provider URL. */

package/dist/core/managers/block/css.d.ts

@@ -1,3 +1,3 @@
 export declare const stylesKey = "clepit-block-manager-styles";
-export declare const style = "\n/* Blocks */\n.clepit-block {\n  position: relative;\n  margin: var(--block-margin-top, 8px) 0 var(--block-margin-bottom, 16px) 0;\n  padding: 8px 0;\n  padding-left: 54px;\n  border-radius: 4px;\n  transition: background-color 0.2s ease;\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n}\n\n.clepit-block:hover {\n  background-color: var(--clepit-block-highlight-bg);\n}\n\n.clepit-block--active {\n  background-color: var(--clepit-block-highlight-bg);\n}\n\n.clepit-block-content {\n  outline: none;\n  min-height: 1.2em;\n  flex: 1;\n  min-width: 0; /* Allow content to shrink */\n}\n\n/* Remove focus outline from editable elements */\n.clepit-block-content [contenteditable=\"true\"] {\n  outline: none;\n}\n\n/* Placeholder styles for all text elements */\n.clepit-block-content:empty::before {\n  content: attr(data-placeholder);\n  color: var(--clepit-text-subtle);\n  pointer-events: none;\n  font-style: italic;\n}\n\n/* Menu animation classes */\n.clepit-block-type-selector--visible {\n  display: block;\n  transform: translateY(0);\n}\n\n.clepit-block-type-selector--hidden {\n  display: none;\n}\n\n/* Block Operations Menu */\n.clepit-block-operations-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1001;\n  background: var(--clepit-bg);\n  border: 1px solid var(--clepit-border);\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  padding: 8px;\n  min-width: 200px;\n  margin-top: 4px;\n  display: none;\n  transition: transform 0.2s ease;\n}\n\n.clepit-block-operations-menu--visible {\n  display: block;\n  transform: translateY(0);\n}\n\n.clepit-block-operations-menu--hidden {\n  display: none;\n}\n\n/* Block Type Selector */\n.clepit-block-type-selector {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1001;\n  background: var(--clepit-bg);\n  border: 1px solid var(--clepit-border);\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  padding: 8px;\n  min-width: 150px;\n  margin-top: 4px;\n  display: none;\n  transition: transform 0.2s ease;\n}\n\n.clepit-block-type-selector--visible {\n  display: block;\n  transform: translateY(0);\n}\n\n.clepit-block-type-selector--hidden {\n  display: none;\n}\n\n/* Default menu item styles - package doesn't care about theme */\n.clepit-menu-item {\n  padding: 8px 12px;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: background-color 0.2s;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.clepit-menu-item .clepit-menu-icon {\n  width: 16px;\n  height: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n}\n\n.clepit-menu-item:hover {\n  background-color: var(--clepit-selection-bg);\n}\n\n.clepit-menu-item.active {\n  background-color: var(--clepit-primary-bg);\n  color: var(--clepit-primary);\n  font-weight: bold;\n}\n\n.clepit-menu-item--danger {\n  color: var(--clepit-error);\n}\n\n/* Block type menu items - match font size with operations menu */\n.clepit-block-type-item {\n  font-size: 14px;\n}\n\n/* Default menu divider styles */\n.clepit-menu-divider {\n  height: 1px;\n  background: linear-gradient(to right, transparent, var(--clepit-border), transparent);\n  margin: 8px 0;\n}\n\n/* Default menu arrow styles */\n.clepit-menu-arrow {\n  margin-left: auto;\n  font-size: 12px;\n  color: var(--clepit-text-muted);\n}\n\n/* Input styles for block type selector */\n.clepit-block-type-selector input {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid var(--clepit-input-border, var(--clepit-border));\n  border-radius: 4px;\n  font-size: 14px;\n  margin-bottom: 8px;\n  outline: none;\n  transition: border-color 0.2s;\n  background-color: var(--input-bg, var(--clepit-bg));\n  color: var(--input-color, var(--clepit-text));\n}\n\n.clepit-block-type-selector input:focus {\n  border-color: var(--clepit-primary);\n  box-shadow: 0 0 0 2px var(--clepit-primary-bg);\n}\n\n.clepit-block-type-selector input::placeholder {\n  color: var(--placeholder-color, var(--clepit-text-subtle));\n}\n\n.clepit-block-type-selector-items {\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n.clepit-menu-icon {\n  font-size: 14px;\n  min-width: 20px;\n  text-align: center;\n  font-weight: bold;\n}\n\n.clepit-menu-shortcut {\n  margin-left: auto;\n  font-size: 9px;\n  color: var(--clepit-text-muted);\n  opacity: 0.7;\n}\n\n.clepit-menu-positioned {\n  position: absolute;\n  z-index: 1001;\n  top: var(--menu-top, 0);\n  left: var(--menu-left, 0);\n}\n\n/* The block menus are popovers in the top layer. Anchor positioning puts them\n * under the block toolbar without JavaScript measuring anything.\n *\n * Guarded: anchor positioning is Baseline 2026 (Chrome 125+, Firefox 132+,\n * Safari 18.2+), roughly 91% of traffic. Browsers without it get the popover's\n * default centred placement rather than a second JS positioning path \u2014 the menu\n * stays usable, just not adjacent to its button. */\n.clepit-block-type-selector:popover-open,\n.clepit-block-operations-menu:popover-open {\n  margin: 0;\n  border: 1px solid var(--clepit-border);\n  border-radius: 6px;\n  background: var(--clepit-bg);\n  padding: 8px;\n  overflow: visible;\n}\n\n@supports (anchor-name: --a) {\n  .clepit-block-type-selector:popover-open,\n  .clepit-block-operations-menu:popover-open {\n    position-anchor: --clepit-block-toolbar;\n    position-area: bottom span-inline-end;\n    margin-block-start: 5px;\n  }\n}\n\n@supports (position-try-fallbacks: flip-block) {\n  .clepit-block-type-selector:popover-open,\n  .clepit-block-operations-menu:popover-open {\n    position-try-fallbacks: flip-block;\n  }\n}\n\n/* Convert Submenu */\n@supports (anchor-name: --a) {\n  .clepit-convert-submenu:popover-open {\n    position: fixed;\n    position-area: inline-end span-block-end;\n    margin: 0 0 0 4px;\n    inset: auto;\n  }\n\n  .clepit-convert-submenu:popover-open {\n    position-try-fallbacks: flip-inline;\n  }\n}\n\n.clepit-convert-submenu {\n  position: absolute;\n  top: var(--submenu-top, 0);\n  left: var(--submenu-left, 100%);\n  z-index: var(--submenu-z-index, 1002);\n  background: var(--clepit-bg);\n  border: 1px solid var(--clepit-border);\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  padding: 8px;\n  min-width: 140px;\n  margin-left: 4px;\n  display: none;\n  transition: transform 0.2s ease;\n}\n\n.clepit-convert-submenu--visible {\n  display: block;\n  opacity: 1;\n  transform: translateX(0);\n}\n\n.clepit-convert-submenu--hidden {\n  display: none;\n  opacity: 0;\n  transform: translateX(-10px);\n}\n\n/* Input styles for convert submenu */\n.clepit-convert-submenu input {\n  width: 100%;\n  padding: 6px 8px;\n  border: 1px solid var(--clepit-input-border, var(--clepit-border));\n  border-radius: 4px;\n  font-size: 12px;\n  outline: none;\n  background-color: var(--input-bg, var(--clepit-bg));\n  color: var(--input-color, var(--clepit-text));\n}\n\n.clepit-convert-submenu input:focus {\n  border-color: var(--clepit-input-focus-border, var(--clepit-primary));\n  box-shadow: 0 0 0 2px var(--clepit-input-focus-shadow, var(--clepit-primary-bg));\n}\n\n.clepit-convert-submenu input::placeholder {\n  color: var(--clepit-input-placeholder, var(--clepit-text-subtle));\n}\n\n.clepit-convert-submenu-items {\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n.clepit-block-operation-item {\n  padding: 8px 12px;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: background-color 0.2s;\n  font-size: 14px;\n}\n\n.clepit-block-operation-item:hover {\n  background-color: var(--clepit-hover-bg, var(--clepit-selection-bg));\n}\n\n/* Input styles for operations menu */\n.clepit-block-operations-menu input {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid var(--clepit-input-border, var(--clepit-border));\n  border-radius: 4px;\n  font-size: 14px;\n  margin-bottom: 8px;\n  outline: none;\n  transition: border-color 0.2s;\n  background-color: var(--input-bg, var(--clepit-bg));\n  color: var(--input-color, var(--clepit-text));\n}\n\n.clepit-block-operations-menu input:focus {\n  border-color: var(--clepit-primary);\n  box-shadow: 0 0 0 2px var(--clepit-primary-bg);\n}\n\n.clepit-block-operations-menu input::placeholder {\n  color: var(--placeholder-color, var(--clepit-text-subtle));\n}\n\n.clepit-block-operations-menu-items {\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n.clepit-block-operation-item[data-operation=\"delete\"] {\n  color: var(--clepit-error);\n}\n\n/* Convert submenu items */\n.clepit-convert-option-item {\n  padding: 8px 12px;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: background-color 0.2s;\n  font-size: 14px;\n}\n\n.clepit-convert-option-item:hover {\n  background-color: var(--clepit-hover-bg, var(--clepit-selection-bg));\n}\n\n/* Indentation */\n.clepit-block[data-indent=\"1\"] .clepit-block-content {\n  margin-left: 20px;\n}\n\n.clepit-block[data-indent=\"2\"] .clepit-block-content {\n  margin-left: 40px;\n}\n\n.clepit-block[data-indent=\"3\"] .clepit-block-content {\n  margin-left: 60px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  /* The 54px gutter exists to hold the block toolbar, which is only ever\n   * displayed on the active block. On a phone that reserved a seventh of the\n   * editor's width on every idle block at once, pushing the text into a narrow\n   * column with empty space either side. Give the width back and let the\n   * gutter open only under the block whose toolbar is actually showing. */\n  /* No transition on padding-left. The block element is re-created as you\n   * interact with it, so an animated gutter restarts from 0 every time and\n   * never reaches its end value \u2014 the toolbar would sit on top of the text. */\n  .clepit-block {\n    padding-left: 0;\n  }\n\n  .clepit-block--active,\n  .clepit-block:focus-within,\n  .clepit-block:has(.clepit-block-toolbar--visible) {\n    padding-left: 54px;\n  }\n}\n";
+export declare const style = "\n/* Blocks */\n.clepit-block {\n  position: relative;\n  margin: var(--block-margin-top, 8px) 0 var(--block-margin-bottom, 16px) 0;\n  padding: 8px 0;\n  padding-left: 54px;\n  border-radius: 4px;\n  transition: background-color 0.2s ease;\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n}\n\n.clepit-block:hover {\n  background-color: var(--clepit-block-highlight-bg);\n}\n\n.clepit-block--active {\n  background-color: var(--clepit-block-highlight-bg);\n}\n\n.clepit-block-content {\n  outline: none;\n  min-height: 1.2em;\n  flex: 1;\n  min-width: 0; /* Allow content to shrink */\n}\n\n/* Remove focus outline from editable elements */\n.clepit-block-content [contenteditable=\"true\"] {\n  outline: none;\n}\n\n/* Placeholder styles for all text elements */\n.clepit-block-content:empty::before {\n  content: attr(data-placeholder);\n  color: var(--clepit-text-subtle);\n  pointer-events: none;\n  font-style: italic;\n}\n\n/* Menu animation classes */\n.clepit-block-type-selector--visible {\n  display: block;\n  transform: translateY(0);\n}\n\n.clepit-block-type-selector--hidden {\n  display: none;\n}\n\n/* Block Operations Menu */\n.clepit-block-operations-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1001;\n  background: var(--clepit-bg);\n  border: 1px solid var(--clepit-border);\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  padding: 8px;\n  min-width: 200px;\n  margin-top: 4px;\n  display: none;\n  transition: transform 0.2s ease;\n}\n\n.clepit-block-operations-menu--visible {\n  display: block;\n  transform: translateY(0);\n}\n\n.clepit-block-operations-menu--hidden {\n  display: none;\n}\n\n/* Block Type Selector */\n.clepit-block-type-selector {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1001;\n  background: var(--clepit-bg);\n  border: 1px solid var(--clepit-border);\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  padding: 8px;\n  min-width: 150px;\n  margin-top: 4px;\n  display: none;\n  transition: transform 0.2s ease;\n}\n\n.clepit-block-type-selector--visible {\n  display: block;\n  transform: translateY(0);\n}\n\n.clepit-block-type-selector--hidden {\n  display: none;\n}\n\n/* Default menu item styles - package doesn't care about theme */\n.clepit-menu-item {\n  padding: 8px 12px;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: background-color 0.2s;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.clepit-menu-item .clepit-menu-icon {\n  width: 16px;\n  height: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n}\n\n.clepit-menu-item:hover {\n  background-color: var(--clepit-selection-bg);\n}\n\n.clepit-menu-item.active {\n  background-color: var(--clepit-primary-bg);\n  color: var(--clepit-primary);\n  font-weight: bold;\n}\n\n.clepit-menu-item--danger {\n  color: var(--clepit-error);\n}\n\n/* Block type menu items - match font size with operations menu */\n.clepit-block-type-item {\n  font-size: 14px;\n}\n\n/* Default menu divider styles */\n.clepit-menu-divider {\n  height: 1px;\n  background: linear-gradient(to right, transparent, var(--clepit-border), transparent);\n  margin: 8px 0;\n}\n\n/* Default menu arrow styles */\n.clepit-menu-arrow {\n  margin-left: auto;\n  font-size: 12px;\n  color: var(--clepit-text-muted);\n}\n\n/* Input styles for block type selector */\n.clepit-block-type-selector input {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid var(--clepit-input-border, var(--clepit-border));\n  border-radius: 4px;\n  font-size: 14px;\n  margin-bottom: 8px;\n  outline: none;\n  transition: border-color 0.2s;\n  background-color: var(--input-bg, var(--clepit-bg));\n  color: var(--input-color, var(--clepit-text));\n}\n\n.clepit-block-type-selector input:focus {\n  border-color: var(--clepit-primary);\n  box-shadow: 0 0 0 2px var(--clepit-primary-bg);\n}\n\n.clepit-block-type-selector input::placeholder {\n  color: var(--placeholder-color, var(--clepit-text-subtle));\n}\n\n.clepit-block-type-selector-items {\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n.clepit-menu-icon {\n  font-size: 14px;\n  min-width: 20px;\n  text-align: center;\n  font-weight: bold;\n}\n\n.clepit-menu-shortcut {\n  margin-left: auto;\n  font-size: 9px;\n  color: var(--clepit-text-muted);\n  opacity: 0.7;\n}\n\n.clepit-menu-positioned {\n  position: absolute;\n  z-index: 1001;\n  top: var(--menu-top, 0);\n  left: var(--menu-left, 0);\n}\n\n/* The block menus are popovers in the top layer. Anchor positioning puts them\n * under the block toolbar without JavaScript measuring anything.\n *\n * Guarded: anchor positioning is Baseline 2026 (Chrome 125+, Firefox 132+,\n * Safari 18.2+), roughly 91% of traffic. Browsers without it get the popover's\n * default centred placement rather than a second JS positioning path \u2014 the menu\n * stays usable, just not adjacent to its button. */\n.clepit-block-type-selector:popover-open,\n.clepit-block-operations-menu:popover-open {\n  /* The base menu rules above still say display:none from the pre-popover\n   * mechanism, and an author rule outranks the UA's popover reveal. Without\n   * an explicit display here every menu opens into the top layer invisible. */\n  display: block;\n  margin: 0;\n  border: 1px solid var(--clepit-border);\n  border-radius: 6px;\n  background: var(--clepit-bg);\n  padding: 8px;\n  overflow: visible;\n}\n\n.clepit-convert-submenu:popover-open {\n  display: block;\n}\n\n@supports (anchor-name: --a) {\n  .clepit-block-type-selector:popover-open,\n  .clepit-block-operations-menu:popover-open {\n    position-anchor: --clepit-block-toolbar;\n    position-area: bottom span-inline-end;\n    margin-block-start: 5px;\n  }\n}\n\n@supports (position-try-fallbacks: flip-block) {\n  .clepit-block-type-selector:popover-open,\n  .clepit-block-operations-menu:popover-open {\n    position-try-fallbacks: flip-block;\n  }\n}\n\n/* Convert Submenu */\n@supports (anchor-name: --a) {\n  .clepit-convert-submenu:popover-open {\n    position: fixed;\n    position-area: inline-end span-block-end;\n    margin: 0 0 0 4px;\n    inset: auto;\n  }\n\n  .clepit-convert-submenu:popover-open {\n    position-try-fallbacks: flip-inline;\n  }\n}\n\n.clepit-convert-submenu {\n  position: absolute;\n  top: var(--submenu-top, 0);\n  left: var(--submenu-left, 100%);\n  z-index: var(--submenu-z-index, 1002);\n  background: var(--clepit-bg);\n  border: 1px solid var(--clepit-border);\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  padding: 8px;\n  min-width: 140px;\n  margin-left: 4px;\n  display: none;\n  transition: transform 0.2s ease;\n}\n\n.clepit-convert-submenu--visible {\n  display: block;\n  opacity: 1;\n  transform: translateX(0);\n}\n\n.clepit-convert-submenu--hidden {\n  display: none;\n  opacity: 0;\n  transform: translateX(-10px);\n}\n\n/* Input styles for convert submenu */\n.clepit-convert-submenu input {\n  width: 100%;\n  padding: 6px 8px;\n  border: 1px solid var(--clepit-input-border, var(--clepit-border));\n  border-radius: 4px;\n  font-size: 12px;\n  outline: none;\n  background-color: var(--input-bg, var(--clepit-bg));\n  color: var(--input-color, var(--clepit-text));\n}\n\n.clepit-convert-submenu input:focus {\n  border-color: var(--clepit-input-focus-border, var(--clepit-primary));\n  box-shadow: 0 0 0 2px var(--clepit-input-focus-shadow, var(--clepit-primary-bg));\n}\n\n.clepit-convert-submenu input::placeholder {\n  color: var(--clepit-input-placeholder, var(--clepit-text-subtle));\n}\n\n.clepit-convert-submenu-items {\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n.clepit-block-operation-item {\n  padding: 8px 12px;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: background-color 0.2s;\n  font-size: 14px;\n}\n\n.clepit-block-operation-item:hover {\n  background-color: var(--clepit-hover-bg, var(--clepit-selection-bg));\n}\n\n/* Input styles for operations menu */\n.clepit-block-operations-menu input {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid var(--clepit-input-border, var(--clepit-border));\n  border-radius: 4px;\n  font-size: 14px;\n  margin-bottom: 8px;\n  outline: none;\n  transition: border-color 0.2s;\n  background-color: var(--input-bg, var(--clepit-bg));\n  color: var(--input-color, var(--clepit-text));\n}\n\n.clepit-block-operations-menu input:focus {\n  border-color: var(--clepit-primary);\n  box-shadow: 0 0 0 2px var(--clepit-primary-bg);\n}\n\n.clepit-block-operations-menu input::placeholder {\n  color: var(--placeholder-color, var(--clepit-text-subtle));\n}\n\n.clepit-block-operations-menu-items {\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n.clepit-block-operation-item[data-operation=\"delete\"] {\n  color: var(--clepit-error);\n}\n\n/* Convert submenu items */\n.clepit-convert-option-item {\n  padding: 8px 12px;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: background-color 0.2s;\n  font-size: 14px;\n}\n\n.clepit-convert-option-item:hover {\n  background-color: var(--clepit-hover-bg, var(--clepit-selection-bg));\n}\n\n/* Indentation */\n.clepit-block[data-indent=\"1\"] .clepit-block-content {\n  margin-left: 20px;\n}\n\n.clepit-block[data-indent=\"2\"] .clepit-block-content {\n  margin-left: 40px;\n}\n\n.clepit-block[data-indent=\"3\"] .clepit-block-content {\n  margin-left: 60px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  /* The 54px gutter exists to hold the block toolbar, which is only ever\n   * displayed on the active block. On a phone that reserved a seventh of the\n   * editor's width on every idle block at once, pushing the text into a narrow\n   * column with empty space either side. Give the width back and let the\n   * gutter open only under the block whose toolbar is actually showing. */\n  /* No transition on padding-left. The block element is re-created as you\n   * interact with it, so an animated gutter restarts from 0 every time and\n   * never reaches its end value \u2014 the toolbar would sit on top of the text. */\n  .clepit-block {\n    padding-left: 0;\n  }\n\n  .clepit-block--active,\n  .clepit-block:focus-within,\n  .clepit-block:has(.clepit-block-toolbar--visible) {\n    padding-left: 54px;\n  }\n}\n";
 //# sourceMappingURL=css.d.ts.map

package/dist/core/renderer/activate.d.ts

@@ -0,0 +1,14 @@
+import { Block } from '../../types';
+/**
+ * Wire the behaviors `renderBlocks` markup deliberately leaves out: code tab
+ * switching, language sync and the clipboard; openapi response tabs; the
+ * table CSV download.
+ *
+ * The markup carries `data-clepit-block-id` from `drawBlock`, so each block's
+ * element is found exactly rather than by position, including inside columns
+ * and collapsibles. An element already activated is skipped, and the returned
+ * disposer removes every listener that was added: a React host can activate
+ * on mount and release on unmount as often as it likes.
+ */
+export declare const activateBlocks: (container: HTMLElement, blocks: readonly Block[]) => (() => void);
+//# sourceMappingURL=activate.d.ts.map

package/dist/index.d.ts

@@ -2,9 +2,10 @@ export { Editor } from './core/editor';
 export { type Backing, type ClepitElement, type DrawContext, domBacking, renderToString, stringBacking, toDomElement } from './core/element';
 export { StyleManager } from './core/managers/style';
 export { Renderer } from './core/renderer';
+export { activateBlocks } from './core/renderer/activate';
 export { drawBlock } from './core/renderer/draw';
 export { type PublicPage, pageStylesheet, renderBlocks, renderPage } from './core/renderer/page';
-export type { ThemeTokens } from './core/theme';
+export { type ThemeTokens, tokensToLightDarkBlock } from './core/theme';
 export type { OpenApiGroup, OpenApiModel, OpenApiOperation, OpenApiServer } from './tools/block/openapi/spec';
 export { parseOpenApi } from './tools/block/openapi/spec';
 export type { ALERT_VARIANTS, AlertData, AlertVariant, AudioData, Block, BlockClassNames, BlockMargins, BlockStyles, BlockTune, CodeData, CodeVariant, CSSProperties, CSSValue, DelimiterData, DelimiterVariant, EditorAPI, EditorClassNames, EditorConfig, EditorData, EditorStyles, GlanceData, GlanceRow, HeaderData, HeaderLevel, ImageData, InlineToolType as InlineTool, InputClassNames, InputConfig, InputStyles, ListData, ListType, OpenApiData, OpenApiFilter, OutputComponent, OutputConfig, ParagraphData, QuoteData, RendererConfig, TableData, ToolType as BlockType, UploadFunction, VideoData, } from './types';