@lynx-js/genui 0.0.1-rc.0

package/a2ui/dist/catalog/Image/catalog.json

@@ -0,0 +1,62 @@
+{
+  "Image": {
+    "properties": {
+      "url": {
+        "oneOf": [
+          {
+            "type": "string"
+          },
+          {
+            "type": "object",
+            "properties": {
+              "path": {
+                "type": "string"
+              }
+            },
+            "required": [
+              "path"
+            ],
+            "additionalProperties": false
+          }
+        ],
+        "description": "Image URL or path binding."
+      },
+      "fit": {
+        "type": "string",
+        "enum": [
+          "contain",
+          "cover",
+          "fill",
+          "none",
+          "scale-down"
+        ]
+      },
+      "mode": {
+        "type": "string",
+        "enum": [
+          "center",
+          "scaleToFill",
+          "aspectFit",
+          "aspectFill"
+        ]
+      },
+      "variant": {
+        "type": "string",
+        "enum": [
+          "icon",
+          "avatar",
+          "smallFeature",
+          "mediumFeature",
+          "largeFeature",
+          "header"
+        ]
+      },
+      "weight": {
+        "type": "number"
+      }
+    },
+    "required": [
+      "url"
+    ]
+  }
+}

package/a2ui/dist/catalog/Image/index.d.ts

@@ -0,0 +1,16 @@
+import type { GenericComponentProps } from '../../store/types.js';
+import '../../../styles/catalog/Image.css';
+/**
+ * @a2uiCatalog Image
+ */
+export interface ImageProps extends GenericComponentProps {
+    /** Image URL or path binding. */
+    url: string | {
+        path: string;
+    };
+    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    mode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'center';
+    variant?: 'icon' | 'avatar' | 'smallFeature' | 'mediumFeature' | 'largeFeature' | 'header';
+    weight?: number;
+}
+export declare function Image(props: ImageProps): import('@lynx-js/react').ReactNode;

package/a2ui/dist/catalog/Image/index.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "@lynx-js/react/jsx-runtime";
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { useEffect, useState } from '@lynx-js/react';
+import '../../../styles/catalog/Image.css';
+const fallbackImage = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/zalzzh-ukj-lapzild-shpjpmmv-eufs/ljhwZthlaukjlkulzlp/built-in-images/logo.png';
+export function Image(props) {
+    const src = props.url;
+    const fit = props.fit ?? 'fit';
+    const mode = props.mode ?? (() => {
+        switch (fit) {
+            case 'contain':
+            case 'scale-down':
+                return 'aspectFit';
+            case 'fill':
+                return 'scaleToFill';
+            case 'none':
+                return 'center';
+            default:
+                return 'aspectFill';
+        }
+    })();
+    const [hasError, setHasError] = useState(false);
+    useEffect(() => {
+        setHasError(false);
+    }, [src]);
+    return (_jsx("image", { className: `a2ui-image image-variant-${props.variant ?? 'mediumFeature'} ${typeof props.weight === 'number' ? 'image-weighted' : ''}`, "auto-size": true, src: hasError ? fallbackImage : src, mode: mode, binderror: () => setHasError(true) }, props.id));
+}
+//# sourceMappingURL=index.js.map

package/a2ui/dist/catalog/Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/catalog/Image/index.tsx"],"names":[],"mappings":";AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAC1D,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAIrD,OAAO,mCAAmC,CAAC;AAoB3C,MAAM,aAAa,GACjB,6HAA6H,CAAC;AAEhI,MAAM,UAAU,KAAK,CACnB,KAAiB;IAEjB,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;IACtB,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC;IAC/B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,CAAC,GAAG,EAAE;QAC/B,QAAQ,GAAG,EAAE,CAAC;YACZ,KAAK,SAAS,CAAC;YACf,KAAK,YAAY;gBACf,OAAO,WAAW,CAAC;YACrB,KAAK,MAAM;gBACT,OAAO,aAAa,CAAC;YACvB,KAAK,MAAM;gBACT,OAAO,QAAQ,CAAC;YAClB;gBACE,OAAO,YAAY,CAAC;QACxB,CAAC;IACH,CAAC,CAAC,EAAE,CAAC;IAEL,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,CACL,gBAEE,SAAS,EAAE,4BACT,KAAK,CAAC,OAAO,IAAI,eACnB,IAAI,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,EAAE,eACnD,IAAI,EACf,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,GAAa,EAC7C,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,IAP7B,KAAK,CAAC,EAAE,CAQb,CACH,CAAC;AACJ,CAAC"}

package/a2ui/dist/catalog/LineChart/catalog.json

@@ -0,0 +1,98 @@
+{
+  "LineChart": {
+    "properties": {
+      "labels": {
+        "oneOf": [
+          {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          },
+          {
+            "type": "object",
+            "properties": {
+              "path": {
+                "type": "string"
+              }
+            },
+            "required": [
+              "path"
+            ],
+            "additionalProperties": false
+          }
+        ],
+        "description": "Category labels shown along the x axis."
+      },
+      "series": {
+        "oneOf": [
+          {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string"
+                },
+                "values": {
+                  "type": "array",
+                  "items": {
+                    "type": "number"
+                  }
+                },
+                "color": {
+                  "type": "string"
+                }
+              },
+              "required": [
+                "name",
+                "values"
+              ],
+              "additionalProperties": false
+            }
+          },
+          {
+            "type": "object",
+            "properties": {
+              "path": {
+                "type": "string"
+              }
+            },
+            "required": [
+              "path"
+            ],
+            "additionalProperties": false
+          }
+        ],
+        "description": "One or more line series to render over the shared labels."
+      },
+      "variant": {
+        "type": "string",
+        "enum": [
+          "linear",
+          "natural",
+          "step"
+        ]
+      },
+      "xLabel": {
+        "type": "string"
+      },
+      "yLabel": {
+        "type": "string"
+      },
+      "showGrid": {
+        "type": "boolean"
+      },
+      "showLegend": {
+        "type": "boolean"
+      },
+      "height": {
+        "type": "number"
+      }
+    },
+    "required": [
+      "labels",
+      "series"
+    ]
+  }
+}

package/a2ui/dist/catalog/LineChart/index.d.ts

@@ -0,0 +1,31 @@
+import type { GenericComponentProps } from '../../store/types.js';
+import '../../../styles/catalog/LineChart.css';
+export interface LineChartSeries {
+    name: string;
+    values: number[];
+    color?: string;
+}
+/**
+ * @a2uiCatalog LineChart
+ */
+export interface LineChartProps extends GenericComponentProps {
+    /** Category labels shown along the x axis. */
+    labels: string[] | {
+        path: string;
+    };
+    /** One or more line series to render over the shared labels. */
+    series: Array<{
+        name: string;
+        values: number[];
+        color?: string;
+    }> | {
+        path: string;
+    };
+    variant?: 'linear' | 'natural' | 'step';
+    xLabel?: string;
+    yLabel?: string;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    height?: number;
+}
+export declare function LineChart(props: LineChartProps): import('@lynx-js/react').ReactNode;

package/a2ui/dist/catalog/LineChart/index.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@lynx-js/react/jsx-runtime";
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { useResolvedProps } from '../../react/useDataBinding.js';
+import { DEFAULT_CHART_COLORS, escapeXml, formatValue, } from '../utils/chart.js';
+import '../../../styles/catalog/LineChart.css';
+const SVG_WIDTH = 360;
+const DEFAULT_HEIGHT = 240;
+const MARGIN = { top: 16, right: 16, bottom: 24, left: 16 };
+function normalizeSeries(series, palette) {
+    return series.map((item, index) => ({
+        name: item.name,
+        values: item.values,
+        color: item.color ?? palette[index % palette.length] ?? '#0057d9',
+    }));
+}
+function buildLinearPath(points) {
+    if (points.length === 0)
+        return '';
+    const first = points[0];
+    const rest = points.slice(1);
+    let path = `M ${first.x.toFixed(1)} ${first.y.toFixed(1)}`;
+    for (const point of rest) {
+        path += ` L ${point.x.toFixed(1)} ${point.y.toFixed(1)}`;
+    }
+    return path;
+}
+function buildStepPath(points) {
+    if (points.length === 0)
+        return '';
+    const first = points[0];
+    const rest = points.slice(1);
+    let path = `M ${first.x.toFixed(1)} ${first.y.toFixed(1)}`;
+    let prev = first;
+    for (const point of rest) {
+        path += ` L ${point.x.toFixed(1)} ${prev.y.toFixed(1)}`;
+        path += ` L ${point.x.toFixed(1)} ${point.y.toFixed(1)}`;
+        prev = point;
+    }
+    return path;
+}
+function buildNaturalPath(points) {
+    if (points.length === 0)
+        return '';
+    if (points.length === 1) {
+        const point = points[0];
+        return `M ${point.x.toFixed(1)} ${point.y.toFixed(1)}`;
+    }
+    let path = `M ${points[0].x.toFixed(1)} ${points[0].y.toFixed(1)}`;
+    for (let index = 0; index < points.length - 1; index += 1) {
+        const p0 = points[index - 1] ?? points[index];
+        const p1 = points[index];
+        const p2 = points[index + 1];
+        const p3 = points[index + 2] ?? p2;
+        const cp1x = p1.x + (p2.x - p0.x) / 6;
+        const cp1y = p1.y + (p2.y - p0.y) / 6;
+        const cp2x = p2.x - (p3.x - p1.x) / 6;
+        const cp2y = p2.y - (p3.y - p1.y) / 6;
+        path += ` C ${cp1x.toFixed(1)} ${cp1y.toFixed(1)}, ${cp2x.toFixed(1)} ${cp2y.toFixed(1)}, ${p2.x.toFixed(1)} ${p2.y.toFixed(1)}`;
+    }
+    return path;
+}
+function buildPath(points, variant) {
+    switch (variant) {
+        case 'step':
+            return buildStepPath(points);
+        case 'natural':
+            return buildNaturalPath(points);
+        default:
+            return buildLinearPath(points);
+    }
+}
+function sampleIndices(count, maxLabels) {
+    if (count <= 0)
+        return [];
+    if (count <= maxLabels) {
+        return Array.from({ length: count }, (_, index) => index);
+    }
+    const step = Math.ceil(count / maxLabels);
+    const indices = [];
+    for (let index = 0; index < count; index += step) {
+        indices.push(index);
+    }
+    const last = count - 1;
+    if (indices[indices.length - 1] !== last) {
+        indices.push(last);
+    }
+    return Array.from(new Set(indices));
+}
+function minMax(values) {
+    if (values.length === 0) {
+        return { min: 0, max: 1 };
+    }
+    let min = values[0];
+    let max = values[0];
+    for (const value of values) {
+        if (value < min)
+            min = value;
+        if (value > max)
+            max = value;
+    }
+    if (min === max) {
+        min -= 1;
+        max += 1;
+    }
+    return { min, max };
+}
+function buildSvgMarkup(labels, series, variant, showGrid) {
+    const width = SVG_WIDTH;
+    const height = DEFAULT_HEIGHT;
+    const chartWidth = width - MARGIN.left - MARGIN.right;
+    const chartHeight = height - MARGIN.top - MARGIN.bottom;
+    const maxPoints = labels.length;
+    const values = series.flatMap((item) => item.values.slice(0, maxPoints));
+    if (maxPoints === 0 || series.length === 0 || values.length === 0) {
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"></svg>`;
+    }
+    const { min: minValue, max: maxValue } = minMax(values);
+    const yRange = maxValue - minValue;
+    const xStep = maxPoints > 1 ? chartWidth / (maxPoints - 1) : 0;
+    const gridLines = 4;
+    const lineMarkup = series
+        .map((item, seriesIndex) => {
+        const points = item.values.slice(0, maxPoints).map((value, index) => {
+            const x = MARGIN.left + xStep * index;
+            const y = MARGIN.top + chartHeight
+                - ((value - minValue) / yRange) * chartHeight;
+            return { x, y };
+        });
+        const color = escapeXml(item.color
+            ?? DEFAULT_CHART_COLORS[seriesIndex % DEFAULT_CHART_COLORS.length]
+            ?? '#0057d9');
+        const d = buildPath(points, variant);
+        const circles = points
+            .map((point) => `<circle cx="${point.x.toFixed(1)}" cy="${point.y.toFixed(1)}" r="3.5" fill="${color}" stroke="#ffffff" stroke-width="1.5" />`)
+            .join('');
+        return `
+        <path d="${d}" fill="none" stroke="${color}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+        ${circles}
+      `;
+    })
+        .join('');
+    const gridMarkup = showGrid
+        ? Array.from({ length: gridLines + 1 }, (_, index) => {
+            const ratio = index / gridLines;
+            const y = MARGIN.top + chartHeight - ratio * chartHeight;
+            const dashed = index === gridLines ? '' : ' stroke-dasharray="4 6"';
+            return `<line x1="${MARGIN.left}" y1="${y.toFixed(1)}" x2="${width - MARGIN.right}" y2="${y.toFixed(1)}" stroke="rgba(0,0,0,0.12)" stroke-width="1"${dashed} />`;
+        }).join('')
+        : '';
+    return `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">
+      <rect x="0" y="0" width="${width}" height="${height}" rx="16" fill="rgba(255,255,255,0.02)" />
+      ${gridMarkup}
+      <line x1="${MARGIN.left}" y1="${height - MARGIN.bottom}" x2="${width - MARGIN.right}" y2="${height - MARGIN.bottom}" stroke="rgba(0,0,0,0.24)" stroke-width="1.5" />
+      ${lineMarkup}
+    </svg>
+  `;
+}
+export function LineChart(props) {
+    const [resolvedProps] = useResolvedProps(props, props.surface, props.dataContextPath);
+    const id = props.id;
+    const labelsValue = resolvedProps['labels'];
+    const labels = Array.isArray(labelsValue)
+        ? labelsValue
+        : [];
+    const seriesValue = resolvedProps['series'];
+    const series = Array.isArray(seriesValue)
+        ? normalizeSeries(seriesValue, DEFAULT_CHART_COLORS)
+        : [];
+    const variant = resolvedProps['variant']
+        ?? 'natural';
+    const showGrid = resolvedProps['showGrid'] !== false;
+    const showLegend = resolvedProps['showLegend'] !== false;
+    const heightValue = resolvedProps['height'];
+    const height = typeof heightValue === 'number'
+        ? heightValue
+        : DEFAULT_HEIGHT;
+    const svgMarkup = buildSvgMarkup(labels, series, variant, showGrid);
+    const visibleLabelIndices = sampleIndices(labels.length, 8);
+    const { min, max } = minMax(series.flatMap((item) => item.values.slice(0, labels.length)));
+    return (_jsxs("view", { className: 'line-chart', children: [_jsxs("view", { className: 'line-chart-header', children: [_jsxs("view", { className: 'line-chart-header-copy', children: [_jsx("text", { className: 'line-chart-title', children: resolvedProps['yLabel'] ?? 'Line chart' }), _jsx("text", { className: 'line-chart-caption', children: series.length > 0
+                                    ? `${series.length} series • ${labels.length} points`
+                                    : 'No data' })] }), resolvedProps['xLabel']
+                        ? (_jsx("text", { className: 'line-chart-axis-label', children: resolvedProps['xLabel'] }))
+                        : null] }), _jsxs("view", { className: 'line-chart-scale-row', children: [_jsx("text", { className: 'line-chart-scale-value', children: formatValue(min) }), _jsx("text", { className: 'line-chart-scale-value line-chart-scale-value-right', children: formatValue(max) })] }), _jsx("svg", { className: 'line-chart-svg', content: svgMarkup, style: { width: '100%', height: `${height}px` } }), _jsx("view", { className: 'line-chart-axis-row', children: visibleLabelIndices.map((index) => (_jsx("view", { className: 'line-chart-axis-tick', children: _jsx("text", { className: 'line-chart-axis-tick-label', children: labels[index] ?? '' }) }, `${index}-${labels[index] ?? index}`))) }), showLegend
+                ? (_jsx("view", { className: 'line-chart-legend', children: series.map((item, index) => (_jsxs("view", { className: 'line-chart-legend-item', children: [_jsx("view", { className: 'line-chart-legend-swatch', style: {
+                                    backgroundColor: item.color
+                                        ?? DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length]
+                                        ?? '#0057d9',
+                                } }), _jsx("text", { className: 'line-chart-legend-label', children: item.name })] }, item.name))) }))
+                : null] }, id));
+}
+//# sourceMappingURL=index.js.map

package/a2ui/dist/catalog/LineChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/catalog/LineChart/index.tsx"],"names":[],"mappings":"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"}

package/a2ui/dist/catalog/List/catalog.json

@@ -0,0 +1,52 @@
+{
+  "List": {
+    "properties": {
+      "children": {
+        "oneOf": [
+          {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          },
+          {
+            "type": "object",
+            "properties": {
+              "componentId": {
+                "type": "string"
+              },
+              "path": {
+                "type": "string"
+              }
+            },
+            "required": [
+              "componentId",
+              "path"
+            ],
+            "additionalProperties": false
+          }
+        ],
+        "description": "Static child IDs array or template object."
+      },
+      "direction": {
+        "type": "string",
+        "enum": [
+          "horizontal",
+          "vertical"
+        ]
+      },
+      "align": {
+        "type": "string",
+        "enum": [
+          "start",
+          "center",
+          "end",
+          "stretch"
+        ]
+      }
+    },
+    "required": [
+      "children"
+    ]
+  }
+}

package/a2ui/dist/catalog/List/index.d.ts

@@ -0,0 +1,15 @@
+import type { GenericComponentProps } from '../../store/types.js';
+import '../../../styles/catalog/List.css';
+/**
+ * @a2uiCatalog List
+ */
+export interface ListProps extends GenericComponentProps {
+    /** Static child IDs array or template object. */
+    children: string[] | {
+        componentId: string;
+        path: string;
+    };
+    direction?: 'horizontal' | 'vertical';
+    align?: 'start' | 'center' | 'end' | 'stretch';
+}
+export declare function List(props: ListProps): import('@lynx-js/react').ReactNode;

package/a2ui/dist/catalog/List/index.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "@lynx-js/react/jsx-runtime";
+import { NodeRenderer } from '../../react/A2UIRenderer.js';
+import { useDataBinding } from '../../react/useDataBinding.js';
+import '../../../styles/catalog/List.css';
+export function List(props) {
+    const { children, surface, dataContextPath, direction = 'vertical', align = 'stretch', } = props;
+    const isDynamic = children && !Array.isArray(children)
+        && typeof children === 'object';
+    const template = isDynamic
+        ? children
+        : undefined;
+    const [listData, , fullPath] = useDataBinding(template ? { path: template.path } : undefined, surface, dataContextPath, []);
+    let content = [];
+    if (Array.isArray(children)) {
+        content = children.map((childId) => {
+            const child = surface.components.get(childId);
+            if (!child)
+                return null;
+            // Propagate dataContextPath
+            const childWithContext = dataContextPath
+                ? { ...child, dataContextPath: dataContextPath }
+                : child;
+            return {
+                key: childId,
+                component: childWithContext,
+            };
+        });
+    }
+    else if (template) {
+        const items = Array.isArray(listData) ? listData : [];
+        content = items.map((item, index) => {
+            const componentId = template.componentId;
+            const child = surface.components.get(componentId);
+            if (!child)
+                return null;
+            const key = item && typeof item === 'object' && 'key' in item
+                ? String(item['key'])
+                : `${index}`;
+            const itemPath = `${fullPath}/${index}`;
+            const childWithContext = { ...child, dataContextPath: itemPath };
+            return {
+                key: key,
+                component: childWithContext,
+            };
+        });
+    }
+    return (_jsx("list", { className: `list list-${String(direction)} list-align-${String(align)}`, "scroll-orientation": direction === 'vertical' ? 'vertical' : 'horizontal', "list-type": 'single', "span-count": 1, children: content.map((item) => {
+            if (!item)
+                return null;
+            return (_jsx("list-item", { "item-key": item.key, children: _jsx(NodeRenderer, { component: item.component, surface: surface }) }, item.key));
+        }) }));
+}
+//# sourceMappingURL=index.js.map

package/a2ui/dist/catalog/List/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/catalog/List/index.tsx"],"names":[],"mappings":"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"}

package/a2ui/dist/catalog/Modal/catalog.json

@@ -0,0 +1,18 @@
+{
+  "Modal": {
+    "properties": {
+      "trigger": {
+        "type": "string",
+        "description": "The ID of the component that opens the modal when interacted with."
+      },
+      "content": {
+        "type": "string",
+        "description": "The ID of the component to display inside the modal."
+      }
+    },
+    "required": [
+      "trigger",
+      "content"
+    ]
+  }
+}

package/a2ui/dist/catalog/Modal/index.d.ts

@@ -0,0 +1,12 @@
+import type { GenericComponentProps } from '../../store/types.js';
+import '../../../styles/catalog/Modal.css';
+/**
+ * @a2uiCatalog Modal
+ */
+export interface ModalProps extends GenericComponentProps {
+    /** The ID of the component that opens the modal when interacted with. */
+    trigger: string;
+    /** The ID of the component to display inside the modal. */
+    content: string;
+}
+export declare function Modal(props: ModalProps): import('@lynx-js/react').ReactNode;

package/a2ui/dist/catalog/Modal/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@lynx-js/react/jsx-runtime";
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { DialogBackdrop, DialogContent, DialogRoot, DialogView, } from '@lynx-js/lynx-ui';
+import { useState } from '@lynx-js/react';
+import { NodeRenderer } from '../../react/A2UIRenderer.js';
+import '../../../styles/catalog/Modal.css';
+function childWithContext(child, dataContextPath) {
+    return child && dataContextPath
+        ? { ...child, dataContextPath }
+        : child;
+}
+export function Modal(props) {
+    const { dataContextPath, surface, } = props;
+    const [open, setOpen] = useState(false);
+    const compatibleProps = props;
+    const triggerId = compatibleProps.trigger ?? compatibleProps.entryPointChild;
+    const contentId = compatibleProps.content ?? compatibleProps.contentChild;
+    const trigger = childWithContext(triggerId ? surface.components.get(triggerId) : undefined, dataContextPath);
+    const content = childWithContext(contentId ? surface.components.get(contentId) : undefined, dataContextPath);
+    const handleOpen = () => {
+        setOpen(true);
+    };
+    return (_jsxs(DialogRoot, { show: open, onShowChange: (nextOpen) => {
+            setOpen(nextOpen);
+        }, children: [_jsx("view", { className: 'modal-trigger', bindtap: handleOpen, children: trigger
+                    ? _jsx(NodeRenderer, { component: trigger, surface: surface })
+                    : null }), _jsxs(DialogView, { className: 'modal-view', overlayLevel: 4, children: [_jsx(DialogBackdrop, { className: 'modal-backdrop', clickToClose: true, transition: true }), _jsx(DialogContent, { className: 'modal-content', transition: true, children: content
+                            ? _jsx(NodeRenderer, { component: content, surface: surface })
+                            : null })] })] }));
+}
+//# sourceMappingURL=index.js.map