const require_chunk = require("./chunk-CKQMccvm.cjs");
const require_ThemeProvider = require("./ThemeProvider-0ytg6ico.cjs");
let clsx = require("clsx");
clsx = require_chunk.__toESM(clsx);
let lucide_react = require("lucide-react");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
let _openuidev_react_headless = require("@openuidev/react-headless");
let react_dom = require("react-dom");
//#region src/components/_shared/artifact/ArtifactPanel.tsx
/** @internal */
var ArtifactErrorBoundary = class extends react.Component {
	constructor(props) {
		super(props);
		this.state = { hasError: false };
	}
	static getDerivedStateFromError() {
		return { hasError: true };
	}
	render() {
		if (this.state.hasError) return this.props.fallback ?? null;
		return this.props.children;
	}
};
/** @internal */
const DefaultHeader = ({ title, onClose }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
	className: "openui-artifact-panel__header",
	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
		className: "openui-artifact-panel__title",
		children: title
	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
		className: "openui-artifact-panel__close",
		onClick: onClose,
		"aria-label": "Close artifact panel",
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { size: 16 })
	})]
});
/**
* Portals artifact content into the nearest {@link ArtifactPortalTarget}.
*
* Renders nothing when the artifact is inactive or no portal target is mounted.
* Wraps children in an error boundary and applies theme-scoped class names.
*
* Requires `<ArtifactPortalTarget />` to be mounted in the layout.
*
* @category Components
*/
const ArtifactPanel = (0, react.forwardRef)(({ artifactId, children, title, className, errorFallback, header = true }, ref) => {
	const { isActive, close } = (0, _openuidev_react_headless.useArtifact)(artifactId);
	const { node: panelNode } = (0, _openuidev_react_headless.useArtifactPortalTarget)();
	const { portalThemeClassName } = require_ThemeProvider.useTheme();
	(0, react.useEffect)(() => {
		if (!isActive || panelNode) return;
		const timer = setTimeout(() => {
			console.warn("[OpenUI] ArtifactPanel: artifact is active but no render target is mounted. Ensure <ArtifactPortalTarget /> is rendered in your layout.");
		}, 100);
		return () => clearTimeout(timer);
	}, [isActive, panelNode]);
	if (!isActive || !panelNode) return null;
	const handleClose = () => close();
	let headerContent = null;
	if (header === true) headerContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultHeader, {
		title: title ?? "Artifact",
		onClose: handleClose
	});
	else if (header !== false) headerContent = header;
	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
		ref,
		id: `openui-artifact-panel-${artifactId}`,
		className: (0, clsx.default)("openui-artifact-panel", portalThemeClassName, className),
		role: "region",
		"aria-label": title ?? "Artifact panel",
		children: [headerContent, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArtifactErrorBoundary, {
			fallback: errorFallback,
			children
		})]
	}), panelNode);
});
ArtifactPanel.displayName = "ArtifactPanel";
//#endregion
Object.defineProperty(exports, "ArtifactPanel", {
	enumerable: true,
	get: function() {
		return ArtifactPanel;
	}
});

//# sourceMappingURL=ArtifactPanel-D8DZpDgd.cjs.map