"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useState, useCallback } from "react";
/**
 * Data tab — manages export expressions and data mapping for a task.
 *
 * Shows the `export.as` expression field, which determines how task
 * output is saved to the workflow context for downstream consumption.
 *
 * @since T10 (Inspector Panel Refactor)
 */
export const DataTab = memo(function DataTab({ node, onUpdateExport, }) {
    const [value, setValue] = useState(node.export?.as ?? "");
    const handleChange = useCallback((e) => {
        setValue(e.target.value);
    }, []);
    const handleBlur = useCallback(() => {
        const trimmed = value.trim();
        onUpdateExport(node.id, trimmed || undefined);
    }, [value, node.id, onUpdateExport]);
    return (_jsx("div", { className: "flex flex-col gap-4 px-3 py-3", children: _jsxs("section", { className: "flex flex-col gap-1.5", children: [_jsx("h4", { className: "text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]", children: "Export" }), _jsxs("p", { className: "text-[10px] leading-tight text-[var(--stgm-muted-foreground,#737373)]", children: ["Save task output to the workflow context for downstream tasks. Use ", _jsx("code", { className: "rounded bg-[var(--stgm-muted,#f5f5f5)] px-1 text-[10px]", children: "${ . }" }), " to export the entire output."] }), _jsx("input", { type: "text", value: value, onChange: handleChange, onBlur: handleBlur, placeholder: 'e.g., ${ . } or ${ .fieldName }', className: "w-full rounded-md border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#a3a3a3)] focus:outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]" })] }) }));
});
//# sourceMappingURL=DataTab.js.map