@djangocfg/ui-tools 2.1.298 → 2.1.300

package/dist/index.d.cts

@@ -108,6 +108,47 @@ declare function createLazyComponent<P extends object>(loader: () => Promise<{
     default: ComponentType<P>;
 }>, options?: CreateLazyComponentOptions<P>): ComponentType<P>;
 
+/**
+ * Declarative rule for handling a custom URL scheme inside markdown.
+ *
+ * Each rule owns one href shape (e.g. `cmdop://machine/<uuid>`,
+ * `obsidian://open?path=…`) and decides:
+ *
+ *   1. Whether the URL scheme survives sanitize (`protocols`).
+ *   2. How to massage the source markdown before render
+ *      (`preprocess` — optional; useful for stripping decorative
+ *      prefixes like the `@` in `@[label](href)` so the chip alone
+ *      reads as the mention indicator).
+ *   3. Which links it owns (`match`), and how to render them
+ *      (`render`, returning JSX).
+ *
+ * Rules compose: pass an array, and the renderer iterates top-to-bottom
+ * picking the first `match` hit per `<a>`. Anything no rule claims
+ * falls through to the built-in chat-link styling (or to a custom
+ * `customComponents.a` if both are provided).
+ *
+ * Prefer `linkRules` over `customComponents` + `extraHrefProtocols` —
+ * it's the same pieces with the boilerplate removed.
+ */
+interface LinkRule {
+    /** Pre-process the raw markdown source before any rendering happens.
+     *  Pure / synchronous; identity-return when no transform applies. */
+    preprocess?: (source: string) => string;
+    /** Predicate against the resolved href. */
+    match: (href: string) => boolean;
+    /** Render the link this rule owns. `children` is the link's label
+     *  (markdown-rendered React content). */
+    render: (props: {
+        href: string;
+        children: React__default.ReactNode;
+        isUser: boolean;
+    }) => React__default.ReactNode;
+    /** URL scheme(s) to whitelist on the sanitize side, e.g. `['cmdop']`.
+     *  Bare schemes only — no `://`. Optional; omit for `http(s)` rules. */
+    protocols?: readonly string[];
+    /** Diagnostic label, surfaced in dev warnings. Optional. */
+    name?: string;
+}
 interface MarkdownMessageProps {
     /** Markdown content to render */
     content: string;
@@ -122,26 +163,9 @@ interface MarkdownMessageProps {
      *
      * Use this when you need custom rendering for a specific tag without
      * losing the chat-tuned defaults (links, code blocks with copy, etc).
-     * Example — render `cmdop://machine/<uuid>` links as a chip:
-     *
-     * ```tsx
-     * <MarkdownMessage
-     *   content={text}
-     *   extraHrefProtocols={['cmdop']}
-     *   customComponents={{
-     *     a: ({ href, children }) =>
-     *       href?.startsWith('cmdop://machine/')
-     *         ? <MachineChip href={href}>{children}</MachineChip>
-     *         : <a href={href}>{children}</a>,
-     *   }}
-     * />
-     * ```
      *
-     * If you provide a renderer for a tag the built-in version is replaced
-     * for that tag; other tags keep the defaults.
-     *
-     * Important: when `customComponents` is set, the plain-text fast path
-     * is bypassed for the affected content so your renderers always run.
+     * For custom URL-scheme link handling, prefer `linkRules` — it's the
+     * same ergonomics with the per-consumer boilerplate removed.
      */
     customComponents?: Partial<Components>;
     /**
@@ -156,55 +180,51 @@ interface MarkdownMessageProps {
      * HTML can do via clicks. Stick to schemes you control.
      */
     extraHrefProtocols?: readonly string[];
+    /**
+     * Declarative link rules — preferred over `customComponents` +
+     * `extraHrefProtocols` for chat-style apps that want pluggable
+     * URL-scheme handling without re-implementing the custom-`a`
+     * boilerplate per consumer.
+     *
+     * If you provide both `linkRules` and `extraHrefProtocols`, the
+     * effective protocol list is the union of the two.
+     */
+    linkRules?: readonly LinkRule[];
     /**
      * Enable collapsible "Read more..." functionality
-     * When enabled, long content will be truncated with a toggle button
      * @default false
      */
     collapsible?: boolean;
-    /**
-     * Maximum character length before showing "Read more..."
-     * Only applies when collapsible is true
-     * If both maxLength and maxLines are set, the stricter limit applies
-     */
+    /** Maximum character length before showing "Read more...". */
     maxLength?: number;
-    /**
-     * Maximum number of lines before showing "Read more..."
-     * Only applies when collapsible is true
-     * If both maxLength and maxLines are set, the stricter limit applies
-     */
+    /** Maximum number of lines before showing "Read more...". */
     maxLines?: number;
-    /**
-     * Custom "Read more" button text
-     * @default "Read more..."
-     */
+    /** Custom "Read more" button text. @default "Read more..." */
     readMoreLabel?: string;
-    /**
-     * Custom "Show less" button text
-     * @default "Show less"
-     */
+    /** Custom "Show less" button text. @default "Show less" */
     showLessLabel?: string;
-    /**
-     * Start expanded (only applies when collapsible is true)
-     * @default false
-     */
+    /** Start expanded (only when `collapsible` is true). @default false */
     defaultExpanded?: boolean;
-    /**
-     * Callback when collapsed state changes
-     */
+    /** Callback when collapsed state changes */
     onCollapseChange?: (isCollapsed: boolean) => void;
 }
+
 /**
- * MarkdownMessage - Renders markdown content with syntax highlighting and GFM support
+ * MarkdownMessage — chat-tuned markdown renderer.
  *
  * Features:
- * - GitHub Flavored Markdown (GFM) support
- * - Syntax highlighted code blocks with copy button
- * - Mermaid diagram rendering
- * - Tables, lists, blockquotes
- * - User/assistant styling modes
- * - Plain text optimization (skips ReactMarkdown for simple text)
- * - Collapsible "Read more..." for long messages
+ * - GitHub Flavored Markdown (GFM) via remark-gfm
+ * - Syntax-highlighted code blocks with Copy button
+ * - Mermaid diagram rendering (` ```mermaid ` fence)
+ * - Tables, lists, blockquotes scaled for chat density
+ * - User vs assistant styling modes (`isUser`)
+ * - Plain-text fast path: skips ReactMarkdown when content has no
+ *   markdown syntax (cheaper render, preserves newlines via CSS)
+ * - Optional collapsible "Read more..." for long messages
+ *
+ * Custom URL schemes (chat mentions, deep-links, custom file viewers)
+ * are best handled with the declarative `linkRules` prop — see the
+ * type definition in `./types.ts` and the storybook for examples.
  *
  * @example
  * ```tsx
@@ -213,17 +233,20 @@ interface MarkdownMessageProps {
  * // User message styling
  * <MarkdownMessage content="Some content" isUser />
  *
- * // Collapsible long content (for chat apps)
+ * // Custom URL scheme via linkRules
  * <MarkdownMessage
- *   content={longText}
- *   collapsible
- *   maxLength={300}
- *   maxLines={5}
+ *   content="Talk to [Vps-audi](cmdop://machine/abc-123)"
+ *   linkRules={[machineMentionRule]}
  * />
  * ```
  */
 declare const MarkdownMessage: React__default.FC<MarkdownMessageProps>;
 
+/** Recursively concatenate the text content of a React.ReactNode tree.
+ *  Used by the markdown renderers (e.g. `<pre>` extracting code) and
+ *  by consumers that need a plain-string label out of link children. */
+declare function extractTextFromChildren(children: React__default.ReactNode): string;
+
 interface UseCollapsibleContentOptions {
     /**
      * Maximum character length before collapsing
@@ -2774,4 +2797,4 @@ declare function useBlobUrlCleanup(key: string | null): void;
  */
 declare function generateContentKey(content: ArrayBuffer): string;
 
-export { type ApiKey, ArrayFieldItemTemplate, ArrayFieldTemplate, type AspectRatioValue, type AudioLevels, AudioReactiveCover, type AudioReactiveCoverProps, BaseInputTemplate, type BlobSource, COLOR_SCHEMES, COLOR_SCHEME_INFO, CardLoadingFallback, CheckboxWidget, ColorWidget, type CreateLazyComponentOptions, type CreateVideoErrorFallbackOptions, CronScheduler, type CronSchedulerContextValue, type CronSchedulerProps, CronSchedulerProvider, type CronSchedulerState, CustomInput, type DASHSource, type DataUrlSource, DayChips, DiffEditor, type DiffEditorProps, EFFECT_ANIMATIONS, Editor, type EditorContextValue, type EditorFile, type EditorOptions, type EditorProps, EditorProvider, type EditorRef, type EffectColorScheme, type EffectColors, type EffectConfig$1 as EffectConfig, type EffectIntensity, type EffectLayer, type EffectVariant, type EqualizerOptions, type ErrorFallbackProps, ErrorListTemplate, FieldTemplate, GlowEffect, type GlowEffectData, type HLSSource, type HybridAudioContextValue, type HybridAudioControls, HybridAudioPlayer, type HybridAudioPlayerProps, HybridAudioProvider, type HybridAudioProviderProps, type HybridAudioState, type HybridCompactPlayerProps, HybridSimplePlayer, type HybridSimplePlayerProps, HybridWaveform, type HybridWaveformProps, type HybridWebAudioAPI, INTENSITY_CONFIG, INTENSITY_INFO, type ImageFile, ImageViewer, type ImageViewerProps, JsonSchemaForm, type JsonSchemaFormProps, JsonTreeComponent as JsonTree, type JsonTreeConfig, type JsonTreeProps, LazyCronScheduler, LazyHybridAudioPlayer, LazyHybridCompactPlayer, LazyHybridSimplePlayer, LazyImageViewer, LazyJsonSchemaForm, LazyJsonTree, LazyLottiePlayer, LazyMapContainer, LazyMapView, LazyMermaid, LazyOpenapiViewer, LazyPrettyCode, LazyVideoPlayer, LazyWrapper, type LazyWrapperProps, LoadingFallback, type LoadingFallbackProps, type LottieDirection, LottiePlayer, type LottiePlayerProps, type LottieSize, type LottieSpeed, type MapContainerProps, MapLoadingFallback, type MapStyleKey, type MapViewport, MarkdownEditor, type MarkdownEditorProps, MarkdownMessage, type MarkdownMessageProps, type MarkerData, type MentionAttrs, type MentionConfig, type MentionItem, type MentionMarkdownRenderer, Mermaid, type MermaidProps, MeshEffect, type MonthDay, MonthDayGrid, NativeProvider, NumberWidget, ObjectFieldTemplate, Playground as OpenapiViewer, OrbsEffect, type PlayerMode, type PlaygroundConfig, type PlaygroundProps$1 as PlaygroundProps, PrettyCode, type PrettyCodeProps$1 as PrettyCodeProps, type ResolveFileSourceOptions, SchedulePreview, type ScheduleType, ScheduleTypeSelector, type SchemaSource, SelectWidget, type SimpleStreamSource, SliderWidget, Spinner, SpotlightEffect, StreamProvider, type StreamSource, SwitchWidget, TextWidget, TimeSelector, type UrlSource, type UseAudioBusReturn, type UseAudioVisualizationReturn, type UseCollapsibleContentOptions, type UseCollapsibleContentResult, type UseEditorReturn, type UseHybridAudioOptions, type UseHybridAudioReturn, type UseLottieOptions, type UseLottieReturn, type UseMonacoReturn, type UseVisualizationReturn, VARIANT_INFO, VideoControls, VideoErrorFallback, type VideoErrorFallbackProps, VideoPlayer, type VideoPlayerContextValue, type VideoPlayerProps, VideoPlayerProvider, type VideoPlayerProviderProps, type VideoPlayerRef, type VideoSourceUnion, VidstackProvider, type VimeoSource, type VisualizationColorScheme, type VisualizationIntensity, VisualizationProvider, type VisualizationProviderProps, type VisualizationSettings, type VisualizationVariant, type WeekDay, type YouTubeSource, buildCron, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, createLazyComponent, createVideoErrorFallback, formatTime, generateContentKey, getColors, getEffectConfig, getRequiredFields, hasRequiredFields, humanizeCron, isSimpleStreamSource, isValidCron, mentionPresets, mergeDefaults, normalizeFormData, parseCron, prepareEffectColors, resolveFileSource, resolvePlayerMode, resolveStreamSource, safeJsonParse, safeJsonStringify, useAudioBus, useAudioBusStore, useAudioCache, useAudioVisualization, useBlobUrlCleanup, useCollapsibleContent, useCronCustom, useCronMonthDays, useCronPreview, useCronScheduler, useCronSchedulerContext, useCronTime, useCronType, useCronWeekDays, useEditor, useEditorContext, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useImageCache, useLanguage, useLottie, useMediaCacheStore, useMonaco, useVideoCache, useVideoPlayerContext, useVideoPlayerSettings, useVisualization, validateRequiredFields, validateSchema };
+export { type ApiKey, ArrayFieldItemTemplate, ArrayFieldTemplate, type AspectRatioValue, type AudioLevels, AudioReactiveCover, type AudioReactiveCoverProps, BaseInputTemplate, type BlobSource, COLOR_SCHEMES, COLOR_SCHEME_INFO, CardLoadingFallback, CheckboxWidget, ColorWidget, type CreateLazyComponentOptions, type CreateVideoErrorFallbackOptions, CronScheduler, type CronSchedulerContextValue, type CronSchedulerProps, CronSchedulerProvider, type CronSchedulerState, CustomInput, type DASHSource, type DataUrlSource, DayChips, DiffEditor, type DiffEditorProps, EFFECT_ANIMATIONS, Editor, type EditorContextValue, type EditorFile, type EditorOptions, type EditorProps, EditorProvider, type EditorRef, type EffectColorScheme, type EffectColors, type EffectConfig$1 as EffectConfig, type EffectIntensity, type EffectLayer, type EffectVariant, type EqualizerOptions, type ErrorFallbackProps, ErrorListTemplate, FieldTemplate, GlowEffect, type GlowEffectData, type HLSSource, type HybridAudioContextValue, type HybridAudioControls, HybridAudioPlayer, type HybridAudioPlayerProps, HybridAudioProvider, type HybridAudioProviderProps, type HybridAudioState, type HybridCompactPlayerProps, HybridSimplePlayer, type HybridSimplePlayerProps, HybridWaveform, type HybridWaveformProps, type HybridWebAudioAPI, INTENSITY_CONFIG, INTENSITY_INFO, type ImageFile, ImageViewer, type ImageViewerProps, JsonSchemaForm, type JsonSchemaFormProps, JsonTreeComponent as JsonTree, type JsonTreeConfig, type JsonTreeProps, LazyCronScheduler, LazyHybridAudioPlayer, LazyHybridCompactPlayer, LazyHybridSimplePlayer, LazyImageViewer, LazyJsonSchemaForm, LazyJsonTree, LazyLottiePlayer, LazyMapContainer, LazyMapView, LazyMermaid, LazyOpenapiViewer, LazyPrettyCode, LazyVideoPlayer, LazyWrapper, type LazyWrapperProps, type LinkRule, LoadingFallback, type LoadingFallbackProps, type LottieDirection, LottiePlayer, type LottiePlayerProps, type LottieSize, type LottieSpeed, type MapContainerProps, MapLoadingFallback, type MapStyleKey, type MapViewport, MarkdownEditor, type MarkdownEditorProps, MarkdownMessage, type MarkdownMessageProps, type MarkerData, type MentionAttrs, type MentionConfig, type MentionItem, type MentionMarkdownRenderer, Mermaid, type MermaidProps, MeshEffect, type MonthDay, MonthDayGrid, NativeProvider, NumberWidget, ObjectFieldTemplate, Playground as OpenapiViewer, OrbsEffect, type PlayerMode, type PlaygroundConfig, type PlaygroundProps$1 as PlaygroundProps, PrettyCode, type PrettyCodeProps$1 as PrettyCodeProps, type ResolveFileSourceOptions, SchedulePreview, type ScheduleType, ScheduleTypeSelector, type SchemaSource, SelectWidget, type SimpleStreamSource, SliderWidget, Spinner, SpotlightEffect, StreamProvider, type StreamSource, SwitchWidget, TextWidget, TimeSelector, type UrlSource, type UseAudioBusReturn, type UseAudioVisualizationReturn, type UseCollapsibleContentOptions, type UseCollapsibleContentResult, type UseEditorReturn, type UseHybridAudioOptions, type UseHybridAudioReturn, type UseLottieOptions, type UseLottieReturn, type UseMonacoReturn, type UseVisualizationReturn, VARIANT_INFO, VideoControls, VideoErrorFallback, type VideoErrorFallbackProps, VideoPlayer, type VideoPlayerContextValue, type VideoPlayerProps, VideoPlayerProvider, type VideoPlayerProviderProps, type VideoPlayerRef, type VideoSourceUnion, VidstackProvider, type VimeoSource, type VisualizationColorScheme, type VisualizationIntensity, VisualizationProvider, type VisualizationProviderProps, type VisualizationSettings, type VisualizationVariant, type WeekDay, type YouTubeSource, buildCron, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, createLazyComponent, createVideoErrorFallback, extractTextFromChildren, formatTime, generateContentKey, getColors, getEffectConfig, getRequiredFields, hasRequiredFields, humanizeCron, isSimpleStreamSource, isValidCron, mentionPresets, mergeDefaults, normalizeFormData, parseCron, prepareEffectColors, resolveFileSource, resolvePlayerMode, resolveStreamSource, safeJsonParse, safeJsonStringify, useAudioBus, useAudioBusStore, useAudioCache, useAudioVisualization, useBlobUrlCleanup, useCollapsibleContent, useCronCustom, useCronMonthDays, useCronPreview, useCronScheduler, useCronSchedulerContext, useCronTime, useCronType, useCronWeekDays, useEditor, useEditorContext, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useImageCache, useLanguage, useLottie, useMediaCacheStore, useMonaco, useVideoCache, useVideoPlayerContext, useVideoPlayerSettings, useVisualization, validateRequiredFields, validateSchema };

package/dist/index.d.ts

@@ -108,6 +108,47 @@ declare function createLazyComponent<P extends object>(loader: () => Promise<{
     default: ComponentType<P>;
 }>, options?: CreateLazyComponentOptions<P>): ComponentType<P>;
 
+/**
+ * Declarative rule for handling a custom URL scheme inside markdown.
+ *
+ * Each rule owns one href shape (e.g. `cmdop://machine/<uuid>`,
+ * `obsidian://open?path=…`) and decides:
+ *
+ *   1. Whether the URL scheme survives sanitize (`protocols`).
+ *   2. How to massage the source markdown before render
+ *      (`preprocess` — optional; useful for stripping decorative
+ *      prefixes like the `@` in `@[label](href)` so the chip alone
+ *      reads as the mention indicator).
+ *   3. Which links it owns (`match`), and how to render them
+ *      (`render`, returning JSX).
+ *
+ * Rules compose: pass an array, and the renderer iterates top-to-bottom
+ * picking the first `match` hit per `<a>`. Anything no rule claims
+ * falls through to the built-in chat-link styling (or to a custom
+ * `customComponents.a` if both are provided).
+ *
+ * Prefer `linkRules` over `customComponents` + `extraHrefProtocols` —
+ * it's the same pieces with the boilerplate removed.
+ */
+interface LinkRule {
+    /** Pre-process the raw markdown source before any rendering happens.
+     *  Pure / synchronous; identity-return when no transform applies. */
+    preprocess?: (source: string) => string;
+    /** Predicate against the resolved href. */
+    match: (href: string) => boolean;
+    /** Render the link this rule owns. `children` is the link's label
+     *  (markdown-rendered React content). */
+    render: (props: {
+        href: string;
+        children: React__default.ReactNode;
+        isUser: boolean;
+    }) => React__default.ReactNode;
+    /** URL scheme(s) to whitelist on the sanitize side, e.g. `['cmdop']`.
+     *  Bare schemes only — no `://`. Optional; omit for `http(s)` rules. */
+    protocols?: readonly string[];
+    /** Diagnostic label, surfaced in dev warnings. Optional. */
+    name?: string;
+}
 interface MarkdownMessageProps {
     /** Markdown content to render */
     content: string;
@@ -122,26 +163,9 @@ interface MarkdownMessageProps {
      *
      * Use this when you need custom rendering for a specific tag without
      * losing the chat-tuned defaults (links, code blocks with copy, etc).
-     * Example — render `cmdop://machine/<uuid>` links as a chip:
-     *
-     * ```tsx
-     * <MarkdownMessage
-     *   content={text}
-     *   extraHrefProtocols={['cmdop']}
-     *   customComponents={{
-     *     a: ({ href, children }) =>
-     *       href?.startsWith('cmdop://machine/')
-     *         ? <MachineChip href={href}>{children}</MachineChip>
-     *         : <a href={href}>{children}</a>,
-     *   }}
-     * />
-     * ```
      *
-     * If you provide a renderer for a tag the built-in version is replaced
-     * for that tag; other tags keep the defaults.
-     *
-     * Important: when `customComponents` is set, the plain-text fast path
-     * is bypassed for the affected content so your renderers always run.
+     * For custom URL-scheme link handling, prefer `linkRules` — it's the
+     * same ergonomics with the per-consumer boilerplate removed.
      */
     customComponents?: Partial<Components>;
     /**
@@ -156,55 +180,51 @@ interface MarkdownMessageProps {
      * HTML can do via clicks. Stick to schemes you control.
      */
     extraHrefProtocols?: readonly string[];
+    /**
+     * Declarative link rules — preferred over `customComponents` +
+     * `extraHrefProtocols` for chat-style apps that want pluggable
+     * URL-scheme handling without re-implementing the custom-`a`
+     * boilerplate per consumer.
+     *
+     * If you provide both `linkRules` and `extraHrefProtocols`, the
+     * effective protocol list is the union of the two.
+     */
+    linkRules?: readonly LinkRule[];
     /**
      * Enable collapsible "Read more..." functionality
-     * When enabled, long content will be truncated with a toggle button
      * @default false
      */
     collapsible?: boolean;
-    /**
-     * Maximum character length before showing "Read more..."
-     * Only applies when collapsible is true
-     * If both maxLength and maxLines are set, the stricter limit applies
-     */
+    /** Maximum character length before showing "Read more...". */
     maxLength?: number;
-    /**
-     * Maximum number of lines before showing "Read more..."
-     * Only applies when collapsible is true
-     * If both maxLength and maxLines are set, the stricter limit applies
-     */
+    /** Maximum number of lines before showing "Read more...". */
     maxLines?: number;
-    /**
-     * Custom "Read more" button text
-     * @default "Read more..."
-     */
+    /** Custom "Read more" button text. @default "Read more..." */
     readMoreLabel?: string;
-    /**
-     * Custom "Show less" button text
-     * @default "Show less"
-     */
+    /** Custom "Show less" button text. @default "Show less" */
     showLessLabel?: string;
-    /**
-     * Start expanded (only applies when collapsible is true)
-     * @default false
-     */
+    /** Start expanded (only when `collapsible` is true). @default false */
     defaultExpanded?: boolean;
-    /**
-     * Callback when collapsed state changes
-     */
+    /** Callback when collapsed state changes */
     onCollapseChange?: (isCollapsed: boolean) => void;
 }
+
 /**
- * MarkdownMessage - Renders markdown content with syntax highlighting and GFM support
+ * MarkdownMessage — chat-tuned markdown renderer.
  *
  * Features:
- * - GitHub Flavored Markdown (GFM) support
- * - Syntax highlighted code blocks with copy button
- * - Mermaid diagram rendering
- * - Tables, lists, blockquotes
- * - User/assistant styling modes
- * - Plain text optimization (skips ReactMarkdown for simple text)
- * - Collapsible "Read more..." for long messages
+ * - GitHub Flavored Markdown (GFM) via remark-gfm
+ * - Syntax-highlighted code blocks with Copy button
+ * - Mermaid diagram rendering (` ```mermaid ` fence)
+ * - Tables, lists, blockquotes scaled for chat density
+ * - User vs assistant styling modes (`isUser`)
+ * - Plain-text fast path: skips ReactMarkdown when content has no
+ *   markdown syntax (cheaper render, preserves newlines via CSS)
+ * - Optional collapsible "Read more..." for long messages
+ *
+ * Custom URL schemes (chat mentions, deep-links, custom file viewers)
+ * are best handled with the declarative `linkRules` prop — see the
+ * type definition in `./types.ts` and the storybook for examples.
  *
  * @example
  * ```tsx
@@ -213,17 +233,20 @@ interface MarkdownMessageProps {
  * // User message styling
  * <MarkdownMessage content="Some content" isUser />
  *
- * // Collapsible long content (for chat apps)
+ * // Custom URL scheme via linkRules
  * <MarkdownMessage
- *   content={longText}
- *   collapsible
- *   maxLength={300}
- *   maxLines={5}
+ *   content="Talk to [Vps-audi](cmdop://machine/abc-123)"
+ *   linkRules={[machineMentionRule]}
  * />
  * ```
  */
 declare const MarkdownMessage: React__default.FC<MarkdownMessageProps>;
 
+/** Recursively concatenate the text content of a React.ReactNode tree.
+ *  Used by the markdown renderers (e.g. `<pre>` extracting code) and
+ *  by consumers that need a plain-string label out of link children. */
+declare function extractTextFromChildren(children: React__default.ReactNode): string;
+
 interface UseCollapsibleContentOptions {
     /**
      * Maximum character length before collapsing
@@ -2774,4 +2797,4 @@ declare function useBlobUrlCleanup(key: string | null): void;
  */
 declare function generateContentKey(content: ArrayBuffer): string;
 
-export { type ApiKey, ArrayFieldItemTemplate, ArrayFieldTemplate, type AspectRatioValue, type AudioLevels, AudioReactiveCover, type AudioReactiveCoverProps, BaseInputTemplate, type BlobSource, COLOR_SCHEMES, COLOR_SCHEME_INFO, CardLoadingFallback, CheckboxWidget, ColorWidget, type CreateLazyComponentOptions, type CreateVideoErrorFallbackOptions, CronScheduler, type CronSchedulerContextValue, type CronSchedulerProps, CronSchedulerProvider, type CronSchedulerState, CustomInput, type DASHSource, type DataUrlSource, DayChips, DiffEditor, type DiffEditorProps, EFFECT_ANIMATIONS, Editor, type EditorContextValue, type EditorFile, type EditorOptions, type EditorProps, EditorProvider, type EditorRef, type EffectColorScheme, type EffectColors, type EffectConfig$1 as EffectConfig, type EffectIntensity, type EffectLayer, type EffectVariant, type EqualizerOptions, type ErrorFallbackProps, ErrorListTemplate, FieldTemplate, GlowEffect, type GlowEffectData, type HLSSource, type HybridAudioContextValue, type HybridAudioControls, HybridAudioPlayer, type HybridAudioPlayerProps, HybridAudioProvider, type HybridAudioProviderProps, type HybridAudioState, type HybridCompactPlayerProps, HybridSimplePlayer, type HybridSimplePlayerProps, HybridWaveform, type HybridWaveformProps, type HybridWebAudioAPI, INTENSITY_CONFIG, INTENSITY_INFO, type ImageFile, ImageViewer, type ImageViewerProps, JsonSchemaForm, type JsonSchemaFormProps, JsonTreeComponent as JsonTree, type JsonTreeConfig, type JsonTreeProps, LazyCronScheduler, LazyHybridAudioPlayer, LazyHybridCompactPlayer, LazyHybridSimplePlayer, LazyImageViewer, LazyJsonSchemaForm, LazyJsonTree, LazyLottiePlayer, LazyMapContainer, LazyMapView, LazyMermaid, LazyOpenapiViewer, LazyPrettyCode, LazyVideoPlayer, LazyWrapper, type LazyWrapperProps, LoadingFallback, type LoadingFallbackProps, type LottieDirection, LottiePlayer, type LottiePlayerProps, type LottieSize, type LottieSpeed, type MapContainerProps, MapLoadingFallback, type MapStyleKey, type MapViewport, MarkdownEditor, type MarkdownEditorProps, MarkdownMessage, type MarkdownMessageProps, type MarkerData, type MentionAttrs, type MentionConfig, type MentionItem, type MentionMarkdownRenderer, Mermaid, type MermaidProps, MeshEffect, type MonthDay, MonthDayGrid, NativeProvider, NumberWidget, ObjectFieldTemplate, Playground as OpenapiViewer, OrbsEffect, type PlayerMode, type PlaygroundConfig, type PlaygroundProps$1 as PlaygroundProps, PrettyCode, type PrettyCodeProps$1 as PrettyCodeProps, type ResolveFileSourceOptions, SchedulePreview, type ScheduleType, ScheduleTypeSelector, type SchemaSource, SelectWidget, type SimpleStreamSource, SliderWidget, Spinner, SpotlightEffect, StreamProvider, type StreamSource, SwitchWidget, TextWidget, TimeSelector, type UrlSource, type UseAudioBusReturn, type UseAudioVisualizationReturn, type UseCollapsibleContentOptions, type UseCollapsibleContentResult, type UseEditorReturn, type UseHybridAudioOptions, type UseHybridAudioReturn, type UseLottieOptions, type UseLottieReturn, type UseMonacoReturn, type UseVisualizationReturn, VARIANT_INFO, VideoControls, VideoErrorFallback, type VideoErrorFallbackProps, VideoPlayer, type VideoPlayerContextValue, type VideoPlayerProps, VideoPlayerProvider, type VideoPlayerProviderProps, type VideoPlayerRef, type VideoSourceUnion, VidstackProvider, type VimeoSource, type VisualizationColorScheme, type VisualizationIntensity, VisualizationProvider, type VisualizationProviderProps, type VisualizationSettings, type VisualizationVariant, type WeekDay, type YouTubeSource, buildCron, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, createLazyComponent, createVideoErrorFallback, formatTime, generateContentKey, getColors, getEffectConfig, getRequiredFields, hasRequiredFields, humanizeCron, isSimpleStreamSource, isValidCron, mentionPresets, mergeDefaults, normalizeFormData, parseCron, prepareEffectColors, resolveFileSource, resolvePlayerMode, resolveStreamSource, safeJsonParse, safeJsonStringify, useAudioBus, useAudioBusStore, useAudioCache, useAudioVisualization, useBlobUrlCleanup, useCollapsibleContent, useCronCustom, useCronMonthDays, useCronPreview, useCronScheduler, useCronSchedulerContext, useCronTime, useCronType, useCronWeekDays, useEditor, useEditorContext, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useImageCache, useLanguage, useLottie, useMediaCacheStore, useMonaco, useVideoCache, useVideoPlayerContext, useVideoPlayerSettings, useVisualization, validateRequiredFields, validateSchema };
+export { type ApiKey, ArrayFieldItemTemplate, ArrayFieldTemplate, type AspectRatioValue, type AudioLevels, AudioReactiveCover, type AudioReactiveCoverProps, BaseInputTemplate, type BlobSource, COLOR_SCHEMES, COLOR_SCHEME_INFO, CardLoadingFallback, CheckboxWidget, ColorWidget, type CreateLazyComponentOptions, type CreateVideoErrorFallbackOptions, CronScheduler, type CronSchedulerContextValue, type CronSchedulerProps, CronSchedulerProvider, type CronSchedulerState, CustomInput, type DASHSource, type DataUrlSource, DayChips, DiffEditor, type DiffEditorProps, EFFECT_ANIMATIONS, Editor, type EditorContextValue, type EditorFile, type EditorOptions, type EditorProps, EditorProvider, type EditorRef, type EffectColorScheme, type EffectColors, type EffectConfig$1 as EffectConfig, type EffectIntensity, type EffectLayer, type EffectVariant, type EqualizerOptions, type ErrorFallbackProps, ErrorListTemplate, FieldTemplate, GlowEffect, type GlowEffectData, type HLSSource, type HybridAudioContextValue, type HybridAudioControls, HybridAudioPlayer, type HybridAudioPlayerProps, HybridAudioProvider, type HybridAudioProviderProps, type HybridAudioState, type HybridCompactPlayerProps, HybridSimplePlayer, type HybridSimplePlayerProps, HybridWaveform, type HybridWaveformProps, type HybridWebAudioAPI, INTENSITY_CONFIG, INTENSITY_INFO, type ImageFile, ImageViewer, type ImageViewerProps, JsonSchemaForm, type JsonSchemaFormProps, JsonTreeComponent as JsonTree, type JsonTreeConfig, type JsonTreeProps, LazyCronScheduler, LazyHybridAudioPlayer, LazyHybridCompactPlayer, LazyHybridSimplePlayer, LazyImageViewer, LazyJsonSchemaForm, LazyJsonTree, LazyLottiePlayer, LazyMapContainer, LazyMapView, LazyMermaid, LazyOpenapiViewer, LazyPrettyCode, LazyVideoPlayer, LazyWrapper, type LazyWrapperProps, type LinkRule, LoadingFallback, type LoadingFallbackProps, type LottieDirection, LottiePlayer, type LottiePlayerProps, type LottieSize, type LottieSpeed, type MapContainerProps, MapLoadingFallback, type MapStyleKey, type MapViewport, MarkdownEditor, type MarkdownEditorProps, MarkdownMessage, type MarkdownMessageProps, type MarkerData, type MentionAttrs, type MentionConfig, type MentionItem, type MentionMarkdownRenderer, Mermaid, type MermaidProps, MeshEffect, type MonthDay, MonthDayGrid, NativeProvider, NumberWidget, ObjectFieldTemplate, Playground as OpenapiViewer, OrbsEffect, type PlayerMode, type PlaygroundConfig, type PlaygroundProps$1 as PlaygroundProps, PrettyCode, type PrettyCodeProps$1 as PrettyCodeProps, type ResolveFileSourceOptions, SchedulePreview, type ScheduleType, ScheduleTypeSelector, type SchemaSource, SelectWidget, type SimpleStreamSource, SliderWidget, Spinner, SpotlightEffect, StreamProvider, type StreamSource, SwitchWidget, TextWidget, TimeSelector, type UrlSource, type UseAudioBusReturn, type UseAudioVisualizationReturn, type UseCollapsibleContentOptions, type UseCollapsibleContentResult, type UseEditorReturn, type UseHybridAudioOptions, type UseHybridAudioReturn, type UseLottieOptions, type UseLottieReturn, type UseMonacoReturn, type UseVisualizationReturn, VARIANT_INFO, VideoControls, VideoErrorFallback, type VideoErrorFallbackProps, VideoPlayer, type VideoPlayerContextValue, type VideoPlayerProps, VideoPlayerProvider, type VideoPlayerProviderProps, type VideoPlayerRef, type VideoSourceUnion, VidstackProvider, type VimeoSource, type VisualizationColorScheme, type VisualizationIntensity, VisualizationProvider, type VisualizationProviderProps, type VisualizationSettings, type VisualizationVariant, type WeekDay, type YouTubeSource, buildCron, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, createLazyComponent, createVideoErrorFallback, extractTextFromChildren, formatTime, generateContentKey, getColors, getEffectConfig, getRequiredFields, hasRequiredFields, humanizeCron, isSimpleStreamSource, isValidCron, mentionPresets, mergeDefaults, normalizeFormData, parseCron, prepareEffectColors, resolveFileSource, resolvePlayerMode, resolveStreamSource, safeJsonParse, safeJsonStringify, useAudioBus, useAudioBusStore, useAudioCache, useAudioVisualization, useBlobUrlCleanup, useCollapsibleContent, useCronCustom, useCronMonthDays, useCronPreview, useCronScheduler, useCronSchedulerContext, useCronTime, useCronType, useCronWeekDays, useEditor, useEditorContext, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useImageCache, useLanguage, useLottie, useMediaCacheStore, useMonaco, useVideoCache, useVideoPlayerContext, useVideoPlayerSettings, useVisualization, validateRequiredFields, validateSchema };

package/dist/index.mjs

@@ -4,8 +4,8 @@ import './chunk-JWB2EWQO.mjs';
 export { ImageViewer } from './chunk-GGKGH5PM.mjs';
 export { generateContentKey, useAudioCache, useBlobUrlCleanup, useImageCache, useMediaCacheStore, useVideoCache, useVideoPlayerSettings } from './chunk-5LBDYFWH.mjs';
 export { CronSchedulerProvider, CustomInput, DayChips, MonthDayGrid, SchedulePreview, ScheduleTypeSelector, TimeSelector, buildCron, humanizeCron, isValidCron, parseCron, useCronCustom, useCronMonthDays, useCronPreview, useCronScheduler, useCronSchedulerContext, useCronTime, useCronType, useCronWeekDays } from './chunk-PZKAH7WQ.mjs';
-import { PlaygroundProvider } from './chunk-2BBXP3DH.mjs';
-export { MarkdownMessage, Mermaid_default as Mermaid, PrettyCode_default as PrettyCode, useCollapsibleContent } from './chunk-2BBXP3DH.mjs';
+import { PlaygroundProvider } from './chunk-CKD7GNE5.mjs';
+export { MarkdownMessage, Mermaid_default as Mermaid, PrettyCode_default as PrettyCode, extractTextFromChildren, useCollapsibleContent } from './chunk-CKD7GNE5.mjs';
 export { JsonTree_default as JsonTree } from './chunk-LFWQ36LJ.mjs';
 import './chunk-SSUOENAZ.mjs';
 export { ArrayFieldItemTemplate, ArrayFieldTemplate, BaseInputTemplate, CheckboxWidget, ColorWidget, ErrorListTemplate, FieldTemplate, JsonSchemaForm, NumberWidget, ObjectFieldTemplate, SelectWidget, SliderWidget, SwitchWidget, TextWidget, getRequiredFields, hasRequiredFields, mergeDefaults, normalizeFormData, safeJsonParse, safeJsonStringify, validateRequiredFields, validateSchema } from './chunk-JUGQNNDC.mjs';
@@ -238,7 +238,7 @@ function OpenapiLoadingFallback() {
 }
 __name(OpenapiLoadingFallback, "OpenapiLoadingFallback");
 var LazyDocsLayout = createLazyComponent(
-  () => import('./DocsLayout-74WIW7L3.mjs').then((mod) => ({ default: mod.DocsLayout })),
+  () => import('./DocsLayout-MWRKNFXR.mjs').then((mod) => ({ default: mod.DocsLayout })),
   {
     displayName: "LazyDocsLayout",
     fallback: /* @__PURE__ */ jsx(OpenapiLoadingFallback, {})
@@ -393,7 +393,7 @@ function LottiePlayer(props) {
 }
 __name(LottiePlayer, "LottiePlayer");
 var DocsLayout = lazy(
-  () => import('./DocsLayout-74WIW7L3.mjs').then((mod) => ({ default: mod.DocsLayout }))
+  () => import('./DocsLayout-MWRKNFXR.mjs').then((mod) => ({ default: mod.DocsLayout }))
 );
 var LoadingFallback7 = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[400px]", children: /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: "Loading API Playground..." }) }), "LoadingFallback");
 var Playground = /* @__PURE__ */ __name(({ config }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.298",
+  "version": "2.1.300",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -91,8 +91,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.298",
-    "@djangocfg/ui-core": "^2.1.298",
+    "@djangocfg/i18n": "^2.1.300",
+    "@djangocfg/ui-core": "^2.1.300",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -140,10 +140,10 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.298",
+    "@djangocfg/i18n": "^2.1.300",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.298",
-    "@djangocfg/ui-core": "^2.1.298",
+    "@djangocfg/typescript-config": "^2.1.300",
+    "@djangocfg/ui-core": "^2.1.300",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",

package/src/components/markdown/MarkdownMessage/CodeBlock.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { CopyButton } from '@djangocfg/ui-core/components';
+import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
+import PrettyCode from '../../../tools/PrettyCode';
+
+interface CodeBlockProps {
+  code: string;
+  language: string;
+  isUser: boolean;
+  isCompact?: boolean;
+}
+
+/** Code block with a hover-revealed Copy button on top of PrettyCode. */
+export const CodeBlock: React.FC<CodeBlockProps> = ({ code, language, isUser, isCompact = false }) => {
+  const theme = useResolvedTheme();
+
+  return (
+    <div className="relative group my-3">
+      <CopyButton
+        value={code}
+        variant="ghost"
+        className={`
+          absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity
+          h-8 w-8
+          ${isUser
+            ? 'hover:bg-white/20 text-white'
+            : 'hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground'
+          }
+        `}
+        title="Copy code"
+      />
+
+      <PrettyCode
+        data={code}
+        language={language}
+        className={isCompact ? 'text-xs' : 'text-sm'}
+        customBg={isUser ? 'bg-white/10' : 'bg-muted dark:bg-muted'}
+        mode={theme}
+        isCompact={isCompact}
+      />
+    </div>
+  );
+};
+
+/** Simple `<pre>` fallback used when CodeBlock throws (lazy module
+ *  failure, missing PrettyCode peer, etc). */
+export const CodeBlockFallback: React.FC<CodeBlockProps> = ({ code, isUser }) => (
+  <div className="relative group my-3">
+    <CopyButton
+      value={code}
+      variant="ghost"
+      className={`
+        absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity
+        h-8 w-8
+        ${isUser
+          ? 'hover:bg-white/20 text-white'
+          : 'hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground'
+        }
+      `}
+      title="Copy code"
+    />
+    <pre className={`
+      p-3 rounded text-xs font-mono overflow-x-auto
+      ${isUser ? 'bg-white/10 text-white' : 'bg-muted text-foreground'}
+    `}>
+      <code>{code}</code>
+    </pre>
+  </div>
+);

package/src/components/markdown/MarkdownMessage/CollapseToggle.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+interface CollapseToggleProps {
+  isCollapsed: boolean;
+  onClick: () => void;
+  readMoreLabel: string;
+  showLessLabel: string;
+  isUser: boolean;
+  isCompact: boolean;
+}
+
+/** "Read more..." / "Show less" button. */
+export const CollapseToggle: React.FC<CollapseToggleProps> = ({
+  isCollapsed,
+  onClick,
+  readMoreLabel,
+  showLessLabel,
+  isUser,
+  isCompact,
+}) => {
+  const textSize = isCompact ? 'text-xs' : 'text-sm';
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`
+        ${textSize} font-medium cursor-pointer
+        transition-colors duration-200
+        ${isUser ? 'text-white/80 hover:text-white' : 'text-primary hover:text-primary/80'}
+        inline-flex items-center gap-1
+        mt-1
+      `}
+    >
+      {isCollapsed ? (
+        <>
+          {readMoreLabel}
+          <Chevron direction="down" />
+        </>
+      ) : (
+        <>
+          {showLessLabel}
+          <Chevron direction="up" />
+        </>
+      )}
+    </button>
+  );
+};
+
+function Chevron({ direction }: { direction: 'up' | 'down' }) {
+  return (
+    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d={direction === 'down' ? 'M19 9l-7 7-7-7' : 'M5 15l7-7 7 7'}
+      />
+    </svg>
+  );
+}