@clepit/core 0.7.0-beta.443 → 0.7.0-beta.452

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

@@ -1,3 +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";
+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: background-color 0.2s ease, color 0.2s ease, transform 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: background-color 0.2s ease, color 0.2s ease, transform 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/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.clepit-block[data-showing-locale] .clepit-block-content {\n  color: color-mix(in oklab, var(--clepit-text) 60%, transparent);\n}\n\n.clepit-block-showing-locale {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  align-self: flex-start;\n  height: 18px;\n  margin-top: 2px;\n  padding: 0 6px;\n  border-radius: 999px;\n  background-color: var(--clepit-surface-2);\n  color: var(--clepit-text-muted);\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.02em;\n  line-height: 1;\n  user-select: none;\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: block-end span-inline-end;\n    margin-block-start: 5px;\n    inset: auto;\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--active {\n  background-color: transparent;\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.clepit-block[data-showing-locale] .clepit-block-content {\n  color: color-mix(in oklab, var(--clepit-text) 60%, transparent);\n}\n\n.clepit-block-showing-locale {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  align-self: flex-start;\n  height: 18px;\n  margin-top: 2px;\n  padding: 0 6px;\n  border-radius: 999px;\n  background-color: var(--clepit-surface-2);\n  color: var(--clepit-text-muted);\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.02em;\n  line-height: 1;\n  user-select: none;\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.clepit-menu-item {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n  min-height: 38px;\n  padding: 8px 10px;\n  border-radius: var(--clepit-radius-md);\n  color: var(--clepit-text);\n  font-size: 14px;\n  line-height: 1.5;\n  cursor: pointer;\n  transition: background-color 120ms ease;\n}\n\n.clepit-menu-item .clepit-menu-icon {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  color: var(--clepit-text-muted);\n}\n\n.clepit-menu-item .clepit-menu-icon--text {\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0;\n}\n\n.clepit-menu-arrow svg {\n  display: block;\n  width: 18px;\n  height: 18px;\n}\n\n.clepit-menu-icon svg {\n  display: block;\n  width: 18px;\n  height: 18px;\n}\n\n.clepit-menu-item:hover,\n.clepit-menu-item[data-highlighted] {\n  background-color: var(--clepit-hover-bg);\n}\n\n.clepit-menu-item.active {\n  background-color: var(--clepit-pressed-bg);\n  color: var(--clepit-primary);\n}\n\n.clepit-menu-item--danger,\n.clepit-menu-item--danger .clepit-menu-icon {\n  color: var(--clepit-error);\n}\n\n.clepit-menu-item--danger:hover,\n.clepit-menu-item--danger[data-highlighted] {\n  background-color: var(--clepit-danger-bg);\n}\n\n.clepit-menu-group {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.clepit-menu-group + .clepit-menu-group {\n  margin-top: 6px;\n  padding-top: 6px;\n  border-top: 1px solid var(--clepit-border);\n}\n\n.clepit-menu-section {\n  margin: 0;\n  padding: 6px 10px 4px;\n  color: var(--clepit-text-subtle);\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1.4;\n}\n\n.clepit-menu-divider {\n  height: 1px;\n  margin: 6px 0;\n  background: var(--clepit-border);\n}\n\n.clepit-menu-arrow {\n  margin-left: auto;\n  color: var(--clepit-text-subtle);\n}\n\n.clepit-block-type-selector input {\n  width: 100%;\n  min-height: 34px;\n  margin-bottom: 6px;\n  padding: 6px 10px;\n  border: 1px solid var(--clepit-border);\n  border-radius: var(--clepit-radius-md);\n  background-color: var(--clepit-bg);\n  color: var(--clepit-text);\n  font-size: 14px;\n  outline: none;\n  transition: border-color 120ms ease;\n}\n\n.clepit-block-type-selector input:focus-visible {\n  border-color: var(--clepit-focus-ring);\n  box-shadow: 0 0 0 1px var(--clepit-focus-ring);\n}\n\n.clepit-block-type-selector input::placeholder {\n  color: var(--clepit-text-subtle);\n}\n\n.clepit-block-type-selector-items {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  max-height: 360px;\n  overflow-y: auto;\n}\n\n.clepit-not-found-message {\n  padding: 8px 10px;\n  color: var(--clepit-text-muted);\n  font-size: 14px;\n}\n\n.clepit-menu-shortcut {\n  margin-left: auto;\n  padding-left: 12px;\n  color: var(--clepit-text-subtle);\n  font-size: 12px;\n  white-space: nowrap;\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  min-width: 260px;\n  margin: 0;\n  border: 0;\n  border-radius: var(--clepit-radius-lg);\n  background: var(--clepit-menu-bg);\n  box-shadow: var(--clepit-menu-shadow);\n  padding: 6px;\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: block-end span-inline-end;\n    margin-block-start: 5px;\n    inset: auto;\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/theme/index.d.ts

@@ -33,6 +33,13 @@ export type ThemeTokens = Partial<{
     errorBg: string;
     info: string;
     infoBg: string;
+    menuBg: string;
+    hoverBg: string;
+    pressedBg: string;
+    dangerBg: string;
+    focusRing: string;
+    inverseSurface: string;
+    inverseText: string;
 }>;
 export declare const defaultLightTokens: Required<ThemeTokens>;
 export declare const defaultDarkTokens: Required<ThemeTokens>;

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

@@ -1,3 +1,3 @@
 export declare const stylesKey = "clepit-block-toolbar-styles";
-export declare const style = "\n/* Block Toolbar */\n.clepit-block-toolbar {\n  position: absolute;\n  left: 4px;\n  top: 4px;\n  z-index: 1000;\n  display: none;\n  gap: 4px;\n  flex-shrink: 0;\n  background: var(--clepit-bg);\n  border: 1px solid var(--clepit-border);\n  border-radius: 6px;\n  overflow: hidden;\n  padding: 4px;\n  transition: transform 0.2s ease;\n}\n\n.clepit-block-toolbar--visible {\n  display: flex !important;\n  transform: translateY(0) !important;\n  pointer-events: auto !important;\n}\n\n.clepit-block-toolbar--hidden {\n  display: none !important;\n  pointer-events: none !important;\n}\n\n.clepit-block--active .clepit-block-toolbar,\n.clepit-block:focus-within .clepit-block-toolbar,\n.clepit-block-toolbar[style*=\"display: flex\"] {\n  display: flex;\n  pointer-events: auto;\n}\n\n.clepit-block-toolbar-add,\n.clepit-block-toolbar-ops {\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}\n\n.clepit-block-toolbar-add:hover,\n.clepit-block-toolbar-ops: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-block-toolbar-add:active,\n.clepit-block-toolbar-ops:active {\n  transform: scale(0.95);\n}\n\n/* Block toolbar positioning and display classes */\n.clepit-block-toolbar--positioned {\n  position: absolute;\n}\n\n.clepit-block-toolbar--menu-positioned {\n  position: absolute;\n  z-index: 1001;\n}\n\n.clepit-block-toolbar--submenu-positioned {\n  position: absolute;\n  z-index: 998;\n}\n\n.clepit-block-toolbar--item-hidden {\n  display: none;\n}\n\n.clepit-block-toolbar--item-visible {\n  display: flex;\n}\n\n.clepit-block-toolbar--separator-hidden {\n  display: none;\n}\n\n.clepit-block-toolbar--separator-visible {\n  display: block;\n}\n\n.clepit-block-toolbar--delete-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.clepit-block-toolbar--delete-enabled {\n  color: var(--clepit-error);\n}\n\n/* The toolbar stays absolutely positioned at every width. It used to go\n * position: static below 768px, which made it a flex item of .clepit-block \u2014\n * and because it is appended after the content it landed to the RIGHT of the\n * text rather than above it, taking a further 60px off an already narrow\n * column. Absolute keeps it inside the gutter the block opens for it. */\n";
+export declare const style = "\n.clepit-block-toolbar {\n  position: absolute;\n  top: 6px;\n  left: 4px;\n  z-index: 1000;\n  display: none;\n  flex-shrink: 0;\n  gap: 2px;\n  padding: 0;\n  border: 0;\n  background: transparent;\n}\n\n.clepit-block-toolbar--visible {\n  display: flex !important;\n  pointer-events: auto !important;\n}\n\n.clepit-block-toolbar--hidden {\n  display: none !important;\n  pointer-events: none !important;\n}\n\n.clepit-block--active .clepit-block-toolbar,\n.clepit-block:focus-within .clepit-block-toolbar,\n.clepit-block-toolbar[style*=\"display: flex\"] {\n  display: flex;\n  pointer-events: auto;\n}\n\n@media (hover: hover) {\n  .clepit-block:hover > .clepit-block-toolbar.clepit-block-toolbar--hidden {\n    display: flex !important;\n    pointer-events: auto !important;\n  }\n}\n\n.clepit-block-toolbar-add,\n.clepit-block-toolbar-ops {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  border-radius: var(--clepit-radius-md);\n  background: transparent;\n  color: var(--clepit-text-subtle);\n  cursor: pointer;\n  transition: background-color 120ms ease, color 120ms ease;\n}\n\n.clepit-block-toolbar-ops {\n  cursor: grab;\n  touch-action: none;\n}\n\n.clepit-block-toolbar-add svg,\n.clepit-block-toolbar-ops svg {\n  display: block;\n  width: 18px;\n  height: 18px;\n}\n\n.clepit-block-toolbar-add:hover,\n.clepit-block-toolbar-ops:hover {\n  background: var(--clepit-hover-bg);\n  color: var(--clepit-text-muted);\n}\n\n.clepit-block-toolbar-add:focus-visible,\n.clepit-block-toolbar-ops:focus-visible {\n  outline: 2px solid var(--clepit-focus-ring);\n  outline-offset: 1px;\n}\n\n.clepit-block[data-dragging] {\n  opacity: 0.5;\n}\n\n.clepit-block[data-dragging] .clepit-block-toolbar-ops {\n  cursor: grabbing;\n}\n\n.clepit-drop-line {\n  position: fixed;\n  top: var(--clepit-drop-line-top, 0);\n  left: var(--clepit-drop-line-left, 0);\n  width: var(--clepit-drop-line-width, 0);\n  z-index: 1002;\n  height: 2px;\n  margin-top: -1px;\n  border-radius: 1px;\n  background: var(--clepit-primary);\n  pointer-events: none;\n}\n\n@media (max-width: 768px) {\n  .clepit-block-toolbar-add,\n  .clepit-block-toolbar-ops {\n    width: 44px;\n    height: 44px;\n  }\n}\n\n/* Block toolbar positioning and display classes */\n.clepit-block-toolbar--positioned {\n  position: absolute;\n}\n\n.clepit-block-toolbar--menu-positioned {\n  position: absolute;\n  z-index: 1001;\n}\n\n.clepit-block-toolbar--submenu-positioned {\n  position: absolute;\n  top: 0;\n  left: calc(100% + 4px);\n  z-index: 998;\n}\n\n@supports (anchor-name: --a) {\n  .clepit-code-language-submenu.clepit-block-toolbar--submenu-positioned,\n  .clepit-code-theme-submenu.clepit-block-toolbar--submenu-positioned {\n    position: fixed;\n    position-area: inline-end span-block-end;\n    position-try-fallbacks: flip-inline;\n    inset: auto;\n    margin-inline-start: 4px;\n  }\n}\n\n.clepit-block-toolbar--item-hidden {\n  display: none;\n}\n\n.clepit-block-toolbar--item-visible {\n  display: flex;\n}\n\n.clepit-block-toolbar--separator-hidden {\n  display: none;\n}\n\n.clepit-block-toolbar--separator-visible {\n  display: block;\n}\n\n.clepit-block-toolbar--delete-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.clepit-block-toolbar--delete-enabled {\n  color: var(--clepit-error);\n}\n\n/* The toolbar stays absolutely positioned at every width. It used to go\n * position: static below 768px, which made it a flex item of .clepit-block \u2014\n * and because it is appended after the content it landed to the RIGHT of the\n * text rather than above it, taking a further 60px off an already narrow\n * column. Absolute keeps it inside the gutter the block opens for it. */\n";
 //# sourceMappingURL=css.d.ts.map

package/dist/core/toolbars/block/drag.d.ts

@@ -0,0 +1,3 @@
+export declare const dropIndex: (blocks: DOMRect[], pointerY: number, from: number) => number;
+export declare const bindBlockDrag: (grip: HTMLElement, block: HTMLElement, containerId: string) => void;
+//# sourceMappingURL=drag.d.ts.map

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

@@ -1,3 +1,4 @@
+import { BlockToolType } from '../../../types';
 export declare class BlockToolbar {
     static defaultClassName: string;
     static menuAnchor: string;
@@ -13,6 +14,7 @@ export declare class BlockToolbar {
     private static handleOperationSelect;
     private static showCodeLanguageSubmenu;
     private static showCodeThemeSubmenu;
+    static turnInto(block: HTMLElement | undefined, containerId: string, targetType: BlockToolType): void;
     static show(containerId: string, block: HTMLElement): void;
     static hide(containerId: string): void;
     private static menuHost;

package/dist/core/toolbars/block/menu-keys.d.ts

@@ -0,0 +1,2 @@
+export declare const bindMenuKeys: (keyTarget: HTMLElement, rows: () => HTMLElement[], onEscape: () => void) => void;
+//# sourceMappingURL=menu-keys.d.ts.map

package/dist/core/toolbars/inline/css.d.ts

@@ -1,6 +1,6 @@
-export declare const TOOLBAR_BUTTON_WIDTH = 24;
-export declare const TOOLBAR_BUTTON_HEIGHT = 24;
-export declare const TOOLBAR_PADDING = 8;
+export declare const TOOLBAR_BUTTON_WIDTH = 30;
+export declare const TOOLBAR_BUTTON_HEIGHT = 30;
+export declare const TOOLBAR_PADDING = 4;
 export declare const stylesKey = "clepit-inline-toolbar-styles";
-export declare const style = "\n/* Inline Toolbar */\n.clepit-toolbar {\n  position: absolute;\n  z-index: 1002;\n  background: var(--clepit-toolbar-bg, var(--clepit-bg));\n  border: var(--clepit-toolbar-border, 1px solid var(--clepit-border));\n  border-radius: 8px;\n  padding: 8px;\n  box-shadow: var(--clepit-toolbar-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));\n  backdrop-filter: blur(8px);\n  display: none;\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n  will-change: transform;\n}\n\n.clepit-toolbar--layout {\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n}\n\n.clepit-toolbar--hidden {\n  display: none !important;\n}\n\n.clepit-toolbar--visible {\n  display: flex !important;\n  transform: translateY(0) scale(1) !important;\n}\n\n@keyframes toolbarFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-10px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n.clepit-toolbar-button {\n  width: 24px;\n  height: 24px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--clepit-toolbar-color, var(--clepit-text));\n  font-size: 12px;\n  font-weight: bold;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  position: relative;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  line-height: 1;\n  /* Ensure all content inside buttons inherits the same font size and styling */\n  text-rendering: optimizeLegibility;\n  will-change: transform, background-color, color;\n}\n\n/* Normalize SVG icon sizing in toolbar buttons */\n.clepit-toolbar-button svg {\n  width: 14px;\n  height: 14px;\n  display: block;\n  stroke: currentColor;\n}\n\n.clepit-toolbar-button:hover {\n  background: var(--clepit-toolbar-hover-bg, var(--clepit-selection-bg));\n  color: var(--clepit-toolbar-hover-color, var(--clepit-text));\n  transform: scale(1.05);\n}\n\n.clepit-toolbar-button:active {\n  transform: scale(0.95);\n  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.clepit-toolbar-button.active {\n  background: var(--clepit-toolbar-active-bg, var(--clepit-primary-bg));\n  color: var(--clepit-toolbar-active-color, var(--clepit-primary));\n  font-weight: bold;\n}\n\n/* Ensure consistent base font size for character-based icons */\n.clepit-toolbar-button { font-size: 12px; }\n\n/* Tooltip styles */\n/* Anchored to its own button and shown by :hover / :focus-visible, so no\n * JavaScript measures or centres it. :focus-visible is not decoration: the old\n * mouseenter-only version was invisible to a keyboard user.\n *\n * Guarded by @supports \u2014 anchor positioning is Baseline 2026 at ~91%. Without\n * it the tooltip simply never shows, which is what it already did before this\n * change for anyone not using a mouse. */\n.clepit-toolbar-tooltip {\n  position: absolute;\n  display: none;\n  z-index: 9999;\n  pointer-events: none;\n}\n\n@supports (anchor-name: --a) {\n  .clepit-toolbar-tooltip {\n    position: fixed;\n    position-area: top;\n    margin-block-end: 8px;\n    justify-self: anchor-center;\n    opacity: 0;\n    transform: translateY(8px);\n    transition:\n      opacity 0.15s ease-in-out,\n      transform 0.15s ease-in-out,\n      display 0.15s allow-discrete;\n  }\n\n  .clepit-toolbar-button:hover + .clepit-toolbar-tooltip,\n  .clepit-toolbar-button:focus-visible + .clepit-toolbar-tooltip,\n  .clepit-toolbar-button:focus-visible + .clepit-toolbar-tooltip {\n    display: block;\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  @starting-style {\n    .clepit-toolbar-button:hover + .clepit-toolbar-tooltip,\n    .clepit-toolbar-button:focus-visible + .clepit-toolbar-tooltip {\n      opacity: 0;\n      transform: translateY(8px);\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .clepit-toolbar-tooltip {\n    transition-duration: 0s;\n  }\n}\n\n.clepit-toolbar-tooltip-content {\n  white-space: nowrap;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--clepit-bg);\n  background-color: var(--clepit-text);\n  padding: 6px 10px;\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n  transition: transform 0.2s ease-in-out;\n}\n\n.clepit-toolbar-tooltip-arrow {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-left: -4px;\n  width: 0;\n  height: 0;\n  border-left: 4px solid transparent;\n  border-right: 4px solid transparent;\n  border-top: 4px solid var(--clepit-text);\n}\n\n.clepit-toolbar-tooltip--hidden {\n  display: none;\n  transform: translateY(8px);\n}\n\n.clepit-toolbar-tooltip--visible {\n  display: block;\n  transform: translateY(0);\n}\n\n.clepit-toolbar-tooltip--fade-out {\n  transform: translateY(5px);\n}\n\n/* Toolbar positioning and animation classes */\n.clepit-toolbar--positioned {\n  position: absolute;\n}\n\n.clepit-toolbar--measurement {\n  display: flex;\n  visibility: hidden;\n  opacity: 0;\n  position: absolute;\n  left: -9999px;\n  top: -9999px;\n}\n\n.clepit-toolbar--show-animation {\n  display: flex;\n  visibility: visible;\n  transform: translateY(-10px) scale(0.95);\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.clepit-toolbar--show-animation.clepit-toolbar--visible {\n  transform: translateY(0) scale(1);\n}\n\n.clepit-toolbar--position-animation {\n  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), top 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.clepit-toolbar--hide-animation {\n  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  transform: translateY(-5px) scale(0.98);\n}\n\n/* Rewrite menu \u2014 the sparkle-wand's action list, anchored under the toolbar */\n.clepit-toolbar-rewrite-menu {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  flex-direction: column;\n  min-width: 160px;\n  padding: 4px;\n  border-radius: var(--clepit-radius-sm, 6px);\n  background: var(--clepit-surface, #fff);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);\n  z-index: 2;\n}\n\n.clepit-toolbar-rewrite-item {\n  appearance: none;\n  border: 0;\n  background: transparent;\n  color: var(--clepit-text-primary, inherit);\n  font: inherit;\n  text-align: start;\n  padding: 6px 10px;\n  border-radius: var(--clepit-radius-xs, 4px);\n  cursor: pointer;\n}\n\n.clepit-toolbar-rewrite-item:hover,\n.clepit-toolbar-rewrite-item:focus-visible {\n  background: var(--clepit-surface-hover, rgba(0, 0, 0, 0.06));\n}\n\n/* The wand stays put while a rewrite is in flight, so the toolbar does not\n   reflow under the pointer mid-request. */\n.clepit-toolbar-button.busy {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .clepit-toolbar {\n    flex-wrap: wrap;\n    max-width: 200px;\n  }\n}\n";
+export declare const style = "\n/* Inline Toolbar */\n.clepit-toolbar {\n  position: absolute;\n  z-index: 1002;\n  background: var(--clepit-toolbar-bg, var(--clepit-menu-bg));\n  border: var(--clepit-toolbar-border, 1px solid var(--clepit-border));\n  border-radius: 10px;\n  padding: 4px;\n  box-shadow: var(--clepit-toolbar-shadow, var(--clepit-menu-shadow));\n  display: none;\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n  will-change: transform;\n}\n\n.clepit-toolbar--layout {\n  display: flex;\n  flex-direction: row;\n  gap: 2px;\n  align-items: center;\n}\n\n.clepit-toolbar--hidden {\n  display: none !important;\n}\n\n.clepit-toolbar--visible {\n  display: flex !important;\n  transform: translateY(0) scale(1) !important;\n}\n\n@keyframes toolbarFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-10px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n.clepit-toolbar-button {\n  width: 30px;\n  height: 30px;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: var(--clepit-toolbar-color, var(--clepit-text));\n  font-size: 12px;\n  font-weight: bold;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  position: relative;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  line-height: 1;\n  /* Ensure all content inside buttons inherits the same font size and styling */\n  text-rendering: optimizeLegibility;\n  will-change: transform, background-color, color;\n}\n\n/* Normalize SVG icon sizing in toolbar buttons */\n.clepit-toolbar-button svg {\n  width: 18px;\n  height: 18px;\n  display: block;\n  stroke: currentColor;\n}\n\n.clepit-toolbar-button:hover {\n  background: var(--clepit-toolbar-hover-bg, var(--clepit-hover-bg));\n  color: var(--clepit-toolbar-hover-color, var(--clepit-text));\n}\n\n.clepit-toolbar-button:focus-visible,\n.clepit-toolbar-type:focus-visible,\n.clepit-toolbar-menu-item:focus-visible {\n  outline: 2px solid var(--clepit-focus-ring);\n  outline-offset: 1px;\n}\n\n.clepit-toolbar-button.active,\n.clepit-toolbar-button[aria-pressed='true'] {\n  background: var(--clepit-toolbar-active-bg, var(--clepit-pressed-bg));\n  color: var(--clepit-toolbar-active-color, var(--clepit-primary));\n}\n\n.clepit-toolbar-group {\n  position: relative;\n  display: flex;\n  gap: 2px;\n  align-items: center;\n}\n\n.clepit-toolbar-separator {\n  flex: none;\n  width: 1px;\n  height: 18px;\n  margin: 0 4px;\n  background: var(--clepit-border);\n}\n\n.clepit-toolbar-type {\n  display: inline-flex;\n  gap: 2px;\n  align-items: center;\n  height: 30px;\n  padding: 0 6px;\n  border: 0;\n  border-radius: 6px;\n  background: transparent;\n  color: var(--clepit-text);\n  font: inherit;\n  font-size: 13px;\n  cursor: pointer;\n}\n\n.clepit-toolbar-type:hover,\n.clepit-toolbar-type[aria-expanded='true'] {\n  background: var(--clepit-hover-bg);\n}\n\n.clepit-toolbar-type-chevron svg {\n  display: block;\n  width: 16px;\n  height: 16px;\n  color: var(--clepit-text-subtle);\n}\n\n.clepit-toolbar-menu {\n  position: absolute;\n  top: calc(100% + 8px);\n  left: 0;\n  z-index: 1003;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 200px;\n  padding: 6px;\n  border-radius: var(--clepit-radius-lg);\n  background: var(--clepit-menu-bg);\n  box-shadow: var(--clepit-menu-shadow);\n}\n\n.clepit-toolbar-menu[hidden] {\n  display: none;\n}\n\n.clepit-toolbar-group[data-testid='toolbar-group-more'] .clepit-toolbar-menu {\n  right: 0;\n  left: auto;\n}\n\n.clepit-toolbar-menu-item {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n  min-height: 38px;\n  padding: 8px 10px;\n  border: 0;\n  border-radius: var(--clepit-radius-md);\n  background: transparent;\n  color: var(--clepit-text);\n  font: inherit;\n  font-size: 14px;\n  text-align: left;\n  cursor: pointer;\n}\n\n.clepit-toolbar-menu-item:hover,\n.clepit-toolbar-menu-item[aria-checked='true'] {\n  background: var(--clepit-hover-bg);\n}\n\n.clepit-toolbar-menu-icon {\n  display: inline-flex;\n  color: var(--clepit-text-muted);\n}\n\n.clepit-toolbar-menu-icon svg {\n  display: block;\n  width: 18px;\n  height: 18px;\n}\n\n/* Ensure consistent base font size for character-based icons */\n.clepit-toolbar-button { font-size: 12px; }\n\n/* Tooltip styles */\n/* Anchored to its own button and shown by :hover / :focus-visible, so no\n * JavaScript measures or centres it. :focus-visible is not decoration: the old\n * mouseenter-only version was invisible to a keyboard user.\n *\n * Guarded by @supports \u2014 anchor positioning is Baseline 2026 at ~91%. Without\n * it the tooltip simply never shows, which is what it already did before this\n * change for anyone not using a mouse. */\n.clepit-toolbar-tooltip {\n  position: absolute;\n  display: none;\n  z-index: 9999;\n  pointer-events: none;\n}\n\n@supports (anchor-name: --a) {\n  .clepit-toolbar-tooltip {\n    position: fixed;\n    position-area: top;\n    margin-block-end: 8px;\n    justify-self: anchor-center;\n    opacity: 0;\n    transform: translateY(8px);\n    transition:\n      opacity 0.15s ease-in-out,\n      transform 0.15s ease-in-out,\n      display 0.15s allow-discrete;\n  }\n\n  .clepit-toolbar-button:hover + .clepit-toolbar-tooltip,\n  .clepit-toolbar-button:focus-visible + .clepit-toolbar-tooltip,\n  .clepit-toolbar-button:focus-visible + .clepit-toolbar-tooltip {\n    display: block;\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  @starting-style {\n    .clepit-toolbar-button:hover + .clepit-toolbar-tooltip,\n    .clepit-toolbar-button:focus-visible + .clepit-toolbar-tooltip {\n      opacity: 0;\n      transform: translateY(8px);\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .clepit-toolbar-tooltip {\n    transition-duration: 0s;\n  }\n}\n\n.clepit-toolbar-tooltip-content {\n  white-space: nowrap;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--clepit-inverse-text);\n  background-color: var(--clepit-inverse-surface);\n  padding: 4px 8px;\n  border-radius: var(--clepit-radius-md);\n  transition: transform 0.2s ease-in-out;\n}\n\n.clepit-toolbar-tooltip-arrow {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-left: -4px;\n  width: 0;\n  height: 0;\n  border-left: 4px solid transparent;\n  border-right: 4px solid transparent;\n  border-top: 4px solid var(--clepit-inverse-surface);\n}\n\n.clepit-toolbar-tooltip--hidden {\n  display: none;\n  transform: translateY(8px);\n}\n\n.clepit-toolbar-tooltip--visible {\n  display: block;\n  transform: translateY(0);\n}\n\n.clepit-toolbar-tooltip--fade-out {\n  transform: translateY(5px);\n}\n\n/* Toolbar positioning and animation classes */\n.clepit-toolbar--positioned {\n  position: absolute;\n}\n\n.clepit-toolbar--measurement {\n  display: flex;\n  visibility: hidden;\n  opacity: 0;\n  position: absolute;\n  left: -9999px;\n  top: -9999px;\n}\n\n.clepit-toolbar--show-animation {\n  display: flex;\n  visibility: visible;\n  transform: translateY(-10px) scale(0.95);\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.clepit-toolbar--show-animation.clepit-toolbar--visible {\n  transform: translateY(0) scale(1);\n}\n\n.clepit-toolbar--position-animation {\n  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), top 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.clepit-toolbar--hide-animation {\n  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  transform: translateY(-5px) scale(0.98);\n}\n\n/* Rewrite menu \u2014 the sparkle-wand's action list, anchored under the toolbar */\n.clepit-toolbar-rewrite-menu {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  flex-direction: column;\n  min-width: 160px;\n  padding: 4px;\n  border-radius: var(--clepit-radius-sm, 6px);\n  background: var(--clepit-surface, #fff);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);\n  z-index: 2;\n}\n\n.clepit-toolbar-rewrite-item {\n  appearance: none;\n  border: 0;\n  background: transparent;\n  color: var(--clepit-text-primary, inherit);\n  font: inherit;\n  text-align: start;\n  padding: 6px 10px;\n  border-radius: var(--clepit-radius-xs, 4px);\n  cursor: pointer;\n}\n\n.clepit-toolbar-rewrite-item:hover,\n.clepit-toolbar-rewrite-item:focus-visible {\n  background: var(--clepit-surface-hover, rgba(0, 0, 0, 0.06));\n}\n\n/* The wand stays put while a rewrite is in flight, so the toolbar does not\n   reflow under the pointer mid-request. */\n.clepit-toolbar-button.busy {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .clepit-toolbar {\n    flex-wrap: wrap;\n    max-width: 200px;\n  }\n}\n";
 //# sourceMappingURL=css.d.ts.map

package/dist/core/toolbars/inline/index.d.ts

@@ -22,6 +22,10 @@ export declare class InlineToolbar {
     private static addEventListener;
     static create(containerId: string): void;
     static repaint(containerId: string, range: Range): void;
+    private static buttonGroup;
+    private static toggleMenu;
+    private static typePicker;
+    private static moreGroup;
     /**
      * The sparkle-wand at the end of the toolbar. Opens the rewrite actions for the
      * current selection and writes the host's replacement back in place.
@@ -29,7 +33,8 @@ export declare class InlineToolbar {
      * Painted only when the host supplied `onInlineRewrite` — see EditorConfig.
      */
     static addRewriteButton(containerId: string, range: Range): void;
-    static addButton(containerId: string, tool: InlineTool, range: Range): void;
+    static addButton(containerId: string, tool: InlineTool, range: Range, parent?: HTMLElement): void;
+    private static applyTool;
     private static createTooltip;
     static clearButtons(containerId: string): void;
     static show(containerId: string, x: number, y: number): void;

package/dist/index.d.ts

@@ -15,8 +15,8 @@ export { parseOpenApi } from './tools/block/openapi/spec';
 export { chipsInHtml, IssueChip, readChipMarkup, refreshChipsInHtml } from './tools/inline/issue';
 export { ISSUE_ENGLISH, ISSUE_TOOL_NAMES, issueLabel, issueToolName } from './tools/inline/issue/labels';
 export { classifyIssueUrl } from './tools/inline/issue/providers';
-export type { ALERT_VARIANTS, AlertData, AlertVariant, AudioData, Block, BlockClassNames, BlockMargins, BlockStyles, BlockTune, CodeData, CodeVariant, ControlLabel, CSSProperties, CSSValue, DelimiterData, DelimiterVariant, DialogLabel, EditorAPI, EditorClassNames, EditorConfig, EditorData, EditorStyles, EmbedAction, EmbedData, EmbedFile, EmbedGist, EmbedGistFile, EmbedLabel, EmbedProvider, EmbedReason, EmbedResolution, GlanceData, GlanceRow, HeaderData, HeaderLevel, ImageData, InlineRewriteAction, InlineToolType as InlineTool, InputClassNames, InputConfig, InputStyles, IssueAction, IssueCards, IssueCategory, IssueChipParts, IssueLabel, IssueReason, IssueSnapshot, IssuesData, IssueTarget, IssueTool, ListData, ListType, OpenApiData, OpenApiFilter, OutputComponent, OutputConfig, ParagraphData, PasteEmbeds, QuoteData, RendererConfig, TableData, ToolType as BlockType, UploadFunction, UploadNotice, VideoData, } from './types';
-export { BLOCK_TOOLS, CONTROL_LABELS, DIALOG_LABELS, EMBED_LABELS, INLINE_REWRITE_ACTIONS, INLINE_TOOLS, ISSUE_LABELS, ISSUE_TOOLS } from './types';
+export type { ALERT_VARIANTS, AlertData, AlertVariant, AudioData, Block, BlockClassNames, BlockMargins, BlockStyles, BlockTune, CodeData, CodeVariant, ControlLabel, CSSProperties, CSSValue, DelimiterData, DelimiterVariant, DialogLabel, EditorAPI, EditorClassNames, EditorConfig, EditorData, EditorStyles, EmbedAction, EmbedData, EmbedFile, EmbedGist, EmbedGistFile, EmbedLabel, EmbedProvider, EmbedReason, EmbedResolution, GlanceData, GlanceRow, HeaderData, HeaderLevel, ImageData, InlineRewriteAction, InlineToolbarLabel, InlineToolType as InlineTool, InputClassNames, InputConfig, InputStyles, IssueAction, IssueCards, IssueCategory, IssueChipParts, IssueLabel, IssueReason, IssueSnapshot, IssuesData, IssueTarget, IssueTool, ListData, ListType, OpenApiData, OpenApiFilter, OutputComponent, OutputConfig, ParagraphData, PasteEmbeds, QuoteData, RendererConfig, TableData, ToolType as BlockType, UploadFunction, UploadNotice, VideoData, } from './types';
+export { BLOCK_TOOLS, CONTROL_LABELS, DIALOG_LABELS, EMBED_LABELS, INLINE_REWRITE_ACTIONS, INLINE_TOOLBAR_LABELS, INLINE_TOOLS, ISSUE_LABELS, ISSUE_TOOLS } from './types';
 export { detectLanguage } from './utils/detect-language';
 export { sanitizeHtmlWithoutDom } from './utils/sanitize-html-nodom';
 //# sourceMappingURL=index.d.ts.map