@clepit/core 0.7.0-beta.442 → 0.7.0-beta.444

package/dist/tools/block/code/output.d.ts

@@ -11,7 +11,10 @@ export declare class CodeOutput {
      * carries.
      *
      * Every variant pane is drawn, not only the active one, so the tabs have
-     * something to switch between the moment a browser picks the block up.
+     * something to switch between the moment a browser picks the block up. Only
+     * the active pane is coloured: the rest carry their text and language and are
+     * coloured the first time they are shown, which keeps a reference with many
+     * samples per operation from drawing every language's spans up front.
      */
     static draw(data: CodeData, backing?: Backing, context?: DrawContext): ClepitElement | null;
     static render(data: CodeData, _config?: OutputConfig, styles?: BlockStyles['code'], classNames?: BlockClassNames['code'], containerId?: string): HTMLElement;
@@ -22,6 +25,7 @@ export declare class CodeOutput {
      * can activate on mount and release on unmount.
      */
     static activate(container: HTMLElement, data: CodeData): () => void;
+    static reveal(root: HTMLElement): void;
     /**
      * Like `activate`, but for embedded samples whose block data is not at
      * hand — an openapi reference draws its snippets through `draw` and only

package/dist/tools/block/header/css.d.ts

@@ -1,5 +1,5 @@
 export declare const inputStylesKey = "clepit-header-input-styles";
 export declare const inputStyle = "\n/* Header block styles */\n.clepit-header {\n  outline: none;\n  margin: 0;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0;\n  margin-inline-end: 0;\n  padding: 0 20px;\n}\n\n.clepit-block[data-tool=\"header\"] .clepit-block-content {\n  font-weight: bold;\n  margin: 16px 0 8px 0;\n}\n\n.clepit-block[data-tool=\"header\"] .clepit-block-content h1 {\n  font-size: 32px;\n  margin: 0;\n  color: inherit;\n}\n\n.clepit-block[data-tool=\"header\"] .clepit-block-content h2 {\n  font-size: 24px;\n  margin: 0;\n  color: inherit;\n}\n\n.clepit-block[data-tool=\"header\"] .clepit-block-content h3 {\n  font-size: 20px;\n  margin: 0;\n  color: inherit;\n}\n\n.clepit-block[data-tool=\"header\"] .clepit-block-content h4 {\n  font-size: 18px;\n  margin: 0;\n  color: inherit;\n}\n\n.clepit-block[data-tool=\"header\"] .clepit-block-content h5 {\n  font-size: 16px;\n  margin: 0;\n  color: inherit;\n}\n\n.clepit-block[data-tool=\"header\"] .clepit-block-content h6 {\n  font-size: 14px;\n  margin: 0;\n  color: inherit;\n}\n\n/* Header placeholder styles */\n.clepit-header[data-placeholder]:empty::before {\n  content: attr(data-placeholder);\n  color: var(--clepit-text-subtle);\n  pointer-events: none;\n  font-style: italic;\n}\n\n/* Header link styles */\n.clepit-header a {\n  color: var(--clepit-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n\n.clepit-header a:hover {\n  color: var(--clepit-primary-hover);\n  text-decoration: none;\n}\n\n/* Header inline code styling */\n.clepit-header code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n}\n\n/* Header marker brush effect */\n.clepit-header mark {\n  background: none;\n  position: relative;\n  color: inherit;\n  display: inline-block;\n  z-index: 0; /* create stacking context so ::before sits behind text, not page */\n  white-space: pre-wrap; /* ensure leading/trailing spaces inside mark render */\n}\n\n.clepit-header mark::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0.15em;\n  height: 1.25em;\n  transform: rotate(-0.4deg);\n  background: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M0,8 C5,2 15,1 25,3 35,5 45,2 55,4 65,6 75,5 85,7 95,9 100,8 100,8 100,14 95,18 85,17 75,16 65,19 55,17 45,15 35,18 25,16 15,14 5,15 0,12 Z' fill='%23FFE047'/></svg>\") no-repeat center / 100% 100%;\n  z-index: -1; /* behind text but within mark's stacking context */\n}\n\n";
 export declare const outputStylesKey = "clepit-header-output-styles";
-export declare const outputStyle = "\n/* Output header styles */\n.clepit-output-header {\n  margin: 0 0 1rem 0;\n  font-weight: 600;\n  color: var(--clepit-text);\n}\n\nh1.clepit-output-header {\n  font-size: 2.5rem;\n  line-height: 1.2;\n}\n\nh2.clepit-output-header {\n  font-size: 2rem;\n  line-height: 1.3;\n}\n\nh3.clepit-output-header {\n  font-size: 1.75rem;\n  line-height: 1.4;\n}\n\nh4.clepit-output-header {\n  font-size: 1.5rem;\n  line-height: 1.4;\n}\n\nh5.clepit-output-header {\n  font-size: 1.25rem;\n  line-height: 1.4;\n}\n\nh6.clepit-output-header {\n  font-size: 1rem;\n  line-height: 1.4;\n}\n\n/* Output header inline code styling */\n.clepit-output-header code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n}\n\n/* Output header marker brush effect */\n.clepit-output-header mark {\n  background: none;\n  position: relative;\n  color: inherit;\n  display: inline-block;\n  z-index: 0;\n  white-space: pre-wrap;\n}\n\n.clepit-output-header mark::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0.15em;\n  height: 1.25em;\n  transform: rotate(-0.4deg);\n  background: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M0,8 C5,2 15,1 25,3 35,5 45,2 55,4 65,6 75,5 85,7 95,9 100,8 100,8 100,14 95,18 85,17 75,16 65,19 55,17 45,15 35,18 25,16 15,14 5,15 0,12 Z' fill='%23FFE047'/></svg>\") no-repeat center / 100% 100%;\n  z-index: -1;\n}\n\n/* Output header link styles */\n.clepit-output-header a {\n  color: var(--clepit-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n\n.clepit-output-header a:hover {\n  color: var(--clepit-primary-hover);\n  text-decoration: none;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  h1.clepit-output-header {\n    font-size: 2rem;\n  }\n\n  h2.clepit-output-header {\n    font-size: 1.75rem;\n  }\n\n  h3.clepit-output-header {\n    font-size: 1.5rem;\n  }\n}\n";
+export declare const outputStyle = "\n/* Output header styles */\n.clepit-output-header {\n  margin: 0 0 1rem 0;\n  font-weight: 600;\n  color: var(--clepit-text);\n}\n\nh1.clepit-output-header {\n  font-size: 2.5rem;\n  line-height: 1.2;\n}\n\nh2.clepit-output-header {\n  font-size: 2rem;\n  line-height: 1.3;\n}\n\nh3.clepit-output-header {\n  font-size: 1.75rem;\n  line-height: 1.4;\n}\n\nh4.clepit-output-header {\n  font-size: 1.5rem;\n  line-height: 1.4;\n}\n\nh5.clepit-output-header {\n  font-size: 1.25rem;\n  line-height: 1.4;\n}\n\nh6.clepit-output-header {\n  font-size: 1rem;\n  line-height: 1.4;\n}\n\n/* Output header inline code styling */\n.clepit-output-header code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n  overflow-wrap: anywhere;\n}\n\n/* Output header marker brush effect */\n.clepit-output-header mark {\n  background: none;\n  position: relative;\n  color: inherit;\n  display: inline-block;\n  z-index: 0;\n  white-space: pre-wrap;\n}\n\n.clepit-output-header mark::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0.15em;\n  height: 1.25em;\n  transform: rotate(-0.4deg);\n  background: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M0,8 C5,2 15,1 25,3 35,5 45,2 55,4 65,6 75,5 85,7 95,9 100,8 100,8 100,14 95,18 85,17 75,16 65,19 55,17 45,15 35,18 25,16 15,14 5,15 0,12 Z' fill='%23FFE047'/></svg>\") no-repeat center / 100% 100%;\n  z-index: -1;\n}\n\n/* Output header link styles */\n.clepit-output-header a {\n  color: var(--clepit-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n\n.clepit-output-header a:hover {\n  color: var(--clepit-primary-hover);\n  text-decoration: none;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  h1.clepit-output-header {\n    font-size: 2rem;\n  }\n\n  h2.clepit-output-header {\n    font-size: 1.75rem;\n  }\n\n  h3.clepit-output-header {\n    font-size: 1.5rem;\n  }\n}\n";
 //# sourceMappingURL=css.d.ts.map

package/dist/tools/block/list/css.d.ts

@@ -1,5 +1,5 @@
 export declare const inputStylesKey = "clepit-list-input-styles";
 export declare const inputStyle = "\n/* List block styles */\n.clepit-list {\n  margin: 0;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0;\n  margin-inline-end: 0;\n  padding: 0 16px;\n}\n\n.clepit-list-item {\n  margin: 0;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0;\n  margin-inline-end: 0;\n  padding: 0;\n}\n\n.clepit-block[data-tool=\"list\"] .clepit-block-content {\n  padding-left: 40px;\n}\n\n.clepit-block[data-tool=\"list\"] .clepit-block-content ul,\n.clepit-block[data-tool=\"list\"] .clepit-block-content ol {\n  margin: 0;\n  padding-left: 20px;\n}\n\n.clepit-block[data-tool=\"list\"] .clepit-block-content li {\n  margin: 4px 0;\n}\n\n/* List item placeholder styles */\n.clepit-list-item[data-placeholder]:empty::before {\n  content: attr(data-placeholder);\n  color: var(--clepit-text-subtle);\n  pointer-events: none;\n  font-style: italic;\n}\n\n/* List item link styles */\n.clepit-list-item a {\n  color: var(--clepit-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n\n.clepit-list-item a:hover {\n  color: var(--clepit-primary-hover);\n  text-decoration: none;\n}\n\n/* List item inline code styling */\n.clepit-list-item code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n}\n\n/* List item marker brush effect */\n.clepit-list-item mark {\n  background: none;\n  position: relative;\n  color: inherit;\n  display: inline-block;\n  z-index: 0; /* create stacking context so ::before sits behind text, not page */\n  white-space: pre-wrap; /* ensure leading/trailing spaces inside mark render */\n}\n\n.clepit-list-item mark::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0.15em;\n  height: 1.25em;\n  transform: rotate(-0.4deg);\n  background: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M0,8 C5,2 15,1 25,3 35,5 45,2 55,4 65,6 75,5 85,7 95,9 100,8 100,8 100,14 95,18 85,17 75,16 65,19 55,17 45,15 35,18 25,16 15,14 5,15 0,12 Z' fill='%23FFE047'/></svg>\") no-repeat center / 100% 100%;\n  z-index: -1; /* behind text but within mark's stacking context */\n}\n\n";
 export declare const outputStylesKey = "clepit-list-output-styles";
-export declare const outputStyle = "\n/* Output list styles */\n.clepit-output-list {\n  margin: 0 0 1rem 0;\n  padding-left: 2rem;\n}\n\n.clepit-output-list-item {\n  margin: 0.5rem 0;\n  line-height: 1.6;\n}\n\n/* Output list link styles */\n.clepit-output-list a {\n  color: var(--clepit-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n\n.clepit-output-list a:hover {\n  color: var(--clepit-primary-hover);\n  text-decoration: none;\n}\n\n/* Output list inline code styling */\n.clepit-output-list li code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n}\n\n/* Output list marker brush effect */\n.clepit-output-list li mark {\n  background: none;\n  position: relative;\n  color: inherit;\n  display: inline-block;\n  z-index: 0;\n  white-space: pre-wrap;\n}\n\n.clepit-output-list li mark::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0.15em;\n  height: 1.25em;\n  transform: rotate(-0.4deg);\n  background: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M0,8 C5,2 15,1 25,3 35,5 45,2 55,4 65,6 75,5 85,7 95,9 100,8 100,8 100,14 95,18 85,17 75,16 65,19 55,17 45,15 35,18 25,16 15,14 5,15 0,12 Z' fill='%23FFE047'/></svg>\") no-repeat center / 100% 100%;\n  z-index: -1;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .clepit-output-list {\n    padding-left: 1.5rem;\n  }\n}\n";
+export declare const outputStyle = "\n/* Output list styles */\n.clepit-output-list {\n  margin: 0 0 1rem 0;\n  padding-left: 2rem;\n}\n\n.clepit-output-list-item {\n  margin: 0.5rem 0;\n  line-height: 1.6;\n}\n\n/* Output list link styles */\n.clepit-output-list a {\n  color: var(--clepit-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n\n.clepit-output-list a:hover {\n  color: var(--clepit-primary-hover);\n  text-decoration: none;\n}\n\n/* Output list inline code styling */\n.clepit-output-list li code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n  overflow-wrap: anywhere;\n}\n\n/* Output list marker brush effect */\n.clepit-output-list li mark {\n  background: none;\n  position: relative;\n  color: inherit;\n  display: inline-block;\n  z-index: 0;\n  white-space: pre-wrap;\n}\n\n.clepit-output-list li mark::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0.15em;\n  height: 1.25em;\n  transform: rotate(-0.4deg);\n  background: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M0,8 C5,2 15,1 25,3 35,5 45,2 55,4 65,6 75,5 85,7 95,9 100,8 100,8 100,14 95,18 85,17 75,16 65,19 55,17 45,15 35,18 25,16 15,14 5,15 0,12 Z' fill='%23FFE047'/></svg>\") no-repeat center / 100% 100%;\n  z-index: -1;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .clepit-output-list {\n    padding-left: 1.5rem;\n  }\n}\n";
 //# sourceMappingURL=css.d.ts.map

package/dist/tools/block/paragraph/css.d.ts

@@ -1,5 +1,5 @@
 export declare const inputStylesKey = "clepit-paragraph-input-styles";
 export declare const inputStyle = "\n/* Paragraph block styles */\n.clepit-paragraph {\n  outline: none;\n  margin: 0;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0;\n  margin-inline-end: 0;\n  padding: 0 20px;\n}\n\n.clepit-block[data-tool=\"paragraph\"] .clepit-block-content {\n  font-size: 16px;\n  line-height: 1.6;\n}\n\n/* Paragraph placeholder styles */\n.clepit-paragraph[data-placeholder]:empty::before {\n  content: attr(data-placeholder);\n  color: var(--clepit-text-subtle);\n  pointer-events: none;\n  font-style: italic;\n}\n\n/* Paragraph link styles */\n.clepit-paragraph a {\n  color: var(--clepit-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n\n.clepit-paragraph a:hover {\n  color: var(--clepit-primary-hover);\n  text-decoration: none;\n}\n\n/* Paragraph inline code styling */\n.clepit-paragraph code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n}\n\n/* Paragraph marker brush effect */\n.clepit-paragraph mark {\n  background: none;\n  position: relative;\n  color: inherit;\n  display: inline-block;\n  z-index: 0; /* create stacking context so ::before sits behind text, not page */\n  white-space: pre-wrap; /* ensure leading/trailing spaces inside mark render */\n}\n\n.clepit-paragraph mark::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0.15em;\n  height: 1.25em;\n  transform: rotate(-0.4deg);\n  background: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M0,8 C5,2 15,1 25,3 35,5 45,2 55,4 65,6 75,5 85,7 95,9 100,8 100,8 100,14 95,18 85,17 75,16 65,19 55,17 45,15 35,18 25,16 15,14 5,15 0,12 Z' fill='%23FFE047'/></svg>\") no-repeat center / 100% 100%;\n  z-index: -1; /* behind text but within mark's stacking context */\n}\n\n";
 export declare const outputStylesKey = "clepit-paragraph-output-styles";
-export declare const outputStyle = "\n/* Output paragraph styles */\n.clepit-output-paragraph {\n  margin: 0 0 1rem 0;\n  line-height: 1.6;\n  color: var(--clepit-text);\n}\n\n/* Output paragraph inline code styling */\n.clepit-output-paragraph code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n}\n\n/* Output paragraph marker brush effect */\n.clepit-output-paragraph mark {\n  background: none;\n  position: relative;\n  color: inherit;\n  display: inline-block;\n  z-index: 0;\n  white-space: pre-wrap;\n}\n\n.clepit-output-paragraph mark::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0.15em;\n  height: 1.25em;\n  transform: rotate(-0.4deg);\n  background: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M0,8 C5,2 15,1 25,3 35,5 45,2 55,4 65,6 75,5 85,7 95,9 100,8 100,8 100,14 95,18 85,17 75,16 65,19 55,17 45,15 35,18 25,16 15,14 5,15 0,12 Z' fill='%23FFE047'/></svg>\") no-repeat center / 100% 100%;\n  z-index: -1;\n}\n\n/* Output paragraph link styles */\n.clepit-output-paragraph a {\n  color: var(--clepit-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n\n.clepit-output-paragraph a:hover {\n  color: var(--clepit-primary-hover);\n  text-decoration: none;\n}\n";
+export declare const outputStyle = "\n/* Output paragraph styles */\n.clepit-output-paragraph {\n  margin: 0 0 1rem 0;\n  line-height: 1.6;\n  color: var(--clepit-text);\n}\n\n/* Output paragraph inline code styling */\n.clepit-output-paragraph code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n  overflow-wrap: anywhere;\n}\n\n/* Output paragraph marker brush effect */\n.clepit-output-paragraph mark {\n  background: none;\n  position: relative;\n  color: inherit;\n  display: inline-block;\n  z-index: 0;\n  white-space: pre-wrap;\n}\n\n.clepit-output-paragraph mark::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0.15em;\n  height: 1.25em;\n  transform: rotate(-0.4deg);\n  background: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M0,8 C5,2 15,1 25,3 35,5 45,2 55,4 65,6 75,5 85,7 95,9 100,8 100,8 100,14 95,18 85,17 75,16 65,19 55,17 45,15 35,18 25,16 15,14 5,15 0,12 Z' fill='%23FFE047'/></svg>\") no-repeat center / 100% 100%;\n  z-index: -1;\n}\n\n/* Output paragraph link styles */\n.clepit-output-paragraph a {\n  color: var(--clepit-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n\n.clepit-output-paragraph a:hover {\n  color: var(--clepit-primary-hover);\n  text-decoration: none;\n}\n";
 //# sourceMappingURL=css.d.ts.map

package/dist/tools/block/quote/css.d.ts

@@ -1,5 +1,5 @@
 export declare const inputStylesKey = "clepit-quote-input-styles";
 export declare const inputStyle: string;
 export declare const outputStylesKey = "clepit-quote-output-styles";
-export declare const outputStyle = "\n/* Output quote styles */\n.clepit-output-quote-container {\n  background: var(--clepit-surface);\n  border: 1px solid var(--clepit-border);\n  border-radius: var(--clepit-radius-md);\n  padding: 12px 14px;\n  margin: 20px 0;\n  position: relative;\n}\n\n.clepit-output-quote-author {\n  color: var(--clepit-text-muted);\n  font-size: 0.9em;\n  font-style: normal;\n  font-family: inherit;\n  text-align: right;\n  margin-top: 10px;\n}\n\n.clepit-output-quote-divider {\n  height: 1px;\n  margin: 15px 0;\n  background: linear-gradient(to right, transparent, var(--clepit-border-subtle), transparent);\n}\n\n.clepit-output-quote-text {\n  font-size: 1.2em;\n  line-height: 1.6;\n  font-family: cursive, serif;\n  font-style: italic;\n  margin-bottom: 15px;\n}\n\n.clepit-output-quote-content {\n  /* Content styling handled by parent */\n}\n\n/* Output quote link styles */\n.clepit-output-quote a {\n  color: var(--clepit-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n\n.clepit-output-quote a:hover {\n  color: var(--clepit-primary-hover);\n  text-decoration: none;\n}\n\n/* Output quote inline code styling */\n.clepit-output-quote code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n}\n\n.clepit-output-quote cite code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n}\n\n/* Output quote marker brush effect */\n.clepit-output-quote mark {\n  background: none;\n  position: relative;\n  color: inherit;\n  display: inline-block;\n  z-index: 0;\n  white-space: pre-wrap;\n}\n\n.clepit-output-quote mark::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0.15em;\n  height: 1.25em;\n  transform: rotate(-0.4deg);\n  background: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M0,8 C5,2 15,1 25,3 35,5 45,2 55,4 65,6 75,5 85,7 95,9 100,8 100,8 100,14 95,18 85,17 75,16 65,19 55,17 45,15 35,18 25,16 15,14 5,15 0,12 Z' fill='%23FFE047'/></svg>\") no-repeat center / 100% 100%;\n  z-index: -1;\n}\n\n.clepit-output-quote cite mark {\n  background: none;\n  position: relative;\n  color: inherit;\n  display: inline-block;\n  z-index: 0;\n  white-space: pre-wrap;\n}\n\n.clepit-output-quote cite mark::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0.15em;\n  height: 1.25em;\n  transform: rotate(-0.4deg);\n  background: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M0,8 C5,2 15,1 25,3 35,5 45,2 55,4 65,6 75,5 85,7 95,9 100,8 100,8 100,14 95,18 85,17 75,16 65,19 55,17 45,15 35,18 25,16 15,14 5,15 0,12 Z' fill='%23FFE047'/></svg>\") no-repeat center / 100% 100%;\n  z-index: -1;\n}\n";
+export declare const outputStyle = "\n/* Output quote styles */\n.clepit-output-quote-container {\n  background: var(--clepit-surface);\n  border: 1px solid var(--clepit-border);\n  border-radius: var(--clepit-radius-md);\n  padding: 12px 14px;\n  margin: 20px 0;\n  position: relative;\n}\n\n.clepit-output-quote-author {\n  color: var(--clepit-text-muted);\n  font-size: 0.9em;\n  font-style: normal;\n  font-family: inherit;\n  text-align: right;\n  margin-top: 10px;\n}\n\n.clepit-output-quote-divider {\n  height: 1px;\n  margin: 15px 0;\n  background: linear-gradient(to right, transparent, var(--clepit-border-subtle), transparent);\n}\n\n.clepit-output-quote-text {\n  font-size: 1.2em;\n  line-height: 1.6;\n  font-family: cursive, serif;\n  font-style: italic;\n  margin-bottom: 15px;\n}\n\n.clepit-output-quote-content {\n  /* Content styling handled by parent */\n}\n\n/* Output quote link styles */\n.clepit-output-quote a {\n  color: var(--clepit-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n\n.clepit-output-quote a:hover {\n  color: var(--clepit-primary-hover);\n  text-decoration: none;\n}\n\n/* Output quote inline code styling */\n.clepit-output-quote code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n  overflow-wrap: anywhere;\n}\n\n.clepit-output-quote cite code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n  overflow-wrap: anywhere;\n}\n\n/* Output quote marker brush effect */\n.clepit-output-quote mark {\n  background: none;\n  position: relative;\n  color: inherit;\n  display: inline-block;\n  z-index: 0;\n  white-space: pre-wrap;\n}\n\n.clepit-output-quote mark::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0.15em;\n  height: 1.25em;\n  transform: rotate(-0.4deg);\n  background: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M0,8 C5,2 15,1 25,3 35,5 45,2 55,4 65,6 75,5 85,7 95,9 100,8 100,8 100,14 95,18 85,17 75,16 65,19 55,17 45,15 35,18 25,16 15,14 5,15 0,12 Z' fill='%23FFE047'/></svg>\") no-repeat center / 100% 100%;\n  z-index: -1;\n}\n\n.clepit-output-quote cite mark {\n  background: none;\n  position: relative;\n  color: inherit;\n  display: inline-block;\n  z-index: 0;\n  white-space: pre-wrap;\n}\n\n.clepit-output-quote cite mark::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0.15em;\n  height: 1.25em;\n  transform: rotate(-0.4deg);\n  background: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M0,8 C5,2 15,1 25,3 35,5 45,2 55,4 65,6 75,5 85,7 95,9 100,8 100,8 100,14 95,18 85,17 75,16 65,19 55,17 45,15 35,18 25,16 15,14 5,15 0,12 Z' fill='%23FFE047'/></svg>\") no-repeat center / 100% 100%;\n  z-index: -1;\n}\n";
 //# sourceMappingURL=css.d.ts.map

package/dist/tools/inline/code/css.d.ts

@@ -1,3 +1,3 @@
 export declare const stylesKey = "clepit-inline-code-styles";
-export declare const style = "\n/* Inline code styling when <code> is within editable text */\n.clepit-paragraph code,\n.clepit-header code,\n.clepit-list-item code,\n.clepit-quote-text code,\n.clepit-quote-caption code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n}\n\n/* Output inline code styling */\n.clepit-output-paragraph code,\n.clepit-output-header code,\n.clepit-output-list li code,\n.clepit-output-quote code,\n.clepit-output-quote cite code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n}\n\n/* Toolbar button code styling */\n.clepit-toolbar-button strong,\n.clepit-toolbar-button em,\n.clepit-toolbar-button u,\n.clepit-toolbar-button code,\n.clepit-toolbar-button mark {\n  font-size: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  text-decoration: inherit;\n  background: transparent;\n  padding: 0;\n  border-radius: 0;\n  font-family: inherit;\n}\n";
+export declare const style = "\n/* Inline code styling when <code> is within editable text */\n.clepit-paragraph code,\n.clepit-header code,\n.clepit-list-item code,\n.clepit-quote-text code,\n.clepit-quote-caption code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n  overflow-wrap: anywhere;\n}\n\n/* Output inline code styling */\n.clepit-output-paragraph code,\n.clepit-output-header code,\n.clepit-output-list li code,\n.clepit-output-quote code,\n.clepit-output-quote cite code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n  overflow-wrap: anywhere;\n}\n\n/* Toolbar button code styling */\n.clepit-toolbar-button strong,\n.clepit-toolbar-button em,\n.clepit-toolbar-button u,\n.clepit-toolbar-button code,\n.clepit-toolbar-button mark {\n  font-size: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  text-decoration: inherit;\n  background: transparent;\n  padding: 0;\n  border-radius: 0;\n  font-family: inherit;\n}\n";
 //# sourceMappingURL=css.d.ts.map

package/package.json

@@ -53,5 +53,5 @@
   },
   "sideEffects": false,
   "types": "dist/index.d.ts",
-  "version": "0.7.0-beta.442"
+  "version": "0.7.0-beta.444"
 }