@clepit/core 0.7.0-beta.474 → 0.7.0-beta.481

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: 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";
+export declare const style = "\n.clepit-action-bar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 40px;\n  border-bottom: 1px solid var(--clepit-border);\n}\n\n.clepit-action-bar-group {\n  display: flex;\n  align-self: stretch;\n  gap: 4px;\n}\n\n.clepit-action-bar-button {\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: -1px;\n  padding: 8px 12px 10px;\n  border: 0;\n  border-bottom: 2px solid transparent;\n  background: transparent;\n  color: var(--clepit-text-muted);\n  font-family: inherit;\n  font-size: 13.5px;\n  font-weight: 500;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: color 0.15s ease, border-color 0.15s ease;\n}\n\n.clepit-action-bar-button:hover {\n  color: var(--clepit-text);\n}\n\n.clepit-action-bar-button[aria-selected=\"true\"] {\n  color: var(--clepit-text);\n  border-bottom-color: var(--clepit-primary);\n}\n\n.clepit-action-bar-button:focus-visible {\n  outline: 2px solid var(--clepit-focus-ring);\n  outline-offset: -2px;\n}\n\n.clepit-view-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  margin-inline-start: auto;\n}\n\n.clepit-view-action-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: 0;\n  border-radius: var(--clepit-radius-md);\n  background: transparent;\n  color: var(--clepit-text-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n\n.clepit-view-action-button svg {\n  width: 18px;\n  height: 18px;\n}\n\n.clepit-view-action-button:hover {\n  background: var(--clepit-hover-bg);\n  color: var(--clepit-text);\n}\n\n.clepit-view-action-button:active {\n  background: var(--clepit-pressed-bg);\n}\n\n.clepit-view-action-button:focus-visible {\n  outline: 2px solid var(--clepit-focus-ring);\n  outline-offset: 1px;\n}\n\n.clepit-view-action-button--copy-feedback {\n  background-color: var(--clepit-success);\n  color: var(--clepit-bg);\n}\n\n.clepit-action-bar ~ .clepit-editor-content {\n  border-top: 0;\n  border-start-start-radius: 0;\n  border-start-end-radius: 0;\n}\n\n@media (pointer: coarse) {\n  .clepit-action-bar-button {\n    min-height: 44px;\n  }\n\n  .clepit-view-action-button {\n    width: 44px;\n    height: 44px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .clepit-action-bar-button,\n  .clepit-view-action-button {\n    transition: none;\n  }\n}\n";
 //# sourceMappingURL=css.d.ts.map

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

@@ -9,6 +9,7 @@ export declare class ActionBar {
     private static createButtonGroup;
     static getCurrentView(containerId: string): EditorView | null;
     private static updateButtonStates;
+    private static handleTabKeys;
     private static handleViewChange;
     private static handleCopyJson;
     private static handleClearEditor;

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--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";
+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  box-sizing: border-box;\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

@@ -40,6 +40,7 @@ export type ThemeTokens = Partial<{
     focusRing: string;
     inverseSurface: string;
     inverseText: string;
+    onPrimary: string;
 }>;
 export declare const defaultLightTokens: Required<ThemeTokens>;
 export declare const defaultDarkTokens: Required<ThemeTokens>;