circuit-bricks/dist/chunks/SSRSafeCircuitCanvas-Dkh-AR_k.mjs.map

A modular, Lego-style SVG circuit component system for React (ALPHA - Not for production use)

{"version":3,"file":"SSRSafeCircuitCanvas-Dkh-AR_k.mjs","names":["CircuitCanvasPlaceholder: React.FC<{\n  width?: string | number;\n  height?: string | number;\n  className?: string;\n  style?: React.CSSProperties;\n}>","props: { children: React.ReactNode; fallback?: React.ReactNode }","error: Error","errorInfo: React.ErrorInfo"],"sources":["../../src/core/SSRSafeCircuitCanvas.tsx"],"sourcesContent":["/**\n * SSR-Safe CircuitCanvas Component\n *\n * A server-side rendering safe wrapper around the main CircuitCanvas component.\n * This component handles hydration mismatches and ensures the circuit renders\n * correctly in SSR environments like Next.js, Gatsby, and Remix.\n */\n\nimport React, { useState, useEffect, forwardRef } from 'react';\nimport { CircuitCanvasProps } from './CircuitCanvas';\nimport { useIsClient } from '../utils/ssrUtils';\n\n// Extended props for SSR-safe component\ninterface SSRSafeCircuitCanvasProps extends CircuitCanvasProps {\n  className?: string;\n  style?: React.CSSProperties;\n}\n\n// Lazy import the actual CircuitCanvas to enable code splitting\nconst CircuitCanvasImpl = React.lazy(() =>\n  import('./CircuitCanvas').then(module => ({ default: module.default }))\n);\n\n/**\n * Loading placeholder component for SSR\n */\nconst CircuitCanvasPlaceholder: React.FC<{\n  width?: string | number;\n  height?: string | number;\n  className?: string;\n  style?: React.CSSProperties;\n}> = ({ width = '100%', height = '100%', className, style }) => (\n  <div\n    className={`circuit-canvas-loading ${className || ''}`}\n    style={{\n      width,\n      height,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: '#f8f9fa',\n      border: '1px solid #e9ecef',\n      borderRadius: '4px',\n      color: '#6c757d',\n      fontSize: '14px',\n      fontFamily: 'system-ui, -apple-system, sans-serif',\n      ...style\n    }}\n  >\n    <div style={{ textAlign: 'center' }}>\n      <div style={{ marginBottom: '8px' }}>\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          style={{ animation: 'spin 1s linear infinite' }}\n        >\n          <path d=\"M21 12a9 9 0 11-6.219-8.56\" />\n        </svg>\n      </div>\n      <div>Loading Circuit...</div>\n      <style dangerouslySetInnerHTML={{\n        __html: `\n          @keyframes spin {\n            from { transform: rotate(0deg); }\n            to { transform: rotate(360deg); }\n          }\n        `\n      }} />\n    </div>\n  </div>\n);\n\n/**\n * Error boundary for circuit canvas\n */\nclass CircuitCanvasErrorBoundary extends React.Component<\n  { children: React.ReactNode; fallback?: React.ReactNode },\n  { hasError: boolean; error?: Error }\n> {\n  constructor(props: { children: React.ReactNode; fallback?: React.ReactNode }) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(error: Error) {\n    return { hasError: true, error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n    console.error('CircuitCanvas Error:', error, errorInfo);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return this.props.fallback || (\n        <div\n          style={{\n            padding: '20px',\n            textAlign: 'center',\n            color: '#dc3545',\n            border: '1px solid #dc3545',\n            borderRadius: '4px',\n            backgroundColor: '#f8d7da'\n          }}\n        >\n          <h4>Circuit Canvas Error</h4>\n          <p>Failed to load the circuit canvas. Please refresh the page.</p>\n          {process.env.NODE_ENV === 'development' && this.state.error && (\n            <details style={{ marginTop: '10px', textAlign: 'left' }}>\n              <summary>Error Details</summary>\n              <pre style={{ fontSize: '12px', overflow: 'auto' }}>\n                {this.state.error.stack}\n              </pre>\n            </details>\n          )}\n        </div>\n      );\n    }\n\n    return this.props.children;\n  }\n}\n\n/**\n * SSR-Safe CircuitCanvas component\n */\nexport const SSRSafeCircuitCanvas = forwardRef<SVGSVGElement, SSRSafeCircuitCanvasProps>(\n  (props, ref) => {\n    const { className, style, ...circuitProps } = props;\n    const isClient = useIsClient();\n    const [isLoaded, setIsLoaded] = useState(false);\n\n    useEffect(() => {\n      if (isClient) {\n        // Small delay to ensure DOM is ready\n        const timer = setTimeout(() => {\n          setIsLoaded(true);\n        }, 0);\n\n        return () => clearTimeout(timer);\n      }\n    }, [isClient]);\n\n    // During SSR or before hydration, show placeholder\n    if (!isClient || !isLoaded) {\n      return (\n        <CircuitCanvasPlaceholder\n          width={props.width}\n          height={props.height}\n          className={className}\n          style={style}\n        />\n      );\n    }\n\n    // After hydration, render the actual component with error boundary\n    return (\n      <CircuitCanvasErrorBoundary>\n        <React.Suspense\n          fallback={\n            <CircuitCanvasPlaceholder\n              width={props.width}\n              height={props.height}\n              className={className}\n              style={style}\n            />\n          }\n        >\n          <CircuitCanvasImpl {...circuitProps} ref={ref} />\n        </React.Suspense>\n      </CircuitCanvasErrorBoundary>\n    );\n  }\n);\n\nSSRSafeCircuitCanvas.displayName = 'SSRSafeCircuitCanvas';\n\nexport default SSRSafeCircuitCanvas;\n"],"mappings":";;;;;AAmBA,MAAM,oBAAoB,MAAM,KAAK,MACnC,OAAO,gCAAmB,KAAK,aAAW,EAAE,SAAS,OAAO,QAAS,GAAE,CACxE;;;;AAKD,MAAMA,2BAKD,CAAC,EAAE,QAAQ,QAAQ,SAAS,QAAQ,WAAW,OAAO,qBACzD,IAAC;CACC,YAAY,yBAAyB,aAAa,GAAG;CACrD,OAAO;EACL;EACA;EACA,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,iBAAiB;EACjB,QAAQ;EACR,cAAc;EACd,OAAO;EACP,UAAU;EACV,YAAY;EACZ,GAAG;CACJ;2BAED,KAAC;EAAI,OAAO,EAAE,WAAW,SAAU;;mBACjC,IAAC;IAAI,OAAO,EAAE,cAAc,MAAO;8BACjC,IAAC;KACC,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,OAAO,EAAE,WAAW,0BAA2B;+BAE/C,IAAC,UAAK,GAAE,+BAA+B;MACnC;KACF;mBACN,IAAC,mBAAI,uBAAwB;mBAC7B,IAAC,WAAM,yBAAyB,EAC9B,SAAS;;;;;UAMV,IAAI;;GACD;EACF;;;;AAMR,IAAM,6BAAN,cAAyC,MAAM,UAG7C;CACA,YAAYC,OAAkE;AAC5E,QAAM,MAAM;AACZ,OAAK,QAAQ,EAAE,UAAU,MAAO;CACjC;CAED,OAAO,yBAAyBC,OAAc;AAC5C,SAAO;GAAE,UAAU;GAAM;EAAO;CACjC;CAED,kBAAkBA,OAAcC,WAA4B;AAC1D,UAAQ,MAAM,wBAAwB,OAAO,UAAU;CACxD;CAED,SAAS;AACP,MAAI,KAAK,MAAM,SACb,QAAO,KAAK,MAAM,4BAChB,KAAC;GACC,OAAO;IACL,SAAS;IACT,WAAW;IACX,OAAO;IACP,QAAQ;IACR,cAAc;IACd,iBAAiB;GAClB;;oBAED,IAAC,kBAAG,yBAAyB;oBAC7B,IAAC,iBAAE,gEAA+D;IACvB,KAAK,MAAM,yBACpD,KAAC;KAAQ,OAAO;MAAE,WAAW;MAAQ,WAAW;KAAQ;gCACtD,IAAC,uBAAQ,kBAAuB,kBAChC,IAAC;MAAI,OAAO;OAAE,UAAU;OAAQ,UAAU;MAAQ;gBAC/C,KAAK,MAAM,MAAM;OACd;MACE;;IAER;AAIV,SAAO,KAAK,MAAM;CACnB;AACF;;;;AAKD,MAAa,uBAAuB,WAClC,CAAC,OAAO,QAAQ;CACd,MAAM,EAAE,WAAW,MAAO,GAAG,cAAc,GAAG;CAC9C,MAAM,WAAW,aAAa;CAC9B,MAAM,CAAC,UAAU,YAAY,GAAG,SAAS,MAAM;AAE/C,WAAU,MAAM;AACd,MAAI,UAAU;GAEZ,MAAM,QAAQ,WAAW,MAAM;AAC7B,gBAAY,KAAK;GAClB,GAAE,EAAE;AAEL,UAAO,MAAM,aAAa,MAAM;EACjC;CACF,GAAE,CAAC,QAAS,EAAC;AAGd,MAAK,aAAa,SAChB,wBACE,IAAC;EACC,OAAO,MAAM;EACb,QAAQ,MAAM;EACH;EACJ;GACP;AAKN,wBACE,IAAC,wDACC,IAAC,MAAM;EACL,0BACE,IAAC;GACC,OAAO,MAAM;GACb,QAAQ,MAAM;GACH;GACJ;IACP;4BAGJ,IAAC;GAAkB,GAAI;GAAmB;IAAO;GAClC,GACU;AAEhC,EACF;AAED,qBAAqB,cAAc;AAEnC,mCAAe"}