@promptbook/cli 0.114.0-0 → 0.114.0-10

package/src/book-components/BookEditor/useBookEditorMonacoStyles.ts

@@ -1,3 +1,4 @@
+import { spaceTrim } from 'spacetrim';
 import { useEffect } from 'react';
 import { PROMPTBOOK_SYNTAX_COLORS } from '../../config';
 import type { BookEditorTheme } from './BookEditorTheme';
@@ -48,66 +49,66 @@ export function useBookEditorMonacoStyles({
             document.head.appendChild(style);
         }
 
-        style.innerHTML = `
+        style.innerHTML = spaceTrim(`
 
-            @import url('https://fonts.googleapis.com/css2?family=Bitcount+Grid+Single:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
-            /* <- [🚚] */
+                @import url('https://fonts.googleapis.com/css2?family=Bitcount+Grid+Single:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
+                /* <- [🚚] */
 
-            .${instanceClass} .monaco-editor .view-lines {
-                background-image: linear-gradient(to bottom, transparent ${scaledLineHeight - 1}px, ${lineColor} ${
+                .${instanceClass} .monaco-editor .view-lines {
+                    background-image: linear-gradient(to bottom, transparent ${scaledLineHeight - 1}px, ${lineColor} ${
             scaledLineHeight - 1
         }px);
-                background-size: calc(100% + ${scaledContentPaddingLeft}px) ${scaledLineHeight}px;
-                background-position-x: -${scaledContentPaddingLeft}px;
-                background-position-y: ${scaledLineHeight * BACKGROUND_POSITION_Y_MULTIPLIER}px;
-            }
-            .${instanceClass} .monaco-editor .overflow-guard::before {
-                content: '';
-                position: absolute;
-                left: ${scaledVerticalLineLeft}px;
-                top: 0;
-                bottom: 0;
-                width: 1px;
-                background-color: ${lineColor};
-                z-index: 10;
-            }
+                    background-size: calc(100% + ${scaledContentPaddingLeft}px) ${scaledLineHeight}px;
+                    background-position-x: -${scaledContentPaddingLeft}px;
+                    background-position-y: ${scaledLineHeight * BACKGROUND_POSITION_Y_MULTIPLIER}px;
+                }
+                .${instanceClass} .monaco-editor .overflow-guard::before {
+                    content: '';
+                    position: absolute;
+                    left: ${scaledVerticalLineLeft}px;
+                    top: 0;
+                    bottom: 0;
+                    width: 1px;
+                    background-color: ${lineColor};
+                    z-index: 10;
+                }
 
-            .${instanceClass} .monaco-editor .separator-line {
-                background: linear-gradient(
-                    to bottom, 
-                    transparent ${scaledLineHeight * 0.9 - 2}px, 
-                    ${separatorColor} ${scaledLineHeight * 0.9 - 2}px, 
-                    ${separatorColor} ${scaledLineHeight * 0.9 + 1}px, 
-                    transparent ${scaledLineHeight * 0.9 + 1}px
-                );
-            }
-            
-            .${instanceClass} .monaco-editor .transparent-text {
-                color: transparent !important;
-            }
-            
-            .${instanceClass} .monaco-editor .code-block-box {
-                background-color: ${codeBlockBackground};
-                border-left: 1px solid ${codeBlockBorderColor};
-                border-right: 1px solid ${codeBlockBorderColor};
-                padding-left: ${Math.round(8 * zoomLevel)}px;
-                padding-right: ${Math.round(8 * zoomLevel)}px;
-            }
-            
-            .${instanceClass} .monaco-editor .code-block-top {
-                border-top: 1px solid ${codeBlockBorderColor};
-                border-top-left-radius: ${Math.round(10 * zoomLevel)}px;
-                border-top-right-radius: ${Math.round(10 * zoomLevel)}px;
-                overflow: hidden;
-            }
-            
-            .${instanceClass} .monaco-editor .code-block-bottom {
-                border-bottom: 1px solid ${codeBlockBorderColor};
-                border-bottom-left-radius: ${Math.round(10 * zoomLevel)}px;
-                border-bottom-right-radius: ${Math.round(10 * zoomLevel)}px;
-                overflow: hidden;
-            }
-        `;
+                .${instanceClass} .monaco-editor .separator-line {
+                    background: linear-gradient(
+                        to bottom,
+                        transparent ${scaledLineHeight * 0.9 - 2}px,
+                        ${separatorColor} ${scaledLineHeight * 0.9 - 2}px,
+                        ${separatorColor} ${scaledLineHeight * 0.9 + 1}px,
+                        transparent ${scaledLineHeight * 0.9 + 1}px
+                    );
+                }
+
+                .${instanceClass} .monaco-editor .transparent-text {
+                    color: transparent !important;
+                }
+
+                .${instanceClass} .monaco-editor .code-block-box {
+                    background-color: ${codeBlockBackground};
+                    border-left: 1px solid ${codeBlockBorderColor};
+                    border-right: 1px solid ${codeBlockBorderColor};
+                    padding-left: ${Math.round(8 * zoomLevel)}px;
+                    padding-right: ${Math.round(8 * zoomLevel)}px;
+                }
+
+                .${instanceClass} .monaco-editor .code-block-top {
+                    border-top: 1px solid ${codeBlockBorderColor};
+                    border-top-left-radius: ${Math.round(10 * zoomLevel)}px;
+                    border-top-right-radius: ${Math.round(10 * zoomLevel)}px;
+                    overflow: hidden;
+                }
+
+                .${instanceClass} .monaco-editor .code-block-bottom {
+                    border-bottom: 1px solid ${codeBlockBorderColor};
+                    border-bottom-left-radius: ${Math.round(10 * zoomLevel)}px;
+                    border-bottom-right-radius: ${Math.round(10 * zoomLevel)}px;
+                    overflow: hidden;
+                }
+        `);
 
         return () => {
             if (process.env.NODE_ENV === 'production') {

package/src/book-components/Chat/Chat/Chat.module.css

@@ -426,17 +426,10 @@
 }
 
 .chatMainFlow .chatChildren {
-    grid-area: 💬;
+    grid-area: 🟦;
     width: 100%;
-    height: 100%;
     min-width: 0;
-    min-height: 0;
     z-index: 300;
-    pointer-events: none;
-}
-
-.chatMainFlow .chatChildren > * {
-    pointer-events: auto;
 }
 
 /* Chat messages area */

package/src/book-components/Chat/Chat/ChatMessageMap.tsx

@@ -1,4 +1,6 @@
 'use client';
+import { spaceTrim } from 'spacetrim';
+
 
 import type { Feature, GeoJsonObject, GeoJsonProperties, Geometry } from 'geojson';
 import type { LatLng, Layer, Map as LeafletMap, Path, PathOptions } from 'leaflet';
@@ -253,10 +255,12 @@ function createPointOfInterestMarker(leaflet: LeafletNamespace, feature: ChatGeo
 
     const icon = leaflet.divIcon({
         className: styles.poiMarkerIcon,
-        html: `
-            <span class="${styles.poiMarkerPulse}" aria-hidden="true"></span>
-            ${initialHtml}
-        `.trim(),
+        html: spaceTrim(
+            (block) => `
+                <span class="${styles.poiMarkerPulse}" aria-hidden="true"></span>
+                ${block(initialHtml)}
+            `,
+        ).trim(),
         iconSize: [POI_MARKER_CONFIG.size, POI_MARKER_CONFIG.size],
         iconAnchor: POI_MARKER_CONFIG.anchor,
     });

package/src/book-components/Chat/Chat/ChatProps.tsx

@@ -681,8 +681,9 @@ export type ChatProps = {
     readonly tasksProgress?: Array<{ id: string; name: string; progress?: number }>; // Simplified task progress type
 
     /**
-     * Content to be shown inside the chat bar in head
-     * If not provided, the chat bar will not be rendered
+     * Optional content displayed in the chat header above the message list.
+     *
+     * If not provided, the header row is not rendered.
      */
     readonly children?: ReactNode;
 

package/src/book-components/Chat/MarkdownContent/MarkdownContent.module.css

@@ -229,6 +229,57 @@
     transform: translateY(0.03em);
 }
 
+.MarkdownContent
+    :is(
+        a.inlineReferenceChip:global(.inlineReferenceChip--with-icon),
+        details.inlineReferenceChip:global(.inlineReferenceChip--with-icon) > summary
+    )::before {
+    display: none;
+}
+
+.MarkdownContent :global(.inlineReferenceIcon) {
+    position: relative;
+    display: inline-flex;
+    width: 1.1em;
+    height: 1.1em;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: 1px solid color-mix(in srgb, var(--md-link-color) 22%, transparent);
+    border-radius: 0.24em;
+    background: color-mix(in srgb, var(--md-link-color) 10%, white);
+    font-size: 0.86em;
+    line-height: 1;
+}
+
+.MarkdownContent :global(.inlineReferenceIconFallback) {
+    overflow: hidden;
+    max-width: 100%;
+    color: var(--md-link-color);
+    font-size: 0.48em;
+    font-weight: 750;
+    letter-spacing: -0.04em;
+    white-space: nowrap;
+}
+
+.MarkdownContent :global(.inlineReferenceIcon) img {
+    position: absolute;
+    inset: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    margin: 0;
+    border-radius: 0;
+    background: color-mix(in srgb, var(--md-link-color) 7%, white);
+    object-fit: contain;
+}
+
+.MarkdownContent :global(.inlineReferenceIcon) img[hidden] {
+    display: none;
+}
+
 .MarkdownContent :is(a.inlineReferenceChip, details.inlineReferenceChip > summary):hover,
 .MarkdownContent :is(a.inlineReferenceChip, details.inlineReferenceChip > summary):focus-visible {
     border-color: color-mix(in srgb, var(--md-link-color) 52%, rgba(148, 163, 184, 0.35));
@@ -254,7 +305,7 @@
     display: inline-flex;
     align-items: center;
     gap: 0.38em;
-    color: var(--md-muted-color);
+    color: #b91c1c;
     font-size: 0.78em;
     font-weight: 650;
 }
@@ -264,7 +315,8 @@
     height: 0.52em;
     margin-left: 0.05em;
     border-radius: 999px;
-    background: color-mix(in srgb, var(--md-muted-color) 55%, transparent);
+    background: #ef4444;
+    box-shadow: 0 0 0 0.16em color-mix(in srgb, #ef4444 18%, transparent);
 }
 
 .MarkdownContent :global(.inlineReferenceMenuStatus--active) {
@@ -290,21 +342,37 @@
 
 .MarkdownContent :global(.inlineReferenceMenuOption) {
     display: block;
+    width: 100%;
     padding: 0.45rem 0.55rem;
+    border: 0;
     border-radius: 0.4rem;
+    background: transparent;
     color: var(--md-link-color);
+    font-family: inherit;
     font-size: 0.82em;
     font-weight: 650;
     line-height: 1.35;
+    text-align: left;
     text-decoration: none;
 }
 
 .MarkdownContent a:global(.inlineReferenceMenuOption):hover,
-.MarkdownContent a:global(.inlineReferenceMenuOption):focus-visible {
+.MarkdownContent a:global(.inlineReferenceMenuOption):focus-visible,
+.MarkdownContent button:global(.inlineReferenceMenuOption):hover,
+.MarkdownContent button:global(.inlineReferenceMenuOption):focus-visible {
     background: color-mix(in srgb, var(--md-link-color) 10%, transparent);
     text-decoration: none;
 }
 
+.MarkdownContent button:global(.inlineReferenceMenuOption) {
+    cursor: pointer;
+}
+
+.MarkdownContent button:global(.inlineReferenceMenuOption):disabled {
+    cursor: wait;
+    opacity: 0.55;
+}
+
 .MarkdownContent :global(.inlineReferenceMenuOption--disabled) {
     cursor: not-allowed;
     color: var(--md-muted-color);
@@ -445,7 +513,7 @@
     opacity: 0.8;
 }
 
-.MarkdownContent details {
+.MarkdownContent details:not(.inlineReferenceChip) {
     margin: 0.95em 0;
     border: 1px solid var(--md-table-border);
     border-radius: 16px;
@@ -455,13 +523,13 @@
     transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
 }
 
-.MarkdownContent details:hover,
-.MarkdownContent details:focus-within {
+.MarkdownContent details:not(.inlineReferenceChip):hover,
+.MarkdownContent details:not(.inlineReferenceChip):focus-within {
     border-color: color-mix(in srgb, var(--md-link-color) 24%, var(--md-table-border) 76%);
     box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
 }
 
-.MarkdownContent details > summary {
+.MarkdownContent details:not(.inlineReferenceChip) > summary {
     display: flex;
     align-items: center;
     gap: 0.72rem;
@@ -479,7 +547,7 @@
     transition: background 0.18s ease, color 0.18s ease;
 }
 
-.MarkdownContent details > summary::before {
+.MarkdownContent details:not(.inlineReferenceChip) > summary::before {
     content: '';
     width: 0.62rem;
     height: 0.62rem;
@@ -492,8 +560,8 @@
     transition: transform 0.18s ease, opacity 0.18s ease;
 }
 
-.MarkdownContent details > summary:hover,
-.MarkdownContent details > summary:focus-visible {
+.MarkdownContent details:not(.inlineReferenceChip) > summary:hover,
+.MarkdownContent details:not(.inlineReferenceChip) > summary:focus-visible {
     background: linear-gradient(
         180deg,
         color-mix(in srgb, var(--md-table-head-bg) 76%, rgba(255, 255, 255, 0.95) 24%),
@@ -501,34 +569,34 @@
     );
 }
 
-.MarkdownContent details > summary:focus-visible {
+.MarkdownContent details:not(.inlineReferenceChip) > summary:focus-visible {
     outline: 2px solid color-mix(in srgb, var(--md-link-color) 52%, transparent);
     outline-offset: -2px;
 }
 
-.MarkdownContent details > summary::-webkit-details-marker {
+.MarkdownContent details:not(.inlineReferenceChip) > summary::-webkit-details-marker {
     display: none;
 }
 
-.MarkdownContent details[open] > summary {
+.MarkdownContent details:not(.inlineReferenceChip)[open] > summary {
     border-bottom: 1px solid color-mix(in srgb, var(--md-table-border) 88%, transparent);
 }
 
-.MarkdownContent details[open] > summary::before {
+.MarkdownContent details:not(.inlineReferenceChip)[open] > summary::before {
     transform: rotate(45deg);
     opacity: 1;
 }
 
-.MarkdownContent details > :not(summary) {
+.MarkdownContent details:not(.inlineReferenceChip) > :not(summary) {
     margin-left: 1.05em;
     margin-right: 1.05em;
 }
 
-.MarkdownContent details > summary + * {
+.MarkdownContent details:not(.inlineReferenceChip) > summary + * {
     margin-top: 0.95em;
 }
 
-.MarkdownContent details > :last-child {
+.MarkdownContent details:not(.inlineReferenceChip) > :last-child {
     margin-bottom: 1.05em;
 }
 

package/src/book-components/Chat/MarkdownContent/MarkdownContent.tsx

@@ -6,7 +6,12 @@ import type { string_markdown } from '../../../types/string_markdown';
 import { classNames } from '../../_common/react-utils/classNames';
 import { CodeBlock } from '../CodeBlock/CodeBlock';
 import type { MarkdownInlineReference } from '../utils/renderMarkdown';
-import { renderMarkdown } from '../utils/renderMarkdown';
+import {
+    MARKDOWN_INLINE_REFERENCE_ICON_ATTRIBUTE,
+    MARKDOWN_INLINE_REFERENCE_MENU_ACTION_ATTRIBUTE,
+    MARKDOWN_INLINE_REFERENCE_MENU_ACTION_REFERENCE_ATTRIBUTE,
+    renderMarkdown,
+} from '../utils/renderMarkdown';
 import styles from './MarkdownContent.module.css';
 
 /**
@@ -16,6 +21,20 @@ import styles from './MarkdownContent.module.css';
  */
 const DETAILS_SUMMARY_SELECTOR = 'summary';
 
+/**
+ * Selector matching client-action buttons rendered inside inline-reference menus.
+ *
+ * @private utility of `MarkdownContent` component
+ */
+const INLINE_REFERENCE_MENU_ACTION_SELECTOR = `[${MARKDOWN_INLINE_REFERENCE_MENU_ACTION_ATTRIBUTE}]`;
+
+/**
+ * Selector matching inline-reference favicon images which need a broken-image fallback.
+ *
+ * @private utility of `MarkdownContent` component
+ */
+const INLINE_REFERENCE_ICON_SELECTOR = `img[${MARKDOWN_INLINE_REFERENCE_ICON_ATTRIBUTE}]`;
+
 /**
  * Props for markdown content.
  */
@@ -110,6 +129,45 @@ function resolveClickedDetailsElement(target: EventTarget | null, container: HTM
     return details instanceof HTMLDetailsElement ? details : null;
 }
 
+/**
+ * Resolves the configured callback for one rendered inline-reference menu action.
+ *
+ * @param actionButton - Clicked menu action button.
+ * @param inlineReferences - References available to the markdown content.
+ * @returns Matching action callback, or `null` when the rendered marker is stale.
+ *
+ * @private utility of `MarkdownContent` component
+ */
+function resolveInlineReferenceMenuAction(
+    actionButton: HTMLButtonElement,
+    inlineReferences: ReadonlyArray<MarkdownInlineReference> | undefined,
+): (() => void | Promise<void>) | null {
+    const actionId = actionButton.getAttribute(MARKDOWN_INLINE_REFERENCE_MENU_ACTION_ATTRIBUTE);
+    const referenceId = actionButton.getAttribute(MARKDOWN_INLINE_REFERENCE_MENU_ACTION_REFERENCE_ATTRIBUTE);
+
+    if (!actionId || !referenceId || !inlineReferences) {
+        return null;
+    }
+
+    const reference = inlineReferences.find((candidateReference) => candidateReference.reference === referenceId);
+    const option = reference?.menu?.options.find((candidateOption) => candidateOption.action?.id === actionId);
+
+    return option?.action?.onSelect || null;
+}
+
+/**
+ * Hides a favicon when it has completed without loading any pixels.
+ *
+ * @param faviconImage - Inline-reference favicon to inspect.
+ *
+ * @private utility of `MarkdownContent` component
+ */
+function hideBrokenInlineReferenceIcon(faviconImage: HTMLImageElement): void {
+    if (faviconImage.complete && faviconImage.naturalWidth === 0) {
+        faviconImage.hidden = true;
+    }
+}
+
 /**
  * Renders markdown content with support for code highlighting, math, and tables.
  *
@@ -215,8 +273,60 @@ export const MarkdownContent = memo(function MarkdownContent(props: MarkdownCont
             pendingToggleFallbackTimeoutIds.add(fallbackTimeoutId);
         };
 
+        /**
+         * Executes one delegated inline-reference menu action without allowing the click to reach
+         * surrounding chat message handlers.
+         */
+        const handleInlineReferenceMenuActionClick = (event: MouseEvent) => {
+            const targetElement = event.target instanceof Element ? event.target : null;
+            const actionButton = targetElement?.closest(INLINE_REFERENCE_MENU_ACTION_SELECTOR);
+
+            if (!(actionButton instanceof HTMLButtonElement) || !containerElement.contains(actionButton)) {
+                return;
+            }
+
+            const action = resolveInlineReferenceMenuAction(actionButton, inlineReferences);
+            if (!action || actionButton.disabled) {
+                return;
+            }
+
+            event.preventDefault();
+            event.stopPropagation();
+            actionButton.disabled = true;
+            actionButton.setAttribute('aria-busy', 'true');
+
+            void Promise.resolve()
+                .then(action)
+                .catch((error) => {
+                    console.error('Inline reference menu action failed:', error);
+                })
+                .finally(() => {
+                    if (!actionButton.isConnected) {
+                        return;
+                    }
+
+                    actionButton.disabled = false;
+                    actionButton.removeAttribute('aria-busy');
+                });
+        };
+
         containerElement.addEventListener('toggle', handleToggle, true);
         containerElement.addEventListener('click', handleSummaryClick);
+        containerElement.addEventListener('click', handleInlineReferenceMenuActionClick);
+
+        const inlineReferenceIconImages = containerElement.querySelectorAll<HTMLImageElement>(
+            INLINE_REFERENCE_ICON_SELECTOR,
+        );
+        const handleInlineReferenceIconError = (event: Event) => {
+            if (event.currentTarget instanceof HTMLImageElement) {
+                event.currentTarget.hidden = true;
+            }
+        };
+
+        inlineReferenceIconImages.forEach((faviconImage) => {
+            hideBrokenInlineReferenceIcon(faviconImage);
+            faviconImage.addEventListener('error', handleInlineReferenceIconError);
+        });
 
         const preElements = containerElement.querySelectorAll('pre');
 
@@ -261,12 +371,16 @@ export const MarkdownContent = memo(function MarkdownContent(props: MarkdownCont
         return () => {
             containerElement.removeEventListener('toggle', handleToggle, true);
             containerElement.removeEventListener('click', handleSummaryClick);
+            containerElement.removeEventListener('click', handleInlineReferenceMenuActionClick);
+            inlineReferenceIconImages.forEach((faviconImage) => {
+                faviconImage.removeEventListener('error', handleInlineReferenceIconError);
+            });
             pendingToggleFallbackTimeoutIds.forEach((timeoutId) => window.clearTimeout(timeoutId));
             pendingToggleFallbackTimeoutIds.clear();
             rootsRef.current.forEach((root) => root.unmount());
             rootsRef.current = [];
         };
-    }, [htmlContent, resolvedTheme]);
+    }, [htmlContent, inlineReferences, resolvedTheme]);
 
     return (
         <div