@gluwa/connect-kit 0.2.0-next.1 → 0.2.0-next.11

package/src/layout/connectDialog/index.tsx

@@ -0,0 +1,432 @@
+import { type FC, useEffect, useRef, useState } from 'react';
+import { useConfig } from 'wagmi';
+import './style.scss';
+import {
+  type ConnectBannerSiteKey,
+  type ConnectorId,
+  type ConnectKitTheme,
+  type WCWallet,
+  type ConnectResult,
+} from '../../types';
+import { type DetailContent } from '../detailPanel';
+import { SelectorPanel } from '../selectorPanel';
+import { DetailPanel } from '../detailPanel';
+import { Toast } from '../../components/toast';
+import { resolveConnectorId } from '../../connector-meta';
+import { useMetaMaskExtension } from '../../hooks/useMetaMaskExtension';
+import { useWagmiConnect } from '../../hooks/useWagmiConnect';
+import { useConnectTimeout } from '../../hooks/useConnectTimeout';
+import { useConnectBanner } from '../../hooks/useConnectBanner';
+import { useWCState } from '../../hooks/useWCState';
+import { isMobileDevice, tryOpenDeepLink, tryOpenCreditWalletDeeplink } from '../../utils/platform';
+
+export type DialogStep = 'selector' | 'detail';
+
+export interface ConnectDialogProps {
+  open: boolean;
+  siteKey: ConnectBannerSiteKey;
+  connectBannerUrl: string;
+  theme?: ConnectKitTheme;
+  connectors?: ConnectorId[];
+  selectedConnector?: ConnectorId | null;
+  step?: DialogStep;
+  /** DEV: force initial content state for UI preview */
+  initialContent?: DetailContent;
+  /** WalletConnect Cloud projectId — useWCState.loadWalletList 호출 시 필요. */
+  wcProjectId?: string;
+  onSelectConnector?: (id: ConnectorId) => void;
+  onBack?: () => void;
+  onClose?: () => void;
+  onConnect?: (result: ConnectResult) => void;
+  onError?: (error: Error, connectorId: ConnectorId) => void;
+}
+
+const getContentForConnector = (id: ConnectorId): DetailContent => {
+  if (id === 'CREDIT_CONNECT') return 'qr';
+  if (id === 'METAMASK') return 'metamask-ext';
+  if (id === 'WALLET_CONNECT') return 'walletconnect';
+  return 'idle';
+};
+
+// MM 은 확장 감지 시 즉시 extension 연결, 아니면 QR. (select / retry 공통)
+const getInitialContentForConnector = (
+  id: ConnectorId,
+  isMetaMaskExtensionInstalled: boolean,
+): DetailContent =>
+  id === 'METAMASK' && !isMetaMaskExtensionInstalled ? 'metamask-qr' : getContentForConnector(id);
+
+const getErrorCode = (error: unknown, depth = 0): number | undefined => {
+  if (depth > 4 || !error || typeof error !== 'object') return undefined;
+
+  const candidate = error as { code?: unknown; cause?: unknown; error?: unknown };
+  const code = Number(candidate.code);
+  if (Number.isFinite(code)) return code;
+
+  return getErrorCode(candidate.cause, depth + 1) ?? getErrorCode(candidate.error, depth + 1);
+};
+
+const isMetaMaskPendingRequestError = (error: unknown): boolean => getErrorCode(error) === -32002;
+
+export const ConnectDialog: FC<ConnectDialogProps> = ({
+  open,
+  siteKey,
+  connectBannerUrl,
+  theme = 'dark',
+  connectors = ['CREDIT_CONNECT', 'METAMASK', 'WALLET_CONNECT'],
+  selectedConnector: selectedConnectorProp = null,
+  // NOTE: default values below are for dev/markup preview only
+  step: stepProp = 'detail',
+  wcProjectId,
+  onSelectConnector,
+  onBack,
+  onClose = () => undefined,
+  onConnect,
+  onError,
+}) => {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const [selectedConnector, setSelectedConnector] = useState<ConnectorId | null>(
+    selectedConnectorProp,
+  );
+  const [recentConnector, setRecentConnector] = useState<ConnectorId | null>(null);
+  const [selectedWallet, setSelectedWallet] = useState<WCWallet | null>(null);
+  const [step, setStep] = useState<DialogStep>(stepProp);
+  /**
+   * change this initial value to preview a specific content state.
+   * - 'idle'          selector만 표시 (detail 없음)
+   * - 'loading'       스피너
+   * - 'qr'            Credit Wallet QR
+   * - 'timeout'       연결 실패 화면
+   * - 'metamask-ext'  MetaMask 익스텐션 연결 요청
+   * - 'metamask-qr'   MetaMask QR
+   * - 'walletconnect' WalletConnect QR + All Wallets 버튼
+   * - 'all-wallets'   지갑 목록 그리드
+   * - 'wallet-qr'     개별 지갑 QR
+   */
+  const [content, setContent] = useState<DetailContent>('idle');
+  const [showCopyToast, setShowCopyToast] = useState(false);
+  const [showMetaMaskPendingRequestToast, setShowMetaMaskPendingRequestToast] = useState(false);
+  const [qrUri, setQrUri] = useState<string | null>(null);
+  // 외부 만료 신호 카운터 — CC(서버 push session_expired) / WC(connect reject) 수신 시 증가.
+  const [expiredSignal, setExpiredSignal] = useState(0);
+  // EIP-6963 기반 MetaMask 확장 설치 상태.
+  const isMetaMaskExtensionInstalled = useMetaMaskExtension();
+
+  // 현재 content 를 ref 로 추적 (effect deps 없이 최신값 참조용).
+  const contentRef = useRef<DetailContent>(content);
+  contentRef.current = content;
+  // 타임아웃 직전 화면 — retry 시 이 화면으로 복원 (예: WC 의 wallet-qr).
+  const preTimeoutContentRef = useRef<DetailContent>('idle');
+
+  const config = useConfig();
+  const { banner: connectBanner, loading: connectBannerLoading } = useConnectBanner({
+    open,
+    siteKey,
+    url: connectBannerUrl,
+  });
+
+  // wagmi connect + display_uri 이벤트 → qrUri state.
+  // 모든 wagmi connector 의 message 이벤트를 구독하므로 CC connector 의 display_uri emit 도 자동 포착.
+  const { triggerConnect, cancelConnect, restartConnect, isConnecting } = useWagmiConnect({
+    onConnect: (result) => {
+      // recent = 연결 성공 기준. wagmi 가 recentConnectorId 를 localStorage 에 저장하므로
+      // UI state 만 동기화. 다음 마운트 시 아래 effect 가 storage 에서 복원.
+      setRecentConnector(result.connectorId);
+      onConnect?.(result);
+    },
+    onError: (err, connectorId) => {
+      // MetaMask는 pending 요청을 사전에 조회할 수 없어 새 요청의 -32002 응답으로만 판별한다.
+      if (
+        connectorId === 'METAMASK' &&
+        isMetaMaskExtensionInstalled &&
+        isMetaMaskPendingRequestError(err)
+      ) {
+        setShowMetaMaskPendingRequestToast(true);
+      }
+
+      // MM/WC connect reject는 타이머를 기다리지 않고 즉시 실패 화면으로 전환.
+      if (connectorId === 'METAMASK' || connectorId === 'WALLET_CONNECT') {
+        setExpiredSignal((n) => n + 1);
+      }
+      onError?.(err, connectorId);
+    },
+    onQrUri: (uri) => setQrUri(uri),
+    // CC connector 가 서버 OnSessionExpired 를 릴레이 → 만료 신호 증가.
+    onSessionExpired: () => setExpiredSignal((n) => n + 1),
+  });
+
+  // 연결 타임아웃 (CC=서버 push / MM=client 타이머 / WC=connect reject) → timedOut.
+  const timeoutActive = step === 'detail' && !!selectedConnector && content !== 'timeout';
+  const {
+    timedOut,
+    reset: resetTimeout,
+    retry,
+  } = useConnectTimeout({
+    connectorId: selectedConnector,
+    active: timeoutActive,
+    isConnecting,
+    expiredSignal,
+    onRetry: () => {
+      if (!selectedConnector) return;
+      // 타임아웃 직전 화면으로 복원 (예: WC 의 wallet-qr → 선택 지갑 QR 유지).
+      // idle/timeout 처럼 복원 불가한 값이면 커넥터 초기 화면으로.
+      const restore = preTimeoutContentRef.current;
+      const nextContent: DetailContent =
+        restore !== 'idle' && restore !== 'timeout'
+          ? restore
+          : getInitialContentForConnector(selectedConnector, isMetaMaskExtensionInstalled);
+
+      // MetaMask 확장 pending 요청은 dApp에서 종료하거나 다시 요청할 수 없다.
+      // 실패 화면을 유지하고 기존 요청을 먼저 처리하도록 안내한다.
+      if (selectedConnector === 'METAMASK' && restore === 'metamask-ext' && isConnecting) {
+        setContent('timeout');
+        setShowMetaMaskPendingRequestToast(true);
+        return;
+      }
+
+      setContent(nextContent);
+      setQrUri(null);
+
+      // MetaMask QR/Deeplink는 SDK 채널을 종료한 뒤 새 요청을 생성한다.
+      if (selectedConnector === 'METAMASK' && restore === 'metamask-qr') {
+        restartConnect(selectedConnector).catch(() => undefined);
+        return;
+      }
+
+      cancelConnect();
+      triggerConnect(selectedConnector);
+    },
+  });
+
+  // 타임아웃 발생 → 진행 중 연결 취소 + timeout 화면 표시.
+  // 전환 전 화면을 저장해 retry 시 복원 (WC wallet-qr 등).
+  useEffect(() => {
+    // selector로 돌아간 렌더에 이전 timedOut이 잠시 남아도 실패 화면을 다시 덮지 않는다.
+    if (!timedOut || !selectedConnector || step !== 'detail') return;
+    // cancelConnect로 isConnecting이 바뀌어 effect가 다시 실행되어도
+    // 기록한 이전 화면을 timeout으로 덮어쓰지 않는다.
+    if (contentRef.current === 'timeout') return;
+    preTimeoutContentRef.current = contentRef.current;
+
+    // MetaMask 확장 pending 요청만 보존한다. QR/Deeplink는 Retry에서 SDK를 재시작한다.
+    const shouldPreserveMetaMaskRequest =
+      selectedConnector === 'METAMASK' && contentRef.current === 'metamask-ext' && isConnecting;
+    // 확장 승인 요청은 dApp에서 종료할 수 없으므로 원래 요청을 유지한다.
+    if (!shouldPreserveMetaMaskRequest) cancelConnect();
+    setContent('timeout');
+  }, [timedOut, selectedConnector, step, isConnecting, cancelConnect]);
+
+  // provider 응답이 늦게 도착하면 QR에서 확장 연결 화면으로 전환.
+  useEffect(() => {
+    if (
+      isMetaMaskExtensionInstalled &&
+      selectedConnector === 'METAMASK' &&
+      content === 'metamask-qr'
+    ) {
+      setContent('metamask-ext');
+    }
+  }, [isMetaMaskExtensionInstalled, selectedConnector, content]);
+
+  // 마운트 시 wagmi storage 의 recentConnectorId(연결 성공 시 wagmi 가 저장) 복원.
+  useEffect(() => {
+    const restoreRecent = async (): Promise<void> => {
+      const wagmiId = await config.storage?.getItem('recentConnectorId');
+      const resolved = resolveConnectorId(wagmiId ?? undefined);
+      if (resolved) setRecentConnector(resolved);
+    };
+    restoreRecent().catch(() => undefined);
+  }, [config]);
+
+  // WalletConnect Explorer API (walletList + loading + 등)
+  const wc = useWCState();
+
+  const handleSelect = (id: ConnectorId) => {
+    // 다른 지갑 선택은 이전 시도와 실패 상태를 이어받지 않고 항상 새 연결로 시작한다.
+    cancelConnect();
+    resetTimeout();
+    setQrUri(null);
+    setSelectedWallet(null);
+    setShowCopyToast(false);
+    setShowMetaMaskPendingRequestToast(false);
+    setSelectedConnector(id);
+    // recent 는 클릭이 아니라 연결 성공(onConnect) 시점에 기록 — 위 useWagmiConnect onConnect 참조.
+    setContent(getInitialContentForConnector(id, isMetaMaskExtensionInstalled));
+    setStep('detail');
+    // wagmi connect 시작 (display_uri 도착 시 setQrUri 자동 호출)
+    triggerConnect(id);
+    onSelectConnector?.(id);
+  };
+
+  const handleSelectWallet = (wallet: WCWallet) => {
+    setSelectedWallet(wallet);
+    setContent('wallet-qr');
+    // 자동 deeplink 는 아래 useEffect (selectedWallet + qrUri + content === 'wallet-qr') 에서.
+    // 모바일 + display_uri 도착 시 native/universal scheme 으로 redirect, 아니면 WalletQR fallback.
+  };
+
+  const handleBack = () => {
+    if (content === 'wallet-qr') {
+      setSelectedWallet(null);
+      setContent('all-wallets');
+      return;
+    }
+    if (content === 'all-wallets') {
+      setContent('walletconnect');
+      return;
+    }
+    // selector 로 복귀 → wagmi connect attempt 취소 + qrUri 초기화
+    cancelConnect();
+    setQrUri(null);
+    setSelectedConnector(null);
+    setContent('idle');
+    setStep('selector');
+    onBack?.();
+  };
+
+  const handleShowAllWallets = () => {
+    setContent('all-wallets');
+    // 처음 진입 시 WC Explorer API fetch (loadedRef guard 로 중복 호출 없음)
+    if (wcProjectId) {
+      wc.loadWalletList(wcProjectId).catch(() => undefined);
+    }
+  };
+
+  // showModal / close driven by open prop
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();
+    if (!open && dialog.open) dialog.close();
+  }, [open]);
+
+  // selectedWallet 가 먼저 set 됐고 qrUri 가 뒤늦게 도착한 경우 자동 deeplink.
+  // 같은 지갑·URI 조합만 중복 방지하고, Retry로 새 URI가 오면 다시 실행한다.
+  const lastWalletDeeplinkKeyRef = useRef<string | null>(null);
+  useEffect(() => {
+    lastWalletDeeplinkKeyRef.current = null;
+  }, [selectedWallet]);
+  useEffect(() => {
+    if (!selectedWallet || !qrUri || content !== 'wallet-qr') return;
+    if (!isMobileDevice()) return;
+    const base = selectedWallet.mobileNative || selectedWallet.mobileUniversal;
+    if (!base) return;
+    const deeplinkKey = `${selectedWallet.id}:${qrUri}`;
+    if (lastWalletDeeplinkKeyRef.current === deeplinkKey) return;
+    lastWalletDeeplinkKeyRef.current = deeplinkKey;
+    tryOpenDeepLink(qrUri, base);
+  }, [selectedWallet, qrUri, content]);
+
+  // CC connector direct path: selector 의 'Continue with Credit Wallet' → content='qr'.
+  // wagmi MM connector 는 SDK 가 자체 deeplink 하지만 CC connector 는 emit display_uri 만 함 —
+  // kit 가 mobile redirect 책임. payload 는 full URL (`https://app.creditcoin.org/?creditconnect=...`).
+  const lastCreditConnectDeeplinkUriRef = useRef<string | null>(null);
+  useEffect(() => {
+    lastCreditConnectDeeplinkUriRef.current = null;
+  }, [selectedConnector]);
+  useEffect(() => {
+    if (content !== 'qr' || !qrUri) return;
+    if (selectedConnector !== 'CREDIT_CONNECT') return;
+    if (!isMobileDevice()) return;
+    if (lastCreditConnectDeeplinkUriRef.current === qrUri) return;
+    lastCreditConnectDeeplinkUriRef.current = qrUri;
+    tryOpenCreditWalletDeeplink(qrUri);
+  }, [content, qrUri, selectedConnector]);
+
+  // Prevent background scroll while dialog is open
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    if (open) document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  // Reset on close
+  useEffect(() => {
+    if (!open) {
+      cancelConnect();
+      setQrUri(null);
+      setSelectedConnector(null);
+      setContent('idle');
+      setStep('selector');
+      setShowCopyToast(false);
+      setShowMetaMaskPendingRequestToast(false);
+    }
+  }, [open, cancelConnect]);
+
+  // Intercept native Escape (cancel event) and delegate to onClose
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return undefined;
+    const handleCancel = (e: Event) => {
+      e.preventDefault();
+      setShowCopyToast(false);
+      setShowMetaMaskPendingRequestToast(false);
+      onClose();
+    };
+    dialog.addEventListener('cancel', handleCancel);
+    return () => dialog.removeEventListener('cancel', handleCancel);
+  }, [onClose]);
+
+  return (
+    <div className="ck-root" data-theme={theme} data-open={open}>
+      <dialog
+        ref={dialogRef}
+        className="ck-dialog"
+        data-step={step}
+        aria-label="Connect Wallet"
+        onClick={(e) => {
+          if (e.target === dialogRef.current) onClose();
+        }}
+      >
+        <SelectorPanel
+          connectors={connectors}
+          selectedConnector={selectedConnector}
+          recentConnector={recentConnector}
+          onSelect={handleSelect}
+          onClose={onClose}
+        />
+        <DetailPanel
+          connectBanner={connectBanner}
+          connectBannerLoading={connectBannerLoading}
+          selectedConnector={selectedConnector}
+          selectedWallet={selectedWallet}
+          content={content}
+          qrUri={qrUri}
+          wallets={wc.walletList}
+          walletListLoading={wc.walletListLoading}
+          walletCount={wc.walletList.length}
+          onBack={handleBack}
+          onClose={onClose}
+          onRetry={retry}
+          onShowAllWallets={handleShowAllWallets}
+          onSelectWallet={handleSelectWallet}
+          onCopyLink={() => {
+            // qrUri 미도착 시 silent no-op (사용자가 잘못 누른 게 아니라 wagmi 가 아직 안 emit).
+            if (!qrUri) return;
+            navigator.clipboard
+              .writeText(qrUri)
+              .then(() => setShowCopyToast(true))
+              .catch((err) => {
+                // eslint-disable-next-line no-console
+                console.warn('[copyLink] clipboard write failed', err);
+              });
+          }}
+        />
+        {(showCopyToast || showMetaMaskPendingRequestToast) && (
+          <div className="ck-toast-stack">
+            {showCopyToast && (
+              <Toast message="Link copied" onClose={() => setShowCopyToast(false)} />
+            )}
+            {showMetaMaskPendingRequestToast && (
+              <Toast
+                variant="warning"
+                message="Clear the pending request in your wallet first."
+                onClose={() => setShowMetaMaskPendingRequestToast(false)}
+              />
+            )}
+          </div>
+        )}
+      </dialog>
+    </div>
+  );
+};

package/src/layout/connectDialog/loading/index.tsx

@@ -0,0 +1,13 @@
+import { type FC } from 'react';
+import './style.scss';
+import { Spinner } from '../asset/spinner';
+
+export const Loading: FC = () => {
+  return (
+    <div className="ck-loading">
+      <span className="ck-loading-spinner" role="status" aria-label="Connecting...">
+        <Spinner />
+      </span>
+    </div>
+  );
+};

package/src/layout/connectDialog/loading/style.scss

@@ -0,0 +1,19 @@
+@use '../../../style/mixin.scss' as *;
+
+.ck-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-height: 200px;
+}
+
+.ck-loading-spinner {
+  display: flex;
+  color: var(--scale-gray-400);
+  animation: ck-spin 2.5s linear infinite;
+}
+
+@keyframes ck-spin {
+  to { transform: rotate(360deg); }
+}

package/src/layout/connectDialog/metaMask/index.tsx

@@ -0,0 +1,61 @@
+import { type FC } from 'react';
+import './style.scss';
+import { QrArea } from '../../../components/qrArea';
+import { ActionItem } from '../../../components/actionItem';
+import { Spinner } from '../asset/spinner';
+
+type MetaMaskVariant = 'extension' | 'qr';
+
+interface MetaMaskProps {
+  variant: MetaMaskVariant;
+  uri?: string | null;
+  logoUrl?: string;
+  downloadUrl?: string;
+  onCopy?: () => void;
+}
+
+export const MetaMask: FC<MetaMaskProps> = ({
+  variant,
+  uri,
+  logoUrl,
+  downloadUrl = '',
+  onCopy,
+}) => {
+  if (variant === 'extension') {
+    return (
+      <div className="ck-metamask ck-metamask-extension">
+        {logoUrl && (
+          <img className="ck-metamask-logo" src={logoUrl} alt="MetaMask" width={48} height={48} />
+        )}
+        <div className="ck-metamask-text">
+          <h3 className="ck-metamask-title">Open MetaMask</h3>
+          <p className="ck-metamask-desc">Check the connection in your extension</p>
+        </div>
+        <span className="ck-metamask-spinner" aria-label="Connecting...">
+          <Spinner />
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <QrArea
+        uri={uri}
+        status={!uri ? 'loading' : 'ready'}
+        logoUrl={logoUrl}
+        hasBg
+        label="Scan this QR Code with your phone"
+        onCopy={onCopy}
+      />
+      <ActionItem
+        as="a"
+        href={downloadUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        label="Don't have MetaMask Wallet?"
+        action="Download"
+      />
+    </>
+  );
+};

package/src/layout/connectDialog/metaMask/style.scss

@@ -0,0 +1,65 @@
+@use '../../../style/mixin.scss' as *;
+
+// ── Extension ─────────────────────────────────────────────────────────────────
+.ck-metamask-extension {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  flex: 1;
+}
+
+.ck-metamask-logo {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.ck-metamask-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  text-align: center;
+}
+
+.ck-metamask-title {
+  @include textToken('subtitle2-bold');
+  color: var(--scale-gray-900);
+}
+
+.ck-metamask-desc {
+  @include textToken('body3-l1-regular'); 
+  color: var(--scale-gray-600);
+}
+
+.ck-metamask-spinner {
+  display: flex;
+  color: var(--scale-gray-400);
+  animation: ck-spin 2.5s linear infinite;
+}
+
+@keyframes ck-spin {
+  to { transform: rotate(360deg); }
+}
+
+
+
+.ck-root .ck-metamask-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  @include textToken('body3-l1-regular');
+  color: var(--scale-gray-500);
+  cursor: pointer;
+}
+
+.ck-metamask-copy-icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+  // Icon SVG will be added later
+}

package/src/layout/connectDialog/qr/index.tsx

@@ -0,0 +1,33 @@
+import { type FC } from 'react';
+import { QrArea } from '../../../components/qrArea';
+import { ActionItem } from '../../../components/actionItem';
+
+interface QRProps {
+  uri?: string | null;
+  logoUrl?: string;
+  downloadUrl?: string;
+}
+
+export const QR: FC<QRProps> = ({ uri, logoUrl, downloadUrl }) => {
+  const status = !uri ? 'loading' : 'ready';
+
+  return (
+    <>
+      <QrArea
+        uri={uri}
+        status={status}
+        logoUrl={logoUrl}
+        label="Open the PenguinWallet app and scan the QR"
+      />
+      <ActionItem
+        as="a"
+        href={downloadUrl ?? '#'}
+        target="_blank"
+        rel="noopener noreferrer"
+        label="Get PenguinWallet app"
+        description="Once connected, you can log in with it next time"
+        action="Download"
+      />
+    </>
+  );
+};

package/src/layout/connectDialog/style.scss

@@ -0,0 +1,48 @@
+@use '../../style/index.scss';
+@use '../../style/mixin.scss' as *;
+
+.ck-root {
+  display: contents;
+}
+
+.ck-dialog::backdrop {
+  background: var(--dialog-backdrop-color);
+}
+
+.ck-root .ck-dialog:not([open]) {
+  display: none;
+}
+
+.ck-root .ck-dialog {
+  --dialog-backdrop-color: var(--semantic-overlay-overlay-dim);
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: calc(100% - 40px);
+  max-width: 1120px;
+  height: min(620px, calc(100dvh - 40px));
+
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--semantic-paper-dialog);
+  border: none;
+  padding: 0;
+
+  @include tablet {
+    position: fixed;
+    inset: auto 0 0 0;
+    margin: 0;
+    width: 100%;
+    max-width: none;
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 1fr);
+    max-height: 82dvh;
+    height: auto;
+    border-radius: 12px 12px 0 0;
+
+    &[data-step='selector'] .ck-detail { display: none !important; }
+    &[data-step='detail'] .ck-selector { display: none !important; }
+  }
+}