Function ExportModal

src/tools/background-studio/Controls.jsx:360–499

({ isOpen, onClose, background, props })

const PKG_MANAGERS = ['pnpm', 'npm', 'yarn', 'bun'];

const ExportModal = ({ isOpen, onClose, background, props }) => {
  const { languagePreset, stylePreset } = useOptions() || {};
  const [copied, setCopied] = useState(null);
  const [pkg, setPkg] = useState('pnpm');
  const codeRef = useRef(null);

  const language = languagePreset || 'JS';
  const style = stylePreset === 'TW' ? 'Tailwind' : stylePreset || 'CSS';

  const { commands, jsxCode } = useMemo(
    () => generateExportCode(background, props, { language, style }),
    [background, props, language, style]
  );

  const currentCommand = useMemo(() => {
    if (!commands) return '';
    const key = pkg === 'npm' ? 'npx' : pkg;
    return commands.shadcn?.[key] || '';
  }, [commands, pkg]);

  const copyToClipboard = useCallback((text, type) => {
    navigator.clipboard.writeText(text);
    setCopied(type);
    setTimeout(() => setCopied(null), 2000);
  }, []);

  if (!isOpen) return null;

  return (
    <Box
      position="fixed"
      top={0}
      left={0}
      right={0}
      bottom={0}
      bg="rgba(0,0,0,0.8)"
      zIndex={1000}
      display="flex"
      alignItems="center"
      justifyContent="center"
      onClick={onClose}
    >
      <Box
        bg="var(--bg-card)"
        border="1px solid var(--border-primary)"
        borderRadius="40px"
        p={6}
        maxW="700px"
        w="90%"
        maxH="80vh"
        overflowY="auto"
        onClick={e => e.stopPropagation()}
        css={{
          '&::-webkit-scrollbar': { display: 'none' },
          scrollbarWidth: 'none',
          msOverflowStyle: 'none'
        }}
      >