@clepit/core 0.7.0-beta.452 → 0.7.0-beta.468
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.
|
@@ -2,5 +2,5 @@ export declare const TOOLBAR_BUTTON_WIDTH = 30;
|
|
|
2
2
|
export declare const TOOLBAR_BUTTON_HEIGHT = 30;
|
|
3
3
|
export declare const TOOLBAR_PADDING = 4;
|
|
4
4
|
export declare const stylesKey = "clepit-inline-toolbar-styles";
|
|
5
|
-
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:
|
|
5
|
+
export declare const style = "\n/* Inline Toolbar */\n.clepit-toolbar {\n position: absolute;\n left: 0;\n top: 0;\n translate: var(--clepit-toolbar-x, 0) var(--clepit-toolbar-y, 0);\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: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), translate 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";
|
|
6
6
|
//# sourceMappingURL=css.d.ts.map
|
|
@@ -38,6 +38,7 @@ export declare class InlineToolbar {
|
|
|
38
38
|
private static createTooltip;
|
|
39
39
|
static clearButtons(containerId: string): void;
|
|
40
40
|
static show(containerId: string, x: number, y: number): void;
|
|
41
|
+
private static offset;
|
|
41
42
|
static hide(containerId: string): void;
|
|
42
43
|
private static cancelPendingHide;
|
|
43
44
|
private static getElementFromContainerId;
|