@clepit/core 0.2.0-beta.322

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

@@ -0,0 +1,11 @@
+import { Backing, ClepitElement, DrawContext } from '../../../core/element';
+import { BlockClassNames, BlockStyles, ColumnsData, OutputConfig } from '../../../types';
+export declare class ColumnsOutput {
+    static render(data: ColumnsData, config?: OutputConfig, styles?: BlockStyles['columns'], classNames?: BlockClassNames['columns']): 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. */
+    static draw(data: ColumnsData, backing?: Backing, context?: DrawContext): ClepitElement | null;
+    private static validate;
+}
+//# sourceMappingURL=output.d.ts.map

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

@@ -0,0 +1,6 @@
+export declare const inputStylesKey = "date-input";
+export declare const outputStylesKey = "date-output";
+export declare const sharedStyle = "\n.clepit-date {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 8px;\n  border-radius: 6px;\n  background: rgba(127, 127, 127, 0.12);\n  font-variant-numeric: tabular-nums;\n}\n";
+export declare const inputStyle = "\n.clepit-date {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 8px;\n  border-radius: 6px;\n  background: rgba(127, 127, 127, 0.12);\n  font-variant-numeric: tabular-nums;\n}\n\n.clepit-date--input {\n  cursor: pointer;\n  border: none;\n  font: inherit;\n}\n";
+export declare const outputStyle = "\n.clepit-date {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 8px;\n  border-radius: 6px;\n  background: rgba(127, 127, 127, 0.12);\n  font-variant-numeric: tabular-nums;\n}\n";
+//# sourceMappingURL=css.d.ts.map

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+export declare const inputStylesKey = "clepit-delimiter-input-styles";
+export declare const inputStyle = "\n/* Delimiter block styles */\n.clepit-delimiter-container {\n  margin: 0.5rem 0;\n  text-align: center;\n}\n\n.clepit-delimiter {\n  border: none;\n  height: 2px;\n  background: linear-gradient(to right, transparent, var(--clepit-border), transparent);\n  margin: 20px 0;\n}\n\n.clepit-delimiter[data-variant=\"stars\"] {\n  height: auto;\n  background: none;\n  font-size: 24px;\n  letter-spacing: 8px;\n  margin: 0; /* Remove margin for star variant */\n}\n\n";
+export declare const outputStylesKey = "clepit-delimiter-output-styles";
+export declare const outputStyle = "\n/* Output delimiter styles */\n.clepit-output-delimiter {\n  margin: 2rem 0;\n  text-align: center;\n}\n\n.clepit-output-delimiter[data-variant=\"stars\"] {\n  font-size: 1.5rem;\n  font-weight: 300;\n  letter-spacing: 8px;\n  margin: 0; /* Remove margin for star variant */\n}\n\n.clepit-output-delimiter hr[data-variant=\"line\"] {\n  border: none;\n  height: 2px;\n  background: linear-gradient(to right, transparent, var(--clepit-border), transparent);\n  margin: 20px 0;\n}\n\n.clepit-output-delimiter[data-variant=\"line\"] {\n  margin: 0; /* Remove container margin for line variant */\n}\n";
+//# sourceMappingURL=css.d.ts.map

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+export declare const inputStylesKey = "doc-card-input";
+export declare const outputStylesKey = "doc-card-output";
+export declare const sharedStyle = "\n.clepit-doc-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px;\n  border: 1px solid rgba(127, 127, 127, 0.35);\n  border-radius: 8px;\n  cursor: pointer;\n  color: inherit;\n  text-decoration: none;\n}\n.clepit-doc-card:hover {\n  background: rgba(127, 127, 127, 0.08);\n}\n.clepit-doc-card__icon {\n  font-size: 20px;\n  line-height: 1;\n}\n.clepit-doc-card__title {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.clepit-doc-card__description {\n  opacity: 0.7;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n";
+export declare const inputStyle = "\n.clepit-doc-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px;\n  border: 1px solid rgba(127, 127, 127, 0.35);\n  border-radius: 8px;\n  cursor: pointer;\n  color: inherit;\n  text-decoration: none;\n}\n.clepit-doc-card:hover {\n  background: rgba(127, 127, 127, 0.08);\n}\n.clepit-doc-card__icon {\n  font-size: 20px;\n  line-height: 1;\n}\n.clepit-doc-card__title {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.clepit-doc-card__description {\n  opacity: 0.7;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n";
+export declare const outputStyle = "\n.clepit-doc-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px;\n  border: 1px solid rgba(127, 127, 127, 0.35);\n  border-radius: 8px;\n  cursor: pointer;\n  color: inherit;\n  text-decoration: none;\n}\n.clepit-doc-card:hover {\n  background: rgba(127, 127, 127, 0.08);\n}\n.clepit-doc-card__icon {\n  font-size: 20px;\n  line-height: 1;\n}\n.clepit-doc-card__title {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.clepit-doc-card__description {\n  opacity: 0.7;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n";
+//# sourceMappingURL=css.d.ts.map

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+export declare const inputStylesKey = "embed-input";
+export declare const outputStylesKey = "embed-output";
+export declare const sharedStyle = "\n.clepit-embed {\n  border: 1px solid rgba(127, 127, 127, 0.35);\n  border-radius: 8px;\n  overflow: hidden;\n}\n.clepit-embed__frame {\n  display: block;\n  width: 100%;\n  border: 0;\n}\n.clepit-embed-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px;\n  border: 1px solid rgba(127, 127, 127, 0.35);\n  border-radius: 8px;\n  color: inherit;\n  text-decoration: none;\n}\n.clepit-embed-card:hover {\n  background: rgba(127, 127, 127, 0.08);\n}\n.clepit-embed-card__title {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.clepit-embed-card__description {\n  opacity: 0.7;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n";
+export declare const inputStyle = "\n.clepit-embed {\n  border: 1px solid rgba(127, 127, 127, 0.35);\n  border-radius: 8px;\n  overflow: hidden;\n}\n.clepit-embed__frame {\n  display: block;\n  width: 100%;\n  border: 0;\n}\n.clepit-embed-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px;\n  border: 1px solid rgba(127, 127, 127, 0.35);\n  border-radius: 8px;\n  color: inherit;\n  text-decoration: none;\n}\n.clepit-embed-card:hover {\n  background: rgba(127, 127, 127, 0.08);\n}\n.clepit-embed-card__title {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.clepit-embed-card__description {\n  opacity: 0.7;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n";
+export declare const outputStyle = "\n.clepit-embed {\n  border: 1px solid rgba(127, 127, 127, 0.35);\n  border-radius: 8px;\n  overflow: hidden;\n}\n.clepit-embed__frame {\n  display: block;\n  width: 100%;\n  border: 0;\n}\n.clepit-embed-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px;\n  border: 1px solid rgba(127, 127, 127, 0.35);\n  border-radius: 8px;\n  color: inherit;\n  text-decoration: none;\n}\n.clepit-embed-card:hover {\n  background: rgba(127, 127, 127, 0.08);\n}\n.clepit-embed-card__title {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.clepit-embed-card__description {\n  opacity: 0.7;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n";
+//# sourceMappingURL=css.d.ts.map

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

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

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

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

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

@@ -0,0 +1,23 @@
+import { Backing, ClepitElement, DrawContext } from '../../../core/element';
+import { BlockClassNames, BlockStyles, EmbedData, OutputConfig } from '../../../types';
+export declare class EmbedOutput {
+    static render(data: EmbedData, config?: OutputConfig & {
+        mapsEmbedKey?: string;
+    }, styles?: BlockStyles['embed'], classNames?: BlockClassNames['embed']): HTMLElement;
+    /**
+     * The same drawing, against the element layer, so it runs with no browser.
+     *
+     * `src`, `href`, `rel` and `target` are assigned as PROPERTIES by `render`.
+     * A string builder has no live element to hold a property, so `draw` sets the
+     * attributes they reflect, and the parity tests prove the two serialise the
+     * same. The aspect ratio moves from `style.aspectRatio` to the `style`
+     * attribute for the same reason.
+     */
+    static draw(data: EmbedData, backing?: Backing, context?: DrawContext): ClepitElement | null;
+    private static drawFrame;
+    private static drawCard;
+    private static frame;
+    private static card;
+    private static validate;
+}
+//# sourceMappingURL=output.d.ts.map

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

@@ -0,0 +1,5 @@
+import { EmbedResolution, EmbedResolveOptions } from '../../../types';
+/** Resolves a URL to what it should render as. Pure — no network, no state, so
+ * the editor, the public renderer, exports and the Flutter app all agree. */
+export declare function resolveEmbed(raw: string, options?: EmbedResolveOptions): EmbedResolution;
+//# sourceMappingURL=providers.d.ts.map

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

@@ -0,0 +1,6 @@
+export declare const inputStylesKey = "file-input";
+export declare const outputStylesKey = "file-output";
+export declare const sharedStyle = "\n.clepit-file {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  border: 1px solid rgba(127, 127, 127, 0.35);\n  border-radius: 8px;\n  color: inherit;\n  text-decoration: none;\n}\n.clepit-file:hover {\n  background: rgba(127, 127, 127, 0.08);\n}\n.clepit-file__name {\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.clepit-file__size {\n  opacity: 0.6;\n  font-size: 12px;\n}\n";
+export declare const inputStyle = "\n.clepit-file {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  border: 1px solid rgba(127, 127, 127, 0.35);\n  border-radius: 8px;\n  color: inherit;\n  text-decoration: none;\n}\n.clepit-file:hover {\n  background: rgba(127, 127, 127, 0.08);\n}\n.clepit-file__name {\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.clepit-file__size {\n  opacity: 0.6;\n  font-size: 12px;\n}\n\n.clepit-file__upload {\n  border: 1px dashed rgba(127, 127, 127, 0.5);\n  background: transparent;\n  cursor: pointer;\n  font: inherit;\n  padding: 10px 12px;\n  border-radius: 8px;\n}\n";
+export declare const outputStyle = "\n.clepit-file {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  border: 1px solid rgba(127, 127, 127, 0.35);\n  border-radius: 8px;\n  color: inherit;\n  text-decoration: none;\n}\n.clepit-file:hover {\n  background: rgba(127, 127, 127, 0.08);\n}\n.clepit-file__name {\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.clepit-file__size {\n  opacity: 0.6;\n  font-size: 12px;\n}\n";
+//# sourceMappingURL=css.d.ts.map

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+export declare const outputStylesKey = "clepit-glance-output-styles";
+export declare const outputStyle = "\n.clepit-glance {\n  background: var(--clepit-surface);\n  border: 1px solid var(--clepit-border);\n  border-radius: 8px;\n  padding: 12px 14px;\n}\n\n/* A variant tints the surface only. Text keeps the reading colours the rest of\n * the page uses, so a glance stays as legible as the prose around it. */\n.clepit-glance[data-variant=\"info\"] {\n  background: var(--clepit-primary-bg);\n}\n\n.clepit-glance[data-variant=\"success\"] {\n  background: var(--clepit-success-bg);\n}\n\n.clepit-glance[data-variant=\"warning\"] {\n  background: var(--clepit-warning-bg);\n}\n\n.clepit-glance[data-variant=\"error\"] {\n  background: var(--clepit-error-bg);\n}\n\n.clepit-glance-caption {\n  color: var(--clepit-text-subtle);\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  margin: 0 0 8px;\n  text-transform: uppercase;\n}\n\n/* Labels form a single vertical rail whatever their length, so the reader scans\n * one column for the question and one for the answer. */\n.clepit-glance-rows {\n  column-gap: 16px;\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  margin: 0;\n  row-gap: 4px;\n}\n\n.clepit-glance-label {\n  color: var(--clepit-text-subtle);\n  font-size: 14px;\n}\n\n.clepit-glance-value {\n  color: var(--clepit-text);\n  font-size: 14px;\n  margin: 0;\n}\n\n.clepit-glance-value code {\n  background: var(--clepit-code-bg);\n  border-radius: 4px;\n  font-family: 'SF Mono', 'Monaco', 'Roboto Mono', monospace;\n  font-size: 13px;\n  padding: 1px 5px;\n}\n\n.clepit-glance-value a {\n  color: var(--clepit-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n\n.clepit-glance-value a:hover {\n  color: var(--clepit-primary-hover);\n  text-decoration: none;\n}\n\n/* A single-column stack below the narrowest tablet: a max-content label column\n * squeezes the value to a few characters once the viewport is phone width. */\n@media (max-width: 600px) {\n  .clepit-glance-rows {\n    grid-template-columns: 1fr;\n    row-gap: 2px;\n  }\n\n  .clepit-glance-value {\n    margin: 0 0 6px;\n  }\n}\n";
+export declare const inputStylesKey = "clepit-glance-input-styles";
+export declare const inputStyle = "\n.clepit-glance--input {\n  cursor: text;\n}\n\n.clepit-glance--input .clepit-glance-label:empty::before,\n.clepit-glance--input .clepit-glance-value:empty::before {\n  color: var(--clepit-text-subtle);\n  content: attr(data-placeholder);\n  font-style: italic;\n  pointer-events: none;\n}\n";
+//# sourceMappingURL=css.d.ts.map

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

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

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

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

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

@@ -0,0 +1,18 @@
+import { Backing, ClepitElement } from '../../../core/element';
+import { BlockClassNames, BlockStyles, GlanceData, OutputConfig } from '../../../types';
+/** The answers a reader most often arrives wanting, above the prose that
+ * explains them. A definition list rather than a table because the pairs are
+ * label-to-value, not rows of a record. */
+export declare class GlanceOutput {
+    static render(data: GlanceData, _config?: OutputConfig, styles?: BlockStyles['glance'], classNames?: BlockClassNames['glance']): HTMLElement;
+    /**
+     * The same drawing, against the element layer, so it runs with no browser.
+     *
+     * Row markup goes through the backing's own sanitiser rather than
+     * `sanitizeHtml`, which builds a DOM to parse with and therefore cannot run
+     * here.
+     */
+    static draw(data: GlanceData, backing?: Backing): ClepitElement | null;
+    private static validate;
+}
+//# sourceMappingURL=output.d.ts.map

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

@@ -0,0 +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\n.clepit-output-header[data-level=\"1\"] {\n  font-size: 2.5rem;\n  line-height: 1.2;\n}\n\n.clepit-output-header[data-level=\"2\"] {\n  font-size: 2rem;\n  line-height: 1.3;\n}\n\n.clepit-output-header[data-level=\"3\"] {\n  font-size: 1.75rem;\n  line-height: 1.4;\n}\n\n.clepit-output-header[data-level=\"4\"] {\n  font-size: 1.5rem;\n  line-height: 1.4;\n}\n\n.clepit-output-header[data-level=\"5\"] {\n  font-size: 1.25rem;\n  line-height: 1.4;\n}\n\n.clepit-output-header[data-level=\"6\"] {\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  .clepit-output-header[data-level=\"1\"] {\n    font-size: 2rem;\n  }\n\n  .clepit-output-header[data-level=\"2\"] {\n    font-size: 1.75rem;\n  }\n\n  .clepit-output-header[data-level=\"3\"] {\n    font-size: 1.5rem;\n  }\n}\n";
+//# sourceMappingURL=css.d.ts.map

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+export declare const inputStylesKey = "clepit-image-input-styles";
+export declare const inputStyle: string;
+export declare const outputStylesKey = "clepit-image-output-styles";
+export declare const outputStyle = "\n/* Output image styles */\n.clepit-output-image-container {\n  margin: 1rem 0;\n  text-align: center;\n}\n\n.clepit-output-image {\n  max-width: 100%;\n  height: auto;\n  border-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.clepit-output-image-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/* Image wrapper positioning */\n.clepit-image-wrapper {\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  margin-bottom: 10px;\n}\n.clepit-output-image-wrapper--left {\n  justify-content: flex-start;\n}\n\n.clepit-output-image-wrapper--center {\n  justify-content: center;\n}\n\n.clepit-output-image-wrapper--right {\n  justify-content: flex-end;\n}\n";
+//# sourceMappingURL=css.d.ts.map

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

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

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

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

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

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

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

@@ -0,0 +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";
+//# sourceMappingURL=css.d.ts.map

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

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

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

@@ -0,0 +1,16 @@
+import { InputConfig, ListData, ListType } from '../../../types';
+export declare class ListInput {
+    static placeholder: string;
+    static defaultType: ListType;
+    private static eventListenersMap;
+    private static addEventListener;
+    static save(element: HTMLElement): ListData;
+    static render(containerId: string, data?: ListData, config?: InputConfig<'list'>): HTMLElement;
+    private static createAndAppendListItem;
+    static changeType(list: HTMLElement, type: ListType, containerId: string): void;
+    private static cleanupEmptyItems;
+    static isEmpty(blockElement: HTMLElement): boolean;
+    static isEmptyData(data: ListData): boolean;
+    static destroy(containerId: string): void;
+}
+//# sourceMappingURL=input.d.ts.map

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

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

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

@@ -0,0 +1,5 @@
+export declare const outputStylesKey = "clepit-openapi-output-styles";
+export declare const outputStyle = "\n.clepit-openapi {\n  display: flex;\n  flex-direction: column;\n  gap: 40px;\n  margin: 16px 0;\n}\n\n/* Groups and operations are separated by rhythm, never by rules \u2014 the same\n * house style the tables follow. */\n.clepit-openapi-group {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n\n/* An eyebrow label rather than a heading, matching the uppercase group headings\n * in the docs sidebar so the reference echoes the nav \u2014 approved 2026-08-06\n * (direction 2B, \"Eyebrow\"). */\n.clepit-openapi-group-title {\n  color: var(--clepit-text-subtle);\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  margin: 0;\n  text-transform: uppercase;\n}\n\n.clepit-openapi-operation {\n  border: 1px solid var(--clepit-border);\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* The head is a tinted strip so an operation reads as one bounded unit in a\n * page of a dozen \u2014 approved 2026-08-06 (direction 1B, \"Panel\"). */\n.clepit-openapi-operation-head {\n  align-items: center;\n  background: color-mix(in oklab, var(--clepit-text) 4%, transparent);\n  border-bottom: 1px solid var(--clepit-border);\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  padding: 10px 14px;\n}\n\n.clepit-openapi-operation-body {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 14px;\n}\n\n.clepit-openapi-method {\n  border-radius: 4px;\n  color: var(--clepit-bg);\n  font-family: 'SF Mono', 'Monaco', 'Roboto Mono', monospace;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  padding: 3px 8px;\n}\n\n.clepit-openapi-method[data-method=\"GET\"] { background: var(--clepit-success); }\n.clepit-openapi-method[data-method=\"POST\"],\n.clepit-openapi-method[data-method=\"PUT\"],\n.clepit-openapi-method[data-method=\"PATCH\"] { background: var(--clepit-primary); }\n.clepit-openapi-method[data-method=\"DELETE\"] { background: var(--clepit-error); }\n\n.clepit-openapi-path {\n  color: var(--clepit-text);\n  font-family: 'SF Mono', 'Monaco', 'Roboto Mono', monospace;\n  font-size: 14px;\n}\n\n.clepit-openapi-host {\n  color: var(--clepit-text-subtle);\n  font-family: 'SF Mono', 'Monaco', 'Roboto Mono', monospace;\n  font-size: 12px;\n  margin-left: auto;\n}\n\n.clepit-openapi-summary {\n  color: var(--clepit-text);\n  font-size: 16px;\n  font-weight: 600;\n  margin: 0;\n}\n\n.clepit-openapi-description {\n  color: var(--clepit-text-muted);\n  margin: 0;\n}\n\n.clepit-openapi-section-title {\n  color: var(--clepit-text-subtle);\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  margin: 4px 0 0;\n  text-transform: uppercase;\n}\n\n/* A table has no scroll surface of its own \u2014 a cell the house style cannot\n * break (a long host URL) would otherwise force the table, and every ancestor\n * up to the page itself, wider than the viewport. */\n.clepit-openapi-table-scroll {\n  max-width: 100%;\n  overflow-x: auto;\n  border: 1px solid var(--clepit-border);\n  border-radius: 8px;\n  box-shadow: 0 1px 2px rgba(0,0,0,0.04);\n}\n\n.clepit-openapi-table {\n  border-collapse: collapse;\n  font-size: 14px;\n  width: 100%;\n}\n\n.clepit-openapi-table th {\n  background: var(--clepit-surface);\n  border-bottom: 1px solid var(--clepit-border);\n  color: var(--clepit-text-subtle);\n  font-weight: 600;\n  padding: 6px 8px;\n  text-align: left;\n}\n\n/* House style: no horizontal dividers between rows. Zebra striping is what\n * separates them instead. */\n.clepit-openapi-table td {\n  color: var(--clepit-text);\n  padding: 7px 8px;\n  vertical-align: top;\n}\n\n.clepit-openapi-table tr:nth-child(even) td {\n  background: var(--clepit-surface);\n}\n\n.clepit-openapi-name {\n  font-family: 'SF Mono', 'Monaco', 'Roboto Mono', monospace;\n  overflow-wrap: anywhere;\n}\n\n.clepit-openapi-type {\n  color: var(--clepit-text-muted);\n  font-family: 'SF Mono', 'Monaco', 'Roboto Mono', monospace;\n}\n\n.clepit-openapi-required {\n  color: var(--clepit-error);\n  font-size: 12px;\n}\n\n.clepit-openapi-badge {\n  background: var(--clepit-primary-bg);\n  border-radius: 4px;\n  color: var(--clepit-primary);\n  font-size: 12px;\n  padding: 2px 8px;\n}\n\n.clepit-openapi-status {\n  font-family: 'SF Mono', 'Monaco', 'Roboto Mono', monospace;\n  font-weight: 600;\n}\n\n.clepit-openapi-status[data-kind=\"success\"] { color: var(--clepit-success); }\n.clepit-openapi-status[data-kind=\"client\"] { color: var(--clepit-warning); }\n.clepit-openapi-status[data-kind=\"server\"] { color: var(--clepit-error); }\n\n/* One response at a time behind a status tab strip \u2014 approved 2026-08-06\n * (direction 1B, \"Tabbed\"). */\n.clepit-openapi-responses {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.clepit-openapi-response-tabs {\n  border-bottom: 1px solid var(--clepit-border);\n  display: flex;\n  flex-wrap: wrap;\n  gap: 16px;\n  margin-bottom: 4px;\n}\n\n.clepit-openapi-response-tab {\n  background: none;\n  border: 0;\n  border-bottom: 2px solid transparent;\n  color: var(--clepit-text-muted);\n  cursor: pointer;\n  font-family: 'SF Mono', 'Monaco', 'Roboto Mono', monospace;\n  font-size: 12px;\n  margin-bottom: -1px;\n  padding: 6px 0;\n}\n\n.clepit-openapi-response-tab[aria-selected=\"true\"] {\n  border-bottom-color: var(--clepit-primary);\n  color: var(--clepit-text);\n  font-weight: 600;\n}\n\n.clepit-openapi-response-tab:focus-visible {\n  outline: 2px solid var(--clepit-primary);\n  outline-offset: 2px;\n}\n\n.clepit-openapi-response-description {\n  color: var(--clepit-text-muted);\n  margin: 0;\n}\n\n/* Tabs hide three quarters of the contract from a printed page, so print gets\n * every response expanded and the strip removed. */\n@media print {\n  .clepit-openapi-response-tabs { display: none; }\n  .clepit-openapi-response { display: block !important; }\n  .clepit-openapi-response + .clepit-openapi-response { margin-top: 10px; }\n}\n\n.clepit-openapi-servers {\n  color: var(--clepit-text-muted);\n  font-size: 14px;\n  margin: 0;\n}\n";
+export declare const inputStylesKey = "clepit-openapi-input-styles";
+export declare const inputStyle = "\n.clepit-openapi-input {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.clepit-openapi__source {\n  background: var(--clepit-code-bg);\n  border: 1px solid var(--clepit-code-border);\n  border-radius: 6px;\n  color: var(--clepit-code-text);\n  font-family: 'SF Mono', 'Monaco', 'Roboto Mono', monospace;\n  font-size: 13px;\n  max-height: 240px;\n  overflow: auto;\n  padding: 12px;\n  white-space: pre-wrap;\n}\n\n.clepit-openapi__source[data-placeholder]:empty::before {\n  color: var(--clepit-text-subtle);\n  content: attr(data-placeholder);\n  font-style: italic;\n  pointer-events: none;\n}\n";
+//# sourceMappingURL=css.d.ts.map

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { Backing, ClepitElement } from '../../../core/element';
+import { SchemaNode } from './schema';
+import { BlockClassNames, BlockStyles, OpenApiData, OutputConfig } from '../../../types';
+/** A request payload reads as the JSON a caller has to send, not as a list of
+ * field names. Types stand in for values, and an optional key carries `?` so the
+ * shape stays lossless about what may be omitted. */
+export declare const toJsonShape: (node: SchemaNode, depth?: number) => unknown;
+export declare class OpenApiOutput {
+    /** The whole reference as markup, with no browser involved. Every code sample
+     * inside it draws through the same layer, so a published API reference and
+     * the editor show the same document. */
+    static draw(data: OpenApiData, backing?: Backing): ClepitElement | null;
+    static render(data: OpenApiData, _config?: OutputConfig, styles?: BlockStyles['openapi'], classNames?: BlockClassNames['openapi']): HTMLElement;
+    /**
+     * The response tabs become switchable.
+     *
+     * The drawing already opens on the first response, so a page that never runs
+     * this is readable rather than blank; this only adds the ability to move
+     * between them.
+     */
+    private static attach;
+    private static validate;
+}
+//# sourceMappingURL=output.d.ts.map

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

@@ -0,0 +1,17 @@
+export type SchemaNode = {
+    children: SchemaNode[];
+    cyclic: boolean;
+    description?: string;
+    enum?: string[];
+    format?: string;
+    name?: string;
+    nullable: boolean;
+    ref?: string;
+    required: boolean;
+    type: string;
+};
+/** Resolves `$ref`s against `components.schemas` and flattens composition into
+ * one renderable tree. Cycles terminate — a self-referencing schema renders a
+ * reference to itself rather than recursing. */
+export declare const toSchemaTree: (schema: unknown, schemas: Record<string, unknown>) => SchemaNode;
+//# sourceMappingURL=schema.d.ts.map

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

@@ -0,0 +1,5 @@
+import { OpenApiOperation } from './spec';
+import { CodeLanguage, CodeVariant } from '../../../types';
+export declare const SNIPPET_LANGUAGES: CodeLanguage[];
+export declare const buildSnippets: (operation: OpenApiOperation, server: string, languages: CodeLanguage[]) => CodeVariant[];
+//# sourceMappingURL=snippets.d.ts.map