@analogjs/content 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/lib/devtools/content-devtools.styles.css

@@ -0,0 +1,194 @@
+#analog-content-devtools {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 99999;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  color: #e4e4e7;
+  pointer-events: none;
+}
+
+#analog-content-devtools * {
+  box-sizing: border-box;
+}
+
+#analog-content-devtools .acd-toggle {
+  position: fixed;
+  bottom: 12px;
+  right: 12px;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: #18181b;
+  border: 1px solid #3f3f46;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  opacity: 0.7;
+  transition: opacity 0.15s;
+}
+
+#analog-content-devtools .acd-toggle:hover {
+  opacity: 1;
+}
+
+#analog-content-devtools .acd-toggle svg {
+  width: 20px;
+  height: 20px;
+  fill: #a1a1aa;
+}
+
+#analog-content-devtools .acd-panel {
+  position: fixed;
+  bottom: 56px;
+  right: 12px;
+  width: 420px;
+  max-height: 70vh;
+  background: #18181b;
+  border: 1px solid #3f3f46;
+  border-radius: 10px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  pointer-events: auto;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+#analog-content-devtools .acd-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: #27272a;
+  border-bottom: 1px solid #3f3f46;
+  font-weight: 600;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #a1a1aa;
+}
+
+#analog-content-devtools .acd-tabs {
+  display: flex;
+  gap: 2px;
+  padding: 4px 8px;
+  background: #27272a;
+  border-bottom: 1px solid #3f3f46;
+}
+
+#analog-content-devtools .acd-tab {
+  padding: 4px 10px;
+  border-radius: 4px;
+  background: transparent;
+  border: none;
+  color: #71717a;
+  cursor: pointer;
+  font-size: 11px;
+  font-family: inherit;
+}
+
+#analog-content-devtools .acd-tab:hover {
+  color: #a1a1aa;
+}
+
+#analog-content-devtools .acd-tab[data-active='true'] {
+  background: #3f3f46;
+  color: #e4e4e7;
+}
+
+#analog-content-devtools .acd-body {
+  overflow-y: auto;
+  padding: 12px;
+  flex: 1;
+}
+
+#analog-content-devtools .acd-section {
+  margin-bottom: 12px;
+}
+
+#analog-content-devtools .acd-section-title {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #71717a;
+  margin-bottom: 6px;
+}
+
+#analog-content-devtools .acd-kv {
+  display: flex;
+  justify-content: space-between;
+  padding: 2px 0;
+  border-bottom: 1px solid #27272a;
+}
+
+#analog-content-devtools .acd-key {
+  color: #a1a1aa;
+}
+
+#analog-content-devtools .acd-value {
+  color: #22d3ee;
+}
+
+#analog-content-devtools .acd-value.acd-fast {
+  color: #4ade80;
+}
+
+#analog-content-devtools .acd-value.acd-slow {
+  color: #fb923c;
+}
+
+#analog-content-devtools .acd-toc-item {
+  padding: 2px 0;
+  cursor: pointer;
+  color: #a1a1aa;
+}
+
+#analog-content-devtools .acd-toc-item:hover {
+  color: #e4e4e7;
+}
+
+#analog-content-devtools .acd-toc-item a {
+  color: inherit;
+  text-decoration: none;
+}
+
+#analog-content-devtools .acd-pre {
+  background: #09090b;
+  border: 1px solid #27272a;
+  border-radius: 6px;
+  padding: 8px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-size: 11px;
+  line-height: 1.5;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+#analog-content-devtools .acd-empty {
+  color: #52525b;
+  font-style: italic;
+}
+
+#analog-content-devtools .acd-badge {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+#analog-content-devtools .acd-badge-experimental {
+  background: #422006;
+  color: #fb923c;
+}
+
+#analog-content-devtools .acd-badge-renderer {
+  background: #042f2e;
+  color: #2dd4bf;
+}

package/types/md4x/src/index.d.ts

@@ -0,0 +1,5 @@
+export { withMd4xRenderer, withMd4xWasmRenderer } from './lib/provide-md4x';
+export { Md4xContentRendererService, MD4X_RENDERER_OPTIONS, } from './lib/md4x-content-renderer.service';
+export type { Md4xRendererOptions } from './lib/md4x-content-renderer.service';
+export { Md4xWasmContentRendererService } from './lib/md4x-wasm-content-renderer.service';
+export { streamMarkdown } from './lib/streaming-markdown-renderer';

package/types/md4x/src/lib/md4x-content-renderer.service.d.ts

@@ -0,0 +1,33 @@
+import { InjectionToken } from '@angular/core';
+import { ContentRenderer, RenderedContent, TableOfContentItem } from '../../../src/lib/content-renderer';
+import * as i0 from "@angular/core";
+/**
+ * Options for the experimental md4x-based content renderer.
+ *
+ * @experimental md4x integration is experimental and may change in future releases.
+ */
+export interface Md4xRendererOptions {
+    /** Heal incomplete markdown (useful for streaming/LLM content). */
+    heal?: boolean;
+    /** Custom code block highlighter. Receives raw code and block metadata,
+     *  returns highlighted HTML or undefined to keep default rendering. */
+    highlighter?: (code: string, block: {
+        lang: string;
+        filename?: string;
+        highlights?: number[];
+    }) => string | undefined;
+}
+export declare const MD4X_RENDERER_OPTIONS: InjectionToken<Md4xRendererOptions>;
+/**
+ * Content renderer backed by md4x (C-based CommonMark parser compiled with Zig).
+ * 50-70x faster than marked for complex documents.
+ *
+ * @experimental md4x integration is experimental and may change in future releases.
+ */
+export declare class Md4xContentRendererService extends ContentRenderer {
+    private options;
+    render(content: string): Promise<RenderedContent>;
+    getContentHeadings(content: string): TableOfContentItem[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<Md4xContentRendererService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<Md4xContentRendererService>;
+}

package/types/md4x/src/lib/md4x-wasm-content-renderer.service.d.ts

@@ -0,0 +1,16 @@
+import { ContentRenderer, RenderedContent, TableOfContentItem } from '../../../src/lib/content-renderer';
+import * as i0 from "@angular/core";
+/**
+ * Content renderer backed by md4x/wasm for client-side (browser) rendering.
+ * ~100KB gzip, 3-6x faster than marked in the browser.
+ *
+ * @experimental md4x integration is experimental and may change in future releases.
+ */
+export declare class Md4xWasmContentRendererService extends ContentRenderer {
+    private options;
+    private initPromise;
+    render(content: string): Promise<RenderedContent>;
+    getContentHeadings(content: string): TableOfContentItem[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<Md4xWasmContentRendererService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<Md4xWasmContentRendererService>;
+}

package/types/md4x/src/lib/provide-md4x.d.ts

@@ -0,0 +1,26 @@
+import { Provider } from '@angular/core';
+import type { Md4xRendererOptions } from './md4x-content-renderer.service';
+/**
+ * Provides the experimental md4x-based content renderer (NAPI, server/build-time).
+ *
+ * @experimental md4x integration is experimental and may change in future releases.
+ *
+ * @example
+ * ```typescript
+ * provideContent(withMd4xRenderer());
+ * provideContent(withMd4xRenderer({ heal: true }));
+ * ```
+ */
+export declare function withMd4xRenderer(options?: Md4xRendererOptions): Provider;
+/**
+ * Provides the experimental md4x WASM content renderer (browser/CSR).
+ * ~100KB gzip, 3-6x faster than marked in the browser.
+ *
+ * @experimental md4x integration is experimental and may change in future releases.
+ *
+ * @example
+ * ```typescript
+ * provideContent(withMd4xWasmRenderer());
+ * ```
+ */
+export declare function withMd4xWasmRenderer(options?: Md4xRendererOptions): Provider;

package/types/md4x/src/lib/streaming-markdown-renderer.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Transforms a stream of markdown chunks into a stream of rendered HTML.
+ * Uses md4x's `heal()` to fix incomplete markdown from streaming sources
+ * (LLMs, collaborative editing) so each emitted HTML chunk is valid.
+ *
+ * @experimental Streaming markdown support is experimental and may change in future releases.
+ *
+ * @example
+ * ```typescript
+ * // In a Nitro API route
+ * import { streamMarkdown } from '@analogjs/content';
+ *
+ * export default defineEventHandler(async (event) => {
+ *   const llmStream = getAIStream(prompt);
+ *   return streamMarkdown(llmStream, { heal: true });
+ * });
+ * ```
+ */
+export declare function streamMarkdown(input: ReadableStream<string>, options?: {
+    heal?: boolean;
+}): Promise<ReadableStream<string>>;

package/types/mdc/src/index.d.ts

@@ -0,0 +1,2 @@
+export { MdcRendererDirective } from './lib/mdc-renderer.directive';
+export { MDC_COMPONENTS, withMdcComponents, } from './lib/mdc-component-registry';

package/types/mdc/src/lib/mdc-component-registry.d.ts

@@ -0,0 +1,25 @@
+import { InjectionToken, Type, Provider } from '@angular/core';
+/**
+ * Registry mapping MDC component names to lazy-loaded Angular components.
+ *
+ * @experimental MDC component support is experimental and may change in future releases.
+ */
+export declare const MDC_COMPONENTS: InjectionToken<Map<string, () => Promise<Type<unknown>>>>;
+/**
+ * Provides a registry of Angular components that can be used in MDC
+ * (Markdown Components) syntax within markdown content.
+ *
+ * @experimental MDC component support is experimental and may change in future releases.
+ *
+ * @example
+ * ```typescript
+ * provideContent(
+ *   withMd4xRenderer(),
+ *   withMdcComponents({
+ *     alert: () => import('./components/alert.component').then(m => m.AlertComponent),
+ *     card: () => import('./components/card.component').then(m => m.CardComponent),
+ *   }),
+ * );
+ * ```
+ */
+export declare function withMdcComponents(components: Record<string, () => Promise<Type<unknown>>>): Provider;

package/types/mdc/src/lib/mdc-renderer.directive.d.ts

@@ -0,0 +1,33 @@
+import { InputSignal } from '@angular/core';
+import * as i0 from "@angular/core";
+type ComarkNode = string | [string | null, Record<string, unknown>, ...ComarkNode[]];
+/**
+ * Directive that renders MDC (Markdown Components) AST nodes as Angular components.
+ *
+ * Walks the ComarkTree AST from md4x's `parseAST()`, matches component nodes
+ * to the registered MDC_COMPONENTS map, and instantiates them via
+ * `ViewContainerRef.createComponent()` with MDC attributes bound as inputs.
+ *
+ * @experimental MDC component support is experimental and may change in future releases.
+ *
+ * @example
+ * ```html
+ * <div [mdcAst]="parsedAst"></div>
+ * ```
+ */
+export declare class MdcRendererDirective {
+    readonly ast: InputSignal<{
+        nodes: ComarkNode[];
+    } | null>;
+    private readonly viewContainer;
+    private readonly renderer;
+    private readonly el;
+    private readonly components;
+    private renderId;
+    constructor();
+    private renderNodes;
+    private renderNode;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MdcRendererDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MdcRendererDirective, "[mdcAst]", never, { "ast": { "alias": "mdcAst"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export {};

package/types/og/src/index.d.ts

@@ -0,0 +1,2 @@
+export { ImageResponse } from './lib/og';
+export { ImageResponseOptions } from './lib/options';

package/types/og/src/lib/og.d.ts

@@ -0,0 +1,5 @@
+import { ImageResponseOptions } from './options';
+export declare const generateImage: (element: string, options: ImageResponseOptions) => Promise<Buffer>;
+export declare class ImageResponse extends Response {
+    constructor(element: string, options?: ImageResponseOptions);
+}

package/types/og/src/lib/options.d.ts

@@ -0,0 +1,11 @@
+import type { SatoriOptions } from 'satori';
+export interface ImageResponseOptions {
+    width?: number;
+    height?: number;
+    fonts?: SatoriOptions['fonts'];
+    debug?: boolean;
+    status?: number;
+    statusText?: string;
+    headers?: Record<string, string>;
+    tailwindConfig?: SatoriOptions['tailwindConfig'];
+}

package/types/prism-highlighter/src/index.d.ts

@@ -0,0 +1,8 @@
+import { Provider } from '@angular/core';
+import { PrismHighlighter } from './lib/prism-highlighter';
+import 'prismjs';
+import 'prismjs/plugins/toolbar/prism-toolbar';
+import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard';
+import './lib/prism/angular';
+export { PrismHighlighter };
+export declare function withPrismHighlighter(): Provider[];

package/types/prism-highlighter/src/lib/prism/angular.d.ts

@@ -0,0 +1 @@
+export {};

package/types/prism-highlighter/src/lib/prism-highlighter.d.ts

@@ -0,0 +1,8 @@
+import { MarkedContentHighlighter } from '@analogjs/content';
+import * as i0 from "@angular/core";
+export declare class PrismHighlighter extends MarkedContentHighlighter {
+    augmentCodeBlock(code: string, lang: string): string;
+    getHighlightExtension(): import('marked').MarkedExtension;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismHighlighter, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PrismHighlighter>;
+}

package/types/resources/src/content-file-resource.d.ts

@@ -0,0 +1,37 @@
+import type { StandardSchemaV1 } from '@standard-schema/spec';
+import { Signal, type ResourceRef } from '@angular/core';
+import { ContentFile } from '@analogjs/content';
+export interface ContentFileResourceResult<Attributes extends Record<string, any> = Record<string, any>> extends ContentFile<Attributes | Record<string, never>> {
+    toc: Array<{
+        id: string;
+        level: number;
+        text: string;
+    }>;
+}
+type ContentFileParams = Signal<string | {
+    customFilename: string;
+}>;
+/**
+ * Resource for requesting an individual content file.
+ *
+ * @example
+ * ```typescript
+ * // Without schema (existing behavior)
+ * const post = contentFileResource<BlogAttributes>();
+ *
+ * // With schema validation
+ * import * as v from 'valibot';
+ * const BlogSchema = v.object({
+ *   title: v.string(),
+ *   date: v.pipe(v.string(), v.isoDate()),
+ * });
+ * const post = contentFileResource({ schema: BlogSchema });
+ * ```
+ */
+export declare function contentFileResource<Attributes extends Record<string, any> = Record<string, any>>(params?: ContentFileParams, fallback?: string): ResourceRef<ContentFileResourceResult<Attributes> | undefined>;
+export declare function contentFileResource<TSchema extends StandardSchemaV1>(options: {
+    params?: ContentFileParams;
+    fallback?: string;
+    schema: TSchema;
+}): ResourceRef<ContentFileResourceResult<StandardSchemaV1.InferOutput<TSchema> & Record<string, any>> | undefined>;
+export {};

package/types/resources/src/content-files-resource.d.ts

@@ -0,0 +1,3 @@
+import { ResourceRef } from '@angular/core';
+import { ContentFile, InjectContentFilesFilterFunction } from '@analogjs/content';
+export declare function contentFilesResource<Attributes extends Record<string, any>>(filterFn?: InjectContentFilesFilterFunction<Attributes> | undefined): ResourceRef<ContentFile<Attributes>[] | undefined>;

package/types/resources/src/index.d.ts

@@ -0,0 +1,2 @@
+export { contentFilesResource } from './content-files-resource';
+export { contentFileResource } from './content-file-resource';

package/types/shiki-highlighter/src/index.d.ts

@@ -0,0 +1,7 @@
+import { Provider } from '@angular/core';
+import type { BundledLanguage, BundledTheme, CodeOptionsMeta, CodeOptionsMultipleThemes, CodeOptionsSingleTheme, CodeToHastOptionsCommon } from 'shiki';
+export type ShikiHighlightOptions = Partial<Omit<CodeToHastOptionsCommon<BundledLanguage>, 'lang'>> & CodeOptionsMeta & Partial<CodeOptionsSingleTheme<BundledTheme>> & Partial<CodeOptionsMultipleThemes<BundledTheme>>;
+export type WithShikiHighlighterOptions = ShikiHighlightOptions & {
+    container?: string;
+};
+export declare function withShikiHighlighter(_opts?: WithShikiHighlighterOptions): Provider[];

package/types/src/index.d.ts

@@ -0,0 +1,18 @@
+export { AnchorNavigationDirective } from './lib/anchor-navigation.directive';
+export { injectContent } from './lib/content';
+export type { ContentFile } from './lib/content-file';
+export { ContentRenderer, NoopContentRenderer } from './lib/content-renderer';
+export type { RenderedContent, TableOfContentItem, } from './lib/content-renderer';
+export { injectContentFiles } from './lib/inject-content-files';
+export type { InjectContentFilesFilterFunction } from './lib/inject-content-files';
+export { MarkdownContentRendererService } from './lib/markdown-content-renderer.service';
+export { provideContent, withMarkdownRenderer, MERMAID_IMPORT_TOKEN, } from './lib/provide-content';
+export { default as MarkdownRouteComponent } from './lib/markdown-route.component';
+export { default as MarkdownComponent } from './lib/markdown.component';
+export { parseRawContentFile, parseRawContentFileAsync, FrontmatterValidationError, } from './lib/parse-raw-content-file';
+export { MarkedSetupService } from './lib/marked-setup.service';
+export { MarkedContentHighlighter, withHighlighter, } from './lib/marked-content-highlighter';
+export { injectContentFilesMap } from './lib/inject-content-files';
+export { injectContentListLoader, withContentListLoader, CONTENT_LIST_LOADER, } from './lib/content-list-loader';
+export { injectContentFileLoader, withContentFileLoader, CONTENT_FILE_LOADER, } from './lib/content-file-loader';
+export { contentDevToolsPlugin, DevToolsContentRenderer, withContentDevTools, } from './lib/devtools/index';

package/types/src/lib/anchor-navigation.directive.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class AnchorNavigationDirective {
+    private readonly document;
+    private readonly location;
+    private readonly router;
+    handleNavigation(element: EventTarget | null): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AnchorNavigationDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AnchorNavigationDirective, "[analogAnchorNavigation]", never, {}, {}, never, never, true, never>;
+}

package/types/src/lib/content-file-loader.d.ts

@@ -0,0 +1,6 @@
+import { InjectionToken, Provider } from '@angular/core';
+type ContentFileLoaderFunction = () => Promise<Record<string, () => Promise<string>>>;
+export declare const CONTENT_FILE_LOADER: InjectionToken<ContentFileLoaderFunction>;
+export declare function injectContentFileLoader(): ContentFileLoaderFunction;
+export declare function withContentFileLoader(): Provider;
+export {};

package/types/src/lib/content-file.d.ts

@@ -0,0 +1,8 @@
+import { TableOfContentItem } from './content-renderer';
+export interface ContentFile<Attributes extends Record<string, any> = Record<string, any>> {
+    filename: string;
+    slug: string;
+    content?: string | object;
+    attributes: Attributes;
+    toc?: TableOfContentItem[];
+}

package/types/src/lib/content-files-list-token.d.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+import { ContentFile } from './content-file';
+export declare const CONTENT_FILES_LIST_TOKEN: InjectionToken<ContentFile[]>;

package/types/src/lib/content-files-token.d.ts

@@ -0,0 +1,3 @@
+import { InjectionToken, Signal } from '@angular/core';
+export declare const CONTENT_FILES_TOKEN: InjectionToken<Record<string, () => Promise<string>>>;
+export declare const CONTENT_FILES_MAP_TOKEN: InjectionToken<Signal<Record<string, () => Promise<string>>>>;

package/types/src/lib/content-list-loader.d.ts

@@ -0,0 +1,7 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { ContentFile } from './content-file';
+type ContentListLoaderFunction<Attributes extends Record<string, any>> = () => Promise<ContentFile<Attributes>[]>;
+export declare const CONTENT_LIST_LOADER: InjectionToken<ContentListLoaderFunction<any>>;
+export declare function injectContentListLoader<Attributes extends Record<string, any>>(): ContentListLoaderFunction<Attributes>;
+export declare function withContentListLoader(): Provider;
+export {};

package/types/src/lib/content-renderer.d.ts

@@ -0,0 +1,33 @@
+import * as i0 from "@angular/core";
+export type TableOfContentItem = {
+    id: string;
+    level: number;
+    text: string;
+};
+export type RenderedContent = {
+    content: string;
+    toc: TableOfContentItem[];
+};
+export declare abstract class ContentRenderer {
+    render(content: string): Promise<RenderedContent>;
+    getContentHeadings(_content: string): TableOfContentItem[];
+    enhance(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ContentRenderer, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ContentRenderer>;
+}
+export declare class NoopContentRenderer implements ContentRenderer {
+    private readonly transferState;
+    private contentId;
+    /**
+     * Generates a hash from the content string
+     * to be used with the transfer state
+     */
+    private generateHash;
+    render(content: string): Promise<RenderedContent>;
+    enhance(): void;
+    getContentHeadings(content: string): TableOfContentItem[];
+    private extractHeadings;
+    private extractHeadingsFromMarkdown;
+    private extractHeadingsFromHtml;
+    private makeSlug;
+}

package/types/src/lib/content.d.ts

@@ -0,0 +1,14 @@
+import { Observable } from 'rxjs';
+import { ContentFile } from './content-file';
+/**
+ * Retrieves the static content using the provided param and/or prefix.
+ *
+ * @param param route parameter (default: 'slug')
+ * @param fallback fallback text if content file is not found (default: 'No Content Found')
+ */
+export declare function injectContent<Attributes extends Record<string, any> = Record<string, any>>(param?: string | {
+    param: string;
+    subdirectory: string;
+} | {
+    customFilename: string;
+}, fallback?: string): Observable<ContentFile<Attributes | Record<string, never>>>;

package/types/src/lib/devtools/content-devtools-plugin.d.ts

@@ -0,0 +1,23 @@
+import type { Plugin } from 'vite';
+/**
+ * Vite plugin that injects the Analog Content DevTools panel in dev mode.
+ *
+ * Shows render time, frontmatter data, TOC, and content stats in a floating
+ * panel. Dev-only — completely stripped from production builds.
+ *
+ * @experimental Content DevTools is experimental and may change in future releases.
+ *
+ * @example
+ * ```typescript
+ * // vite.config.ts
+ * import { contentDevToolsPlugin } from '@analogjs/content/devtools';
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     analog({ ... }),
+ *     contentDevToolsPlugin(),
+ *   ],
+ * });
+ * ```
+ */
+export declare function contentDevToolsPlugin(): Plugin;

package/types/src/lib/devtools/content-devtools-renderer.d.ts

@@ -0,0 +1,23 @@
+import { InjectionToken } from '@angular/core';
+import { ContentRenderer, RenderedContent, TableOfContentItem } from '../content-renderer';
+import * as i0 from "@angular/core";
+/**
+ * Token for the wrapped renderer that DevTools delegates to.
+ * @internal
+ */
+export declare const DEVTOOLS_INNER_RENDERER: InjectionToken<ContentRenderer>;
+/**
+ * Wraps an existing ContentRenderer to collect timing and metadata for the
+ * Content DevTools panel. Dispatches a custom event on the window after
+ * each render so the devtools client can update.
+ *
+ * @experimental Content DevTools is experimental and may change in future releases.
+ */
+export declare class DevToolsContentRenderer extends ContentRenderer {
+    private readonly inner;
+    render(content: string): Promise<RenderedContent>;
+    getContentHeadings(content: string): TableOfContentItem[];
+    enhance(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DevToolsContentRenderer, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DevToolsContentRenderer>;
+}

package/types/src/lib/devtools/index.d.ts

@@ -0,0 +1,23 @@
+import { Provider, Type } from '@angular/core';
+import { ContentRenderer } from '../content-renderer';
+export { contentDevToolsPlugin } from './content-devtools-plugin';
+export { DevToolsContentRenderer, DEVTOOLS_INNER_RENDERER, } from './content-devtools-renderer';
+/**
+ * Wraps the given ContentRenderer with DevTools instrumentation.
+ *
+ * The supplied renderer class is provided under DEVTOOLS_INNER_RENDERER and
+ * DevToolsContentRenderer becomes the new ContentRenderer, delegating
+ * all calls and collecting timing data.
+ *
+ * @param innerRenderer The renderer class to wrap with devtools instrumentation.
+ *
+ * @experimental Content DevTools is experimental and may change in future releases.
+ *
+ * @example
+ * ```typescript
+ * provideContent(
+ *   withContentDevTools(NoopContentRenderer),
+ * );
+ * ```
+ */
+export declare function withContentDevTools(innerRenderer: Type<ContentRenderer>): Provider;