@vertesia/ui 1.0.0-dev.20260203.130115Z → 1.0.0-dev.20260227.112605Z

package/src/widgets/markdown/normalizeCustomSchemeLinks.ts

@@ -0,0 +1,91 @@
+const CUSTOM_SCHEME_PREFIXES = [
+    'artifact:',
+    'image:',
+    'store:',
+    'document://',
+    'collection:',
+];
+
+const CUSTOM_LINK_REGEX = /(!?\[[^\]\n]*\]\()((?:artifact:|image:|store:|document:\/\/|collection:)[^)]+)(\))/g;
+const INLINE_CODE_REGEX = /`[^`\n]*`/g;
+const FENCED_CODE_BLOCK_REGEX = /(^|\n)(`{3,}|~{3,})[^\n]*\n[\s\S]*?\n\2(?=\n|$)/g;
+const LINK_TITLE_SUFFIX_REGEX = /\s+("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|\([^)]*\))\s*$/;
+
+function hasCustomScheme(destination: string): boolean {
+    return CUSTOM_SCHEME_PREFIXES.some(prefix => destination.startsWith(prefix));
+}
+
+function wrapCustomDestination(destinationWithOptionalTitle: string): string {
+    const trimmed = destinationWithOptionalTitle.trim();
+
+    // Preserve already angle-bracketed custom destinations.
+    if (trimmed.startsWith('<')) {
+        const closeIdx = trimmed.indexOf('>');
+        if (closeIdx > 0) {
+            const bracketedDestination = trimmed.slice(1, closeIdx).trim();
+            if (hasCustomScheme(bracketedDestination)) {
+                return destinationWithOptionalTitle;
+            }
+        }
+    }
+
+    const titleMatch = trimmed.match(LINK_TITLE_SUFFIX_REGEX);
+    const titleStart = titleMatch?.index ?? -1;
+    const destination = (titleStart >= 0 ? trimmed.slice(0, titleStart) : trimmed).trim();
+    const title = titleStart >= 0 ? trimmed.slice(titleStart) : '';
+
+    if (!hasCustomScheme(destination)) {
+        return destinationWithOptionalTitle;
+    }
+
+    return `<${destination}>${title}`;
+}
+
+function normalizeCustomLinksInText(text: string): string {
+    return text.replace(CUSTOM_LINK_REGEX, (_fullMatch, open, destination, close) => {
+        return `${open}${wrapCustomDestination(destination)}${close}`;
+    });
+}
+
+function normalizeOutsideInlineCode(text: string): string {
+    let result = '';
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+
+    INLINE_CODE_REGEX.lastIndex = 0;
+    while ((match = INLINE_CODE_REGEX.exec(text)) !== null) {
+        result += normalizeCustomLinksInText(text.slice(lastIndex, match.index));
+        result += match[0];
+        lastIndex = match.index + match[0].length;
+    }
+
+    result += normalizeCustomLinksInText(text.slice(lastIndex));
+    return result;
+}
+
+/**
+ * Normalizes inline markdown links/images with custom URL schemes so they parse
+ * correctly even when paths contain spaces (e.g. artifact:out/INVOICE 2025-001.pdf).
+ *
+ * CommonMark requires destinations with spaces to be wrapped in <...>.
+ * We apply this only outside fenced/inline code spans.
+ */
+export function normalizeCustomSchemeLinks(markdown: string): string {
+    if (!markdown || !CUSTOM_SCHEME_PREFIXES.some(prefix => markdown.includes(prefix))) {
+        return markdown;
+    }
+
+    let result = '';
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+
+    FENCED_CODE_BLOCK_REGEX.lastIndex = 0;
+    while ((match = FENCED_CODE_BLOCK_REGEX.exec(markdown)) !== null) {
+        result += normalizeOutsideInlineCode(markdown.slice(lastIndex, match.index));
+        result += match[0];
+        lastIndex = match.index + match[0].length;
+    }
+
+    result += normalizeOutsideInlineCode(markdown.slice(lastIndex));
+    return result;
+}

package/src/widgets/markdown/normalizeDirectives.ts

@@ -0,0 +1,50 @@
+/**
+ * Normalize Pandoc-style single-line fenced divs into remark-directive syntax.
+ *
+ * Pandoc allows single-line containers:
+ *   ::: pagebreak :::
+ *   ::: tip Some content here. :::
+ *
+ * remark-directive requires multi-line containers:
+ *   :::pagebreak
+ *   :::
+ *
+ *   :::tip
+ *   Some content here.
+ *   :::
+ *
+ * This preprocessor converts the single-line form into multi-line so that
+ * remark-directive can parse them correctly.
+ */
+
+/**
+ * Regex matching a single-line fenced div:
+ *   ::: name optional-content :::
+ *
+ * Groups:
+ *   [1] leading indent
+ *   [2] directive name (word chars only)
+ *   [3] optional inline content (may be empty)
+ *
+ * Only matches when both opening and closing ::: are on the SAME line,
+ * so it won't interfere with properly formatted multi-line containers.
+ */
+const SINGLE_LINE_DIRECTIVE = /^([ \t]*):::\s*(\w+)\s*(.*?)\s*:::[ \t]*$/gm;
+
+export function normalizeDirectives(markdown: string): string {
+    if (!markdown || !markdown.includes(':::')) {
+        return markdown;
+    }
+
+    return markdown.replace(
+        SINGLE_LINE_DIRECTIVE,
+        (_match, indent: string, name: string, content: string) => {
+            if (content) {
+                // Has content → multi-line container directive
+                return `${indent}:::${name}\n${indent}${content}\n${indent}:::`;
+            }
+            // No content → leaf directive (::name)
+            return `${indent}::${name}`;
+        }
+    );
+}

package/src/widgets/markdown/remarkDirectiveHandler.ts

@@ -0,0 +1,119 @@
+/**
+ * Custom remark plugin that transforms remark-directive nodes into
+ * HTML elements for columns layout and callout containers.
+ *
+ * Supported directives:
+ *   :::columns          → <div class="md-columns">
+ *   :::column{width=50%}→ <div class="md-column" style="width:50%">
+ *   :::note / :::warning / :::tip / :::caution / :::important → callout <div>s
+ *   :::name             → <div class="md-name"> (generic fallback)
+ */
+import { visit, type VisitorResult } from 'unist-util-visit';
+
+// Callout types mapped to CSS modifier classes (semantic design system)
+const CALLOUT_TYPES: Record<string, string> = {
+    note: 'md-callout-info',
+    tip: 'md-callout-info',
+    warning: 'md-callout-attention',
+    important: 'md-callout-attention',
+    caution: 'md-callout-destructive',
+};
+
+const CALLOUT_LABELS: Record<string, string> = {
+    note: 'Note',
+    tip: 'Tip',
+    warning: 'Warning',
+    important: 'Important',
+    caution: 'Caution',
+};
+
+interface DirectiveNode {
+    type: string;
+    name: string;
+    attributes?: Record<string, string>;
+    data?: {
+        hName?: string;
+        hProperties?: Record<string, unknown>;
+    };
+    children?: DirectiveNode[];
+}
+
+export function remarkDirectiveHandler() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (tree: any) => {
+        visit(tree, (node): VisitorResult => {
+            if (
+                node.type !== 'containerDirective' &&
+                node.type !== 'leafDirective' &&
+                node.type !== 'textDirective'
+            ) {
+                return;
+            }
+
+            const d = node as unknown as DirectiveNode;
+            const data = d.data || (d.data = {});
+            const attrs = d.attributes || {};
+            const name = d.name;
+
+            // ::pagebreak / :::pagebreak → visual page break indicator
+            if (name === 'pagebreak') {
+                data.hName = 'hr';
+                data.hProperties = { className: 'md-pagebreak' };
+                return;
+            }
+
+            // :::columns → flex container
+            if (name === 'columns') {
+                data.hName = 'div';
+                data.hProperties = { className: 'md-columns' };
+                return;
+            }
+
+            // :::column{width=50%} → flex child with optional width
+            if (name === 'column') {
+                data.hName = 'div';
+                const props: Record<string, unknown> = { className: 'md-column' };
+                if (attrs.width) {
+                    props.style = `flex-basis:${attrs.width};flex-grow:0;flex-shrink:0`;
+                }
+                data.hProperties = props;
+                return;
+            }
+
+            // Callout types
+            if (name in CALLOUT_TYPES) {
+                data.hName = 'div';
+                data.hProperties = {
+                    className: `md-callout ${CALLOUT_TYPES[name]}`,
+                    'data-callout-type': name,
+                };
+                // Prepend a title paragraph
+                const label = CALLOUT_LABELS[name];
+                if (label && d.children) {
+                    const titleNode = {
+                        type: 'paragraph',
+                        data: {
+                            hName: 'p',
+                            hProperties: { className: 'md-callout-title' },
+                        },
+                        children: [{ type: 'text', value: label }],
+                    };
+                    d.children.unshift(titleNode as unknown as DirectiveNode);
+                }
+                return;
+            }
+
+            // Generic fallback: :::name → <div class="md-name">
+            data.hName = 'div';
+            data.hProperties = {
+                className: `md-${name}`,
+                ...Object.fromEntries(
+                    Object.entries(attrs).filter(([k]) => k !== 'class'),
+                ),
+            };
+            if (attrs.class) {
+                data.hProperties.className += ` ${attrs.class}`;
+            }
+        });
+    };
+}

package/src/widgets/monacoEditor/MonacoEditor.tsx

@@ -51,7 +51,7 @@ interface MonacoEditorProps {
 
 export function MonacoEditor({
     onChange,
-    value = '',
+    value,
     className,
     editorRef,
     language = 'javascript',
@@ -61,7 +61,7 @@ export function MonacoEditor({
     onMount,
     defaultValue,
 }: MonacoEditorProps) {
-    const [editorValue, setEditorValue] = useState(value);
+    const [editorValue, setEditorValue] = useState(value || defaultValue || '');
     const editorInstanceRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
     const { theme } = useTheme();
 
@@ -148,10 +148,11 @@ export function MonacoEditor({
 
     // Update editor value when prop changes from outside
     useEffect(() => {
-        if (value !== editorValue) {
-            setEditorValue(value);
+        const effectiveValue = value || defaultValue || '';
+        if (effectiveValue !== editorValue) {
+            setEditorValue(effectiveValue);
             if (editorInstanceRef.current) {
-                editorInstanceRef.current.setValue(value);
+                editorInstanceRef.current.setValue(effectiveValue);
             }
         }
     }, [value]); // Only depend on value prop, not editorValue

package/src/widgets/schema-editor/ManagedSchema.ts

@@ -75,7 +75,7 @@ export class ManagedSchema implements SchemaLoader {
         return this;
     }
 
-    replaceSchema(schema: JSONSchema | null) {
+    replaceSchema(schema: JSONSchema | null | undefined) {
         if (!schema) {
             this.schema = {
                 title: this.schema.title,

package/src/widgets/schema-editor/json-schema4-utils.ts

@@ -96,7 +96,7 @@ export function addProperty(schema: JSONSchema, name: string, type: TypeSignatur
     if (!schema.properties) {
         schema.properties = {};
     }
-    const newSchema = {} as JSONSchema;
+    const newSchema: JSONSchema = {};
     setPropertyType(newSchema, type);
     schema.properties[name] = newSchema;
     if (isRequired) {

package/src/features/agent/CHART_INSTRUCTIONS.md

@@ -1,228 +0,0 @@
-# Chart Creation Instructions for AI Agents
-
-This document provides instructions for AI agents on how to create interactive charts that will be rendered in the UI.
-
-## Overview
-
-You can create charts by including a special markdown code block with the language `chart`. The UI will automatically detect and render these as interactive Recharts visualizations.
-
-## Basic Format
-
-```markdown
-\`\`\`chart
-{
-  "version": "1.0",
-  "library": "recharts",
-  "chart": "bar" | "line" | "composed",
-  "title": "Chart Title",
-  "description": "Optional description",
-  "data": [ /* array of data objects */ ],
-  "xKey": "fieldName",
-  "series": [ /* array of series configurations */ ],
-  "yAxis": { /* optional axis labels */ },
-  "options": { /* optional chart options */ }
-}
-\`\`\`
-```
-
-## Chart Types
-
-### 1. Bar Chart
-Used for comparing values across categories.
-
-```chart
-{
-  "version": "1.0",
-  "chart": "bar",
-  "title": "Revenue by Quarter",
-  "data": [
-    { "quarter": "Q1", "revenue": 100000 },
-    { "quarter": "Q2", "revenue": 150000 },
-    { "quarter": "Q3", "revenue": 120000 }
-  ],
-  "xKey": "quarter",
-  "series": [
-    { "key": "revenue", "label": "Revenue", "type": "bar" }
-  ]
-}
-```
-
-### 2. Line Chart
-Used for showing trends over time.
-
-```chart
-{
-  "version": "1.0",
-  "chart": "line",
-  "title": "Performance Over Time",
-  "data": [
-    { "period": "2024-Q1", "tvpi": 1.2, "dpi": 0.3 },
-    { "period": "2024-Q2", "tvpi": 1.5, "dpi": 0.5 },
-    { "period": "2024-Q3", "tvpi": 1.8, "dpi": 0.7 }
-  ],
-  "xKey": "period",
-  "series": [
-    { "key": "tvpi", "label": "TVPI", "color": "#4f46e5", "dot": false },
-    { "key": "dpi", "label": "DPI", "color": "#16a34a", "dot": false }
-  ],
-  "yAxis": {
-    "left": { "label": "Multiple (x)" }
-  }
-}
-```
-
-### 3. Composed Chart
-Used for mixing bar and line charts (e.g., bars for cashflows, line for net).
-
-```chart
-{
-  "version": "1.0",
-  "chart": "composed",
-  "title": "Cashflow Timeline",
-  "data": [
-    { "period": "2024-Q1", "calls": 1000000, "distributions": 500000, "netCashflow": -500000 },
-    { "period": "2024-Q2", "calls": 800000, "distributions": 1200000, "netCashflow": 400000 }
-  ],
-  "xKey": "period",
-  "series": [
-    { "key": "calls", "label": "Calls", "type": "bar", "color": "#ef4444" },
-    { "key": "distributions", "label": "Distributions", "type": "bar", "color": "#22c55e" },
-    { "key": "netCashflow", "label": "Net CF", "type": "line", "color": "#0ea5e9", "yAxisId": "right", "dot": false }
-  ],
-  "yAxis": {
-    "left": { "label": "Amount" },
-    "right": { "label": "Net" }
-  },
-  "options": {
-    "referenceZero": true
-  }
-}
-```
-
-## Series Configuration
-
-Each series can have:
-
-- `key`: (required) The field name in the data
-- `label`: Display name for the legend
-- `type`: "bar" or "line" (for composed charts)
-- `color`: Hex color code (e.g., "#4f46e5")
-- `yAxisId`: "left" (default) or "right" for dual Y-axis
-- `stackId`: Group bars for stacking
-- `dot`: true/false - show dots on line charts
-
-## Options
-
-- `stacked`: true/false - Stack bars in bar charts
-- `referenceZero`: true/false - Show a reference line at y=0
-- `collapsible`: true/false - Allow users to collapse the chart (default: true)
-- `collapseInitially`: true/false - Start in collapsed state
-
-## Number Formatting
-
-Numbers are automatically formatted:
-- 1,000 → 1K
-- 1,000,000 → 1M
-- 1,000,000,000 → 1B
-
-## Pre-built Chart Builders (TypeScript)
-
-If you're writing TypeScript code, you can use these helper functions:
-
-```typescript
-import {
-  buildCashflowComposedChart,
-  buildPerformanceLineChart,
-  buildScenarioComparisonBarChart,
-  toChartMarkdown
-} from '@vertesia/ui/features';
-
-// Example: Create a cashflow chart
-const chart = buildCashflowComposedChart({
-  title: 'Fund Cashflow',
-  rows: [
-    { period: '2024-Q1', calls: 1000000, distributions: 500000 },
-    { period: '2024-Q2', calls: 800000, distributions: 1200000 }
-  ]
-});
-
-// Convert to markdown
-const markdown = toChartMarkdown(chart);
-```
-
-### Available Builders
-
-1. `buildCashflowComposedChart` - Calls/Distributions + Net CF
-2. `buildPerformanceLineChart` - TVPI/DPI/RVPI J-curve
-3. `buildScenarioComparisonBarChart` - Side-by-side comparison
-4. `buildScenarioDeltaPercentChart` - % change visualization
-5. `buildTvpiOverlayChart` - TVPI comparison between scenarios
-6. `buildNavLineChart` - NAV over time
-
-## Best Practices
-
-1. **Use appropriate chart types**:
-   - Bar charts for comparisons
-   - Line charts for trends
-   - Composed charts for mixed metrics
-
-2. **Keep data concise**:
-   - Limit to 20-30 data points for readability
-   - Use aggregation for large datasets
-
-3. **Color consistency**:
-   - Use the default color palette for consistency
-   - Red (#ef4444) for negative/costs
-   - Green (#22c55e) for positive/gains
-   - Blue (#0ea5e9) for neutral metrics
-
-4. **Add context**:
-   - Always include a descriptive title
-   - Add a description when the chart needs explanation
-   - Use axis labels for clarity
-
-5. **Dual Y-axis**:
-   - Use when comparing metrics with different scales
-   - Example: Amount (left) vs Count (right)
-
-## Example: Complete Workflow
-
-When a user asks "Show me the fund performance":
-
-1. Fetch or calculate the data
-2. Format it as a chart spec
-3. Include it in your response:
-
-```markdown
-Here's the fund performance over time:
-
-\`\`\`chart
-{
-  "version": "1.0",
-  "chart": "line",
-  "title": "Fund Performance",
-  "data": [
-    { "period": "2024-Q1", "tvpi": 1.2 },
-    { "period": "2024-Q2", "tvpi": 1.5 }
-  ],
-  "xKey": "period",
-  "series": [
-    { "key": "tvpi", "label": "TVPI", "color": "#4f46e5" }
-  ]
-}
-\`\`\`
-
-The fund shows strong performance with TVPI increasing from 1.2x to 1.5x.
-```
-
-## Common Pitfalls
-
-❌ **Don't** include line breaks in the JSON
-❌ **Don't** use single quotes in JSON (use double quotes)
-❌ **Don't** forget to specify the chart type
-❌ **Don't** mix up xKey with data field names
-
-✅ **Do** validate your JSON before including it
-✅ **Do** include descriptive labels
-✅ **Do** test with sample data first
-✅ **Do** provide context around the chart