@clepit/core 0.2.0-beta.322 → 0.2.0-beta.323

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +1 -1
  2. package/dist/core/managers/block/css.d.ts +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/index.mjs +1 -1
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  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.
4
4
 
5
- **Homepage:** [clepit.com](https://clepit.com) · **Docs:** [clepit.com/docs](https://clepit.com/docs) · **Live demo:** [clepit.com/demo](https://clepit.com/demo)
5
+ **Homepage:** [clepit.com](https://clepit.com) · **Docs:** [clepit.com/docs](https://clepit.com/docs)
6
6
 
7
7
  ## Install
8
8
 
package/dist/core/managers/block/css.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export declare const stylesKey = "clepit-block-manager-styles";
2
- 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";
2
+ 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";
3
3
  //# sourceMappingURL=css.d.ts.map