'use strict';

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const ReactDOM = require('react-dom');
const core_esm = require('../../../../../../node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@dnd-kit/core/dist/core.esm.cjs');
const layerStore = require('../store/layer-store.cjs');

const TransformAwareDragOverlay = ({ children }) => {
  const [mountNode, setMountNode] = React.useState(null);
  const overlayStyle = React.useMemo(() => ({
    position: "fixed",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    pointerEvents: "none",
    zIndex: 9999
  }), []);
  React.useEffect(() => {
    const transformComponent = document.querySelector('[data-testid="transform-component"]');
    if (transformComponent) {
      setMountNode(transformComponent);
    } else {
      const editorContainer = document.getElementById("editor-panel-content");
      setMountNode(editorContainer);
    }
  }, []);
  if (!mountNode) {
    return /* @__PURE__ */ jsxRuntime.jsx(core_esm.DragOverlay, { dropAnimation: null, children });
  }
  return ReactDOM.createPortal(
    /* @__PURE__ */ jsxRuntime.jsx("div", { style: overlayStyle, children: /* @__PURE__ */ jsxRuntime.jsx(core_esm.DragOverlay, { dropAnimation: null, children }) }),
    mountNode
  );
};
const DragOverlayContent = ({ layerId, componentType }) => {
  const layer = layerStore.useLayerStore((state) => layerId ? state.findLayerById(layerId) : null);
  const displayName = layer?.name || layer?.type || componentType || "Component";
  if (!layer && !componentType) {
    return null;
  }
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-10 bg-white dark:bg-gray-800 shadow-lg border-2 border-primary/50 rounded-lg px-3 py-2 text-sm font-medium opacity-90 text-nowrap min-w-fit pointer-events-none", children: displayName });
};

exports.DragOverlayContent = DragOverlayContent;
exports.TransformAwareDragOverlay = TransformAwareDragOverlay;
