@clepit/core 0.7.0 → 0.8.0-beta.547

package/dist/tools/block/alert/index.d.ts

@@ -6,7 +6,6 @@ export declare const AlertTool: {
     readonly input: typeof AlertInput;
     label: string;
     readonly output: typeof AlertOutput;
-    shortcut: string;
     testId: string;
     type: ToolType;
 };

package/dist/tools/block/audio/index.d.ts

@@ -6,7 +6,7 @@ export declare const AudioTool: {
     readonly input: typeof AudioInput;
     label: string;
     readonly output: typeof AudioOutput;
-    shortcut: string;
+    section: "media";
     testId: string;
     type: ToolType;
 };

package/dist/tools/block/checklist/index.d.ts

@@ -6,7 +6,6 @@ export declare const ChecklistTool: {
     readonly input: typeof ChecklistInput;
     label: string;
     readonly output: typeof ChecklistOutput;
-    shortcut: string;
     testId: string;
     type: ToolType;
 };

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

@@ -1,5 +1,5 @@
 export declare const inputStylesKey = "clepit-code-input-styles";
 export declare const inputStyle: string;
 export declare const outputStylesKey = "clepit-code-output-styles";
-export declare const outputStyle = "\n/* Output Code Block */\n/* No margin of its own \u2014 every consumer already governs the gap around this\n * container (page rhythm via the block wrapper's margin-block, or a flex\n * container's gap inside the openapi block). A margin here just adds a second,\n * inconsistent gap on top of whichever one the consumer already applies. */\n.clepit-output-code-container {\n  border: 1px solid var(--clepit-code-border);\n  border-radius: var(--clepit-radius-md);\n  overflow: hidden;\n  background: var(--clepit-code-bg);\n  margin: 0;\n}\n\n.clepit-output-code-header {\n  background: var(--clepit-code-bg);\n  padding: 8px 34px;\n  border-bottom: 1px solid var(--clepit-code-border);\n  font-size: 12px;\n  color: var(--clepit-text-muted);\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n/* Output header \u2014 theme-agnostic; tokens handle light/dark automatically */\n.clepit-output-code-header {\n  background: var(--clepit-code-bg);\n  color: var(--clepit-text-muted);\n  border-bottom-color: var(--clepit-code-border);\n  --clepit-svg-stroke-color: var(--clepit-text-muted);\n  --clepit-btn-hover-bg: var(--clepit-block-highlight-bg);\n}\n\n/* Output code variant tabs */\n.clepit-output-code-tabs {\n  display: flex;\n  align-items: stretch;\n  gap: 4px;\n  margin: -8px 0 -8px -18px;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n\n.clepit-output-code-tabs::-webkit-scrollbar {\n  display: none;\n}\n\n.clepit-output-code-tab {\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  color: var(--clepit-text-muted);\n  cursor: pointer;\n  font: inherit;\n  padding: 8px 10px;\n  transition: color 0.2s ease, border-color 0.2s ease;\n  white-space: nowrap;\n}\n\n.clepit-output-code-tab:hover {\n  color: var(--clepit-text);\n}\n\n.clepit-output-code-tab[aria-selected=\"true\"] {\n  border-bottom-color: var(--clepit-primary);\n  color: var(--clepit-primary);\n}\n\n.clepit-output-code-tab:focus-visible {\n  outline: 2px solid var(--clepit-primary);\n  outline-offset: -2px;\n}\n\n.clepit-output-code-editor {\n  overflow-y: auto;\n  max-height: 60vh;\n  position: relative;\n  border: none;\n  border-radius: 0;\n}\n\n/* The output panes: one pre per variant, the inactive ones carrying a hidden attribute.\n * Colour comes from the generated theme stylesheet, keyed on the container's\n * data-theme, so a published page keeps its palette with nothing running. */\n.clepit-output-code-pane {\n  margin: 0;\n  padding: 12px 34px;\n  max-height: 60vh;\n  overflow-y: auto;\n  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  tab-size: 2;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n/* Code Output */\n.clepit-output-code {\n  margin: 1rem 0;\n  background-color: var(--clepit-code-bg);\n  border: 1px solid var(--clepit-code-border);\n  border-radius: var(--clepit-radius-md);\n  overflow: hidden;\n}\n\n.clepit-output-code code {\n  display: block;\n  padding: 1rem;\n  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  color: var(--clepit-code-text);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n/* Output code copy button */\n.clepit-output-code-copy-btn {\n  margin-left: auto;\n  width: 24px;\n  height: 24px;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  border-radius: 50%;\n  background: transparent;\n  transition: all 0.2s ease;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n\n.clepit-output-code-copy-btn {\n  color: var(--clepit-text-muted);\n}\n\n.clepit-output-code-copy-btn:hover {\n  background: var(--clepit-block-highlight-bg);\n  color: var(--clepit-primary);\n}\n\n.clepit-output-code-copy-btn:hover .clepit-copy-icon {\n  stroke: var(--clepit-primary);\n}\n\n.clepit-output-code-copy-btn:active {\n  transform: scale(0.95);\n}\n\n.clepit-copy-icon,\n.clepit-check-icon {\n  width: 20px;\n  height: 20px;\n  stroke: var(--clepit-svg-stroke-color);\n  stroke-width: 2;\n  fill: none;\n  display: block;\n}\n\n/* Code output button animation styles */\n.clepit-output-code-copy-btn--animating {\n  color: var(--clepit-success);\n  transform: scale(1.1);\n}\n\n.clepit-output-code-copy-btn--normal {\n  color: var(--clepit-svg-stroke-color);\n  transform: scale(1);\n}\n";
+export declare const outputStyle = "\n/* Output Code Block */\n/* No margin of its own \u2014 every consumer already governs the gap around this\n * container (page rhythm via the block wrapper's margin-block, or a flex\n * container's gap inside the openapi block). A margin here just adds a second,\n * inconsistent gap on top of whichever one the consumer already applies. */\n.clepit-output-code-container {\n  border: 1px solid var(--clepit-code-border);\n  border-radius: var(--clepit-radius-md);\n  overflow: hidden;\n  background: var(--clepit-code-bg);\n  margin: 0;\n}\n\n.clepit-output-code-header {\n  background: var(--clepit-code-bg);\n  padding: 8px 34px;\n  border-bottom: 1px solid var(--clepit-code-border);\n  font-size: 12px;\n  color: var(--clepit-text-muted);\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n/* Output header \u2014 theme-agnostic; tokens handle light/dark automatically */\n.clepit-output-code-header {\n  background: var(--clepit-code-bg);\n  color: var(--clepit-text-muted);\n  border-bottom-color: var(--clepit-code-border);\n  --clepit-svg-stroke-color: var(--clepit-text-muted);\n  --clepit-btn-hover-bg: var(--clepit-block-highlight-bg);\n}\n\n/* Output code variant tabs */\n.clepit-output-code-tabs {\n  display: flex;\n  align-items: stretch;\n  gap: 4px;\n  margin: -8px 0 -8px -18px;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n\n.clepit-output-code-tabs::-webkit-scrollbar {\n  display: none;\n}\n\n.clepit-output-code-tab {\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  color: var(--clepit-text-muted);\n  cursor: pointer;\n  font: inherit;\n  padding: 8px 10px;\n  transition: color 0.2s ease, border-color 0.2s ease;\n  white-space: nowrap;\n}\n\n.clepit-output-code-tab:hover {\n  color: var(--clepit-text);\n}\n\n.clepit-output-code-tab[aria-selected=\"true\"] {\n  border-bottom-color: var(--clepit-primary);\n  color: var(--clepit-primary);\n}\n\n.clepit-output-code-tab:focus-visible {\n  outline: 2px solid var(--clepit-primary);\n  outline-offset: -2px;\n}\n\n.clepit-output-code-editor {\n  overflow-y: auto;\n  max-height: 60vh;\n  position: relative;\n  border: none;\n  border-radius: 0;\n}\n\n/* The output panes: one pre per variant, the inactive ones carrying a hidden attribute.\n * Colour comes from the generated theme stylesheet, keyed on the container's\n * data-theme, so a published page keeps its palette with nothing running. */\n.clepit-output-code-pane {\n  margin: 0;\n  padding: 12px 34px;\n  max-height: 60vh;\n  overflow-y: auto;\n  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  tab-size: 2;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n/* Code Output */\n.clepit-output-code {\n  margin: 1rem 0;\n  background-color: var(--clepit-code-bg);\n  border: 1px solid var(--clepit-code-border);\n  border-radius: var(--clepit-radius-md);\n  overflow: hidden;\n}\n\n.clepit-output-code code {\n  display: block;\n  padding: 1rem;\n  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  color: var(--clepit-code-text);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n/* Output code copy button */\n.clepit-output-code-copy-btn {\n  margin-left: auto;\n  width: 24px;\n  height: 24px;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  border-radius: 50%;\n  background: transparent;\n  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n\n.clepit-output-code-copy-btn {\n  color: var(--clepit-text-muted);\n}\n\n.clepit-output-code-copy-btn:hover {\n  background: var(--clepit-block-highlight-bg);\n  color: var(--clepit-primary);\n}\n\n.clepit-output-code-copy-btn:hover .clepit-copy-icon {\n  stroke: var(--clepit-primary);\n}\n\n.clepit-output-code-copy-btn:active {\n  transform: scale(0.95);\n}\n\n.clepit-copy-icon,\n.clepit-check-icon {\n  width: 20px;\n  height: 20px;\n  stroke: var(--clepit-svg-stroke-color);\n  stroke-width: 2;\n  fill: none;\n  display: block;\n}\n\n/* Code output button animation styles */\n.clepit-output-code-copy-btn--animating {\n  color: var(--clepit-success);\n  transform: scale(1.1);\n}\n\n.clepit-output-code-copy-btn--normal {\n  color: var(--clepit-svg-stroke-color);\n  transform: scale(1);\n}\n";
 //# sourceMappingURL=css.d.ts.map

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

@@ -6,7 +6,7 @@ export declare const CodeTool: {
     readonly input: typeof CodeInput;
     label: string;
     readonly output: typeof CodeOutput;
-    shortcut: string;
+    section: "media";
     testId: string;
     type: ToolType;
 };

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/collapsible/index.d.ts

@@ -6,7 +6,6 @@ export declare const CollapsibleTool: {
     readonly input: typeof CollapsibleInput;
     label: string;
     readonly output: typeof CollapsibleOutput;
-    shortcut: string;
     testId: string;
     type: ToolType;
 };

package/dist/tools/block/collection/index.d.ts

@@ -6,7 +6,7 @@ export declare const CollectionTool: {
     readonly input: typeof CollectionInput;
     label: string;
     readonly output: typeof CollectionOutput;
-    shortcut: string;
+    section: "media";
     testId: string;
     type: ToolType;
 };

package/dist/tools/block/columns/index.d.ts

@@ -6,7 +6,6 @@ export declare const ColumnsTool: {
     readonly input: typeof ColumnsInput;
     label: string;
     readonly output: typeof ColumnsOutput;
-    shortcut: string;
     testId: string;
     type: ToolType;
 };

package/dist/tools/block/date/index.d.ts

@@ -6,7 +6,6 @@ export declare const DateTool: {
     readonly input: typeof DateInput;
     label: string;
     readonly output: typeof DateOutput;
-    shortcut: string;
     testId: string;
     type: ToolType;
 };

package/dist/tools/block/delimiter/index.d.ts

@@ -6,7 +6,6 @@ export declare const DelimiterTool: {
     readonly input: typeof DelimiterInput;
     label: string;
     readonly output: typeof DelimiterOutput;
-    shortcut: string;
     testId: string;
     type: ToolType;
 };

package/dist/tools/block/doc-card/index.d.ts

@@ -6,7 +6,7 @@ export declare const DocCardTool: {
     readonly input: typeof DocCardInput;
     label: string;
     readonly output: typeof DocCardOutput;
-    shortcut: string;
+    section: "media";
     testId: string;
     type: ToolType;
 };

package/dist/tools/block/embed/index.d.ts

@@ -6,7 +6,7 @@ export declare const EmbedTool: {
     readonly input: typeof EmbedInput;
     label: string;
     readonly output: typeof EmbedOutput;
-    shortcut: string;
+    section: "media";
     testId: string;
     type: ToolType;
 };

package/dist/tools/block/file/index.d.ts

@@ -6,7 +6,7 @@ export declare const FileTool: {
     readonly input: typeof FileInput;
     label: string;
     readonly output: typeof FileOutput;
-    shortcut: string;
+    section: "media";
     testId: string;
     type: ToolType;
 };

package/dist/tools/block/glance/index.d.ts

@@ -6,7 +6,6 @@ export declare const GlanceTool: {
     readonly input: typeof GlanceInput;
     label: string;
     readonly output: typeof GlanceOutput;
-    shortcut: string;
     testId: string;
     type: ToolType;
 };

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/image/index.d.ts

@@ -6,7 +6,7 @@ export declare const ImageTool: {
     readonly input: typeof ImageInput;
     label: string;
     readonly output: typeof ImageOutput;
-    shortcut: string;
+    section: "media";
     testId: string;
     type: ToolType;
 };

package/dist/tools/block/issues/index.d.ts

@@ -6,7 +6,7 @@ export declare const IssuesTool: {
     readonly input: typeof IssuesInput;
     label: string;
     readonly output: typeof IssuesOutput;
-    shortcut: string;
+    section: "media";
     testId: string;
     type: ToolType;
 };

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/list/index.d.ts

@@ -6,7 +6,6 @@ export declare const ListTool: {
     readonly input: typeof ListInput;
     label: string;
     readonly output: typeof ListOutput;
-    shortcut: string;
     testId: string;
     type: ToolType;
 };

package/dist/tools/block/openapi/index.d.ts

@@ -6,7 +6,7 @@ export declare const OpenApiTool: {
     readonly input: typeof OpenApiInput;
     label: string;
     readonly output: typeof OpenApiOutput;
-    shortcut: string;
+    section: "media";
     testId: string;
     type: ToolType;
 };

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/block/quote/index.d.ts

@@ -6,7 +6,6 @@ export declare const QuoteTool: {
     readonly input: typeof QuoteInput;
     label: string;
     readonly output: typeof QuoteOutput;
-    shortcut: string;
     testId: string;
     type: ToolType;
 };

package/dist/tools/block/sketch/index.d.ts

@@ -6,7 +6,7 @@ export declare const SketchTool: {
     readonly input: typeof SketchInput;
     label: string;
     readonly output: typeof SketchOutput;
-    shortcut: string;
+    section: "media";
     testId: string;
     type: ToolType;
 };

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

@@ -1,5 +1,5 @@
 export declare const inputStylesKey = "clepit-table-input-styles";
 export declare const inputStyle: string;
 export declare const outputStylesKey = "clepit-table-output-styles";
-export declare const outputStyle = "\n/* Output table styles */\n.clepit-output-table-container {\n  margin: 1rem 0;\n  overflow-x: auto;\n}\n\n.clepit-output-table {\n  width: 100%;\n  border-collapse: collapse;\n  border: 0;\n  overflow: hidden;\n  background: var(--clepit-bg);\n}\n\n/* House style: rows carry no horizontal dividers and no column rules. Rows are\n * told apart by zebra striping, which is what does that job instead \u2014 removing\n * the rules is not a licence to remove the banding too. */\n/* These four rules were assigned from JavaScript, one element at a time, which\n * is a browser call inside a render path. In a stylesheet they cost nothing to\n * a page that draws without a browser, and a caller's own inline style still\n * wins over them exactly as it did before. */\n.clepit-output-table-wrapper {\n  overflow: hidden;\n  width: 100%;\n  border: 1px solid var(--clepit-border);\n  border-radius: var(--clepit-radius-md);\n  margin-bottom: 1rem;\n}\n\n.clepit-output-table-scroller {\n  overflow-x: auto;\n}\n\n.clepit-output-table {\n  table-layout: auto;\n  margin-top: 0;\n  margin-bottom: 0;\n  border-radius: 0;\n}\n\n.clepit-output-table th,\n.clepit-output-table td {\n  padding: 10px 12px;\n  text-align: left;\n  min-width: 120px;\n  max-width: 400px;\n}\n\n.clepit-output-table th {\n  background: var(--clepit-surface);\n  border-bottom: 1px solid var(--clepit-border);\n  color: var(--clepit-text);\n  font-weight: 600;\n}\n\n.clepit-output-table tbody tr:nth-child(odd) {\n  background: var(--clepit-bg);\n}\n\n.clepit-output-table tbody tr:nth-child(even) {\n  background: var(--clepit-surface);\n}\n\n/* No hover state: a rendered table is display, not a control. A row that\n * changes colour under the pointer reads as clickable when it is not. */\n\n/* Table Output Caption */\n.clepit-output-table-caption {\n  margin-top: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--clepit-text-muted);\n  font-style: italic;\n  text-align: center;\n}\n\n/* Make footer cell neutral so caption styles are visible */\n.clepit-output-table tfoot td,\n.clepit-output-table tfoot .clepit-output-table-caption-cell {\n  padding: 0;\n  border: 0;\n  background: transparent;\n}\n\n.clepit-output-table-download-btn {\n  margin-left: auto;\n  width: 24px;\n  height: 24px;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  border-radius: 50%;\n  background: transparent;\n  transition: all 0.2s ease;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n\n.clepit-output-table-download-btn:hover {\n  background: var(--clepit-bg);\n}\n\n.clepit-output-table-download-btn:hover .clepit-download-icon {\n  stroke: var(--clepit-primary);\n}\n\n.clepit-output-table-download-btn:active {\n  transform: scale(0.95);\n}\n\n.clepit-download-icon {\n  width: 20px;\n  height: 20px;\n  stroke: var(--clepit-text-muted);\n  transition: stroke 0.2s ease;\n}\n\n.clepit-output-table-footer-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  background: var(--clepit-surface);\n  border-top: 1px solid var(--clepit-border);\n}\n";
+export declare const outputStyle = "\n/* Output table styles */\n.clepit-output-table-container {\n  margin: 1rem 0;\n  overflow-x: auto;\n}\n\n.clepit-output-table {\n  width: 100%;\n  border-collapse: collapse;\n  border: 0;\n  overflow: hidden;\n  background: var(--clepit-bg);\n}\n\n/* House style: rows carry no horizontal dividers and no column rules. Rows are\n * told apart by zebra striping, which is what does that job instead \u2014 removing\n * the rules is not a licence to remove the banding too. */\n/* These four rules were assigned from JavaScript, one element at a time, which\n * is a browser call inside a render path. In a stylesheet they cost nothing to\n * a page that draws without a browser, and a caller's own inline style still\n * wins over them exactly as it did before. */\n.clepit-output-table-wrapper {\n  overflow: hidden;\n  width: 100%;\n  border: 1px solid var(--clepit-border);\n  border-radius: var(--clepit-radius-md);\n  margin-bottom: 1rem;\n}\n\n.clepit-output-table-scroller {\n  overflow-x: auto;\n}\n\n.clepit-output-table {\n  table-layout: auto;\n  margin-top: 0;\n  margin-bottom: 0;\n  border-radius: 0;\n}\n\n.clepit-output-table th,\n.clepit-output-table td {\n  padding: 10px 12px;\n  text-align: left;\n  min-width: 120px;\n  max-width: 400px;\n}\n\n.clepit-output-table th {\n  background: var(--clepit-surface);\n  border-bottom: 1px solid var(--clepit-border);\n  color: var(--clepit-text);\n  font-weight: 600;\n}\n\n.clepit-output-table tbody tr:nth-child(odd) {\n  background: var(--clepit-bg);\n}\n\n.clepit-output-table tbody tr:nth-child(even) {\n  background: var(--clepit-surface);\n}\n\n/* No hover state: a rendered table is display, not a control. A row that\n * changes colour under the pointer reads as clickable when it is not. */\n\n/* Table Output Caption */\n.clepit-output-table-caption {\n  margin-top: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--clepit-text-muted);\n  font-style: italic;\n  text-align: center;\n}\n\n/* Make footer cell neutral so caption styles are visible */\n.clepit-output-table tfoot td,\n.clepit-output-table tfoot .clepit-output-table-caption-cell {\n  padding: 0;\n  border: 0;\n  background: transparent;\n}\n\n.clepit-output-table-download-btn {\n  margin-left: auto;\n  width: 24px;\n  height: 24px;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  border-radius: 50%;\n  background: transparent;\n  transition: background-color 0.2s ease, transform 0.2s ease;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n\n.clepit-output-table-download-btn:hover {\n  background: var(--clepit-bg);\n}\n\n.clepit-output-table-download-btn:hover .clepit-download-icon {\n  stroke: var(--clepit-primary);\n}\n\n.clepit-output-table-download-btn:active {\n  transform: scale(0.95);\n}\n\n.clepit-download-icon {\n  width: 20px;\n  height: 20px;\n  stroke: var(--clepit-text-muted);\n  transition: stroke 0.2s ease;\n}\n\n.clepit-output-table-footer-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  background: var(--clepit-surface);\n  border-top: 1px solid var(--clepit-border);\n}\n";
 //# sourceMappingURL=css.d.ts.map

package/dist/tools/block/table/index.d.ts

@@ -6,7 +6,7 @@ export declare const TableTool: {
     readonly input: typeof TableInput;
     label: string;
     readonly output: typeof TableOutput;
-    shortcut: string;
+    section: "media";
     testId: string;
     type: ToolType;
 };

package/dist/tools/block/toc/index.d.ts

@@ -6,7 +6,6 @@ export declare const TocTool: {
     readonly input: typeof TocInput;
     label: string;
     readonly output: typeof TocOutput;
-    shortcut: string;
     testId: string;
     type: ToolType;
 };

package/dist/tools/block/typeset/index.d.ts

@@ -6,7 +6,7 @@ export declare const LatexTool: {
     readonly input: typeof LatexInput;
     label: string;
     readonly output: typeof LatexOutput;
-    shortcut: string;
+    section: "media";
     testId: string;
     type: ToolType;
 };
@@ -15,7 +15,7 @@ export declare const MermaidTool: {
     readonly input: typeof MermaidInput;
     label: string;
     readonly output: typeof MermaidOutput;
-    shortcut: string;
+    section: "media";
     testId: string;
     type: ToolType;
 };

package/dist/tools/block/updates/index.d.ts

@@ -6,7 +6,7 @@ export declare const UpdatesTool: {
     readonly input: typeof UpdatesInput;
     label: string;
     readonly output: typeof UpdatesOutput;
-    shortcut: string;
+    section: "media";
     testId: string;
     type: ToolType;
 };

package/dist/tools/block/video/index.d.ts

@@ -6,7 +6,7 @@ export declare const VideoTool: {
     readonly input: typeof VideoInput;
     label: string;
     readonly output: typeof VideoOutput;
-    shortcut: string;
+    section: "media";
     testId: string;
     type: ToolType;
 };

package/dist/tools/index.d.ts

@@ -1,3 +1,5 @@
-import { Tool } from '../types';
+import { Tool, ToolSection } from '../types';
+export declare const toolSection: (tool: Tool) => ToolSection;
+export declare const uniqueShortcuts: (tools: Tool[]) => Set<string>;
 export declare const blockTools: Tool[];
 //# sourceMappingURL=index.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/dist/tools/inline/link/dialog.d.ts

@@ -2,7 +2,10 @@ import { DialogLabel, EditorClassNames, EditorStyles } from '../../../types';
 export interface LinkDialogOptions {
     text: string;
     url: string;
+    isLinked: boolean;
+    anchor?: DOMRect;
     onConfirm: (text: string, url: string) => void;
+    onRemove: () => void;
     onCancel: () => void;
     styles?: EditorStyles['dialogs'];
     classNames?: EditorClassNames['dialogs'];
@@ -10,22 +13,18 @@ export interface LinkDialogOptions {
 }
 export declare class LinkDialog {
     private static isOpen;
-    private overlay;
-    private dialog;
-    private textInput;
+    private card;
     private urlInput;
     private options;
     constructor(options: LinkDialogOptions);
     show(): void;
     hide(): void;
     private word;
-    private createDialog;
-    private createInputGroup;
-    private createButtonGroup;
-    private bindEvents;
-    private handleKeyDown;
+    private createCard;
+    private applyUrl;
+    private dismiss;
     private handleInputKeyDown;
-    private focusFirstInput;
+    private handleToggle;
     private applyStyles;
     private applyClassNames;
     destroy(): void;

package/dist/tools/inline/link/index.d.ts

@@ -4,6 +4,7 @@ export declare class LinkInput {
     static icon: string;
     static shortcut: string;
     static apply(range: Range, classNames: EditorClassNames['dialogs'], styles: EditorStyles['dialogs'], labels?: Partial<Record<DialogLabel, string>>): void;
+    private static announce;
     static remove(range: Range): void;
     private static findLinkElement;
     static isActive(range: Range): boolean;

package/dist/tools/inline/marker/index.d.ts

@@ -2,7 +2,6 @@ import { BlockClassNames, BlockStyles } from '../../../types';
 export declare class MarkerInput {
     static label: string;
     static icon: string;
-    static shortcut: string;
     static apply(range: Range, classNames: BlockClassNames['marker'], styles: BlockStyles['marker']): void;
     static remove(range: Range): void;
     private static cleanupSpaces;

package/dist/tools/inline/status/dialog.d.ts

@@ -12,6 +12,7 @@ export type StatusDialogOptions = {
 };
 export declare class StatusDialog {
     private static isOpen;
+    private static count;
     private overlay;
     private dialog;
     private textInput;

package/dist/tools/inline/strikethrough/index.d.ts

@@ -1,7 +1,6 @@
 export declare class StrikethroughInput {
     static label: string;
     static icon: string;
-    static shortcut: string;
     static apply(range: Range): void;
     static remove(range: Range): void;
     static isActive(range: Range): boolean;

package/dist/tools/inline/tooltip/dialog.d.ts

@@ -31,6 +31,7 @@ export type TooltipDialogOptions = {
     };
 };
 export declare class TooltipDialog {
+    private static count;
     private overlay;
     private dialog;
     private inputText;

package/dist/tools/inline/tooltip/index.d.ts

@@ -10,7 +10,6 @@ type BlockStylesAndClassNames = {
 export declare class TooltipInput {
     static label: string;
     static icon: string;
-    static shortcut: string;
     static apply(range: Range, editorStylesAndClassNames: EditorStylesAndClassNames, blockStylesAndClassNames: BlockStylesAndClassNames, labels?: Partial<Record<DialogLabel, string>>): void;
     static remove(range: Range): void;
     static isActive(range: Range): boolean;

package/dist/types.d.ts

@@ -69,10 +69,12 @@ export type HeaderLevel = (typeof HEADER_LEVELS)[number];
 export type InlineToolType = (typeof INLINE_TOOLS)[number];
 export type BlockToolType = (typeof BLOCK_TOOLS)[number];
 export type ToolType = BlockToolType | InlineToolType;
+export type ToolSection = 'basic' | 'media';
 export type Tool = {
     icon: string;
     label: string;
-    shortcut: string;
+    section?: ToolSection;
+    shortcut?: string;
     testId: string;
     type: ToolType;
     input: typeof AlertInput | typeof CollapsibleInput | typeof CollectionInput | typeof EmbedInput | typeof SketchInput | typeof LatexInput | typeof MermaidInput | typeof ColumnsInput | typeof DateInput | typeof DocCardInput | typeof FileInput | typeof IssuesInput | typeof TocInput | typeof UpdatesInput | typeof GlanceInput | typeof DelimiterInput | typeof ListInput | typeof OpenApiInput | typeof HeaderInput | typeof QuoteInput | typeof CodeInput | typeof TableInput | typeof ImageInput | typeof AudioInput | typeof VideoInput | typeof ParagraphInput | typeof ChecklistInput;
@@ -1011,6 +1013,7 @@ export type EditorConfig = {
     inlineRewriteTooltip?: string;
     blockToolLabels?: Partial<Record<BlockToolType, string>>;
     blockToolbarLabels?: Partial<Record<BlockToolbarLabel, string>>;
+    inlineToolbarLabels?: Partial<Record<InlineToolbarLabel, string>>;
     controlLabels?: Partial<Record<ControlLabel, string>>;
     dialogLabels?: Partial<Record<DialogLabel, string>>;
     resolveLink?: (url: string) => Promise<Partial<EmbedData>>;
@@ -1029,13 +1032,15 @@ export type EditorConfig = {
 };
 export declare const BLOCK_TOOLBAR_OPERATIONS: readonly ["convert", "moveUp", "moveDown", "delete"];
 export type BlockToolbarOperation = (typeof BLOCK_TOOLBAR_OPERATIONS)[number];
-export declare const BLOCK_MENU_LABELS: readonly ["searchBlocks", "searchOperations", "searchConvertOptions", "searchLanguages", "searchThemes", "noBlockTypesFound", "noOperationsFound", "noConvertOptionsFound", "alignLeft", "alignCenter", "alignRight", "codeLanguage", "codeTheme", "headingH1", "headingH2", "headingH3", "headingH4", "headingH5", "headingH6", "listUnordered", "listOrdered", "variantInfo", "variantWarning", "variantError", "variantSuccess", "variantPlain", "delimiterLine", "delimiterStars", "embedShowLive", "embedShowCard", "embedShowLink", "embedCopyLink", "embedShowChip", "alertTextHint", "checklistItemHint", "codeHint", "collapsibleTitleHint", "glanceLabelHint", "glanceValueHint", "headerHint", "listItemHint", "mediaCaptionHint", "openApiSourceHint", "quoteAuthorHint", "quoteBodyHint", "tableCaptionHint", "tableCellHint", "tableHeaderHint", "tableInsertAbove", "tableInsertBelow", "tableInsertLeft", "tableInsertRight", "tableMoveLeft", "tableMoveRight", "tableRowActions", "tableColumnActions", "diagramTitleHint", "formulaTitleHint", "imageDropTitle", "imageDropAction", "imageDropFormats", "imageUploading", "imageUploadFailed", "imageInvalidType"];
+export declare const BLOCK_MENU_LABELS: readonly ["addBlock", "blockActions", "searchBlocks", "searchOperations", "searchConvertOptions", "searchLanguages", "searchThemes", "sectionBasic", "sectionMedia", "noBlockTypesFound", "noOperationsFound", "noConvertOptionsFound", "deleteLastBlock", "alignLeft", "alignCenter", "alignRight", "codeLanguage", "codeTheme", "headingH1", "headingH2", "headingH3", "headingH4", "headingH5", "headingH6", "listUnordered", "listOrdered", "variantInfo", "variantWarning", "variantError", "variantSuccess", "variantPlain", "delimiterLine", "delimiterStars", "embedShowLive", "embedShowCard", "embedShowLink", "embedCopyLink", "embedShowChip", "alertTextHint", "checklistItemHint", "codeHint", "collapsibleTitleHint", "glanceLabelHint", "glanceValueHint", "headerHint", "listItemHint", "mediaCaptionHint", "openApiSourceHint", "quoteAuthorHint", "quoteBodyHint", "tableCaptionHint", "tableCellHint", "tableHeaderHint", "tableInsertAbove", "tableInsertBelow", "tableInsertLeft", "tableInsertRight", "tableMoveLeft", "tableMoveRight", "tableRowActions", "tableColumnActions", "diagramTitleHint", "formulaTitleHint", "imageDropTitle", "imageDropAction", "imageDropFormats", "imageUploading", "imageUploadFailed", "imageInvalidType"];
 export type BlockMenuLabel = (typeof BLOCK_MENU_LABELS)[number];
-export declare const CONTROL_LABELS: readonly ["editView", "previewView", "jsonView", "copyJson", "downloadJson", "clearEditor"];
+export declare const CONTROL_LABELS: readonly ["editView", "previewView", "jsonView", "copyJson", "downloadJson", "clearEditor", "viewSwitcher"];
 export type ControlLabel = (typeof CONTROL_LABELS)[number];
-export declare const DIALOG_LABELS: readonly ["insertLink", "insertTooltip", "inlineStatus", "textField", "urlField", "tooltipField", "statusLabelField", "statusVariantField", "urlPlaceholder", "linkTextPlaceholder", "textPlaceholder", "tooltipPlaceholder", "statusLabelPlaceholder", "cancel", "apply", "statusInfo", "statusSuccess", "statusWarning", "statusError", "statusPlain"];
+export declare const DIALOG_LABELS: readonly ["insertLink", "insertTooltip", "inlineStatus", "textField", "urlField", "tooltipField", "statusLabelField", "statusVariantField", "urlPlaceholder", "textPlaceholder", "tooltipPlaceholder", "statusLabelPlaceholder", "cancel", "apply", "removeLink", "statusInfo", "statusSuccess", "statusWarning", "statusError", "statusPlain"];
 export type DialogLabel = (typeof DIALOG_LABELS)[number];
 export type BlockToolbarLabel = BlockToolbarOperation | BlockMenuLabel;
+export declare const INLINE_TOOLBAR_LABELS: readonly ["formatText", "textType", "text", "more", "bold", "italic", "underline", "strikethrough", "inlineCode", "link", "highlight", "status", "tooltip"];
+export type InlineToolbarLabel = (typeof INLINE_TOOLBAR_LABELS)[number];
 export declare const INLINE_REWRITE_ACTIONS: readonly ["improve", "shorten", "lengthen", "simplify", "fix_grammar"];
 export type InlineRewriteAction = (typeof INLINE_REWRITE_ACTIONS)[number];
 export type RendererConfig = {

package/dist/utils/dialogs/css.d.ts

@@ -1,3 +1,3 @@
 export declare const stylesKey = "clepit-dialogs-styles";
-export declare const style = "\n/* Dialog Overlay */\n/* A native <dialog>. showModal() puts it in the top layer and paints a real\n * ::backdrop, so the full-screen scrim, the z-index and the manual centring are\n * the browser's job now. The non-modal branch below keeps the old flex overlay\n * for a DOM without showModal, where the element is an ordinary block. */\n.clepit-dialog-overlay {\n  border: none;\n  padding: 0;\n  background: transparent;\n  max-width: none;\n  max-height: none;\n}\n\n.clepit-dialog-overlay[open] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.clepit-dialog-overlay::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(2px);\n}\n\n/* Fallback: no showModal, so the element is not in the top layer and paints no\n * backdrop of its own. */\n.clepit-dialog-overlay:not([open]) {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  align-items: center;\n  justify-content: center;\n  z-index: 10000;\n  backdrop-filter: blur(2px);\n}\n\n/* Dialog Container */\n.clepit-dialog {\n  background: var(--clepit-bg);\n  border-radius: 8px;\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);\n  padding: 24px;\n  min-width: 400px;\n  max-width: 500px;\n  max-height: 80vh;\n  overflow-y: auto;\n  position: relative;\n  transform: scale(0.95);\n  opacity: 0;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.clepit-dialog--hidden {\n  transform: scale(0.95);\n  opacity: 0;\n}\n\n.clepit-dialog:not(.clepit-dialog--hidden) {\n  transform: scale(1);\n  opacity: 1;\n}\n\n/* Dialog Title */\n.clepit-dialog-title {\n  margin: 0 0 20px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--clepit-text);\n  text-align: center;\n}\n\n/* Dialog Group */\n.clepit-dialog-group {\n  margin-bottom: 16px;\n}\n\n/* Dialog Label */\n.clepit-dialog-label {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--clepit-text);\n}\n\n/* Dialog Input */\n.clepit-dialog-input {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid var(--clepit-border);\n  border-radius: 6px;\n  font-size: 14px;\n  color: var(--clepit-text);\n  background: var(--clepit-bg);\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  box-sizing: border-box;\n}\n\n.clepit-dialog-input:focus {\n  outline: none;\n  border-color: var(--clepit-primary);\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.clepit-dialog-input::placeholder {\n  color: var(--clepit-text-subtle);\n}\n\n/* Dialog Buttons */\n.clepit-dialog-buttons {\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n  margin-top: 24px;\n}\n\n/* Dialog Button */\n.clepit-dialog-button {\n  padding: 10px 20px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  min-width: 80px;\n}\n\n.clepit-dialog-button--cancel {\n  background: var(--clepit-surface);\n  color: var(--clepit-text);\n  border: 1px solid var(--clepit-border);\n}\n\n.clepit-dialog-button--cancel:hover {\n  background: var(--clepit-border);\n  border-color: var(--clepit-text-subtle);\n}\n\n.clepit-dialog-button--save {\n  background: var(--clepit-primary);\n  color: white;\n}\n\n.clepit-dialog-button--save:hover {\n  background: var(--clepit-primary);\n}\n\n.clepit-dialog-button--save:disabled {\n  background: var(--clepit-text-subtle);\n  cursor: not-allowed;\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n  .clepit-dialog {\n    min-width: 320px;\n    max-width: 90vw;\n    margin: 20px;\n  }\n\n  .clepit-dialog-buttons {\n    flex-direction: column;\n  }\n\n  .clepit-dialog-button {\n    width: 100%;\n  }\n}\n";
+export declare const style = "\n.clepit-dialog-overlay {\n  border: none;\n  padding: 0;\n  background: transparent;\n  max-width: none;\n  max-height: none;\n}\n\n.clepit-dialog-overlay[open] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.clepit-dialog-overlay::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n.clepit-dialog-overlay:not([open]) {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  align-items: center;\n  justify-content: center;\n  z-index: 10000;\n}\n\n.clepit-dialog {\n  position: relative;\n  box-sizing: border-box;\n  width: min(440px, calc(100vw - 32px));\n  max-height: 80vh;\n  overflow-y: auto;\n  padding: 24px;\n  border: 1px solid var(--clepit-border);\n  border-radius: var(--clepit-radius-lg);\n  background: var(--clepit-menu-bg);\n  box-shadow: var(--clepit-menu-shadow);\n  color: var(--clepit-text);\n  font-family: inherit;\n  transform: scale(0.98);\n  opacity: 0;\n  transition: transform 0.15s ease-out, opacity 0.15s ease-out;\n}\n\n.clepit-dialog:not(.clepit-dialog--hidden) {\n  transform: scale(1);\n  opacity: 1;\n}\n\n.clepit-dialog--hidden {\n  transform: scale(0.98);\n  opacity: 0;\n}\n\n.clepit-dialog-title {\n  margin: 0 0 16px;\n  font-size: 17px;\n  font-weight: 600;\n  line-height: 1.4;\n  color: var(--clepit-text);\n}\n\n.clepit-dialog-group {\n  margin-bottom: 16px;\n}\n\n.clepit-dialog-label {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--clepit-text);\n}\n\n.clepit-dialog-input {\n  display: block;\n  width: 100%;\n  height: 36px;\n  margin-bottom: 16px;\n  padding: 0 10px;\n  border: 1px solid var(--clepit-border);\n  border-radius: var(--clepit-radius-md);\n  background: var(--clepit-bg);\n  color: var(--clepit-text);\n  font: inherit;\n  font-size: 14px;\n  box-sizing: border-box;\n}\n\n.clepit-dialog-group .clepit-dialog-input {\n  margin-bottom: 0;\n}\n\n.clepit-dialog-input:focus-visible {\n  outline: 2px solid var(--clepit-focus-ring);\n  outline-offset: -1px;\n  border-color: transparent;\n}\n\n.clepit-dialog-input::placeholder {\n  color: var(--clepit-text-subtle);\n}\n\n.clepit-dialog-buttons {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n  margin-top: 24px;\n}\n\n.clepit-dialog-button {\n  height: 30px;\n  padding: 0 14px;\n  border: 0;\n  border-radius: var(--clepit-radius-md);\n  font: inherit;\n  font-size: 13.5px;\n  font-weight: 500;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.clepit-dialog-button:focus-visible {\n  outline: 2px solid var(--clepit-focus-ring);\n  outline-offset: 1px;\n}\n\n.clepit-dialog-button--cancel {\n  background: transparent;\n  color: var(--clepit-text-muted);\n}\n\n.clepit-dialog-button--cancel:hover {\n  background: var(--clepit-hover-bg);\n  color: var(--clepit-text);\n}\n\n.clepit-dialog-button--save {\n  background: var(--clepit-primary);\n  color: var(--clepit-on-primary);\n}\n\n.clepit-dialog-button--save:hover {\n  background: var(--clepit-primary-hover);\n}\n\n.clepit-dialog-button--save:disabled {\n  background: var(--clepit-text-subtle);\n  cursor: not-allowed;\n}\n\n@media (pointer: coarse) {\n  .clepit-dialog-input,\n  .clepit-dialog-button {\n    height: 44px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .clepit-dialog,\n  .clepit-dialog-button {\n    transition: none;\n  }\n}\n";
 //# sourceMappingURL=css.d.ts.map