@clepit/core 0.2.0-beta.322

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

@@ -0,0 +1,5 @@
+export declare const inputStylesKey = "clepit-alert-input-styles";
+export declare const inputStyle = "\n/* Alert block styles */\n.clepit-alert {\n  padding: 12px 16px;\n  border-radius: 4px;\n  font-size: 14px;\n  line-height: 1.5;\n  margin: 0 20px;\n}\n\n.clepit-alert[data-variant=\"info\"] {\n  background: var(--clepit-primary-bg);\n  color: var(--clepit-primary-hover);\n}\n\n.clepit-alert[data-variant=\"warning\"] {\n  background: var(--clepit-warning-bg);\n  color: var(--clepit-warning);\n}\n\n.clepit-alert[data-variant=\"error\"] {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n}\n\n.clepit-alert[data-variant=\"success\"] {\n  background: var(--clepit-success-bg);\n  color: var(--clepit-success);\n}\n\n.clepit-alert[data-variant=\"plain\"] {\n  background: transparent;\n  color: inherit;\n}\n\n.clepit-alert-text {\n  outline: none;\n  margin: 0;\n  padding: 0;\n}\n\n.clepit-alert[data-placeholder]:empty::before {\n  content: attr(data-placeholder);\n  color: rgba(0, 0, 0, 0.6);\n  font-style: italic;\n  pointer-events: none;\n}\n\n/* Alert link styles */\n.clepit-alert-text a {\n  color: var(--clepit-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n\n.clepit-alert-text a:hover {\n  color: var(--clepit-primary-hover);\n  text-decoration: none;\n}\n\n/* Alert inline code styling */\n.clepit-alert-text code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n}\n\n/* Alert marker brush effect */\n.clepit-alert-text 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-alert-text 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-alert-output-styles";
+export declare const outputStyle = "\n/* Output alert styles */\n.clepit-output-alert {\n  padding: 12px 16px;\n  border-radius: 4px;\n  font-size: 14px;\n  line-height: 1.5;\n  margin: 1rem 0;\n}\n\n.clepit-output-alert--info {\n  background: var(--clepit-primary-bg);\n  color: var(--clepit-primary-hover);\n}\n\n.clepit-output-alert--warning {\n  background: var(--clepit-warning-bg);\n  color: var(--clepit-warning);\n}\n\n.clepit-output-alert--error {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n}\n\n.clepit-output-alert--success {\n  background: var(--clepit-success-bg);\n  color: var(--clepit-success);\n}\n\n.clepit-output-alert--plain {\n  background: transparent;\n  color: inherit;\n}\n\n.clepit-output-alert-content {\n  line-height: 1.5;\n}\n\n/* Output alert link styles */\n.clepit-output-alert a {\n  color: var(--clepit-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n\n.clepit-output-alert a:hover {\n  color: var(--clepit-primary-hover);\n  text-decoration: none;\n}\n\n/* Output alert inline code styling */\n.clepit-output-alert code {\n  background: var(--clepit-error-bg);\n  color: var(--clepit-error);\n  padding: 0 4px;\n  border-radius: 4px;\n}\n\n/* Output alert marker brush effect */\n.clepit-output-alert 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-alert 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/alert/index.d.ts

@@ -0,0 +1,13 @@
+import { AlertInput } from './input';
+import { AlertOutput } from './output';
+import { ToolType } from '../../../types';
+export declare const AlertTool: {
+    icon: string;
+    readonly input: typeof AlertInput;
+    label: string;
+    readonly output: typeof AlertOutput;
+    shortcut: string;
+    testId: string;
+    type: ToolType;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,13 @@
+import { AlertData, AlertVariant, InputConfig } from '../../../types';
+export declare class AlertInput {
+    static placeholder: string;
+    private static eventListenersMap;
+    private static addEventListener;
+    static save(element: HTMLElement): AlertData;
+    static render(containerId: string, data?: AlertData, config?: InputConfig<'alert'>): HTMLElement;
+    static changeVariant(element: HTMLElement, variant: AlertVariant, containerId: string): void;
+    static isEmpty(blockElement: HTMLElement): boolean;
+    static isEmptyData(data: AlertData): boolean;
+    static destroy(containerId: string): void;
+}
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1,9 @@
+import { Backing, ClepitElement } from '../../../core/element';
+import { AlertData, BlockClassNames, BlockStyles, OutputConfig } from '../../../types';
+export declare class AlertOutput {
+    static render(data: AlertData, config?: OutputConfig, styles?: BlockStyles['alert'], classNames?: BlockClassNames['alert']): HTMLElement;
+    /** The same drawing, against the element layer, so it runs with no browser. */
+    static draw(data: AlertData, backing?: Backing): ClepitElement | null;
+    private static validate;
+}
+//# sourceMappingURL=output.d.ts.map

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

@@ -0,0 +1,5 @@
+export declare const inputStylesKey = "clepit-audio-input-styles";
+export declare const inputStyle: string;
+export declare const outputStylesKey = "clepit-audio-output-styles";
+export declare const outputStyle = "\n/* Output audio styles */\n.clepit-output-audio-container {\n  width: 100%;\n  margin: 1rem 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n}\n\n.clepit-output-audio-wrapper {\n  width: 100%;\n  display: flex;\n}\n\n.clepit-output-audio {\n  width: 100%;\n}\n\n\n.clepit-output-audio-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/* Output audio alignment */\n.clepit-output-audio-wrapper--left {\n  justify-content: flex-start;\n}\n\n.clepit-output-audio-wrapper--center {\n  justify-content: center;\n}\n\n.clepit-output-audio-wrapper--right {\n  justify-content: flex-end;\n}\n";
+//# sourceMappingURL=css.d.ts.map

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

@@ -0,0 +1,13 @@
+import { AudioInput } from './input';
+import { AudioOutput } from './output';
+import { ToolType } from '../../../types';
+export declare const AudioTool: {
+    icon: string;
+    readonly input: typeof AudioInput;
+    label: string;
+    readonly output: typeof AudioOutput;
+    shortcut: string;
+    testId: string;
+    type: ToolType;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,22 @@
+import { Alignment, AudioData, InputConfig, UploadFunction } from '../../../types';
+export declare class AudioInput {
+    static placeholder: string;
+    private static eventListenersMap;
+    private static validTypes;
+    private static addEventListener;
+    static save(element: HTMLElement): AudioData;
+    static render(uploadFunction: UploadFunction, containerId: string, data?: AudioData, config?: InputConfig<'audio'>): HTMLElement;
+    private static renderAudio;
+    private static renderDropArea;
+    private static handleFileSelect;
+    private static handleFileDrop;
+    private static isValidAudioFile;
+    private static processAudioFile;
+    private static showLoading;
+    private static showError;
+    static setAlignment(block: HTMLElement, alignment: Alignment): void;
+    static isEmpty(blockElement: HTMLElement): boolean;
+    static isEmptyData(data: AudioData): boolean;
+    static destroy(containerId: string): void;
+}
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1,9 @@
+import { Backing, ClepitElement } from '../../../core/element';
+import { AudioData, BlockClassNames, BlockStyles, OutputConfig } from '../../../types';
+export declare class AudioOutput {
+    static render(data: AudioData, config?: OutputConfig, styles?: BlockStyles['audio'], classNames?: BlockClassNames['audio']): HTMLElement;
+    /** The same drawing, against the element layer, so it runs with no browser. */
+    static draw(data: AudioData, backing?: Backing): ClepitElement | null;
+    private static validate;
+}
+//# sourceMappingURL=output.d.ts.map

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

@@ -0,0 +1,5 @@
+export declare const inputStylesKey = "clepit-checklist-input-styles";
+export declare const inputStyle: string;
+export declare const outputStylesKey = "clepit-checklist-output-styles";
+export declare const outputStyle = "\n/* Checklist output block styles */\n.clepit-output-checklist {\n  margin: 0 0 1rem 0;\n  padding-left: 0;\n}\n\n.clepit-output-checklist-item {\n  --text: var(--clepit-text);\n  --check: var(--clepit-marker);\n  --disabled: var(--clepit-border);\n  --border-radius: 10px;\n  border-radius: var(--border-radius);\n  position: relative;\n  padding: 5px;\n  display: grid;\n  grid-template-columns: 30px auto;\n  align-items: center;\n  margin: 0.5rem 0;\n  line-height: 1.6;\n}\n\n.clepit-output-checklist-text {\n  color: var(--text);\n  position: relative;\n  cursor: pointer;\n  display: grid;\n  align-items: center;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  transition: color 0.3s ease;\n  line-height: 1.6;\n}\n\n.clepit-output-checklist-text::before,\n.clepit-output-checklist-text::after {\n  content: \"\";\n  position: absolute;\n}\n\n.clepit-output-checklist-text::before {\n  height: 2px;\n  width: 8px;\n  left: -27px;\n  background: var(--check);\n  border-radius: 2px;\n  transition: background 0.3s ease;\n}\n\n.clepit-output-checklist-text::after {\n  height: 4px;\n  width: 4px;\n  top: 8px;\n  left: -25px;\n  border-radius: 50%;\n}\n\n.clepit-output-checklist-checkbox {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  position: relative;\n  height: 15px;\n  width: 15px;\n  outline: none;\n  border: 0;\n  margin: 0 15px 0 0;\n  cursor: pointer;\n  background: var(--background);\n  display: grid;\n  align-items: center;\n  pointer-events: none;\n}\n\n.clepit-output-checklist-checkbox::before,\n.clepit-output-checklist-checkbox::after {\n  content: \"\";\n  position: absolute;\n  height: 2px;\n  top: auto;\n  background: var(--check);\n  border-radius: 2px;\n}\n\n.clepit-output-checklist-checkbox::before {\n  width: 0px;\n  right: 60%;\n  transform-origin: right bottom;\n}\n\n.clepit-output-checklist-checkbox::after {\n  width: 0px;\n  left: 40%;\n  transform-origin: left bottom;\n}\n\n.clepit-output-checklist-checkbox:checked::before {\n  -webkit-animation: clepit-check-01-11 0.4s ease forwards;\n          animation: clepit-check-01-11 0.4s ease forwards;\n}\n\n.clepit-output-checklist-checkbox:checked::after {\n  -webkit-animation: clepit-check-02-11 0.4s ease forwards;\n          animation: clepit-check-02-11 0.4s ease forwards;\n}\n\n.clepit-output-checklist-checkbox:checked + .clepit-output-checklist-text {\n  color: var(--disabled);\n  -webkit-animation: clepit-move-11 0.3s ease 0.1s forwards;\n          animation: clepit-move-11 0.3s ease 0.1s forwards;\n}\n\n.clepit-output-checklist-checkbox:checked + .clepit-output-checklist-text::before {\n  background: var(--disabled);\n  -webkit-animation: clepit-slice-11 0.4s ease forwards;\n          animation: clepit-slice-11 0.4s ease forwards;\n}\n\n.clepit-output-checklist-checkbox:checked + .clepit-output-checklist-text::after {\n  -webkit-animation: clepit-firework-11 0.5s ease forwards 0.1s;\n          animation: clepit-firework-11 0.5s ease forwards 0.1s;\n}\n\n@-webkit-keyframes clepit-move-11 {\n  50% {\n    padding-left: 8px;\n    padding-right: 0px;\n  }\n  100% {\n    padding-right: 4px;\n  }\n}\n\n@keyframes clepit-move-11 {\n  50% {\n    padding-left: 8px;\n    padding-right: 0px;\n  }\n  100% {\n    padding-right: 4px;\n  }\n}\n\n@-webkit-keyframes clepit-slice-11 {\n  60% {\n    width: 100%;\n    left: 4px;\n  }\n  100% {\n    width: 100%;\n    left: -2px;\n    padding-left: 0;\n  }\n}\n\n@keyframes clepit-slice-11 {\n  60% {\n    width: 100%;\n    left: 4px;\n  }\n  100% {\n    width: 100%;\n    left: -2px;\n    padding-left: 0;\n  }\n}\n\n@-webkit-keyframes clepit-check-01-11 {\n  0% {\n    width: 4px;\n    top: auto;\n    transform: rotate(0);\n  }\n  50% {\n    width: 0px;\n    top: auto;\n    transform: rotate(0);\n  }\n  51% {\n    width: 0px;\n    top: 8px;\n    transform: rotate(45deg);\n  }\n  100% {\n    width: 5px;\n    top: 8px;\n    transform: rotate(45deg);\n  }\n}\n\n@keyframes clepit-check-01-11 {\n  0% {\n    width: 4px;\n    top: auto;\n    transform: rotate(0);\n  }\n  50% {\n    width: 0px;\n    top: auto;\n    transform: rotate(0);\n  }\n  51% {\n    width: 0px;\n    top: 8px;\n    transform: rotate(45deg);\n  }\n  100% {\n    width: 5px;\n    top: 8px;\n    transform: rotate(45deg);\n  }\n}\n\n@-webkit-keyframes clepit-check-02-11 {\n  0% {\n    width: 4px;\n    top: 17px;\n    transform: rotate(0);\n  }\n  50% {\n    width: 0px;\n    top: 17px;\n    transform: rotate(0);\n  }\n  51% {\n    width: 0px;\n    top: 8px;\n    transform: rotate(-45deg);\n  }\n  100% {\n    width: 10px;\n    top: 8px;\n    transform: rotate(-45deg);\n  }\n}\n\n@keyframes clepit-check-02-11 {\n  0% {\n    width: 4px;\n    top: 17px;\n    transform: rotate(0);\n  }\n  50% {\n    width: 0px;\n    top: 17px;\n    transform: rotate(0);\n  }\n  51% {\n    width: 0px;\n    top: 8px;\n    transform: rotate(-45deg);\n  }\n  100% {\n    width: 10px;\n    top: 8px;\n    transform: rotate(-45deg);\n  }\n}\n\n@-webkit-keyframes clepit-firework-11 {\n  0% {\n    opacity: 1;\n    box-shadow: 0 0 0 -2px var(--clepit-marker), 0 0 0 -2px var(--clepit-marker), 0 0 0 -2px var(--clepit-marker), 0 0 0 -2px var(--clepit-marker), 0 0 0 -2px var(--clepit-marker), 0 0 0 -2px var(--clepit-marker);\n  }\n  30% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    box-shadow: 0 -15px 0 0px var(--clepit-marker), 14px -8px 0 0px var(--clepit-marker), 14px 8px 0 0px var(--clepit-marker), 0 15px 0 0px var(--clepit-marker), -14px 8px 0 0px var(--clepit-marker), -14px -8px 0 0px var(--clepit-marker);\n  }\n}\n\n@keyframes clepit-firework-11 {\n  0% {\n    opacity: 1;\n    box-shadow: 0 0 0 -2px var(--clepit-marker), 0 0 0 -2px var(--clepit-marker), 0 0 0 -2px var(--clepit-marker), 0 0 0 -2px var(--clepit-marker), 0 0 0 -2px var(--clepit-marker), 0 0 0 -2px var(--clepit-marker);\n  }\n  30% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    box-shadow: 0 -15px 0 0px var(--clepit-marker), 14px -8px 0 0px var(--clepit-marker), 14px 8px 0 0px var(--clepit-marker), 0 15px 0 0px var(--clepit-marker), -14px 8px 0 0px var(--clepit-marker), -14px -8px 0 0px var(--clepit-marker);\n  }\n}\n";
+//# sourceMappingURL=css.d.ts.map

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

@@ -0,0 +1,13 @@
+import { ChecklistInput } from './input';
+import { ChecklistOutput } from './output';
+import { ToolType } from '../../../types';
+export declare const ChecklistTool: {
+    icon: string;
+    readonly input: typeof ChecklistInput;
+    label: string;
+    readonly output: typeof ChecklistOutput;
+    shortcut: string;
+    testId: string;
+    type: ToolType;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,14 @@
+import { ChecklistData, InputConfig } from '../../../types';
+export declare class ChecklistInput {
+    private static placeholder;
+    private static eventListenersMap;
+    private static addEventListener;
+    static save(element: HTMLElement): ChecklistData;
+    static render(containerId: string, data?: ChecklistData, config?: InputConfig<'checklist'>): HTMLElement;
+    private static createAndAppendChecklistItem;
+    private static cleanupEmptyItems;
+    static isEmpty(blockElement: HTMLElement): boolean;
+    static isEmptyData(data: ChecklistData): boolean;
+    static destroy(containerId: string): void;
+}
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1,9 @@
+import { Backing, ClepitElement } from '../../../core/element';
+import { BlockClassNames, BlockStyles, ChecklistData, OutputConfig } from '../../../types';
+export declare class ChecklistOutput {
+    static render(data: ChecklistData, config?: OutputConfig, styles?: BlockStyles['checklist'], classNames?: BlockClassNames['checklist']): HTMLElement;
+    /** The same drawing, against the element layer, so it runs with no browser. */
+    static draw(data: ChecklistData, backing?: Backing): ClepitElement | null;
+    private static validate;
+}
+//# sourceMappingURL=output.d.ts.map

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

@@ -0,0 +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: 6px;\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: 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: 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;\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: 6px;\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  overflow-x: auto;\n  white-space: pre;\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";
+//# sourceMappingURL=css.d.ts.map

package/dist/tools/block/code/grammar/engine.d.ts

@@ -0,0 +1,52 @@
+import { CodeToken } from '../highlight';
+export type StringRule = {
+    open: string;
+    /** Defaults to `open`, which covers every quote-delimited string. */
+    close?: string;
+    /** The character that makes the next one literal, usually a backslash. */
+    escape?: string;
+    /** Whether the literal may cross a line break. Most may not, and stopping at
+     * the line is what keeps one unterminated quote from colouring a whole file
+     * while an author is still typing it. */
+    multiline?: boolean;
+};
+/**
+ * A language, described rather than parsed.
+ *
+ * Colouring a code block needs tokens, not a syntax tree: which run of
+ * characters is a keyword, a string, a comment, a number. That is a much
+ * smaller problem than parsing, and it is why one engine plus a short
+ * description per language replaces a grammar per language.
+ *
+ * The groups here are the ones `CODE_TAG_GROUPS` already names, so a language
+ * added tomorrow paints from the same nine themes as the rest.
+ */
+export type GrammarSpec = {
+    lineComments?: string[];
+    blockComments?: Array<[string, string]>;
+    strings?: StringRule[];
+    keywords?: string[];
+    /** Type and class names: `string`, `int`, `Vec`. */
+    types?: string[];
+    /** Literals that are words: `true`, `nil`, `None`. Coloured as numbers are,
+     * which is what every one of the nine themes already does with them. */
+    constants?: string[];
+    /** Words that name a callable: `println`, `describe`. */
+    builtins?: string[];
+    /** An identifier immediately followed by `(` reads as a call. */
+    functionCalls?: boolean;
+    caseInsensitive?: boolean;
+    /** Extra characters that may appear in an identifier, beyond letters, digits
+     * and `_`. Ruby wants `?` and `!`, PHP and shell want `$`. */
+    identifierExtra?: string;
+};
+/**
+ * Split source into coloured runs.
+ *
+ * Every character of the input comes back exactly once, classified or not, so a
+ * caller can rejoin the runs and get the original source. That property is what
+ * lets the editor lay this under a textarea: the painted copy and the text the
+ * author is typing stay the same length and the caret lands where it looks.
+ */
+export declare const tokenizeWith: (code: string, spec: GrammarSpec) => CodeToken[];
+//# sourceMappingURL=engine.d.ts.map

package/dist/tools/block/code/grammar/languages.d.ts

@@ -0,0 +1,6 @@
+import { GrammarSpec } from './engine';
+import { CodeLanguage } from '../../../../types';
+export declare const GRAMMARS: {
+    readonly [L in CodeLanguage]: GrammarSpec;
+};
+//# sourceMappingURL=languages.d.ts.map

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

@@ -0,0 +1,22 @@
+import { CodeLanguage } from '../../../types';
+export type CodeToken = {
+    classes: string;
+    text: string;
+};
+/**
+ * Split source into classified runs, using no DOM and no third-party grammar.
+ *
+ * This used to parse with a Lezer grammar per language, which meant a grammar
+ * package per language and a CodeMirror editor dragged in behind each one. What
+ * colouring actually needs is token classification, not a syntax tree, so one
+ * tokenizer reads a short description of each language instead.
+ *
+ * Synchronous, which the old path could not be: a grammar arrived by dynamic
+ * import, so a block drew as plain source until it landed and a server had to
+ * preload the languages its document used. Nothing to load now.
+ *
+ * Every character of the input comes back exactly once, classified or not, so a
+ * caller can join the runs and get the original source.
+ */
+export declare const tokenizeCode: (code: string, language: CodeLanguage) => CodeToken[];
+//# sourceMappingURL=highlight.d.ts.map

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

@@ -0,0 +1,13 @@
+import { CodeInput } from './input';
+import { CodeOutput } from './output';
+import { ToolType } from '../../../types';
+export declare const CodeTool: {
+    icon: string;
+    readonly input: typeof CodeInput;
+    label: string;
+    readonly output: typeof CodeOutput;
+    shortcut: string;
+    testId: string;
+    type: ToolType;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,57 @@
+import { CodeData, CodeLanguage, CodeTheme, InputConfig } from '../../../types';
+export declare class CodeInput {
+    static placeholder: string;
+    static supportedLanguages: {
+        [k: string]: {
+            name: string;
+        };
+    };
+    static supportedThemes: {
+        [k: string]: {
+            name: string;
+            theme: null;
+        };
+    };
+    static defaultLanguage: CodeLanguage;
+    static defaultTheme: CodeTheme;
+    private static inputMap;
+    private static dataMap;
+    static save(element: HTMLElement): CodeData;
+    /** Turns a single-language block into a two-tab one, seeding the first tab
+     * from what the author already wrote. A block that already has tabs gains one. */
+    static addVariant(data: CodeData): CodeData;
+    /** Removing down to one variant drops the array entirely, so the block goes
+     * back to rendering as an ordinary code box rather than a one-tab strip. */
+    static removeVariant(data: CodeData, index: number): CodeData;
+    static render(containerId: string, data?: CodeData, config?: InputConfig<'code'>, defaults?: {
+        language?: CodeLanguage;
+        theme?: CodeTheme;
+    }): HTMLElement;
+    /**
+     * The editing surface: a textarea laid over a highlighted `pre`.
+     *
+     * The textarea holds the text and the caret; the `pre` behind it holds the
+     * colour, drawn by the same `tokenizeCode` a server uses. One highlighting
+     * path serves editing, display and a published page, so the three cannot show
+     * the same snippet three different ways.
+     */
+    private static mountEditor;
+    /** A trailing newline leaves the last line with no box to sit in, so the
+     * painted copy carries one more than the text does. */
+    private static paint;
+    static updateLanguage(block: HTMLElement, language: CodeLanguage): void;
+    static updateTheme(block: HTMLElement, theme: CodeTheme): void;
+    /**
+     * The block-navigation keys, which used to be a CodeMirror keymap.
+     *
+     * Behaviour is carried over unchanged, including Enter leaving the block for
+     * a new paragraph rather than inserting a newline. That is what the keymap
+     * did, so a newline has only ever been reachable here by pasting one.
+     */
+    private static handleKeydown;
+    private static getHeaderText;
+    static isEmpty(blockElement: HTMLElement): boolean;
+    static isEmptyData(data: CodeData): boolean;
+    static destroy(containerId: string): void;
+}
+//# sourceMappingURL=input.d.ts.map

package/dist/tools/block/code/loaders/language.d.ts

@@ -0,0 +1,17 @@
+import { CodeLanguage } from '../../../../types';
+export declare const LANGUAGE_NAMES: Record<CodeLanguage, string>;
+/**
+ * Check if a language is supported
+ */
+export declare function isLanguageSupported(language: string): language is CodeLanguage;
+/**
+ * Get all supported languages
+ */
+export declare function getSupportedLanguages(): CodeLanguage[];
+export declare function getLanguageName(language: CodeLanguage): string;
+export declare const SUPPORTED_LANGUAGES: {
+    [k: string]: {
+        name: string;
+    };
+};
+//# sourceMappingURL=language.d.ts.map

package/dist/tools/block/code/loaders/theme.d.ts

@@ -0,0 +1,21 @@
+import { CodeTheme } from '../../../../types';
+export declare const THEME_NAMES: Record<CodeTheme, string>;
+/**
+ * Get theme name
+ */
+export declare function getThemeName(theme: CodeTheme): string;
+/**
+ * Check if a theme is supported
+ */
+export declare function isThemeSupported(theme: string): theme is CodeTheme;
+/**
+ * Get all supported themes
+ */
+export declare function getSupportedThemes(): CodeTheme[];
+export declare const SUPPORTED_THEMES: {
+    [k: string]: {
+        name: string;
+        theme: null;
+    };
+};
+//# sourceMappingURL=theme.d.ts.map

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

@@ -0,0 +1,32 @@
+import { Backing, ClepitElement, DrawContext } from '../../../core/element';
+import { BlockClassNames, BlockStyles, CodeData, OutputConfig } from '../../../types';
+export declare class CodeOutput {
+    private static eventListenersMap;
+    private static addEventListener;
+    /**
+     * The block as markup, with no browser involved.
+     *
+     * Highlighting comes from our own tokenizer, so a published page shows the
+     * same colours the editor does without an editor being shipped to draw them.
+     * Colour itself arrives through the stylesheet, keyed on the theme this
+     * 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.
+     */
+    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;
+    /**
+     * Everything the drawing above deliberately left out.
+     *
+     * Listeners, the clipboard and the grammar load all need a live page, so they
+     * live here rather than in the render path. Nothing in this method is reached
+     * when a document is drawn to a string.
+     */
+    private static attach;
+    private static validate;
+    private static copyCodeToClipboard;
+    private static animateCopyButton;
+    static destroy(containerId: string): void;
+}
+//# sourceMappingURL=output.d.ts.map

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

@@ -0,0 +1,14 @@
+/**
+ * The nine named themes as plain CSS.
+ *
+ * The colours are the same `CODE_THEME_TOKENS` the CodeMirror theme was built
+ * from, so a block keeps the palette it always had; what changes is that the
+ * palette now arrives in a stylesheet instead of being pushed from JavaScript.
+ * That is what lets a code block keep its colours on a page where nothing runs.
+ *
+ * `auto` is the unscoped default rather than a scope of its own, so a block
+ * that names no theme paints from the host page's `--clepit-code-*` variables
+ * and follows whatever palette the page installed.
+ */
+export declare const codeThemeCss: () => string;
+//# sourceMappingURL=theme-css.d.ts.map

package/dist/tools/block/code/theme-generator.d.ts

@@ -0,0 +1,27 @@
+import { CodeTheme } from '../../../types';
+export type CodeThemeTokens = {
+    background: string;
+    comment: string;
+    function: string;
+    gutter: string;
+    keyword: string;
+    number: string;
+    punctuation: string;
+    selection: string;
+    string: string;
+    text: string;
+    type: string;
+};
+export type NamedCodeTheme = Exclude<CodeTheme, 'auto' | 'default'>;
+export declare const resolveAutoTokens: () => CodeThemeTokens;
+export declare const CODE_THEME_TOKENS: Record<NamedCodeTheme, CodeThemeTokens>;
+/**
+ * The token groups a language can be coloured into.
+ *
+ * These are the vocabulary the tokenizer emits and the colours the nine themes
+ * declare, kept as one list so the two cannot drift. Typed against
+ * `CodeThemeTokens`, so a group with no colour behind it fails to compile.
+ */
+export declare const CODE_TOKEN_GROUPS: readonly ["keyword", "string", "number", "comment", "function", "type", "punctuation", "text"];
+export type CodeTokenGroup = (typeof CODE_TOKEN_GROUPS)[number];
+//# sourceMappingURL=theme-generator.d.ts.map

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

@@ -0,0 +1,14 @@
+import { CodeVariant } from '../../../types';
+/** Broadcast on `window` when a reader picks a language, so every block sharing
+ * the same `syncKey` follows without the blocks knowing about each other. */
+export declare const SYNC_EVENT = "clepit:code-variant-sync";
+export declare const variantLabel: (variant: CodeVariant, index: number) => string;
+/** A stored language the block does not offer resolves to the block's first
+ * variant, and the stored value is left alone — a page offering only curl and
+ * python must not clobber the reader's Dart preference elsewhere. */
+export declare const resolveActiveIndex: (variants: CodeVariant[], stored: string | null) => number;
+/** `localStorage` throws on access in Safari private mode and under a
+ * blocked-cookies policy; a documentation page must render regardless. */
+export declare const readStoredLanguage: (syncKey: string | undefined) => string | null;
+export declare const writeStoredLanguage: (syncKey: string | undefined, label: string) => void;
+//# sourceMappingURL=variants.d.ts.map

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

@@ -0,0 +1,6 @@
+export declare const inputStylesKey = "collapsible-input";
+export declare const outputStylesKey = "collapsible-output";
+export declare const sharedStyle = "\n.clepit-collapsible {\n  display: block;\n}\n.clepit-collapsible > summary {\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n  cursor: pointer;\n  font-weight: 600;\n  list-style: none;\n}\n.clepit-collapsible > summary::-webkit-details-marker {\n  display: none;\n}\n.clepit-collapsible > summary::before {\n  content: '';\n  flex: 0 0 auto;\n  width: 8px;\n  height: 8px;\n  margin-top: 7px;\n  border-right: 2px solid currentColor;\n  border-bottom: 2px solid currentColor;\n  transform: rotate(-45deg);\n  transition: transform 120ms ease;\n}\n.clepit-collapsible[open] > summary::before {\n  transform: rotate(45deg);\n}\n.clepit-collapsible__children {\n  padding-left: 22px;\n}\n.clepit-collapsible__children > * + * {\n  margin-top: 8px;\n}\n";
+export declare const inputStyle = "\n.clepit-collapsible {\n  display: block;\n}\n.clepit-collapsible > summary {\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n  cursor: pointer;\n  font-weight: 600;\n  list-style: none;\n}\n.clepit-collapsible > summary::-webkit-details-marker {\n  display: none;\n}\n.clepit-collapsible > summary::before {\n  content: '';\n  flex: 0 0 auto;\n  width: 8px;\n  height: 8px;\n  margin-top: 7px;\n  border-right: 2px solid currentColor;\n  border-bottom: 2px solid currentColor;\n  transform: rotate(-45deg);\n  transition: transform 120ms ease;\n}\n.clepit-collapsible[open] > summary::before {\n  transform: rotate(45deg);\n}\n.clepit-collapsible__children {\n  padding-left: 22px;\n}\n.clepit-collapsible__children > * + * {\n  margin-top: 8px;\n}\n\n.clepit-collapsible__title-input {\n  border: none;\n  outline: none;\n  background: transparent;\n  font: inherit;\n  font-weight: 600;\n  width: 100%;\n}\n.clepit-collapsible__add-child {\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font: inherit;\n  opacity: 0.6;\n  padding: 4px 0;\n}\n.clepit-collapsible__add-child:hover {\n  opacity: 1;\n}\n.clepit-collapsible__child-row {\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n}\n.clepit-collapsible__child-row > :first-child {\n  flex: 1 1 auto;\n}\n.clepit-collapsible__remove-child {\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  opacity: 0.4;\n  padding: 2px;\n}\n.clepit-collapsible__remove-child:hover {\n  opacity: 1;\n}\n";
+export declare const outputStyle = "\n.clepit-collapsible {\n  display: block;\n}\n.clepit-collapsible > summary {\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n  cursor: pointer;\n  font-weight: 600;\n  list-style: none;\n}\n.clepit-collapsible > summary::-webkit-details-marker {\n  display: none;\n}\n.clepit-collapsible > summary::before {\n  content: '';\n  flex: 0 0 auto;\n  width: 8px;\n  height: 8px;\n  margin-top: 7px;\n  border-right: 2px solid currentColor;\n  border-bottom: 2px solid currentColor;\n  transform: rotate(-45deg);\n  transition: transform 120ms ease;\n}\n.clepit-collapsible[open] > summary::before {\n  transform: rotate(45deg);\n}\n.clepit-collapsible__children {\n  padding-left: 22px;\n}\n.clepit-collapsible__children > * + * {\n  margin-top: 8px;\n}\n";
+//# sourceMappingURL=css.d.ts.map

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

@@ -0,0 +1,13 @@
+import { CollapsibleInput } from './input';
+import { CollapsibleOutput } from './output';
+import { ToolType } from '../../../types';
+export declare const CollapsibleTool: {
+    icon: string;
+    readonly input: typeof CollapsibleInput;
+    label: string;
+    readonly output: typeof CollapsibleOutput;
+    shortcut: string;
+    testId: string;
+    type: ToolType;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/tools/block/collapsible/input.d.ts

@@ -0,0 +1,13 @@
+import { CollapsibleData, InputConfig } from '../../../types';
+export declare class CollapsibleInput {
+    static placeholder: string;
+    private static eventListenersMap;
+    private static addEventListener;
+    static save(element: HTMLElement): CollapsibleData;
+    static render(containerId: string, data?: CollapsibleData, config?: InputConfig<'collapsible'>): HTMLElement;
+    private static renderChild;
+    static isEmpty(blockElement: HTMLElement): boolean;
+    static isEmptyData(data: CollapsibleData): boolean;
+    static destroy(containerId: string): void;
+}
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1,16 @@
+import { Backing, ClepitElement, DrawContext } from '../../../core/element';
+import { BlockClassNames, BlockStyles, CollapsibleData, OutputConfig } from '../../../types';
+export declare class CollapsibleOutput {
+    static render(data: CollapsibleData, config?: OutputConfig, styles?: BlockStyles['collapsible'], classNames?: BlockClassNames['collapsible']): HTMLElement;
+    private static renderChild;
+    /**
+     * The same drawing, against the element layer, so it runs with no browser.
+     *
+     * Children go through `drawBlock`, the same table every other consumer uses,
+     * so a collapsible carries whatever a document can carry rather than its own
+     * shorter list that would quietly fall behind.
+     */
+    static draw(data: CollapsibleData, backing?: Backing, context?: DrawContext): ClepitElement | null;
+    private static validate;
+}
+//# sourceMappingURL=output.d.ts.map

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

@@ -0,0 +1,6 @@
+export declare const inputStylesKey = "collection-input";
+export declare const outputStylesKey = "collection-output";
+export declare const sharedStyle = "\n.clepit-collection {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px;\n  border: 1px solid rgba(127, 127, 127, 0.35);\n  border-radius: 8px;\n  color: inherit;\n}\n.clepit-collection__icon {\n  font-size: 18px;\n  line-height: 1;\n}\n.clepit-collection__label {\n  opacity: 0.7;\n}\n";
+export declare const inputStyle = "\n.clepit-collection {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px;\n  border: 1px solid rgba(127, 127, 127, 0.35);\n  border-radius: 8px;\n  color: inherit;\n}\n.clepit-collection__icon {\n  font-size: 18px;\n  line-height: 1;\n}\n.clepit-collection__label {\n  opacity: 0.7;\n}\n";
+export declare const outputStyle = "\n.clepit-collection {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px;\n  border: 1px solid rgba(127, 127, 127, 0.35);\n  border-radius: 8px;\n  color: inherit;\n}\n.clepit-collection__icon {\n  font-size: 18px;\n  line-height: 1;\n}\n.clepit-collection__label {\n  opacity: 0.7;\n}\n";
+//# sourceMappingURL=css.d.ts.map

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

@@ -0,0 +1,13 @@
+import { CollectionInput } from './input';
+import { CollectionOutput } from './output';
+import { ToolType } from '../../../types';
+export declare const CollectionTool: {
+    icon: string;
+    readonly input: typeof CollectionInput;
+    label: string;
+    readonly output: typeof CollectionOutput;
+    shortcut: string;
+    testId: string;
+    type: ToolType;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,11 @@
+import { CollectionData, InputConfig } from '../../../types';
+export declare class CollectionInput {
+    static placeholder: string;
+    private static eventListenersMap;
+    static save(element: HTMLElement): CollectionData;
+    static render(containerId: string, data?: CollectionData, config?: InputConfig<'collection'>): HTMLElement;
+    static isEmpty(blockElement: HTMLElement): boolean;
+    static isEmptyData(data: CollectionData): boolean;
+    static destroy(containerId: string): void;
+}
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1,12 @@
+import { Backing, ClepitElement } from '../../../core/element';
+import { BlockClassNames, BlockStyles, CollectionData, OutputConfig } from '../../../types';
+/** A `collection` renders as the reference it is. Rows, columns, filters and
+ * sort live on the server, so a public page or an export shows the pointer —
+ * never a stale copy of a table that has since changed. */
+export declare class CollectionOutput {
+    static render(data: CollectionData, _config?: OutputConfig, styles?: BlockStyles['collection'], classNames?: BlockClassNames['collection']): HTMLElement;
+    /** The same drawing, against the element layer, so it runs with no browser. */
+    static draw(data: CollectionData, backing?: Backing): ClepitElement | null;
+    private static validate;
+}
+//# sourceMappingURL=output.d.ts.map

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

@@ -0,0 +1,6 @@
+export declare const inputStylesKey = "columns-input";
+export declare const outputStylesKey = "columns-output";
+export declare const sharedStyle = "\n.clepit-columns {\n  display: flex;\n  gap: 16px;\n  align-items: flex-start;\n}\n.clepit-columns__column {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.clepit-columns__column > * + * {\n  margin-top: 8px;\n}\n@media (max-width: 640px) {\n  .clepit-columns {\n    flex-direction: column;\n  }\n}\n";
+export declare const inputStyle = "\n.clepit-columns {\n  display: flex;\n  gap: 16px;\n  align-items: flex-start;\n}\n.clepit-columns__column {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.clepit-columns__column > * + * {\n  margin-top: 8px;\n}\n@media (max-width: 640px) {\n  .clepit-columns {\n    flex-direction: column;\n  }\n}\n\n.clepit-columns__add-child,\n.clepit-columns__add-column {\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font: inherit;\n  opacity: 0.6;\n  padding: 4px 0;\n}\n.clepit-columns__add-child:hover,\n.clepit-columns__add-column:hover {\n  opacity: 1;\n}\n";
+export declare const outputStyle = "\n.clepit-columns {\n  display: flex;\n  gap: 16px;\n  align-items: flex-start;\n}\n.clepit-columns__column {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.clepit-columns__column > * + * {\n  margin-top: 8px;\n}\n@media (max-width: 640px) {\n  .clepit-columns {\n    flex-direction: column;\n  }\n}\n";
+//# sourceMappingURL=css.d.ts.map

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

@@ -0,0 +1,13 @@
+import { ColumnsInput } from './input';
+import { ColumnsOutput } from './output';
+import { ToolType } from '../../../types';
+export declare const ColumnsTool: {
+    icon: string;
+    readonly input: typeof ColumnsInput;
+    label: string;
+    readonly output: typeof ColumnsOutput;
+    shortcut: string;
+    testId: string;
+    type: ToolType;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,12 @@
+import { ColumnsData, InputConfig } from '../../../types';
+export declare class ColumnsInput {
+    static placeholder: string;
+    private static eventListenersMap;
+    static save(element: HTMLElement): ColumnsData;
+    static render(containerId: string, data?: ColumnsData, config?: InputConfig<'columns'>): HTMLElement;
+    private static renderChild;
+    static isEmpty(blockElement: HTMLElement): boolean;
+    static isEmptyData(data: ColumnsData): boolean;
+    static destroy(containerId: string): void;
+}
+//# sourceMappingURL=input.d.ts.map