@clepit/core 0.2.0-beta.322

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Changelog
+
+All notable changes to `@clepit/core` are documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.2.0] — 2026-04-21
+
+### Added
+- First publicly-supported release.
+- Public `README.md`, `LICENSE` (MIT), and `CHANGELOG.md` for npm consumers.
+- 12 block types: `header`, `paragraph`, `list`, `checklist`, `quote`, `code`, `alert`, `table`, `image`, `video`, `delimiter`, `json`.
+- 8 inline tools: link, marker, tooltip, bold, italic, underline, strikethrough, inline-code.
+- Themes: `'auto' | 'light' | 'dark'` plus `themeOverrides` for custom tokens.
+- `StyleManager.subscribe` for reacting to theme token changes at runtime.
+
+## [0.1.0] — 2026-04-01
+
+### Added
+- Initial internal release of the editor library.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Adombang Mbomndih Munang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,79 @@
+# @clepit/core
+
+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)
+
+## Install
+
+```sh
+bun add @clepit/core
+# or
+npm install @clepit/core
+```
+
+## Quick start
+
+```html
+<div id="editor"></div>
+```
+
+```ts
+import { Editor } from '@clepit/core';
+
+const editor = Editor.create({
+  containerId: 'editor',
+  theme: 'auto', // 'auto' | 'light' | 'dark'
+});
+
+const data = editor.data.extract();
+console.log(data.blocks);
+```
+
+## Features
+
+- **12 built-in block types** — header, paragraph, list, checklist, quote, code, alert, table, image, video, delimiter, json.
+- **8 inline tools** — link, marker, tooltip, bold, italic, underline, strikethrough, inline-code.
+- **Framework-agnostic** — no React, Vue, or Svelte dependency. Drop into any app that can mount a DOM node.
+- **TypeScript-first** — every public API is typed. No `any`.
+- **Theme-aware** — pass `theme: 'auto'` and the editor follows the OS color scheme. Override any token with `themeOverrides`.
+- **Clean JSON output** — persist, sync, and render wherever you like.
+
+## Theming
+
+```ts
+Editor.create({
+  containerId: 'editor',
+  theme: 'auto',
+  themeOverrides: {
+    accentPrimary: '#5b5bff',
+    bgDefault: '#ffffff',
+    textPrimary: '#0a0a0a',
+  },
+});
+```
+
+Subscribe to runtime token changes:
+
+```ts
+import { StyleManager } from '@clepit/core';
+
+const unsub = StyleManager.subscribe(tokens => {
+  // sync surrounding UI with editor theme
+});
+```
+
+## Rendering saved content
+
+```ts
+import { Renderer } from '@clepit/core';
+
+Renderer.render({
+  containerId: 'view',
+  data, // block JSON from editor.data.extract()
+});
+```
+
+## License
+
+MIT. See [LICENSE](./LICENSE).

package/dist/core/editor/action-bar/css.d.ts

@@ -0,0 +1,3 @@
+export declare const stylesKey = "clepit-action-bar-styles";
+export declare const style = "\n/* View Toggle */\n.clepit-action-bar {\n  position: relative;\n  z-index: 1000;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: -14px; /* Position buttons so exactly half is inside and half outside */\n  pointer-events: none;\n  padding: 0 100px;\n}\n\n.clepit-action-bar-group {\n  display: flex;\n  background: var(--clepit-bg);\n  border: 1px solid var(--clepit-border);\n  border-radius: 6px;\n  overflow: hidden;\n  padding: 4px;\n  gap: 4px;\n}\n\n.clepit-action-bar-button {\n  width: 24px;\n  height: 24px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--clepit-text-muted);\n  font-size: 14px;\n  font-weight: bold;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  pointer-events: auto;\n}\n\n.clepit-action-bar-button:first-child {\n  border-radius: 4px;\n}\n\n.clepit-action-bar-button:last-child {\n  border-radius: 4px;\n}\n\n.clepit-action-bar-button:not(:first-child):not(:last-child) {\n  border-radius: 4px;\n}\n\n.clepit-action-bar-button:hover {\n  background: var(--clepit-toolbar-button-hover-bg, var(--clepit-selection-bg));\n  color: var(--clepit-toolbar-button-hover-color, var(--clepit-primary));\n  transform: scale(1.05);\n}\n\n.clepit-action-bar-button:active {\n  transform: scale(0.95);\n}\n\n.clepit-action-bar-button.active {\n  background-color: var(--clepit-primary-bg);\n  color: var(--clepit-primary);\n  font-weight: bold;\n}\n\n/* Action Buttons */\n.clepit-view-actions {\n  display: flex;\n  background: var(--clepit-bg);\n  border: 1px solid var(--clepit-border);\n  border-radius: 6px;\n  overflow: hidden;\n  padding: 4px;\n  gap: 4px;\n}\n\n.clepit-view-action-button {\n  width: 24px;\n  height: 24px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--clepit-text-muted);\n  font-size: 14px;\n  font-weight: bold;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  pointer-events: auto;\n}\n\n.clepit-view-action-button:first-child {\n  border-radius: 4px;\n}\n\n.clepit-view-action-button:last-child {\n  border-radius: 4px;\n}\n\n.clepit-view-action-button:not(:first-child):not(:last-child) {\n  border-radius: 4px;\n}\n\n.clepit-view-action-button:hover {\n  background: var(--clepit-toolbar-button-hover-bg, var(--clepit-selection-bg));\n  color: var(--clepit-toolbar-button-hover-color, var(--clepit-primary));\n  transform: scale(1.05);\n}\n\n.clepit-view-action-button:active {\n  transform: scale(0.95);\n}\n\n/* Copy button feedback animation */\n.clepit-view-action-button--copy-feedback {\n  transform: scale(0.95) !important;\n  background-color: var(--clepit-success) !important;\n  color: var(--clepit-bg) !important;\n}\n";
+//# sourceMappingURL=css.d.ts.map

package/dist/core/editor/action-bar/index.d.ts

@@ -0,0 +1,18 @@
+import { EditorView } from '../../../types';
+/*****************************************************************************************************************************************************
+ * Class for the action bar
+ *****************************************************************************************************************************************************/
+export declare class ActionBar {
+    private static eventListenersMap;
+    private static addEventListener;
+    static create(containerId: string): void;
+    private static createButtonGroup;
+    static getCurrentView(containerId: string): EditorView | null;
+    private static updateButtonStates;
+    private static handleViewChange;
+    private static handleCopyJson;
+    private static handleClearEditor;
+    private static handleDownloadJson;
+    static destroy(containerId: string): void;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,3 @@
+export declare const stylesKey = "clepit-editor-container-styles";
+export declare const style: string;
+//# sourceMappingURL=css.d.ts.map

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

@@ -0,0 +1,18 @@
+import { EditorAPI, EditorConfig } from '../../types';
+export declare class Editor {
+    static create(config: EditorConfig): EditorAPI;
+    private static initialize;
+    /**
+     * Flatten every block to the locale being edited before the editor sees it.
+     *
+     * Returns the data untouched when no locale is configured, so an editor that
+     * never heard of multilingual content behaves exactly as it always did.
+     * Reports each block that had to fall back, so the host can say which language
+     * is on screen rather than leaving an author wondering why their text did not
+     * change when they switched.
+     */
+    private static localizeData;
+    private static render;
+    static destroy(containerId: string): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/core/editor/views/edit.d.ts

@@ -0,0 +1,4 @@
+export declare class EditView {
+    static render(containerId: string): void;
+}
+//# sourceMappingURL=edit.d.ts.map

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

@@ -0,0 +1,4 @@
+export * from './edit';
+export * from './json';
+export * from './preview';
+//# sourceMappingURL=index.d.ts.map

package/dist/core/editor/views/json.d.ts

@@ -0,0 +1,9 @@
+export declare class JsonView {
+    static render(containerId: string): void;
+    private static addEventListeners;
+    private static removeEventListeners;
+    private static handleJsonInput;
+    private static validateAndUpdateJson;
+    static destroy(containerId: string): void;
+}
+//# sourceMappingURL=json.d.ts.map

package/dist/core/editor/views/preview.d.ts

@@ -0,0 +1,4 @@
+export declare class PreviewView {
+    static render(containerId: string): void;
+}
+//# sourceMappingURL=preview.d.ts.map

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

@@ -0,0 +1,101 @@
+import { Block } from '../../types';
+/**
+ * The construction surface a block's render path is allowed to use.
+ *
+ * Two backings implement it: the real DOM in a browser, a string builder
+ * outside one. That is what lets `@clepit/core` draw a document in a
+ * consumer's own process with no browser and no network — which it must, being
+ * a published package.
+ *
+ * Interaction and measurement are deliberately absent. `addEventListener`,
+ * `getSelection`, `getComputedStyle` and `getBoundingClientRect` have no meaning
+ * without a live page: there is no cursor to read, nothing to measure and no
+ * user to listen to. They stay in a separate attach step that only runs under
+ * the DOM backing.
+ */
+export type ClepitElement = {
+    readonly tag: string;
+    setAttribute(name: string, value: string): void;
+    addClass(...names: string[]): void;
+    setText(text: string): void;
+    /**
+     * Assign markup.
+     *
+     * The DOM backing hands this to the browser's parser. The string backing has
+     * no parser, so it runs the value through the sanitiser it was constructed
+     * with — without that, stored document content would emit arbitrary markup
+     * into a server-rendered page.
+     */
+    setHtml(html: string): void;
+    append(child: ClepitElement): void;
+    appendText(text: string): void;
+};
+/**
+ * What a block needs to draw itself beyond its own data.
+ *
+ * Most blocks need nothing here. The few that do needed it as an extra
+ * positional argument of their own shape, which meant there was no single way
+ * to call "whichever drawer this block type uses" and the compiler could not
+ * check the call. One optional context, shared by every drawer, is what makes
+ * the registry in `core/renderer/draw` type-safe rather than checked at run
+ * time.
+ */
+export type DrawContext = {
+    /** A toc derives from its siblings, which no block-local data carries. */
+    documentBlocks?: readonly Block[];
+    /** Which variant a code block opens on. */
+    activeVariant?: number;
+    /** Google Maps embeds need a key to build a provider URL. */
+    mapsEmbedKey?: string;
+    /** How a doc card turns a page id into a link, which only the host knows. */
+    docHref?: (pageId: string) => string;
+};
+export type Backing = {
+    create(tag: string): ClepitElement;
+    /**
+     * Create an element in a namespace — in practice SVG, which a sketch and a
+     * typeset diagram are both drawn in.
+     *
+     * The namespace is not serialised. Inline SVG inside an HTML document carries
+     * no `xmlns`, and the DOM's own HTML serialiser omits it, so emitting one
+     * would put the two backings out of parity.
+     */
+    createNS(namespace: string, tag: string): ClepitElement;
+};
+export declare const domBacking: Backing;
+/**
+ * Escape for a text node, exactly as the DOM's own serialiser does.
+ *
+ * Three characters, not five. A quote cannot terminate a text node, and
+ * escaping one anyway emits a different document from the browser for the same
+ * input — which the parity tests read as the two backings having drifted.
+ */
+export declare const escapeText: (value: string) => string;
+/**
+ * Escape for a double-quoted attribute value, exactly as the DOM's own
+ * serialiser does. Angle brackets are literal inside a quoted value; the double
+ * quote is the only thing that can end it early.
+ */
+export declare const escapeAttribute: (value: string) => string;
+/**
+ * A backing that draws to a string.
+ *
+ * `sanitize` is REQUIRED and has no default on purpose. The package's existing
+ * `sanitizeHtml` builds a DOM to parse with, so it cannot run here, and quietly
+ * escaping instead would strip every document's inline formatting without
+ * saying so. Making it an argument keeps that gap visible at the call site
+ * rather than hidden in a default.
+ */
+export declare const stringBacking: (sanitize: (html: string) => string) => Backing;
+export declare const renderToString: (element: ClepitElement) => string;
+/**
+ * The real node behind a DOM-backed element.
+ *
+ * A block whose drawing is shared between `render` and `draw` builds it once
+ * through the layer, and the DOM path needs the node back at the end to hand to
+ * `appendChild`. Throws rather than returning anything for a string-backed
+ * element: there is no node, and a caller that got this far has passed the
+ * wrong backing.
+ */
+export declare const toDomElement: (element: ClepitElement) => Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,43 @@
+export declare const isTranslatableField: (blockType: string, field: string) => boolean;
+export declare const translatableFieldsOf: (blockType: string) => string[];
+export declare const isCollectionField: (blockType: string, field: string) => boolean;
+/**
+ * Flatten a block's translatable top-level fields to one reader's locale.
+ *
+ * Called once at the render boundary so that every block tool keeps receiving
+ * plain scalars and needs no change. A block whose fields are all scalars comes
+ * back untouched, which is what makes this invisible for a single-language
+ * document.
+ *
+ * Collection fields pass through unchanged: their text is at the leaf and
+ * walking into them is a separate concern.
+ */
+export declare const resolveBlockData: (blockType: string, data: Record<string, unknown>, requested: string, documentDefault: string) => Record<string, unknown>;
+export type Localized<T> = T | Record<string, T>;
+export type Resolution<T> = {
+    locale: string;
+    isFallback: boolean;
+    value: T;
+};
+export declare const isTranslated: <T>(value: Localized<T>) => boolean;
+export declare const localesOf: <T>(value: Localized<T>, documentDefault: string) => string[];
+/**
+ * Resolve a possibly-translated field for a reader.
+ *
+ * A bare scalar is the document's default locale, which is what lets every
+ * block written before this slice read correctly with no backfill.
+ *
+ * Order is requested, then the document default, then any present locale in a
+ * deterministic order. It returns null only when a locale map is genuinely
+ * empty: a reader must never get a blank block because their language is
+ * missing, so `isFallback` reports when they are reading something other than
+ * what they asked for.
+ */
+export declare const resolveLocalized: <T>(value: Localized<T> | undefined, requested: string, documentDefault: string) => Resolution<T> | null;
+/**
+ * Write a value for one locale, keeping the field scalar while it holds only the
+ * document default. A single-language tenant's stored data therefore never
+ * changes shape.
+ */
+export declare const withLocale: <T>(value: Localized<T> | undefined, locale: string, next: T, documentDefault: string) => Localized<T>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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";
+//# sourceMappingURL=css.d.ts.map

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

@@ -0,0 +1,40 @@
+import { Block, BlockToolType, EditorData, Tool } from '../../../types';
+/*****************************************************************************************************************************************************
+ * Class for the block manager
+ *****************************************************************************************************************************************************/
+export declare class BlockManager {
+    private static eventListenersMap;
+    private static addEventListener;
+    private static createBlockElement;
+    static insertBlock(block: Block, containerId: string, index: number): HTMLElement | null;
+    static removeBlock(containerId: string, index: number): null | undefined;
+    static replaceBlock(containerId: string, index: number, block: Block<BlockToolType>): void;
+    static moveBlock(containerId: string, fromIndex: number, toIndex: number): void;
+    static getBlock(blockId: string): HTMLElement | null;
+    static getBlocks(containerId: string): HTMLElement[];
+    static getActiveBlocks(containerId: string): HTMLElement[];
+    static getBlockIndex(containerId: string, blockId: string): number;
+    static getTool(type: BlockToolType): Tool | null;
+    static getBlockData<T extends BlockToolType>(blockId: string): Block<T>;
+    static extractData(containerId: string): EditorData;
+    static renderTool(type: BlockToolType, data: Block<BlockToolType>['data'], containerId: string): HTMLElement | null;
+    static focusBlock(block: HTMLElement): void;
+    static setActiveBlock(block: HTMLElement): void;
+    static getActiveBlock(containerId: string): HTMLElement | null;
+    static convertBlock(blockId: string, newType: BlockToolType, containerId: string): void;
+    private static getBlockTunes;
+    static updateStateFromRange(range: Range): void;
+    static renderBlock(block: HTMLElement, containerId: string, index: number): void;
+    static setBlocks(blocks: Block[], containerId: string): void;
+    static renderBlocks(blocks: Block[], containerId: string): void;
+    private static removeAllBlocks;
+    static resetBlocks(containerId: string): void;
+    static getEditorId(element: HTMLElement): string | null;
+    static handleKeydown(event: Event): void;
+    static handleInput(event: Event): void;
+    static ensureActiveBlock(containerId: string): void;
+    static saveBlockData(element: HTMLElement): void;
+    static updateBlockData(blockId: string, data: Block['data'], containerId: string): void;
+    static destroy(containerId: string): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/core/managers/event.d.ts

@@ -0,0 +1,13 @@
+import { EditorInstance } from '../../types';
+export declare class EventManager {
+    static addListeners(containerId: string): void;
+    static removeListeners(containerId: string): void;
+    static getInstanceAndTargetFromRange(range: Range): {
+        target: HTMLElement;
+        instance: EditorInstance;
+    } | null;
+    private static handleClick;
+    private static handleSelectionChange;
+    static handlePaste(event: ClipboardEvent): void;
+}
+//# sourceMappingURL=event.d.ts.map

package/dist/core/managers/style.d.ts

@@ -0,0 +1,181 @@
+import { ThemeTokens } from '../theme';
+import { BlockClassNames, CSSProperties } from '../../types';
+/**
+ * Centralized styling manager that ensures consistent styling across all components
+ *
+ * Styling hierarchy:
+ * 1. Default styles via CSS classes (lowest priority)
+ * 2. User styles as inline styles (highest priority)
+ * 3. User classnames last (can override default styles but not user styles)
+ */
+export declare class StyleManager {
+    static idSuffixes: {
+        actionBar: {
+            clearButton: string;
+            copyButton: string;
+            downloadButton: string;
+            editButton: string;
+            jsonButton: string;
+            previewButton: string;
+        };
+        editorContent: string;
+    };
+    static classNames: {
+        actionBar: {
+            action: string;
+            actionButton: string;
+            button: string;
+            container: string;
+            copyFeedback: string;
+            group: string;
+        };
+        block: {
+            active: string;
+            alert: string;
+            audio: {
+                captionEditable: string;
+                container: string;
+                dropArea: string;
+                wrapper: string;
+            };
+            audioDeleteBtn: string;
+            checklist: {
+                checkbox: string;
+                container: string;
+                item: string;
+                text: string;
+            };
+            code: {
+                container: string;
+                editor: string;
+                header: string;
+                headerWrapper: string;
+            };
+            container: string;
+            content: string;
+            header: string;
+            image: {
+                captionEditable: string;
+                container: string;
+                dropArea: string;
+                wrapper: string;
+            };
+            imageDeleteBtn: string;
+            indent1: string;
+            indent2: string;
+            indent3: string;
+            link: string;
+            list: {
+                container: string;
+                item: string;
+            };
+            output: string;
+            paragraph: string;
+            quote: {
+                author: string;
+                container: string;
+                divider: string;
+                text: string;
+            };
+            table: {
+                caption: string;
+                cell: string;
+                downloadSwitch: string;
+                headerCell: string;
+                headerRow: string;
+                row: string;
+            };
+            tooltip: string;
+            video: {
+                captionEditable: string;
+                container: string;
+                dropArea: string;
+                iframe: string;
+                video: string;
+                wrapper: string;
+            };
+            videoDeleteBtn: string;
+        };
+        editor: {
+            container: string;
+            content: string;
+            jsonEditable: string;
+            jsonEmpty: string;
+            jsonError: string;
+            jsonOutput: string;
+        };
+        renderer: {
+            content: string;
+        };
+        switch: {
+            container: string;
+        };
+    };
+    /**
+     * Apply styles to an element following the proper hierarchy
+     */
+    static applyStyles(element: HTMLElement, styles?: CSSProperties): void;
+    /**
+     * Apply class names to an element
+     */
+    static applyClassNames(element: HTMLElement, classNames?: BlockClassNames | Record<string, string | undefined> | string): void;
+    /**
+     * Apply styling to an element following the proper hierarchy:
+     * 1. Default styles via CSS classes (already applied via className)
+     * 2. User styles as inline styles (highest priority)
+     * 3. User classnames last (can override default styles but not user styles)
+     */
+    static applyStyling(element: HTMLElement, options: {
+        styles?: CSSProperties;
+        classNames?: BlockClassNames | string;
+    }): void;
+    /**
+     * Create a styled element with proper styling hierarchy
+     */
+    static createStyledElement(tag: keyof HTMLElementTagNameMap, className: string, options?: {
+        styles?: CSSProperties;
+        classNames?: BlockClassNames | string;
+    }): HTMLElement;
+    /**
+     * Reusable function to inject styles into the document head
+     * @param styleId - Unique ID for the style element
+     * @param styles - CSS styles as a string
+     * @returns boolean - true if styles were injected, false if already existed
+     */
+    static injectStyles(styleId: string, styles: string): boolean;
+    private static themeRegistry;
+    private static themeSubscribers;
+    private static themeMediaQuery?;
+    private static themeMediaQueryListener?;
+    /**
+     * Register an editor instance with the theme system. Sets data attributes on
+     * the container, injects per-instance token overrides if provided, and
+     * lazily attaches the prefers-color-scheme listener if needed.
+     */
+    static registerEditor(containerId: string, mode: 'auto' | 'light' | 'dark', overrides?: {
+        light?: ThemeTokens;
+        dark?: ThemeTokens;
+    }): void;
+    /**
+     * Unregister an editor instance. Removes the per-instance override block,
+     * clears data attributes, and detaches the matchMedia listener if no
+     * auto-mode editors and no subscribers remain.
+     */
+    static unregisterEditor(containerId: string): void;
+    /**
+     * Mirrors the active editor's theme mode onto `document.body` so that
+     * portaled overlays (dialogs, menus, tooltips appended to body) inherit
+     * the same CSS variables defined in the built-in theme stylesheet.
+     * If multiple editors are registered, the first registered mode wins.
+     */
+    private static syncBodyThemeAttribute;
+    /** Returns the current OS-resolved theme. Defaults to 'light' when matchMedia is unavailable. */
+    static getResolvedTheme(): 'light' | 'dark';
+    /** Subscribe to OS-level theme changes. Returns unsubscribe function. */
+    static subscribe(cb: (theme: 'light' | 'dark') => void): () => void;
+    /** Test-only helper to reset registry between tests. */
+    static unregisterAllEditorsForTest(): void;
+    private static ensureThemeListener;
+    private static maybeDetachThemeListener;
+}
+//# sourceMappingURL=style.d.ts.map

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

@@ -0,0 +1,27 @@
+import { Backing, ClepitElement, DrawContext } from '../element';
+import { Block, BlockToolType } from '../../types';
+/**
+ * How any block type draws itself, in one shape.
+ *
+ * Four blocks used to take a fourth argument of their own: the toc wanted the
+ * document's other blocks, code an active variant, embed a maps key, and a doc
+ * card a link builder. One shared optional context replaces all four, which is
+ * what lets a single call site draw any block at all.
+ */
+export type BlockDrawer<T extends BlockToolType> = (data: Block<T>['data'], backing: Backing, context?: DrawContext) => ClepitElement | null;
+/**
+ * Draw one block, whatever type it is.
+ *
+ * A switch rather than a lookup table, and deliberately so. Indexing a table by
+ * `block.type` gives the compiler a union of every drawer, and it then demands
+ * an argument acceptable to all of them at once, which no block's data is. That
+ * is the point where a cast usually gets written, and a cast here would let a
+ * paragraph's data reach the table drawer with nothing complaining.
+ *
+ * Each `case` narrows `block` to one type, so `block.data` is checked against
+ * that block's drawer and nothing else. The `never` at the end is what makes it
+ * total: add a block tool without a case and this file stops compiling, rather
+ * than a child quietly vanishing from a published page.
+ */
+export declare const drawBlock: (block: Block, backing: Backing, context?: DrawContext) => ClepitElement | null;
+//# sourceMappingURL=draw.d.ts.map

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

@@ -0,0 +1,15 @@
+import { RendererConfig } from '../../types';
+export declare class Renderer {
+    static render(config: RendererConfig): HTMLElement;
+    /**
+     * Flatten a block's translated fields to the reader's locale before any tool
+     * sees it, so every tool keeps receiving plain scalars.
+     *
+     * Returns the block itself when no locale is configured or nothing is
+     * translated, which is what keeps a single-language document byte-identical
+     * through this path.
+     */
+    private static localize;
+    private static renderBlock;
+}
+//# sourceMappingURL=index.d.ts.map