From 0ff4b674ac601eb51ec089f818f692044baeede6 Mon Sep 17 00:00:00 2001 From: HeuJung Date: Fri, 10 Jul 2026 10:18:49 +0900 Subject: [PATCH] =?UTF-8?q?fix(sirsoft-basic,=20sirsoft-admin=5Fbasic):=20?= =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=93=9C=EB=A1=9C=EC=96=B4=20?= =?UTF-8?q?=EC=84=A0=ED=98=B8=EC=84=A4=EC=A0=95=20=EC=95=84=EC=BD=94?= =?UTF-8?q?=EB=94=94=EC=96=B8=ED=99=94=20=EB=B0=8F=20=EB=B7=B0=ED=8F=AC?= =?UTF-8?q?=ED=8A=B8=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 모바일 헤더 우측 그룹이 420px 를 요구해 폰 뷰포트에서 통화 선택기가 잘렸다. 언어·통화·배송국가를 드로어로 옮겨 가로 칩으로 통일했으나, 이번엔 드로어가 세로로 길어져 정작 메뉴가 스크롤 밖으로 밀렸다. 언어와 통화·배송국가를 각각 독립 아코디언(기본 접힘)으로 바꾸고, 접힘 상태에서도 트리거에 현재 선택값을 요약 표기해 펼치지 않고 확인할 수 있게 했다. 언어는 템플릿이, 통화·배송국가는 이커머스 주입 조각이 각자 상태를 소유해 서로 간섭하지 않는다. 통화 패널은 새 플래그를 만들지 않고 데스크톱 드롭다운의 기존 토글을 재사용한다 — portable 오버라이드에서 if 를 생략하면 엔진이 base if 를 상속하므로 자동으로 기본 접힘이 된다. 이 과정에서 모바일로 펼칠 때 전체 화면 배경 오버레이가 드로어 클릭을 가로채는 결함을 함께 차단했다. 그 밖에 모달 좌우 여백, 주문 취소·일괄변경 팝업의 세로 스택 전환, 은행 관리 입력칸 축소, 쇼핑몰 환경설정·쿠폰·엑셀 다운로드 화면의 가로 넘침을 함께 해소했다. --- .../CHANGELOG.md | 6 + .../frontend/partial/editor.json | 4 +- .../language-pack.json | 2 +- .../_bundled/sirsoft-ecommerce/CHANGELOG.md | 11 +- .../header-currency-selector-admin.json | 128 ++++++- .../header-currency-selector-user.json | 57 +++- ...minHeaderCurrencySelectorPortable.test.tsx | 134 ++++++++ .../adminMobileViewportOverflow.test.tsx | 247 ++++++++++++++ .../layouts/shippingCountryLayouts.test.tsx | 41 ++- .../admin_ecommerce_excel_download_index.json | 45 +-- .../admin/admin_ecommerce_settings.json | 5 +- .../_modal_batch_change_confirm.json | 98 +++++- .../_modal_cancel_order.json | 104 +++++- .../_partial_issue_settings.json | 27 +- .../_bank_management_modal.json | 7 +- .../_tab_basic_info.json | 24 ++ .../_modal_extra_fee_template.json | 3 +- .../_bundled/sirsoft-admin_basic/CHANGELOG.md | 19 ++ .../admin-auth-setlocale-target.test.tsx | 77 +++++ .../admin-base-header-lang-currency.test.tsx | 158 +++++++-- .../admin-mobile-viewport-css.test.tsx | 59 ++++ .../editor-spec-sidebar-open-state.test.tsx | 67 ++++ .../dist/css/components.css | 2 +- .../dist/js/components.iife.js | 116 +++---- .../dist/js/components.iife.js.map | 2 +- .../dist/src/handlers/index.d.ts | 2 - .../dist/src/handlers/setLocaleHandler.d.ts | 16 - .../editor-spec/states.json | 23 ++ .../lang/partial/en/editor.json | 2 + .../lang/partial/ko/editor.json | 2 + .../layouts/_admin_base.json | 150 ++++++-- .../layouts/admin_forgot_password.json | 4 +- .../layouts/admin_login.json | 4 +- .../layouts/admin_reset_password.json | 4 +- .../sirsoft-admin_basic/package-lock.json | 4 +- .../_bundled/sirsoft-admin_basic/package.json | 2 +- .../src/components/composite/HtmlEditor.tsx | 3 +- .../composite/MultilingualInput.tsx | 3 +- .../__tests__/setLocaleHandler.test.ts | 286 ---------------- .../sirsoft-admin_basic/src/handlers/index.ts | 5 +- .../src/handlers/setLocaleHandler.ts | 70 ---- .../sirsoft-admin_basic/src/styles/main.css | 21 +- .../sirsoft-admin_basic/template.json | 2 +- .../fixtures/admin-template-auth.ts | 5 + .../admin/mobile-viewport-overflow.spec.ts | 323 ++++++++++++++++++ templates/_bundled/sirsoft-basic/CHANGELOG.md | 1 + .../layouts/currencySelector.test.tsx | 124 ++++++- .../sirsoft-basic/layouts/_user_base.json | 66 +++- .../specs/mobile-viewport-overflow.spec.ts | 92 ++++- 49 files changed, 2048 insertions(+), 609 deletions(-) create mode 100644 modules/_bundled/sirsoft-ecommerce/resources/js/__tests__/layouts/adminHeaderCurrencySelectorPortable.test.tsx create mode 100644 modules/_bundled/sirsoft-ecommerce/resources/js/__tests__/layouts/adminMobileViewportOverflow.test.tsx create mode 100644 templates/_bundled/sirsoft-admin_basic/__tests__/layouts/admin-auth-setlocale-target.test.tsx create mode 100644 templates/_bundled/sirsoft-admin_basic/__tests__/layouts/admin-mobile-viewport-css.test.tsx create mode 100644 templates/_bundled/sirsoft-admin_basic/__tests__/layouts/editor-spec-sidebar-open-state.test.tsx delete mode 100644 templates/_bundled/sirsoft-admin_basic/dist/src/handlers/setLocaleHandler.d.ts delete mode 100644 templates/_bundled/sirsoft-admin_basic/src/handlers/__tests__/setLocaleHandler.test.ts delete mode 100644 templates/_bundled/sirsoft-admin_basic/src/handlers/setLocaleHandler.ts create mode 100644 templates/_bundled/sirsoft-admin_basic/tests/Playwright/specs/admin/mobile-viewport-overflow.spec.ts diff --git a/lang-packs/_bundled/g7-template-sirsoft-admin_basic-ja/CHANGELOG.md b/lang-packs/_bundled/g7-template-sirsoft-admin_basic-ja/CHANGELOG.md index 32eb5df4..36adde52 100644 --- a/lang-packs/_bundled/g7-template-sirsoft-admin_basic-ja/CHANGELOG.md +++ b/lang-packs/_bundled/g7-template-sirsoft-admin_basic-ja/CHANGELOG.md @@ -4,6 +4,12 @@ 형식은 [Keep a Changelog](https://keepachangelog.com/ko/1.1.0/)를 따르며, [Semantic Versioning](https://semver.org/lang/ko/)을 준수합니다. +## [1.0.2] - 2026-07-10 + +### Added + +- 레이아웃 편집기의 페이지 상태 선택 항목(기본 / 모바일 메뉴 펼침) 일본어 번역 추가 — 관리자 베이스 레이아웃을 편집할 때 모바일 메뉴가 펼쳐진 상태를 미리 보며 편집할 수 있고, 그 선택지가 일본어 로케일에서도 올바르게 표시됩니다. + ## [1.0.1] - 2026-07-08 ### Added diff --git a/lang-packs/_bundled/g7-template-sirsoft-admin_basic-ja/frontend/partial/editor.json b/lang-packs/_bundled/g7-template-sirsoft-admin_basic-ja/frontend/partial/editor.json index 968f8074..68e0fe21 100644 --- a/lang-packs/_bundled/g7-template-sirsoft-admin_basic-ja/frontend/partial/editor.json +++ b/lang-packs/_bundled/g7-template-sirsoft-admin_basic-ja/frontend/partial/editor.json @@ -1393,7 +1393,9 @@ "page_detail_default": "基本", "page_detail_attachments_open": "添付を展開", "order_detail_default": "通常注文", - "order_detail_partially_cancelled": "部分キャンセル" + "order_detail_partially_cancelled": "部分キャンセル", + "admin_base_default": "基本", + "sidebar_open": "モバイルメニュー展開" }, "cell_border": { "side_all": "すべて", diff --git a/lang-packs/_bundled/g7-template-sirsoft-admin_basic-ja/language-pack.json b/lang-packs/_bundled/g7-template-sirsoft-admin_basic-ja/language-pack.json index fd8cc968..20e88edb 100644 --- a/lang-packs/_bundled/g7-template-sirsoft-admin_basic-ja/language-pack.json +++ b/lang-packs/_bundled/g7-template-sirsoft-admin_basic-ja/language-pack.json @@ -12,7 +12,7 @@ "en": "G7 template (sirsoft-admin_basic) Japanese language pack (bundled)", "ja": "G7 テンプレート (sirsoft-admin_basic) 日本語 言語パック(バンドル)" }, - "version": "1.0.1", + "version": "1.0.2", "license": "MIT", "scope": "template", "target_identifier": "sirsoft-admin_basic", diff --git a/modules/_bundled/sirsoft-ecommerce/CHANGELOG.md b/modules/_bundled/sirsoft-ecommerce/CHANGELOG.md index 080efa7d..57f3eb09 100644 --- a/modules/_bundled/sirsoft-ecommerce/CHANGELOG.md +++ b/modules/_bundled/sirsoft-ecommerce/CHANGELOG.md @@ -8,7 +8,16 @@ ### Changed -- 휴대폰·태블릿 화면에서 통화·배송국가 선택이 드롭다운 대신 항상 펼쳐진 가로 버튼으로 표시됩니다. 좁은 화면의 메뉴 안에서 드롭다운이 잘려 보이던 문제가 함께 해소됩니다. 데스크톱 화면의 드롭다운은 그대로입니다. +- 휴대폰·태블릿 화면에서 통화·배송국가 선택이 메뉴 안의 접었다 펼치는 항목으로 바뀌었습니다. 접혀 있을 때도 현재 선택된 통화와 배송국가가 함께 표시되어 펼치지 않아도 확인할 수 있고, 펼치면 가로 버튼으로 나열됩니다. 좁은 화면의 메뉴 안에서 드롭다운이 잘려 보이던 문제가 함께 해소됩니다. 데스크톱 화면의 드롭다운은 그대로입니다. 관리자 화면도 동일하게 적용됩니다. +- 휴대폰 화면에서 주문 취소·주문상태 일괄변경 팝업의 상품 목록이 표 대신 상품별 카드 형태로 표시됩니다. + +### Fixed + +- 쇼핑몰 환경설정의 은행 관리에서 은행코드를 입력해도 입력한 값이 보이지 않던 문제를 수정했습니다 — 좁은 화면에서 입력칸이 글자가 들어갈 수 없을 만큼 줄어들고 있었습니다. +- 휴대폰 화면에서 주문 취소·주문상태 일괄변경 팝업의 금액이 "249,000원" 대신 "249,000" / "원" 처럼 숫자 중간에서 잘려 보이던 문제를 수정했습니다. 금액은 앞으로도 숫자 중간에서 줄바꿈되지 않으며, "결제완료" 같은 상태 이름도 "결제완" / "료" 로 쪼개지지 않습니다. +- 휴대폰 화면에서 쇼핑몰 환경설정 화면이 좌우로 넘쳐 가로 스크롤이 생기던 문제를 수정했습니다 (이메일 입력 줄, 쇼핑몰 이름·종목 입력칸, 탭 영역). +- 휴대폰 화면에서 쿠폰 발급기간 입력칸과 엑셀 다운로드 기간 검색 입력칸이 화면 밖으로 넘치던 문제를 수정했습니다. +- 은행 관리·도서산간 배송비 팝업의 표가 좁은 화면에서 가로로 스크롤되도록 명시해, 앞으로 표가 잘려 보이지 않도록 했습니다. ## [1.0.1] - 2026-07-08 diff --git a/modules/_bundled/sirsoft-ecommerce/resources/extensions/header-currency-selector-admin.json b/modules/_bundled/sirsoft-ecommerce/resources/extensions/header-currency-selector-admin.json index 69277391..d258f85d 100644 --- a/modules/_bundled/sirsoft-ecommerce/resources/extensions/header-currency-selector-admin.json +++ b/modules/_bundled/sirsoft-ecommerce/resources/extensions/header-currency-selector-admin.json @@ -44,8 +44,15 @@ "name": "Div", "slot": "header_currency", "props": { "className": "relative {{(_global.availableCurrencies ?? []).length > 0 || ((_global.availableShippingCountries ?? []).length > 1 && _global.modules?.['sirsoft-ecommerce']?.shipping?.international_shipping_enabled === true) ? '' : 'hidden'}}" }, + "responsive": { + "portable": { + "comment": "portable 에서는 이 조각이 관리자 템플릿 모바일 드로어(admin_drawer_prefs, 세로 블록) 안에 렌더된다. 펼친 목록이 컨테이너 폭을 채우도록 w-full. hidden 게이트 표현식은 그대로 유지(props 얕은 머지가 아니라 className 통째 교체이므로 표현식을 복제해야 함).", + "props": { "className": "relative w-full {{(_global.availableCurrencies ?? []).length > 0 || ((_global.availableShippingCountries ?? []).length > 1 && _global.modules?.['sirsoft-ecommerce']?.shipping?.international_shipping_enabled === true) ? '' : 'hidden'}}" } + } + }, "children": [ { + "comment": "트리거 버튼 — 데스크톱은 absolute 드롭다운의 토글, portable(드로어 안)에서는 접기/펼치기 아코디언의 트리거. 두 경우 모두 같은 플래그(_local.showCurrencyDropdown)를 토글하므로 기본은 접힘이다. portable 에서는 드로어 폭을 꽉 채우는 행 형태(좌: '통화' 라벨, 우: 현재 통화·배송국가 요약 + chevron)로 바뀐다.", "type": "basic", "name": "Button", "props": { @@ -54,6 +61,55 @@ "aria-expanded": "{{_local.showCurrencyDropdown ?? false}}", "aria-label": "$t:sirsoft-ecommerce.common.currency_label" }, + "responsive": { + "portable": { + "comment": "드로어 안에서는 언어 아코디언 트리거와 동일한 형태 — children 을 통째 교체해 '통화' 라벨 + 현재값 요약 + chevron 으로 구성한다(엔진은 responsive.children 을 완전 교체한다).", + "props": { + "className": "w-full flex items-center justify-between py-1 cursor-pointer", + "aria-haspopup": "listbox", + "aria-expanded": "{{_local.showCurrencyDropdown ?? false}}", + "aria-label": "$t:sirsoft-ecommerce.common.currency_label" + }, + "children": [ + { + "type": "basic", + "name": "Span", + "props": { "className": "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase" }, + "text": "$t:sirsoft-ecommerce.common.currency_label" + }, + { + "type": "basic", + "name": "Span", + "props": { "className": "flex items-center gap-1.5 text-sm text-gray-700 dark:text-gray-300" }, + "children": [ + { + "comment": "접힘 상태 요약 ① 현재 통화 코드", + "type": "basic", + "name": "Span", + "props": { "className": "font-medium" }, + "text": "{{_global.preferredCurrency ?? _global.modules?.['sirsoft-ecommerce']?.language_currency?.default_currency ?? 'KRW'}}" + }, + { + "comment": "접힘 상태 요약 ② 현재 배송국가명 (해외배송 활성 + 국가 2개 이상일 때만).", + "type": "basic", + "name": "Span", + "if": "{{(_global.availableShippingCountries ?? []).length > 1 && _global.modules?.['sirsoft-ecommerce']?.shipping?.international_shipping_enabled === true}}", + "props": { "className": "text-gray-500 dark:text-gray-400" }, + "text": "· {{(_global.availableShippingCountries ?? []).find(c => c.code === (_global.preferredShippingCountry ?? _global.modules?.['sirsoft-ecommerce']?.shipping?.default_country ?? 'KR'))?.name ?? (_global.preferredShippingCountry ?? 'KR')}}" + }, + { + "type": "basic", + "name": "Icon", + "props": { + "name": "chevron-down", + "className": "{{_local.showCurrencyDropdown ? 'rotate-180' : ''}} text-xs text-gray-400 dark:text-gray-500 transition-transform duration-200" + } + } + ] + } + ] + } + }, "children": [ { "comment": "트리거 배송국가 코드 (해외배송 활성 시) — 관리자 헤더는 flag 없이 코드 병기", @@ -76,7 +132,7 @@ ] }, { - "comment": "드롭다운 메뉴", + "comment": "드롭다운 메뉴 (통화 + 배송국가 2섹션). portable(0~1023px) 에서는 absolute 팝오버가 드로어 스크롤 경계에서 잘리므로 static 인라인 목록으로 전환한다. 표시 여부는 데스크톱과 동일하게 _local.showCurrencyDropdown 이 결정한다(responsive 에 if 를 두지 않으면 base if 를 그대로 상속) → 기본 접힘.", "type": "basic", "name": "Div", "if": "{{_local.showCurrencyDropdown}}", @@ -84,13 +140,34 @@ "className": "absolute right-0 top-full mt-2 w-44 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-50 py-1 overflow-hidden", "role": "listbox" }, + "responsive": { + "portable": { + "comment": "드로어 안에서는 패널이 곧 본문이므로 카드 크롬(테두리/배경/좌우 패딩)을 벗긴다. 크롬을 남기면 드로어 패딩 안에 패딩이 중첩되어 칩 가용폭이 199px 로 줄고, 같은 드로어의 언어 칩(224px)과 줄바꿈 위치가 어긋난다.", + "props": { + "className": "static w-full mt-2 bg-transparent border-0 shadow-none py-0", + "role": "listbox" + } + } + }, "children": [ { + "comment": "섹션 라벨 '통화'. portable 에서는 아코디언 트리거 행이 이미 '통화' 라벨을 달고 있어 중복이므로 숨긴다(배송국가 라벨은 두 번째 섹션을 구분해야 하므로 유지).", "type": "basic", "name": "Div", "props": { "className": "px-4 py-1.5 text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wide" }, + "responsive": { "portable": { "if": "{{false}}" } }, "text": "$t:sirsoft-ecommerce.common.currency_label" }, + { + "comment": "옵션 래퍼. portable 에서만 가로 칩 나열(flex-wrap). 데스크톱은 무클래스 블록이라 기존 세로 목록 그대로. iteration 은 아래 Div 자신에 걸려 있어 항목 수만큼 복제되므로, 복제본들이 이 래퍼의 flex item 이 된다.", + "type": "basic", + "name": "Div", + "responsive": { + "portable": { + "props": { "className": "flex flex-wrap gap-2 pb-1" } + } + }, + "children": [ { "type": "basic", "name": "Div", @@ -104,21 +181,33 @@ "role": "option", "aria-selected": "{{_global.preferredCurrency === currency.code}}" }, + "responsive": { + "portable": { + "props": { + "className": "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm border rounded-full cursor-pointer whitespace-nowrap transition-colors {{_global.preferredCurrency === currency.code ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 border-blue-200 dark:border-blue-800' : 'text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'}}", + "role": "option", + "aria-selected": "{{_global.preferredCurrency === currency.code}}" + } + } + }, "children": [ { "type": "basic", "name": "Span", "props": { "className": "text-base" }, "text": "{{currency.flag}}" }, { "type": "basic", "name": "Span", "props": { "className": "flex-1" }, + "responsive": { "portable": { "props": { "className": "" } } }, "children": [ { "type": "basic", "name": "Span", "props": { "className": "font-medium" }, "text": "{{currency.code}}" }, { "type": "basic", "name": "Span", "props": { "className": "text-gray-500 dark:text-gray-400 ml-1" }, "text": "({{currency.symbol}})" } ] }, { + "comment": "portable(칩 나열)에서는 선택 상태가 배경/테두리 색으로 이미 표현되고 aria-selected 로도 전달되므로, 칩 폭을 아끼려 체크 아이콘을 숨긴다.", "type": "basic", "name": "Icon", "if": "{{_global.preferredCurrency === currency.code}}", + "responsive": { "portable": { "if": "{{false}}" } }, "props": { "name": "check", "className": "text-base" } } ], @@ -135,6 +224,8 @@ ] } ] + } + ] }, { "comment": "── 구분선 ──", @@ -153,8 +244,19 @@ "type": "basic", "name": "Div", "props": { "className": "px-4 py-1.5 text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wide" }, + "responsive": { "portable": { "props": { "className": "py-1 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase" } } }, "text": "$t:sirsoft-ecommerce.common.shipping_country_label" }, + { + "comment": "옵션 래퍼. portable 에서만 가로 칩 나열(flex-wrap). 데스크톱은 무클래스 블록.", + "type": "basic", + "name": "Div", + "responsive": { + "portable": { + "props": { "className": "flex flex-wrap gap-2 pb-1" } + } + }, + "children": [ { "type": "basic", "name": "Div", @@ -168,12 +270,29 @@ "role": "option", "aria-selected": "{{(_global.preferredShippingCountry ?? 'KR') === shipCountry.code}}" }, + "responsive": { + "portable": { + "props": { + "className": "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm border rounded-full cursor-pointer whitespace-nowrap transition-colors {{(_global.preferredShippingCountry ?? 'KR') === shipCountry.code ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 border-blue-200 dark:border-blue-800' : 'text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'}}", + "role": "option", + "aria-selected": "{{(_global.preferredShippingCountry ?? 'KR') === shipCountry.code}}" + } + } + }, "children": [ - { "type": "basic", "name": "Span", "props": { "className": "flex-1 font-medium" }, "text": "{{shipCountry.name ?? shipCountry.code}}" }, { + "type": "basic", + "name": "Span", + "props": { "className": "flex-1 font-medium" }, + "responsive": { "portable": { "props": { "className": "font-medium" } } }, + "text": "{{shipCountry.name ?? shipCountry.code}}" + }, + { + "comment": "portable(칩 나열)에서는 선택 상태를 배경/테두리 색 + aria-selected 로 전달하므로 체크 아이콘을 숨긴다.", "type": "basic", "name": "Icon", "if": "{{(_global.preferredShippingCountry ?? 'KR') === shipCountry.code}}", + "responsive": { "portable": { "if": "{{false}}" } }, "props": { "name": "check", "className": "text-base" } } ], @@ -191,15 +310,18 @@ } ] } + ] + } ] } ] }, { - "comment": "배경 클릭 시 닫기", + "comment": "배경 클릭 시 닫기 — 데스크톱 드롭다운 전용. portable 은 항상 펼친 칩 목록이라 백드롭이 불필요(있으면 화면 전체를 덮어 클릭을 가로챈다).", "type": "basic", "name": "Div", "if": "{{_local.showCurrencyDropdown}}", + "responsive": { "portable": { "if": "{{false}}" } }, "props": { "className": "fixed inset-0 z-40" }, "actions": [ { diff --git a/modules/_bundled/sirsoft-ecommerce/resources/extensions/header-currency-selector-user.json b/modules/_bundled/sirsoft-ecommerce/resources/extensions/header-currency-selector-user.json index 95967281..1e2dbf97 100644 --- a/modules/_bundled/sirsoft-ecommerce/resources/extensions/header-currency-selector-user.json +++ b/modules/_bundled/sirsoft-ecommerce/resources/extensions/header-currency-selector-user.json @@ -20,7 +20,7 @@ }, "children": [ { - "comment": "트리거 버튼 — 데스크톱 전용. 모바일/태블릿(portable)에서는 이 조각이 드로어(overflow-y-auto) 안에 렌더되어 absolute 드롭다운이 잘리므로, 트리거를 숨기고 패널을 항상 펼친다.", + "comment": "트리거 버튼 — 데스크톱은 absolute 드롭다운의 토글, portable(드로어 안)에서는 접기/펼치기 아코디언의 트리거. 두 경우 모두 같은 플래그(_local.showCurrencyDropdown)를 토글하므로 기본은 접힘이다. portable 에서는 드로어 폭을 꽉 채우는 행 형태(좌: '통화' 라벨, 우: 현재 통화·배송국가 요약 + chevron)로 바뀐다.", "type": "basic", "name": "Button", "props": { @@ -31,7 +31,51 @@ }, "responsive": { "portable": { - "props": { "className": "hidden" } + "comment": "드로어 안에서는 언어 아코디언 트리거와 동일한 형태 — children 을 통째 교체해 '통화' 라벨 + 현재값 요약 + chevron 으로 구성한다(엔진은 responsive.children 을 완전 교체한다).", + "props": { + "className": "w-full flex items-center justify-between py-1 cursor-pointer", + "aria-haspopup": "listbox", + "aria-expanded": "{{_local.showCurrencyDropdown ?? false}}", + "aria-label": "$t:sirsoft-ecommerce.common.currency_label" + }, + "children": [ + { + "type": "basic", + "name": "Span", + "props": { "className": "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase" }, + "text": "$t:sirsoft-ecommerce.common.currency_label" + }, + { + "type": "basic", + "name": "Span", + "props": { "className": "flex items-center gap-1.5 text-sm text-gray-700 dark:text-gray-300" }, + "children": [ + { + "comment": "접힘 상태 요약 ① 현재 통화 코드", + "type": "basic", + "name": "Span", + "props": { "className": "font-medium" }, + "text": "{{_global.preferredCurrency ?? _global.defaultCurrency ?? 'KRW'}}" + }, + { + "comment": "접힘 상태 요약 ② 현재 배송국가명 (해외배송 활성 + 국가 2개 이상일 때만). 통화와 시각적으로 구분되도록 옅은 색.", + "type": "basic", + "name": "Span", + "if": "{{(_global.availableShippingCountries ?? []).length > 1 && _global.modules?.['sirsoft-ecommerce']?.shipping?.international_shipping_enabled === true}}", + "props": { "className": "text-gray-500 dark:text-gray-400" }, + "text": "· {{(_global.availableShippingCountries ?? []).find(c => c.code === (_global.preferredShippingCountry ?? _global.modules?.['sirsoft-ecommerce']?.shipping?.default_country ?? 'KR'))?.name ?? (_global.preferredShippingCountry ?? 'KR')}}" + }, + { + "type": "basic", + "name": "Icon", + "props": { + "name": "chevron-down", + "className": "{{_local.showCurrencyDropdown ? 'rotate-180' : ''}} text-xs text-gray-400 dark:text-gray-500 transition-transform duration-200" + } + } + ] + } + ] } }, "children": [ @@ -56,7 +100,7 @@ ] }, { - "comment": "드롭다운 메뉴 (통화 + 배송국가 2섹션). portable(0~1023px) 에서는 트리거 없이 항상 펼쳐진 정적 목록 — 드로어 스크롤 경계에서 absolute 패널이 잘리는 문제 회피.", + "comment": "드롭다운 메뉴 (통화 + 배송국가 2섹션). portable(0~1023px) 에서는 absolute 팝오버가 드로어 스크롤 경계에서 잘리므로 static 인라인 목록으로 전환한다. 표시 여부는 데스크톱과 동일하게 _local.showCurrencyDropdown 이 결정한다(responsive 에 if 를 두지 않으면 base if 를 그대로 상속) → 기본 접힘.", "type": "basic", "name": "Div", "if": "{{_local.showCurrencyDropdown}}", @@ -66,7 +110,6 @@ }, "responsive": { "portable": { - "if": "{{true}}", "props": { "className": "static w-full mt-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg py-1", "role": "listbox" @@ -81,10 +124,11 @@ "if": "{{(_global.availableCurrencies ?? []).length > 0}}", "children": [ { + "comment": "섹션 라벨 '통화'. portable 에서는 아코디언 트리거 행이 이미 '통화' 라벨을 달고 있어 중복이므로 숨긴다(배송국가 라벨은 두 번째 섹션을 구분해야 하므로 유지).", "type": "basic", "name": "Div", "props": { "className": "px-4 py-1.5 text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wide" }, - "responsive": { "portable": { "props": { "className": "px-3 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase" } } }, + "responsive": { "portable": { "if": "{{false}}" } }, "text": "$t:sirsoft-ecommerce.common.currency_label" }, { @@ -298,10 +342,11 @@ ] }, { - "comment": "배경 클릭 시 닫기", + "comment": "배경 클릭 시 닫기 — 데스크톱 팝오버 전용. portable 에서는 패널이 드로어 안 인라인 아코디언이라 배경 개념이 없다. 여기서 if 를 끄지 않으면 모바일에서 펼치는 순간 fixed inset-0 오버레이가 드로어 전체를 덮어 모든 클릭을 가로챈다.", "type": "basic", "name": "Div", "if": "{{_local.showCurrencyDropdown}}", + "responsive": { "portable": { "if": "{{false}}" } }, "props": { "className": "fixed inset-0 z-40" }, "actions": [ { diff --git a/modules/_bundled/sirsoft-ecommerce/resources/js/__tests__/layouts/adminHeaderCurrencySelectorPortable.test.tsx b/modules/_bundled/sirsoft-ecommerce/resources/js/__tests__/layouts/adminHeaderCurrencySelectorPortable.test.tsx new file mode 100644 index 00000000..0d971302 --- /dev/null +++ b/modules/_bundled/sirsoft-ecommerce/resources/js/__tests__/layouts/adminHeaderCurrencySelectorPortable.test.tsx @@ -0,0 +1,134 @@ +/** + * @file adminHeaderCurrencySelectorPortable.test.tsx + * @description 관리자 헤더 통화/배송국가 주입 조각의 portable(모바일·태블릿) 칩 전환 회귀 테스트 + * + * 배경: 관리자 모바일 헤더 우측 그룹이 420px 를 요구해 폰 뷰포트에서 통화 셀렉터가 잘렸다. + * 템플릿이 통화 슬롯을 모바일 드로어(`admin_drawer_prefs`)로 옮겼고, 이 조각은 드로어 안에서 + * 접기/펼치기 아코디언(트리거 행 + static 가로 칩 목록)으로 렌더된다(사용자 조각 + * `header-currency-selector-user` 와 동일 사상). + * + * 접힘이 기본이며, 표시 여부는 데스크톱과 같은 `_local.showCurrencyDropdown` 이 결정한다 — + * portable 오버라이드에 `if` 를 두지 않으면 엔진이 base `if` 를 상속하기 때문(`override.if ?? baseDef.if`). + * 데스크톱(≥1024px)은 기존 absolute 드롭다운을 그대로 유지해야 한다. + * + * @vitest-environment jsdom + */ + +import { describe, it, expect } from 'vitest'; +import fs from 'node:fs'; +import path from 'node:path'; + +const fragmentPath = path.resolve( + __dirname, + '../../../extensions/header-currency-selector-admin.json', +); + +const fragment = JSON.parse(fs.readFileSync(fragmentPath, 'utf8')); +const root = fragment.injections[0].components[0]; +const [trigger, panel, backdrop] = root.children; + +describe('관리자 통화 주입 조각 — portable 칩 전환', () => { + it('데스크톱 기본 경로는 absolute 드롭다운을 유지한다 (회귀 방지)', () => { + expect(root.props.className).toContain('relative'); + expect(root.props.className).not.toContain('w-full'); + + expect(panel.props.className).toContain('absolute'); + expect(panel.props.className).toContain('z-50'); + expect(panel.props.className).toContain('w-44'); + expect(panel.if).toBe('{{_local.showCurrencyDropdown}}'); + }); + + it('portable 에서 루트가 w-full 이 되고 hidden 게이트 표현식이 보존된다', () => { + const cls = root.responsive.portable.props.className; + expect(cls).toContain('w-full'); + // props 는 얕은 머지가 아니라 className 통째 교체이므로 표현식을 복제해야 한다. + expect(cls).toContain('availableCurrencies'); + expect(cls).toContain('international_shipping_enabled'); + }); + + it('portable 트리거는 아코디언 행이 되고 접힘 상태 요약(통화·배송국가)을 노출한다', () => { + expect(trigger.name).toBe('Button'); + + const t = trigger.responsive.portable; + // 더 이상 숨기지 않는다 — 드로어 폭을 채우는 트리거 행 + expect(t.props.className).not.toBe('hidden'); + expect(t.props.className).toContain('w-full'); + expect(t.props.className).toContain('justify-between'); + // 얕은 머지가 아니라 통째 교체이므로 aria-* 를 오버라이드에도 명시 + expect(t.props['aria-expanded']).toBe('{{_local.showCurrencyDropdown ?? false}}'); + + // 접힘 상태에서 현재 값을 알 수 있어야 한다 + const summary = JSON.stringify(t.children); + expect(summary).toContain('preferredCurrency'); + expect(summary).toContain('preferredShippingCountry'); + expect(summary).toContain('chevron-down'); + expect(summary).toContain("{{_local.showCurrencyDropdown ? 'rotate-180' : ''}}"); + }); + + it('portable 패널도 _local.showCurrencyDropdown 으로 게이트된다 (기본 접힘)', () => { + const p = panel.responsive.portable; + // 핵심: `{{true}}` 로 강제하면 드로어에서 항상 펼쳐져 아코디언이 성립하지 않는다. + // if 를 생략해야 base if 를 상속한다. + expect(p.if).toBeUndefined(); + expect(p.props.className).toContain('static'); + expect(p.props.className).not.toContain('absolute'); + expect(p.props.className).not.toContain('z-50'); + // 얕은 머지라 role 을 재선언하지 않으면 유실된다. + expect(p.props.role).toBe('listbox'); + }); + + it('portable 백드롭은 렌더되지 않는다 (fixed inset-0 이 드로어 전체 클릭을 가로챈다)', () => { + expect(backdrop.props.className).toContain('fixed'); + expect(backdrop.responsive.portable.if).toBe('{{false}}'); + }); + + it('칩 래퍼는 정적이고 iteration 은 그 자식에 걸린다', () => { + // 엔진은 iteration 을 가진 노드를 항목 수만큼 복제한다. flex 컨테이너에 걸면 + // 컨테이너가 복제되어 칩이 세로로 쌓인다. + const wrappers = panel.children.filter( + (c: any) => c.responsive?.portable?.props?.className?.includes('flex-wrap'), + ); + // 통화 섹션 래퍼 1 + 배송국가 섹션 래퍼 1 + const shippingSection = panel.children.find( + (c: any) => c.comment?.includes('배송국가 섹션'), + ); + const shippingWrapper = shippingSection.children.find( + (c: any) => c.responsive?.portable?.props?.className?.includes('flex-wrap'), + ); + + expect(wrappers.length).toBe(1); // 통화 섹션은 panel 직계 + expect(shippingWrapper).toBeTruthy(); + + for (const wrapper of [wrappers[0], shippingWrapper]) { + expect(wrapper.iteration).toBeUndefined(); + const iterating = wrapper.children[0]; + expect(iterating.iteration).toBeTruthy(); + } + }); + + it('portable 옵션은 rounded-full 칩이고 체크 아이콘은 숨는다', () => { + const currencyWrapper = panel.children.find( + (c: any) => c.responsive?.portable?.props?.className?.includes('flex-wrap'), + ); + const button = currencyWrapper.children[0].children[0]; + + const chipCls = button.responsive.portable.props.className; + expect(chipCls).toContain('rounded-full'); + expect(chipCls).toContain('inline-flex'); + expect(chipCls).toContain('whitespace-nowrap'); + // 얕은 머지 — role/aria-selected 재선언 필수 + expect(button.responsive.portable.props.role).toBe('option'); + expect(button.responsive.portable.props['aria-selected']).toBeTruthy(); + + const check = button.children.find((c: any) => c.name === 'Icon'); + expect(check.responsive.portable.if).toBe('{{false}}'); + }); + + it('portable 패널은 드로어 안에서 카드 크롬을 벗는다 (언어 칩과 줄바꿈 정렬)', () => { + const cls = panel.responsive.portable.props.className; + // 크롬을 남기면 드로어 패딩 안에 패딩이 중첩되어 칩 가용폭이 줄고 언어 칩과 어긋난다. + expect(cls).toContain('bg-transparent'); + expect(cls).toContain('border-0'); + expect(cls).toContain('shadow-none'); + }); +}); diff --git a/modules/_bundled/sirsoft-ecommerce/resources/js/__tests__/layouts/adminMobileViewportOverflow.test.tsx b/modules/_bundled/sirsoft-ecommerce/resources/js/__tests__/layouts/adminMobileViewportOverflow.test.tsx new file mode 100644 index 00000000..9d0ff405 --- /dev/null +++ b/modules/_bundled/sirsoft-ecommerce/resources/js/__tests__/layouts/adminMobileViewportOverflow.test.tsx @@ -0,0 +1,247 @@ +/** + * @file adminMobileViewportOverflow.test.tsx + * @description 관리자 모바일 뷰포트 넘침/압착 회귀 테스트 (이커머스 소유분) + * + * 각 단언은 브라우저 실측(390px / 320px)으로 확인된 결함에 1:1 대응한다. + * 되돌리면 해당 결함이 그대로 재발하므로, 사유를 각 테스트에 남긴다. + * + * @vitest-environment jsdom + */ + +import { describe, it, expect } from 'vitest'; +import fs from 'node:fs'; +import path from 'node:path'; + +const layoutsDir = path.resolve(__dirname, '../../../layouts/admin'); + +const load = (rel: string): any => + JSON.parse(fs.readFileSync(path.resolve(layoutsDir, rel), 'utf8')); + +/** 트리 전체를 순회하며 술어를 만족하는 노드를 모은다. */ +function collect(node: any, pred: (n: any) => boolean, acc: any[] = []): any[] { + if (!node || typeof node !== 'object') return acc; + if (Array.isArray(node)) { + for (const n of node) collect(n, pred, acc); + return acc; + } + if (pred(node)) acc.push(node); + for (const v of Object.values(node)) { + if (v && typeof v === 'object') collect(v, pred, acc); + } + return acc; +} + +const cls = (n: any): string => { + const c = n?.props?.className; + return typeof c === 'string' ? c : ''; +}; + +describe('B1 — 모달 좌우 여백 (max-w-full 트랩)', () => { + // .modal-container 의 max-w-[calc(100vw-2rem)] 와 .max-w-full 은 명시도가 같고(0,1,0) + // 빌드 CSS 에서 .max-w-full 이 뒤에 정의되므로 승리한다. 레이아웃에서 max-w-full 을 + // 주면 clamp 가 무효화되어 모달이 화면 좌우에 붙는다(여백 0). + it.each([ + 'partials/admin_ecommerce_order_detail/_modal_cancel_order.json', + 'partials/admin_ecommerce_order_detail/_modal_batch_change_confirm.json', + ])('%s 는 max-w-full 을 갖지 않는다', (rel) => { + const raw = fs.readFileSync(path.resolve(layoutsDir, rel), 'utf8'); + expect(raw).not.toContain('max-w-full'); + }); +}); + +describe('B2 — 주문상세 모달 상품표 카드형 전환', () => { + it.each([ + ['_modal_cancel_order.json', 'partials/admin_ecommerce_order_detail/_modal_cancel_order.json'], + ['_modal_batch_change_confirm.json', 'partials/admin_ecommerce_order_detail/_modal_batch_change_confirm.json'], + ])('%s: grid-cols-12 행이 portable 에서 1열로 스택된다', (_n, rel) => { + const layout = load(rel); + const grids = collect(layout, (n) => cls(n).includes('grid-cols-12')); + + // 헤더 행 1 + 본문(iteration) 행 1 + expect(grids.length).toBe(2); + + const header = grids.find((g) => cls(g).includes('bg-gray-50')); + const body = grids.find((g) => !cls(g).includes('bg-gray-50')); + + // 카드형에서는 열 라벨 행이 의미 없다 → 미렌더 + expect(header.responsive?.portable?.if).toBe('{{false}}'); + + // 390px 에서 12열이면 1열 = 16.4px → `249,000원`(56px) 같은 토큰이 숫자 내부에서 쪼개진다. + expect(body.responsive?.portable?.props?.className).toContain('grid-cols-1'); + expect(body.responsive?.portable?.props?.className).not.toContain('grid-cols-12'); + }); + + it.each([ + 'partials/admin_ecommerce_order_detail/_modal_cancel_order.json', + 'partials/admin_ecommerce_order_detail/_modal_batch_change_confirm.json', + ])('%s: 모든 col-span 셀이 portable 에서 span 을 벗는다', (rel) => { + const layout = load(rel); + const spanCells = collect(layout, (n) => /col-span-\d+/.test(cls(n))); + expect(spanCells.length).toBeGreaterThan(0); + + for (const cell of spanCells) { + const portable = cell.responsive?.portable?.props?.className; + expect(portable).toBeDefined(); + // 1열 그리드에 col-span-5 가 남으면 암묵 열이 생겨 셀 폭이 들쭉날쭉해진다. + expect(portable).not.toMatch(/col-span-\d+/); + } + }); + + // 세로 스택으로 셀이 전폭(285px)이 되어 현재 데이터로는 절단이 없다(10억대 금액도 88px). + // 그러나 셀이 다시 좁아지면 즉시 재발하므로, 방어선을 코드에 선언해 둔다. + // 실측(16px 셀로 축소): + // - 금액 순수 토큰 + whitespace-nowrap → 1줄 유지, 숫자 내부 미분리 + // - `소계 249,000원`(한글+금액 혼합) + break-keep → `소계` / `249,000원` 2줄, 숫자 보존 + // (이 문자열에 nowrap 을 주면 셀을 65px 넘겨 더 나쁘다 — 그래서 break-keep) + it('금액(순수 숫자) 노드는 whitespace-nowrap 으로 숫자 내부 줄바꿈을 막는다', () => { + const cancel = load('partials/admin_ecommerce_order_detail/_modal_cancel_order.json'); + const batch = load('partials/admin_ecommerce_order_detail/_modal_batch_change_confirm.json'); + + const unitPrice = collect( + cancel, + (n) => typeof n.text === 'string' && n.text.includes('unit_price') && n.text.includes('원'), + )[0]; + expect(cls(unitPrice)).toContain('whitespace-nowrap'); + + const batchAmounts = collect( + batch, + (n) => typeof n.text === 'string' && /Number\(confirmItem\.(original_price|unit_price)\)/.test(n.text), + ); + expect(batchAmounts.length).toBe(2); + for (const node of batchAmounts) { + expect(cls(node)).toContain('whitespace-nowrap'); + } + }); + + it('한글 라벨 노드는 break-keep 으로 음절 경계 절단을 막는다', () => { + const cancel = load('partials/admin_ecommerce_order_detail/_modal_cancel_order.json'); + const batch = load('partials/admin_ecommerce_order_detail/_modal_batch_change_confirm.json'); + + // `소계 249,000원` — 한글 라벨 + 금액 혼합. nowrap 이 아니라 break-keep 이 정답. + const subtotal = collect( + cancel, + (n) => typeof n.text === 'string' && n.text.includes('product_subtotal'), + )[0]; + expect(cls(subtotal)).toContain('break-keep'); + expect(cls(subtotal)).not.toContain('whitespace-nowrap'); + + // 상태 배지 (`결제완료` → `결제완`/`료` 방지) + const cancelStatus = collect( + cancel, + (n) => typeof n.text === 'string' && n.text.includes('option_status_label'), + )[0]; + expect(cls(cancelStatus)).toContain('break-keep'); + + const batchStatus = collect( + batch, + (n) => typeof n.text === 'string' && n.text.includes('order.status.payment_complete'), + )[0]; + expect(cls(batchStatus)).toContain('break-keep'); + }); +}); + +describe('B3 — 은행 관리 모달', () => { + const rel = 'partials/admin_ecommerce_settings/_bank_management_modal.json'; + + it('은행코드 입력칸에 min-w-[80px] 하한이 있다', () => { + const layout = load(rel); + // 은행코드 input 은 code 오류 키를 참조하는 className 바인딩으로 식별한다. + const input = collect( + layout, + (n) => n.name === 'Input' && cls(n).includes("+ '.code'"), + )[0]; + + expect(input).toBeTruthy(); + // table-layout:auto + td{min-width:0} 이라 좁은 뷰포트에서 input 이 24px(=좌우 padding)로 + // 압착되어 텍스트 영역이 0px 이 된다. width 지정은 auto 레이아웃이 무시하므로 min-width 필요. + expect(cls(input)).toContain('min-w-[80px]'); + // 숫자 스케일 min-w-16 은 safelist 에 없어 CSS 가 생성되지 않는다(무효). + expect(cls(input)).not.toContain('min-w-16'); + }); + + it('표 래퍼가 overflow-x-auto 를 명시한다', () => { + const layout = load(rel); + const wrapper = collect(layout, (n) => cls(n).includes('max-h-96'))[0]; + expect(wrapper).toBeTruthy(); + // overflow-y 만 선언해도 computed 는 auto 가 되지만 암묵적 의존이다. + expect(cls(wrapper)).toContain('overflow-x-auto'); + }); +}); + +describe('C2 — 쿠폰 발급기간 입력 행', () => { + const rel = 'partials/admin_ecommerce_promotion_coupon_form/_partial_issue_settings.json'; + + it('portable 에서 행이 줄바꿈하고 datetime 입력이 전폭이 된다', () => { + const layout = load(rel); + const row = collect(layout, (n) => n.id === 'issue_period_range')[0]; + expect(row).toBeTruthy(); + // flex-center 는 nowrap. w-52(208px) 두 개가 좁은 뷰포트를 넘긴다. + expect(row.responsive.portable.props.className).toContain('flex-wrap'); + + const inputs = collect(row, (n) => n.name === 'Input'); + expect(inputs.length).toBe(2); + for (const i of inputs) { + expect(i.responsive.portable.props.className).toContain('w-full'); + expect(i.responsive.portable.props.className).not.toContain('w-52'); + } + }); +}); + +describe('C3 — 이커머스 환경설정 넘침', () => { + it('탭바는 sticky-tab-nav-responsive 를 쓴다 (단계적 패딩과 일치)', () => { + const layout = load('admin_ecommerce_settings.json'); + const nav = collect(layout, (n) => n.id === 'tab_navigation')[0]; + expect(nav).toBeTruthy(); + // 콘텐츠 래퍼가 p-4 sm:p-6 lg:p-8 이라 고정 24px 를 가정하는 sticky-tab-nav(-mx-6 px-6)는 + // 폰에서 좌우 8px 씩 과다 bleed 된다. + expect(nav.props.className).toBe('sticky-tab-nav-responsive'); + }); + + it('이메일 행이 portable 에서 줄바꿈한다 (rcaExcess 71px 의 진범)', () => { + const layout = load('partials/admin_ecommerce_settings/_tab_basic_info.json'); + const emailGroup = collect(layout, (n) => n.id === 'field_email')[0]; + expect(emailGroup).toBeTruthy(); + const row = collect(emailGroup, (n) => cls(n).startsWith('flex-center'))[0]; + expect(row.responsive.portable.props.className).toContain('flex-wrap'); + }); + + it('w-80 고정폭 입력은 mobile(0~767px) 에서만 전폭이 된다', () => { + const layout = load('partials/admin_ecommerce_settings/_tab_basic_info.json'); + const w80 = collect(layout, (n) => n.name === 'Input' && cls(n).includes('w-80')); + expect(w80.length).toBeGreaterThanOrEqual(2); + + const overridden = w80.filter((n) => n.responsive); + expect(overridden.length).toBe(2); // 쇼핑몰 이름 + 종목 + + for (const n of overridden) { + // 태블릿(768~1023px)은 w-80 이 넘치지 않으므로 portable 로 잡으면 불필요하게 늘어난다. + expect(n.responsive.mobile).toBeDefined(); + expect(n.responsive.portable).toBeUndefined(); + expect(n.responsive.mobile.props.className).toContain('w-full'); + } + }); +}); + +describe('C5 — 엑셀 다운로드 날짜 필터 행', () => { + it('부모가 flex-wrap 이어도 자식 행에 flex-wrap 이 필요하다', () => { + const layout = load('admin_ecommerce_excel_download_index.json'); + const parent = collect(layout, (n) => n.id === 'date_filter_row')[0]; + expect(parent).toBeTruthy(); + expect(cls(parent)).toContain('flex-wrap'); + + // 부모만 wrap 이면 nowrap 인 자식 행(입력 2개 × w-36)이 11px 넘친다. + const child = (parent.children ?? []).find((c: any) => cls(c).startsWith('flex-center')); + expect(child).toBeTruthy(); + expect(cls(child)).toContain('flex-wrap'); + }); +}); + +describe('C6 — 도서산간 템플릿 모달 표', () => { + it('표 컨테이너가 overflow-x-auto 를 명시한다', () => { + const layout = load('partials/admin_ecommerce_shipping_policy_form/_modal_extra_fee_template.json'); + const wrapper = collect(layout, (n) => n.id === 'template_list')[0]; + expect(wrapper).toBeTruthy(); + // 현재는 computed 가 우연히 auto 라 동작하지만, overflow-y-visible 로 바뀌면 즉시 표가 잘린다. + expect(cls(wrapper)).toContain('overflow-x-auto'); + }); +}); diff --git a/modules/_bundled/sirsoft-ecommerce/resources/js/__tests__/layouts/shippingCountryLayouts.test.tsx b/modules/_bundled/sirsoft-ecommerce/resources/js/__tests__/layouts/shippingCountryLayouts.test.tsx index b354a3f9..afb93f28 100644 --- a/modules/_bundled/sirsoft-ecommerce/resources/js/__tests__/layouts/shippingCountryLayouts.test.tsx +++ b/modules/_bundled/sirsoft-ecommerce/resources/js/__tests__/layouts/shippingCountryLayouts.test.tsx @@ -120,19 +120,38 @@ describe('header-currency-selector-user.json — 헤더 공용 셀렉터 2섹션 * 사용자 템플릿(sirsoft-basic)은 390px 뷰포트 오버플로(+11px) 해소를 위해 이 슬롯을 * 헤더 우측 그룹에서 모바일 드로어(overflow-y-auto + w-80)로 옮겼다. 드로어에서는 * absolute 드롭다운 패널이 스크롤 경계에서 잘리므로, 주입 노드 자체가 responsive.portable - * (0~1023px) 오버라이드로 "트리거 숨김 + 패널 항상 펼침(static)" 을 선언한다. + * (0~1023px) 오버라이드로 static 인라인 목록으로 전환한다. + * + * 표시 여부는 데스크톱과 동일하게 `_local.showCurrencyDropdown` 이 결정한다 — portable 에 + * `if` 를 두지 않으면 엔진이 base `if` 를 그대로 상속하므로(`override.if ?? baseDef.if`) + * 드로어에서도 기본 접힘이 되고, 트리거가 접기/펼치기 아코디언 역할을 한다. * * SlotContainer 는 주입 자식에게 variant/context prop 을 전달하지 않으므로 컨테이너별로 * 다르게 그릴 방법이 이것뿐이다. 데스크톱(≥1024px)은 기존 드롭다운을 그대로 유지한다. */ - it('트리거 버튼은 portable(0~1023px)에서 숨겨진다 (모바일 드로어 = 펼친 목록)', () => { + it('트리거 버튼은 portable 에서 아코디언 행이 되고 접힘 상태 요약(통화·배송국가)을 노출한다', () => { const trigger = walk(root, (n) => n.name === 'Button' && Array.isArray(n.actions) && n.actions.some((a: any) => a.handler === 'setState' && a.params?.showCurrencyDropdown !== undefined)); expect(trigger).toBeTruthy(); - expect(trigger.responsive?.portable?.props?.className).toBe('hidden'); + + const portable = trigger.responsive?.portable; + expect(portable).toBeTruthy(); + // 더 이상 숨기지 않는다 — 드로어 폭을 채우는 트리거 행 + expect(portable.props.className).not.toBe('hidden'); + expect(portable.props.className).toContain('w-full'); + expect(portable.props.className).toContain('justify-between'); + // 접근성: 얕은 머지가 아니라 통째 교체이므로 aria-* 를 오버라이드에도 명시 + expect(portable.props['aria-expanded']).toBe('{{_local.showCurrencyDropdown ?? false}}'); + + // 접힘 상태에서 현재 값을 알 수 있어야 한다 (요약 = 통화 + 배송국가) + const summary = JSON.stringify(portable.children); + expect(summary).toContain('preferredCurrency'); + expect(summary).toContain('preferredShippingCountry'); + expect(summary).toContain('chevron-down'); + expect(summary).toContain("{{_local.showCurrencyDropdown ? 'rotate-180' : ''}}"); }); - it('패널은 portable 에서 if 해제 + static 흐름 (데스크톱 absolute/z-50 은 보존)', () => { + it('패널은 portable 에서도 _local.showCurrencyDropdown 으로 게이트된다 (기본 접힘)', () => { const panel = (root.children ?? []).find( (n: any) => n.name === 'Div' && n.props?.role === 'listbox' ); @@ -143,10 +162,11 @@ describe('header-currency-selector-user.json — 헤더 공용 셀렉터 2섹션 expect(panel.props.className).toContain('absolute'); expect(panel.props.className).toContain('z-50'); - // portable 오버라이드 — 엔진은 override.if 로 base if 를 완전 교체한다 const portable = panel.responsive?.portable; expect(portable).toBeTruthy(); - expect(portable.if).toBe('{{true}}'); + // 핵심: portable 에 if 를 두지 않아야 base if 를 상속해 기본 접힘이 된다. + // `{{true}}` 로 강제하면 드로어에서 항상 펼쳐져 아코디언이 성립하지 않는다. + expect(portable.if).toBeUndefined(); expect(portable.props.className).toContain('static'); expect(portable.props.className).not.toContain('absolute'); expect(portable.props.className).not.toContain('z-50'); @@ -154,6 +174,15 @@ describe('header-currency-selector-user.json — 헤더 공용 셀렉터 2섹션 expect(portable.props.role).toBe('listbox'); }); + it('배경 클릭 오버레이는 portable 에서 꺼진다 (드로어 전체를 덮어 클릭을 가로채는 회귀 방지)', () => { + const backdrop = (root.children ?? []).find( + (n: any) => n.name === 'Div' && (n.props?.className ?? '').includes('fixed inset-0') + ); + expect(backdrop).toBeTruthy(); + expect(backdrop.if).toBe('{{_local.showCurrencyDropdown}}'); + expect(backdrop.responsive?.portable?.if).toBe('{{false}}'); + }); + /** * 모바일(portable)에서는 통화·배송국가를 세로 목록이 아니라 가로 나열 칩으로 그린다. * 세로 목록은 좁은 드로어에서 세로 공간을 과하게 먹는다. diff --git a/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/admin_ecommerce_excel_download_index.json b/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/admin_ecommerce_excel_download_index.json index 5ead3af5..3a0031f7 100644 --- a/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/admin_ecommerce_excel_download_index.json +++ b/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/admin_ecommerce_excel_download_index.json @@ -50,7 +50,7 @@ "name": "Icon", "props": { "name": "file-spreadsheet", - "className": "w-5 h-5 icon-muted" + "className": "text-xl icon-muted" } }, { @@ -157,7 +157,7 @@ "name": "Icon", "props": { "name": "refresh-cw", - "className": "w-4 h-4" + "className": "text-base" } }, { @@ -230,7 +230,7 @@ "name": "Icon", "props": { "name": "check-circle", - "className": "w-3 h-3" + "className": "text-xs" } }, { @@ -262,7 +262,7 @@ "name": "Icon", "props": { "name": "loader", - "className": "w-3 h-3" + "className": "text-xs" } }, { @@ -294,7 +294,7 @@ "name": "Icon", "props": { "name": "alert-circle", - "className": "w-3 h-3" + "className": "text-xs" } }, { @@ -326,7 +326,7 @@ "name": "Icon", "props": { "name": "file-text", - "className": "w-3 h-3" + "className": "text-xs" } }, { @@ -439,10 +439,11 @@ } }, { + "comment": "부모(date_filter_row)는 flex-wrap 이지만 이 행 자신은 nowrap 이라, 시작일~종료일(각 input w-36 = 144px)이 좁은 뷰포트에서 콘텐츠 영역을 11px 넘긴다. 자식에도 flex-wrap 을 준다.", "type": "basic", "name": "Div", "props": { - "className": "flex-center gap-2" + "className": "flex-center flex-wrap gap-2" }, "children": [ { @@ -457,7 +458,7 @@ "name": "Icon", "props": { "name": "calendar", - "className": "w-4 h-4 icon-muted" + "className": "text-base icon-muted" } }, { @@ -502,7 +503,7 @@ "name": "Icon", "props": { "name": "calendar", - "className": "w-4 h-4 icon-muted" + "className": "text-base icon-muted" } }, { @@ -781,7 +782,7 @@ "name": "Icon", "props": { "name": "check-circle", - "className": "w-3 h-3" + "className": "text-xs" } }, { @@ -994,7 +995,7 @@ "name": "Icon", "props": { "name": "check-circle", - "className": "w-3 h-3" + "className": "text-xs" } }, { @@ -1161,7 +1162,7 @@ "name": "Icon", "props": { "name": "loader", - "className": "w-3 h-3 animate-spin" + "className": "text-xs animate-spin" } }, { @@ -1299,7 +1300,7 @@ "name": "Icon", "props": { "name": "alert-circle", - "className": "w-3 h-3" + "className": "text-xs" } }, { @@ -1437,7 +1438,7 @@ "name": "Icon", "props": { "name": "file-text", - "className": "w-3 h-3" + "className": "text-xs" } }, { @@ -1581,7 +1582,7 @@ "name": "Icon", "props": { "name": "check-circle", - "className": "w-3 h-3" + "className": "text-xs" } }, { @@ -1789,7 +1790,7 @@ "name": "Icon", "props": { "name": "loader", - "className": "w-3 h-3 animate-spin" + "className": "text-xs animate-spin" } }, { @@ -1979,7 +1980,7 @@ "name": "Icon", "props": { "name": "alert-circle", - "className": "w-3 h-3" + "className": "text-xs" } }, { @@ -2169,7 +2170,7 @@ "name": "Icon", "props": { "name": "file-text", - "className": "w-3 h-3" + "className": "text-xs" } }, { @@ -2379,7 +2380,7 @@ "name": "Icon", "props": { "name": "chevrons-left", - "className": "w-4 h-4" + "className": "text-base" } } ] @@ -2398,7 +2399,7 @@ "name": "Icon", "props": { "name": "chevron-left", - "className": "w-4 h-4" + "className": "text-base" } } ] @@ -2434,7 +2435,7 @@ "name": "Icon", "props": { "name": "chevron-right", - "className": "w-4 h-4" + "className": "text-base" } } ] @@ -2452,7 +2453,7 @@ "name": "Icon", "props": { "name": "chevrons-right", - "className": "w-4 h-4" + "className": "text-base" } } ] diff --git a/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/admin_ecommerce_settings.json b/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/admin_ecommerce_settings.json index 4ab60a40..3c65cf33 100644 --- a/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/admin_ecommerce_settings.json +++ b/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/admin_ecommerce_settings.json @@ -268,6 +268,7 @@ ] }, { + "comment": "className 은 sticky-tab-nav-responsive 를 쓴다 — 이 화면의 콘텐츠 래퍼가 admin-page-content-responsive(p-4 sm:p-6 lg:p-8) 라 뷰포트마다 좌우 패딩이 다르기 때문. 고정 24px 를 가정하는 sticky-tab-nav(-mx-6 px-6)를 쓰면 폰(p-4=16px)에서 좌우로 8px 씩 과다 bleed 되어 콘텐츠 영역을 넘친다.", "id": "tab_navigation", "type": "composite", "name": "TabNavigation", @@ -316,7 +317,7 @@ ], "activeTabId": "{{_global.activeEcommerceSettingsTab || query.tab || 'basic_info'}}", "variant": "default", - "className": "sticky-tab-nav" + "className": "sticky-tab-nav-responsive" }, "actions": [ { @@ -380,7 +381,7 @@ "name": "Icon", "props": { "name": "triangle-exclamation", - "className": "w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" + "className": "text-xl text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" } }, { diff --git a/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_order_detail/_modal_batch_change_confirm.json b/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_order_detail/_modal_batch_change_confirm.json index 8e778d99..c51773b9 100644 --- a/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_order_detail/_modal_batch_change_confirm.json +++ b/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_order_detail/_modal_batch_change_confirm.json @@ -8,8 +8,7 @@ "name": "Modal", "props": { "title": "$t:sirsoft-ecommerce.admin.order.detail.modal.batch_change.title", - "width": "750px", - "className": "max-w-full" + "width": "750px" }, "children": [ { @@ -48,7 +47,14 @@ "props": { "className": "col-span-5" }, - "text": "$t:sirsoft-ecommerce.admin.order.detail.modal.batch_change.product_col" + "text": "$t:sirsoft-ecommerce.admin.order.detail.modal.batch_change.product_col", + "responsive": { + "portable": { + "props": { + "className": "" + } + } + } }, { "type": "basic", @@ -56,7 +62,14 @@ "props": { "className": "col-span-2 text-right" }, - "text": "$t:sirsoft-ecommerce.admin.order.detail.modal.batch_change.price_col" + "text": "$t:sirsoft-ecommerce.admin.order.detail.modal.batch_change.price_col", + "responsive": { + "portable": { + "props": { + "className": "text-left" + } + } + } }, { "type": "basic", @@ -64,7 +77,14 @@ "props": { "className": "col-span-2 text-center" }, - "text": "$t:sirsoft-ecommerce.admin.order.detail.modal.batch_change.change_quantity_col" + "text": "$t:sirsoft-ecommerce.admin.order.detail.modal.batch_change.change_quantity_col", + "responsive": { + "portable": { + "props": { + "className": "text-left" + } + } + } }, { "type": "basic", @@ -72,9 +92,21 @@ "props": { "className": "col-span-3 text-center" }, - "text": "$t:sirsoft-ecommerce.admin.order.detail.modal.batch_change.current_status_col" + "text": "$t:sirsoft-ecommerce.admin.order.detail.modal.batch_change.current_status_col", + "responsive": { + "portable": { + "props": { + "className": "text-left" + } + } + } } - ] + ], + "responsive": { + "portable": { + "if": "{{false}}" + } + } }, { "type": "basic", @@ -165,7 +197,14 @@ } ] } - ] + ], + "responsive": { + "portable": { + "props": { + "className": "flex-center gap-2 min-w-0" + } + } + } }, { "type": "basic", @@ -175,11 +214,12 @@ }, "children": [ { + "comment": "whitespace-nowrap — 금액은 순수 숫자 토큰이라 숫자 내부에서 절대 줄바꿈되지 않아야 한다(`1,249,000` → `1,249` / `,000`). portable 세로 스택으로 셀이 전폭이라 현재는 절단이 없으나, 셀이 다시 좁아지면 즉시 재발하므로 의도를 코드에 고정한다.", "type": "basic", "name": "P", "if": "{{confirmItem.original_price && Number(confirmItem.original_price) !== Number(confirmItem.unit_price)}}", "props": { - "className": "text-hint line-through" + "className": "text-hint line-through whitespace-nowrap" }, "text": "{{Number(confirmItem.original_price).toLocaleString()}}" }, @@ -187,11 +227,18 @@ "type": "basic", "name": "P", "props": { - "className": "text-sm font-medium text-gray-900 dark:text-gray-100" + "className": "text-sm font-medium text-gray-900 dark:text-gray-100 whitespace-nowrap" }, "text": "{{Number(confirmItem.unit_price).toLocaleString()}}" } - ] + ], + "responsive": { + "portable": { + "props": { + "className": "text-left" + } + } + } }, { "type": "basic", @@ -230,7 +277,14 @@ }, "text": "/ {{confirmItem.quantity}}" } - ] + ], + "responsive": { + "portable": { + "props": { + "className": "flex justify-start" + } + } + } }, { "type": "basic", @@ -243,13 +297,27 @@ "type": "basic", "name": "Span", "props": { - "className": "{{({'pending_order':'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300','pending_payment':'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300','payment_complete':'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300','shipping_hold':'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300','preparing':'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300','shipping_ready':'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300','shipping':'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300','delivered':'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-300','cancelled':'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300','confirmed':'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300'})[confirmItem.option_status] ?? 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'}} inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" + "className": "{{({'pending_order':'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300','pending_payment':'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300','payment_complete':'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300','shipping_hold':'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300','preparing':'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300','shipping_ready':'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300','shipping':'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300','delivered':'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-300','cancelled':'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300','confirmed':'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300'})[confirmItem.option_status] ?? 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'}} inline-flex items-center px-2 py-0.5 rounded text-xs font-medium break-keep" }, "text": "{{({'pending_order':'$t:sirsoft-ecommerce.admin.order.status.waiting','pending_payment':'$t:sirsoft-ecommerce.admin.order.status.payment_pending','payment_complete':'$t:sirsoft-ecommerce.admin.order.status.payment_complete','shipping_hold':'$t:sirsoft-ecommerce.admin.order.status.shipping_hold','preparing':'$t:sirsoft-ecommerce.admin.order.status.preparing','shipping_ready':'$t:sirsoft-ecommerce.admin.order.status.shipping_ready','shipping':'$t:sirsoft-ecommerce.admin.order.status.shipping','delivered':'$t:sirsoft-ecommerce.admin.order.status.delivered','cancelled':'$t:sirsoft-ecommerce.admin.order.status.cancelled','confirmed':'$t:sirsoft-ecommerce.admin.order.status.confirmed'})[confirmItem.option_status] ?? confirmItem.option_status}}" } - ] + ], + "responsive": { + "portable": { + "props": { + "className": "flex justify-start" + } + } + } } - ] + ], + "responsive": { + "portable": { + "props": { + "className": "grid grid-cols-1 gap-2 px-3 py-2 items-center" + } + } + } } ] } diff --git a/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_order_detail/_modal_cancel_order.json b/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_order_detail/_modal_cancel_order.json index d3c81786..dab3bbe9 100644 --- a/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_order_detail/_modal_cancel_order.json +++ b/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_order_detail/_modal_cancel_order.json @@ -8,8 +8,7 @@ "name": "Modal", "props": { "title": "$t:sirsoft-ecommerce.admin.order.detail.modal.cancel.title", - "width": "1125px", - "className": "max-w-full" + "width": "1125px" }, "children": [ { @@ -154,7 +153,14 @@ "props": { "className": "col-span-5" }, - "text": "$t:sirsoft-ecommerce.admin.order.detail.modal.cancel.product_col" + "text": "$t:sirsoft-ecommerce.admin.order.detail.modal.cancel.product_col", + "responsive": { + "portable": { + "props": { + "className": "" + } + } + } }, { "type": "basic", @@ -162,7 +168,14 @@ "props": { "className": "col-span-2 text-right" }, - "text": "$t:sirsoft-ecommerce.admin.order.detail.modal.cancel.unit_price_col" + "text": "$t:sirsoft-ecommerce.admin.order.detail.modal.cancel.unit_price_col", + "responsive": { + "portable": { + "props": { + "className": "text-left" + } + } + } }, { "type": "basic", @@ -170,7 +183,14 @@ "props": { "className": "col-span-3 text-center" }, - "text": "$t:sirsoft-ecommerce.admin.order.detail.modal.cancel.cancel_quantity_col" + "text": "$t:sirsoft-ecommerce.admin.order.detail.modal.cancel.cancel_quantity_col", + "responsive": { + "portable": { + "props": { + "className": "text-left" + } + } + } }, { "type": "basic", @@ -178,9 +198,21 @@ "props": { "className": "col-span-2 text-center" }, - "text": "$t:sirsoft-ecommerce.admin.order.detail.modal.cancel.status_col" + "text": "$t:sirsoft-ecommerce.admin.order.detail.modal.cancel.status_col", + "responsive": { + "portable": { + "props": { + "className": "text-left" + } + } + } } - ] + ], + "responsive": { + "portable": { + "if": "{{false}}" + } + } }, { "comment": "취소 항목 반복", @@ -238,7 +270,14 @@ } ] } - ] + ], + "responsive": { + "portable": { + "props": { + "className": "flex-center gap-2" + } + } + } }, { "comment": "단가 + 소계", @@ -249,22 +288,31 @@ }, "children": [ { + "comment": "whitespace-nowrap — 금액 토큰은 숫자 내부에서 절대 줄바꿈되지 않아야 한다(`249,000원` → `249,000` / `원`). portable 세로 스택으로 셀이 전폭이라 현재는 절단이 없으나, 셀이 다시 좁아지면 즉시 재발하므로 의도를 코드에 고정한다.", "type": "basic", "name": "Span", "props": { - "className": "text-body" + "className": "text-body whitespace-nowrap" }, "text": "{{(cancelItem.unit_price ?? 0).toLocaleString()}}원 × {{cancelItem.quantity ?? 1}}" }, { + "comment": "break-keep + whitespace-nowrap 조합 대신 break-keep 만 — `소계`(한글 라벨) + 금액이 한 문자열이라 nowrap 을 주면 좁은 셀에서 넘친다. break-keep 은 어절 경계에서만 줄바꿈해 `소계` / `249,000원` 으로 끊고 숫자 내부는 보존한다.", "type": "basic", "name": "P", "props": { - "className": "text-tertiary" + "className": "text-tertiary break-keep" }, "text": "$t:sirsoft-ecommerce.admin.order.detail.modal.cancel.product_subtotal {{((cancelItem.unit_price ?? 0) * (cancelItem.quantity ?? 1)).toLocaleString()}}원" } - ] + ], + "responsive": { + "portable": { + "props": { + "className": "text-left" + } + } + } }, { "comment": "취소수량 입력", @@ -297,7 +345,14 @@ } ] } - ] + ], + "responsive": { + "portable": { + "props": { + "className": "flex justify-start" + } + } + } }, { "comment": "현재상태 Badge", @@ -310,13 +365,31 @@ }, "children": [ { + "comment": "break-keep — 한글 상태명(`결제완료`)이 음절 경계에서 `결제완`/`료` 로 쪼개지지 않게 어절 단위 줄바꿈을 강제한다. 현재 Badge 는 inline-flex 라 콘텐츠 폭으로 자라 줄바꿈이 없지만, 배지 폭이 제한되면 즉시 재발한다.", "type": "basic", "name": "Span", + "props": { + "className": "break-keep" + }, "text": "{{cancelItem.option_status_label ?? cancelItem.option_status ?? ''}}" } - ] + ], + "responsive": { + "portable": { + "props": { + "className": "" + } + } + } } - ] + ], + "responsive": { + "portable": { + "props": { + "className": "grid grid-cols-1 gap-2 px-3 py-2 border-t border-gray-100 dark:border-gray-700 items-center" + } + } + } } ] }, @@ -1675,8 +1748,7 @@ ] } ], - "props": { - } + "props": {} } ] } diff --git a/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_promotion_coupon_form/_partial_issue_settings.json b/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_promotion_coupon_form/_partial_issue_settings.json index bab9f421..7bb7c9ad 100644 --- a/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_promotion_coupon_form/_partial_issue_settings.json +++ b/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_promotion_coupon_form/_partial_issue_settings.json @@ -194,7 +194,7 @@ ] }, { - "comment": "기간설정 시: 시작일 ~ 종료일", + "comment": "기간설정 시: 시작일 ~ 종료일. flex-center 는 nowrap 이고 datetime-local 입력이 각 208px(w-52) 이라 좁은 뷰포트에서 행이 콘텐츠 영역을 넘친다 → portable 에서 줄바꿈 + 입력 전폭.", "id": "issue_period_range", "type": "basic", "name": "Div", @@ -202,6 +202,13 @@ "props": { "className": "flex-center gap-2" }, + "responsive": { + "portable": { + "props": { + "className": "flex-center flex-wrap gap-2" + } + } + }, "children": [ { "type": "basic", @@ -210,6 +217,15 @@ "type": "datetime-local", "name": "issue_from", "className": "input w-52" + }, + "responsive": { + "portable": { + "props": { + "type": "datetime-local", + "name": "issue_from", + "className": "input w-full" + } + } } }, { @@ -227,6 +243,15 @@ "type": "datetime-local", "name": "issue_to", "className": "input w-52" + }, + "responsive": { + "portable": { + "props": { + "type": "datetime-local", + "name": "issue_to", + "className": "input w-full" + } + } } } ] diff --git a/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_settings/_bank_management_modal.json b/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_settings/_bank_management_modal.json index 3139f488..0b2bd420 100644 --- a/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_settings/_bank_management_modal.json +++ b/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_settings/_bank_management_modal.json @@ -119,11 +119,11 @@ ] }, { - "comment": "은행 목록 테이블 (스크롤 영역)", + "comment": "은행 목록 테이블 (스크롤 영역). overflow-x-auto 명시 필수 — 좁은 뷰포트에서 표(413px)가 컨테이너(356px)를 넘는다. overflow-y 만 선언해도 CSS Overflow 명세상 다른 축이 visible 로 남을 수 없어 computed 값이 auto 가 되지만, 그 의존은 암묵적이다. 누군가 overflow-y-visible 로 바꾸는 순간 표가 잘리므로 의도를 코드에 고정한다.", "type": "basic", "name": "Div", "props": { - "className": "max-h-96 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-lg" + "className": "max-h-96 overflow-y-auto overflow-x-auto border border-gray-200 dark:border-gray-700 rounded-lg" }, "children": [ { @@ -207,13 +207,14 @@ }, "children": [ { + "comment": "min-w-[80px] 필수 — 표가 table-layout:auto 이고 td 의 min-width 가 0 이라, 좁은 뷰포트에서 은행명 열이 은행코드 열을 56px 로 압착하면 input 이 24px(= 좌우 padding 12+12)로 줄어 텍스트 영역이 0px 이 된다(입력한 값이 보이지 않음). width 지정은 auto 레이아웃이 무시하므로 하한(min-width)을 고정해야 한다. 숫자 스케일 min-w-16 등은 safelist 에 없어 CSS 가 생성되지 않으므로 쓰면 무효다.", "type": "basic", "name": "Input", "props": { "type": "text", "value": "{{bank.code ?? ''}}", "placeholder": "$t:sirsoft-ecommerce.admin.settings.order_settings.bank_management.code_placeholder", - "className": "{{$parent._local.bankModalErrors?.['banks.' + bank._idx + '.code'] ? 'input input-error' : 'input'}}", + "className": "{{$parent._local.bankModalErrors?.['banks.' + bank._idx + '.code'] ? 'input input-error min-w-[80px]' : 'input min-w-[80px]'}}", "disabled": "{{$parent._computed.isReadOnly}}" }, "actions": [ diff --git a/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_settings/_tab_basic_info.json b/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_settings/_tab_basic_info.json index ca5ae84c..e2c39841 100644 --- a/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_settings/_tab_basic_info.json +++ b/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_settings/_tab_basic_info.json @@ -74,6 +74,7 @@ ] }, { + "comment": "w-80(320px) 고정폭은 폰(<768px)의 콘텐츠 영역을 넘긴다(320px 뷰포트에서 32px 초과). 태블릿(768~1023px)은 넘치지 않으므로 portable 이 아니라 mobile(0~767px) 로 한정한다 — portable 로 잡으면 태블릿에서 입력칸이 불필요하게 늘어난다. className 오버라이드는 통째 교체라 에러 분기 표현식을 복제한다.", "type": "basic", "name": "Input", "props": { @@ -82,6 +83,13 @@ "placeholder": "$t:sirsoft-ecommerce.admin.settings.basic_info.shop_info.shop_name_placeholder", "className": "{{_local.errors?.['basic_info.shop_name'] ? 'input input-error w-80' : 'input w-80'}}", "disabled": "{{_computed.isReadOnly}}" + }, + "responsive": { + "mobile": { + "props": { + "className": "{{_local.errors?.['basic_info.shop_name'] ? 'input input-error w-full' : 'input w-full'}}" + } + } } }, { @@ -453,6 +461,7 @@ "text": "$t:sirsoft-ecommerce.admin.settings.basic_info.business_info.business_category" }, { + "comment": "w-80(320px) 고정폭은 폰(<768px)의 콘텐츠 영역을 넘긴다(320px 뷰포트에서 32px 초과). 태블릿(768~1023px)은 넘치지 않으므로 portable 이 아니라 mobile(0~767px) 로 한정한다 — portable 로 잡으면 태블릿에서 입력칸이 불필요하게 늘어난다. className 오버라이드는 통째 교체라 에러 분기 표현식을 복제한다.", "type": "basic", "name": "Input", "props": { @@ -461,6 +470,13 @@ "placeholder": "$t:sirsoft-ecommerce.admin.settings.basic_info.business_info.business_category_placeholder", "className": "{{_local.errors?.['basic_info.business_category'] ? 'input input-error w-80' : 'input w-80'}}", "disabled": "{{_computed.isReadOnly}}" + }, + "responsive": { + "mobile": { + "props": { + "className": "{{_local.errors?.['basic_info.business_category'] ? 'input input-error w-full' : 'input w-full'}}" + } + } } }, { @@ -778,11 +794,19 @@ "text": "$t:sirsoft-ecommerce.admin.settings.basic_info.business_info.email" }, { + "comment": "flex-center 는 nowrap 이고 자식이 고정폭(아이디 w-36 + @ + 도메인 입력 + '직접입력' 드롭다운 104px)이라 좁은 뷰포트에서 이 행이 콘텐츠 영역을 71px 넘긴다 → portable 에서 줄바꿈.", "type": "basic", "name": "Div", "props": { "className": "flex-center gap-2" }, + "responsive": { + "portable": { + "props": { + "className": "flex-center flex-wrap gap-2" + } + } + }, "children": [ { "type": "basic", diff --git a/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_shipping_policy_form/_modal_extra_fee_template.json b/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_shipping_policy_form/_modal_extra_fee_template.json index 93b3b81b..997d7caf 100644 --- a/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_shipping_policy_form/_modal_extra_fee_template.json +++ b/modules/_bundled/sirsoft-ecommerce/resources/layouts/admin/partials/admin_ecommerce_shipping_policy_form/_modal_extra_fee_template.json @@ -394,11 +394,12 @@ }, "children": [ { + "comment": "overflow-x-auto 명시 — 6열 표(615px)가 좁은 뷰포트 컨테이너를 넘는다. overflow-y 만 선언해도 CSS Overflow 명세상 다른 축이 visible 로 남을 수 없어 computed 가 auto 로 계산되지만 그 의존은 암묵적이다. 누군가 overflow-y-visible 로 바꾸면 즉시 표가 잘리므로 의도를 코드에 고정한다. 표는 whitespace-nowrap 이라 절단 없이 가로 스크롤된다(세로 스택 전환은 과잉 대응).", "id": "template_list", "type": "basic", "name": "Div", "props": { - "className": "max-h-96 overflow-y-auto" + "className": "max-h-96 overflow-y-auto overflow-x-auto" }, "actions": [ { diff --git a/templates/_bundled/sirsoft-admin_basic/CHANGELOG.md b/templates/_bundled/sirsoft-admin_basic/CHANGELOG.md index 4fadd3e7..59aebca2 100644 --- a/templates/_bundled/sirsoft-admin_basic/CHANGELOG.md +++ b/templates/_bundled/sirsoft-admin_basic/CHANGELOG.md @@ -4,6 +4,25 @@ 형식은 [Keep a Changelog](https://keepachangelog.com/ko/1.1.0/)를 따르며, [Semantic Versioning](https://semver.org/lang/ko/)을 준수합니다. +## [1.0.2] - 2026-07-09 + +### Added + +- 레이아웃 편집기에서 관리자 기본 레이아웃을 편집할 때 "모바일 메뉴 펼침" 상태를 선택할 수 있습니다 — 모바일 메뉴 안의 언어·통화·배송국가 버튼을 캔버스에서 바로 편집할 수 있습니다. + +### Changed + +- 모바일에서 언어·통화·배송국가 선택을 관리자 메뉴 안으로 옮기고, 사용자 화면과 동일하게 가로로 나열된 버튼 형태로 통일했습니다. 상단 헤더에는 테마 전환과 알림만 남습니다. +- 모바일 메뉴 안의 언어와 통화·배송국가가 각각 접었다 펼치는 항목으로 바뀌어, 메뉴를 열었을 때 곧바로 관리자 메뉴가 보입니다. 접혀 있을 때도 현재 선택된 언어와 통화·배송국가가 표시되므로 펼치지 않아도 확인할 수 있으며, 두 항목은 서로 독립적으로 여닫힙니다. + +### Fixed + +- 모바일에서 상단 헤더의 통화 선택 버튼이 화면 밖으로 잘려 보이던 문제를 수정했습니다. 화면이 좁을수록 심해져 320px 기기에서는 대부분이 가려졌습니다. +- 관리자 메뉴에서 언어를 선택해도 언어가 바뀌지 않던 문제를 수정했습니다. 로그인·비밀번호 찾기·비밀번호 재설정 화면의 언어 선택도 함께 정리했습니다. +- 좁은 화면에서 팝업 창이 화면 좌우에 빈틈 없이 붙어 보이던 문제를 수정했습니다 — 이제 양옆에 여백이 생깁니다. +- 좁은 화면에서 목록 아래 페이지 번호가 한 줄에 다 들어가지 않아 화면 밖으로 넘치던 문제를 수정했습니다 — 이제 여러 줄로 나뉘어 표시됩니다. +- 좁은 화면에서 다국어 입력란의 언어 탭(한국어·English·日本語)이 한 줄에 다 들어가지 않아 넘치던 문제를 수정했습니다. 상품·게시판·페이지 등 다국어 입력이 있는 모든 화면에 적용됩니다. + ## [1.0.1] - 2026-07-08 ### Added diff --git a/templates/_bundled/sirsoft-admin_basic/__tests__/layouts/admin-auth-setlocale-target.test.tsx b/templates/_bundled/sirsoft-admin_basic/__tests__/layouts/admin-auth-setlocale-target.test.tsx new file mode 100644 index 00000000..b52c1df5 --- /dev/null +++ b/templates/_bundled/sirsoft-admin_basic/__tests__/layouts/admin-auth-setlocale-target.test.tsx @@ -0,0 +1,77 @@ +/** + * @file admin-auth-setlocale-target.test.tsx + * @description 비인증 화면(로그인·비밀번호찾기·비밀번호재설정) 언어 선택기의 setLocale 액션 형태 회귀 테스트 + * + * 배경: 관리자 템플릿은 자체 `setLocaleHandler` 를 등록해 엔진 빌트인 `setLocale`(ActionDispatcher) + * 을 덮어쓰고 있었다. 그 사본에는 두 결함이 있었다. + * ① `\n \n {fileName || placeholder}\n \n {fileName && !disabled && (\n \n \n \n \n \n )}\n \n );\n});\n\nFileInput.displayName = 'FileInput';","// e2e:allow basic Input 디폴트 시맨틱(.input/.checkbox/.radio) 머지 — 동작 무변, 외형 통일 시범. 패턴 확정 후 다음 사이클에 E2E spec 일괄 작성 예정.\nimport React, { useRef, useCallback, useState, useEffect, forwardRef, useImperativeHandle } from 'react';\n\nexport interface InputProps extends React.InputHTMLAttributes {\n label?: string;\n error?: string;\n}\n\n// 타입별 디폴트 시맨틱 클래스 (admin main.css 정의)\n// 호출처 className 은 뒤에 머지되어 덮어쓸 수 있음 (의미 토큰/override 모두 지원)\nconst resolveDefaultSemanticClass = (type: string): string => {\n if (type === 'checkbox') return 'checkbox';\n if (type === 'radio') return 'radio';\n return 'input';\n};\n\n// 호출처 className 에 이미 시맨틱 토큰이 포함된 경우 prepend 를 스킵하여\n// \"input input\" 같은 중복 발생을 방지. 기존 호출처가 명시적으로 시맨틱을 적던 패턴 호환.\nconst composeSemanticClassName = (type: string, className: string): string => {\n const semantic = resolveDefaultSemanticClass(type);\n if (!className) return semantic;\n const tokens = className.split(/\\s+/).filter(Boolean);\n if (tokens.includes(semantic)) return className;\n return `${semantic} ${className}`;\n};\n\n/**\n * 기본 입력 필드 컴포넌트\n *\n * IME(한글 등) 조합 중에는 외부 onChange 이벤트를 발생시키지 않습니다.\n * 내부 로컬 상태를 사용하여 입력을 처리하고, 조합이 완료되면 외부에 알립니다.\n *\n * forwardRef를 사용하여 외부에서 ref로 input 요소에 접근할 수 있습니다.\n * 예: indeterminate 상태 설정 시 ref.current.indeterminate = true\n */\nexport const Input = forwardRef(({\n label,\n error,\n className = '',\n onChange,\n onKeyPress,\n value,\n defaultValue,\n type = 'text',\n checked,\n defaultChecked,\n ...props\n}, ref) => {\n // radio/checkbox 타입인지 확인\n const isCheckableType = type === 'radio' || type === 'checkbox';\n\n // 디폴트 시맨틱 + 호출처 className 머지 (호출처가 의미 토큰만 명시해도 시맨틱은 자동 적용)\n // 호출처가 이미 시맨틱 토큰을 명시한 경우 중복 prepend 방지.\n const mergedClassName = composeSemanticClassName(type, className);\n\n // IME 조합 중인지 추적 (text input에만 필요)\n const isComposingRef = useRef(false);\n // input 요소 참조\n const internalRef = useRef(null);\n\n // 외부 ref와 내부 ref를 연결\n useImperativeHandle(ref, () => internalRef.current as HTMLInputElement);\n\n // 내부 로컬 값 (IME 조합 중에도 화면에 표시됨) - text input에만 사용\n const [localValue, setLocalValue] = useState(\n (value as string) ?? (defaultValue as string) ?? ''\n );\n\n // 외부 value prop이 변경되면 로컬 값도 동기화 (text input에만 적용)\n // 단, 사용자가 입력 중(포커스 상태)이면 동기화 건너뜀 (debounce 대기 중 stale value 플리커 방지)\n useEffect(() => {\n if (!isCheckableType && !isComposingRef.current && value !== undefined) {\n const isFocused = internalRef.current && document.activeElement === internalRef.current;\n if (isFocused) {\n return;\n }\n setLocalValue(value as string);\n }\n }, [value, isCheckableType]);\n\n const handleCompositionStart = useCallback(() => {\n isComposingRef.current = true;\n }, []);\n\n const handleCompositionEnd = useCallback(\n (e: React.CompositionEvent) => {\n isComposingRef.current = false;\n // 조합 완료 후 onChange 이벤트 발생\n if (onChange) {\n // 현재 input의 실제 값을 사용\n const currentValue = (e.target as HTMLInputElement).value;\n setLocalValue(currentValue);\n\n // 새로운 ChangeEvent 생성\n const changeEvent = new Event('change', { bubbles: true }) as unknown as React.ChangeEvent;\n Object.defineProperty(changeEvent, 'target', {\n writable: false,\n value: { value: currentValue },\n });\n Object.defineProperty(changeEvent, 'currentTarget', {\n writable: false,\n value: { value: currentValue },\n });\n\n onChange(changeEvent);\n }\n },\n [onChange]\n );\n\n const handleChange = useCallback(\n (e: React.ChangeEvent) => {\n const newValue = e.target.value;\n // 항상 로컬 값은 업데이트 (화면에 입력이 보이도록)\n setLocalValue(newValue);\n\n // IME 조합 중이면 외부 onChange를 호출하지 않음\n if (isComposingRef.current) {\n return;\n }\n if (onChange) {\n onChange(e);\n }\n },\n [onChange]\n );\n\n const handleKeyPress = useCallback(\n (e: React.KeyboardEvent) => {\n // IME 조합 중이면 keypress 무시 (Enter 등)\n if (isComposingRef.current) {\n return;\n }\n if (onKeyPress) {\n onKeyPress(e);\n }\n },\n [onKeyPress]\n );\n\n // HTML 표준 속성이 아닌 것들을 필터링 (템플릿 엔진 내부 속성)\n const { loadingactions, formdata, ...validProps } = props as any;\n\n // radio/checkbox: checked 속성 사용\n // text input: value 속성 사용 (IME 처리 포함)\n if (isCheckableType) {\n return (\n \n );\n }\n\n // text input: controlled/uncontrolled 구분\n const inputProps = value !== undefined\n ? { value: localValue }\n : { defaultValue };\n\n return (\n \n );\n});\n\n// displayName 설정 (React DevTools에서 컴포넌트 이름 표시)\nInput.displayName = 'Input';","// e2e:allow basic Textarea 디폴트 시맨틱(.textarea) 머지 — 외형만 변경, 동작 무변. 다음 사이클에 다른 composite 와 함께 E2E spec 일괄 작성 예정.\nimport React, { useRef, useCallback, useState, useEffect } from 'react';\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes {\n label?: string;\n error?: string;\n}\n\n/**\n * 기본 텍스트 영역 컴포넌트\n *\n * IME(한글 등) 조합 중에는 외부 onChange 이벤트를 발생시키지 않습니다.\n * 내부 로컬 상태를 사용하여 입력을 처리하고, 조합이 완료되면 외부에 알립니다.\n */\nexport const Textarea: React.FC = ({\n label,\n error,\n className = '',\n onChange,\n value,\n defaultValue,\n ...props\n}) => {\n // IME 조합 중인지 추적\n const isComposingRef = useRef(false);\n // textarea 요소 참조\n const textareaRef = useRef(null);\n\n // 내부 로컬 값 (IME 조합 중에도 화면에 표시됨)\n const [localValue, setLocalValue] = useState(\n (value as string) ?? (defaultValue as string) ?? ''\n );\n\n // 외부 value prop이 변경되면 로컬 값도 동기화\n useEffect(() => {\n if (!isComposingRef.current && value !== undefined) {\n setLocalValue(value as string);\n }\n }, [value]);\n\n const handleCompositionStart = useCallback(() => {\n isComposingRef.current = true;\n }, []);\n\n const handleCompositionEnd = useCallback(\n (e: React.CompositionEvent) => {\n isComposingRef.current = false;\n // 조합 완료 후 onChange 이벤트 발생\n if (onChange) {\n // 현재 textarea의 실제 값을 사용\n const currentValue = (e.target as HTMLTextAreaElement).value;\n setLocalValue(currentValue);\n\n // 새로운 ChangeEvent 생성\n const changeEvent = new Event('change', { bubbles: true }) as unknown as React.ChangeEvent;\n Object.defineProperty(changeEvent, 'target', {\n writable: false,\n value: { value: currentValue },\n });\n Object.defineProperty(changeEvent, 'currentTarget', {\n writable: false,\n value: { value: currentValue },\n });\n\n onChange(changeEvent);\n }\n },\n [onChange]\n );\n\n const handleChange = useCallback(\n (e: React.ChangeEvent) => {\n const newValue = e.target.value;\n // 항상 로컬 값은 업데이트 (화면에 입력이 보이도록)\n setLocalValue(newValue);\n\n // IME 조합 중이면 외부 onChange를 호출하지 않음\n if (isComposingRef.current) {\n return;\n }\n if (onChange) {\n onChange(e);\n }\n },\n [onChange]\n );\n\n // HTML 표준 속성이 아닌 것들을 필터링 (템플릿 엔진 내부 속성)\n const { loadingactions, formdata, ...validProps } = props as any;\n\n // controlled/uncontrolled 구분\n const textareaValueProps = value !== undefined\n ? { value: localValue }\n : { defaultValue };\n\n // .textarea 시맨틱(admin main.css)을 디폴트로 머지 → 호출처가 className 미지정해도 표준 외형\n // 호출처가 이미 'textarea' 토큰을 명시한 경우 중복 prepend 방지.\n const textareaTokens = (className ?? '').split(/\\s+/).filter(Boolean);\n const mergedClassName = textareaTokens.includes('textarea')\n ? (className ?? '')\n : ['textarea', className].filter(Boolean).join(' ');\n\n return (\n \n );\n};\n","import React from 'react';\n\nexport interface LabelProps extends React.LabelHTMLAttributes {}\n\n/**\n * 기본 레이블 컴포넌트\n */\nexport const Label: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface DivProps extends React.HTMLAttributes {\n ref?: React.Ref;\n}\n\n/**\n * 기본 div 컴포넌트\n */\nexport const Div = React.forwardRef(({\n children,\n className = '',\n ...props\n}, ref) => {\n return (\n \n {children}\n \n );\n});\n","import React from 'react';\n\nexport interface SpanProps extends React.HTMLAttributes {}\n\n/**\n * 기본 span 컴포넌트\n */\nexport const Span: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface PProps extends React.HTMLAttributes {}\n\n/**\n * 기본 p(단락) 컴포넌트\n */\nexport const P: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n

\n );\n};\n","import React from 'react';\n\nexport interface ImgProps extends React.ImgHTMLAttributes {}\n\n/**\n * 기본 이미지 컴포넌트\n */\nexport const Img: React.FC = ({\n className = '',\n alt = '',\n ...props\n}) => {\n return (\n \n );\n};\n","import React from 'react';\n\nexport interface H1Props extends React.HTMLAttributes {}\n\n/**\n * 기본 h1 제목 컴포넌트\n */\nexport const H1: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface H2Props extends React.HTMLAttributes {}\n\n/**\n * 기본 h2 제목 컴포넌트\n */\nexport const H2: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface H3Props extends React.HTMLAttributes {}\n\n/**\n * 기본 h3 제목 컴포넌트\n */\nexport const H3: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface H4Props extends React.HTMLAttributes {}\n\n/**\n * 기본 h4 제목 컴포넌트\n */\nexport const H4: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface UlProps extends React.HTMLAttributes {}\n\n/**\n * 기본 ul(순서없는 목록) 컴포넌트\n */\nexport const Ul: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface OlProps extends React.HTMLAttributes {}\n\n/**\n * 기본 ol(순서있는 목록) 컴포넌트\n */\nexport const Ol: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface LiProps extends React.LiHTMLAttributes {}\n\n/**\n * 기본 li(목록 항목) 컴포넌트\n */\nexport const Li: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface AProps extends React.AnchorHTMLAttributes {}\n\n/**\n * 기본 a(링크) 컴포넌트\n */\nexport const A: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface FormProps extends React.FormHTMLAttributes {}\n\n/**\n * 기본 form 컴포넌트\n */\nexport const Form: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface SvgProps extends React.SVGAttributes {}\n\n/**\n * 기본 svg 컴포넌트\n */\nexport const Svg: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","// e2e:allow편집기 passthrough 결함#1 수정(커스텀 드롭다운 루트 data-editor-* spread). 라이브 검증은 Chrome MCP T1~T7 매트릭스(에디터 추가/선택/저장 200/reload/게스트 사용자화면)로 수행, 단위 회귀는 Select.test.tsx passthrough describe.\nimport React, { useMemo, useState, useRef, useEffect, useCallback } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Div } from './Div';\nimport { Button } from './Button';\nimport { Span } from './Span';\nimport { Svg } from './Svg';\nimport { Input } from './Input';\n\n// Logger 설정 (G7Core 초기화 전에도 동작하도록 폴백 포함)\nconst logger = ((window as any).G7Core?.createLogger?.('Comp:Select')) ?? {\n log: (...args: unknown[]) => console.log('[Comp:Select]', ...args),\n warn: (...args: unknown[]) => console.warn('[Comp:Select]', ...args),\n error: (...args: unknown[]) => console.error('[Comp:Select]', ...args),\n};\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n}\n\nexport interface SelectProps extends Omit, 'onChange'> {\n label?: string;\n error?: string;\n options?: SelectOption[] | string[];\n onChange?: (e: React.ChangeEvent | { target: { value: string | number } }) => void;\n /** 드롭다운 내 검색 input 활성화 (engine-v1.40.0+) */\n searchable?: boolean;\n /** 검색 input placeholder */\n searchPlaceholder?: string;\n /**\n * 레이아웃 편집기 주입 속성 (편집 모드 전용). Select 는 커스텀 드롭다운 루트에\n * 개별 data-editor-* 키를 spread 해야 선택/편집이 닿는다(커스텀 루트\n * passthrough). basic 컴포넌트라 `{...props}` 로 DOM 표준 속성(id 등)도 함께 흐른다.\n */\n editorAttrs?: Record;\n}\n\n/**\n * 로케일 코드를 사람이 읽을 수 있는 이름으로 변환\n */\nfunction getLocaleName(locale: string): string {\n const fromAppConfig = (window as any).G7Core?.state?.get?.('_global.appConfig.localeNames')?.[locale];\n if (fromAppConfig) {\n return fromAppConfig;\n }\n const fallback: Record = {\n ko: '한국어',\n en: 'English',\n ja: '日本語',\n zh: '中文',\n es: 'Español',\n fr: 'Français',\n de: 'Deutsch',\n };\n return fallback[locale] || locale;\n}\n\n/**\n * 커스텀 Select 컴포넌트\n *\n * options prop을 사용하여 드롭다운 메뉴를 생성합니다.\n * 둥근 모서리, 그림자, 체크마크가 있는 커스텀 스타일을 지원합니다.\n */\nexport const Select: React.FC = ({\n children,\n label,\n error,\n options,\n className = '',\n value,\n onChange,\n disabled,\n searchable = false,\n searchPlaceholder,\n editorAttrs,\n ...props\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const [searchTerm, setSearchTerm] = useState('');\n const [dropdownPos, setDropdownPos] = useState<{ top?: number; bottom?: number; left: number; width: number } | null>(null);\n const containerRef = useRef(null);\n const buttonRef = useRef(null);\n const searchInputRef = useRef(null);\n const dropdownRef = useRef(null);\n\n // options를 SelectOption[] 형식으로 정규화\n const normalizedOptions = useMemo((): SelectOption[] | null => {\n if (!options) return null;\n\n // 배열이 아닌 경우 (바인딩 에러 또는 잘못된 prop)\n if (!Array.isArray(options)) {\n logger.warn('options prop is not an array:', options);\n return null;\n }\n\n // 빈 배열인 경우\n if (options.length === 0) return [];\n\n // string[] 배열인 경우\n if (typeof options[0] === 'string') {\n return (options as string[]).map((locale): SelectOption => ({\n value: locale,\n label: getLocaleName(locale),\n }));\n }\n\n // SelectOption[] 배열인 경우 (기존 동작)\n return options as SelectOption[];\n }, [options]);\n\n // 현재 선택된 옵션의 라벨 가져오기\n const selectedLabel = useMemo(() => {\n if (!normalizedOptions) return '';\n const selected = normalizedOptions.find(opt => String(opt.value) === String(value));\n return selected?.label || '';\n }, [normalizedOptions, value]);\n\n // searchable 모드에서 검색어로 필터링된 옵션\n const visibleOptions = useMemo((): SelectOption[] | null => {\n if (!normalizedOptions) return null;\n if (!searchable || searchTerm.trim() === '') return normalizedOptions;\n const needle = searchTerm.trim().toLowerCase();\n return normalizedOptions.filter(opt =>\n opt.label.toLowerCase().includes(needle) ||\n String(opt.value).toLowerCase().includes(needle)\n );\n }, [normalizedOptions, searchable, searchTerm]);\n\n // 드롭다운 열릴 때 검색어 초기화 및 input 포커스\n useEffect(() => {\n if (isOpen && searchable) {\n setSearchTerm('');\n // 다음 tick에 포커스 (DOM 렌더 이후)\n const timer = setTimeout(() => searchInputRef.current?.focus(), 0);\n return () => clearTimeout(timer);\n }\n if (!isOpen) {\n setSearchTerm('');\n }\n }, [isOpen, searchable]);\n\n /**\n * 드롭다운 위치 계산 (버튼 기준 fixed positioning)\n * Modal 등 overflow:hidden 컨테이너 내부에서도 정상 표시\n */\n const updateDropdownPos = useCallback(() => {\n if (!buttonRef.current) return;\n const rect = buttonRef.current.getBoundingClientRect();\n const spaceBelow = window.innerHeight - rect.bottom;\n const dropdownMaxH = 280; // max-h-60(240px) + search(~40px)\n // 아래 공간 부족 시 위로 열기\n const openUpward = spaceBelow < dropdownMaxH && rect.top > spaceBelow;\n if (openUpward) {\n setDropdownPos({\n bottom: window.innerHeight - rect.top + 4,\n left: rect.left,\n width: rect.width,\n });\n } else {\n setDropdownPos({\n top: rect.bottom + 4,\n left: rect.left,\n width: rect.width,\n });\n }\n }, []);\n\n // 드롭다운 열릴 때 위치 계산 + 스크롤/리사이즈 추적\n useEffect(() => {\n if (!isOpen) {\n setDropdownPos(null);\n return;\n }\n updateDropdownPos();\n window.addEventListener('scroll', updateDropdownPos, true);\n window.addEventListener('resize', updateDropdownPos);\n return () => {\n window.removeEventListener('scroll', updateDropdownPos, true);\n window.removeEventListener('resize', updateDropdownPos);\n };\n }, [isOpen, updateDropdownPos]);\n\n // 외부 클릭 시 드롭다운 닫기 (Portal 영역 포함)\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n const target = event.target as Node;\n if (\n containerRef.current && !containerRef.current.contains(target) &&\n (!dropdownRef.current || !dropdownRef.current.contains(target))\n ) {\n setIsOpen(false);\n }\n };\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside);\n }\n\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isOpen]);\n\n // ESC 키로 드롭다운 닫기\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && isOpen) {\n setIsOpen(false);\n buttonRef.current?.focus();\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [isOpen]);\n\n const handleToggle = () => {\n if (!disabled) {\n setIsOpen(!isOpen);\n }\n };\n\n const handleSelect = (optionValue: string | number) => {\n if (onChange) {\n // ActionDispatcher가 이벤트를 인식할 수 있도록 preventDefault 메서드 포함\n const syntheticEvent = {\n target: { value: optionValue },\n preventDefault: () => {},\n stopPropagation: () => {},\n type: 'change',\n };\n onChange(syntheticEvent as any);\n }\n setIsOpen(false);\n buttonRef.current?.focus();\n };\n\n // options가 없으면 기본 select 사용 (children 지원)\n // .select 시맨틱(admin main.css)을 디폴트로 머지 → 호출처가 className 미지정해도 표준 외형\n // 호출처가 이미 'select' 토큰을 명시한 경우 중복 prepend 방지.\n if (!normalizedOptions) {\n const tokens = (className ?? '').split(/\\s+/).filter(Boolean);\n const mergedClassName = tokens.includes('select')\n ? (className ?? '')\n : ['select', className].filter(Boolean).join(' ');\n return (\n }\n disabled={disabled}\n {...editorAttrs}\n {...props}\n >\n {children}\n \n );\n }\n\n // 기본 스타일 (className이 없을 때 적용)\n // variant 접두사가 붙은 유틸(disabled:bg-, dark:bg-, hover:bg- 등)은 베이스 외형이 아니므로\n // hasCustomStyle/hasTextColor 판정에서 제외한다. 베이스 토큰만으로 커스텀 외형 여부를 판단해야\n // 호출처가 disabled:bg-gray-100 만 추가했을 때 기본 크기 클래스(w-full px-4 py-2.5)가 유실되지 않는다.\n const baseTokens = (className ?? '')\n .split(/\\s+/)\n .filter((t) => t && !t.includes(':')) // variant 접두사(`disabled:`, `dark:`, `hover:` 등) 토큰 제외\n .join(' ');\n const hasCustomStyle = baseTokens.includes('bg-');\n // 커스텀 스타일에 텍스트 색상이 없으면 기본 텍스트 색상 보충\n const hasTextColor = /text-(gray|red|blue|green|yellow|white|black|indigo|purple|pink|orange|amber|emerald|teal|cyan|slate)-\\d+|text-white|text-black/.test(baseTokens);\n const baseButtonClass = hasCustomStyle\n ? `${className}${hasTextColor ? '' : ' text-gray-700 dark:text-gray-200'}`\n : `w-full px-4 py-2.5 bg-gray-100 dark:bg-gray-700 border-0 rounded-xl text-sm text-gray-700 dark:text-gray-200 font-medium focus:ring-2 focus:ring-blue-500 focus:outline-none ${className}`;\n\n // props 는 SelectHTMLAttributes 기반이라 Div(HTMLDivElement) 에 직접 spread 시 타입 불일치.\n // 런타임 동작(편집기 data-editor-* / id 등 DOM 표준 속성 passthrough)은 동일하므로\n // DOM-safe 레코드로 캐스팅해 커스텀 드롭다운 루트에 전달한다.\n const rootDomProps = { ...editorAttrs, ...props } as Record;\n\n return (\n
\n \n {selectedLabel || '\\u00A0'}\n \n \n \n \n\n {isOpen && dropdownPos && createPortal(\n \n {searchable && (\n
\n ) => setSearchTerm(e.target.value)}\n placeholder={searchPlaceholder ?? 'Search...'}\n className=\"w-full px-3 py-2 bg-gray-100 dark:bg-gray-700 border-0 rounded-lg text-sm text-gray-700 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none\"\n role=\"searchbox\"\n aria-label={searchPlaceholder ?? 'Search'}\n />\n
\n )}\n
\n {visibleOptions && visibleOptions.length === 0 && (\n
\n {searchTerm ? 'No results' : ''}\n
\n )}\n {(visibleOptions ?? []).map((option) => {\n const isSelected = String(option.value) === String(value);\n return (\n !option.disabled && handleSelect(option.value)}\n disabled={option.disabled}\n className={`w-full px-4 py-3 text-left text-sm flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${\n isSelected ? 'text-blue-600 dark:text-blue-400 font-medium' : 'text-gray-700 dark:text-gray-200'\n } ${option.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}\n role=\"option\"\n aria-selected={isSelected}\n >\n {option.label}\n {isSelected && (\n \n \n \n )}\n \n );\n })}\n
\n
,\n document.body\n )}\n \n );\n};\n","import React from 'react';\n\nexport interface OptionProps extends React.OptionHTMLAttributes {}\n\n/**\n * 기본 option 컴포넌트 (Select 내부에서 사용)\n */\nexport const Option: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface OptgroupProps extends React.OptgroupHTMLAttributes {}\n\n/**\n * 기본 optgroup 컴포넌트 (Select 내부에서 옵션 그룹화)\n */\nexport const Optgroup: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React, { forwardRef, useEffect, useRef } from 'react';\n\nexport interface CheckboxProps extends React.InputHTMLAttributes {\n label?: string;\n /**\n * indeterminate 상태 (부분 선택 상태)\n *\n * 부모-자식 체크박스 연동에서 일부 자식만 선택되었을 때 사용합니다.\n * HTML checkbox의 indeterminate 속성을 JavaScript로 설정합니다.\n */\n indeterminate?: boolean;\n}\n\n/**\n * 기본 체크박스 컴포넌트\n *\n * forwardRef를 사용하여 ref 전달을 지원합니다.\n * indeterminate prop을 통해 부분 선택 상태를 표시할 수 있습니다.\n */\nexport const Checkbox = forwardRef(\n ({ label, className = '', indeterminate = false, ...props }, ref) => {\n const internalRef = useRef(null);\n\n // 외부 ref와 내부 ref를 병합\n const combinedRef = (node: HTMLInputElement | null) => {\n internalRef.current = node;\n if (typeof ref === 'function') {\n ref(node);\n } else if (ref) {\n ref.current = node;\n }\n };\n\n // indeterminate 상태 설정 (DOM 속성이므로 JavaScript로 설정해야 함)\n useEffect(() => {\n if (internalRef.current) {\n internalRef.current.indeterminate = indeterminate;\n }\n }, [indeterminate]);\n\n return (\n \n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n","import React from 'react';\n\nexport interface TableProps extends React.TableHTMLAttributes {}\n\n/**\n * 기본 table 컴포넌트\n */\nexport const Table: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface TheadProps extends React.HTMLAttributes {}\n\n/**\n * 기본 thead 컴포넌트\n */\nexport const Thead: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface TbodyProps extends React.HTMLAttributes {}\n\n/**\n * 기본 tbody 컴포넌트\n */\nexport const Tbody: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface TfootProps extends React.HTMLAttributes {}\n\n/**\n * 기본 tfoot 컴포넌트\n */\nexport const Tfoot: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface TrProps extends React.HTMLAttributes {}\n\n/**\n * 기본 tr(테이블 행) 컴포넌트\n */\nexport const Tr: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface ThProps extends React.ThHTMLAttributes {}\n\n/**\n * 기본 th(테이블 헤더 셀) 컴포넌트\n */\nexport const Th: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface TdProps extends React.TdHTMLAttributes {}\n\n/**\n * 기본 td(테이블 데이터 셀) 컴포넌트\n */\nexport const Td: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface NavProps extends React.HTMLAttributes {}\n\n/**\n * 기본 nav 컴포넌트\n */\nexport const Nav: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface SectionProps extends React.HTMLAttributes {}\n\n/**\n * 기본 section 컴포넌트\n */\nexport const Section: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\nimport { IconName, IconStyle, IconSize } from './IconTypes';\n\nexport interface IconProps extends Omit, 'style'> {\n /**\n * 아이콘 이름 (Font Awesome 클래스명 또는 IconName enum)\n *\n * @example\n * // 문자열로 직접 지정\n * \n *\n * // enum 사용 (타입 안전)\n * \n */\n name: string | IconName;\n\n /**\n * 아이콘 스타일 (Font Awesome 5/6)\n *\n * - solid: fas (기본값)\n * - regular: far\n * - light: fal\n * - duotone: fad\n * - brands: fab\n */\n iconStyle?: IconStyle;\n\n /**\n * CSS 스타일 객체 (HTML style 속성)\n */\n style?: React.CSSProperties;\n\n /**\n * 아이콘 크기\n *\n * @default 'md'\n */\n size?: IconSize;\n\n /**\n * 색상 (Tailwind 클래스 또는 CSS 색상)\n */\n color?: string;\n\n /**\n * 회전 애니메이션 활성화\n */\n spin?: boolean;\n\n /**\n * 펄스 애니메이션 활성화 (8단계 회전)\n */\n pulse?: boolean;\n\n /**\n * 고정 너비 (아이콘 정렬 시 유용)\n */\n fixedWidth?: boolean;\n\n /**\n * 접근성 레이블 (자동 생성 가능)\n */\n ariaLabel?: string;\n}\n\n/**\n * Font Awesome 아이콘 컴포넌트\n *\n * Font Awesome 5/6 버전과 호환되며 다양한 props를 지원합니다.\n *\n * @example\n * // 기본 사용\n * \n *\n * // enum 사용 (타입 안전)\n * \n *\n * // 스타일 및 크기 지정\n * \n *\n * // 애니메이션\n * \n * \n *\n * // 색상 지정\n * \n *\n * // 접근성\n * \n */\nexport const Icon: React.FC = ({\n name,\n iconStyle = 'solid',\n size,\n color,\n spin = false,\n pulse = false,\n fixedWidth = false,\n ariaLabel,\n className = '',\n style,\n ...props\n}) => {\n // Font Awesome 스타일 클래스 매핑\n const styleClassMap: Record = {\n solid: 'fas',\n regular: 'far',\n light: 'fal',\n duotone: 'fad',\n brands: 'fab',\n };\n\n // 스타일 접두사를 IconStyle로 변환하는 매핑\n const stylePrefixMap: Record = {\n 'fa-solid': 'solid',\n 'fa-regular': 'regular',\n 'fa-light': 'light',\n 'fa-duotone': 'duotone',\n 'fa-brands': 'brands',\n };\n\n const nameStr = typeof name === 'string' ? name : String(name);\n\n // \"fa-regular fa-pen-to-square\" 형식 파싱\n let resolvedStyle = iconStyle;\n let iconName = nameStr;\n\n // 스타일 접두사가 포함된 경우 파싱 (예: \"fa-regular fa-pen-to-square\")\n for (const [prefix, styleValue] of Object.entries(stylePrefixMap)) {\n if (nameStr.startsWith(prefix + ' ')) {\n resolvedStyle = styleValue;\n iconName = nameStr.substring(prefix.length + 1); // 스타일 접두사와 공백 제거\n break;\n }\n }\n\n // 아이콘 이름에서 'fa-' 접두사 제거 (이미 있으면)\n iconName = iconName.replace(/^fa-/, '');\n\n // 클래스 조합\n const classes = [\n styleClassMap[resolvedStyle],\n `fa-${iconName}`,\n size && `fa-${size}`,\n spin && 'fa-spin',\n pulse && 'fa-pulse',\n fixedWidth && 'fa-fw',\n color,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n // 접근성: ariaLabel이 없으면 name에서 생성\n const accessibilityLabel = ariaLabel || iconName.replace(/-/g, ' ');\n\n return (\n \n );\n};\n","import React from 'react';\nimport { Icon } from './Icon';\nimport { IconSize } from './IconTypes';\n\n/**\n * UnifiedIcon 크기 타입\n */\nexport type UnifiedIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * UnifiedIcon Props\n */\nexport interface UnifiedIconProps {\n /**\n * 아이콘 지정자\n *\n * @example\n * // Font Awesome (기본)\n * \"fa:cart-shopping\"\n * \"fa-solid fa-cart-shopping\"\n * \"cart-shopping\" // 접두사 없으면 FA 기본\n *\n * // 외부 SVG 파일\n * \"svg:/modules/my-module/assets/icon.svg\"\n *\n * // 이미지 파일\n * \"img:/images/custom-icon.png\"\n */\n icon: string;\n\n /**\n * 아이콘 크기\n * - xs: 12px (w-3 h-3)\n * - sm: 16px (w-4 h-4)\n * - md: 20px (w-5 h-5) - 기본값\n * - lg: 24px (w-6 h-6)\n * - xl: 32px (w-8 h-8)\n *\n * @default 'md'\n */\n size?: UnifiedIconSize;\n\n /**\n * 추가 CSS 클래스\n */\n className?: string;\n\n /**\n * 색상 (Tailwind 클래스)\n *\n * @example\n * \"text-blue-500\"\n * \"text-slate-600 dark:text-slate-300\"\n */\n color?: string;\n\n /**\n * 접근성 레이블\n */\n ariaLabel?: string;\n}\n\n/**\n * 크기별 Tailwind 클래스 매핑\n */\nconst sizeClassMap: Record = {\n xs: 'w-3 h-3', // 12px\n sm: 'w-4 h-4', // 16px\n md: 'w-5 h-5', // 20px\n lg: 'w-6 h-6', // 24px\n xl: 'w-8 h-8', // 32px\n};\n\n/**\n * Icon 컴포넌트용 크기 매핑 (Font Awesome size prop)\n */\nconst iconSizeMap: Record = {\n xs: 'xs',\n sm: 'sm',\n md: undefined, // 기본값\n lg: 'lg',\n xl: '2x',\n};\n\n/**\n * UnifiedIcon 컴포넌트\n *\n * 다양한 아이콘 소스(Font Awesome, SVG, 이미지)를 통합하여 렌더링하는 컴포넌트입니다.\n *\n * @example\n * // Font Awesome 아이콘 (기본)\n * \n * // 접두사 없으면 FA 기본\n *\n * // 외부 SVG 파일\n * \n *\n * // 이미지 파일\n * \n */\nexport const UnifiedIcon: React.FC = ({\n icon,\n size = 'md',\n className = '',\n color,\n ariaLabel,\n}) => {\n // 타입 파싱: \"type:value\" 형식 분리\n const colonIndex = icon.indexOf(':');\n\n // \"fa-solid fa-xxx\" 또는 \"fas fa-xxx\" 형식인 경우 Font Awesome으로 처리\n const isFontAwesomeClass =\n icon.startsWith('fa-') ||\n icon.startsWith('fas ') ||\n icon.startsWith('far ') ||\n icon.startsWith('fab ') ||\n icon.startsWith('fal ') ||\n icon.startsWith('fad ');\n\n let type: string;\n let name: string;\n\n if (isFontAwesomeClass) {\n // Font Awesome 클래스 형식\n type = 'fa';\n name = icon;\n } else if (colonIndex > 0) {\n // \"type:name\" 형식\n type = icon.substring(0, colonIndex);\n name = icon.substring(colonIndex + 1);\n } else {\n // 접두사 없음 = Font Awesome 기본\n type = 'fa';\n name = icon;\n }\n\n const sizeClass = sizeClassMap[size];\n const colorClass = color || '';\n\n switch (type) {\n case 'fa':\n // Font Awesome: Icon 컴포넌트 위임\n return (\n \n );\n\n case 'svg':\n // 외부 SVG 파일 (img 태그로 렌더링)\n return (\n \n );\n\n case 'img':\n // 이미지 파일\n return (\n \n );\n\n default:\n // 기본: Font Awesome\n return (\n \n );\n }\n};\n","import React from 'react';\n\nexport interface CodeProps extends React.HTMLAttributes {}\n\n/**\n * 기본 code 컴포넌트\n *\n * 인라인 코드 또는 코드 스니펫을 표시하기 위한 기본 컴포넌트입니다.\n * HTML 태그를 래핑합니다.\n */\nexport const Code: React.FC = ({\n children,\n className = '',\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\n\nexport interface PreProps extends React.HTMLAttributes {}\n\n/**\n * 기본 pre 컴포넌트\n *\n * 서식이 지정된 텍스트를 표시하기 위한 기본 컴포넌트입니다.\n * HTML 
 태그를 래핑합니다.\n */\nexport const Pre: React.FC = ({\n  children,\n  className = '',\n  ...props\n}) => {\n  return (\n    \n      {children}\n
\n );\n};\n","import React from 'react';\n\nexport interface FragmentProps {\n children?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n}\n\n/**\n * Fragment 기본 컴포넌트\n *\n * React.Fragment와 유사하게 DOM 요소를 추가하지 않고 children만 렌더링합니다.\n * iterator와 함께 사용하여 불필요한 wrapper div 없이 반복 렌더링할 때 유용합니다.\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"type\": \"basic\",\n * \"name\": \"Fragment\",\n * \"iterator\": {\n * \"source\": \"{{items}}\",\n * \"item\": \"item\"\n * },\n * \"children\": [\n * {\n * \"type\": \"basic\",\n * \"name\": \"Button\",\n * \"text\": \"{{item.label}}\"\n * }\n * ]\n * }\n */\nexport const Fragment: React.FC = ({ children }) => {\n return <>{children};\n};\n","import React from 'react';\n\nexport interface HrProps extends React.HTMLAttributes {}\n\n/**\n * 기본 hr(수평선) 컴포넌트\n */\nexport const Hr: React.FC = ({\n className = '',\n ...props\n}) => {\n return (\n \n );\n};\n","import React from 'react';\n\nexport interface IProps extends React.HTMLAttributes {\n className?: string;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n}\n\n/**\n * I 기본 컴포넌트\n *\n * HTML 태그를 래핑한 기본 컴포넌트입니다.\n * 주로 아이콘 폰트 (FontAwesome 등)와 함께 사용됩니다.\n *\n * @example\n * ```tsx\n * \n * \n * ```\n */\nexport const I: React.FC = ({ className = '', children, style, ...props }) => {\n return (\n \n {children}\n \n );\n};","/**\n * Font Awesome 아이콘 스타일\n */\nexport type IconStyle = 'solid' | 'regular' | 'light' | 'duotone' | 'brands';\n\n/**\n * Font Awesome 아이콘 크기\n */\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2x' | '3x' | '4x' | '5x';\n\n/**\n * 자주 사용되는 Font Awesome 아이콘 이름\n *\n * @example\n * // 사용 예시\n * \n * \n * \n */\nexport enum IconName {\n // 사용자 및 계정\n User = 'fa-user',\n Users = 'fa-users',\n UserCircle = 'fa-user-circle',\n UserPlus = 'fa-user-plus',\n UserMinus = 'fa-user-minus',\n UserShield = 'fa-user-shield',\n\n // 액션 아이콘\n Search = 'fa-search',\n Edit = 'fa-edit',\n Pencil = 'fa-pencil-alt',\n Trash = 'fa-trash',\n Save = 'fa-save',\n Plus = 'fa-plus',\n Minus = 'fa-minus',\n Check = 'fa-check',\n Times = 'fa-times',\n Download = 'fa-download',\n Upload = 'fa-upload',\n Copy = 'fa-copy',\n ExternalLink = 'fa-external-link-alt',\n\n // 네비게이션\n Home = 'fa-home',\n CaretRight = 'fa-caret-right',\n CaretDown = 'fa-caret-down',\n ChevronLeft = 'fa-chevron-left',\n ChevronRight = 'fa-chevron-right',\n ChevronUp = 'fa-chevron-up',\n ChevronDown = 'fa-chevron-down',\n AngleLeft = 'fa-angle-left',\n AngleRight = 'fa-angle-right',\n AngleUp = 'fa-angle-up',\n AngleDown = 'fa-angle-down',\n ArrowUp = 'fa-arrow-up',\n ArrowDown = 'fa-arrow-down',\n ArrowLeft = 'fa-arrow-left',\n ArrowRight = 'fa-arrow-right',\n Bars = 'fa-bars',\n EllipsisVertical = 'fa-ellipsis-v',\n EllipsisHorizontal = 'fa-ellipsis-h',\n\n // 상태 아이콘\n CheckCircle = 'fa-check-circle',\n TimesCircle = 'fa-times-circle',\n ExclamationCircle = 'fa-exclamation-circle',\n ExclamationTriangle = 'fa-exclamation-triangle',\n InfoCircle = 'fa-info-circle',\n QuestionCircle = 'fa-question-circle',\n XCircle = 'fa-times-circle',\n\n // 이커머스\n ShoppingCart = 'fa-shopping-cart',\n ShoppingBag = 'fa-shopping-bag',\n CreditCard = 'fa-credit-card',\n Tag = 'fa-tag',\n Tags = 'fa-tags',\n\n // 파일 및 문서\n File = 'fa-file',\n FileAlt = 'fa-file-alt',\n Folder = 'fa-folder',\n FolderOpen = 'fa-folder-open',\n\n // 통신\n Envelope = 'fa-envelope',\n Phone = 'fa-phone',\n Comment = 'fa-comment',\n Comments = 'fa-comments',\n\n // 설정\n Cog = 'fa-cog',\n Cogs = 'fa-cogs',\n Settings = 'fa-cog',\n Wrench = 'fa-wrench',\n Sliders = 'fa-sliders-h',\n\n // 미디어\n Image = 'fa-image',\n Images = 'fa-images',\n Video = 'fa-video',\n Camera = 'fa-camera',\n\n // 소셜\n Heart = 'fa-heart',\n Star = 'fa-star',\n ThumbsUp = 'fa-thumbs-up',\n ThumbsDown = 'fa-thumbs-down',\n Share = 'fa-share',\n\n // 시간\n Clock = 'fa-clock',\n Calendar = 'fa-calendar',\n CalendarAlt = 'fa-calendar-alt',\n\n // 기타\n Lock = 'fa-lock',\n Unlock = 'fa-unlock',\n Eye = 'fa-eye',\n EyeSlash = 'fa-eye-slash',\n Bell = 'fa-bell',\n Flag = 'fa-flag',\n Map = 'fa-map',\n MapMarker = 'fa-map-marker-alt',\n Globe = 'fa-globe',\n Link = 'fa-link',\n Unlink = 'fa-unlink',\n Sun = 'fa-sun',\n Moon = 'fa-moon',\n\n // 차트 및 통계\n ChartBar = 'fa-chart-bar',\n ChartLine = 'fa-chart-line',\n ChartPie = 'fa-chart-pie',\n ChartArea = 'fa-chart-area',\n\n // 스피너 (로딩)\n Spinner = 'fa-spinner',\n CircleNotch = 'fa-circle-notch',\n\n // 배지 아이콘\n CheckBadge = 'fa-badge-check',\n\n // 확장 시스템 (모듈/플러그인/템플릿)\n Cube = 'fa-cube',\n Cubes = 'fa-cubes',\n Plug = 'fa-plug',\n PuzzlePiece = 'fa-puzzle-piece',\n Palette = 'fa-palette',\n}\n\n/**\n * 문자열 아이콘 이름을 IconName enum으로 매핑합니다.\n * JSON 레이아웃에서 문자열로 아이콘 이름을 지정할 때 사용합니다.\n */\nexport const iconNameMap: Record = {\n // 사용자 및 계정\n 'user': IconName.User,\n 'users': IconName.Users,\n 'user-circle': IconName.UserCircle,\n 'user-plus': IconName.UserPlus,\n 'user-minus': IconName.UserMinus,\n 'user-shield': IconName.UserShield,\n\n // 액션 아이콘\n 'search': IconName.Search,\n 'edit': IconName.Edit,\n 'pencil': IconName.Pencil,\n 'trash': IconName.Trash,\n 'save': IconName.Save,\n 'plus': IconName.Plus,\n 'minus': IconName.Minus,\n 'check': IconName.Check,\n 'times': IconName.Times,\n 'download': IconName.Download,\n 'upload': IconName.Upload,\n 'copy': IconName.Copy,\n 'external-link': IconName.ExternalLink,\n\n // 네비게이션\n 'home': IconName.Home,\n 'caret-right': IconName.CaretRight,\n 'caret-down': IconName.CaretDown,\n 'chevron-left': IconName.ChevronLeft,\n 'chevron-right': IconName.ChevronRight,\n 'chevron-up': IconName.ChevronUp,\n 'chevron-down': IconName.ChevronDown,\n 'angle-left': IconName.AngleLeft,\n 'angle-right': IconName.AngleRight,\n 'angle-up': IconName.AngleUp,\n 'angle-down': IconName.AngleDown,\n 'arrow-up': IconName.ArrowUp,\n 'arrow-down': IconName.ArrowDown,\n 'arrow-left': IconName.ArrowLeft,\n 'arrow-right': IconName.ArrowRight,\n 'bars': IconName.Bars,\n 'ellipsis-vertical': IconName.EllipsisVertical,\n 'ellipsis-v': IconName.EllipsisVertical,\n 'ellipsis-horizontal': IconName.EllipsisHorizontal,\n 'ellipsis-h': IconName.EllipsisHorizontal,\n\n // 상태 아이콘\n 'check-circle': IconName.CheckCircle,\n 'times-circle': IconName.TimesCircle,\n 'x-circle': IconName.XCircle,\n 'exclamation-circle': IconName.ExclamationCircle,\n 'exclamation-triangle': IconName.ExclamationTriangle,\n 'info-circle': IconName.InfoCircle,\n 'question-circle': IconName.QuestionCircle,\n\n // 이커머스\n 'shopping-cart': IconName.ShoppingCart,\n 'shopping-bag': IconName.ShoppingBag,\n 'credit-card': IconName.CreditCard,\n 'tag': IconName.Tag,\n 'tags': IconName.Tags,\n\n // 파일 및 문서\n 'file': IconName.File,\n 'file-alt': IconName.FileAlt,\n 'folder': IconName.Folder,\n 'folder-open': IconName.FolderOpen,\n\n // 통신\n 'envelope': IconName.Envelope,\n 'phone': IconName.Phone,\n 'comment': IconName.Comment,\n 'comments': IconName.Comments,\n\n // 설정\n 'cog': IconName.Cog,\n 'cogs': IconName.Cogs,\n 'settings': IconName.Settings,\n 'wrench': IconName.Wrench,\n 'sliders': IconName.Sliders,\n\n // 미디어\n 'image': IconName.Image,\n 'images': IconName.Images,\n 'video': IconName.Video,\n 'camera': IconName.Camera,\n\n // 소셜\n 'heart': IconName.Heart,\n 'star': IconName.Star,\n 'thumbs-up': IconName.ThumbsUp,\n 'thumbs-down': IconName.ThumbsDown,\n 'share': IconName.Share,\n\n // 시간\n 'clock': IconName.Clock,\n 'calendar': IconName.Calendar,\n 'calendar-alt': IconName.CalendarAlt,\n\n // 기타\n 'lock': IconName.Lock,\n 'unlock': IconName.Unlock,\n 'eye': IconName.Eye,\n 'eye-slash': IconName.EyeSlash,\n 'bell': IconName.Bell,\n 'flag': IconName.Flag,\n 'map': IconName.Map,\n 'map-marker': IconName.MapMarker,\n 'globe': IconName.Globe,\n 'link': IconName.Link,\n 'unlink': IconName.Unlink,\n 'sun': IconName.Sun,\n 'moon': IconName.Moon,\n\n // 차트 및 통계\n 'chart-bar': IconName.ChartBar,\n 'chart-line': IconName.ChartLine,\n 'chart-pie': IconName.ChartPie,\n 'chart-area': IconName.ChartArea,\n\n // 스피너 (로딩)\n 'spinner': IconName.Spinner,\n 'circle-notch': IconName.CircleNotch,\n\n // 배지 아이콘\n 'check-badge': IconName.CheckBadge,\n 'badge-check': IconName.CheckBadge,\n\n // 확장 시스템 (모듈/플러그인/템플릿)\n 'cube': IconName.Cube,\n 'cubes': IconName.Cubes,\n 'plug': IconName.Plug,\n 'puzzle-piece': IconName.PuzzlePiece,\n 'palette': IconName.Palette,\n};\n","import React from 'react';\nimport { Div } from '../basic/Div';\nimport { H2 } from '../basic/H2';\nimport { P } from '../basic/P';\nimport { Img } from '../basic/Img';\nimport type { EditorAttrs } from '../../types';\n\nexport interface CardProps {\n title?: string;\n content?: string;\n imageUrl?: string;\n imageAlt?: string;\n className?: string;\n onClick?: () => void;\n style?: React.CSSProperties;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * Card 집합 컴포넌트\n *\n * 기본 컴포넌트를 조합하여 카드 UI를 구성합니다.\n * 레이아웃 JSON에서 title, content, imageUrl 등의 props만 전달하면\n * 내부적으로 Div, H2, P, Img 컴포넌트를 조합하여 완성된 카드를 렌더링합니다.\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"Card\",\n * \"props\": {\n * \"title\": \"사용자 정보\",\n * \"content\": \"홍길동 (hong@example.com)\",\n * \"imageUrl\": \"/avatar.png\"\n * }\n * }\n */\nexport const Card: React.FC = ({\n title,\n content,\n imageUrl,\n imageAlt = '',\n className = '',\n onClick,\n style,\n id,\n editorAttrs,\n}) => {\n return (\n \n {imageUrl && (\n
\n \n
\n )}\n\n
\n {title && (\n

\n {title}\n

\n )}\n\n {content && (\n

\n {content}\n

\n )}\n
\n \n );\n};\n","import React, { useState, useRef, useEffect, useCallback } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Button } from '../basic/Button';\nimport { Div } from '../basic/Div';\nimport { Span } from '../basic/Span';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport type { EditorAttrs } from '../../types';\n\nexport interface ActionMenuItem {\n id: string | number;\n label?: string;\n iconName?: IconName;\n onClick?: () => void;\n disabled?: boolean;\n variant?: 'default' | 'danger';\n /** 구분선 여부 (true면 구분선으로 렌더링) */\n divider?: boolean;\n /** 행 데이터의 필드 경로로 disabled 여부를 결정 (값이 falsy면 disabled) */\n disabledField?: string;\n /** 조건부 표시 (false면 아이템 숨김, 엔진이 표현식 평가 후 boolean 전달) */\n if?: boolean;\n}\n\nexport interface ActionMenuProps {\n items: ActionMenuItem[];\n triggerLabel?: string;\n triggerIconName?: IconName;\n position?: 'left' | 'right';\n className?: string;\n style?: React.CSSProperties;\n /**\n * 커스텀 트리거 콘텐츠\n *\n * children이 제공되면 기본 Button 트리거 대신 children을 클릭 트리거로 사용합니다.\n * 레이아웃 JSON에서 ActionMenu의 children으로 정의한 컴포넌트가 트리거가 됩니다.\n */\n children?: React.ReactNode;\n /**\n * 메뉴 아이템 클릭 시 호출되는 콜백\n * JSON 레이아웃의 actions에서 onItemClick 이벤트로 바인딩됨\n *\n * @param itemId - 클릭된 아이템의 id\n * @param item - 클릭된 아이템 전체 객체\n */\n onItemClick?: (itemId: string | number, item: ActionMenuItem) => void;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * ActionMenu 집합 컴포넌트\n *\n * 드롭다운 형태의 액션 메뉴 컴포넌트입니다.\n * 트리거 버튼과 메뉴 아이템 목록을 제공합니다.\n *\n * 기본 컴포넌트 조합: Button + Div + Span + Icon\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"ActionMenu\",\n * \"props\": {\n * \"triggerLabel\": \"작업\",\n * \"items\": [\n * {\"id\": 1, \"label\": \"수정\", \"iconName\": \"pencil\"},\n * {\"id\": 2, \"label\": \"삭제\", \"iconName\": \"trash\", \"variant\": \"danger\"}\n * ]\n * }\n * }\n */\nexport const ActionMenu: React.FC = ({\n items,\n triggerLabel = '작업',\n triggerIconName = IconName.EllipsisVertical,\n position = 'right',\n className = '',\n style,\n children,\n onItemClick,\n id,\n editorAttrs,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });\n const triggerRef = useRef(null);\n const menuRef = useRef(null);\n\n // 메뉴 위치 계산\n const updateMenuPosition = useCallback(() => {\n if (!triggerRef.current) return;\n\n const rect = triggerRef.current.getBoundingClientRect();\n const menuWidth = 224; // w-56 = 14rem = 224px\n\n let left = position === 'right' ? rect.right - menuWidth : rect.left;\n const top = rect.bottom + 8; // mt-2 = 8px\n\n // 화면 왼쪽 경계 체크\n if (left < 8) {\n left = 8;\n }\n\n // 화면 오른쪽 경계 체크\n if (left + menuWidth > window.innerWidth - 8) {\n left = window.innerWidth - menuWidth - 8;\n }\n\n setMenuPosition({ top, left });\n }, [position]);\n\n // 메뉴 열릴 때 위치 계산\n useEffect(() => {\n if (isOpen) {\n updateMenuPosition();\n }\n }, [isOpen, updateMenuPosition]);\n\n // 스크롤/리사이즈 시 메뉴 닫기\n useEffect(() => {\n if (!isOpen) return;\n\n const handleScrollOrResize = () => {\n setIsOpen(false);\n };\n\n window.addEventListener('scroll', handleScrollOrResize, true);\n window.addEventListener('resize', handleScrollOrResize);\n\n return () => {\n window.removeEventListener('scroll', handleScrollOrResize, true);\n window.removeEventListener('resize', handleScrollOrResize);\n };\n }, [isOpen]);\n\n // 외부 클릭 감지\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n const target = event.target as Node;\n const isClickInsideTrigger = triggerRef.current?.contains(target);\n const isClickInsideMenu = menuRef.current?.contains(target);\n\n if (!isClickInsideTrigger && !isClickInsideMenu) {\n setIsOpen(false);\n }\n };\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside);\n }\n\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isOpen]);\n\n const handleItemClick = (item: ActionMenuItem) => {\n if (item.disabled) return;\n\n // 1. 개별 아이템의 onClick 콜백 호출 (우선)\n if (item.onClick) {\n item.onClick();\n }\n\n // 2. 통합 onItemClick 콜백 호출 (JSON 레이아웃 actions 바인딩)\n if (onItemClick) {\n onItemClick(item.id, item);\n }\n\n setIsOpen(false);\n };\n\n // Portal로 렌더링할 드롭다운 메뉴\n const dropdownMenu = isOpen\n ? ReactDOM.createPortal(\n \n {items.filter((item) => item.if !== false).map((item) => {\n // 구분선인 경우\n if (item.divider) {\n return (\n \n );\n }\n\n const variantClasses =\n item.variant === 'danger'\n ? 'text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20'\n : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700';\n\n const disabledClasses = item.disabled\n ? 'opacity-50 cursor-not-allowed'\n : 'cursor-pointer';\n\n return (\n handleItemClick(item)}\n className={`flex items-center gap-3 px-4 py-3 transition-colors ${variantClasses} ${disabledClasses}`}\n >\n {item.iconName && (\n \n )}\n {item.label}\n \n );\n })}\n ,\n document.body\n )\n : null;\n\n return (\n
\n {/* 트리거: children이 있으면 커스텀 트리거, 없으면 기본 Button */}\n {children ? (\n }\n onClick={() => setIsOpen(!isOpen)}\n className=\"cursor-pointer\"\n >\n {children}\n
\n ) : (\n }\n onClick={() => setIsOpen(!isOpen)}\n className=\"flex items-center gap-2 px-2 py-1 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors\"\n >\n {triggerLabel && (\n \n {triggerLabel}\n \n )}\n {triggerIconName && (\n \n )}\n \n )}\n\n {/* Portal로 렌더링되는 드롭다운 메뉴 */}\n {dropdownMenu}\n \n );\n};\n","import React, { useMemo } from 'react';\nimport { Div } from '../basic/Div';\nimport { Button } from '../basic/Button';\nimport { Span } from '../basic/Span';\nimport type { EditorAttrs } from '../../types';\n\n// G7Core.t() 번역 함수 참조\nconst t = (key: string, params?: Record) =>\n (window as any).G7Core?.t?.(key, params) ?? key;\n\nexport interface PaginationProps {\n currentPage: number;\n totalPages: number;\n onPageChange: (page: number) => void;\n maxVisiblePages?: number;\n showFirstLast?: boolean;\n className?: string;\n style?: React.CSSProperties;\n prevText?: string;\n nextText?: string;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * Pagination 집합 컴포넌트\n *\n * Button + Span 기본 컴포넌트를 조합하여 페이지네이션 UI를 구성합니다.\n * 페이지 번호 생성 알고리즘을 포함하며, 많은 페이지 수에 대해 효율적으로 렌더링합니다.\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"Pagination\",\n * \"props\": {\n * \"currentPage\": \"{{pagination.current}}\",\n * \"totalPages\": \"{{pagination.total}}\",\n * \"maxVisiblePages\": 5,\n * \"showFirstLast\": true\n * }\n * }\n */\nexport const Pagination: React.FC = ({\n currentPage,\n totalPages,\n onPageChange,\n maxVisiblePages = 5,\n showFirstLast = true,\n className = '',\n style,\n prevText,\n nextText,\n id,\n editorAttrs,\n}) => {\n\n // 페이지 번호 생성 알고리즘\n const pageNumbers = useMemo(() => {\n const pages: (number | string)[] = [];\n\n if (totalPages <= maxVisiblePages + 2) {\n // 페이지가 적으면 모두 표시\n for (let i = 1; i <= totalPages; i++) {\n pages.push(i);\n }\n } else {\n // 페이지가 많으면 축약 표시\n const halfVisible = Math.floor(maxVisiblePages / 2);\n\n let startPage = Math.max(2, currentPage - halfVisible);\n let endPage = Math.min(totalPages - 1, currentPage + halfVisible);\n\n // 시작 또는 끝 근처일 때 조정\n if (currentPage <= halfVisible + 1) {\n endPage = maxVisiblePages;\n } else if (currentPage >= totalPages - halfVisible) {\n startPage = totalPages - maxVisiblePages + 1;\n }\n\n // 첫 페이지\n pages.push(1);\n\n // 시작 생략 부호\n if (startPage > 2) {\n pages.push('...');\n }\n\n // 중간 페이지들\n for (let i = startPage; i <= endPage; i++) {\n pages.push(i);\n }\n\n // 끝 생략 부호\n if (endPage < totalPages - 1) {\n pages.push('...');\n }\n\n // 마지막 페이지\n if (totalPages > 1) {\n pages.push(totalPages);\n }\n }\n\n return pages;\n }, [currentPage, totalPages, maxVisiblePages]);\n\n const handlePageClick = (page: number) => {\n if (page < 1 || page > totalPages || page === currentPage) return;\n onPageChange(page);\n };\n\n const handlePrevious = () => {\n if (currentPage > 1) {\n onPageChange(currentPage - 1);\n }\n };\n\n const handleNext = () => {\n if (currentPage < totalPages) {\n onPageChange(currentPage + 1);\n }\n };\n\n return (\n \n {/* First Button */}\n {showFirstLast && (\n handlePageClick(1)}\n disabled={currentPage === 1}\n className=\"pagination-btn\"\n aria-label={t('common.first_page')}\n >\n «\n \n )}\n\n {/* Previous Button */}\n \n {prevText || <>‹}\n \n\n {/* Page Numbers */}\n
\n {pageNumbers.map((page, index) => {\n if (page === '...') {\n return (\n \n ...\n \n );\n }\n\n const pageNum = page as number;\n const isActive = pageNum === currentPage;\n\n return (\n handlePageClick(pageNum)}\n className={isActive ? 'pagination-btn-active' : 'pagination-btn'}\n aria-label={t('common.page_n', { n: pageNum })}\n aria-current={isActive ? 'page' : undefined}\n >\n {pageNum}\n \n );\n })}\n
\n\n {/* Next Button */}\n \n {nextText || <>›}\n \n\n {/* Last Button */}\n {showFirstLast && (\n handlePageClick(totalPages)}\n disabled={currentPage === totalPages}\n className=\"pagination-btn\"\n aria-label={t('common.last_page')}\n >\n »\n \n )}\n \n );\n};\n","// e2e:allow 외형 시맨틱 통일 시범 작업 — 동작 변화 없음. 패턴 확정 후 다음 사이클에 E2E spec 일괄 작성 예정.\nimport React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';\nimport { Input } from '../basic/Input';\nimport { Textarea } from '../basic/Textarea';\nimport { Button } from '../basic/Button';\nimport { Div } from '../basic/Div';\nimport { Span } from '../basic/Span';\nimport { Icon } from '../basic/Icon';\nimport type { EditorAttrs } from '../../types';\n\n// G7Core.t() 번역 함수 참조\nconst t = (key: string, params?: Record) =>\n (window as any).G7Core?.t?.(key, params) ?? key;\n\n// G7Core에서 지원 언어 목록 가져오기\nconst getSupportedLocales = (): string[] => {\n return (window as any).G7Core?.locale?.supported?.() ?? ['ko', 'en'];\n};\n\n// G7Core에서 현재 언어 가져오기\nconst getCurrentLocale = (): string => {\n return (window as any).G7Core?.locale?.current?.() ?? 'ko';\n};\n\n// 언어 코드로 언어명 가져오기 (다국어 키 사용)\nconst getLocaleNameByCode = (code: string): string => {\n // 다국어 키에서 언어명 가져오기 (common.language_ko, common.language_en 등)\n const translatedName = t(`common.language_${code}`);\n\n // 번역이 키 그대로 반환되면 (번역 없음) fallback 맵 사용\n if (translatedName === `common.language_${code}`) {\n const fallbackNames: Record = {\n ko: '한국어',\n en: 'English',\n ja: '日本語',\n zh: '中文',\n };\n return fallbackNames[code] || code.toUpperCase();\n }\n\n return translatedName;\n};\n\n// 시스템 언어 목록을 LocaleOption[]으로 변환\nconst getSystemLocaleOptions = (): LocaleOption[] => {\n const supportedLocales = getSupportedLocales();\n return supportedLocales.map(code => ({\n code,\n name: getLocaleNameByCode(code),\n nativeName: getLocaleNameByCode(code),\n }));\n};\n\nexport interface MultilingualValue {\n [locale: string]: string;\n}\n\nexport interface LocaleOption {\n code: string;\n name: string;\n nativeName?: string;\n}\n\nexport type MultilingualInputType = 'text' | 'textarea';\nexport type MultilingualInputLayout = 'inline' | 'tabs' | 'compact';\n\nexport interface MultilingualInputProps {\n /** 다국어 값 객체 */\n value?: MultilingualValue;\n /** 값 변경 콜백 */\n onChange?: (event: any) => void;\n /** 입력 타입 (text | textarea) */\n inputType?: MultilingualInputType;\n /** 레이아웃 타입 (inline: 모든 언어 수직 표시 | tabs: 탭 전환 방식 | compact: 탭과 입력이 한 줄) */\n layout?: MultilingualInputLayout;\n /** 사용 가능한 언어 목록 */\n availableLocales?: LocaleOption[];\n /** 기본 언어 코드 */\n defaultLocale?: string;\n /** 입력창 placeholder */\n placeholder?: string;\n /** 필수 입력 여부 */\n required?: boolean;\n /** 비활성화 여부 */\n disabled?: boolean;\n /** 최대 길이 */\n maxLength?: number;\n /** textarea 행 수 (inputType이 'textarea'일 때만 사용) */\n rows?: number;\n /** 추가 className */\n className?: string;\n /** input name */\n name?: string;\n /** 모바일에서 언어 코드로 표시 (기본값: false) */\n showCodeOnMobile?: boolean;\n /** 에러 메시지 (입력 필드에 적색 테두리 표시) */\n error?: string;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * 다국어 입력 컴포넌트\n *\n * 두 가지 레이아웃 모드를 지원합니다:\n * - inline (기본): 카드 형태로 모든 언어를 수직으로 쌓아서 표시\n * - tabs: 탭 방식으로 언어 전환 (카드 형태)\n */\nexport const MultilingualInput: React.FC = ({\n value = {},\n onChange,\n inputType = 'text',\n layout = 'inline',\n availableLocales,\n defaultLocale,\n placeholder = '',\n required = false,\n disabled = false,\n maxLength,\n rows = 4,\n className = '',\n name = 'multilingual_input',\n showCodeOnMobile = false,\n error,\n id,\n editorAttrs,\n}) => {\n\n // 에러 상태 여부\n const hasError = !!error;\n // G7Core에서 실제 사용할 언어 목록과 기본 언어 계산\n const actualAvailableLocales = useMemo(() => {\n return availableLocales ?? getSystemLocaleOptions();\n }, [availableLocales]);\n\n const actualDefaultLocale = useMemo(() => {\n return defaultLocale ?? getCurrentLocale();\n }, [defaultLocale]);\n\n // ── 로컬 상태 버퍼 (debounce 대기 중 사용자 입력값 보존) ──\n // props.value는 debounce가 fire된 후에야 갱신되므로,\n // locale 탭 전환 시 stale props.value로 렌더링되어 입력값이 유실됨.\n // localValue는 사용자 입력을 즉시 반영하고, props.value 갱신 시 동기화함.\n const localValueRef = useRef(value);\n const [localValue, setLocalValue] = useState(value);\n\n // props.value의 이전 내용을 추적 — 내용 기반 비교로 불필요한 동기화 방지\n const lastExternalValueRef = useRef(JSON.stringify(value));\n\n // props.value 외부 변경 시 로컬 상태 동기화\n // 동일 내용의 새 객체 참조(부모 rerender)는 무시하여 로컬 편집분 보존\n useEffect(() => {\n const valueStr = JSON.stringify(value);\n if (valueStr !== lastExternalValueRef.current) {\n lastExternalValueRef.current = valueStr;\n localValueRef.current = value;\n setLocalValue(value);\n }\n }, [value]);\n\n // 공통 onChange 호출 헬퍼\n const emitChange = useCallback((newValue: MultilingualValue, changedKeys?: string[]) => {\n const event: any = {\n target: {\n name,\n value: newValue,\n },\n };\n // _changedKeys: 엔진 디바운스 병합에서 stale closure로 인한 키 유실 방지\n if (changedKeys) {\n event._changedKeys = changedKeys;\n }\n onChange?.(event);\n }, [onChange, name]);\n\n // 활성화된 언어 탭 목록 (기본 언어는 항상 포함)\n const [activeLocales, setActiveLocales] = useState(() => {\n // tabs/compact 레이아웃일 때는 모든 지원 로케일을 표시\n if (layout === 'tabs' || layout === 'compact') {\n const supportedCodes = actualAvailableLocales.map(l => l.code);\n // 기본 언어를 맨 앞에 배치\n const sorted = [actualDefaultLocale, ...supportedCodes.filter(c => c !== actualDefaultLocale)];\n return sorted;\n }\n\n const valueKeys = Object.keys(value).filter(key => value[key] !== undefined);\n\n if (valueKeys.length === 0) {\n return [actualDefaultLocale];\n }\n\n // 기본 언어를 맨 앞에 배치\n const locales: string[] = [];\n\n // 1. 기본 언어가 있으면 맨 앞에 추가\n if (valueKeys.includes(actualDefaultLocale)) {\n locales.push(actualDefaultLocale);\n }\n\n // 2. 나머지 언어들 추가 (기본 언어 제외)\n valueKeys.forEach(key => {\n if (key !== actualDefaultLocale) {\n locales.push(key);\n }\n });\n\n return locales;\n });\n\n // 현재 선택된 언어 탭 (tabs 레이아웃용)\n const [currentLocale, setCurrentLocale] = useState(actualDefaultLocale);\n\n // 추가 가능한 언어 목록 (이미 활성화된 언어 제외)\n const addableLocales = useMemo(() => {\n return actualAvailableLocales.filter(locale => !activeLocales.includes(locale.code));\n }, [actualAvailableLocales, activeLocales]);\n\n // 언어 추가 드롭다운 표시 여부\n const [showAddMenu, setShowAddMenu] = useState(false);\n\n // value prop이 변경될 때 activeLocales 동기화\n useEffect(() => {\n // tabs/compact 레이아웃일 때는 항상 모든 지원 로케일 유지\n if (layout === 'tabs' || layout === 'compact') {\n const supportedCodes = actualAvailableLocales.map(l => l.code);\n const sorted = [actualDefaultLocale, ...supportedCodes.filter(c => c !== actualDefaultLocale)];\n const currentStr = activeLocales.join(',');\n const newStr = sorted.join(',');\n if (currentStr !== newStr) {\n setActiveLocales(sorted);\n }\n return;\n }\n\n const valueKeys = Object.keys(value).filter(key => value[key] !== undefined);\n\n // value가 비어있거나 모든 값이 빈 문자열이면 기본 언어만 표시\n if (valueKeys.length === 0) {\n setActiveLocales([actualDefaultLocale]);\n return;\n }\n\n // value에 있는 언어들로 activeLocales 구성\n // 기본 언어를 맨 앞에 배치\n const newLocales: string[] = [];\n\n // 1. 기본 언어가 있으면 맨 앞에 추가\n if (valueKeys.includes(actualDefaultLocale)) {\n newLocales.push(actualDefaultLocale);\n }\n\n // 2. 나머지 언어들 추가 (기본 언어 제외)\n valueKeys.forEach(key => {\n if (key !== actualDefaultLocale) {\n newLocales.push(key);\n }\n });\n\n // 순서를 유지하면서 비교하여 변경되었을 때만 업데이트\n const currentStr = activeLocales.join(',');\n const newStr = newLocales.join(',');\n\n if (currentStr !== newStr) {\n setActiveLocales(newLocales);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value, actualDefaultLocale, layout, actualAvailableLocales]);\n\n // 언어 입력값 변경 핸들러\n // localValueRef 사용: debounce 대기 중에도 최신 입력값 기반으로 병합\n const handleInputChange = useCallback((locale: string, inputValue: string) => {\n const newValue = {\n ...localValueRef.current,\n [locale]: inputValue,\n };\n localValueRef.current = newValue;\n setLocalValue(newValue);\n emitChange(newValue, [locale]);\n }, [emitChange]);\n\n // 언어 탭 추가\n const handleAddLocale = useCallback((localeCode: string) => {\n setActiveLocales(prev => [...prev, localeCode]);\n setCurrentLocale(localeCode);\n setShowAddMenu(false);\n\n // 새 언어 필드를 빈 문자열로 초기화\n const newValue = {\n ...localValueRef.current,\n [localeCode]: '',\n };\n localValueRef.current = newValue;\n setLocalValue(newValue);\n emitChange(newValue);\n }, [emitChange]);\n\n // 언어 탭 제거\n const handleRemoveLocale = useCallback((localeCode: string) => {\n // 기본 언어는 제거 불가\n if (localeCode === actualDefaultLocale) return;\n\n setActiveLocales(prev => prev.filter(code => code !== localeCode));\n\n // 제거된 언어가 현재 선택된 언어면 기본 언어로 전환\n if (currentLocale === localeCode) {\n setCurrentLocale(actualDefaultLocale);\n }\n\n // value에서 해당 언어 제거\n const newValue = { ...localValueRef.current };\n delete newValue[localeCode];\n localValueRef.current = newValue;\n setLocalValue(newValue);\n emitChange(newValue);\n }, [currentLocale, actualDefaultLocale, emitChange]);\n\n // 언어명 표시\n const getLocaleName = useCallback((localeCode: string) => {\n const locale = actualAvailableLocales.find(l => l.code === localeCode);\n return locale?.nativeName || locale?.name || localeCode.toUpperCase();\n }, [actualAvailableLocales]);\n\n // 입력 필드가 채워져 있는지 확인\n const hasValue = useCallback((localeCode: string) => {\n return Boolean(localValue[localeCode]?.trim());\n }, [localValue]);\n\n // 언어 추가 버튼 렌더링 (Pill Badge 스타일)\n const renderAddLocaleButtonCompact = useCallback(() => {\n if (addableLocales.length === 0) return null;\n\n return (\n
\n setShowAddMenu(!showAddMenu)}\n disabled={disabled}\n >\n \n {t('common.add_language')}\n \n\n {showAddMenu && (\n
\n {addableLocales.map(locale => (\n handleAddLocale(locale.code)}\n >\n \n {locale.nativeName || locale.name}\n \n ))}\n
\n )}\n
\n );\n }, [addableLocales, showAddMenu, disabled, handleAddLocale]);\n\n // 입력 필드 렌더링 (라벨 위에 표시) - Pill Badge 스타일\n const renderInputFieldWithTopLabel = useCallback((localeCode: string, showAddButton: boolean = false) => {\n const inputSemanticClassName = hasError ? 'input input-error' : 'input';\n const textareaSemanticClassName = hasError ? 'textarea input-error' : 'textarea';\n const isDefault = localeCode === actualDefaultLocale;\n const localizedPlaceholder = `${placeholder}${placeholder ? ' (' : ''}${getLocaleName(localeCode)}${placeholder ? ')' : ''}`;\n\n return (\n
\n {/* 언어 배지 (Pill Badge 스타일) */}\n
\n \n {/* 다국어 아이콘 */}\n \n {getLocaleName(localeCode)}\n {isDefault && *}\n {/* 비기본 언어 삭제 버튼 - 배지 안에 */}\n {!isDefault && (\n handleRemoveLocale(localeCode)}\n disabled={disabled}\n >\n \n \n )}\n \n {/* 기본 언어 옆에 추가 버튼 */}\n {isDefault && showAddButton && renderAddLocaleButtonCompact()}\n
\n\n {/* 입력 필드 */}\n {inputType === 'textarea' ? (\n handleInputChange(localeCode, e.target.value)}\n placeholder={localizedPlaceholder}\n required={required && isDefault}\n disabled={disabled}\n maxLength={maxLength}\n rows={rows}\n className={`${textareaSemanticClassName} resize-vertical`}\n />\n ) : (\n handleInputChange(localeCode, e.target.value)}\n placeholder={localizedPlaceholder}\n required={required && isDefault}\n disabled={disabled}\n maxLength={maxLength}\n className={inputSemanticClassName}\n />\n )}\n
\n );\n }, [name, localValue, handleInputChange, placeholder, required, disabled, maxLength, rows, inputType, getLocaleName, actualDefaultLocale, handleRemoveLocale, renderAddLocaleButtonCompact, hasError]);\n\n // 입력 필드 렌더링 (라벨 없음 버전 - tabs용)\n const renderInputField = useCallback((localeCode: string) => {\n const inputSemanticClassName = hasError ? 'input input-error' : 'input';\n const textareaSemanticClassName = hasError ? 'textarea input-error' : 'textarea';\n const localizedPlaceholder = `${placeholder}${placeholder ? ' (' : ''}${getLocaleName(localeCode)}${placeholder ? ')' : ''}`;\n\n return (\n
\n {inputType === 'textarea' ? (\n handleInputChange(localeCode, e.target.value)}\n placeholder={localizedPlaceholder}\n required={required && localeCode === actualDefaultLocale}\n disabled={disabled}\n maxLength={maxLength}\n rows={rows}\n className={`${textareaSemanticClassName} resize-vertical`}\n />\n ) : (\n handleInputChange(localeCode, e.target.value)}\n placeholder={localizedPlaceholder}\n required={required && localeCode === actualDefaultLocale}\n disabled={disabled}\n maxLength={maxLength}\n className={inputSemanticClassName}\n />\n )}\n
\n );\n }, [name, localValue, handleInputChange, placeholder, required, disabled, maxLength, rows, inputType, actualDefaultLocale, getLocaleName, hasError]);\n\n // Inline 레이아웃 렌더링\n const renderInlineLayout = () => (\n
\n {/* 입력 필드들 */}\n
\n {activeLocales.map((localeCode, index) =>\n renderInputFieldWithTopLabel(localeCode, index === 0)\n )}\n
\n
\n );\n\n // Tabs 레이아웃 렌더링 - Pill Badge 스타일\n const renderTabsLayout = () => (\n
\n {/* 언어 탭들 + 추가 버튼 (Pill Badge 스타일) */}\n
\n {activeLocales.map(localeCode => (\n setCurrentLocale(localeCode)}\n >\n {/* 다국어 아이콘 */}\n \n {/* showCodeOnMobile: 모바일에서는 언어 코드, 데스크탑에서는 전체 언어명 표시 */}\n {showCodeOnMobile ? (\n <>\n {getLocaleName(localeCode)}\n {localeCode.toUpperCase()}\n \n ) : (\n getLocaleName(localeCode)\n )}\n {localeCode === actualDefaultLocale && (\n *\n )}\n {/* 입력 완료 표시 */}\n {hasValue(localeCode) && currentLocale !== localeCode && (\n \n )}\n {/* 삭제 버튼 (기본 언어 제외) - 배지 안에 */}\n {localeCode !== actualDefaultLocale && (\n {\n e.stopPropagation();\n handleRemoveLocale(localeCode);\n }}\n disabled={disabled}\n >\n \n \n )}\n \n ))}\n\n {/* 언어 추가 버튼 */}\n {renderAddLocaleButtonCompact()}\n
\n\n {/* 입력 필드 */}\n {activeLocales.map(localeCode => (\n \n {renderInputField(localeCode)}\n
\n ))}\n \n );\n\n // Compact 레이아웃 렌더링 - 언어 선택과 입력 필드가 한 줄에 배치\n const renderCompactLayout = () => {\n const inputSemanticClassName = hasError ? 'input input-error' : 'input';\n const textareaSemanticClassName = hasError ? 'textarea input-error' : 'textarea';\n\n return (\n
\n
\n {/* 언어 선택 버튼들 - 컴팩트 스타일 */}\n
\n {activeLocales.map(localeCode => (\n setCurrentLocale(localeCode)}\n title={getLocaleName(localeCode)}\n >\n {localeCode.toUpperCase()}\n {localeCode === actualDefaultLocale && (\n *\n )}\n \n ))}\n
\n\n {/* 입력 필드 - flex-1로 나머지 공간 차지 */}\n
\n {inputType === 'textarea' ? (\n handleInputChange(currentLocale, e.target.value)}\n placeholder={placeholder}\n required={required && currentLocale === actualDefaultLocale}\n disabled={disabled}\n maxLength={maxLength}\n rows={rows}\n className={textareaSemanticClassName}\n />\n ) : (\n handleInputChange(currentLocale, e.target.value)}\n placeholder={placeholder}\n required={required && currentLocale === actualDefaultLocale}\n disabled={disabled}\n maxLength={maxLength}\n className={inputSemanticClassName}\n />\n )}\n
\n
\n
\n );\n };\n\n // 레이아웃에 따라 렌더링\n return (\n
\n {layout === 'compact' ? renderCompactLayout() : layout === 'tabs' ? renderTabsLayout() : renderInlineLayout()}\n {/* 에러 메시지 표시 */}\n {hasError && error && (\n \n {error}\n \n )}\n
\n );\n};\n\nMultilingualInput.displayName = 'MultilingualInput';\n","import React, { useState, useEffect } from 'react';\nimport type { EditorAttrs } from '../../types';\n\n/**\n * G7Core 전역 객체 접근 헬퍼\n * 런타임에 접근하여 테스트 환경에서도 모킹이 적용되도록 함\n */\nconst getG7Core = () => (window as any).G7Core;\n\nexport interface ToggleProps {\n /** 체크 상태 */\n checked?: boolean;\n /** 체크 상태 변경 콜백 (boolean 또는 ChangeEvent 받음) */\n onChange?: ((checked: boolean) => void) | ((e: React.ChangeEvent) => void);\n /** 비활성화 여부 */\n disabled?: boolean;\n /** 라벨 텍스트 */\n label?: string;\n /** 설명 텍스트 */\n description?: string;\n /** 토글 크기 */\n size?: 'sm' | 'md' | 'lg';\n /** 추가 className */\n className?: string;\n /** name 속성 */\n name?: string;\n /** 값 (checked의 대체) */\n value?: boolean;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * Toggle 스위치 컴포넌트\n *\n * Flowbite 스타일의 토글 스위치입니다.\n * 라이트/다크 모드를 모두 지원합니다.\n * 반응형으로 prop 변경을 추적합니다.\n */\nexport const Toggle: React.FC = ({\n checked: checkedProp,\n value: valueProp,\n onChange,\n disabled = false,\n label,\n description,\n size = 'md',\n className = '',\n name,\n id,\n editorAttrs,\n}) => {\n // 내부 상태로 관리\n const [checked, setChecked] = useState(() => checkedProp ?? valueProp ?? false);\n\n // prop 변경 시 내부 상태 동기화\n useEffect(() => {\n const newValue = checkedProp ?? valueProp ?? false;\n setChecked(newValue);\n }, [checkedProp, valueProp]);\n\n const handleChange = (e: React.ChangeEvent) => {\n const newChecked = e.target.checked;\n\n // 내부 상태 즉시 업데이트\n setChecked(newChecked);\n\n if (onChange && !disabled) {\n // 템플릿 엔진의 actions는 이벤트 객체를 받으므로 항상 이벤트로 전달\n (onChange as any)(e);\n }\n };\n\n // 크기별 클래스\n const sizeClasses = {\n sm: {\n track: 'w-9 h-5',\n thumb: 'after:h-4 after:w-4',\n },\n md: {\n track: 'w-11 h-6',\n thumb: 'after:h-5 after:w-5',\n },\n lg: {\n track: 'w-14 h-7',\n thumb: 'after:h-6 after:w-6',\n },\n };\n\n const currentSize = sizeClasses[size];\n\n const handleToggleClick = () => {\n if (!disabled) {\n const newChecked = !checked;\n setChecked(newChecked);\n if (onChange) {\n const G7Core = getG7Core();\n if (G7Core?.createChangeEvent) {\n (onChange as any)(G7Core.createChangeEvent({ checked: newChecked, name }));\n }\n }\n }\n };\n\n return (\n
\n {/* 토글 스위치 */}\n {\n e.preventDefault();\n e.stopPropagation();\n handleToggleClick();\n }}\n >\n \n
\n
\n\n {/* 라벨 (토글 옆) */}\n {label && (\n \n {label}\n \n )}\n\n {/* 디스크립션 (다음 줄) */}\n {description &&

{description}

}\n
\n );\n};\n","import React from 'react';\nimport { Span } from '../basic/Span';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport type { EditorAttrs } from '../../types';\n\nexport type StatusType = 'success' | 'warning' | 'error' | 'info' | 'pending' | 'default';\n\nexport interface StatusBadgeProps {\n status: StatusType;\n label?: string;\n showIcon?: boolean;\n iconName?: IconName;\n className?: string;\n style?: React.CSSProperties;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * StatusBadge 집합 컴포넌트\n *\n * 상태별 색상 매핑을 지원하는 뱃지 컴포넌트입니다.\n * 상태에 따라 색상과 아이콘이 자동으로 매핑됩니다.\n *\n * 기본 컴포넌트 조합: Span + Icon\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"StatusBadge\",\n * \"props\": {\n * \"status\": \"success\",\n * \"label\": \"완료\",\n * \"showIcon\": true\n * }\n * }\n */\nexport const StatusBadge: React.FC = ({\n status,\n label,\n showIcon = true,\n iconName,\n className = '',\n style,\n id,\n editorAttrs,\n}) => {\n // 상태별 스타일 매핑\n const statusStyles: Record = {\n success: 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 border-green-200 dark:border-green-800',\n warning: 'bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800',\n error: 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 border-red-200 dark:border-red-800',\n info: 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 border-blue-200 dark:border-blue-800',\n pending: 'bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-600',\n default: 'bg-gray-50 dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-600',\n };\n\n // 상태별 기본 아이콘 매핑\n const statusIcons: Record = {\n success: IconName.CheckCircle,\n warning: IconName.ExclamationTriangle,\n error: IconName.XCircle,\n info: IconName.InfoCircle,\n pending: IconName.Clock,\n default: IconName.QuestionCircle,\n };\n\n // 상태별 기본 라벨 매핑\n const statusLabels: Record = {\n success: '성공',\n warning: '경고',\n error: '오류',\n info: '정보',\n pending: '대기 중',\n default: '기본',\n };\n\n const displayIcon = iconName || statusIcons[status];\n const displayLabel = label || statusLabels[status];\n const styleClasses = statusStyles[status];\n\n return (\n \n {showIcon && (\n \n )}\n {displayLabel}\n \n );\n};\n","import React from 'react';\nimport { Span } from '../basic/Span';\nimport type { EditorAttrs } from '../../types';\n\nexport interface BadgeProps {\n /** 색상명 직접 지정 (blue/green/red/gray/yellow/... ). variant 보다 우선 적용 */\n color?: string;\n /** 의미 기반 변형 (success/warning/danger/info/primary/secondary/text). 백엔드 Enum variant() 출력과 매핑 */\n variant?: string;\n text?: string;\n size?: 'sm' | 'md' | 'lg';\n className?: string;\n style?: React.CSSProperties;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\nconst colorStyles: Record = {\n blue: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',\n green: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',\n red: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',\n gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',\n yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',\n purple: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',\n orange: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300',\n teal: 'bg-teal-100 text-teal-800 dark:bg-teal-900/30 dark:text-teal-300',\n cyan: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-300',\n};\n\n/**\n * 의미 기반 variant → 색상명 매핑.\n *\n * 백엔드 Enum 의 variant() 메서드(success/warning/danger/info/primary/secondary 등)가\n * 반환하는 semantic 값을 Badge 색상으로 해석한다. StatusBadge 의 색상 규약과 일관.\n */\nconst variantToColor: Record = {\n success: 'green',\n warning: 'yellow',\n danger: 'red',\n error: 'red',\n info: 'blue',\n primary: 'blue',\n secondary: 'gray',\n text: 'gray',\n default: 'gray',\n};\n\nconst sizeStyles: Record = {\n sm: 'px-1.5 py-0.5 text-[10px]',\n md: 'px-2 py-0.5 text-xs',\n lg: 'px-2.5 py-1 text-sm',\n};\n\n/**\n * Badge 집합 컴포넌트\n *\n * 색상 기반의 라벨 뱃지입니다. 상태, 타입 등의 분류를 시각적으로 표현합니다.\n *\n * 기본 컴포넌트 조합: Span\n *\n * @example\n * // 레이아웃 JSON 사용 예시 — 색상 직접 지정\n * {\n * \"name\": \"Badge\",\n * \"props\": { \"color\": \"blue\", \"text\": \"활성\" }\n * }\n * @example\n * // 의미 기반 variant (백엔드 Enum variant() 출력 바인딩)\n * {\n * \"name\": \"Badge\",\n * \"props\": { \"variant\": \"{{row.option_status_variant}}\", \"text\": \"{{row.option_status_label}}\" }\n * }\n */\nexport const Badge: React.FC> = ({\n color,\n variant,\n text,\n size = 'md',\n className = '',\n style,\n children,\n id,\n editorAttrs,\n}) => {\n // 우선순위: color(명시적 색상명) > variant(의미 기반) > gray(기본)\n const resolvedColor = color || (variant ? variantToColor[variant] : undefined) || 'gray';\n const colorClass = colorStyles[resolvedColor] || colorStyles.gray;\n const sizeClass = sizeStyles[size] || sizeStyles.md;\n\n return (\n \n {text}\n {children}\n \n );\n};\n","/*! @license DOMPurify 3.1.7 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.7/LICENSE */\n\nconst {\n entries,\n setPrototypeOf,\n isFrozen,\n getPrototypeOf,\n getOwnPropertyDescriptor\n} = Object;\nlet {\n freeze,\n seal,\n create\n} = Object; // eslint-disable-line import/no-mutable-exports\nlet {\n apply,\n construct\n} = typeof Reflect !== 'undefined' && Reflect;\nif (!freeze) {\n freeze = function freeze(x) {\n return x;\n };\n}\nif (!seal) {\n seal = function seal(x) {\n return x;\n };\n}\nif (!apply) {\n apply = function apply(fun, thisValue, args) {\n return fun.apply(thisValue, args);\n };\n}\nif (!construct) {\n construct = function construct(Func, args) {\n return new Func(...args);\n };\n}\nconst arrayForEach = unapply(Array.prototype.forEach);\nconst arrayPop = unapply(Array.prototype.pop);\nconst arrayPush = unapply(Array.prototype.push);\nconst stringToLowerCase = unapply(String.prototype.toLowerCase);\nconst stringToString = unapply(String.prototype.toString);\nconst stringMatch = unapply(String.prototype.match);\nconst stringReplace = unapply(String.prototype.replace);\nconst stringIndexOf = unapply(String.prototype.indexOf);\nconst stringTrim = unapply(String.prototype.trim);\nconst objectHasOwnProperty = unapply(Object.prototype.hasOwnProperty);\nconst regExpTest = unapply(RegExp.prototype.test);\nconst typeErrorCreate = unconstruct(TypeError);\n\n/**\n * Creates a new function that calls the given function with a specified thisArg and arguments.\n *\n * @param {Function} func - The function to be wrapped and called.\n * @returns {Function} A new function that calls the given function with a specified thisArg and arguments.\n */\nfunction unapply(func) {\n return function (thisArg) {\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n return apply(func, thisArg, args);\n };\n}\n\n/**\n * Creates a new function that constructs an instance of the given constructor function with the provided arguments.\n *\n * @param {Function} func - The constructor function to be wrapped and called.\n * @returns {Function} A new function that constructs an instance of the given constructor function with the provided arguments.\n */\nfunction unconstruct(func) {\n return function () {\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n return construct(func, args);\n };\n}\n\n/**\n * Add properties to a lookup table\n *\n * @param {Object} set - The set to which elements will be added.\n * @param {Array} array - The array containing elements to be added to the set.\n * @param {Function} transformCaseFunc - An optional function to transform the case of each element before adding to the set.\n * @returns {Object} The modified set with added elements.\n */\nfunction addToSet(set, array) {\n let transformCaseFunc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : stringToLowerCase;\n if (setPrototypeOf) {\n // Make 'in' and truthy checks like Boolean(set.constructor)\n // independent of any properties defined on Object.prototype.\n // Prevent prototype setters from intercepting set as a this value.\n setPrototypeOf(set, null);\n }\n let l = array.length;\n while (l--) {\n let element = array[l];\n if (typeof element === 'string') {\n const lcElement = transformCaseFunc(element);\n if (lcElement !== element) {\n // Config presets (e.g. tags.js, attrs.js) are immutable.\n if (!isFrozen(array)) {\n array[l] = lcElement;\n }\n element = lcElement;\n }\n }\n set[element] = true;\n }\n return set;\n}\n\n/**\n * Clean up an array to harden against CSPP\n *\n * @param {Array} array - The array to be cleaned.\n * @returns {Array} The cleaned version of the array\n */\nfunction cleanArray(array) {\n for (let index = 0; index < array.length; index++) {\n const isPropertyExist = objectHasOwnProperty(array, index);\n if (!isPropertyExist) {\n array[index] = null;\n }\n }\n return array;\n}\n\n/**\n * Shallow clone an object\n *\n * @param {Object} object - The object to be cloned.\n * @returns {Object} A new object that copies the original.\n */\nfunction clone(object) {\n const newObject = create(null);\n for (const [property, value] of entries(object)) {\n const isPropertyExist = objectHasOwnProperty(object, property);\n if (isPropertyExist) {\n if (Array.isArray(value)) {\n newObject[property] = cleanArray(value);\n } else if (value && typeof value === 'object' && value.constructor === Object) {\n newObject[property] = clone(value);\n } else {\n newObject[property] = value;\n }\n }\n }\n return newObject;\n}\n\n/**\n * This method automatically checks if the prop is function or getter and behaves accordingly.\n *\n * @param {Object} object - The object to look up the getter function in its prototype chain.\n * @param {String} prop - The property name for which to find the getter function.\n * @returns {Function} The getter function found in the prototype chain or a fallback function.\n */\nfunction lookupGetter(object, prop) {\n while (object !== null) {\n const desc = getOwnPropertyDescriptor(object, prop);\n if (desc) {\n if (desc.get) {\n return unapply(desc.get);\n }\n if (typeof desc.value === 'function') {\n return unapply(desc.value);\n }\n }\n object = getPrototypeOf(object);\n }\n function fallbackValue() {\n return null;\n }\n return fallbackValue;\n}\n\nconst html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']);\n\n// SVG\nconst svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']);\nconst svgFilters = freeze(['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence']);\n\n// List of SVG elements that are disallowed by default.\n// We still need to know them so that we can do namespace\n// checks properly in case one wants to add them to\n// allow-list.\nconst svgDisallowed = freeze(['animate', 'color-profile', 'cursor', 'discard', 'font-face', 'font-face-format', 'font-face-name', 'font-face-src', 'font-face-uri', 'foreignobject', 'hatch', 'hatchpath', 'mesh', 'meshgradient', 'meshpatch', 'meshrow', 'missing-glyph', 'script', 'set', 'solidcolor', 'unknown', 'use']);\nconst mathMl$1 = freeze(['math', 'menclose', 'merror', 'mfenced', 'mfrac', 'mglyph', 'mi', 'mlabeledtr', 'mmultiscripts', 'mn', 'mo', 'mover', 'mpadded', 'mphantom', 'mroot', 'mrow', 'ms', 'mspace', 'msqrt', 'mstyle', 'msub', 'msup', 'msubsup', 'mtable', 'mtd', 'mtext', 'mtr', 'munder', 'munderover', 'mprescripts']);\n\n// Similarly to SVG, we want to know all MathML elements,\n// even those that we disallow by default.\nconst mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']);\nconst text = freeze(['#text']);\n\nconst html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']);\nconst svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']);\nconst mathMl = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnsalign', 'columnlines', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lspace', 'lquote', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']);\nconst xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']);\n\n// eslint-disable-next-line unicorn/better-regex\nconst MUSTACHE_EXPR = seal(/\\{\\{[\\w\\W]*|[\\w\\W]*\\}\\}/gm); // Specify template detection regex for SAFE_FOR_TEMPLATES mode\nconst ERB_EXPR = seal(/<%[\\w\\W]*|[\\w\\W]*%>/gm);\nconst TMPLIT_EXPR = seal(/\\${[\\w\\W]*}/gm);\nconst DATA_ATTR = seal(/^data-[\\-\\w.\\u00B7-\\uFFFF]/); // eslint-disable-line no-useless-escape\nconst ARIA_ATTR = seal(/^aria-[\\-\\w]+$/); // eslint-disable-line no-useless-escape\nconst IS_ALLOWED_URI = seal(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\\-]+(?:[^a-z+.\\-:]|$))/i // eslint-disable-line no-useless-escape\n);\nconst IS_SCRIPT_OR_DATA = seal(/^(?:\\w+script|data):/i);\nconst ATTR_WHITESPACE = seal(/[\\u0000-\\u0020\\u00A0\\u1680\\u180E\\u2000-\\u2029\\u205F\\u3000]/g // eslint-disable-line no-control-regex\n);\nconst DOCTYPE_NAME = seal(/^html$/i);\nconst CUSTOM_ELEMENT = seal(/^[a-z][.\\w]*(-[.\\w]+)+$/i);\n\nvar EXPRESSIONS = /*#__PURE__*/Object.freeze({\n __proto__: null,\n MUSTACHE_EXPR: MUSTACHE_EXPR,\n ERB_EXPR: ERB_EXPR,\n TMPLIT_EXPR: TMPLIT_EXPR,\n DATA_ATTR: DATA_ATTR,\n ARIA_ATTR: ARIA_ATTR,\n IS_ALLOWED_URI: IS_ALLOWED_URI,\n IS_SCRIPT_OR_DATA: IS_SCRIPT_OR_DATA,\n ATTR_WHITESPACE: ATTR_WHITESPACE,\n DOCTYPE_NAME: DOCTYPE_NAME,\n CUSTOM_ELEMENT: CUSTOM_ELEMENT\n});\n\n// https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\nconst NODE_TYPE = {\n element: 1,\n attribute: 2,\n text: 3,\n cdataSection: 4,\n entityReference: 5,\n // Deprecated\n entityNode: 6,\n // Deprecated\n progressingInstruction: 7,\n comment: 8,\n document: 9,\n documentType: 10,\n documentFragment: 11,\n notation: 12 // Deprecated\n};\nconst getGlobal = function getGlobal() {\n return typeof window === 'undefined' ? null : window;\n};\n\n/**\n * Creates a no-op policy for internal use only.\n * Don't export this function outside this module!\n * @param {TrustedTypePolicyFactory} trustedTypes The policy factory.\n * @param {HTMLScriptElement} purifyHostElement The Script element used to load DOMPurify (to determine policy name suffix).\n * @return {TrustedTypePolicy} The policy created (or null, if Trusted Types\n * are not supported or creating the policy failed).\n */\nconst _createTrustedTypesPolicy = function _createTrustedTypesPolicy(trustedTypes, purifyHostElement) {\n if (typeof trustedTypes !== 'object' || typeof trustedTypes.createPolicy !== 'function') {\n return null;\n }\n\n // Allow the callers to control the unique policy name\n // by adding a data-tt-policy-suffix to the script element with the DOMPurify.\n // Policy creation with duplicate names throws in Trusted Types.\n let suffix = null;\n const ATTR_NAME = 'data-tt-policy-suffix';\n if (purifyHostElement && purifyHostElement.hasAttribute(ATTR_NAME)) {\n suffix = purifyHostElement.getAttribute(ATTR_NAME);\n }\n const policyName = 'dompurify' + (suffix ? '#' + suffix : '');\n try {\n return trustedTypes.createPolicy(policyName, {\n createHTML(html) {\n return html;\n },\n createScriptURL(scriptUrl) {\n return scriptUrl;\n }\n });\n } catch (_) {\n // Policy creation failed (most likely another DOMPurify script has\n // already run). Skip creating the policy, as this will only cause errors\n // if TT are enforced.\n console.warn('TrustedTypes policy ' + policyName + ' could not be created.');\n return null;\n }\n};\nfunction createDOMPurify() {\n let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();\n const DOMPurify = root => createDOMPurify(root);\n\n /**\n * Version label, exposed for easier checks\n * if DOMPurify is up to date or not\n */\n DOMPurify.version = '3.1.7';\n\n /**\n * Array of elements that DOMPurify removed during sanitation.\n * Empty if nothing was removed.\n */\n DOMPurify.removed = [];\n if (!window || !window.document || window.document.nodeType !== NODE_TYPE.document) {\n // Not running in a browser, provide a factory function\n // so that you can pass your own Window\n DOMPurify.isSupported = false;\n return DOMPurify;\n }\n let {\n document\n } = window;\n const originalDocument = document;\n const currentScript = originalDocument.currentScript;\n const {\n DocumentFragment,\n HTMLTemplateElement,\n Node,\n Element,\n NodeFilter,\n NamedNodeMap = window.NamedNodeMap || window.MozNamedAttrMap,\n HTMLFormElement,\n DOMParser,\n trustedTypes\n } = window;\n const ElementPrototype = Element.prototype;\n const cloneNode = lookupGetter(ElementPrototype, 'cloneNode');\n const remove = lookupGetter(ElementPrototype, 'remove');\n const getNextSibling = lookupGetter(ElementPrototype, 'nextSibling');\n const getChildNodes = lookupGetter(ElementPrototype, 'childNodes');\n const getParentNode = lookupGetter(ElementPrototype, 'parentNode');\n\n // As per issue #47, the web-components registry is inherited by a\n // new document created via createHTMLDocument. As per the spec\n // (http://w3c.github.io/webcomponents/spec/custom/#creating-and-passing-registries)\n // a new empty registry is used when creating a template contents owner\n // document, so we use that as our parent document to ensure nothing\n // is inherited.\n if (typeof HTMLTemplateElement === 'function') {\n const template = document.createElement('template');\n if (template.content && template.content.ownerDocument) {\n document = template.content.ownerDocument;\n }\n }\n let trustedTypesPolicy;\n let emptyHTML = '';\n const {\n implementation,\n createNodeIterator,\n createDocumentFragment,\n getElementsByTagName\n } = document;\n const {\n importNode\n } = originalDocument;\n let hooks = {};\n\n /**\n * Expose whether this browser supports running the full DOMPurify.\n */\n DOMPurify.isSupported = typeof entries === 'function' && typeof getParentNode === 'function' && implementation && implementation.createHTMLDocument !== undefined;\n const {\n MUSTACHE_EXPR,\n ERB_EXPR,\n TMPLIT_EXPR,\n DATA_ATTR,\n ARIA_ATTR,\n IS_SCRIPT_OR_DATA,\n ATTR_WHITESPACE,\n CUSTOM_ELEMENT\n } = EXPRESSIONS;\n let {\n IS_ALLOWED_URI: IS_ALLOWED_URI$1\n } = EXPRESSIONS;\n\n /**\n * We consider the elements and attributes below to be safe. Ideally\n * don't add any new ones but feel free to remove unwanted ones.\n */\n\n /* allowed element names */\n let ALLOWED_TAGS = null;\n const DEFAULT_ALLOWED_TAGS = addToSet({}, [...html$1, ...svg$1, ...svgFilters, ...mathMl$1, ...text]);\n\n /* Allowed attribute names */\n let ALLOWED_ATTR = null;\n const DEFAULT_ALLOWED_ATTR = addToSet({}, [...html, ...svg, ...mathMl, ...xml]);\n\n /*\n * Configure how DOMPUrify should handle custom elements and their attributes as well as customized built-in elements.\n * @property {RegExp|Function|null} tagNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any custom elements)\n * @property {RegExp|Function|null} attributeNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any attributes not on the allow list)\n * @property {boolean} allowCustomizedBuiltInElements allow custom elements derived from built-ins if they pass CUSTOM_ELEMENT_HANDLING.tagNameCheck. Default: `false`.\n */\n let CUSTOM_ELEMENT_HANDLING = Object.seal(create(null, {\n tagNameCheck: {\n writable: true,\n configurable: false,\n enumerable: true,\n value: null\n },\n attributeNameCheck: {\n writable: true,\n configurable: false,\n enumerable: true,\n value: null\n },\n allowCustomizedBuiltInElements: {\n writable: true,\n configurable: false,\n enumerable: true,\n value: false\n }\n }));\n\n /* Explicitly forbidden tags (overrides ALLOWED_TAGS/ADD_TAGS) */\n let FORBID_TAGS = null;\n\n /* Explicitly forbidden attributes (overrides ALLOWED_ATTR/ADD_ATTR) */\n let FORBID_ATTR = null;\n\n /* Decide if ARIA attributes are okay */\n let ALLOW_ARIA_ATTR = true;\n\n /* Decide if custom data attributes are okay */\n let ALLOW_DATA_ATTR = true;\n\n /* Decide if unknown protocols are okay */\n let ALLOW_UNKNOWN_PROTOCOLS = false;\n\n /* Decide if self-closing tags in attributes are allowed.\n * Usually removed due to a mXSS issue in jQuery 3.0 */\n let ALLOW_SELF_CLOSE_IN_ATTR = true;\n\n /* Output should be safe for common template engines.\n * This means, DOMPurify removes data attributes, mustaches and ERB\n */\n let SAFE_FOR_TEMPLATES = false;\n\n /* Output should be safe even for XML used within HTML and alike.\n * This means, DOMPurify removes comments when containing risky content.\n */\n let SAFE_FOR_XML = true;\n\n /* Decide if document with ... should be returned */\n let WHOLE_DOCUMENT = false;\n\n /* Track whether config is already set on this instance of DOMPurify. */\n let SET_CONFIG = false;\n\n /* Decide if all elements (e.g. style, script) must be children of\n * document.body. By default, browsers might move them to document.head */\n let FORCE_BODY = false;\n\n /* Decide if a DOM `HTMLBodyElement` should be returned, instead of a html\n * string (or a TrustedHTML object if Trusted Types are supported).\n * If `WHOLE_DOCUMENT` is enabled a `HTMLHtmlElement` will be returned instead\n */\n let RETURN_DOM = false;\n\n /* Decide if a DOM `DocumentFragment` should be returned, instead of a html\n * string (or a TrustedHTML object if Trusted Types are supported) */\n let RETURN_DOM_FRAGMENT = false;\n\n /* Try to return a Trusted Type object instead of a string, return a string in\n * case Trusted Types are not supported */\n let RETURN_TRUSTED_TYPE = false;\n\n /* Output should be free from DOM clobbering attacks?\n * This sanitizes markups named with colliding, clobberable built-in DOM APIs.\n */\n let SANITIZE_DOM = true;\n\n /* Achieve full DOM Clobbering protection by isolating the namespace of named\n * properties and JS variables, mitigating attacks that abuse the HTML/DOM spec rules.\n *\n * HTML/DOM spec rules that enable DOM Clobbering:\n * - Named Access on Window (§7.3.3)\n * - DOM Tree Accessors (§3.1.5)\n * - Form Element Parent-Child Relations (§4.10.3)\n * - Iframe srcdoc / Nested WindowProxies (§4.8.5)\n * - HTMLCollection (§4.2.10.2)\n *\n * Namespace isolation is implemented by prefixing `id` and `name` attributes\n * with a constant string, i.e., `user-content-`\n */\n let SANITIZE_NAMED_PROPS = false;\n const SANITIZE_NAMED_PROPS_PREFIX = 'user-content-';\n\n /* Keep element content when removing element? */\n let KEEP_CONTENT = true;\n\n /* If a `Node` is passed to sanitize(), then performs sanitization in-place instead\n * of importing it into a new Document and returning a sanitized copy */\n let IN_PLACE = false;\n\n /* Allow usage of profiles like html, svg and mathMl */\n let USE_PROFILES = {};\n\n /* Tags to ignore content of when KEEP_CONTENT is true */\n let FORBID_CONTENTS = null;\n const DEFAULT_FORBID_CONTENTS = addToSet({}, ['annotation-xml', 'audio', 'colgroup', 'desc', 'foreignobject', 'head', 'iframe', 'math', 'mi', 'mn', 'mo', 'ms', 'mtext', 'noembed', 'noframes', 'noscript', 'plaintext', 'script', 'style', 'svg', 'template', 'thead', 'title', 'video', 'xmp']);\n\n /* Tags that are safe for data: URIs */\n let DATA_URI_TAGS = null;\n const DEFAULT_DATA_URI_TAGS = addToSet({}, ['audio', 'video', 'img', 'source', 'image', 'track']);\n\n /* Attributes safe for values like \"javascript:\" */\n let URI_SAFE_ATTRIBUTES = null;\n const DEFAULT_URI_SAFE_ATTRIBUTES = addToSet({}, ['alt', 'class', 'for', 'id', 'label', 'name', 'pattern', 'placeholder', 'role', 'summary', 'title', 'value', 'style', 'xmlns']);\n const MATHML_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';\n const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';\n const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';\n /* Document namespace */\n let NAMESPACE = HTML_NAMESPACE;\n let IS_EMPTY_INPUT = false;\n\n /* Allowed XHTML+XML namespaces */\n let ALLOWED_NAMESPACES = null;\n const DEFAULT_ALLOWED_NAMESPACES = addToSet({}, [MATHML_NAMESPACE, SVG_NAMESPACE, HTML_NAMESPACE], stringToString);\n\n /* Parsing of strict XHTML documents */\n let PARSER_MEDIA_TYPE = null;\n const SUPPORTED_PARSER_MEDIA_TYPES = ['application/xhtml+xml', 'text/html'];\n const DEFAULT_PARSER_MEDIA_TYPE = 'text/html';\n let transformCaseFunc = null;\n\n /* Keep a reference to config to pass to hooks */\n let CONFIG = null;\n\n /* Ideally, do not touch anything below this line */\n /* ______________________________________________ */\n\n const formElement = document.createElement('form');\n const isRegexOrFunction = function isRegexOrFunction(testValue) {\n return testValue instanceof RegExp || testValue instanceof Function;\n };\n\n /**\n * _parseConfig\n *\n * @param {Object} cfg optional config literal\n */\n // eslint-disable-next-line complexity\n const _parseConfig = function _parseConfig() {\n let cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n if (CONFIG && CONFIG === cfg) {\n return;\n }\n\n /* Shield configuration object from tampering */\n if (!cfg || typeof cfg !== 'object') {\n cfg = {};\n }\n\n /* Shield configuration object from prototype pollution */\n cfg = clone(cfg);\n PARSER_MEDIA_TYPE =\n // eslint-disable-next-line unicorn/prefer-includes\n SUPPORTED_PARSER_MEDIA_TYPES.indexOf(cfg.PARSER_MEDIA_TYPE) === -1 ? DEFAULT_PARSER_MEDIA_TYPE : cfg.PARSER_MEDIA_TYPE;\n\n // HTML tags and attributes are not case-sensitive, converting to lowercase. Keeping XHTML as is.\n transformCaseFunc = PARSER_MEDIA_TYPE === 'application/xhtml+xml' ? stringToString : stringToLowerCase;\n\n /* Set configuration parameters */\n ALLOWED_TAGS = objectHasOwnProperty(cfg, 'ALLOWED_TAGS') ? addToSet({}, cfg.ALLOWED_TAGS, transformCaseFunc) : DEFAULT_ALLOWED_TAGS;\n ALLOWED_ATTR = objectHasOwnProperty(cfg, 'ALLOWED_ATTR') ? addToSet({}, cfg.ALLOWED_ATTR, transformCaseFunc) : DEFAULT_ALLOWED_ATTR;\n ALLOWED_NAMESPACES = objectHasOwnProperty(cfg, 'ALLOWED_NAMESPACES') ? addToSet({}, cfg.ALLOWED_NAMESPACES, stringToString) : DEFAULT_ALLOWED_NAMESPACES;\n URI_SAFE_ATTRIBUTES = objectHasOwnProperty(cfg, 'ADD_URI_SAFE_ATTR') ? addToSet(clone(DEFAULT_URI_SAFE_ATTRIBUTES),\n // eslint-disable-line indent\n cfg.ADD_URI_SAFE_ATTR,\n // eslint-disable-line indent\n transformCaseFunc // eslint-disable-line indent\n ) // eslint-disable-line indent\n : DEFAULT_URI_SAFE_ATTRIBUTES;\n DATA_URI_TAGS = objectHasOwnProperty(cfg, 'ADD_DATA_URI_TAGS') ? addToSet(clone(DEFAULT_DATA_URI_TAGS),\n // eslint-disable-line indent\n cfg.ADD_DATA_URI_TAGS,\n // eslint-disable-line indent\n transformCaseFunc // eslint-disable-line indent\n ) // eslint-disable-line indent\n : DEFAULT_DATA_URI_TAGS;\n FORBID_CONTENTS = objectHasOwnProperty(cfg, 'FORBID_CONTENTS') ? addToSet({}, cfg.FORBID_CONTENTS, transformCaseFunc) : DEFAULT_FORBID_CONTENTS;\n FORBID_TAGS = objectHasOwnProperty(cfg, 'FORBID_TAGS') ? addToSet({}, cfg.FORBID_TAGS, transformCaseFunc) : {};\n FORBID_ATTR = objectHasOwnProperty(cfg, 'FORBID_ATTR') ? addToSet({}, cfg.FORBID_ATTR, transformCaseFunc) : {};\n USE_PROFILES = objectHasOwnProperty(cfg, 'USE_PROFILES') ? cfg.USE_PROFILES : false;\n ALLOW_ARIA_ATTR = cfg.ALLOW_ARIA_ATTR !== false; // Default true\n ALLOW_DATA_ATTR = cfg.ALLOW_DATA_ATTR !== false; // Default true\n ALLOW_UNKNOWN_PROTOCOLS = cfg.ALLOW_UNKNOWN_PROTOCOLS || false; // Default false\n ALLOW_SELF_CLOSE_IN_ATTR = cfg.ALLOW_SELF_CLOSE_IN_ATTR !== false; // Default true\n SAFE_FOR_TEMPLATES = cfg.SAFE_FOR_TEMPLATES || false; // Default false\n SAFE_FOR_XML = cfg.SAFE_FOR_XML !== false; // Default true\n WHOLE_DOCUMENT = cfg.WHOLE_DOCUMENT || false; // Default false\n RETURN_DOM = cfg.RETURN_DOM || false; // Default false\n RETURN_DOM_FRAGMENT = cfg.RETURN_DOM_FRAGMENT || false; // Default false\n RETURN_TRUSTED_TYPE = cfg.RETURN_TRUSTED_TYPE || false; // Default false\n FORCE_BODY = cfg.FORCE_BODY || false; // Default false\n SANITIZE_DOM = cfg.SANITIZE_DOM !== false; // Default true\n SANITIZE_NAMED_PROPS = cfg.SANITIZE_NAMED_PROPS || false; // Default false\n KEEP_CONTENT = cfg.KEEP_CONTENT !== false; // Default true\n IN_PLACE = cfg.IN_PLACE || false; // Default false\n IS_ALLOWED_URI$1 = cfg.ALLOWED_URI_REGEXP || IS_ALLOWED_URI;\n NAMESPACE = cfg.NAMESPACE || HTML_NAMESPACE;\n CUSTOM_ELEMENT_HANDLING = cfg.CUSTOM_ELEMENT_HANDLING || {};\n if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck)) {\n CUSTOM_ELEMENT_HANDLING.tagNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck;\n }\n if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)) {\n CUSTOM_ELEMENT_HANDLING.attributeNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.attributeNameCheck;\n }\n if (cfg.CUSTOM_ELEMENT_HANDLING && typeof cfg.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements === 'boolean') {\n CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements = cfg.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements;\n }\n if (SAFE_FOR_TEMPLATES) {\n ALLOW_DATA_ATTR = false;\n }\n if (RETURN_DOM_FRAGMENT) {\n RETURN_DOM = true;\n }\n\n /* Parse profile info */\n if (USE_PROFILES) {\n ALLOWED_TAGS = addToSet({}, text);\n ALLOWED_ATTR = [];\n if (USE_PROFILES.html === true) {\n addToSet(ALLOWED_TAGS, html$1);\n addToSet(ALLOWED_ATTR, html);\n }\n if (USE_PROFILES.svg === true) {\n addToSet(ALLOWED_TAGS, svg$1);\n addToSet(ALLOWED_ATTR, svg);\n addToSet(ALLOWED_ATTR, xml);\n }\n if (USE_PROFILES.svgFilters === true) {\n addToSet(ALLOWED_TAGS, svgFilters);\n addToSet(ALLOWED_ATTR, svg);\n addToSet(ALLOWED_ATTR, xml);\n }\n if (USE_PROFILES.mathMl === true) {\n addToSet(ALLOWED_TAGS, mathMl$1);\n addToSet(ALLOWED_ATTR, mathMl);\n addToSet(ALLOWED_ATTR, xml);\n }\n }\n\n /* Merge configuration parameters */\n if (cfg.ADD_TAGS) {\n if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) {\n ALLOWED_TAGS = clone(ALLOWED_TAGS);\n }\n addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc);\n }\n if (cfg.ADD_ATTR) {\n if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) {\n ALLOWED_ATTR = clone(ALLOWED_ATTR);\n }\n addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc);\n }\n if (cfg.ADD_URI_SAFE_ATTR) {\n addToSet(URI_SAFE_ATTRIBUTES, cfg.ADD_URI_SAFE_ATTR, transformCaseFunc);\n }\n if (cfg.FORBID_CONTENTS) {\n if (FORBID_CONTENTS === DEFAULT_FORBID_CONTENTS) {\n FORBID_CONTENTS = clone(FORBID_CONTENTS);\n }\n addToSet(FORBID_CONTENTS, cfg.FORBID_CONTENTS, transformCaseFunc);\n }\n\n /* Add #text in case KEEP_CONTENT is set to true */\n if (KEEP_CONTENT) {\n ALLOWED_TAGS['#text'] = true;\n }\n\n /* Add html, head and body to ALLOWED_TAGS in case WHOLE_DOCUMENT is true */\n if (WHOLE_DOCUMENT) {\n addToSet(ALLOWED_TAGS, ['html', 'head', 'body']);\n }\n\n /* Add tbody to ALLOWED_TAGS in case tables are permitted, see #286, #365 */\n if (ALLOWED_TAGS.table) {\n addToSet(ALLOWED_TAGS, ['tbody']);\n delete FORBID_TAGS.tbody;\n }\n if (cfg.TRUSTED_TYPES_POLICY) {\n if (typeof cfg.TRUSTED_TYPES_POLICY.createHTML !== 'function') {\n throw typeErrorCreate('TRUSTED_TYPES_POLICY configuration option must provide a \"createHTML\" hook.');\n }\n if (typeof cfg.TRUSTED_TYPES_POLICY.createScriptURL !== 'function') {\n throw typeErrorCreate('TRUSTED_TYPES_POLICY configuration option must provide a \"createScriptURL\" hook.');\n }\n\n // Overwrite existing TrustedTypes policy.\n trustedTypesPolicy = cfg.TRUSTED_TYPES_POLICY;\n\n // Sign local variables required by `sanitize`.\n emptyHTML = trustedTypesPolicy.createHTML('');\n } else {\n // Uninitialized policy, attempt to initialize the internal dompurify policy.\n if (trustedTypesPolicy === undefined) {\n trustedTypesPolicy = _createTrustedTypesPolicy(trustedTypes, currentScript);\n }\n\n // If creating the internal policy succeeded sign internal variables.\n if (trustedTypesPolicy !== null && typeof emptyHTML === 'string') {\n emptyHTML = trustedTypesPolicy.createHTML('');\n }\n }\n\n // Prevent further manipulation of configuration.\n // Not available in IE8, Safari 5, etc.\n if (freeze) {\n freeze(cfg);\n }\n CONFIG = cfg;\n };\n const MATHML_TEXT_INTEGRATION_POINTS = addToSet({}, ['mi', 'mo', 'mn', 'ms', 'mtext']);\n const HTML_INTEGRATION_POINTS = addToSet({}, ['annotation-xml']);\n\n // Certain elements are allowed in both SVG and HTML\n // namespace. We need to specify them explicitly\n // so that they don't get erroneously deleted from\n // HTML namespace.\n const COMMON_SVG_AND_HTML_ELEMENTS = addToSet({}, ['title', 'style', 'font', 'a', 'script']);\n\n /* Keep track of all possible SVG and MathML tags\n * so that we can perform the namespace checks\n * correctly. */\n const ALL_SVG_TAGS = addToSet({}, [...svg$1, ...svgFilters, ...svgDisallowed]);\n const ALL_MATHML_TAGS = addToSet({}, [...mathMl$1, ...mathMlDisallowed]);\n\n /**\n * @param {Element} element a DOM element whose namespace is being checked\n * @returns {boolean} Return false if the element has a\n * namespace that a spec-compliant parser would never\n * return. Return true otherwise.\n */\n const _checkValidNamespace = function _checkValidNamespace(element) {\n let parent = getParentNode(element);\n\n // In JSDOM, if we're inside shadow DOM, then parentNode\n // can be null. We just simulate parent in this case.\n if (!parent || !parent.tagName) {\n parent = {\n namespaceURI: NAMESPACE,\n tagName: 'template'\n };\n }\n const tagName = stringToLowerCase(element.tagName);\n const parentTagName = stringToLowerCase(parent.tagName);\n if (!ALLOWED_NAMESPACES[element.namespaceURI]) {\n return false;\n }\n if (element.namespaceURI === SVG_NAMESPACE) {\n // The only way to switch from HTML namespace to SVG\n // is via . If it happens via any other tag, then\n // it should be killed.\n if (parent.namespaceURI === HTML_NAMESPACE) {\n return tagName === 'svg';\n }\n\n // The only way to switch from MathML to SVG is via`\n // svg if parent is either or MathML\n // text integration points.\n if (parent.namespaceURI === MATHML_NAMESPACE) {\n return tagName === 'svg' && (parentTagName === 'annotation-xml' || MATHML_TEXT_INTEGRATION_POINTS[parentTagName]);\n }\n\n // We only allow elements that are defined in SVG\n // spec. All others are disallowed in SVG namespace.\n return Boolean(ALL_SVG_TAGS[tagName]);\n }\n if (element.namespaceURI === MATHML_NAMESPACE) {\n // The only way to switch from HTML namespace to MathML\n // is via . If it happens via any other tag, then\n // it should be killed.\n if (parent.namespaceURI === HTML_NAMESPACE) {\n return tagName === 'math';\n }\n\n // The only way to switch from SVG to MathML is via\n // and HTML integration points\n if (parent.namespaceURI === SVG_NAMESPACE) {\n return tagName === 'math' && HTML_INTEGRATION_POINTS[parentTagName];\n }\n\n // We only allow elements that are defined in MathML\n // spec. All others are disallowed in MathML namespace.\n return Boolean(ALL_MATHML_TAGS[tagName]);\n }\n if (element.namespaceURI === HTML_NAMESPACE) {\n // The only way to switch from SVG to HTML is via\n // HTML integration points, and from MathML to HTML\n // is via MathML text integration points\n if (parent.namespaceURI === SVG_NAMESPACE && !HTML_INTEGRATION_POINTS[parentTagName]) {\n return false;\n }\n if (parent.namespaceURI === MATHML_NAMESPACE && !MATHML_TEXT_INTEGRATION_POINTS[parentTagName]) {\n return false;\n }\n\n // We disallow tags that are specific for MathML\n // or SVG and should never appear in HTML namespace\n return !ALL_MATHML_TAGS[tagName] && (COMMON_SVG_AND_HTML_ELEMENTS[tagName] || !ALL_SVG_TAGS[tagName]);\n }\n\n // For XHTML and XML documents that support custom namespaces\n if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && ALLOWED_NAMESPACES[element.namespaceURI]) {\n return true;\n }\n\n // The code should never reach this place (this means\n // that the element somehow got namespace that is not\n // HTML, SVG, MathML or allowed via ALLOWED_NAMESPACES).\n // Return false just in case.\n return false;\n };\n\n /**\n * _forceRemove\n *\n * @param {Node} node a DOM node\n */\n const _forceRemove = function _forceRemove(node) {\n arrayPush(DOMPurify.removed, {\n element: node\n });\n try {\n // eslint-disable-next-line unicorn/prefer-dom-node-remove\n getParentNode(node).removeChild(node);\n } catch (_) {\n remove(node);\n }\n };\n\n /**\n * _removeAttribute\n *\n * @param {String} name an Attribute name\n * @param {Node} node a DOM node\n */\n const _removeAttribute = function _removeAttribute(name, node) {\n try {\n arrayPush(DOMPurify.removed, {\n attribute: node.getAttributeNode(name),\n from: node\n });\n } catch (_) {\n arrayPush(DOMPurify.removed, {\n attribute: null,\n from: node\n });\n }\n node.removeAttribute(name);\n\n // We void attribute values for unremovable \"is\"\" attributes\n if (name === 'is' && !ALLOWED_ATTR[name]) {\n if (RETURN_DOM || RETURN_DOM_FRAGMENT) {\n try {\n _forceRemove(node);\n } catch (_) {}\n } else {\n try {\n node.setAttribute(name, '');\n } catch (_) {}\n }\n }\n };\n\n /**\n * _initDocument\n *\n * @param {String} dirty a string of dirty markup\n * @return {Document} a DOM, filled with the dirty markup\n */\n const _initDocument = function _initDocument(dirty) {\n /* Create a HTML document */\n let doc = null;\n let leadingWhitespace = null;\n if (FORCE_BODY) {\n dirty = '' + dirty;\n } else {\n /* If FORCE_BODY isn't used, leading whitespace needs to be preserved manually */\n const matches = stringMatch(dirty, /^[\\r\\n\\t ]+/);\n leadingWhitespace = matches && matches[0];\n }\n if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && NAMESPACE === HTML_NAMESPACE) {\n // Root of XHTML doc must contain xmlns declaration (see https://www.w3.org/TR/xhtml1/normative.html#strict)\n dirty = '' + dirty + '';\n }\n const dirtyPayload = trustedTypesPolicy ? trustedTypesPolicy.createHTML(dirty) : dirty;\n /*\n * Use the DOMParser API by default, fallback later if needs be\n * DOMParser not work for svg when has multiple root element.\n */\n if (NAMESPACE === HTML_NAMESPACE) {\n try {\n doc = new DOMParser().parseFromString(dirtyPayload, PARSER_MEDIA_TYPE);\n } catch (_) {}\n }\n\n /* Use createHTMLDocument in case DOMParser is not available */\n if (!doc || !doc.documentElement) {\n doc = implementation.createDocument(NAMESPACE, 'template', null);\n try {\n doc.documentElement.innerHTML = IS_EMPTY_INPUT ? emptyHTML : dirtyPayload;\n } catch (_) {\n // Syntax error if dirtyPayload is invalid xml\n }\n }\n const body = doc.body || doc.documentElement;\n if (dirty && leadingWhitespace) {\n body.insertBefore(document.createTextNode(leadingWhitespace), body.childNodes[0] || null);\n }\n\n /* Work on whole document or just its body */\n if (NAMESPACE === HTML_NAMESPACE) {\n return getElementsByTagName.call(doc, WHOLE_DOCUMENT ? 'html' : 'body')[0];\n }\n return WHOLE_DOCUMENT ? doc.documentElement : body;\n };\n\n /**\n * Creates a NodeIterator object that you can use to traverse filtered lists of nodes or elements in a document.\n *\n * @param {Node} root The root element or node to start traversing on.\n * @return {NodeIterator} The created NodeIterator\n */\n const _createNodeIterator = function _createNodeIterator(root) {\n return createNodeIterator.call(root.ownerDocument || root, root,\n // eslint-disable-next-line no-bitwise\n NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT | NodeFilter.SHOW_PROCESSING_INSTRUCTION | NodeFilter.SHOW_CDATA_SECTION, null);\n };\n\n /**\n * _isClobbered\n *\n * @param {Node} elm element to check for clobbering attacks\n * @return {Boolean} true if clobbered, false if safe\n */\n const _isClobbered = function _isClobbered(elm) {\n return elm instanceof HTMLFormElement && (typeof elm.nodeName !== 'string' || typeof elm.textContent !== 'string' || typeof elm.removeChild !== 'function' || !(elm.attributes instanceof NamedNodeMap) || typeof elm.removeAttribute !== 'function' || typeof elm.setAttribute !== 'function' || typeof elm.namespaceURI !== 'string' || typeof elm.insertBefore !== 'function' || typeof elm.hasChildNodes !== 'function');\n };\n\n /**\n * Checks whether the given object is a DOM node.\n *\n * @param {Node} object object to check whether it's a DOM node\n * @return {Boolean} true is object is a DOM node\n */\n const _isNode = function _isNode(object) {\n return typeof Node === 'function' && object instanceof Node;\n };\n\n /**\n * _executeHook\n * Execute user configurable hooks\n *\n * @param {String} entryPoint Name of the hook's entry point\n * @param {Node} currentNode node to work on with the hook\n * @param {Object} data additional hook parameters\n */\n const _executeHook = function _executeHook(entryPoint, currentNode, data) {\n if (!hooks[entryPoint]) {\n return;\n }\n arrayForEach(hooks[entryPoint], hook => {\n hook.call(DOMPurify, currentNode, data, CONFIG);\n });\n };\n\n /**\n * _sanitizeElements\n *\n * @protect nodeName\n * @protect textContent\n * @protect removeChild\n *\n * @param {Node} currentNode to check for permission to exist\n * @return {Boolean} true if node was killed, false if left alive\n */\n const _sanitizeElements = function _sanitizeElements(currentNode) {\n let content = null;\n\n /* Execute a hook if present */\n _executeHook('beforeSanitizeElements', currentNode, null);\n\n /* Check if element is clobbered or can clobber */\n if (_isClobbered(currentNode)) {\n _forceRemove(currentNode);\n return true;\n }\n\n /* Now let's check the element's type and name */\n const tagName = transformCaseFunc(currentNode.nodeName);\n\n /* Execute a hook if present */\n _executeHook('uponSanitizeElement', currentNode, {\n tagName,\n allowedTags: ALLOWED_TAGS\n });\n\n /* Detect mXSS attempts abusing namespace confusion */\n if (currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && regExpTest(/<[/\\w]/g, currentNode.innerHTML) && regExpTest(/<[/\\w]/g, currentNode.textContent)) {\n _forceRemove(currentNode);\n return true;\n }\n\n /* Remove any occurrence of processing instructions */\n if (currentNode.nodeType === NODE_TYPE.progressingInstruction) {\n _forceRemove(currentNode);\n return true;\n }\n\n /* Remove any kind of possibly harmful comments */\n if (SAFE_FOR_XML && currentNode.nodeType === NODE_TYPE.comment && regExpTest(/<[/\\w]/g, currentNode.data)) {\n _forceRemove(currentNode);\n return true;\n }\n\n /* Remove element if anything forbids its presence */\n if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) {\n /* Check if we have a custom element to handle */\n if (!FORBID_TAGS[tagName] && _isBasicCustomElement(tagName)) {\n if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, tagName)) {\n return false;\n }\n if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(tagName)) {\n return false;\n }\n }\n\n /* Keep content except for bad-listed elements */\n if (KEEP_CONTENT && !FORBID_CONTENTS[tagName]) {\n const parentNode = getParentNode(currentNode) || currentNode.parentNode;\n const childNodes = getChildNodes(currentNode) || currentNode.childNodes;\n if (childNodes && parentNode) {\n const childCount = childNodes.length;\n for (let i = childCount - 1; i >= 0; --i) {\n const childClone = cloneNode(childNodes[i], true);\n childClone.__removalCount = (currentNode.__removalCount || 0) + 1;\n parentNode.insertBefore(childClone, getNextSibling(currentNode));\n }\n }\n }\n _forceRemove(currentNode);\n return true;\n }\n\n /* Check whether element has a valid namespace */\n if (currentNode instanceof Element && !_checkValidNamespace(currentNode)) {\n _forceRemove(currentNode);\n return true;\n }\n\n /* Make sure that older browsers don't get fallback-tag mXSS */\n if ((tagName === 'noscript' || tagName === 'noembed' || tagName === 'noframes') && regExpTest(/<\\/no(script|embed|frames)/i, currentNode.innerHTML)) {\n _forceRemove(currentNode);\n return true;\n }\n\n /* Sanitize element content to be template-safe */\n if (SAFE_FOR_TEMPLATES && currentNode.nodeType === NODE_TYPE.text) {\n /* Get the element's text content */\n content = currentNode.textContent;\n arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {\n content = stringReplace(content, expr, ' ');\n });\n if (currentNode.textContent !== content) {\n arrayPush(DOMPurify.removed, {\n element: currentNode.cloneNode()\n });\n currentNode.textContent = content;\n }\n }\n\n /* Execute a hook if present */\n _executeHook('afterSanitizeElements', currentNode, null);\n return false;\n };\n\n /**\n * _isValidAttribute\n *\n * @param {string} lcTag Lowercase tag name of containing element.\n * @param {string} lcName Lowercase attribute name.\n * @param {string} value Attribute value.\n * @return {Boolean} Returns true if `value` is valid, otherwise false.\n */\n // eslint-disable-next-line complexity\n const _isValidAttribute = function _isValidAttribute(lcTag, lcName, value) {\n /* Make sure attribute cannot clobber */\n if (SANITIZE_DOM && (lcName === 'id' || lcName === 'name') && (value in document || value in formElement)) {\n return false;\n }\n\n /* Allow valid data-* attributes: At least one character after \"-\"\n (https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes)\n XML-compatible (https://html.spec.whatwg.org/multipage/infrastructure.html#xml-compatible and http://www.w3.org/TR/xml/#d0e804)\n We don't need to check the value; it's always URI safe. */\n if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName)) ; else if (!ALLOWED_ATTR[lcName] || FORBID_ATTR[lcName]) {\n if (\n // First condition does a very basic check if a) it's basically a valid custom element tagname AND\n // b) if the tagName passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck\n // and c) if the attribute name passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.attributeNameCheck\n _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName)) ||\n // Alternative, second condition checks if it's an `is`-attribute, AND\n // the value passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck\n lcName === 'is' && CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, value) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(value))) ; else {\n return false;\n }\n /* Check value is safe. First, is attr inert? If so, is safe */\n } else if (URI_SAFE_ATTRIBUTES[lcName]) ; else if (regExpTest(IS_ALLOWED_URI$1, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if ((lcName === 'src' || lcName === 'xlink:href' || lcName === 'href') && lcTag !== 'script' && stringIndexOf(value, 'data:') === 0 && DATA_URI_TAGS[lcTag]) ; else if (ALLOW_UNKNOWN_PROTOCOLS && !regExpTest(IS_SCRIPT_OR_DATA, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if (value) {\n return false;\n } else ;\n return true;\n };\n\n /**\n * _isBasicCustomElement\n * checks if at least one dash is included in tagName, and it's not the first char\n * for more sophisticated checking see https://github.com/sindresorhus/validate-element-name\n *\n * @param {string} tagName name of the tag of the node to sanitize\n * @returns {boolean} Returns true if the tag name meets the basic criteria for a custom element, otherwise false.\n */\n const _isBasicCustomElement = function _isBasicCustomElement(tagName) {\n return tagName !== 'annotation-xml' && stringMatch(tagName, CUSTOM_ELEMENT);\n };\n\n /**\n * _sanitizeAttributes\n *\n * @protect attributes\n * @protect nodeName\n * @protect removeAttribute\n * @protect setAttribute\n *\n * @param {Node} currentNode to sanitize\n */\n const _sanitizeAttributes = function _sanitizeAttributes(currentNode) {\n /* Execute a hook if present */\n _executeHook('beforeSanitizeAttributes', currentNode, null);\n const {\n attributes\n } = currentNode;\n\n /* Check if we have attributes; if not we might have a text node */\n if (!attributes) {\n return;\n }\n const hookEvent = {\n attrName: '',\n attrValue: '',\n keepAttr: true,\n allowedAttributes: ALLOWED_ATTR\n };\n let l = attributes.length;\n\n /* Go backwards over all attributes; safely remove bad ones */\n while (l--) {\n const attr = attributes[l];\n const {\n name,\n namespaceURI,\n value: attrValue\n } = attr;\n const lcName = transformCaseFunc(name);\n let value = name === 'value' ? attrValue : stringTrim(attrValue);\n\n /* Execute a hook if present */\n hookEvent.attrName = lcName;\n hookEvent.attrValue = value;\n hookEvent.keepAttr = true;\n hookEvent.forceKeepAttr = undefined; // Allows developers to see this is a property they can set\n _executeHook('uponSanitizeAttribute', currentNode, hookEvent);\n value = hookEvent.attrValue;\n\n /* Did the hooks approve of the attribute? */\n if (hookEvent.forceKeepAttr) {\n continue;\n }\n\n /* Remove attribute */\n _removeAttribute(name, currentNode);\n\n /* Did the hooks approve of the attribute? */\n if (!hookEvent.keepAttr) {\n continue;\n }\n\n /* Work around a security issue in jQuery 3.0 */\n if (!ALLOW_SELF_CLOSE_IN_ATTR && regExpTest(/\\/>/i, value)) {\n _removeAttribute(name, currentNode);\n continue;\n }\n\n /* Sanitize attribute content to be template-safe */\n if (SAFE_FOR_TEMPLATES) {\n arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {\n value = stringReplace(value, expr, ' ');\n });\n }\n\n /* Is `value` valid for this attribute? */\n const lcTag = transformCaseFunc(currentNode.nodeName);\n if (!_isValidAttribute(lcTag, lcName, value)) {\n continue;\n }\n\n /* Full DOM Clobbering protection via namespace isolation,\n * Prefix id and name attributes with `user-content-`\n */\n if (SANITIZE_NAMED_PROPS && (lcName === 'id' || lcName === 'name')) {\n // Remove the attribute with this value\n _removeAttribute(name, currentNode);\n\n // Prefix the value and later re-create the attribute with the sanitized value\n value = SANITIZE_NAMED_PROPS_PREFIX + value;\n }\n\n /* Work around a security issue with comments inside attributes */\n if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\\/(style|title)/i, value)) {\n _removeAttribute(name, currentNode);\n continue;\n }\n\n /* Handle attributes that require Trusted Types */\n if (trustedTypesPolicy && typeof trustedTypes === 'object' && typeof trustedTypes.getAttributeType === 'function') {\n if (namespaceURI) ; else {\n switch (trustedTypes.getAttributeType(lcTag, lcName)) {\n case 'TrustedHTML':\n {\n value = trustedTypesPolicy.createHTML(value);\n break;\n }\n case 'TrustedScriptURL':\n {\n value = trustedTypesPolicy.createScriptURL(value);\n break;\n }\n }\n }\n }\n\n /* Handle invalid data-* attribute set by try-catching it */\n try {\n if (namespaceURI) {\n currentNode.setAttributeNS(namespaceURI, name, value);\n } else {\n /* Fallback to setAttribute() for browser-unrecognized namespaces e.g. \"x-schema\". */\n currentNode.setAttribute(name, value);\n }\n if (_isClobbered(currentNode)) {\n _forceRemove(currentNode);\n } else {\n arrayPop(DOMPurify.removed);\n }\n } catch (_) {}\n }\n\n /* Execute a hook if present */\n _executeHook('afterSanitizeAttributes', currentNode, null);\n };\n\n /**\n * _sanitizeShadowDOM\n *\n * @param {DocumentFragment} fragment to iterate over recursively\n */\n const _sanitizeShadowDOM = function _sanitizeShadowDOM(fragment) {\n let shadowNode = null;\n const shadowIterator = _createNodeIterator(fragment);\n\n /* Execute a hook if present */\n _executeHook('beforeSanitizeShadowDOM', fragment, null);\n while (shadowNode = shadowIterator.nextNode()) {\n /* Execute a hook if present */\n _executeHook('uponSanitizeShadowNode', shadowNode, null);\n\n /* Sanitize tags and elements */\n if (_sanitizeElements(shadowNode)) {\n continue;\n }\n\n /* Deep shadow DOM detected */\n if (shadowNode.content instanceof DocumentFragment) {\n _sanitizeShadowDOM(shadowNode.content);\n }\n\n /* Check attributes, sanitize if necessary */\n _sanitizeAttributes(shadowNode);\n }\n\n /* Execute a hook if present */\n _executeHook('afterSanitizeShadowDOM', fragment, null);\n };\n\n /**\n * Sanitize\n * Public method providing core sanitation functionality\n *\n * @param {String|Node} dirty string or DOM node\n * @param {Object} cfg object\n */\n // eslint-disable-next-line complexity\n DOMPurify.sanitize = function (dirty) {\n let cfg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n let body = null;\n let importedNode = null;\n let currentNode = null;\n let returnNode = null;\n /* Make sure we have a string to sanitize.\n DO NOT return early, as this will return the wrong type if\n the user has requested a DOM object rather than a string */\n IS_EMPTY_INPUT = !dirty;\n if (IS_EMPTY_INPUT) {\n dirty = '';\n }\n\n /* Stringify, in case dirty is an object */\n if (typeof dirty !== 'string' && !_isNode(dirty)) {\n if (typeof dirty.toString === 'function') {\n dirty = dirty.toString();\n if (typeof dirty !== 'string') {\n throw typeErrorCreate('dirty is not a string, aborting');\n }\n } else {\n throw typeErrorCreate('toString is not a function');\n }\n }\n\n /* Return dirty HTML if DOMPurify cannot run */\n if (!DOMPurify.isSupported) {\n return dirty;\n }\n\n /* Assign config vars */\n if (!SET_CONFIG) {\n _parseConfig(cfg);\n }\n\n /* Clean up removed elements */\n DOMPurify.removed = [];\n\n /* Check if dirty is correctly typed for IN_PLACE */\n if (typeof dirty === 'string') {\n IN_PLACE = false;\n }\n if (IN_PLACE) {\n /* Do some early pre-sanitization to avoid unsafe root nodes */\n if (dirty.nodeName) {\n const tagName = transformCaseFunc(dirty.nodeName);\n if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) {\n throw typeErrorCreate('root node is forbidden and cannot be sanitized in-place');\n }\n }\n } else if (dirty instanceof Node) {\n /* If dirty is a DOM element, append to an empty document to avoid\n elements being stripped by the parser */\n body = _initDocument('');\n importedNode = body.ownerDocument.importNode(dirty, true);\n if (importedNode.nodeType === NODE_TYPE.element && importedNode.nodeName === 'BODY') {\n /* Node is already a body, use as is */\n body = importedNode;\n } else if (importedNode.nodeName === 'HTML') {\n body = importedNode;\n } else {\n // eslint-disable-next-line unicorn/prefer-dom-node-append\n body.appendChild(importedNode);\n }\n } else {\n /* Exit directly if we have nothing to do */\n if (!RETURN_DOM && !SAFE_FOR_TEMPLATES && !WHOLE_DOCUMENT &&\n // eslint-disable-next-line unicorn/prefer-includes\n dirty.indexOf('<') === -1) {\n return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(dirty) : dirty;\n }\n\n /* Initialize the document to work on */\n body = _initDocument(dirty);\n\n /* Check we have a DOM node from the data */\n if (!body) {\n return RETURN_DOM ? null : RETURN_TRUSTED_TYPE ? emptyHTML : '';\n }\n }\n\n /* Remove first element node (ours) if FORCE_BODY is set */\n if (body && FORCE_BODY) {\n _forceRemove(body.firstChild);\n }\n\n /* Get node iterator */\n const nodeIterator = _createNodeIterator(IN_PLACE ? dirty : body);\n\n /* Now start iterating over the created document */\n while (currentNode = nodeIterator.nextNode()) {\n /* Sanitize tags and elements */\n if (_sanitizeElements(currentNode)) {\n continue;\n }\n\n /* Shadow DOM detected, sanitize it */\n if (currentNode.content instanceof DocumentFragment) {\n _sanitizeShadowDOM(currentNode.content);\n }\n\n /* Check attributes, sanitize if necessary */\n _sanitizeAttributes(currentNode);\n }\n\n /* If we sanitized `dirty` in-place, return it. */\n if (IN_PLACE) {\n return dirty;\n }\n\n /* Return sanitized string or DOM */\n if (RETURN_DOM) {\n if (RETURN_DOM_FRAGMENT) {\n returnNode = createDocumentFragment.call(body.ownerDocument);\n while (body.firstChild) {\n // eslint-disable-next-line unicorn/prefer-dom-node-append\n returnNode.appendChild(body.firstChild);\n }\n } else {\n returnNode = body;\n }\n if (ALLOWED_ATTR.shadowroot || ALLOWED_ATTR.shadowrootmode) {\n /*\n AdoptNode() is not used because internal state is not reset\n (e.g. the past names map of a HTMLFormElement), this is safe\n in theory but we would rather not risk another attack vector.\n The state that is cloned by importNode() is explicitly defined\n by the specs.\n */\n returnNode = importNode.call(originalDocument, returnNode, true);\n }\n return returnNode;\n }\n let serializedHTML = WHOLE_DOCUMENT ? body.outerHTML : body.innerHTML;\n\n /* Serialize doctype if allowed */\n if (WHOLE_DOCUMENT && ALLOWED_TAGS['!doctype'] && body.ownerDocument && body.ownerDocument.doctype && body.ownerDocument.doctype.name && regExpTest(DOCTYPE_NAME, body.ownerDocument.doctype.name)) {\n serializedHTML = '\\n' + serializedHTML;\n }\n\n /* Sanitize final string template-safe */\n if (SAFE_FOR_TEMPLATES) {\n arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {\n serializedHTML = stringReplace(serializedHTML, expr, ' ');\n });\n }\n return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(serializedHTML) : serializedHTML;\n };\n\n /**\n * Public method to set the configuration once\n * setConfig\n *\n * @param {Object} cfg configuration object\n */\n DOMPurify.setConfig = function () {\n let cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n _parseConfig(cfg);\n SET_CONFIG = true;\n };\n\n /**\n * Public method to remove the configuration\n * clearConfig\n *\n */\n DOMPurify.clearConfig = function () {\n CONFIG = null;\n SET_CONFIG = false;\n };\n\n /**\n * Public method to check if an attribute value is valid.\n * Uses last set config, if any. Otherwise, uses config defaults.\n * isValidAttribute\n *\n * @param {String} tag Tag name of containing element.\n * @param {String} attr Attribute name.\n * @param {String} value Attribute value.\n * @return {Boolean} Returns true if `value` is valid. Otherwise, returns false.\n */\n DOMPurify.isValidAttribute = function (tag, attr, value) {\n /* Initialize shared config vars if necessary. */\n if (!CONFIG) {\n _parseConfig({});\n }\n const lcTag = transformCaseFunc(tag);\n const lcName = transformCaseFunc(attr);\n return _isValidAttribute(lcTag, lcName, value);\n };\n\n /**\n * AddHook\n * Public method to add DOMPurify hooks\n *\n * @param {String} entryPoint entry point for the hook to add\n * @param {Function} hookFunction function to execute\n */\n DOMPurify.addHook = function (entryPoint, hookFunction) {\n if (typeof hookFunction !== 'function') {\n return;\n }\n hooks[entryPoint] = hooks[entryPoint] || [];\n arrayPush(hooks[entryPoint], hookFunction);\n };\n\n /**\n * RemoveHook\n * Public method to remove a DOMPurify hook at a given entryPoint\n * (pops it from the stack of hooks if more are present)\n *\n * @param {String} entryPoint entry point for the hook to remove\n * @return {Function} removed(popped) hook\n */\n DOMPurify.removeHook = function (entryPoint) {\n if (hooks[entryPoint]) {\n return arrayPop(hooks[entryPoint]);\n }\n };\n\n /**\n * RemoveHooks\n * Public method to remove all DOMPurify hooks at a given entryPoint\n *\n * @param {String} entryPoint entry point for the hooks to remove\n */\n DOMPurify.removeHooks = function (entryPoint) {\n if (hooks[entryPoint]) {\n hooks[entryPoint] = [];\n }\n };\n\n /**\n * RemoveAllHooks\n * Public method to remove all DOMPurify hooks\n */\n DOMPurify.removeAllHooks = function () {\n hooks = {};\n };\n return DOMPurify;\n}\nvar purify = createDOMPurify();\n\nexport { purify as default };\n//# sourceMappingURL=purify.es.mjs.map\n","import React, { useMemo } from 'react';\n// @ts-ignore - DOMPurify 타입 정의 없음\nimport DOMPurify from 'dompurify';\nimport { Div } from '../basic/Div';\nimport type { EditorAttrs } from '../../types';\n\nexport interface HtmlContentProps {\n /**\n * 콘텐츠 (HTML 또는 일반 텍스트)\n */\n content?: string;\n\n /**\n * 콘텐츠가 HTML 형식인지 여부\n * - true: HTML 렌더링 (DOMPurify 적용, prose 스타일)\n * - false: 일반 텍스트 (whitespace-pre-wrap으로 줄바꿈 보존)\n * @default true\n */\n isHtml?: boolean;\n\n /**\n * 사용자 정의 클래스\n */\n className?: string;\n\n /**\n * DOMPurify 설정 오버라이드 (isHtml=true일 때만 사용)\n */\n purifyConfig?: any;\n\n /**\n * 레이아웃 JSON에서 text 속성으로 전달되는 콘텐츠\n * content보다 우선순위가 높음\n */\n text?: string;\n\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * HtmlContent 콘텐츠 렌더링 컴포넌트\n *\n * HTML과 일반 텍스트를 안전하게 렌더링하는 범용 composite 컴포넌트입니다.\n * - isHtml=true: DOMPurify를 사용하여 XSS 공격 방지\n * - isHtml=false: 일반 텍스트로 렌더링 (줄바꿈 보존)\n *\n * @example\n * // HTML 렌더링 (기본값)\n * 안녕하세요

\" />\n *\n * // 일반 텍스트 렌더링\n * \n *\n * // 커스텀 클래스 적용\n * 게시글 내용

\"\n * className=\"prose dark:prose-invert\"\n * />\n *\n * // DOMPurify 설정 커스터마이징 (HTML 모드)\n * 내용

\"\n * purifyConfig={{ ALLOWED_TAGS: ['p', 'br', 'strong', 'em'] }}\n * />\n */\nexport const HtmlContent: React.FC = ({\n content,\n text,\n isHtml = true,\n className = '',\n purifyConfig,\n id,\n editorAttrs,\n}) => {\n // text prop이 우선순위가 높음 (레이아웃 JSON에서 사용)\n const actualContent = text ?? content ?? '';\n\n // 빈 값 처리\n if (!actualContent || actualContent.trim() === '') {\n return null;\n }\n\n // isHtml=false: 일반 텍스트 렌더링\n if (!isHtml) {\n const textClasses = `\n whitespace-pre-wrap\n text-gray-900 dark:text-gray-100\n font-sans\n ${className}\n `.trim().replace(/\\s+/g, ' ');\n\n return (\n
\n {actualContent}\n
\n );\n }\n\n // 기본 DOMPurify 설정 (FORBID 방식: 위험 태그/속성만 차단, 나머지 허용)\n const defaultConfig: any = {\n FORBID_TAGS: [\n // 스크립트 실행\n 'script', 'noscript',\n // 외부 콘텐츠 삽입\n 'iframe', 'frame', 'frameset', 'object', 'embed', 'applet', 'portal',\n // 폼 요소 (피싱 방지)\n 'form', 'input', 'textarea', 'select', 'button',\n // 메타/스타일 조작\n 'style', 'link', 'meta', 'base',\n // 구조 태그 주입\n 'body', 'head', 'html', 'title',\n // SVG/MathML (XSS 벡터)\n 'svg', 'math',\n // 미디어 이벤트 핸들러 (onerror, onloadstart)\n 'audio', 'video', 'source', 'track', 'canvas',\n // UI 오버레이/이벤트\n 'details', 'dialog',\n // HTML 파서 혼란/sanitizer 우회\n 'plaintext', 'xmp', 'listing',\n // 레거시/비표준\n 'marquee', 'noframes', 'noembed', 'template', 'slot',\n ],\n FORBID_ATTR: [\n 'onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur',\n 'ontoggle', 'oncanplay', 'onloadstart',\n 'formaction', 'xlink:href', 'action',\n ],\n ALLOW_DATA_ATTR: true,\n ADD_ATTR: ['target'],\n };\n\n // sanitize된 HTML을 메모이제이션\n const sanitizedHtml = useMemo(() => {\n const config = purifyConfig\n ? {\n ...defaultConfig,\n ...purifyConfig,\n // 보안 기본값은 항상 유지 (사용자 설정으로 덮어쓰기 방지)\n FORBID_TAGS: [...defaultConfig.FORBID_TAGS, ...(purifyConfig.FORBID_TAGS || [])],\n FORBID_ATTR: [...defaultConfig.FORBID_ATTR, ...(purifyConfig.FORBID_ATTR || [])],\n }\n : defaultConfig;\n const cleaned = DOMPurify.sanitize(actualContent, config) as unknown as string;\n\n // target=\"_blank\" 링크에 rel 속성 추가 (보안)\n return cleaned.replace(\n /]*?)href=[\"']([^\"']+)[\"']([^>]*?)>/gi,\n (match: string, before: string, href: string, after: string) => {\n if (href.startsWith('http://') || href.startsWith('https://')) {\n if (!match.includes('rel=')) {\n return ``;\n }\n }\n return match;\n }\n );\n }, [actualContent, purifyConfig]);\n\n // 컨테이너 클래스 조합\n const containerClasses = `\n prose dark:prose-invert max-w-none\n prose-p:my-2\n prose-headings:font-bold prose-headings:mt-6 prose-headings:mb-4\n prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg\n prose-a:text-blue-600 dark:prose-a:text-blue-400\n prose-a:no-underline hover:prose-a:underline\n prose-blockquote:border-l-4 prose-blockquote:border-gray-300 dark:prose-blockquote:border-gray-600\n prose-blockquote:pl-4 prose-blockquote:italic\n prose-code:bg-gray-100 dark:prose-code:bg-gray-800\n prose-code:px-1 prose-code:py-0.5 prose-code:rounded\n prose-pre:bg-gray-100 dark:prose-pre:bg-gray-800\n prose-pre:p-4 prose-pre:rounded-lg prose-pre:overflow-x-auto\n [&_table]:w-full [&_table]:border-collapse [&_table]:border [&_table]:border-gray-300\n dark:[&_table]:border-gray-600\n [&_th]:border [&_th]:border-gray-300 [&_th]:px-4 [&_th]:py-2 [&_th]:bg-gray-100 [&_th]:text-left\n dark:[&_th]:border-gray-600 dark:[&_th]:bg-gray-800\n [&_td]:border [&_td]:border-gray-300 [&_td]:px-4 [&_td]:py-2\n dark:[&_td]:border-gray-600\n [&_tr:hover]:bg-gray-50 dark:[&_tr:hover]:bg-gray-700/50\n after:content-[''] after:block after:clear-both\n ${className}\n `.trim().replace(/\\s+/g, ' ');\n\n return (\n \n );\n};\n","import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';\nimport type { EditorAttrs } from '../../types';\nimport { Table } from '../basic/Table';\nimport { Thead } from '../basic/Thead';\nimport { Tbody } from '../basic/Tbody';\nimport { Tfoot } from '../basic/Tfoot';\nimport { Tr } from '../basic/Tr';\nimport { Th } from '../basic/Th';\nimport { Td } from '../basic/Td';\nimport { Button } from '../basic/Button';\nimport { Div } from '../basic/Div';\nimport { Span } from '../basic/Span';\nimport { Checkbox } from '../basic/Checkbox';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport { ActionMenu, ActionMenuItem } from './ActionMenu';\nimport { Pagination } from './Pagination';\nimport { P } from '../basic/P';\nimport { A } from '../basic/A';\nimport { Label } from '../basic/Label';\nimport { Input } from '../basic/Input';\nimport { H1 } from '../basic/H1';\nimport { H2 } from '../basic/H2';\nimport { H3 } from '../basic/H3';\nimport { H4 } from '../basic/H4';\nimport { Img } from '../basic/Img';\nimport { Select } from '../basic/Select';\nimport { Textarea } from '../basic/Textarea';\nimport { MultilingualInput } from './MultilingualInput';\nimport { Toggle } from './Toggle';\nimport { StatusBadge } from './StatusBadge';\nimport { Badge } from './Badge';\nimport { HtmlContent } from './HtmlContent';\n\n// Logger 설정 (G7Core 초기화 전에도 동작하도록 폴백 포함)\nconst logger = ((window as any).G7Core?.createLogger?.('Comp:DataGrid')) ?? {\n log: (...args: unknown[]) => console.log('[Comp:DataGrid]', ...args),\n warn: (...args: unknown[]) => console.warn('[Comp:DataGrid]', ...args),\n error: (...args: unknown[]) => console.error('[Comp:DataGrid]', ...args),\n};\n\n// G7Core.t() 번역 함수 참조\nconst t = (key: string, params?: Record) =>\n (window as any).G7Core?.t?.(key, params) ?? key;\n\n// cellChildren 및 expandChildren 렌더링을 위한 컴포넌트 맵\nconst componentMap: Record> = {\n // basic 컴포넌트\n Div,\n Span,\n Button,\n Icon,\n Checkbox,\n P,\n A,\n Label,\n Input,\n H1,\n H2,\n H3,\n H4,\n Img,\n Select,\n Textarea,\n // Table 관련 컴포넌트 (expandChildren에서 SubGrid 렌더링용)\n Table,\n Thead,\n Tbody,\n Tfoot,\n Tr,\n Th,\n Td,\n // composite 컴포넌트\n MultilingualInput,\n Toggle,\n StatusBadge,\n Badge,\n HtmlContent,\n ActionMenu,\n};\n\nexport interface DataGridCellChild {\n id?: string;\n type: 'basic' | 'composite';\n name: string;\n props?: Record;\n text?: string;\n children?: DataGridCellChild[];\n condition?: string;\n}\n\nexport interface DataGridColumn {\n field: string;\n header: string;\n width?: string;\n sortable?: boolean;\n hidden?: boolean;\n required?: boolean;\n render?: (value: any, row: any) => React.ReactNode;\n cellChildren?: DataGridCellChild[];\n}\n\n/**\n * 확장 행(Expandable Row)에 렌더링할 자식 컴포넌트 정의\n * 레이아웃 JSON에서 사용됩니다.\n */\nexport interface DataGridExpandChildren {\n id?: string;\n type: 'basic' | 'composite';\n name: string;\n props?: Record;\n text?: string;\n children?: DataGridExpandChildren[];\n iteration?: {\n source: string;\n item_var?: string;\n index_var?: string;\n };\n}\n\n/**\n * 서브 행(Sub Row)에 렌더링할 자식 컴포넌트 정의 (v1.6.0+)\n *\n * 각 데이터 행 아래에 추가 정보를 표시하는 병합된 행입니다.\n * expandable row와 달리 항상 표시되거나 조건부로 표시됩니다.\n * 모든 컬럼이 병합된 단일 셀로 렌더링됩니다.\n *\n * @example\n * // 배송비 요약 표시\n * {\n * \"subRowChildren\": [\n * {\n * \"type\": \"basic\",\n * \"name\": \"Span\",\n * \"props\": { \"className\": \"text-sm text-gray-500\" },\n * \"text\": \"{{row.fee_summary}}\"\n * }\n * ],\n * \"subRowCondition\": \"{{row.charge_policy !== 'free'}}\"\n * }\n */\nexport interface DataGridSubRowChildren {\n id?: string;\n type: 'basic' | 'composite';\n name: string;\n props?: Record;\n text?: string;\n children?: DataGridSubRowChildren[];\n condition?: string;\n}\n\n/**\n * 푸터 행(Footer Row)의 각 셀 정의 (v1.19.0+)\n *\n * 테이블 하단에 합계/요약 행을 표시합니다.\n * 각 셀은 특정 컬럼의 field에 매핑되거나, colSpan으로 여러 컬럼을 병합합니다.\n */\nexport interface DataGridFooterCell {\n /** 매핑할 컬럼 field명 (이 필드의 컬럼 위치에 셀 배치) */\n field?: string;\n /** 병합할 컬럼 수 (field 미지정 시 사용) */\n colSpan?: number;\n /** 셀 CSS 클래스 */\n className?: string;\n /** 셀 내부에 렌더링할 컴포넌트 (cellChildren과 동일 구조) */\n children?: DataGridCellChild[];\n /** 단순 텍스트 (children 미사용 시) */\n text?: string;\n}\n\nexport interface DataGridProps {\n /** DOM id (transition_overlay.target / overlay_target 으로 spinner mount 영역 지정용) */\n id?: string;\n columns: DataGridColumn[];\n data: any[];\n sortable?: boolean;\n pagination?: boolean;\n pageSize?: number;\n onRowClick?: (row: any) => void;\n className?: string;\n style?: React.CSSProperties;\n\n // 정렬 기능 (외부 제어)\n sortField?: string | null;\n sortDirection?: 'asc' | 'desc';\n onSortChange?: (field: string, direction: 'asc' | 'desc') => void;\n\n // 체크박스 선택 기능\n selectable?: boolean;\n selectedIds?: (string | number)[];\n onSelectionChange?: (ids: (string | number)[]) => void;\n idField?: string;\n\n // 컬럼 표시/숨김 기능\n showColumnSelector?: boolean;\n visibleColumns?: string[];\n onColumnVisibilityChange?: (fields: string[]) => void;\n\n // 반응형 카드 뷰\n responsiveBreakpoint?: number;\n cardRenderer?: (row: any, columns: DataGridColumn[]) => React.ReactNode;\n\n // 행 액션 메뉴\n rowActions?: ActionMenuItem[];\n onRowAction?: (actionId: string | number, row: any) => void;\n\n // 페이지네이션 항상 표시 옵션\n alwaysShowPagination?: boolean;\n\n // 서버 사이드 페이지네이션 (API에서 페이지네이션 처리 시)\n serverSidePagination?: boolean;\n serverCurrentPage?: number;\n serverTotalPages?: number;\n onPageChange?: (page: number) => void;\n\n // 다국어 지원 텍스트 (레이아웃 JSON에서 $t: 문법으로 전달)\n prevText?: string;\n nextText?: string;\n columnSelectorText?: string;\n emptyMessage?: string;\n actionsColumnHeader?: string;\n requiredText?: string;\n selectedCountText?: string;\n loadErrorMessage?: string;\n\n // 페이지네이션 옵션\n showFirstLast?: boolean;\n\n // 확장 행 (Expandable Row) 기능 - v1.3.0+\n expandable?: boolean;\n expandedRowIds?: (string | number)[];\n onExpandChange?: (ids: (string | number)[]) => void;\n expandChildren?: DataGridExpandChildren[];\n expandedRowRender?: (row: any) => React.ReactNode;\n expandColumnWidth?: string;\n expandIconExpanded?: IconName;\n expandIconCollapsed?: IconName;\n /** 행 단위 조건부 확장 필드명 — 해당 필드가 truthy인 행만 확장 가능 */\n expandConditionField?: string;\n\n /**\n * 동적 컬럼 배열 (v1.4.0+)\n *\n * 기존 columns 배열에 동적으로 병합될 컬럼들입니다.\n * insertAfterField가 지정된 경우 해당 필드 뒤에 삽입되고,\n * 그렇지 않으면 columns 배열 끝에 추가됩니다.\n *\n * 모듈 핸들러의 resultTo 패턴과 함께 사용하여\n * 환경설정 기반 동적 컬럼을 구현할 수 있습니다.\n *\n * @example\n * // 레이아웃 JSON에서 init_action으로 동적 컬럼 생성\n * {\n * \"handler\": \"sirsoft-ecommerce.buildProductColumns\",\n * \"params\": { ... },\n * \"resultTo\": { \"target\": \"_local\", \"key\": \"dynamicCols\" }\n * }\n *\n * // DataGrid에서 동적 컬럼 사용\n * {\n * \"name\": \"DataGrid\",\n * \"props\": {\n * \"columns\": [...],\n * \"dynamicColumns\": \"{{_local.dynamicCols}}\"\n * }\n * }\n */\n dynamicColumns?: DataGridColumn[];\n\n /**\n * 동적 컬럼 삽입 위치를 지정하는 필드명\n * 해당 필드 뒤에 dynamicColumns가 삽입됩니다.\n * 지정하지 않으면 columns 끝에 추가됩니다.\n */\n dynamicColumnsInsertAfter?: string;\n\n /**\n * expandChildren에 전달할 추가 컨텍스트 (v1.5.0+)\n *\n * expandChildren 렌더링 시 row 외에 추가로 전달할 데이터입니다.\n * 레이아웃 JSON에서 _local, _computed 값 등을 전달할 때 사용합니다.\n *\n * @example\n * {\n * \"name\": \"DataGrid\",\n * \"props\": {\n * \"expandContext\": {\n * \"optionColumns\": \"{{_local.optionColumns}}\",\n * \"currencies\": \"{{_computed.optionCurrencyColumns}}\"\n * }\n * }\n * }\n */\n expandContext?: Record;\n\n /**\n * 부모 컴포넌트 컨텍스트 (내부 사용)\n *\n * DynamicRenderer에서 전달되며, expandChildren 내부 액션에서\n * G7Core.state.setLocal()이 부모 상태를 업데이트할 수 있도록 합니다.\n */\n __componentContext?: { state?: any; setState?: (updates: any) => void };\n\n // 서브 행 (Sub Row) 기능 - v1.6.0+ (선택적)\n /**\n * 서브 행에 렌더링할 컴포넌트 정의\n *\n * 각 데이터 행 아래에 추가 정보를 표시합니다.\n * 모든 컬럼이 병합된 단일 셀로 렌더링됩니다.\n * 이 prop이 없거나 빈 배열이면 서브 행이 표시되지 않습니다.\n *\n * @example\n * // 배송비 요약을 서브 행으로 표시\n * {\n * \"subRowChildren\": [\n * {\n * \"type\": \"basic\",\n * \"name\": \"Span\",\n * \"props\": { \"className\": \"text-sm text-gray-500\" },\n * \"text\": \"배송비: {{row.fee_summary}}\"\n * }\n * ]\n * }\n */\n subRowChildren?: DataGridSubRowChildren[];\n\n /**\n * 서브 행 표시 조건 (선택적)\n *\n * JavaScript 표현식으로, true일 때만 서브 행이 표시됩니다.\n * row 객체에 접근할 수 있습니다.\n *\n * @example\n * \"{{row.charge_policy !== 'free'}}\" // 무료 배송이 아닐 때만 표시\n * \"{{row.fee_summary}}\" // fee_summary가 있을 때만 표시\n */\n subRowCondition?: string;\n\n /**\n * 서브 행 셀의 CSS 클래스 (선택적)\n *\n * @default \"px-6 py-2 bg-gray-50 dark:bg-gray-900\"\n */\n subRowClassName?: string;\n\n /**\n * 서브 행 렌더 함수 (선택적)\n *\n * subRowChildren 대신 함수로 서브 행 내용을 렌더링합니다.\n * TypeScript/React 코드에서 직접 사용할 때 유용합니다.\n */\n subRowRender?: (row: any) => React.ReactNode;\n\n /**\n * 푸터 행 셀 정의 (v1.19.0+)\n *\n * 테이블 하단에 합계/요약 행을 렌더링합니다.\n * 각 셀은 field로 컬럼 위치에 매핑하거나 colSpan으로 병합합니다.\n *\n * @example\n * {\n * \"footerCells\": [\n * { \"field\": \"product_info\", \"text\": \"합계\", \"className\": \"font-bold\" },\n * { \"field\": \"quantity\", \"text\": \"3개\" },\n * { \"field\": \"subtotal\", \"text\": \"690,000원\", \"className\": \"font-bold\" }\n * ]\n * }\n */\n footerCells?: DataGridFooterCell[];\n\n /**\n * 푸터 행 CSS 클래스 (선택적)\n *\n * @default \"bg-gray-50 dark:bg-gray-800/50 font-medium\"\n */\n footerClassName?: string;\n\n /**\n * 모바일 카드 뷰에서 푸터 렌더링용 컴포넌트 (선택적)\n *\n * 미지정 시 footerCells를 key-value 형태로 자동 렌더링합니다.\n */\n footerCardChildren?: DataGridCellChild[];\n\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * 셀 값을 안전하게 렌더링 가능한 형태로 변환합니다.\n * React에서 객체를 직접 렌더링하면 에러가 발생하므로 이를 방지합니다.\n *\n * @param value 렌더링할 값\n * @returns 렌더링 가능한 문자열 또는 원본 값\n */\nconst safeRenderValue = (value: any): React.ReactNode => {\n // null, undefined는 빈 문자열로\n if (value === null || value === undefined) {\n return '';\n }\n\n // 원시 타입은 그대로 반환\n if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {\n return String(value);\n }\n\n // 배열인 경우 각 요소를 안전하게 변환 후 조인\n if (Array.isArray(value)) {\n return value.map((v) => safeRenderValue(v)).join(', ');\n }\n\n // 객체인 경우 (React 노드 제외)\n if (typeof value === 'object') {\n // React 엘리먼트인 경우 그대로 반환\n if (React.isValidElement(value)) {\n return value;\n }\n\n // MissingValue나 빈 객체 처리 (Laravel의 $this->when() 반환값)\n if (Object.keys(value).length === 0) {\n return '';\n }\n\n // 일반 객체는 JSON 문자열로 변환 시도\n try {\n return JSON.stringify(value);\n } catch {\n logger.warn('객체를 문자열로 변환할 수 없습니다:', value);\n return '[Object]';\n }\n }\n\n // 그 외의 경우 문자열로 변환\n return String(value);\n};\n\n/**\n * subRow 컨테이너의 표시 조건을 평가합니다.\n * JSX 인라인 조건에서 사용되므로 엔진 위임 불가 — 직접 평가합니다.\n *\n * @param condition 조건 문자열 (예: \"{{row.charge_policy !== 'free'}}\")\n * @param row 현재 행 데이터\n * @returns 조건 평가 결과\n */\nconst evaluateSubRowCondition = (condition: string | undefined, row: any): boolean => {\n if (!condition) return true;\n\n // {{...}} 패턴 추출\n const match = condition.match(/^\\{\\{(.+)\\}\\}$/);\n if (!match) return true;\n\n const expr = match[1].trim();\n\n try {\n // row 컨텍스트에서 표현식 평가\n // eslint-disable-next-line no-new-func\n const evaluator = new Function('row', `return ${expr}`);\n return !!evaluator(row);\n } catch (error) {\n logger.warn('subRow 조건 평가 실패:', condition, error);\n return true;\n }\n};\n\n/**\n * cellChildren 배열을 React 요소로 렌더링합니다.\n *\n * G7Core.renderItemChildren을 사용하여 템플릿 엔진의 모든 표현식 처리 기능을 활용합니다.\n * condition 속성은 엔진의 evaluateRenderCondition에서 네이티브로 지원됩니다 (engine-v1.17.1).\n */\nconst renderCellChildren = (\n cellChildren: DataGridCellChild[],\n row: any,\n value: any,\n keyPrefix: string = '',\n componentContext?: { state?: any; setState?: (updates: any) => void }\n): React.ReactNode => {\n const G7Core = (window as any).G7Core;\n if (G7Core?.renderItemChildren) {\n const context = {\n row,\n value,\n $value: value,\n };\n\n return G7Core.renderItemChildren(\n cellChildren,\n context,\n componentMap,\n keyPrefix,\n componentContext ? { componentContext } : undefined\n );\n }\n\n logger.warn('G7Core.renderItemChildren을 사용할 수 없습니다.');\n return null;\n};\n\n/**\n * subRowChildren 배열을 React 요소로 렌더링합니다.\n *\n * @param subRowChildren 렌더링할 컴포넌트 정의 배열\n * @param row 현재 행 데이터\n * @param keyPrefix 키 접두사\n * @returns React 노드\n */\nconst renderSubRowChildren = (\n subRowChildren: DataGridSubRowChildren[],\n row: any,\n keyPrefix: string = '',\n componentContext?: { state?: any; setState?: (updates: any) => void }\n): React.ReactNode => {\n const G7Core = (window as any).G7Core;\n\n if (G7Core?.renderItemChildren) {\n const context = {\n row,\n $value: row,\n };\n\n return G7Core.renderItemChildren(\n subRowChildren,\n context,\n componentMap,\n keyPrefix,\n componentContext ? { componentContext } : undefined\n );\n }\n\n logger.warn('G7Core.renderItemChildren을 사용할 수 없습니다.');\n return null;\n};\n\n/**\n * DataGrid 집합 컴포넌트\n *\n * Table 기본 컴포넌트를 조합하여 데이터 그리드 UI를 구성합니다.\n * 정렬, 필터, 페이지네이션, 체크박스 선택, 컬럼 선택, 반응형 카드 뷰 기능을 포함합니다.\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"DataGrid\",\n * \"props\": {\n * \"columns\": [\n * {\"field\": \"name\", \"header\": \"$t:admin.users.name\", \"sortable\": true, \"required\": true},\n * {\"field\": \"email\", \"header\": \"$t:admin.users.email\", \"required\": true}\n * ],\n * \"data\": \"{{users.data}}\",\n * \"sortable\": true,\n * \"pagination\": true,\n * \"pageSize\": 10,\n * \"selectable\": true,\n * \"showColumnSelector\": true,\n * \"prevText\": \"$t:common.prev\",\n * \"nextText\": \"$t:common.next\",\n * \"columnSelectorText\": \"$t:common.column_selector\",\n * \"emptyMessage\": \"$t:common.no_data\",\n * \"actionsColumnHeader\": \"$t:common.actions\",\n * \"requiredText\": \"$t:common.required\"\n * }\n * }\n */\nexport const DataGrid: React.FC = ({\n id,\n columns,\n data,\n sortable = true,\n pagination = false,\n pageSize = 10,\n onRowClick,\n className = '',\n style,\n // 정렬 (외부 제어)\n sortField: externalSortField,\n sortDirection: externalSortDirection,\n onSortChange,\n // 체크박스 선택\n selectable = false,\n selectedIds = [],\n onSelectionChange,\n idField = 'id',\n // 컬럼 표시/숨김\n showColumnSelector = false,\n visibleColumns: initialVisibleColumns,\n onColumnVisibilityChange,\n // 반응형\n responsiveBreakpoint = 768,\n cardRenderer,\n // 행 액션\n rowActions,\n onRowAction,\n // 페이지네이션 항상 표시\n alwaysShowPagination = false,\n // 서버 사이드 페이지네이션\n serverSidePagination = false,\n serverCurrentPage,\n serverTotalPages,\n onPageChange,\n // 다국어 텍스트\n prevText,\n nextText,\n columnSelectorText,\n emptyMessage,\n actionsColumnHeader,\n requiredText,\n selectedCountText,\n // 페이지네이션 옵션\n showFirstLast = true,\n // 확장 행 (Expandable Row)\n expandable = false,\n expandedRowIds: externalExpandedRowIds,\n onExpandChange,\n expandChildren,\n expandedRowRender,\n expandColumnWidth = '48px',\n expandIconExpanded = IconName.ChevronDown,\n expandIconCollapsed = IconName.ChevronRight,\n expandConditionField,\n // 동적 컬럼\n dynamicColumns,\n dynamicColumnsInsertAfter,\n // expandChildren 추가 컨텍스트\n expandContext,\n // 부모 컴포넌트 컨텍스트 (내부 사용)\n __componentContext,\n // 서브 행 (Sub Row) - 선택적\n subRowChildren,\n subRowCondition,\n subRowClassName = 'px-6 py-2 bg-gray-50 dark:bg-gray-900',\n subRowRender,\n // 푸터 행 (Footer Row) - v1.19.0+\n footerCells,\n footerClassName = 'bg-gray-50 dark:bg-gray-800/50 font-medium',\n footerCardChildren,\n editorAttrs,\n}) => {\n // props로 전달된 값이 없으면 undefined (Pagination이 기본 화살표 사용)\n const resolvedPrevText = prevText || undefined;\n const resolvedNextText = nextText || undefined;\n const resolvedColumnSelectorText = columnSelectorText ?? t('common.column_selector');\n const resolvedEmptyMessage = emptyMessage ?? t('common.no_data');\n const resolvedActionsColumnHeader = actionsColumnHeader ?? t('common.actions');\n const resolvedRequiredText = requiredText ?? t('common.required');\n const resolvedSelectedCountText = selectedCountText ?? t('common.selected_count');\n\n // G7Core.useControllableState 훅 참조 (Phase 2-2)\n const G7Core = (window as any).G7Core;\n const useControllableState = G7Core?.useControllableState as\n | ((\n controlledValue: T | undefined,\n defaultValue: T,\n onChange?: (value: T) => void,\n options?: { isEqual?: (a: T, b: T) => boolean }\n ) => [T, (value: T | ((prev: T) => T)) => void])\n | undefined;\n const shallowArrayEqual = G7Core?.shallowArrayEqual as\n | ((a: T[], b: T[]) => boolean)\n | undefined;\n\n // 정렬 상태 - useControllableState 적용\n // 외부 제어(externalSortField)가 있으면 Controlled, 없으면 Uncontrolled\n const [sortField, setSortField] = useControllableState\n ? useControllableState(externalSortField, null, (value: string | null) => {\n if (value !== null) {\n onSortChange?.(value, sortDirection);\n }\n })\n : [externalSortField ?? null, () => {}];\n\n const [sortDirection, setSortDirection] = useControllableState\n ? useControllableState<'asc' | 'desc'>(externalSortDirection, 'asc', (value: 'asc' | 'desc') => {\n if (sortField !== null) {\n onSortChange?.(sortField, value);\n }\n })\n : [externalSortDirection ?? 'asc', () => {}];\n\n const [currentPage, setCurrentPage] = useState(1);\n\n // 확장 행 상태 관리 - useControllableState 적용 (Phase 2-2)\n // 외부 제어(externalExpandedRowIds)가 있으면 Controlled, 없으면 Uncontrolled\n const [expandedRowIds, setExpandedRowIds] = useControllableState\n ? useControllableState<(string | number)[]>(\n externalExpandedRowIds,\n [],\n onExpandChange,\n { isEqual: shallowArrayEqual }\n )\n : [externalExpandedRowIds ?? [], () => {}];\n const [isColumnSelectorOpen, setIsColumnSelectorOpen] = useState(false);\n const columnSelectorRef = useRef(null);\n\n // G7Core.useResponsive를 통해 반응형 상태 구독\n // G7Core는 위에서 이미 선언됨 (Phase 2-2)\n const useResponsive = G7Core?.useResponsive;\n const responsiveValue = useResponsive?.();\n const isMobileView = responsiveValue\n ? responsiveValue.width < responsiveBreakpoint\n : typeof window !== 'undefined' && window.innerWidth < responsiveBreakpoint;\n\n // 동적 컬럼 병합\n // dynamicColumns가 있으면 columns에 병합하고, dynamicColumnsInsertAfter 위치에 삽입\n const mergedColumns = useMemo(() => {\n if (!dynamicColumns || !Array.isArray(dynamicColumns) || dynamicColumns.length === 0) {\n return columns;\n }\n\n // 삽입 위치 찾기\n if (dynamicColumnsInsertAfter) {\n const insertIndex = columns.findIndex((col) => col.field === dynamicColumnsInsertAfter);\n if (insertIndex !== -1) {\n return [\n ...columns.slice(0, insertIndex + 1),\n ...dynamicColumns,\n ...columns.slice(insertIndex + 1),\n ];\n }\n }\n\n // 삽입 위치가 없으면 끝에 추가\n return [...columns, ...dynamicColumns];\n }, [columns, dynamicColumns, dynamicColumnsInsertAfter]);\n\n // 표시할 컬럼 관리 (hidden 속성 기반 초기값 설정)\n // 참고: mergedColumns가 변경되면 useEffect에서 동기화됨\n const [visibleColumns, setVisibleColumns] = useState(() => {\n if (initialVisibleColumns && initialVisibleColumns.length > 0) return initialVisibleColumns;\n return columns.filter((col) => !col.hidden).map((col) => col.field);\n });\n\n // 외부 visibleColumns가 변경되면 내부 상태 동기화\n useEffect(() => {\n if (initialVisibleColumns && initialVisibleColumns.length > 0) {\n setVisibleColumns(initialVisibleColumns);\n }\n }, [initialVisibleColumns]);\n\n // columns prop이 변경되면 (다른 DataGrid = 다른 페이지) 내부 visibleColumns 리셋\n const prevColumnFieldsRef = useRef('');\n useEffect(() => {\n const currentFields = columns.map(col => col.field).join(',');\n if (prevColumnFieldsRef.current && currentFields !== prevColumnFieldsRef.current) {\n // columns가 변경되었고, 외부 visibleColumns가 없으면 새 columns 기준으로 리셋\n if (!initialVisibleColumns || initialVisibleColumns.length === 0) {\n setVisibleColumns(columns.filter(col => !col.hidden).map(col => col.field));\n }\n }\n prevColumnFieldsRef.current = currentFields;\n }, [columns, initialVisibleColumns]);\n\n // 동적 컬럼이 추가되면 visibleColumns에 자동으로 포함\n // 단, 외부에서 전달된 initialVisibleColumns가 있으면 그 값을 존중\n const prevDynamicFieldsRef = useRef([]);\n const hasInitialColumnsRef = useRef(null);\n\n useEffect(() => {\n if (dynamicColumns && dynamicColumns.length > 0) {\n const currentDynamicFields = dynamicColumns.map((col) => col.field);\n\n // 최초 실행 시 initialVisibleColumns 존재 여부 확인\n if (hasInitialColumnsRef.current === null) {\n hasInitialColumnsRef.current = initialVisibleColumns !== undefined && initialVisibleColumns.length > 0;\n\n // initialVisibleColumns가 있으면 현재 동적 필드를 \"이미 알려진\" 것으로 기록\n // 이렇게 하면 외부에서 관리하는 visibleColumns를 존중함\n if (hasInitialColumnsRef.current) {\n prevDynamicFieldsRef.current = currentDynamicFields;\n return; // 외부 visibleColumns 존중, 자동 추가 안 함\n }\n }\n\n const prevDynamicFields = prevDynamicFieldsRef.current;\n\n // 새로 추가된 동적 필드만 찾기 (기존에 없던 필드)\n const trulyNewFields = currentDynamicFields.filter(\n (field) => !prevDynamicFields.includes(field)\n );\n\n // 새로운 동적 필드가 있을 때만 자동 추가\n if (trulyNewFields.length > 0) {\n const fieldsToAdd = trulyNewFields.filter((field) => !visibleColumns.includes(field));\n if (fieldsToAdd.length > 0) {\n const updatedVisible = [...visibleColumns, ...fieldsToAdd];\n setVisibleColumns(updatedVisible);\n onColumnVisibilityChange?.(updatedVisible);\n }\n }\n\n // 현재 동적 필드 목록 저장\n prevDynamicFieldsRef.current = currentDynamicFields;\n }\n }, [dynamicColumns]); // visibleColumns 의존성 제외하여 무한 루프 방지\n\n // 데이터가 변경되면 첫 페이지로 리셋 (서버 사이드 페이지네이션이 아닐 때만)\n useEffect(() => {\n if (!serverSidePagination) {\n setCurrentPage(1);\n }\n }, [data, serverSidePagination]);\n\n // 컬럼 선택 메뉴 외부 클릭 감지\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (columnSelectorRef.current && !columnSelectorRef.current.contains(event.target as Node)) {\n setIsColumnSelectorOpen(false);\n }\n };\n\n if (isColumnSelectorOpen) {\n document.addEventListener('mousedown', handleClickOutside);\n }\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [isColumnSelectorOpen]);\n\n // 표시할 컬럼 필터링 (mergedColumns에서 visibleColumns만 표시)\n // showColumnSelector가 false이고 외부 visibleColumns도 없으면 모든 비-hidden 컬럼 표시\n // (SPA 네비게이션 시 React 컴포넌트 재사용으로 이전 페이지의 visibleColumns가 남는 문제 방지)\n const displayColumns = useMemo(() => {\n if (!showColumnSelector && (!initialVisibleColumns || initialVisibleColumns.length === 0)) {\n return mergedColumns.filter((col) => !col.hidden);\n }\n return mergedColumns.filter((col) => visibleColumns.includes(col.field));\n }, [mergedColumns, visibleColumns, showColumnSelector, initialVisibleColumns]);\n\n // 정렬 처리\n // onSortChange 가 연결된 경우(controlled) 정렬 주체는 서버다. 헤더 클릭 →\n // onSortChange → 상위가 query 갱신 후 API 재요청 → 서버가 새 순서를 내려준다.\n // 이때 data 는 이미 서버가 정렬한 결과이므로 클라이언트가 다시 정렬하면 안 된다\n // (프론트는 서버가 내려준 순서를 그대로 출력한다). 특히 클라이언트 정렬은 null\n // 값 비교 시 항상 앞으로 밀어 서버 ORDER BY 순서를 훼손한다.\n // onSortChange 가 없는 경우(uncontrolled)에만 컴포넌트가 단독 정렬 주체로서\n // 전달받은 로컬 데이터를 클라이언트에서 정렬한다.\n const sortedData = useMemo(() => {\n if (!sortField || !sortable || !data) return data || [];\n if (onSortChange) return data;\n\n return [...data].sort((a, b) => {\n const aValue = a[sortField];\n const bValue = b[sortField];\n\n if (aValue === bValue) return 0;\n\n const comparison = aValue > bValue ? 1 : -1;\n return sortDirection === 'asc' ? comparison : -comparison;\n });\n }, [data, sortField, sortDirection, sortable, onSortChange]);\n\n // 페이지네이션 처리\n const paginatedData = useMemo(() => {\n // 서버 사이드 페이지네이션인 경우 데이터를 그대로 사용 (이미 서버에서 페이징됨)\n if (serverSidePagination) return sortedData;\n if (!pagination) return sortedData;\n\n const start = (currentPage - 1) * pageSize;\n const end = start + pageSize;\n return sortedData.slice(start, end);\n }, [sortedData, currentPage, pageSize, pagination, serverSidePagination]);\n\n // 서버 사이드 페이지네이션인 경우 서버에서 전달된 값 사용\n const effectiveCurrentPage = serverSidePagination ? (serverCurrentPage || 1) : currentPage;\n const effectiveTotalPages = serverSidePagination ? (serverTotalPages || 1) : Math.ceil((sortedData?.length || 0) / pageSize);\n\n // 페이지 변경 핸들러\n const handlePageChange = useCallback((page: number) => {\n if (serverSidePagination && onPageChange) {\n onPageChange(page);\n } else {\n setCurrentPage(page);\n }\n }, [serverSidePagination, onPageChange]);\n\n // 정렬 토글 (Phase 2-2: useControllableState로 단순화)\n const handleSort = (field: string) => {\n if (!sortable) return;\n\n const column = columns.find((col) => col.field === field);\n if (column?.sortable === false) return;\n\n const newDirection: 'asc' | 'desc' = sortField === field && sortDirection === 'asc' ? 'desc' : 'asc';\n\n // useControllableState 사용 시: setter가 onChange 콜백 자동 호출\n // 폴백 시: 직접 onSortChange 호출\n if (useControllableState) {\n setSortField(field);\n setSortDirection(newDirection);\n } else if (onSortChange) {\n onSortChange(field, newDirection);\n }\n };\n\n // 전체 선택 처리\n const handleSelectAll = useCallback(() => {\n if (!onSelectionChange || !paginatedData) return;\n\n const allIds = paginatedData.map((row) => row[idField]);\n const allSelected = allIds.every((id) => selectedIds.includes(id));\n\n if (allSelected) {\n onSelectionChange(selectedIds.filter((id) => !allIds.includes(id)));\n } else {\n const newSelectedIds = [...new Set([...selectedIds, ...allIds])];\n onSelectionChange(newSelectedIds);\n }\n }, [paginatedData, selectedIds, onSelectionChange, idField]);\n\n // 개별 선택 처리\n const handleSelectRow = useCallback(\n (rowId: string | number) => {\n if (!onSelectionChange) return;\n\n if (selectedIds.includes(rowId)) {\n onSelectionChange(selectedIds.filter((id) => id !== rowId));\n } else {\n onSelectionChange([...selectedIds, rowId]);\n }\n },\n [selectedIds, onSelectionChange]\n );\n\n // 컬럼 표시/숨김 토글\n const handleColumnToggle = useCallback(\n (field: string) => {\n const column = mergedColumns.find((col) => col.field === field);\n if (column?.required) return;\n\n const newVisibleColumns = visibleColumns.includes(field)\n ? visibleColumns.filter((f) => f !== field)\n : [...visibleColumns, field];\n\n setVisibleColumns(newVisibleColumns);\n onColumnVisibilityChange?.(newVisibleColumns);\n },\n [mergedColumns, visibleColumns, onColumnVisibilityChange]\n );\n\n // 행 액션 처리\n const handleRowAction = useCallback(\n (actionId: string | number, row: any) => {\n onRowAction?.(actionId, row);\n },\n [onRowAction]\n );\n\n /**\n * 행 데이터 기반으로 rowActions의 disabled 상태를 결정합니다.\n * disabledField가 지정된 경우 해당 경로의 값이 falsy면 disabled 처리합니다.\n */\n const resolveRowActions = useCallback(\n (row: any): ActionMenuItem[] => {\n if (!rowActions) return [];\n return rowActions.map((action) => {\n let isDisabled = action.disabled ?? false;\n if (action.disabledField && !isDisabled) {\n const parts = action.disabledField.split('.');\n let value: any = row;\n for (const part of parts) {\n value = value?.[part];\n }\n if (!value) {\n isDisabled = true;\n }\n }\n return {\n ...action,\n disabled: isDisabled,\n onClick: () => handleRowAction(action.id, row),\n };\n });\n },\n [rowActions, handleRowAction]\n );\n\n // 행 단위 확장 가능 여부 확인\n const isRowExpandable = useCallback(\n (row: any): boolean => {\n if (!expandConditionField) return true;\n const value = row[expandConditionField];\n return Array.isArray(value) ? value.length > 0 : !!value;\n },\n [expandConditionField]\n );\n\n // 확장 행 토글 처리\n // 확장 토글 (Phase 2-2: useControllableState로 단순화)\n const handleExpandToggle = useCallback(\n (rowId: string | number) => {\n const newExpandedIds = expandedRowIds.includes(rowId)\n ? expandedRowIds.filter((id: string | number) => id !== rowId)\n : [...expandedRowIds, rowId];\n\n // useControllableState 사용 시: setter가 onChange 콜백 자동 호출\n // 폴백 시: 직접 onExpandChange 호출\n if (useControllableState) {\n setExpandedRowIds(newExpandedIds);\n } else if (onExpandChange) {\n onExpandChange(newExpandedIds);\n }\n },\n [expandedRowIds, onExpandChange, useControllableState, setExpandedRowIds]\n );\n\n // 행이 확장되었는지 확인\n const isRowExpanded = useCallback(\n (rowId: string | number) => expandedRowIds.includes(rowId),\n [expandedRowIds]\n );\n\n // 확장 행 콘텐츠 렌더링 (Phase 2-1: G7Core.renderExpandContent API 사용으로 간소화)\n const renderExpandedContent = useCallback(\n (row: any) => {\n // expandedRowRender 함수가 제공된 경우 우선 사용\n if (expandedRowRender) {\n return expandedRowRender(row);\n }\n\n // expandChildren이 제공된 경우 G7Core.renderExpandContent 사용\n // 기존 ~80줄의 복잡한 로직이 renderExpandContent API 내부로 캡슐화됨\n // G7Core는 컴포넌트 시작 부분에서 이미 선언됨 (Phase 2-2)\n if (expandChildren && expandChildren.length > 0 && G7Core?.renderExpandContent) {\n return G7Core.renderExpandContent({\n children: expandChildren,\n row,\n expandContext,\n componentContext: __componentContext,\n componentMap,\n keyPrefix: `expand-${row[idField]}`,\n });\n }\n\n return null;\n },\n // __componentContext?.state를 의존성에 추가하여 상태 변경 시 확장 영역이 다시 렌더링되도록 함\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [expandedRowRender, expandChildren, idField, expandContext, __componentContext, __componentContext?.state]\n );\n\n // 전체 선택 상태 계산\n const isAllSelected = useMemo(() => {\n if (!paginatedData || paginatedData.length === 0) return false;\n return paginatedData.every((row) => selectedIds.includes(row[idField]));\n }, [paginatedData, selectedIds, idField]);\n\n const isIndeterminate = useMemo(() => {\n if (!paginatedData || paginatedData.length === 0) return false;\n const selectedCount = paginatedData.filter((row) => selectedIds.includes(row[idField])).length;\n return selectedCount > 0 && selectedCount < paginatedData.length;\n }, [paginatedData, selectedIds, idField]);\n\n // 기본 카드 렌더러\n const defaultCardRenderer = (row: any, cols: DataGridColumn[]) => {\n const rowId = row[idField];\n const expanded = isRowExpanded(rowId);\n\n return (\n
\n
\n {/* 확장 버튼 (카드 뷰) */}\n {expandable && isRowExpandable(row) && (\n handleExpandToggle(rowId)}\n className=\"p-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors mr-2\"\n aria-label={expanded ? 'Collapse card' : 'Expand card'}\n >\n \n \n )}\n\n {selectable && (\n handleSelectRow(row[idField])}\n className=\"w-4 h-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded mr-3 mt-1\"\n />\n )}\n
\n
\n {cols.map((col) => (\n
\n \n {col.header}\n \n
\n {col.cellChildren && col.cellChildren.length > 0\n ? renderCellChildren(col.cellChildren, row, row[col.field], `card-${row[idField]}-${col.field}`, __componentContext)\n : col.render\n ? col.render(row[col.field], row)\n : safeRenderValue(row[col.field])}\n
\n
\n ))}\n
\n
\n {rowActions && rowActions.length > 0 && (\n
\n \n
\n )}\n
\n\n {/* 확장된 콘텐츠 (카드 뷰) */}\n {expandable && expanded && isRowExpandable(row) && (\n
\n {renderExpandedContent(row)}\n
\n )}\n\n {/* 서브 행 콘텐츠 (카드 뷰) */}\n {(subRowChildren && subRowChildren.length > 0 || subRowRender) &&\n evaluateSubRowCondition(subRowCondition, row) && (\n
\n {subRowRender\n ? subRowRender(row)\n : renderSubRowChildren(subRowChildren!, row, `card-subrow-${rowId}`, __componentContext)}\n
\n )}\n
\n );\n };\n\n // 모바일 카드 뷰\n if (isMobileView) {\n return (\n
\n {/* 컬럼 선택 메뉴 */}\n {showColumnSelector && (\n
\n
\n setIsColumnSelectorOpen(!isColumnSelectorOpen)}\n className=\"flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700\"\n >\n \n \n {resolvedColumnSelectorText}\n \n \n\n {isColumnSelectorOpen && (\n
\n
\n {mergedColumns.map((col) => (\n !col.required && handleColumnToggle(col.field)}\n >\n {}}\n className=\"w-4 h-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded\"\n />\n \n {col.header}\n {col.required && (\n \n ({resolvedRequiredText})\n \n )}\n \n
\n ))}\n
\n
\n )}\n
\n
\n )}\n\n {/* 선택된 항목 수 표시 */}\n {selectable && selectedIds.length > 0 && resolvedSelectedCountText && (\n
\n {resolvedSelectedCountText.replace('{count}', String(selectedIds.length))}\n
\n )}\n\n {/* 카드 목록 — body wrapper 에 `${id}__body` 부여 (pagination 제외 영역) */}\n
\n {paginatedData && paginatedData.length > 0 ? (\n paginatedData.map((row, index) => (\n
\n {cardRenderer\n ? cardRenderer(row, displayColumns)\n : defaultCardRenderer(row, displayColumns)}\n
\n ))\n ) : (\n
\n {resolvedEmptyMessage}\n
\n )}\n
\n\n {/* 푸터 (모바일 카드 뷰) - v1.19.0+ */}\n {footerCells && footerCells.length > 0 && paginatedData && paginatedData.length > 0 && (\n
\n {footerCardChildren && footerCardChildren.length > 0\n ? renderCellChildren(footerCardChildren, {}, null, 'footer-card', __componentContext)\n : (\n
\n {footerCells.filter(c => c.text || (c.children && c.children.length > 0)).map((cell, idx) => {\n const column = displayColumns.find(col => col.field === cell.field);\n return (\n
\n {column?.header || ''}\n \n {cell.children && cell.children.length > 0\n ? renderCellChildren(cell.children, {}, null, `footer-mobile-${idx}`, __componentContext)\n : cell.text || ''}\n \n
\n );\n })}\n
\n )\n }\n
\n )}\n\n {/* 페이지네이션 */}\n {pagination && (alwaysShowPagination || effectiveTotalPages > 1) && (\n
\n \n
\n )}\n \n );\n }\n\n // 데스크톱 테이블 뷰\n return (\n
\n {/* 컬럼 선택 메뉴 */}\n {showColumnSelector && (\n
\n
\n setIsColumnSelectorOpen(!isColumnSelectorOpen)}\n className=\"flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700\"\n >\n \n \n {resolvedColumnSelectorText}\n \n \n\n {isColumnSelectorOpen && (\n
\n
\n {mergedColumns.map((col) => (\n !col.required && handleColumnToggle(col.field)}\n >\n {}}\n className=\"w-4 h-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded\"\n />\n \n {col.header}\n {col.required && (\n \n ({resolvedRequiredText})\n \n )}\n \n
\n ))}\n
\n
\n )}\n
\n
\n )}\n\n {/* 선택된 항목 수 표시 */}\n {selectable && selectedIds.length > 0 && resolvedSelectedCountText && (\n
\n {resolvedSelectedCountText.replace('{count}', String(selectedIds.length))}\n
\n )}\n\n {/* 테이블 — body wrapper 에 `${id}__body` 부여 (pagination 제외 영역) */}\n
\n \n \n \n {/* 확장 버튼 컬럼 */}\n {expandable && (\n \n )}\n\n {/* 체크박스 컬럼 */}\n {selectable && (\n \n )}\n\n {/* 데이터 컬럼 */}\n {displayColumns.map((column) => (\n handleSort(column.field)}\n >\n {column.header}\n {sortField === column.field && (\n \n {sortDirection === 'asc' ? '↑' : '↓'}\n \n )}\n \n ))}\n\n {/* 액션 컬럼 */}\n {rowActions && rowActions.length > 0 && (\n \n )}\n \n \n \n {paginatedData && paginatedData.length > 0 ? (\n paginatedData.map((row, rowIndex) => {\n const rowId = row[idField] || rowIndex;\n const expanded = isRowExpanded(rowId);\n\n return (\n \n {/* 데이터 행 */}\n 0 ? 'border-t border-gray-200 dark:border-gray-700' : ''}`}\n onClick={() => onRowClick?.(row)}\n >\n {/* 확장 버튼 */}\n {expandable && (\n e.stopPropagation()}\n >\n {isRowExpandable(row) ? (\n handleExpandToggle(rowId)}\n className=\"p-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors\"\n aria-label={expanded ? 'Collapse row' : 'Expand row'}\n >\n \n \n ) : null}\n \n )}\n\n {/* 체크박스 */}\n {selectable && (\n \n )}\n\n {/* 데이터 셀 */}\n {displayColumns.map((column) => (\n \n {column.cellChildren && column.cellChildren.length > 0\n ? renderCellChildren(column.cellChildren, row, row[column.field], `${row[idField]}-${column.field}`, __componentContext)\n : column.render\n ? column.render(row[column.field], row)\n : safeRenderValue(row[column.field])}\n \n ))}\n\n {/* 액션 메뉴 */}\n {rowActions && rowActions.length > 0 && (\n e.stopPropagation()}\n >\n \n \n )}\n \n\n {/* 확장된 행 콘텐츠 */}\n {expandable && expanded && isRowExpandable(row) && (\n \n 0 ? 1 : 0)\n }\n className=\"px-6 py-4\"\n >\n {renderExpandedContent(row)}\n \n \n )}\n\n {/* 서브 행 (Sub Row) - 배송비 요약 등 추가 정보 표시용 */}\n {(subRowChildren && subRowChildren.length > 0 || subRowRender) &&\n evaluateSubRowCondition(subRowCondition, row) && (\n \n 0 ? 1 : 0)\n }\n className={subRowClassName ? 'p-2' : subRowClassName || 'px-6 py-2 bg-gray-50 dark:bg-gray-900'}\n >\n {subRowClassName ? (\n
\n {subRowRender\n ? subRowRender(row)\n : renderSubRowChildren(subRowChildren!, row, `subrow-${rowId}`, __componentContext)}\n
\n ) : (\n subRowRender\n ? subRowRender(row)\n : renderSubRowChildren(subRowChildren!, row, `subrow-${rowId}`, __componentContext)\n )}\n \n \n )}\n \n );\n })\n ) : (\n \n 0 ? 1 : 0)\n }\n className=\"px-6 py-8 text-center text-gray-500 dark:text-gray-400\"\n >\n {resolvedEmptyMessage}\n \n \n )}\n \n\n {/* 푸터 행 (Footer Row) - v1.19.0+ */}\n {footerCells && footerCells.length > 0 && paginatedData && paginatedData.length > 0 && (\n \n \n {/* 확장 버튼 컬럼 빈 셀 */}\n {expandable && \n );\n });\n })()}\n\n {/* 액션 컬럼 빈 셀 */}\n {rowActions && rowActions.length > 0 && \n \n )}\n
\n {/* 빈 헤더 - 확장 버튼용 */}\n \n {\n if (el) {\n el.indeterminate = isIndeterminate;\n }\n }}\n onChange={handleSelectAll}\n className=\"w-4 h-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded\"\n />\n \n {resolvedActionsColumnHeader}\n
e.stopPropagation()}>\n handleSelectRow(row[idField])}\n className=\"w-4 h-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded\"\n />\n
}\n\n {/* 체크박스 컬럼 빈 셀 */}\n {selectable && }\n\n {/* 푸터 셀 렌더링 */}\n {(() => {\n const footerFieldMap = new Map(\n footerCells.filter(c => c.field).map(c => [c.field!, c])\n );\n return displayColumns.map((column) => {\n const cell = footerFieldMap.get(column.field);\n if (!cell) {\n return ;\n }\n return (\n \n {cell.children && cell.children.length > 0\n ? renderCellChildren(cell.children, {}, null, `footer-${column.field}`, __componentContext)\n : cell.text || ''}\n }\n
\n
\n\n {/* 페이지네이션 */}\n {pagination && (alwaysShowPagination || effectiveTotalPages > 1) && (\n
\n \n
\n )}\n \n );\n};\n","import React, { useMemo, useState, useCallback } from 'react';\nimport { Div } from '../basic/Div';\nimport { P } from '../basic/P';\nimport { ActionMenuItem } from './ActionMenu';\nimport { Pagination } from './Pagination';\nimport type { EditorAttrs } from '../../types';\n\n// Logger 설정 (G7Core 초기화 전에도 동작하도록 폴백 포함)\nconst logger = ((window as any).G7Core?.createLogger?.('Comp:CardGrid')) ?? {\n log: (...args: unknown[]) => console.log('[Comp:CardGrid]', ...args),\n warn: (...args: unknown[]) => console.warn('[Comp:CardGrid]', ...args),\n error: (...args: unknown[]) => console.error('[Comp:CardGrid]', ...args),\n};\n\n// G7Core.t() 번역 함수 참조\nconst t = (key: string, params?: Record) =>\n (window as any).G7Core?.t?.(key, params) ?? key;\n\n/**\n * CardGrid 셀 자식 요소 타입\n */\nexport interface CardGridCellChild {\n id?: string;\n type: 'basic' | 'composite';\n name: string;\n props?: Record;\n text?: string;\n children?: CardGridCellChild[];\n condition?: string;\n if?: string;\n iteration?: {\n source: string;\n item_var?: string;\n index_var?: string;\n };\n actions?: any[]; // JSON에서 정의된 actions 배열 (ActionMenu용)\n}\n\n/**\n * 카드 컬럼 정의 (DataGrid의 컬럼 패턴과 동일)\n */\nexport interface CardGridColumn {\n id: string;\n cellChildren?: CardGridCellChild[];\n}\n\n/**\n * CardGrid Props 인터페이스\n */\nexport interface CardGridProps {\n // 필수 props\n data?: any[];\n\n // 카드 컬럼 정의 (DataGrid의 columns 패턴)\n cardColumns?: CardGridColumn[];\n\n // 그리드 레이아웃\n gridColumns?: number;\n gap?: number;\n\n // 반응형 설정\n responsiveColumns?: {\n sm?: number;\n md?: number;\n lg?: number;\n xl?: number;\n };\n\n // 카드 스타일\n cardClassName?: string;\n\n // 행 ID 필드\n idField?: string;\n\n // 페이지네이션\n pagination?: boolean;\n pageSize?: number;\n serverSidePagination?: boolean;\n serverCurrentPage?: number;\n serverTotalPages?: number;\n alwaysShowPagination?: boolean;\n onPageChange?: (page: number) => void;\n\n // 행 액션 메뉴 (DataGrid 패턴)\n rowActions?: ActionMenuItem[];\n onRowAction?: (actionId: string | number, row: any) => void;\n\n // 기타\n className?: string;\n style?: React.CSSProperties;\n\n // 다국어 텍스트\n emptyMessage?: string;\n\n // 페이지네이션 정보\n paginationInfoText?: string;\n\n // 페이지네이션 텍스트 (다국어 지원)\n prevText?: string;\n nextText?: string;\n\n // 스켈레톤 관련 props\n showSkeleton?: boolean; // 스켈레톤 표시 여부 (기본값: true)\n skeletonCount?: number; // 스켈레톤 개수 (기본값: gridColumns)\n skeletonCellChildren?: CardGridCellChild[]; // 커스텀 스켈레톤 정의\n\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * G7Core에서 전체 컴포넌트 맵을 가져옵니다.\n * 템플릿에 등록된 모든 컴포넌트를 자동으로 사용할 수 있습니다.\n */\nconst getComponentMap = (): Record> => {\n const G7Core = (window as any).G7Core;\n return G7Core?.getComponentMap?.() || {};\n};\n\n/**\n * 조건 문자열을 평가합니다.\n * 복잡한 JavaScript 표현식도 지원합니다 (&&, ||, length 등)\n */\nconst evaluateCondition = (condition: string, row: any): boolean => {\n if (!condition) return true;\n\n const match = condition.match(/^\\{\\{(.+)\\}\\}$/);\n if (!match) return true;\n\n const expr = match[1].trim();\n\n // 디버깅: row 데이터와 표현식 확인\n logger.log('evaluateCondition:', { condition, expr, row, rowStatus: row?.status });\n\n // 복잡한 표현식 (&&, ||, length, > 등)이 포함된 경우 eval 사용\n if (/[&|<>=!]/.test(expr) || expr.includes('.length')) {\n try {\n // row 컨텍스트에서 표현식 평가\n // eslint-disable-next-line no-new-func\n const evaluator = new Function('row', `return ${expr}`);\n const result = !!evaluator(row);\n logger.log('evaluateCondition result:', result);\n return result;\n } catch (error) {\n logger.warn('evaluateCondition: 표현식 평가 실패:', expr, error);\n return false;\n }\n }\n\n // !row.field 패턴\n if (expr.startsWith('!row.')) {\n const field = expr.slice(5);\n return !row[field];\n }\n\n // row.field 패턴\n if (expr.startsWith('row.')) {\n const field = expr.slice(4);\n return !!row[field];\n }\n\n return true;\n};\n\n/**\n * ActionMenu의 actions를 처리하여 onClick 함수를 생성합니다.\n * rowActions prop이 있으면 우선 사용합니다 (DataGrid 패턴).\n */\nconst processActionMenuActions = (\n child: CardGridCellChild,\n row: any,\n context: Record,\n rowActions?: ActionMenuItem[],\n onRowActionHandler?: (actionId: string | number, row: any) => void\n): CardGridCellChild => {\n const G7Core = (window as any).G7Core;\n\n // ActionMenu인 경우\n if (child.name === 'ActionMenu') {\n // 1. rowActions prop이 있으면 우선 사용 (DataGrid 패턴)\n if (rowActions && rowActions.length > 0 && onRowActionHandler) {\n return {\n ...child,\n props: {\n ...child.props,\n items: rowActions.map((action) => ({\n ...action,\n onClick: () => onRowActionHandler(action.id, row),\n })),\n },\n };\n }\n\n // 2. actions 배열이 있는 경우 (기존 패턴)\n if (child.actions && Array.isArray(child.actions)) {\n const items = child.props?.items || [];\n const actionsMap = new Map(child.actions.map((action: any) => [action.id, action]));\n\n // items의 onClick을 실제 함수로 변환\n const processedItems = items.map((item: any) => {\n // onClick이 문자열(액션 ID)인 경우\n if (typeof item.onClick === 'string') {\n const actionId = item.onClick;\n const actionDef = actionsMap.get(actionId);\n\n if (actionDef && G7Core?.ActionDispatcher) {\n return {\n ...item,\n onClick: () => {\n // 액션 컨텍스트 생성 (row 데이터 포함)\n const actionContext = { ...context };\n G7Core.ActionDispatcher.dispatch(actionDef, actionContext);\n },\n };\n }\n }\n return item;\n });\n\n // 처리된 items로 child 복사본 반환\n return {\n ...child,\n props: {\n ...child.props,\n items: processedItems,\n },\n };\n }\n }\n\n // children이 있으면 재귀적으로 처리\n if (child.children && Array.isArray(child.children)) {\n return {\n ...child,\n children: child.children.map((c) => processActionMenuActions(c, row, context, rowActions, onRowActionHandler)),\n };\n }\n\n return child;\n};\n\n/**\n * cellChildren 배열을 React 요소로 렌더링합니다.\n * DataGrid의 renderCellChildren 패턴을 따릅니다.\n */\nconst renderCellChildren = (\n cellChildren: CardGridCellChild[],\n row: any,\n index: number,\n keyPrefix: string = '',\n rowActions?: ActionMenuItem[],\n onRowActionHandler?: (actionId: string | number, row: any) => void\n): React.ReactNode => {\n const G7Core = (window as any).G7Core;\n\n if (G7Core?.renderItemChildren) {\n // 조건부 렌더링 필터링 (condition 또는 if 속성 지원)\n // 참고: renderItemChildren도 자체적으로 if 조건을 평가하지만,\n // 여기서 미리 필터링하면 불필요한 렌더링을 줄일 수 있음\n const filteredChildren = cellChildren.filter((child) => {\n const conditionExpr = child.condition || child.if;\n if (!conditionExpr) return true;\n const result = evaluateCondition(conditionExpr, row);\n return result;\n });\n\n // 컨텍스트 생성\n const context = {\n row,\n $value: row,\n index,\n };\n\n // ActionMenu actions 전처리 (재귀적으로)\n const processedChildren = filteredChildren.map((child) =>\n processActionMenuActions(child, row, context, rowActions, onRowActionHandler)\n );\n\n try {\n // G7Core에서 전체 컴포넌트 맵 가져오기\n const componentMap = getComponentMap();\n\n // G7Core 템플릿 엔진으로 렌더링\n return G7Core.renderItemChildren(\n processedChildren,\n context,\n componentMap,\n keyPrefix\n );\n } catch (error) {\n return (\n
\n

컴포넌트 로드 실패

\n

[CardGrid] 데이터를 표시할 수 없습니다.

\n
\n );\n }\n }\n\n return null;\n};\n\n/**\n * 개별 CardGridCellChild에 대한 스켈레톤을 생성합니다.\n * 모든 컴포넌트에 대해 동일한 기본 스켈레톤을 생성하여 확장성을 보장합니다.\n *\n * @param child 스켈레톤을 생성할 child 요소\n * @param key React key\n * @returns 생성된 스켈레톤 React 노드\n */\nconst generateSkeletonForChild = (\n child: CardGridCellChild,\n key: string\n): React.ReactNode => {\n // Div만 특수 처리 (레이아웃 구조 유지)\n if (child.name === 'Div' && child.children && child.children.length > 0) {\n const childSkeletons = child.children\n .map((c, idx) => generateSkeletonForChild(c, `${key}-child-${idx}`))\n .filter(Boolean);\n\n return (\n
\n {childSkeletons}\n
\n );\n }\n\n // 모든 컴포넌트는 동일한 기본 스켈레톤 (확장성 보장)\n return
;\n};\n\n/**\n * cellChildren 배열에서 스켈레톤 UI를 자동 생성합니다.\n *\n * @param cellChildren 카드 컬럼의 cellChildren 배열\n * @param keyPrefix 고유 키 생성을 위한 접두사\n * @returns 생성된 스켈레톤 React 노드 (cellChildren이 없으면 null)\n */\nconst generateSkeletonFromCellChildren = (\n cellChildren: CardGridCellChild[],\n keyPrefix: string = 'skeleton'\n): React.ReactNode => {\n if (!cellChildren || cellChildren.length === 0) {\n return null;\n }\n\n return cellChildren\n .map((child, index) => {\n const key = `${keyPrefix}-${child.id || child.name}-${index}`;\n\n // 조건부 렌더링 요소는 제외\n if (child.condition || child.if) {\n return null;\n }\n\n // iteration이 있으면 1개만 표시\n if (child.iteration) {\n return generateSkeletonForChild(child, key);\n }\n\n // 일반 요소 처리\n return generateSkeletonForChild(child, key);\n })\n .filter(Boolean);\n};\n\n/**\n * CardGrid 집합 컴포넌트\n *\n * 카드 레이아웃으로 데이터를 표시하는 그리드 컴포넌트입니다.\n * DataGrid의 cellChildren 패턴을 사용하여 카드 내용을 JSON으로 정의할 수 있습니다.\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"type\": \"composite\",\n * \"name\": \"CardGrid\",\n * \"props\": {\n * \"data\": \"{{boards.data.data}}\",\n * \"columns\": 3,\n * \"gap\": 4,\n * \"pagination\": true,\n * \"pageSize\": 12,\n * \"cellChildren\": [\n * {\n * \"type\": \"basic\",\n * \"name\": \"Div\",\n * \"props\": {\n * \"className\": \"bg-white dark:bg-gray-800 rounded-lg p-6\"\n * },\n * \"children\": [\n * {\n * \"type\": \"basic\",\n * \"name\": \"H3\",\n * \"text\": \"{{row.name}}\"\n * }\n * ]\n * }\n * ]\n * }\n * }\n */\nexport const CardGrid: React.FC = ({\n data,\n cardColumns = [],\n gridColumns = 3,\n gap = 4,\n responsiveColumns,\n cardClassName = '',\n idField = 'id',\n pagination = true,\n pageSize = 12,\n serverSidePagination = false,\n serverCurrentPage,\n serverTotalPages,\n alwaysShowPagination = false,\n onPageChange,\n paginationInfoText,\n rowActions,\n onRowAction,\n className = '',\n style,\n emptyMessage,\n prevText,\n nextText,\n showSkeleton = true,\n skeletonCount,\n skeletonCellChildren,\n id,\n editorAttrs,\n}) => {\n // props로 전달된 값이 없으면 다국어 키 사용\n const resolvedEmptyMessage = emptyMessage ?? t('common.no_data');\n\n // cardColumns의 첫 번째 항목에서 cellChildren 추출\n const cellChildren = cardColumns[0]?.cellChildren || [];\n // 클라이언트 사이드 페이지네이션 상태\n const [currentPage, setCurrentPage] = useState(1);\n\n // 반응형 상태 구독 - cellChildren 내 responsive 속성 지원을 위해 필요\n // 화면 크기 변경 시 CardGrid가 리렌더링되어 renderItemChildren이 새로운 너비로 재실행됨\n // 훅 호출 자체가 리렌더링을 트리거하므로 반환값은 사용하지 않음 (void 처리)\n const G7Core = (window as any).G7Core;\n // eslint-disable-next-line react-hooks/rules-of-hooks\n G7Core?.useResponsive?.();\n\n // 서버/클라이언트 페이지 정보\n const effectiveCurrentPage = serverSidePagination ? (serverCurrentPage ?? 1) : currentPage;\n const effectiveTotalPages = serverSidePagination\n ? (serverTotalPages ?? 1)\n : Math.ceil((data?.length ?? 0) / pageSize);\n\n // 페이지 변경 핸들러\n const handlePageChange = (page: number) => {\n if (serverSidePagination) {\n onPageChange?.(page);\n } else {\n setCurrentPage(page);\n }\n };\n\n // 행 액션 처리 (DataGrid 패턴 + 템플릿 엔진 이벤트 연동)\n const handleRowAction = useCallback(\n (actionId: string | number, row: any) => {\n // prop으로 전달된 onRowAction 호출\n // DynamicRenderer의 actionDispatcher.bindActionsToProps가\n // 레이아웃 JSON의 actions 배열과 자동 연결함\n // onRowAction 호출 시 $args[0] = actionId, $args[1] = row로 전달됨\n onRowAction?.(actionId, row);\n },\n [onRowAction]\n );\n\n // 페이지네이션 적용된 데이터\n const paginatedData = useMemo(() => {\n if (!data) return [];\n if (!pagination) return data;\n if (serverSidePagination) return data;\n\n const startIndex = (currentPage - 1) * pageSize;\n const endIndex = startIndex + pageSize;\n return data.slice(startIndex, endIndex);\n }, [data, pagination, serverSidePagination, currentPage, pageSize]);\n\n // 반응형 그리드 클래스 생성\n const gridClasses = useMemo(() => {\n const classes = [];\n\n // 기본 (모바일)\n const smCols = responsiveColumns?.sm ?? 1;\n classes.push(`grid-cols-${smCols}`);\n\n // sm (640px+)\n if (responsiveColumns?.sm) {\n classes.push(`sm:grid-cols-${responsiveColumns.sm}`);\n }\n\n // md (768px+)\n const mdCols = responsiveColumns?.md ?? Math.min(gridColumns, 2);\n classes.push(`md:grid-cols-${mdCols}`);\n\n // lg (1024px+)\n const lgCols = responsiveColumns?.lg ?? gridColumns;\n classes.push(`lg:grid-cols-${lgCols}`);\n\n // xl (1280px+)\n if (responsiveColumns?.xl) {\n classes.push(`xl:grid-cols-${responsiveColumns.xl}`);\n }\n\n return classes.join(' ');\n }, [gridColumns, responsiveColumns]);\n\n // 스켈레톤 UI 생성 (useMemo로 최적화)\n const skeletonUI = useMemo(() => {\n if (!showSkeleton) {\n return null;\n }\n\n // 1. skeletonCellChildren이 있으면 우선 사용\n if (skeletonCellChildren && skeletonCellChildren.length > 0) {\n return generateSkeletonFromCellChildren(skeletonCellChildren, 'custom-skeleton');\n }\n\n // 2. cellChildren 기반 자동 생성\n if (cellChildren && cellChildren.length > 0) {\n return generateSkeletonFromCellChildren(cellChildren, 'auto-skeleton');\n }\n\n // 3. cellChildren도 없으면 null (빈 카드)\n return null;\n }, [showSkeleton, skeletonCellChildren, cellChildren]);\n\n // 로딩 상태 (data가 undefined/null)\n if (!data) {\n // showSkeleton이 false면 빈 화면\n if (!showSkeleton) {\n return null;\n }\n\n const effectiveSkeletonCount = skeletonCount ?? gridColumns;\n\n return (\n
\n {Array.from({ length: effectiveSkeletonCount }).map((_, index) => (\n \n {skeletonUI}\n
\n ))}\n
\n );\n }\n\n // 빈 데이터 상태\n if (paginatedData.length === 0) {\n return (\n
\n
\n

\n {resolvedEmptyMessage}\n

\n
\n
\n );\n }\n\n // 페이지네이션 표시 여부\n const showPagination =\n pagination &&\n (alwaysShowPagination || effectiveTotalPages > 1);\n\n return (\n
\n {/* 카드 그리드 */}\n
\n {paginatedData.map((row, index) => (\n
\n {renderCellChildren(cellChildren, row, index, `card-${index}`, rowActions, handleRowAction)}\n
\n ))}\n
\n\n {/* 페이지네이션 */}\n {showPagination && (\n
\n \n {/* 페이지네이션 정보 */}\n {paginationInfoText && (\n
\n {paginationInfoText}\n
\n )}\n
\n )}\n
\n );\n};","import React, { useEffect, useRef } from 'react';\nimport { Div } from '../basic/Div';\nimport { Button } from '../basic/Button';\n\n// G7Core.t() 번역 함수 참조\nconst t = (key: string, params?: Record) =>\n (window as any).G7Core?.t?.(key, params) ?? key;\n\nexport interface ModalProps {\n isOpen: boolean;\n onClose: () => void;\n title?: string;\n /** 타이틀 앞에 렌더링할 컴포넌트 배열 (레이아웃 JSON) */\n titlePrefix?: any[];\n /** 타이틀 뒤에 렌더링할 컴포넌트 배열 (레이아웃 JSON) */\n titleSuffix?: any[];\n /**\n * Backdrop(오버레이) 클릭 시 모달 닫기 여부\n * @default true\n */\n closeOnBackdropClick?: boolean;\n /**\n * closeOnOverlayClick 별칭 (레이아웃 JSON 호환)\n * @default true\n */\n closeOnOverlayClick?: boolean;\n /**\n * 헤더 닫기 버튼 표시 여부\n * @default true\n */\n showCloseButton?: boolean;\n /**\n * ESC 키로 모달 닫기 허용 여부\n * @default true\n */\n closeOnEscape?: boolean;\n children?: React.ReactNode;\n width?: string;\n className?: string;\n style?: React.CSSProperties;\n /** DynamicRenderer용 데이터 컨텍스트 (내부 사용) */\n __dataContext?: Record;\n /** DynamicRenderer용 번역 컨텍스트 (내부 사용) */\n __translationContext?: any;\n}\n\n/**\n * Modal 집합 컴포넌트\n *\n * Div + Button 기본 컴포넌트를 조합하여 모달 UI를 구성합니다.\n * ESC 키 닫기, 포커스 트랩, 오버레이 클릭 닫기 기능을 포함합니다.\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"Modal\",\n * \"props\": {\n * \"isOpen\": \"{{modals.userEdit}}\",\n * \"title\": \"사용자 편집\",\n * \"width\": \"600px\"\n * },\n * \"children\": [...]\n * }\n */\nexport const Modal: React.FC = ({\n isOpen,\n onClose,\n title,\n titlePrefix,\n titleSuffix,\n closeOnBackdropClick = true,\n closeOnOverlayClick,\n showCloseButton = true,\n closeOnEscape = true,\n children,\n width = '500px',\n className = '',\n style,\n __dataContext,\n __translationContext,\n}) => {\n // closeOnOverlayClick 별칭 지원 (레이아웃 JSON 호환)\n const shouldCloseOnBackdrop = closeOnOverlayClick !== undefined\n ? closeOnOverlayClick\n : closeOnBackdropClick;\n const modalRef = useRef(null);\n const previousFocusRef = useRef(null);\n\n // ESC 키로 모달 닫기\n useEffect(() => {\n const handleEscape = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && isOpen && closeOnEscape) {\n onClose();\n }\n };\n\n if (isOpen && closeOnEscape) {\n document.addEventListener('keydown', handleEscape);\n return () => document.removeEventListener('keydown', handleEscape);\n }\n }, [isOpen, onClose, closeOnEscape]);\n\n // 포커스 트랩\n useEffect(() => {\n if (isOpen && modalRef.current) {\n // 모달 열릴 때 현재 포커스 저장\n previousFocusRef.current = document.activeElement as HTMLElement;\n\n // 모달 내부 포커스 가능한 요소들\n const focusableElements = modalRef.current.querySelectorAll(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n );\n\n const firstElement = focusableElements[0] as HTMLElement;\n const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;\n\n // 첫 번째 요소에 포커스\n firstElement?.focus();\n\n // Tab 키 핸들러 (포커스 트랩)\n const handleTab = (event: KeyboardEvent) => {\n if (event.key !== 'Tab') return;\n\n if (event.shiftKey) {\n // Shift + Tab\n if (document.activeElement === firstElement) {\n event.preventDefault();\n lastElement?.focus();\n }\n } else {\n // Tab\n if (document.activeElement === lastElement) {\n event.preventDefault();\n firstElement?.focus();\n }\n }\n };\n\n document.addEventListener('keydown', handleTab);\n\n return () => {\n document.removeEventListener('keydown', handleTab);\n // 모달 닫힐 때 이전 포커스 복원\n previousFocusRef.current?.focus();\n };\n }\n }, [isOpen]);\n\n // body 스크롤 방지\n useEffect(() => {\n if (isOpen) {\n document.body.style.overflow = 'hidden';\n return () => {\n document.body.style.overflow = '';\n };\n }\n }, [isOpen]);\n\n if (!isOpen) return null;\n\n // z-index를 style에서 가져오거나 기본값 50 사용\n const zIndex = style?.zIndex ?? 50;\n\n // titlePrefix/titleSuffix 렌더링 헬퍼\n const renderTitleComponents = (components: any[] | undefined, keyPrefix: string) => {\n if (!components || components.length === 0) return null;\n\n const g7Core = (window as any).G7Core;\n if (!g7Core) return null;\n\n const DynamicRenderer = g7Core.getDynamicRenderer?.();\n if (!DynamicRenderer) return null;\n\n return components.map((componentDef, index) => (\n \n ));\n };\n\n return (\n \n {/* Overlay */}\n \n\n {/* Modal Content */}\n e.stopPropagation()}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? 'modal-title' : undefined}\n >\n {/* Header */}\n {(title || titlePrefix || titleSuffix || showCloseButton) && (\n
\n
\n {/* titlePrefix: 타이틀 앞에 렌더링 */}\n {renderTitleComponents(titlePrefix, 'title-prefix')}\n {title && (\n \n {title}\n
\n )}\n {/* titleSuffix: 타이틀 뒤에 렌더링 */}\n {renderTitleComponents(titleSuffix, 'title-suffix')}\n
\n {showCloseButton && (\n \n \n \n \n \n )}\n \n )}\n\n {/* Body */}\n
\n {children}\n
\n \n \n );\n};\n","import React, { useState, useRef, useEffect } from 'react';\nimport { Div } from '../basic/Div';\nimport { Button } from '../basic/Button';\nimport type { EditorAttrs } from '../../types';\n\nexport interface DropdownItem {\n label: string;\n value: string;\n onClick?: () => void;\n disabled?: boolean;\n}\n\nexport interface DropdownProps {\n label: string;\n items: DropdownItem[];\n /** 아이템 클릭 시 호출되는 콜백. value 문자열을 전달합니다. */\n onItemClick?: (value: string, item: DropdownItem) => void;\n position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';\n /** 드롭다운 스타일 변형 */\n variant?: 'default' | 'text';\n className?: string;\n style?: React.CSSProperties;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * Dropdown 집합 컴포넌트\n *\n * Button + Div 기본 컴포넌트를 조합하여 드롭다운 메뉴 UI를 구성합니다.\n * 키보드 네비게이션 (Arrow Up/Down, Enter, Escape) 지원, 외부 클릭 감지 기능을 포함합니다.\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"Dropdown\",\n * \"props\": {\n * \"label\": \"작업\",\n * \"items\": [\n * {\"label\": \"수정\", \"value\": \"edit\"},\n * {\"label\": \"삭제\", \"value\": \"delete\"}\n * ]\n * }\n * }\n */\nexport const Dropdown: React.FC = ({\n label,\n items,\n onItemClick,\n position = 'bottom-left',\n variant = 'default',\n className = '',\n style,\n id,\n editorAttrs,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const [focusedIndex, setFocusedIndex] = useState(-1);\n const dropdownRef = useRef(null);\n const menuRef = useRef(null);\n const [adjustedPosition, setAdjustedPosition] = useState(position);\n\n // 외부 클릭 감지\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n setFocusedIndex(-1);\n }\n };\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }\n }, [isOpen]);\n\n // 키보드 네비게이션\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (!isOpen) return;\n\n const enabledIndexes = items\n .map((item, index) => (!item.disabled ? index : -1))\n .filter((index) => index !== -1);\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n setFocusedIndex((prev) => {\n const currentEnabledIndex = enabledIndexes.indexOf(prev);\n const nextEnabledIndex = (currentEnabledIndex + 1) % enabledIndexes.length;\n return enabledIndexes[nextEnabledIndex];\n });\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n setFocusedIndex((prev) => {\n const currentEnabledIndex = enabledIndexes.indexOf(prev);\n const prevEnabledIndex =\n currentEnabledIndex <= 0 ? enabledIndexes.length - 1 : currentEnabledIndex - 1;\n return enabledIndexes[prevEnabledIndex];\n });\n break;\n\n case 'Enter':\n event.preventDefault();\n if (focusedIndex >= 0 && !items[focusedIndex].disabled) {\n handleItemClick(items[focusedIndex]);\n }\n break;\n\n case 'Escape':\n event.preventDefault();\n setIsOpen(false);\n setFocusedIndex(-1);\n break;\n }\n };\n\n if (isOpen) {\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n }\n }, [isOpen, focusedIndex, items]);\n\n // 드롭다운 메뉴가 화면을 벗어나는지 감지하고 위치 조정\n useEffect(() => {\n if (isOpen && menuRef.current && dropdownRef.current) {\n const menuRect = menuRef.current.getBoundingClientRect();\n const triggerRect = dropdownRef.current.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n\n // 메뉴 크기 (w-56 = 14rem = 224px)\n const menuWidth = menuRect.width || 224;\n const menuHeight = menuRect.height || 200;\n\n let newPosition = position;\n\n // 수평 위치 조정\n const isLeftAligned = position.includes('left');\n if (isLeftAligned) {\n // left 정렬: 메뉴가 버튼 왼쪽 끝에서 오른쪽으로 펼쳐짐\n const menuRight = triggerRect.left + menuWidth;\n if (menuRight > viewportWidth) {\n newPosition = newPosition.replace('left', 'right') as typeof position;\n }\n } else {\n // right 정렬: 메뉴가 버튼 오른쪽 끝에서 왼쪽으로 펼쳐짐\n const menuLeft = triggerRect.right - menuWidth;\n if (menuLeft < 0) {\n newPosition = newPosition.replace('right', 'left') as typeof position;\n }\n }\n\n // 수직 위치 조정\n const isTopAligned = position.includes('top');\n if (isTopAligned) {\n // top 정렬: 메뉴가 버튼 위로 펼쳐짐\n if (triggerRect.top - menuHeight < 0) {\n newPosition = newPosition.replace('top', 'bottom') as typeof position;\n }\n } else {\n // bottom 정렬: 메뉴가 버튼 아래로 펼쳐짐\n if (triggerRect.bottom + menuHeight > viewportHeight) {\n newPosition = newPosition.replace('bottom', 'top') as typeof position;\n }\n }\n\n setAdjustedPosition(newPosition);\n }\n }, [isOpen, position]);\n\n const handleItemClick = (item: DropdownItem) => {\n if (item.disabled) return;\n\n item.onClick?.();\n // value를 첫 번째 인자로 전달하여 switch 핸들러와 호환\n onItemClick?.(item.value, item);\n setIsOpen(false);\n setFocusedIndex(-1);\n };\n\n const positionClasses = {\n 'bottom-left': 'dropdown-menu-bottom-left',\n 'bottom-right': 'dropdown-menu-bottom-right',\n 'top-left': 'dropdown-menu-top-left',\n 'top-right': 'dropdown-menu-top-right',\n };\n\n return (\n \n {/* Trigger Button */}\n setIsOpen(!isOpen)}\n className={variant === 'text' ? 'dropdown-trigger-text' : 'dropdown-trigger'}\n aria-haspopup=\"true\"\n aria-expanded={isOpen}\n >\n {label}\n {variant !== 'text' && (\n \n \n \n )}\n \n\n {/* Dropdown Menu */}\n {isOpen && (\n \n
\n {items.map((item, index) => (\n handleItemClick(item)}\n onMouseEnter={() => !item.disabled && setFocusedIndex(index)}\n role=\"menuitem\"\n aria-disabled={item.disabled}\n tabIndex={item.disabled ? -1 : 0}\n >\n {item.label}\n
\n ))}\n \n \n )}\n \n );\n};\n","// e2e:allow편집기 추가 직후 price 미지정 시 크래시(\"컴포넌트 로드 실패\") 결함#5 수정(price 폴백). 라이브 검증은 Chrome MCP T1~T7(에디터 추가/속성편집/저장200/reload영속/게스트 사용자화면 ₩55000 렌더)로 수행, 단위 회귀는 ProductCard.test.tsx 결함#5 describe.\nimport React from 'react';\nimport { Div } from '../basic/Div';\nimport { Img } from '../basic/Img';\nimport { H2 } from '../basic/H2';\nimport { H3 } from '../basic/H3';\nimport { P } from '../basic/P';\nimport { Span } from '../basic/Span';\nimport { Button } from '../basic/Button';\nimport type { EditorAttrs } from '../../types';\n\nexport interface ProductCardProps {\n imageUrl?: string;\n imageAlt?: string;\n title: string;\n subtitle?: string;\n description?: string;\n price: number;\n originalPrice?: number;\n discountRate?: number;\n currency?: string;\n buttonText?: string;\n onButtonClick?: () => void;\n className?: string;\n style?: React.CSSProperties;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * ProductCard 집합 컴포넌트\n *\n * 상품 정보를 표시하는 카드 컴포넌트입니다.\n * 이미지, 제목, 부제목, 설명, 가격, 할인율, 액션 버튼을 포함합니다.\n *\n * 기본 컴포넌트 조합: Div + Img + H2 + H3 + P + Span + Button\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"ProductCard\",\n * \"props\": {\n * \"imageUrl\": \"/product.png\",\n * \"title\": \"프리미엄 제품\",\n * \"subtitle\": \"신제품\",\n * \"description\": \"최고급 소재로 제작된 프리미엄 제품입니다.\",\n * \"price\": 45000,\n * \"originalPrice\": 50000,\n * \"discountRate\": 10,\n * \"buttonText\": \"구매하기\"\n * }\n * }\n */\nexport const ProductCard: React.FC = ({\n imageUrl,\n imageAlt = '',\n title,\n subtitle,\n description,\n price,\n originalPrice,\n discountRate,\n currency = '₩',\n buttonText = '자세히 보기',\n onButtonClick,\n className = '',\n style,\n id,\n editorAttrs,\n}) => {\n const hasDiscount = discountRate && discountRate > 0;\n // price 미지정 시에도 크래시하지 않도록 0 으로 폴백한다(레이아웃 편집기에서 추가 직후\n // 작성자가 price 를 지정하기 전 상태를 안전하게 렌더).\n const formattedPrice = (price ?? 0).toLocaleString();\n const formattedOriginalPrice = originalPrice?.toLocaleString();\n\n return (\n \n {/* 상품 이미지 */}\n {imageUrl && (\n
\n \n {hasDiscount && (\n
\n -{discountRate}%\n
\n )}\n
\n )}\n\n {/* 상품 정보 */}\n
\n {/* 부제목 (태그/카테고리) */}\n {subtitle && (\n

\n {subtitle}\n

\n )}\n\n {/* 제목 */}\n

\n {title}\n

\n\n {/* 설명 */}\n {description && (\n

\n {description}\n

\n )}\n\n {/* 가격 정보 */}\n
\n \n {currency}{formattedPrice}\n \n {originalPrice && (\n \n {currency}{formattedOriginalPrice}\n \n )}\n
\n\n {/* 액션 버튼 */}\n {buttonText && (\n \n {buttonText}\n \n )}\n
\n \n );\n};\n","import React from 'react';\nimport { Div } from '../basic/Div';\nimport { H3 } from '../basic/H3';\nimport { Span } from '../basic/Span';\nimport { P } from '../basic/P';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport type { EditorAttrs } from '../../types';\n\nexport interface StatCardProps {\n value: string | number;\n label: string;\n change?: number;\n changeLabel?: string;\n iconName?: IconName;\n trend?: 'up' | 'down' | 'neutral';\n className?: string;\n style?: React.CSSProperties;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * StatCard 집합 컴포넌트\n *\n * 통계 수치와 변화율을 시각화하는 카드 컴포넌트입니다.\n * 수치, 라벨, 변화율(증가/감소), 아이콘을 표시합니다.\n *\n * 기본 컴포넌트 조합: Div + H3 + Span + P + Icon\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"StatCard\",\n * \"props\": {\n * \"value\": 12345,\n * \"label\": \"총 사용자\",\n * \"change\": 12.5,\n * \"changeLabel\": \"지난달 대비\",\n * \"iconName\": \"users\",\n * \"trend\": \"up\"\n * }\n * }\n */\nexport const StatCard: React.FC = ({\n value,\n label,\n change,\n changeLabel = '전월 대비',\n iconName,\n trend = 'neutral',\n className = '',\n style,\n id,\n editorAttrs,\n}) => {\n const isPositive = trend === 'up';\n const isNegative = trend === 'down';\n const changeValue = change !== undefined ? Math.abs(change) : 0;\n\n const trendClass = isPositive\n ? 'stats-trend-up'\n : isNegative\n ? 'stats-trend-down'\n : 'stats-trend-neutral';\n\n const trendIcon = isPositive ? IconName.ArrowUp : isNegative ? IconName.ArrowDown : undefined;\n\n return (\n \n {/* 헤더: 아이콘과 변화율 */}\n
\n {iconName && (\n
\n \n
\n )}\n\n {change !== undefined && (\n
\n {trendIcon && (\n \n )}\n \n {changeValue}%\n \n
\n )}\n
\n\n {/* 통계 수치 */}\n

\n {typeof value === 'number' ? value.toLocaleString() : value}\n

\n\n {/* 라벨 */}\n

\n {label}\n

\n\n {/* 변화율 설명 */}\n {change !== undefined && changeLabel && (\n
\n \n {changeLabel}\n \n
\n )}\n \n );\n};\n","import React, { useState, useEffect } from 'react';\nimport { Form } from '../basic/Form';\nimport { Input } from '../basic/Input';\nimport { Button } from '../basic/Button';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport { Div } from '../basic/Div';\nimport { Span } from '../basic/Span';\nimport type { EditorAttrs } from '../../types';\n\n// G7Core 참조\nconst G7Core = () => (window as any).G7Core;\nconst t = (key: string, params?: Record) =>\n G7Core()?.t?.(key, params) ?? key;\n\nexport interface SearchSuggestion {\n id: string | number;\n text: string;\n}\n\nexport interface SearchBarProps {\n name?: string;\n placeholder?: string;\n value?: string;\n onChange?: (e: React.ChangeEvent) => void;\n onSubmit?: (e: React.FormEvent) => void;\n showButton?: boolean; // true: 검색 버튼 표시, false: 버튼 숨김 (기본값: false)\n suggestions?: SearchSuggestion[];\n onSuggestionClick?: (suggestion: SearchSuggestion) => void;\n showSuggestions?: boolean;\n className?: string; // 외부 className (w-full 등)은 G7Core.style.mergeClasses로 내부 기본 클래스를 오버라이드\n style?: React.CSSProperties;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * SearchBar 집합 컴포넌트\n *\n * 검색 입력 필드와 선택적 버튼을 제공하는 검색 바 컴포넌트입니다.\n * Enter 키를 누르면 항상 검색이 실행됩니다.\n *\n * 기본 컴포넌트 조합: Form + Input + Button + Icon + Div + Span\n *\n * @example\n * // 레이아웃 JSON 사용 예시 (버튼 없음)\n * {\n * \"name\": \"SearchBar\",\n * \"props\": {\n * \"placeholder\": \"검색어를 입력하세요\",\n * \"value\": \"{{query.search}}\",\n * \"showButton\": false\n * }\n * }\n *\n * @example\n * // 레이아웃 JSON 사용 예시 (버튼 있음)\n * {\n * \"name\": \"SearchBar\",\n * \"props\": {\n * \"placeholder\": \"검색어를 입력하세요\",\n * \"value\": \"{{query.search}}\",\n * \"showButton\": true\n * }\n * }\n *\n * @example\n * // 레이아웃 JSON 사용 예시 (전체 너비 - className으로 오버라이드)\n * {\n * \"name\": \"SearchBar\",\n * \"props\": {\n * \"placeholder\": \"검색어를 입력하세요\",\n * \"value\": \"{{query.search}}\",\n * \"className\": \"w-full\"\n * }\n * }\n */\nexport const SearchBar: React.FC = ({\n name = 'search',\n placeholder,\n value: controlledValue,\n onChange,\n onSubmit,\n showButton = false,\n suggestions = [],\n onSuggestionClick,\n showSuggestions = false,\n className = '',\n style,\n id,\n editorAttrs,\n}) => {\n // props로 전달된 값이 없으면 다국어 키 사용\n const resolvedPlaceholder = placeholder ?? t('common.search_placeholder');\n\n const [internalValue, setInternalValue] = useState('');\n const [isFocused, setIsFocused] = useState(false);\n const containerRef = React.useRef(null);\n const previousValueRef = React.useRef('');\n\n const value = controlledValue !== undefined ? controlledValue : internalValue;\n const shouldShowSuggestions = showSuggestions && isFocused && suggestions.length > 0 && value.length > 0;\n\n // 기본 Input 클래스 (w-64 포함)\n const baseInputClasses = 'w-64 pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm';\n // 외부 className으로 기본 클래스 오버라이드 (예: w-full이 w-64를 대체)\n const inputClassName = G7Core()?.style?.mergeClasses?.(baseInputClasses, className) ?? `${baseInputClasses} ${className}`;\n\n // controlledValue가 변경될 때 previousValueRef 동기화\n useEffect(() => {\n if (controlledValue !== undefined) {\n previousValueRef.current = controlledValue;\n }\n }, [controlledValue]);\n\n const handleChange = (e: React.ChangeEvent) => {\n const newValue = e.target.value;\n setInternalValue(newValue);\n onChange?.(e);\n\n // X 버튼으로 검색어를 지운 경우 감지\n // 이전 값이 있었는데 새 값이 빈 문자열이고, nativeEvent가 없는 경우 = X 버튼 클릭\n if (previousValueRef.current !== '' && newValue === '' && !(e.nativeEvent as any).inputType) {\n // X 버튼 클릭: 자동으로 검색 초기화\n setTimeout(() => {\n const formElement = containerRef.current?.querySelector('form');\n if (formElement) {\n formElement.requestSubmit();\n }\n }, 0);\n }\n\n previousValueRef.current = newValue;\n };\n\n const handleSuggestionClick = (suggestion: SearchSuggestion) => {\n setInternalValue(suggestion.text);\n const syntheticEvent = {\n target: { value: suggestion.text, name },\n } as React.ChangeEvent;\n onChange?.(syntheticEvent);\n onSuggestionClick?.(suggestion);\n setIsFocused(false);\n };\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n onSubmit?.(e);\n };\n\n return (\n
\n
\n
\n {/* Input wrapper */}\n
\n {/* 검색 아이콘 */}\n
\n \n
\n\n {/* 검색 입력 */}\n setIsFocused(true)}\n onBlur={() => setTimeout(() => setIsFocused(false), 200)}\n placeholder={resolvedPlaceholder}\n className={inputClassName}\n />\n
\n\n {/* 검색 버튼 (showButton=true일 때만 표시) */}\n {showButton && (\n \n {t('common.search')}\n \n )}\n
\n
\n\n {/* 자동완성 제안 목록 */}\n {shouldShowSuggestions && (\n
\n {suggestions.map((suggestion) => (\n handleSuggestionClick(suggestion)}\n >\n
\n \n {suggestion.text}\n
\n
\n ))}\n
\n )}\n \n );\n};\n","import React from 'react';\nimport { Div } from '../basic/Div';\nimport { Label } from '../basic/Label';\nimport { Select } from '../basic/Select';\nimport { Checkbox } from '../basic/Checkbox';\nimport { Span } from '../basic/Span';\nimport { Button } from '../basic/Button';\nimport type { EditorAttrs } from '../../types';\n\n// G7Core.t() 번역 함수 참조\nconst t = (key: string, params?: Record) =>\n (window as any).G7Core?.t?.(key, params) ?? key;\n\nexport interface FilterOption {\n id: string | number;\n label: string;\n value: string | number;\n}\n\nexport interface Filter {\n id: string;\n label: string;\n type: 'select' | 'checkbox';\n options: FilterOption[];\n value?: string | number | string[] | number[];\n}\n\nexport interface FilterGroupProps {\n title?: string;\n filters: Filter[];\n onChange?: (filterId: string, value: string | number | string[] | number[] | boolean) => void;\n onReset?: () => void;\n showResetButton?: boolean;\n className?: string;\n style?: React.CSSProperties;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * FilterGroup 집합 컴포넌트\n *\n * 다중 필터 조합을 지원하는 필터 그룹 컴포넌트입니다.\n * Select, Checkbox 타입의 필터들을 조합하여 표시합니다.\n *\n * 기본 컴포넌트 조합: Div + Label + Select + Checkbox + Span + Button\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"FilterGroup\",\n * \"props\": {\n * \"title\": \"$t:common.filter\",\n * \"filters\": [\n * {\n * \"id\": \"category\",\n * \"label\": \"카테고리\",\n * \"type\": \"select\",\n * \"options\": [\n * {\"id\": 1, \"label\": \"전자기기\", \"value\": \"electronics\"},\n * {\"id\": 2, \"label\": \"의류\", \"value\": \"clothing\"}\n * ]\n * }\n * ]\n * }\n * }\n */\nexport const FilterGroup: React.FC = ({\n title,\n filters,\n onChange,\n onReset,\n showResetButton = true,\n className = '',\n style,\n id,\n editorAttrs,\n}) => {\n // props로 전달된 값이 없으면 다국어 키 사용\n const resolvedTitle = title ?? t('common.filter');\n\n const handleSelectChange = (filterId: string, value: string | number) => {\n onChange?.(filterId, value);\n };\n\n const handleCheckboxChange = (filterId: string, optionValue: string | number, checked: boolean) => {\n const filter = filters.find(f => f.id === filterId);\n if (!filter) return;\n\n const currentValues = Array.isArray(filter.value) ? filter.value : [];\n\n // 타입에 따라 분리하여 처리\n if (typeof optionValue === 'string') {\n const stringValues = currentValues.filter((v): v is string => typeof v === 'string');\n const newValues = checked\n ? [...stringValues, optionValue]\n : stringValues.filter(v => v !== optionValue);\n onChange?.(filterId, newValues);\n } else {\n const numberValues = currentValues.filter((v): v is number => typeof v === 'number');\n const newValues = checked\n ? [...numberValues, optionValue]\n : numberValues.filter(v => v !== optionValue);\n onChange?.(filterId, newValues);\n }\n };\n\n return (\n \n {/* 헤더 */}\n
\n \n {resolvedTitle}\n \n {showResetButton && onReset && (\n \n {t('common.reset')}\n \n )}\n
\n\n {/* 필터 목록 */}\n
\n {filters.map((filter) => (\n
\n \n\n {/* Select 타입 필터 */}\n {filter.type === 'select' && (\n handleSelectChange(filter.id, e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white\"\n >\n \n {filter.options.map((option) => (\n \n ))}\n \n )}\n\n {/* Checkbox 타입 필터 */}\n {filter.type === 'checkbox' && (\n
\n {filter.options.map((option) => {\n const isChecked = Array.isArray(filter.value)\n ? filter.value.some(v => v === option.value)\n : false;\n\n return (\n \n \n handleCheckboxChange(filter.id, option.value, e.target.checked)\n }\n className=\"w-4 h-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500\"\n />\n \n {option.label}\n \n \n );\n })}\n
\n )}\n
\n ))}\n
\n \n );\n};\n","import React from 'react';\nimport { Nav } from '../basic/Nav';\nimport { Button } from '../basic/Button';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport { Div } from '../basic/Div';\nimport { Span } from '../basic/Span';\nimport { Select } from '../basic/Select';\nimport type { EditorAttrs } from '../../types';\n\nexport interface Tab {\n id: string | number;\n label: string;\n iconName?: IconName;\n disabled?: boolean;\n badge?: string | number;\n}\n\nexport interface TabNavigationProps {\n tabs: Tab[];\n activeTabId?: string | number;\n onTabChange?: (tabId: string | number) => void;\n variant?: 'default' | 'pills' | 'underline';\n className?: string;\n style?: React.CSSProperties;\n /** 모바일 전환 임계값 (px). 기본값 768 — G7 ResponsiveContext mobile 프리셋과 동일 */\n mobileBreakpoint?: number;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * TabNavigation 집합 컴포넌트\n *\n * 탭 네비게이션을 제공하는 컴포넌트입니다.\n * 여러 탭을 전환할 수 있으며, 아이콘과 뱃지를 지원합니다.\n *\n * 반응형: G7Core.useResponsive() hook으로 화면 너비를 구독하여\n * mobileBreakpoint(기본 768px) 미만일 때 Select 드롭다운으로 자동 전환됩니다.\n * Tailwind hidden md:flex 분기를 사용하지 않으므로 위지윅 편집기의 디바이스 미리보기와도 호환됩니다.\n *\n * **주의**: 이 컴포넌트는 순수 네비게이션 UI만 제공하며,\n * 실제 탭 컨텐츠는 부모 컴포넌트에서 activeTabId를 기반으로 조건부 렌더링해야 합니다.\n *\n * 기본 컴포넌트 조합: Nav + Button + Icon + Div + Span + Select\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"TabNavigation\",\n * \"props\": {\n * \"activeTabId\": 1,\n * \"tabs\": [\n * {\"id\": 1, \"label\": \"프로필\", \"iconName\": \"user\"},\n * {\"id\": 2, \"label\": \"설정\", \"iconName\": \"cog\", \"badge\": 3}\n * ]\n * }\n * }\n */\nexport const TabNavigation: React.FC = ({\n tabs,\n activeTabId,\n onTabChange,\n variant = 'default',\n className = '',\n style,\n mobileBreakpoint = 768,\n id,\n editorAttrs,\n}) => {\n // G7Core.useResponsive를 통해 반응형 상태 구독 (G7 표준)\n const G7Core = (window as any).G7Core;\n const useResponsive = G7Core?.useResponsive;\n const responsiveValue = useResponsive?.();\n const isMobile = responsiveValue\n ? responsiveValue.width < mobileBreakpoint\n : typeof window !== 'undefined' && window.innerWidth < mobileBreakpoint;\n\n const handleTabClick = (tab: Tab) => {\n if (!tab.disabled && tab.id !== activeTabId) {\n onTabChange?.(tab.id);\n }\n };\n\n const handleSelectChange = (\n e: React.ChangeEvent | { target: { value: string | number } }\n ) => {\n const selectedId = e.target.value;\n const numericId = Number(selectedId);\n const finalId =\n typeof selectedId === 'string' && selectedId !== '' && !Number.isNaN(numericId)\n ? numericId\n : selectedId;\n const selectedTab = tabs.find((tab) => String(tab.id) === String(finalId));\n if (selectedTab) {\n handleTabClick(selectedTab);\n }\n };\n\n // 모바일: Select 드롭다운 단일 렌더\n if (isMobile) {\n return (\n
\n ({\n value: String(tab.id),\n label: tab.badge !== undefined ? `${tab.label} (${tab.badge})` : tab.label,\n disabled: tab.disabled,\n }))}\n className=\"w-full\"\n />\n
\n );\n }\n\n const getTabClasses = (tab: Tab) => {\n const isActive = tab.id === activeTabId;\n\n if (tab.disabled) {\n return 'tab-btn-base tab-btn-disabled';\n }\n\n switch (variant) {\n case 'pills':\n return isActive ? 'tab-btn-base tab-btn-pills-active' : 'tab-btn-base tab-btn-pills';\n\n case 'underline':\n return isActive\n ? 'tab-btn-base tab-btn-underline-active'\n : 'tab-btn-base tab-btn-underline';\n\n case 'default':\n default:\n return isActive\n ? 'tab-btn-base tab-btn-default-active'\n : 'tab-btn-base tab-btn-default';\n }\n };\n\n const navClasses = variant === 'underline' ? 'tab-nav-underline' : 'tab-nav-default';\n\n // 레이아웃 편집기 인플레이스 오버레이용 탭별 측정 마커(편집 모드 전용).\n // 탭은 자식 노드가 아니라 `props.tabs` 배열이라 `data-editor-path` 가 없다. 편집기 코어가\n // 각 탭 헤더 박스를 측정해 인플레이스 오버레이(+추가/✕삭제/정렬)에 넘길 수 있도록, 각 탭\n // 버튼에 `data-editor-item-path=\"<자기 path>.props.tabs.\"` 를 부여한다. 런타임에는\n // editorAttrs 가 주입되지 않으므로(undefined) 본 마커도 렌더되지 않아 사용자 페이지 무영향.\n const editorNodePath = editorAttrs?.['data-editor-path'];\n\n // 데스크톱: 탭 버튼 단일 렌더\n return (\n \n {tabs.map((tab, tabIndex) => (\n handleTabClick(tab)}\n disabled={tab.disabled}\n className={getTabClasses(tab)}\n {...(editorNodePath\n ? { 'data-editor-item-path': `${editorNodePath}.props.tabs.${tabIndex}` }\n : {})}\n >\n {tab.iconName && (\n \n )}\n\n {tab.label}\n\n {tab.badge !== undefined && (\n
\n {tab.badge}\n
\n )}\n \n ))}\n \n );\n};\n","/**\n * scrollToSection 핸들러\n *\n * 특정 섹션으로 부드럽게 스크롤 이동합니다.\n * - Sticky 헤더를 고려한 offset 적용 지원\n * - React 조건부 렌더링 대응 (재시도 로직)\n * - 페이지/컨테이너 스크롤 자동 감지\n *\n * @param action 액션 정의 (params: targetId, offset, delay, scrollContainerId)\n * @param _context 액션 컨텍스트 (미사용)\n */\n\n// Logger 설정 (G7Core 초기화 전에도 동작하도록 폴백 포함)\nconst logger = ((window as any).G7Core?.createLogger?.('Handler:ScrollToSection')) ?? {\n log: (...args: unknown[]) => console.log('[Handler:ScrollToSection]', ...args),\n warn: (...args: unknown[]) => console.warn('[Handler:ScrollToSection]', ...args),\n error: (...args: unknown[]) => console.error('[Handler:ScrollToSection]', ...args),\n};\n\nexport async function scrollToSectionHandler(\n action: any,\n _context?: any\n): Promise {\n const params = action.params || {};\n const {\n targetId,\n offset = 120,\n delay = 100,\n scrollContainerId,\n } = params as {\n targetId?: string;\n offset?: number;\n delay?: number;\n scrollContainerId?: string;\n };\n\n if (!targetId) {\n logger.warn('targetId is required');\n return;\n }\n\n // 1. 대상 요소 찾기 (React 렌더링 대기 + 재시도)\n const element = await findElementWithRetry(targetId, delay);\n if (!element) {\n logger.warn(`Element not found: ${targetId}`);\n return;\n }\n\n // 2. 스크롤 컨테이너 결정 (명시적 지정 or 자동 검색 or window)\n const scrollContainer = findScrollContainer(element, scrollContainerId);\n\n // 3. 스크롤 위치 계산 및 실행\n const offsetPosition = calculateScrollPosition(element, scrollContainer, offset);\n performScroll(scrollContainer, offsetPosition);\n}\n\n/**\n * 요소를 찾을 때까지 재시도\n * React 조건부 렌더링으로 요소가 늦게 생성될 수 있음\n */\nasync function findElementWithRetry(\n targetId: string,\n initialDelay: number\n): Promise {\n await new Promise((resolve) => setTimeout(resolve, initialDelay));\n\n const maxRetries = 10;\n const retryInterval = 50;\n\n for (let i = 0; i < maxRetries; i++) {\n const element = document.getElementById(targetId);\n if (element) {\n // 요소 발견 후 추가 렌더링 대기\n await new Promise((resolve) => setTimeout(resolve, 50));\n return element;\n }\n await new Promise((resolve) => setTimeout(resolve, retryInterval));\n }\n\n return null;\n}\n\n/**\n * 실제 스크롤 컨테이너 찾기\n * 1. scrollContainerId 파라미터가 있으면 해당 요소 검증 후 사용\n * 2. scrollContainerId가 없거나 유효하지 않으면 부모 요소 중 스크롤 가능한 요소 검색\n * 3. 찾지 못하면 페이지 스크롤 사용 (window)\n */\nfunction findScrollContainer(\n element: HTMLElement,\n scrollContainerId?: string\n): HTMLElement | Window {\n // 1. 명시적으로 지정된 경우 - 검증 후 사용\n if (scrollContainerId) {\n const container = document.getElementById(scrollContainerId);\n if (container && isScrollable(container)) {\n return container;\n }\n logger.warn(\n `Container '${scrollContainerId}' ${container ? 'has no scroll' : 'not found'}, trying auto-detect`\n );\n }\n\n // 2. 부모 요소 중 스크롤 가능한 요소 검색 (최대 10단계)\n let currentElement = element.parentElement;\n let depth = 0;\n const maxDepth = 10;\n\n while (currentElement && currentElement !== document.body && depth < maxDepth) {\n if (isScrollable(currentElement)) {\n return currentElement;\n }\n currentElement = currentElement.parentElement;\n depth++;\n }\n\n // 3. 스크롤 컨테이너를 찾지 못했으면 window 사용\n return window;\n}\n\n/**\n * 요소가 스크롤 가능한지 확인\n */\nfunction isScrollable(element: HTMLElement): boolean {\n const computedStyle = window.getComputedStyle(element);\n return (\n (computedStyle.overflowY === 'auto' || computedStyle.overflowY === 'scroll') &&\n element.scrollHeight > element.clientHeight\n );\n}\n\n/**\n * 스크롤 위치 계산\n */\nfunction calculateScrollPosition(\n element: HTMLElement,\n scrollContainer: HTMLElement | Window,\n offset: number\n): number {\n if (scrollContainer === window || !('getBoundingClientRect' in scrollContainer)) {\n // Window 스크롤\n const viewportTop = element.getBoundingClientRect().top;\n const documentTop = viewportTop + window.pageYOffset;\n return documentTop - offset;\n } else {\n // 컨테이너 내부 스크롤\n const containerRect = scrollContainer.getBoundingClientRect();\n const elementRect = element.getBoundingClientRect();\n return scrollContainer.scrollTop + (elementRect.top - containerRect.top) - offset;\n }\n}\n\n/**\n * 스크롤 실행\n */\nfunction performScroll(\n scrollContainer: HTMLElement | Window,\n offsetPosition: number\n): void {\n if (scrollContainer === window || !('scrollTo' in scrollContainer)) {\n window.scrollTo({ top: offsetPosition, behavior: 'smooth' });\n } else {\n scrollContainer.scrollTo({ top: offsetPosition, behavior: 'smooth' });\n }\n}","import React, { useState, useEffect, useRef } from 'react';\nimport { Button } from '../basic/Button';\nimport { Div } from '../basic/Div';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport { Span } from '../basic/Span';\nimport { Select } from '../basic/Select';\nimport { scrollToSectionHandler } from '../../handlers/scrollToSectionHandler';\nimport type { EditorAttrs } from '../../types';\n\n// Logger 설정 (G7Core 초기화 전에도 동작하도록 폴백 포함)\nconst logger = ((window as any).G7Core?.createLogger?.('Comp:TabNavigation')) ?? {\n log: (...args: unknown[]) => console.log('[Comp:TabNavigation]', ...args),\n warn: (...args: unknown[]) => console.warn('[Comp:TabNavigation]', ...args),\n error: (...args: unknown[]) => console.error('[Comp:TabNavigation]', ...args),\n};\n\n/**\n * 탭 정의 인터페이스\n */\nexport interface Tab {\n id: string | number;\n label: string;\n /** 탭 아이콘 (Font Awesome 아이콘명) */\n iconName?: IconName;\n disabled?: boolean;\n /** 개별 탭의 스크롤 오프셋 (우선순위: 개별 > 공통 > 기본값) */\n scrollOffset?: number;\n /** 개별 탭의 스크롤 딜레이 (우선순위: 개별 > 공통 > 기본값) */\n scrollDelay?: number;\n /** 개별 탭 클릭 시 실행될 콜백 (우선순위: 개별 > 공통 > 기본) */\n onClick?: (tabId: string | number) => void;\n}\n\n/**\n * TabNavigationScroll Props\n */\nexport interface TabNavigationScrollProps {\n /** 탭 목록 */\n tabs: Tab[];\n /** 활성 탭 ID (초기값으로만 사용) */\n activeTabId?: string | number;\n /** 컨테이너 className */\n className?: string;\n /** 컨테이너 스타일 */\n style?: React.CSSProperties;\n /** Active 탭 className */\n activeClassName?: string;\n /** Inactive 탭 className */\n inactiveClassName?: string;\n /** 섹션 ID 접두사 */\n sectionIdPrefix?: string;\n /** 스크롤 오프셋 */\n scrollOffset?: number;\n /** 스크롤 딜레이 */\n scrollDelay?: number;\n /** 탭 변경 시 실행될 공통 콜백 (우선순위: 개별 탭 onClick > onTabChange > 기본) */\n onTabChange?: (tabId: string | number) => void;\n /** Scroll Spy 활성화 여부 (스크롤 시 자동으로 탭 활성화) */\n enableScrollSpy?: boolean;\n /** Scroll Spy 감지 오프셋 (기본값: 80) */\n scrollSpyOffset?: number;\n /** 스크롤 컨테이너 ID (IntersectionObserver root 및 scrollToSection 대상, 미지정 시 window) */\n scrollContainerId?: string;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * 탭 네비게이션 컴포넌트 (자동 스크롤 기능 내장)\n *\n * 특징:\n * - 내부 상태로 활성 탭 관리 (React useState)\n * - scrollToSectionHandler를 사용하여 자동 스크롤\n * - 탭 클릭 시 즉시 UI 업데이트 + 스크롤 이동\n * - 반응형: G7Core.useResponsive() hook으로 화면 너비를 구독하여 768px 미만 시\n * Select 드롭다운으로 자동 전환 (Tailwind hidden md:flex 분기 미사용 — 위지윅 미리보기 호환)\n *\n * @example\n * ```json\n * {\n * \"type\": \"composite\",\n * \"name\": \"TabNavigationScroll\",\n * \"props\": {\n * \"tabs\": [\n * {\"id\": \"basic\", \"label\": \"$t:admin.tabs.basic\"},\n * {\"id\": \"permissions\", \"label\": \"$t:admin.tabs.permissions\"}\n * ]\n * }\n * }\n * ```\n */\nexport const TabNavigationScroll: React.FC = ({\n tabs,\n activeTabId,\n className = 'bg-white dark:bg-gray-800 flex gap-2 border-b border-gray-200 dark:border-gray-700 px-6',\n style,\n activeClassName = 'tab-btn-base tab-btn-default-active',\n inactiveClassName = 'tab-btn-base tab-btn-default',\n sectionIdPrefix = 'tab_content_',\n scrollOffset = 120,\n scrollDelay = 100,\n onTabChange,\n enableScrollSpy = false,\n scrollSpyOffset = 80,\n scrollContainerId,\n id,\n editorAttrs,\n}) => {\n const [activeTab, setActiveTab] = useState(\n activeTabId ?? (tabs.length > 0 ? tabs[0].id : '')\n );\n\n // G7Core.useResponsive를 통해 반응형 상태 구독 (G7 표준)\n const G7Core = (window as any).G7Core;\n const useResponsive = G7Core?.useResponsive;\n const responsiveValue = useResponsive?.();\n const isMobile = responsiveValue\n ? responsiveValue.width < 768\n : typeof window !== 'undefined' && window.innerWidth < 768;\n\n // Scroll Spy 일시 중지를 위한 ref\n const isScrollingRef = useRef(false);\n const scrollTimeoutRef = useRef(null);\n\n /**\n * 탭 클릭 핸들러\n * 우선순위: 개별 탭 onClick > 공통 onTabChange > 기본 동작\n */\n const handleTabClick = (tab: Tab) => {\n // Scroll Spy 일시 중지\n if (enableScrollSpy) {\n isScrollingRef.current = true;\n if (scrollTimeoutRef.current) {\n clearTimeout(scrollTimeoutRef.current);\n }\n }\n\n // 우선순위 1: 개별 탭의 onClick이 있으면 실행\n if (tab.onClick) {\n tab.onClick(tab.id);\n // enableScrollSpy가 아니면 onClick에 전적으로 위임\n if (!enableScrollSpy) {\n return;\n }\n }\n // 우선순위 2: 공통 onTabChange가 있으면 실행\n else if (onTabChange) {\n onTabChange(tab.id);\n // enableScrollSpy가 아니면 onTabChange에 전적으로 위임\n if (!enableScrollSpy) {\n return;\n }\n }\n // 우선순위 3: 콜백이 없으면 내부 상태 업데이트\n else {\n setActiveTab(tab.id);\n }\n\n // 개별 탭 설정 우선, 없으면 공통 설정 사용\n const finalOffset = tab.scrollOffset ?? scrollOffset;\n const finalDelay = tab.scrollDelay ?? scrollDelay;\n\n scrollToSectionHandler(\n {\n params: {\n targetId: `${sectionIdPrefix}${tab.id}`,\n offset: finalOffset,\n delay: finalDelay,\n scrollContainerId,\n },\n },\n {}\n );\n\n // 스크롤 완료 후 Scroll Spy 재활성화 (딜레이 + 애니메이션 시간 고려)\n if (enableScrollSpy) {\n scrollTimeoutRef.current = setTimeout(() => {\n isScrollingRef.current = false;\n }, finalDelay + 500);\n }\n };\n\n /**\n * Scroll Spy 구현 (IntersectionObserver 사용)\n *\n * 짧은 섹션과 긴 섹션이 혼재된 경우를 고려한 알고리즘:\n * - 여러 섹션이 동시에 보일 경우, 가장 많이 보이는 섹션을 활성화\n * - intersectionRatio를 비교하여 최적의 섹션 선택\n * - 스크롤이 페이지 하단에 도달하면 마지막 탭 활성화 (짧은 마지막 섹션 대응)\n */\n useEffect(() => {\n if (!enableScrollSpy) {\n return;\n }\n\n const rootElement = scrollContainerId\n ? document.getElementById(scrollContainerId)\n : null;\n\n const observerOptions = {\n root: rootElement ?? null,\n // 상단 오프셋 + 하단 30% 여유 공간 (짧은 섹션도 감지 가능)\n rootMargin: `-${scrollSpyOffset}px 0px -30% 0px`,\n // 0.1 단위로 교차 비율 감지 (더 정밀한 감지)\n threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],\n };\n\n // 현재 보이는 섹션들의 교차 비율을 저장\n const intersectingEntries = new Map();\n\n // 페이지 하단 도달 확인 헬퍼 함수 (scrollContainer 기준)\n const isAtBottom = () => {\n const container = rootElement;\n const scrollTop = container\n ? container.scrollTop\n : window.pageYOffset || document.documentElement.scrollTop;\n const scrollHeight = container\n ? container.scrollHeight\n : document.documentElement.scrollHeight;\n const clientHeight = container\n ? container.clientHeight\n : document.documentElement.clientHeight;\n // 10px 여유를 두고 하단 체크 (정확한 하단 감지)\n const atBottom = scrollTop + clientHeight >= scrollHeight - 10;\n\n // 디버깅 로그 (개발 환경에서만)\n if (process.env.NODE_ENV === 'development' && atBottom) {\n logger.log('Bottom reached:', {\n scrollTop,\n clientHeight,\n scrollHeight,\n remaining: scrollHeight - (scrollTop + clientHeight),\n });\n }\n\n return atBottom;\n };\n\n const observerCallback = (entries: IntersectionObserverEntry[]) => {\n // 수동 스크롤 중에는 Scroll Spy 비활성화\n if (isScrollingRef.current) {\n return;\n }\n\n // 교차 비율 업데이트\n entries.forEach((entry) => {\n const targetId = entry.target.id;\n if (entry.isIntersecting) {\n intersectingEntries.set(targetId, entry.intersectionRatio);\n } else {\n intersectingEntries.delete(targetId);\n }\n });\n\n // 가장 많이 보이는 섹션 찾기\n let maxRatio = 0;\n let mostVisibleId = '';\n\n intersectingEntries.forEach((ratio, id) => {\n if (ratio > maxRatio) {\n maxRatio = ratio;\n mostVisibleId = id;\n }\n });\n\n // 하단 도달 시 마지막 탭 활성화 (단, 마지막 섹션이 실제로 보이고 있을 때만)\n const lastTab = tabs[tabs.length - 1];\n const lastSectionId = `${sectionIdPrefix}${lastTab?.id}`;\n const isLastSectionVisible = intersectingEntries.has(lastSectionId);\n\n if (isAtBottom() && isLastSectionVisible && lastTab) {\n if (process.env.NODE_ENV === 'development') {\n logger.log('Activating last tab (bottom reached + last section visible):', lastTab.id);\n }\n setActiveTab(lastTab.id);\n return;\n }\n\n // 가장 많이 보이는 섹션의 탭 활성화\n if (mostVisibleId) {\n const tabId = mostVisibleId.replace(sectionIdPrefix, '');\n const numericTabId = Number(tabId);\n const finalTabId = isNaN(numericTabId) ? tabId : numericTabId;\n\n const tabExists = tabs.some((tab) => tab.id === finalTabId);\n if (tabExists) {\n setActiveTab(finalTabId);\n }\n }\n };\n\n // 스크롤 이벤트 핸들러 (현재는 IntersectionObserver가 모든 처리를 담당)\n const handleScroll = () => {\n // IntersectionObserver가 모든 탭 활성화를 처리하므로 여기서는 추가 동작 없음\n // 향후 필요시 추가 로직 구현 가능\n };\n\n const observer = new IntersectionObserver(observerCallback, observerOptions);\n\n // 모든 섹션 관찰 시작\n tabs.forEach((tab) => {\n const sectionElement = document.getElementById(`${sectionIdPrefix}${tab.id}`);\n if (sectionElement) {\n observer.observe(sectionElement);\n }\n });\n\n // 스크롤 이벤트 리스너 등록\n window.addEventListener('scroll', handleScroll, { passive: true });\n\n // Cleanup\n return () => {\n observer.disconnect();\n window.removeEventListener('scroll', handleScroll);\n if (scrollTimeoutRef.current) {\n clearTimeout(scrollTimeoutRef.current);\n }\n };\n }, [enableScrollSpy, tabs, sectionIdPrefix, scrollSpyOffset, scrollContainerId]);\n\n /**\n * Select 변경 핸들러 (모바일용)\n */\n const handleSelectChange = (\n e: React.ChangeEvent | { target: { value: string | number } }\n ) => {\n const selectedId = e.target.value;\n // 숫자형 ID 변환\n const numericId = Number(selectedId);\n const finalId = isNaN(numericId) ? selectedId : numericId;\n\n const selectedTab = tabs.find((tab) => tab.id === finalId);\n if (selectedTab) {\n handleTabClick(selectedTab);\n }\n };\n\n // 모바일: Select 드롭다운 단일 렌더\n if (isMobile) {\n return (\n
\n ({\n value: String(tab.id),\n label: tab.label,\n disabled: tab.disabled,\n }))}\n className=\"w-full\"\n />\n
\n );\n }\n\n // 데스크톱: 탭 버튼 단일 렌더\n return (\n
\n {tabs.map((tab) => (\n handleTabClick(tab)}\n >\n {tab.iconName && (\n \n )}\n {tab.label}\n \n ))}\n
\n );\n};\n","import React from 'react';\nimport { Button } from '../basic/Button';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport type { EditorAttrs } from '../../types';\n\n// G7Core 전역 객체의 스타일 헬퍼 접근\nconst G7Core = () => (window as any).G7Core;\n\nexport interface IconButtonProps {\n iconName: IconName;\n label?: string;\n onClick?: () => void;\n variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline';\n size?: 'sm' | 'md' | 'lg';\n disabled?: boolean;\n className?: string;\n style?: React.CSSProperties;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * IconButton 집합 컴포넌트\n *\n * 아이콘이 포함된 버튼 컴포넌트입니다.\n * 아이콘만 표시하거나 라벨과 함께 표시할 수 있습니다.\n *\n * 기본 컴포넌트 조합: Button + Icon\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"IconButton\",\n * \"props\": {\n * \"iconName\": \"plus\",\n * \"label\": \"추가\",\n * \"variant\": \"primary\",\n * \"size\": \"md\"\n * }\n * }\n */\nexport const IconButton: React.FC = ({\n iconName,\n label,\n onClick,\n variant = 'primary',\n size = 'md',\n disabled = false,\n className = '',\n style,\n id,\n editorAttrs,\n}) => {\n // 크기별 스타일 (라벨 없을 때는 정사각 고정 크기로 정렬을 보장)\n const sizeClasses = {\n sm: label ? 'px-3 py-1.5 text-sm' : 'w-8 h-8',\n md: label ? 'px-4 py-2 text-base' : 'w-10 h-10',\n lg: label ? 'px-5 py-2.5 text-lg' : 'w-12 h-12',\n };\n\n // 아이콘 크기\n const iconSizeClasses = {\n sm: 'w-4 h-4',\n md: 'w-5 h-5',\n lg: 'w-6 h-6',\n };\n\n // 변형별 스타일\n const variantClasses = {\n primary: 'bg-blue-600 hover:bg-blue-700 text-white border-transparent',\n secondary: 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600',\n danger: 'bg-red-600 hover:bg-red-700 text-white border-transparent',\n ghost: 'bg-transparent hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 border-transparent',\n outline: 'bg-transparent hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600',\n };\n\n const baseClasses = 'inline-flex items-center justify-center gap-2 font-medium rounded-lg border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400';\n const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : '';\n\n // 모든 내부 클래스를 결합한 후 외부 className과 병합\n const internalClasses = `${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${disabledClasses}`;\n const mergedClassName = G7Core()?.style?.mergeClasses?.(internalClasses, className)\n ?? `${internalClasses} ${className}`;\n\n return (\n \n \n {label}\n \n );\n};\n","import React from 'react';\nimport { Modal } from './Modal';\nimport { Div } from '../basic/Div';\nimport { H2 } from '../basic/H2';\nimport { Button } from '../basic/Button';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\n\n// G7Core.t() 번역 함수 참조\nconst t = (key: string, params?: Record) =>\n (window as any).G7Core?.t?.(key, params) ?? key;\n\nexport interface DialogAction {\n label: string;\n onClick: () => void;\n variant?: 'primary' | 'secondary' | 'danger' | 'ghost';\n iconName?: IconName;\n disabled?: boolean;\n}\n\nexport interface DialogProps {\n isOpen: boolean;\n onClose: () => void;\n title: string;\n content: React.ReactNode;\n actions?: DialogAction[];\n width?: string;\n closeOnOverlay?: boolean;\n showCloseButton?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\n/**\n * Dialog 집합 컴포넌트\n *\n * Modal의 특화 버전으로 제목 + 본문 + 액션 영역 구조를 표준화한 컴포넌트.\n * Modal보다 더 구조화된 레이아웃 제공.\n *\n * 기본 컴포넌트 조합:\n * - Modal > Div(header) > H2(title) + Button(close)\n * - Div(body) > {content}\n * - Div(footer) > Button[](actions)\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"Dialog\",\n * \"props\": {\n * \"isOpen\": \"{{dialogs.confirm}}\",\n * \"title\": \"확인\",\n * \"content\": \"정말 삭제하시겠습니까?\",\n * \"actions\": [\n * {\"label\": \"취소\", \"variant\": \"secondary\"},\n * {\"label\": \"삭제\", \"variant\": \"danger\"}\n * ]\n * }\n * }\n */\nexport const Dialog: React.FC = ({\n isOpen,\n onClose,\n title,\n content,\n actions = [],\n width = '500px',\n closeOnOverlay = true,\n showCloseButton = true,\n className = '',\n style,\n}) => {\n const handleOverlayClick = () => {\n if (closeOnOverlay) {\n onClose();\n }\n };\n\n // 버튼 variant별 스타일 매핑\n const variantClassMap: Record<'primary' | 'secondary' | 'danger' | 'ghost', string> = {\n primary: 'dialog-btn-primary',\n secondary: 'dialog-btn-secondary',\n danger: 'dialog-btn-danger',\n ghost: 'dialog-btn-ghost',\n };\n\n return (\n \n {/* Header */}\n
\n

\n {title}\n

\n {showCloseButton && (\n \n \n \n )}\n
\n\n {/* Body */}\n
\n {content}\n
\n\n {/* Footer (Actions) */}\n {actions.length > 0 && (\n
\n {actions.map((action, index) => (\n \n {action.iconName && (\n \n )}\n {action.label}\n \n ))}\n
\n )}\n \n );\n};\n","import React from 'react';\nimport { Modal } from './Modal';\nimport { Div } from '../basic/Div';\nimport { Button } from '../basic/Button';\nimport { P } from '../basic/P';\nimport { Span } from '../basic/Span';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\n\n// G7Core.t() 번역 함수 참조\nconst t = (key: string, params?: Record) =>\n (window as any).G7Core?.t?.(key, params) ?? key;\n\nexport interface ConfirmDialogProps {\n isOpen: boolean;\n onClose: () => void;\n title: string;\n message: string | React.ReactNode;\n confirmText?: string;\n cancelText?: string;\n onConfirm: () => void;\n onCancel?: () => void;\n confirmButtonVariant?: 'primary' | 'secondary' | 'danger' | 'ghost';\n cancelButtonVariant?: 'primary' | 'secondary' | 'danger' | 'ghost';\n width?: string;\n closeOnOverlay?: boolean;\n /** 로딩 중 여부 (확인 버튼 비활성화 및 텍스트 변경) */\n isLoading?: boolean;\n /** 로딩 중 확인 버튼에 표시할 텍스트 */\n loadingText?: string;\n}\n\n/**\n * ConfirmDialog 집합 컴포넌트\n *\n * Modal 기반 확인/취소 다이얼로그 컴포넌트.\n * 사용자에게 확인을 요청하고 확인/취소 중 하나를 선택하도록 합니다.\n *\n * 기본 컴포넌트 조합:\n * - Modal > P(message) + Button(확인) + Button(취소)\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"ConfirmDialog\",\n * \"props\": {\n * \"isOpen\": \"{{dialogs.deleteConfirm}}\",\n * \"title\": \"삭제 확인\",\n * \"message\": \"정말 이 항목을 삭제하시겠습니까?\",\n * \"confirmText\": \"삭제\",\n * \"cancelText\": \"$t:common.cancel\",\n * \"confirmButtonVariant\": \"danger\"\n * }\n * }\n */\nexport const ConfirmDialog: React.FC = ({\n isOpen,\n onClose,\n title,\n message,\n confirmText,\n cancelText,\n onConfirm,\n onCancel,\n confirmButtonVariant = 'primary',\n // cancelButtonVariant는 현재 고정 스타일 사용으로 미사용\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n cancelButtonVariant: _cancelButtonVariant = 'secondary',\n width = '500px',\n // closeOnOverlay는 Modal에서 처리하므로 미사용\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n closeOnOverlay: _closeOnOverlay = true,\n isLoading = false,\n loadingText,\n}) => {\n // props로 전달된 값이 없으면 다국어 키 사용\n const resolvedConfirmText = confirmText ?? t('common.confirm');\n const resolvedCancelText = cancelText ?? t('common.cancel');\n const resolvedLoadingText = loadingText ?? t('common.loading');\n\n const handleConfirm = () => {\n onConfirm();\n };\n\n const handleCancel = () => {\n // 로딩 중에는 취소 불가\n if (isLoading) return;\n onCancel?.();\n onClose();\n };\n\n const handleClose = () => {\n // 로딩 중에는 닫기 불가\n if (isLoading) return;\n onClose();\n };\n\n // 버튼 variant별 스타일 매핑\n const confirmVariantClassMap: Record<'primary' | 'secondary' | 'danger' | 'ghost', string> = {\n primary: 'bg-blue-600 text-white hover:bg-blue-700',\n secondary: 'bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600',\n danger: 'bg-red-600 text-white hover:bg-red-700',\n ghost: 'bg-transparent text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700',\n };\n\n return (\n \n {/* 본문 */}\n
\n {typeof message === 'string' ? (\n

{message}

\n ) : (\n message\n )}\n
\n\n {/* 푸터 (버튼 영역) */}\n
\n {/* 취소 버튼 */}\n \n {resolvedCancelText}\n \n\n {/* 확인 버튼 */}\n \n {isLoading && (\n \n )}\n {isLoading ? resolvedLoadingText : resolvedConfirmText}\n \n
\n \n );\n};\n","import React from 'react';\nimport { Dialog, DialogAction } from './Dialog';\nimport { P } from '../basic/P';\n\n// G7Core.t() 번역 함수 참조\nconst t = (key: string, params?: Record) =>\n (window as any).G7Core?.t?.(key, params) ?? key;\n\nexport interface AlertDialogProps {\n isOpen: boolean;\n onClose: () => void;\n title: string;\n message: string | React.ReactNode;\n confirmText?: string;\n onConfirm?: () => void;\n confirmButtonVariant?: 'primary' | 'secondary' | 'danger' | 'ghost';\n width?: string;\n closeOnOverlay?: boolean;\n}\n\n/**\n * AlertDialog 집합 컴포넌트\n *\n * Dialog 기반 단일 확인 알림 다이얼로그 컴포넌트.\n * 사용자에게 정보를 전달하고 확인만 받습니다.\n *\n * 기본 컴포넌트 조합:\n * - Dialog > P(message) + Button(확인)\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"AlertDialog\",\n * \"props\": {\n * \"isOpen\": \"{{dialogs.successAlert}}\",\n * \"title\": \"성공\",\n * \"message\": \"작업이 성공적으로 완료되었습니다.\",\n * \"confirmText\": \"$t:common.confirm\",\n * \"confirmButtonVariant\": \"primary\"\n * }\n * }\n */\nexport const AlertDialog: React.FC = ({\n isOpen,\n onClose,\n title,\n message,\n confirmText,\n onConfirm,\n confirmButtonVariant = 'primary',\n width = '500px',\n closeOnOverlay = true,\n}) => {\n // props로 전달된 값이 없으면 다국어 키 사용\n const resolvedConfirmText = confirmText ?? t('common.confirm');\n\n const handleConfirm = () => {\n onConfirm?.();\n onClose();\n };\n\n const actions: DialogAction[] = [\n {\n label: resolvedConfirmText,\n onClick: handleConfirm,\n variant: confirmButtonVariant,\n },\n ];\n\n // message가 문자열인 경우 P 컴포넌트로 래핑\n const content = typeof message === 'string' ? (\n

{message}

\n ) : (\n message\n );\n\n return (\n \n );\n};\n","import React, { useEffect, useState, useCallback } from 'react';\nimport { Div } from '../basic/Div';\nimport { Span } from '../basic/Span';\nimport { Button } from '../basic/Button';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\n\n/**\n * G7Core.t() 번역 함수 참조\n * 런타임에 G7Core.t를 접근하여 테스트 환경에서도 모킹이 적용되도록 함\n */\nconst getTranslation = (key: string, params?: Record) => {\n const G7Core = (window as any).G7Core;\n return G7Core?.t?.(key, params) ?? key;\n};\n\nexport type ToastType = 'success' | 'error' | 'warning' | 'info';\nexport type ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right';\n\nexport interface ToastItem {\n id: string | number;\n type: ToastType;\n message: string;\n /** 커스텀 아이콘 이름 (지정하지 않으면 타입별 기본 아이콘 사용) */\n icon?: string;\n /** 개별 토스트 자동 닫힘 시간 (ms) */\n duration?: number;\n}\n\nexport interface ToastProps {\n /** 토스트 배열 (전역 상태 _global.toasts) */\n toasts?: ToastItem[] | null;\n /** 토스트 표시 위치 */\n position?: ToastPosition;\n /** 기본 자동 닫힘 시간 (ms, 기본 3000) */\n duration?: number;\n /** 토스트 제거 콜백 (전역 상태 업데이트용) */\n onRemove?: (id: string | number) => void;\n}\n\n// 타입별 기본 아이콘 매핑\nconst defaultIconMap: Record = {\n success: IconName.CheckCircle,\n error: IconName.XCircle,\n warning: IconName.ExclamationTriangle,\n info: IconName.InfoCircle,\n};\n\n// 타입별 스타일 매핑\nconst typeStyleMap: Record = {\n success: {\n bg: 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800',\n text: 'text-green-800 dark:text-green-300',\n },\n error: {\n bg: 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800',\n text: 'text-red-800 dark:text-red-300',\n },\n warning: {\n bg: 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800',\n text: 'text-yellow-800 dark:text-yellow-300',\n },\n info: {\n bg: 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800',\n text: 'text-blue-800 dark:text-blue-300',\n },\n};\n\n// position별 스타일 매핑\nconst positionClassMap: Record = {\n 'top-left': 'top-4 left-4',\n 'top-center': 'top-4 left-1/2 -translate-x-1/2',\n 'top-right': 'top-4 right-4',\n 'bottom-left': 'bottom-4 left-4',\n 'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',\n 'bottom-right': 'bottom-4 right-4',\n};\n\n/**\n * Toast 컴포넌트\n *\n * 전역 상태(_global.toasts)를 구독하여 토스트 알림을 스택으로 표시하는 컴포넌트.\n * ActionDispatcher의 toast 핸들러와 연동됩니다.\n *\n * 기능:\n * - 다중 토스트 스택 지원\n * - 타입별 스타일 (success, error, warning, info)\n * - 커스텀 아이콘 지정 가능\n * - 개별 토스트 자동 닫힘 시간 설정\n * - 수동 닫기 버튼\n *\n * @example\n * // 레이아웃 JSON 사용 예시 (_admin_base.json)\n * {\n * \"id\": \"global_toast\",\n * \"type\": \"composite\",\n * \"name\": \"Toast\",\n * \"props\": {\n * \"toasts\": \"{{_global.toasts}}\",\n * \"position\": \"bottom-center\",\n * \"duration\": 3000\n * }\n * }\n *\n * @example\n * // toast 핸들러 호출 예시 (레이아웃 JSON)\n * {\n * \"handler\": \"toast\",\n * \"params\": {\n * \"type\": \"success\",\n * \"message\": \"$t:admin.users.modals.bulk_activate_success\",\n * \"icon\": \"check\",\n * \"duration\": 5000\n * }\n * }\n */\nexport const Toast: React.FC = ({\n toasts,\n position = 'bottom-center',\n duration = 3000,\n onRemove,\n}) => {\n // 내부적으로 표시할 토스트 상태 관리 (애니메이션용)\n const [visibleToasts, setVisibleToasts] = useState>(new Map());\n\n // 토스트 제거 핸들러\n const handleRemove = useCallback((id: string | number) => {\n // 먼저 숨김 애니메이션 시작\n setVisibleToasts(prev => {\n const next = new Map(prev);\n next.set(id, false);\n return next;\n });\n\n // 애니메이션 후 실제 제거\n setTimeout(() => {\n if (onRemove) {\n onRemove(id);\n } else {\n // onRemove가 없으면 G7Core.state.update를 통해 전역 상태 업데이트\n const G7Core = (window as any).G7Core;\n if (G7Core?.state?.update) {\n G7Core.state.update((prevState: Record) => {\n const currentToasts = Array.isArray(prevState.toasts) ? prevState.toasts : [];\n return {\n toasts: currentToasts.filter((t: ToastItem) => t.id !== id),\n };\n });\n }\n }\n }, 300);\n }, [onRemove]);\n\n // 새 토스트가 추가되면 visible 상태 설정 및 자동 제거 타이머 설정\n useEffect(() => {\n if (!toasts || toasts.length === 0) return;\n\n toasts.forEach(toast => {\n // 이미 처리된 토스트는 건너뜀\n if (visibleToasts.has(toast.id)) return;\n\n // visible 상태 추가\n setVisibleToasts(prev => {\n const next = new Map(prev);\n next.set(toast.id, true);\n return next;\n });\n\n // 자동 제거 타이머 설정\n const effectiveDuration = toast.duration || duration;\n if (effectiveDuration > 0) {\n setTimeout(() => {\n handleRemove(toast.id);\n }, effectiveDuration);\n }\n });\n }, [toasts, duration, handleRemove, visibleToasts]);\n\n // 토스트가 없으면 렌더링하지 않음\n if (!toasts || toasts.length === 0) {\n return null;\n }\n\n return (\n \n {toasts.map((toast) => (\n handleRemove(toast.id)}\n />\n ))}\n \n );\n};\n\ninterface ToastItemProps {\n toast: ToastItem;\n position: ToastPosition;\n isVisible: boolean;\n onClose: () => void;\n}\n\nconst ToastItem: React.FC = ({ toast, position, isVisible, onClose }) => {\n const typeStyle = typeStyleMap[toast.type] || typeStyleMap.info;\n\n // 아이콘 결정: 커스텀 아이콘 > 타입별 기본 아이콘\n const iconName = toast.icon\n ? (toast.icon as IconName)\n : defaultIconMap[toast.type];\n\n // position에 따라 숨김 애니메이션 방향 결정 (top → 위로, bottom → 아래로)\n const hideTranslate = position.startsWith('bottom') ? 'translate-y-2' : '-translate-y-2';\n\n return (\n \n \n \n {toast.message}\n \n \n \n \n \n );\n};\n","import React from 'react';\nimport { Nav } from '../basic/Nav';\nimport { Div } from '../basic/Div';\nimport { A } from '../basic/A';\nimport { Span } from '../basic/Span';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport type { EditorAttrs } from '../../types';\n\nexport interface BreadcrumbItem {\n label: string;\n href?: string;\n onClick?: () => void;\n}\n\nexport interface BreadcrumbProps {\n items: BreadcrumbItem[];\n separator?: React.ReactNode;\n showHome?: boolean;\n homeHref?: string;\n maxItems?: number;\n className?: string;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * Breadcrumb 집합 컴포넌트\n *\n * 현재 페이지의 경로를 계층적으로 표시하는 내비게이션 컴포넌트.\n * separator 커스터마이징, showHome 옵션, maxItems로 중간 생략 기능 제공.\n *\n * 기본 컴포넌트 조합:\n * - Nav > Div > A(링크) + Span(구분자)\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"Breadcrumb\",\n * \"props\": {\n * \"items\": [\n * {\"label\": \"대시보드\", \"href\": \"/admin\"},\n * {\"label\": \"사용자 관리\", \"href\": \"/admin/users\"},\n * {\"label\": \"사용자 목록\"}\n * ],\n * \"showHome\": true,\n * \"maxItems\": 4\n * }\n * }\n */\nexport const Breadcrumb: React.FC = ({\n items,\n separator = ,\n showHome = false,\n homeHref = '/',\n maxItems,\n className = '',\n id,\n editorAttrs,\n}) => {\n // Home 아이템 생성\n const homeItem: BreadcrumbItem = {\n label: 'Home',\n href: homeHref,\n };\n\n // 전체 아이템 배열 생성\n let allItems = showHome ? [homeItem, ...items] : items;\n\n // maxItems 적용 (중간 생략)\n let displayItems = allItems;\n let hasEllipsis = false;\n\n if (maxItems && allItems.length > maxItems) {\n hasEllipsis = true;\n const firstItems = allItems.slice(0, 1);\n const lastItems = allItems.slice(-(maxItems - 2));\n displayItems = [...firstItems, ...lastItems];\n }\n\n return (\n \n
\n {displayItems.map((item, index) => {\n const isLast = index === displayItems.length - 1;\n const isFirst = index === 0;\n\n return (\n \n {/* 중간 생략 표시 (첫 번째 아이템 다음) */}\n {hasEllipsis && isFirst && (\n <>\n \n \n {separator}\n \n ...\n {displayItems.length > 1 && (\n \n {separator}\n \n )}\n \n )}\n\n {/* 일반 아이템 */}\n {(!hasEllipsis || !isFirst) && (\n <>\n \n {!isLast && (\n \n {separator}\n \n )}\n \n )}\n \n );\n })}\n
\n \n );\n};\n\ninterface BreadcrumbLinkProps {\n item: BreadcrumbItem;\n isLast: boolean;\n}\n\nconst BreadcrumbLink: React.FC = ({ item, isLast }) => {\n if (isLast || (!item.href && !item.onClick)) {\n // 마지막 아이템이거나 링크가 없는 경우\n return (\n \n {item.label}\n \n );\n }\n\n if (item.onClick) {\n // onClick 핸들러가 있는 경우\n return (\n {\n e.preventDefault();\n item.onClick?.();\n }}\n className=\"text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors\"\n >\n {item.label}\n \n );\n }\n\n // 일반 링크\n return (\n \n {item.label}\n \n );\n};\n","import React from 'react';\nimport { Div } from '../basic/Div';\nimport { H2 } from '../basic/H2';\nimport { P } from '../basic/P';\nimport { Button } from '../basic/Button';\nimport { Icon } from '../basic/Icon';\nimport { Img } from '../basic/Img';\nimport { IconName } from '../basic/IconTypes';\nimport type { EditorAttrs } from '../../types';\n\nexport interface EmptyStateAction {\n label: string;\n onClick: () => void;\n variant?: 'primary' | 'secondary' | 'danger' | 'ghost';\n iconName?: IconName;\n}\n\nexport interface EmptyStateProps {\n title: string;\n description?: string;\n iconName?: IconName;\n illustrationSrc?: string;\n illustrationAlt?: string;\n actions?: EmptyStateAction[];\n className?: string;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * EmptyState 집합 컴포넌트\n *\n * 데이터가 없거나 검색 결과가 없을 때 표시하는 빈 상태 컴포넌트.\n * icon/illustration, title, description, actions 버튼 배열 지원.\n *\n * 기본 컴포넌트 조합:\n * - Div(컨테이너) > Icon/Img + H2(제목) + P(설명) + Div(액션) > Button[]\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"EmptyState\",\n * \"props\": {\n * \"title\": \"검색 결과가 없습니다\",\n * \"description\": \"다른 검색어로 시도해보세요.\",\n * \"iconName\": \"Search\",\n * \"actions\": [\n * {\"label\": \"검색 초기화\", \"variant\": \"secondary\"}\n * ]\n * }\n * }\n */\nexport const EmptyState: React.FC = ({\n title,\n description,\n iconName,\n illustrationSrc,\n illustrationAlt = 'Empty state illustration',\n actions = [],\n className = '',\n id,\n editorAttrs,\n}) => {\n // 버튼 variant별 스타일 매핑\n const variantClassMap: Record<'primary' | 'secondary' | 'danger' | 'ghost', string> = {\n primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',\n secondary: 'bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 focus:ring-gray-500',\n danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',\n ghost: 'bg-transparent text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-gray-500',\n };\n\n return (\n \n {/* Icon 또는 Illustration */}\n {illustrationSrc ? (\n \n ) : iconName ? (\n
\n \n
\n ) : null}\n\n {/* Title */}\n

\n {title}\n

\n\n {/* Description */}\n {description && (\n

\n {description}\n

\n )}\n\n {/* Actions */}\n {actions.length > 0 && (\n
\n {actions.map((action, index) => (\n \n {action.iconName && (\n \n )}\n {action.label}\n \n ))}\n
\n )}\n \n );\n};\n","import React from 'react';\nimport { Div } from '../basic/Div';\nimport { Span } from '../basic/Span';\nimport type { EditorAttrs } from '../../types';\n\n// G7Core.t() 번역 함수 참조\nconst t = (key: string, params?: Record) =>\n (window as any).G7Core?.t?.(key, params) ?? key;\n\nexport type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface LoadingSpinnerProps {\n id?: string;\n size?: SpinnerSize;\n color?: string;\n fullscreen?: boolean;\n text?: string;\n className?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * LoadingSpinner 집합 컴포넌트\n *\n * 로딩 상태를 시각적으로 표시하는 스피너 컴포넌트.\n * size, color, fullscreen 모드, text 라벨 옵션 제공.\n *\n * 기본 컴포넌트 조합:\n * - Div(컨테이너) > Div(스피너) + Span(텍스트, 옵션)\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"LoadingSpinner\",\n * \"props\": {\n * \"size\": \"lg\",\n * \"text\": \"데이터를 불러오는 중...\",\n * \"fullscreen\": false\n * }\n * }\n */\nexport const LoadingSpinner: React.FC = ({\n id,\n size = 'md',\n color = 'text-blue-600',\n fullscreen = false,\n text,\n className = '',\n editorAttrs,\n}) => {\n // size별 스피너 크기 매핑\n const sizeClassMap: Record = {\n sm: 'w-4 h-4 border-2',\n md: 'w-8 h-8 border-2',\n lg: 'w-12 h-12 border-3',\n xl: 'w-16 h-16 border-4',\n };\n\n // size별 텍스트 크기 매핑\n const textSizeClassMap: Record = {\n sm: 'text-xs',\n md: 'text-sm',\n lg: 'text-base',\n xl: 'text-lg',\n };\n\n const spinnerContent = (\n
\n {/* Spinner */}\n \n\n {/* Text Label */}\n {text && (\n \n {text}\n \n )}\n
\n );\n\n if (fullscreen) {\n return (\n \n {spinnerContent}\n \n );\n }\n\n return (\n \n {spinnerContent}\n \n );\n};\n","import React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { Div } from '../basic/Div';\nimport { Img } from '../basic/Img';\nimport { Span } from '../basic/Span';\nimport { Button } from '../basic/Button';\nimport { I } from '../basic/I';\nimport type { EditorAttrs } from '../../types';\n\n// G7Core 전역 객체 접근 헬퍼\nconst G7Core = () => (window as any).G7Core;\n\n// G7Core.t() 번역 함수 참조\nconst t = (key: string, params?: Record) =>\n (window as any).G7Core?.t?.(key, params) ?? key;\n\n/**\n * 메뉴 아이템 인터페이스 (API 응답 구조)\n */\nexport interface MenuItem {\n id: string | number;\n name: string | { ko: string; en: string };\n slug: string;\n url?: string | null;\n icon?: string;\n children?: MenuItem[];\n is_active?: boolean;\n module_id?: number | null;\n}\n\n/**\n * AdminSidebar Props\n */\nexport interface AdminSidebarProps {\n logo?: string;\n logoAlt?: string;\n menu: MenuItem[];\n collapsed?: boolean;\n onToggleCollapse?: () => void;\n className?: string;\n /** 현재 로케일 (다국어 메뉴 이름 표시용). 미지정 시 G7Core.locale.current() 자동 사용 */\n currentLocale?: string;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * AdminSidebar 컴포넌트\n *\n * 관리자 사이드바 - 계층형 메뉴, 접기/펼치기 기능 제공\n *\n * @example\n * ```tsx\n * \n * ```\n */\nexport const AdminSidebar: React.FC = ({\n logo,\n logoAlt = 'Logo',\n menu = [],\n collapsed = false,\n onToggleCollapse,\n className = '',\n currentLocale: currentLocaleProp,\n id,\n editorAttrs,\n}) => {\n const [expandedItems, setExpandedItems] = useState>(new Set());\n const [locale, setLocale] = useState(currentLocaleProp || G7Core()?.locale?.current?.() || 'ko');\n const [currentPath, setCurrentPath] = useState(window.location.pathname);\n\n // 메뉴 트리에서 모든 URL 수집 (가장 구체적인 매칭 판별용)\n const allMenuUrls = useMemo(() => {\n const urls: string[] = [];\n const collect = (items: MenuItem[]) => {\n for (const item of items) {\n if (item.url) urls.push(item.url);\n if (item.children) collect(item.children);\n }\n };\n collect(menu);\n return urls;\n }, [menu]);\n\n // 주어진 경로에 가장 구체적으로 매칭되는 메뉴 URL 찾기\n const findBestMatch = useCallback((path: string): string | null => {\n let bestMatch: string | null = null;\n for (const url of allMenuUrls) {\n if (path === url || path.startsWith(url + '/')) {\n if (!bestMatch || url.length > bestMatch.length) {\n bestMatch = url;\n }\n }\n }\n return bestMatch;\n }, [allMenuUrls]);\n\n // G7Core 로케일 및 경로 변경 구독\n useEffect(() => {\n const g7core = G7Core();\n if (!g7core?.state?.subscribe) return;\n\n const unsubscribe = g7core.state.subscribe((state: any) => {\n const newLocale = state?._global?.locale || g7core?.locale?.current?.() || 'ko';\n setLocale(newLocale);\n\n // 현재 경로 업데이트\n const newPath = state?._global?.currentPath || window.location.pathname;\n setCurrentPath(newPath);\n });\n\n return unsubscribe;\n }, []);\n\n // 브라우저 뒤로가기/앞으로가기 감지\n useEffect(() => {\n const handlePopState = () => {\n setCurrentPath(window.location.pathname);\n };\n\n window.addEventListener('popstate', handlePopState);\n return () => window.removeEventListener('popstate', handlePopState);\n }, []);\n\n // currentLocale prop이 변경되면 우선 적용\n useEffect(() => {\n if (currentLocaleProp) {\n setLocale(currentLocaleProp);\n }\n }, [currentLocaleProp]);\n\n /**\n * 특정 경로가 메뉴 URL과 일치하는지 확인\n * 접두사 매칭 시 가장 구체적인(가장 긴) 매칭만 활성화 ()\n *\n * @param url 메뉴 URL\n * @param path 확인할 경로\n * @returns 일치 여부\n */\n const isPathActive = (url: string | null | undefined, path: string): boolean => {\n if (!url || typeof path !== 'string') return false;\n if (path === url) return true;\n if (path.startsWith(url + '/')) {\n return findBestMatch(path) === url;\n }\n return false;\n };\n\n /**\n * 활성 메뉴의 부모 ID들을 찾아 반환\n *\n * @param items 메뉴 아이템 배열\n * @param path 현재 경로\n * @returns 활성 부모 ID Set\n */\n const findActiveParentIds = (items: MenuItem[], path: string): Set => {\n const parents = new Set();\n\n const traverse = (menuItems: MenuItem[]): boolean => {\n for (const item of menuItems) {\n if (item.children && item.children.length > 0) {\n const hasActiveInChildren = traverse(item.children);\n if (hasActiveInChildren || isPathActive(item.url, path)) {\n parents.add(item.id);\n return true;\n }\n } else if (isPathActive(item.url, path)) {\n return true;\n }\n }\n return false;\n };\n\n traverse(items);\n return parents;\n };\n\n // 초기 로드 및 경로 변경 시 활성 메뉴의 부모를 자동 펼침\n useEffect(() => {\n if (menu.length > 0 && currentPath) {\n const activeParents = findActiveParentIds(menu, currentPath);\n if (activeParents.size > 0) {\n setExpandedItems((prev) => new Set([...prev, ...activeParents]));\n }\n }\n }, [currentPath, menu]);\n\n /**\n * 메뉴 URL이 현재 경로와 일치하는지 확인\n * 접두사 매칭 시 가장 구체적인 매칭만 활성화 ()\n *\n * @param url 메뉴 URL\n * @returns 활성 여부\n */\n const isActiveMenu = (url: string | null | undefined): boolean => {\n return isPathActive(url, currentPath);\n };\n\n /**\n * 하위 메뉴 중 활성 메뉴가 있는지 확인 (부모 메뉴 강조용)\n *\n * @param item 메뉴 아이템\n * @returns 하위에 활성 메뉴 존재 여부\n */\n const hasActiveChild = (item: MenuItem): boolean => {\n if (!item.children) return false;\n return item.children.some((child) => isActiveMenu(child.url) || hasActiveChild(child));\n };\n\n /**\n * 하위 메뉴 토글\n */\n const toggleExpand = (itemId: string | number) => {\n setExpandedItems((prev) => {\n const newSet = new Set(prev);\n if (newSet.has(itemId)) {\n newSet.delete(itemId);\n } else {\n newSet.add(itemId);\n }\n return newSet;\n });\n };\n\n /**\n * 다국어 name을 현재 로케일에 맞게 반환\n */\n const getMenuLabel = (name: string | { ko: string; en: string; [key: string]: string }): string => {\n if (typeof name === 'string') return name;\n // 현재 로케일에 맞는 이름 반환, fallback으로 en → 첫 번째 값\n return name[locale] || name.en || Object.values(name)[0] || '';\n };\n\n /**\n * 메뉴 네비게이션 핸들러\n * G7Core.dispatch가 있으면 SPA 방식으로, 없으면 전체 페이지 리로드\n * 모바일에서는 페이지 로드 완료 후 사이드바를 닫음\n */\n const handleNavigate = (event: React.MouseEvent, url: string) => {\n if (G7Core()?.dispatch) {\n // G7Core.dispatch가 있으면 SPA 방식 네비게이션\n event.preventDefault();\n\n // 페이지 전환 완료 후 사이드바 닫기\n G7Core().navigation?.onComplete(() => {\n G7Core().dispatch({\n handler: 'setState',\n params: {\n target: 'global',\n sidebarOpen: false,\n },\n });\n });\n\n G7Core().dispatch({\n handler: 'navigate',\n params: { path: url },\n });\n } else {\n // fallback: 전체 페이지 리로드\n window.location.href = url;\n }\n };\n\n /**\n * 메뉴 아이템 렌더링 (재귀)\n */\n const renderMenuItem = (item: MenuItem, level: number = 0, isLast: boolean = false): React.ReactNode => {\n const hasChildren = item.children && item.children.length > 0;\n const isExpanded = expandedItems.has(item.id);\n // padding-left 는 .admin-sidebar-item (px-3 → 12px) / .admin-sidebar-subitem\n // (pl-[30px]) 시맨틱 자산에 흡수됨.\n const label = getMenuLabel(item.name);\n const isSubItem = level > 0;\n\n // 활성 메뉴 판별\n const isActive = isActiveMenu(item.url);\n const hasActiveDescendant = hasActiveChild(item);\n\n // 스타일 클래스\n const baseClass = isSubItem ? 'admin-sidebar-subitem' : 'admin-sidebar-item';\n const activeClass = 'admin-sidebar-item-active';\n const activeParentClass = 'admin-sidebar-item-active-parent';\n const defaultClass = 'admin-sidebar-item-default';\n const disabledClass = 'admin-sidebar-item-disabled';\n\n return (\n
\n {/* 서브메뉴 트리라인 */}\n {isSubItem && (\n <>\n {/* 세로선 (마지막 아이템이 아닐 때만) */}\n {!isLast && (\n
\n )}\n {/* 커브드 연결선 */}\n
\n \n )}\n {/* 메뉴 아이템 */}\n {hasChildren && item.url ? (\n // 하위 메뉴 + URL 있는 경우: 텍스트 클릭 → 네비게이션, chevron 클릭 → 토글\n \n handleNavigate(event, item.url!)}\n className=\"flex items-center justify-start flex-1 min-w-0\"\n >\n {item.icon && (\n \n )}\n {!collapsed && {label}}\n \n {!collapsed && (\n
\n {item.module_id && (\n \n )}\n toggleExpand(item.id)}\n className=\"p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-600\"\n aria-label={t(isExpanded ? 'common.collapse' : 'common.expand')}\n >\n \n \n
\n )}\n
\n ) : hasChildren ? (\n // 하위 메뉴만 있는 경우 (URL 없음): 전체 클릭 → 토글\n toggleExpand(item.id)}\n className={`\n ${baseClass}\n ${hasActiveDescendant ? activeParentClass : defaultClass}\n ${collapsed ? 'justify-center' : ''}\n `}\n >\n
\n {item.icon && (\n
\n \n
\n )}\n {!collapsed && {label}}\n
\n {!collapsed && (\n
\n {item.module_id && (\n \n )}\n \n
\n )}\n \n ) : item.url ? (\n // 하위 메뉴가 없고 URL이 있는 경우: 네비게이션 버튼\n handleNavigate(event, item.url!)}\n className={`\n ${baseClass}\n ${isActive ? activeClass : defaultClass}\n ${collapsed ? 'justify-center' : ''}\n text-left\n `}\n >\n
\n {item.icon && (\n
\n \n
\n )}\n {!collapsed && {label}}\n
\n {!collapsed && item.module_id && (\n \n )}\n \n ) : (\n // 하위 메뉴도 없고 URL도 없는 경우: 비활성 버튼\n \n
\n {item.icon && (\n
\n \n
\n )}\n {!collapsed && {label}}\n
\n {!collapsed && item.module_id && (\n \n )}\n \n )}\n\n {/* 하위 메뉴 */}\n {hasChildren && !collapsed && isExpanded && (\n
\n {item.children!.map((child, index) =>\n renderMenuItem(child, level + 1, index === item.children!.length - 1)\n )}\n
\n )}\n
\n );\n };\n\n return (\n
\n {/* 로고 영역 (선택적) */}\n {(logo || onToggleCollapse) && (\n
\n {logo && !collapsed && (\n \n )}\n {onToggleCollapse && (\n \n \n \n )}\n
\n )}\n\n {/* 메뉴 영역 */}\n
\n {menu.map((item, index) => renderMenuItem(item, 0, index === menu.length - 1))}\n
\n
\n );\n};\n","import React, { useState, useRef, useEffect } from 'react';\nimport { Div } from '../basic/Div';\nimport { Button } from '../basic/Button';\nimport { Img } from '../basic/Img';\nimport { Span } from '../basic/Span';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\n\n// G7Core.t() 번역 함수 참조\nconst t = (key: string, params?: Record) =>\n (window as any).G7Core?.t?.(key, params) ?? key;\n\n/**\n * 사용자 정보 인터페이스\n */\nexport interface AdminUser {\n name: string;\n email: string;\n avatar?: string;\n role?: string;\n}\n\n/**\n * 알림 아이템 인터페이스\n */\nexport interface NotificationItem {\n id: string | number;\n title: string;\n message: string;\n time: string;\n read?: boolean;\n iconName?: IconName;\n onClick?: () => void;\n}\n\n/**\n * AdminHeader Props\n */\nexport interface AdminHeaderProps {\n user: AdminUser;\n notifications?: NotificationItem[];\n onNotificationClick?: (id: string | number) => void;\n onProfileClick?: () => void;\n onLogoutClick?: () => void;\n className?: string;\n}\n\n/**\n * AdminHeader 컴포넌트\n *\n * 관리자 헤더 - 사용자 프로필, 알림 센터\n *\n * @example\n * ```tsx\n * \n * ```\n */\nexport const AdminHeader: React.FC = ({\n user = { name: '', email: '' },\n notifications = [],\n onNotificationClick,\n onProfileClick,\n onLogoutClick,\n className = '',\n}) => {\n const [showNotifications, setShowNotifications] = useState(false);\n const [showProfileMenu, setShowProfileMenu] = useState(false);\n const notificationRef = useRef(null);\n const profileRef = useRef(null);\n\n const unreadCount = notifications.filter((n) => !n.read).length;\n\n /**\n * 외부 클릭 감지\n */\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n notificationRef.current &&\n !notificationRef.current.contains(event.target as Node)\n ) {\n setShowNotifications(false);\n }\n if (\n profileRef.current &&\n !profileRef.current.contains(event.target as Node)\n ) {\n setShowProfileMenu(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n return (\n \n {/* 알림 센터 */}\n
\n setShowNotifications(!showNotifications)}\n className=\"relative p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors\"\n aria-label={t('common.notifications')}\n >\n \n {unreadCount > 0 && (\n \n {unreadCount > 9 ? '9+' : unreadCount}\n \n )}\n \n\n {/* 알림 드롭다운 */}\n {showNotifications && (\n
\n
\n {t('common.notifications')}\n
\n
\n {notifications.length === 0 ? (\n
\n {t('common.no_notifications')}\n
\n ) : (\n notifications.map((notification) => (\n {\n notification.onClick?.();\n onNotificationClick?.(notification.id);\n setShowNotifications(false);\n }}\n className={`\n w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700 transition-colors\n ${!notification.read ? 'bg-blue-50 dark:bg-blue-900/20' : ''}\n `}\n >\n
\n {notification.iconName && (\n \n )}\n
\n
\n {notification.title}\n
\n
\n {notification.message}\n
\n
\n {notification.time}\n
\n
\n {!notification.read && (\n \n )}\n
\n \n ))\n )}\n
\n
\n )}\n
\n\n {/* 사용자 프로필 */}\n
\n setShowProfileMenu(!showProfileMenu)}\n className=\"flex items-center gap-3 px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors\"\n >\n {user.avatar ? (\n \n ) : (\n
\n \n
\n )}\n
\n
{user.name}
\n {user.role && (\n
{user.role}
\n )}\n
\n \n \n\n {/* 프로필 드롭다운 */}\n {showProfileMenu && (\n
\n
\n
{user.name}
\n
{user.email}
\n
\n
\n {\n onProfileClick?.();\n setShowProfileMenu(false);\n }}\n className=\"w-full px-4 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-3 transition-colors text-gray-900 dark:text-white\"\n >\n \n {t('common.profile_settings')}\n \n {\n onLogoutClick?.();\n setShowProfileMenu(false);\n }}\n className=\"w-full px-4 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-3 text-red-600 dark:text-red-400 transition-colors\"\n >\n \n {t('common.logout')}\n \n
\n
\n )}\n
\n
\n );\n};\n","import React, { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';\nimport { Div } from '../basic/Div';\nimport { Button } from '../basic/Button';\nimport { Span } from '../basic/Span';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport { Input } from '../basic/Input';\nimport type { EditorAttrs } from '../../types';\n\n/**\n * 알림 아이템 인터페이스\n */\nexport interface NotificationItem {\n id: string | number;\n title: string;\n message: string;\n time: string;\n read?: boolean;\n iconName?: IconName;\n data?: Record;\n onClick?: () => void;\n}\n\n/**\n * NotificationCenter Props\n */\nexport interface NotificationCenterProps {\n /** 알림 목록 */\n notifications?: NotificationItem[];\n /** 서버 기반 미읽음 알림 수 */\n unreadCount?: number;\n /** 추가 로드 가능 여부 */\n hasMore?: boolean;\n /** 로딩 상태 */\n loading?: boolean;\n /** 알림 제목 텍스트 */\n titleText?: string;\n /** 알림 없음 텍스트 */\n emptyText?: string;\n /** \"모두 읽음\" 버튼 텍스트 */\n markAllReadText?: string;\n /** \"모두 삭제\" 버튼 텍스트 */\n deleteAllText?: string;\n /** \"미읽음만\" 체크박스 텍스트 */\n unreadOnlyText?: string;\n /** \"미읽음만\" 체크박스 상태 */\n unreadOnly?: boolean;\n /** 알림 클릭 핸들러 (알림 전체 객체 전달) */\n onNotificationClick?: (notification: NotificationItem) => void;\n /** 드롭다운 닫힐 때 (뷰포트에 들어온 미읽음 알림 ID 목록) */\n onClose?: (visibleUnreadIds: (string | number)[]) => void;\n /** 추가 로드 요청 */\n onLoadMore?: () => void;\n /** 모두 읽음 처리 요청 */\n onMarkAllRead?: () => void;\n /** 모두 삭제 요청 */\n onDeleteAll?: () => void;\n /** 개별 알림 삭제 요청 (알림 전체 객체 전달) */\n onDelete?: (notification: NotificationItem) => void;\n /** \"미읽음만\" 체크박스 토글 */\n onUnreadOnlyToggle?: (checked: boolean) => void;\n /** 드롭다운 정렬 방향 — \"right\"(기본): 우측 정렬되어 좌측으로 확장 / \"left\": 좌측 정렬되어 우측으로 확장 */\n dropdownAlign?: 'left' | 'right';\n className?: string;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n\n/**\n * NotificationCenter 컴포넌트\n *\n * 알림 센터 - 알림 목록 표시, 무한스크롤, 읽음 추적\n *\n * @example\n * ```tsx\n * \n * ```\n */\nexport const NotificationCenter: React.FC = ({\n notifications = [],\n unreadCount = 0,\n hasMore = false,\n loading = false,\n titleText = 'Notifications',\n emptyText = 'No notifications',\n markAllReadText = 'Mark all as read',\n deleteAllText = 'Delete all',\n unreadOnlyText = 'Unread only',\n unreadOnly = false,\n onNotificationClick,\n onClose,\n onLoadMore,\n onMarkAllRead,\n onDeleteAll,\n onDelete,\n onUnreadOnlyToggle,\n dropdownAlign = 'right',\n className = '',\n id,\n editorAttrs,\n}) => {\n const [showNotifications, setShowNotifications] = useState(false);\n const notificationRef = useRef(null);\n const dropdownRef = useRef(null);\n const scrollRef = useRef(null);\n const sentinelRef = useRef(null);\n const visibleUnreadIdsRef = useRef>(new Set());\n\n // 무한스크롤 관련 최신 값 참조 (observer 재등록 없이 최신 prop 접근)\n const onLoadMoreRef = useRef(onLoadMore);\n const hasMoreRef = useRef(hasMore);\n const loadingRef = useRef(loading);\n const notificationsCountRef = useRef(notifications.length);\n // 마지막 onLoadMore 발행 시점의 notifications.length — 동일 길이에서 중복 발행 가드\n const lastRequestedCountRef = useRef(-1);\n\n useEffect(() => {\n onLoadMoreRef.current = onLoadMore;\n hasMoreRef.current = hasMore;\n loadingRef.current = loading;\n notificationsCountRef.current = notifications.length;\n });\n\n /**\n * 무한스크롤 — IntersectionObserver\n *\n * observer는 드롭다운 열림/닫힘 전환 시에만 재등록한다.\n * 목록이 append되거나 loading/hasMore가 바뀌어도 observer를 새로 만들지 않으므로,\n * sentinel이 이미 뷰포트에 있는 상태에서 재등록 시 즉시 intersecting callback이\n * 중복 발행되던 문제를 방지한다.\n */\n useEffect(() => {\n if (!sentinelRef.current || !scrollRef.current || !showNotifications) return;\n\n // 드롭다운이 새로 열릴 때마다 중복 가드 초기화\n lastRequestedCountRef.current = -1;\n\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (!entry.isIntersecting) return;\n if (loadingRef.current || !hasMoreRef.current) return;\n // B안 가드: 같은 length에서 이미 한 번 발행했다면 skip\n if (lastRequestedCountRef.current === notificationsCountRef.current) return;\n lastRequestedCountRef.current = notificationsCountRef.current;\n onLoadMoreRef.current?.();\n },\n { root: scrollRef.current, threshold: 0.1 }\n );\n\n observer.observe(sentinelRef.current);\n return () => observer.disconnect();\n }, [showNotifications]);\n\n /**\n * 뷰포트 내 미읽음 알림 추적 — IntersectionObserver\n */\n useEffect(() => {\n if (!scrollRef.current || !showNotifications) return;\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n const id = entry.target.getAttribute('data-notification-id');\n const isUnread = entry.target.getAttribute('data-unread') === 'true';\n if (id && isUnread && entry.isIntersecting) {\n visibleUnreadIdsRef.current.add(id);\n }\n });\n },\n {\n root: scrollRef.current,\n threshold: 0.5,\n }\n );\n\n const items = scrollRef.current.querySelectorAll('[data-notification-id]');\n items.forEach((item) => observer.observe(item));\n\n return () => observer.disconnect();\n }, [showNotifications, notifications]);\n\n /**\n * 뱃지에 표시할 카운트 (handleClose 보다 먼저 선언 — deps 참조 순서)\n */\n const displayCount = unreadCount > 0 ? unreadCount : notifications.filter((n) => !n.read).length;\n\n /**\n * 드롭다운 닫기 — 뷰포트에 들어온 미읽음 알림 ID 전달\n *\n * 불필요한 read-batch 호출 방지:\n * 1) displayCount 가 0 이면 이미 모두 읽음/삭제 처리된 상태 → 전체 skip\n * 2) 뷰포트에 나타났던 ID 중 현재 notifications 기준 여전히 unread 인 것만 전달\n * (\"모두 읽음\" onSuccess 로 notifications 가 갱신되면 필터 결과가 빈 배열이 됨)\n */\n const handleClose = useCallback(() => {\n if (showNotifications) {\n if (displayCount > 0) {\n const unreadIds = Array.from(visibleUnreadIdsRef.current).filter((id) => {\n const n = notifications.find((item) => String(item.id) === String(id));\n return n && !n.read;\n });\n if (unreadIds.length > 0) {\n onClose?.(unreadIds);\n }\n }\n visibleUnreadIdsRef.current.clear();\n setShowNotifications(false);\n }\n }, [showNotifications, onClose, displayCount, notifications]);\n\n /**\n * 외부 클릭 감지 — 드롭다운이 열려 있을 때만 리스너 등록\n * (stale closure 방지: showNotifications 변경 시 리스너 재등록)\n * 주의: handleClose가 useCallback으로 선언된 이후에 위치해야 TDZ 위반 방지\n */\n useEffect(() => {\n if (!showNotifications) return;\n\n const handleClickOutside = (event: MouseEvent) => {\n if (\n notificationRef.current &&\n !notificationRef.current.contains(event.target as Node)\n ) {\n handleClose();\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [showNotifications, handleClose]);\n\n /**\n * 드롭다운 토글\n */\n const handleToggle = useCallback(() => {\n if (showNotifications) {\n handleClose();\n } else {\n setShowNotifications(true);\n }\n }, [showNotifications, handleClose]);\n\n /**\n * 드롭다운 열릴 때 뷰포트 경계 검사 후 이탈량만큼 translateX 로 보정\n *\n * class 기반 left-0/right-0 전환은 부모 컨테이너 기준이라 부모가 뷰포트 가장자리에 있을 때\n * 여전히 이탈할 수 있다. 따라서 초기 렌더 후 드롭다운의 실제 뷰포트 좌표를 측정하여\n * 이탈한 픽셀만큼 반대 방향으로 이동시키는 방식을 사용한다.\n */\n useLayoutEffect(() => {\n const dropdown = dropdownRef.current;\n if (!showNotifications || !dropdown) return;\n\n // 측정 전 기존 transform 초기화 (재측정 시 누적 방지)\n dropdown.style.transform = '';\n const rect = dropdown.getBoundingClientRect();\n const vw = typeof window !== 'undefined' ? window.innerWidth : 0;\n\n // layout 미측정(jsdom 등)에서 rect 가 0 으로 반환되는 경우 보정 스킵\n if (rect.width === 0 && rect.height === 0) return;\n\n const margin = 8;\n let shift = 0;\n if (rect.right > vw - margin) {\n shift = -(rect.right - (vw - margin));\n } else if (rect.left < margin) {\n shift = margin - rect.left;\n }\n\n if (shift !== 0) {\n dropdown.style.transform = `translateX(${shift}px)`;\n }\n }, [showNotifications, dropdownAlign, notifications.length]);\n\n return (\n
\n \n \n {displayCount > 0 && (\n \n {displayCount > 99 ? '99+' : displayCount}\n \n )}\n \n\n {/* 알림 드롭다운 */}\n {showNotifications && (\n
\n
\n
\n {titleText}\n {onUnreadOnlyToggle && (\n onUnreadOnlyToggle(!unreadOnly)}\n >\n ) => {\n e.stopPropagation();\n onUnreadOnlyToggle(e.target.checked);\n }}\n onClick={(e: React.MouseEvent) => e.stopPropagation()}\n className=\"w-3.5 h-3.5 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 cursor-pointer\"\n />\n {unreadOnlyText}\n
\n )}\n
\n
\n {onMarkAllRead && displayCount > 0 && (\n {\n onMarkAllRead();\n visibleUnreadIdsRef.current.clear();\n }}\n className=\"text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:underline cursor-pointer\"\n >\n {markAllReadText}\n \n )}\n {onDeleteAll && notifications.length > 0 && (\n {\n // 드롭다운은 닫지 않음 — 확인 모달이 닫히면 다시 자연스럽게 노출되어야 하고,\n // 사용자가 모달 취소 시에도 컨텍스트 유지 (요구사항)\n onDeleteAll();\n }}\n className=\"text-xs text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 hover:underline cursor-pointer\"\n >\n {deleteAllText}\n \n )}\n
\n
\n
\n {notifications.length === 0 && !loading ? (\n
\n {emptyText}\n
\n ) : (\n <>\n {notifications.map((notification) => {\n const isUnread = !notification.read;\n return (\n {\n notification.onClick?.();\n onNotificationClick?.(notification);\n setShowNotifications(false);\n }}\n className={`group flex items-start gap-3 px-4 py-3 text-left border-b border-gray-100 dark:border-gray-700 transition-colors cursor-pointer ${\n isUnread\n ? 'bg-blue-50/70 dark:bg-blue-900/20 hover:bg-blue-50 dark:hover:bg-blue-900/30'\n : 'bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/50 opacity-70'\n }`}\n >\n {notification.iconName && (\n \n )}\n
\n \n {notification.title}\n
\n \n {notification.message}\n
\n
\n {notification.time}\n
\n
\n
\n {isUnread && (\n \n )}\n {onDelete && (\n {\n e.stopPropagation();\n onDelete(notification);\n }}\n className=\"p-1 text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400 rounded hover:bg-red-50 dark:hover:bg-red-900/20 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity\"\n aria-label=\"Delete notification\"\n >\n \n \n )}\n
\n \n );\n })}\n {/* 무한스크롤 sentinel */}\n {hasMore && (\n
\n {loading ? (\n ...\n ) : (\n \n )}\n
\n )}\n {loading && !hasMore && notifications.length > 0 && (\n
\n ...\n
\n )}\n \n )}\n \n \n )}\n \n );\n};\n","import React, { useState, useRef, useEffect } from 'react';\nimport { Div } from '../basic/Div';\nimport { Button } from '../basic/Button';\nimport { Img } from '../basic/Img';\nimport { Span } from '../basic/Span';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport type { EditorAttrs } from '../../types';\n\n// Logger 설정 (G7Core 초기화 전에도 동작하도록 폴백 포함)\nconst logger = ((window as any).G7Core?.createLogger?.('Comp:UserProfile')) ?? {\n log: (...args: unknown[]) => console.log('[Comp:UserProfile]', ...args),\n warn: (...args: unknown[]) => console.warn('[Comp:UserProfile]', ...args),\n error: (...args: unknown[]) => console.error('[Comp:UserProfile]', ...args),\n};\n\n/**\n * 사용자 정보 인터페이스\n */\nexport interface User {\n id: number | string;\n uuid?: string;\n name: string;\n email: string;\n avatar?: string;\n role?: string;\n}\n\n/**\n * UserProfile Props\n */\nexport interface UserProfileProps {\n user: User;\n /** 프로필 설정 텍스트 */\n profileText?: string;\n /** 로그아웃 텍스트 */\n logoutText?: string;\n /** 언어 설정 텍스트 */\n languageText?: string;\n /** 사용 가능한 언어 목록 */\n availableLocales?: string[];\n onProfileClick?: () => void;\n onLogoutClick?: () => void;\n className?: string;\n /** 로그아웃 API 엔드포인트 (기본값: /api/admin/auth/logout) */\n logoutEndpoint?: string;\n /** 로그아웃 후 리다이렉션 경로 (기본값: /admin/login) */\n redirectPath?: string;\n /** Chevron 아이콘 표시 여부 (기본값: true) */\n showChevron?: boolean;\n /** 드롭다운 열림 방향 (기본값: 'up') */\n dropdownDirection?: 'up' | 'down';\n /** 드롭다운만 표시 (버튼 영역 숨김, 외부 요소 클릭 트리거용) */\n dropdownOnly?: boolean;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * UserProfile 컴포넌트\n *\n * 사용자 프로필 표시 및 드롭다운 메뉴 제공\n *\n * @example\n * ```tsx\n * console.log('프로필 클릭')}\n * onLogoutClick={() => console.log('로그아웃')}\n * />\n * ```\n */\nexport const UserProfile: React.FC = ({\n user = { name: '', email: '' },\n profileText = 'Profile Settings',\n logoutText = 'Logout',\n // languageText / availableLocales: 언어가 헤더로 일원화되어 드롭다운에서 제거됨.\n // props 는 인터페이스에 유지(하위호환)하되 본문에서 사용하지 않으므로 destructure 생략.\n onProfileClick,\n onLogoutClick,\n className = '',\n logoutEndpoint = '/api/admin/auth/logout',\n redirectPath = '/admin/login',\n showChevron = true,\n dropdownDirection = 'up',\n dropdownOnly = false,\n id,\n editorAttrs,\n}) => {\n const [showProfileMenu, setShowProfileMenu] = useState(false);\n const [isLoggingOut, setIsLoggingOut] = useState(false);\n const profileRef = useRef(null);\n\n /**\n * 외부 클릭 감지\n */\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n profileRef.current &&\n !profileRef.current.contains(event.target as Node)\n ) {\n setShowProfileMenu(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n /**\n * 쿠키에서 XSRF 토큰 읽기\n */\n const getXsrfToken = (): string | null => {\n const value = `; ${document.cookie}`;\n const parts = value.split(`; XSRF-TOKEN=`);\n if (parts.length === 2) {\n return decodeURIComponent(parts.pop()?.split(';').shift() || '');\n }\n return null;\n };\n\n /**\n * 로컬 스토리지에서 Bearer 토큰 읽기\n */\n const getBearerToken = (): string | null => {\n return localStorage.getItem('auth_token');\n };\n\n /**\n * 로그아웃 처리\n */\n const handleLogout = async () => {\n if (isLoggingOut) return;\n\n try {\n setIsLoggingOut(true);\n setShowProfileMenu(false);\n\n // 커스텀 로그아웃 핸들러 실행\n if (onLogoutClick) {\n onLogoutClick();\n return;\n }\n\n // 토큰 가져오기\n const xsrfToken = getXsrfToken();\n const bearerToken = getBearerToken();\n\n // API 호출\n const response = await fetch(logoutEndpoint, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n Accept: 'application/json',\n ...(xsrfToken && { 'X-XSRF-TOKEN': xsrfToken }),\n ...(bearerToken && { Authorization: `Bearer ${bearerToken}` }),\n },\n credentials: 'include',\n });\n\n if (response.ok) {\n // 로그아웃 성공 - 로컬 스토리지에서 토큰 제거\n localStorage.removeItem('auth_token');\n // 로그인 페이지로 리다이렉션\n window.location.href = redirectPath;\n } else {\n logger.error('로그아웃 실패:', response.statusText);\n // 실패해도 토큰 제거 및 로그인 페이지로 이동 (토큰 만료 등의 경우)\n localStorage.removeItem('auth_token');\n window.location.href = redirectPath;\n }\n } catch (error) {\n logger.error('로그아웃 오류:', error);\n // 에러 발생 시에도 토큰 제거 및 로그인 페이지로 이동\n localStorage.removeItem('auth_token');\n window.location.href = redirectPath;\n } finally {\n setIsLoggingOut(false);\n }\n };\n\n return (\n
\n setShowProfileMenu(!showProfileMenu)}\n className={dropdownOnly\n ? \"w-full h-full opacity-0 cursor-pointer\"\n : \"flex items-center gap-2 px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors w-full\"}\n >\n {!dropdownOnly && (\n <>\n {user.avatar ? (\n \n ) : (\n
\n \n
\n )}\n
\n
{user.name}
\n {user.role && (\n
{user.role}
\n )}\n
\n {showChevron && (\n \n )}\n \n )}\n \n\n {/* 프로필 드롭다운 */}\n {showProfileMenu && (\n
\n {\n setShowProfileMenu(false);\n (window as any).G7Core?.dispatch({\n handler: 'navigate',\n params: { path: `/admin/users/${user.uuid}` },\n });\n }}\n >\n
{user.name}
\n
{user.email}
\n
\n {/* 언어 선택은 헤더 독립 버튼으로 일원화(드롭다운에서 제거) — 유저 템플릿 패리티(H-T7).\n languageText/availableLocales props 는 하위호환을 위해 유지하되 더 이상 사용하지 않는다. */}\n
\n {\n setShowProfileMenu(false);\n if (onProfileClick) {\n onProfileClick();\n } else {\n // 기본 동작: 사용자 수정 페이지로 이동 (SPA 네비게이션)\n (window as any).G7Core?.dispatch({\n handler: 'navigate',\n params: { path: `/admin/users/${user.uuid}/edit` },\n });\n }\n }}\n className=\"w-full px-4 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center justify-start gap-3 transition-colors\"\n >\n \n {profileText}\n \n \n \n {isLoggingOut ? 'Logging out...' : logoutText}\n \n
\n
\n )}\n \n );\n};\n","import React, { useState, useRef, useEffect } from 'react';\nimport { Div } from '../basic/Div';\nimport { Button } from '../basic/Button';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport { Span } from '../basic/Span';\nimport type { EditorAttrs } from '../../types';\n\n// Logger 설정 (G7Core 초기화 전에도 동작하도록 폴백 포함)\nconst logger = ((window as any).G7Core?.createLogger?.('Comp:LanguageSelector')) ?? {\n log: (...args: unknown[]) => console.log('[Comp:LanguageSelector]', ...args),\n warn: (...args: unknown[]) => console.warn('[Comp:LanguageSelector]', ...args),\n error: (...args: unknown[]) => console.error('[Comp:LanguageSelector]', ...args),\n};\n\n/**\n * 로케일 코드를 사람이 읽을 수 있는 이름으로 변환\n */\nconst getLocaleName = (locale: string): string => {\n // 활성 언어팩의 native_name 을 우선 사용 (LanguagePackServiceProvider 가 주입)\n const fromAppConfig = (window as any).G7Core?.state?.get?.('_global.appConfig.localeNames')?.[locale];\n if (fromAppConfig) {\n return fromAppConfig;\n }\n const fallback: Record = {\n ko: '한국어',\n en: 'English',\n ja: '日本語',\n zh: '中文',\n es: 'Español',\n fr: 'Français',\n de: 'Deutsch',\n };\n return fallback[locale] || locale;\n};\n\n/**\n * LanguageSelector Props\n */\nexport interface LanguageSelectorProps {\n /** 사용 가능한 언어 목록 (template.json의 locales에서 자동 바인딩) */\n availableLocales?: string[];\n /** 언어 설정 텍스트 */\n languageText?: string;\n /** 언어 변경 API 엔드포인트 */\n apiEndpoint?: string;\n /** 언어 변경 후 콜백 */\n onLanguageChange?: (locale: string) => void;\n /** 추가 CSS 클래스 */\n className?: string;\n /** 인라인 모드 (드롭다운 메뉴 내에서 사용) */\n inline?: boolean;\n /**\n * 독립 모드 버튼에 현재 선택 언어 코드를 globe 아이콘 옆에 표시한다.\n * 유저 템플릿 헤더 언어 버튼과 동일한 표기(아이콘 + 로케일 코드)를 위해 사용.\n */\n showCode?: boolean;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * LanguageSelector 컴포넌트\n *\n * 언어 전환 드롭다운 제공\n * - DB에 언어 설정 저장\n * - localStorage에 로케일 저장\n * - 새로고침 없이 UI 리렌더링\n *\n * @example\n * ```tsx\n * // 독립적으로 사용\n * \n *\n * // 인라인 모드 (다른 드롭다운 내에서 사용)\n * \n * ```\n */\nexport const LanguageSelector: React.FC = ({\n availableLocales = ['ko', 'en'],\n languageText = 'Language',\n apiEndpoint = '/api/admin/users/me/language',\n onLanguageChange,\n className = '',\n inline = false,\n showCode = false,\n id,\n editorAttrs,\n}) => {\n const [showMenu, setShowMenu] = useState(false);\n const [isChanging, setIsChanging] = useState(false);\n const [currentLocale, setCurrentLocale] = useState(() => {\n return localStorage.getItem('g7_locale') || 'ko';\n });\n const menuRef = useRef(null);\n\n /**\n * 외부 클릭 감지 (인라인 모드가 아닐 때만)\n */\n useEffect(() => {\n if (inline) return;\n\n const handleClickOutside = (event: MouseEvent) => {\n if (menuRef.current && !menuRef.current.contains(event.target as Node)) {\n setShowMenu(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [inline]);\n\n /**\n * 쿠키에서 XSRF 토큰 읽기\n */\n const getXsrfToken = (): string | null => {\n const value = `; ${document.cookie}`;\n const parts = value.split(`; XSRF-TOKEN=`);\n if (parts.length === 2) {\n return decodeURIComponent(parts.pop()?.split(';').shift() || '');\n }\n return null;\n };\n\n /**\n * 로컬 스토리지에서 Bearer 토큰 읽기\n */\n const getBearerToken = (): string | null => {\n return localStorage.getItem('auth_token');\n };\n\n /**\n * 언어 변경 처리\n */\n const handleLanguageChange = async (locale: string) => {\n if (isChanging || locale === currentLocale) return;\n\n try {\n setIsChanging(true);\n\n const xsrfToken = getXsrfToken();\n const bearerToken = getBearerToken();\n\n // API 호출로 DB에 저장 (실패해도 UI는 변경)\n try {\n const response = await fetch(apiEndpoint, {\n method: 'PATCH',\n headers: {\n 'Content-Type': 'application/json',\n Accept: 'application/json',\n ...(xsrfToken && { 'X-XSRF-TOKEN': xsrfToken }),\n ...(bearerToken && { Authorization: `Bearer ${bearerToken}` }),\n },\n credentials: 'include',\n body: JSON.stringify({ language: locale }),\n });\n\n if (!response.ok) {\n logger.warn('언어 설정 저장 실패 (UI는 변경됨):', response.statusText);\n }\n } catch (apiError) {\n logger.warn('언어 설정 API 호출 실패 (UI는 변경됨):', apiError);\n }\n\n // UI 상태 업데이트\n setCurrentLocale(locale);\n setShowMenu(false);\n\n // 콜백 실행\n onLanguageChange?.(locale);\n\n // TemplateApp의 changeLocale 호출하여 UI 리렌더링\n if ((window as any).__templateApp) {\n await (window as any).__templateApp.changeLocale(locale);\n } else {\n logger.warn('TemplateApp not found, reloading page');\n window.location.reload();\n }\n } catch (error) {\n logger.error('언어 변경 오류:', error);\n } finally {\n setIsChanging(false);\n }\n };\n\n // 인라인 모드: 접기/펼치기 가능한 뱃지 방식\n if (inline) {\n return (\n
\n setShowMenu(!showMenu)}\n disabled={isChanging}\n className=\"w-full px-4 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-3 transition-colors\"\n >\n \n \n {languageText}\n \n \n {currentLocale.toUpperCase()}\n \n \n \n {showMenu && (\n
\n {availableLocales.map((locale) => (\n handleLanguageChange(locale)}\n disabled={isChanging}\n className={`\n px-3 py-1.5 text-sm font-medium rounded-md transition-colors\n ${\n currentLocale === locale\n ? 'bg-blue-600 text-white'\n : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'\n }\n ${isChanging ? 'opacity-50 cursor-not-allowed' : ''}\n `}\n >\n {getLocaleName(locale)}\n \n ))}\n
\n )}\n
\n );\n }\n\n // 독립 모드: 드롭다운 버튼과 메뉴\n return (\n
\n setShowMenu(!showMenu)}\n className={\n showCode\n ? 'flex items-center gap-1.5 px-2.5 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors cursor-pointer'\n : 'p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors'\n }\n aria-haspopup=\"listbox\"\n aria-expanded={showMenu}\n aria-label={languageText}\n >\n \n {showCode && (\n {currentLocale}\n )}\n {showCode && (\n \n )}\n \n\n {showMenu && (\n
\n
\n {availableLocales.map((locale) => (\n handleLanguageChange(locale)}\n disabled={isChanging}\n className={`\n w-full px-4 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-3 transition-colors\n ${currentLocale === locale ? 'bg-gray-50 dark:bg-gray-700' : ''}\n ${isChanging ? 'opacity-50 cursor-not-allowed' : ''}\n `}\n >\n \n {getLocaleName(locale)}\n \n {currentLocale === locale && (\n \n )}\n \n ))}\n
\n
\n )}\n
\n );\n};\n","import React, { useCallback } from 'react';\nimport { Div } from '../basic/Div';\nimport { A } from '../basic/A';\nimport { Span } from '../basic/Span';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport type { EditorAttrs } from '../../types';\n\n/**\n * 빠른 링크 인터페이스\n */\nexport interface QuickLink {\n id: string | number;\n label: string;\n url: string;\n iconName?: IconName;\n}\n\n/**\n * AdminFooter Props\n */\nexport interface AdminFooterProps {\n copyright?: string;\n version?: string;\n quickLinks?: QuickLink[];\n className?: string;\n copyrightModalId?: string;\n changelogModalId?: string;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * AdminFooter 컴포넌트\n *\n * 관리자 푸터 - 버전 정보, 빠른 링크\n *\n * @example\n * ```tsx\n * \n * ```\n */\nexport const AdminFooter: React.FC = ({\n copyright = '© 2026 G7',\n version,\n quickLinks = [],\n className = '',\n changelogModalId,\n copyrightModalId,\n id,\n editorAttrs,\n}) => {\n const handleVersionClick = useCallback(() => {\n if (changelogModalId) {\n const G7Core = (window as any).G7Core;\n\n G7Core?.dispatch?.({\n handler: 'sequence',\n actions: [\n {\n handler: 'apiCall',\n auth_required: true,\n target: '/api/admin/changelog',\n params: {\n method: 'GET',\n },\n onSuccess: [\n {\n handler: 'setState',\n params: {\n target: 'global',\n coreChangelogContent: '{{response.data.content}}',\n },\n },\n {\n handler: 'openModal',\n target: changelogModalId,\n },\n ],\n onError: [\n {\n handler: 'openModal',\n target: changelogModalId,\n },\n ],\n },\n ],\n });\n }\n }, [changelogModalId]);\n\n const handleCopyrightClick = useCallback(() => {\n if (copyrightModalId) {\n const G7Core = (window as any).G7Core;\n\n G7Core?.dispatch?.({\n handler: 'sequence',\n actions: [\n {\n handler: 'apiCall',\n auth_required: true,\n target: '/api/admin/license',\n params: {\n method: 'GET',\n },\n onSuccess: [\n {\n handler: 'setState',\n params: {\n target: 'global',\n coreLicenseContent: '{{response.data.content}}',\n },\n },\n {\n handler: 'openModal',\n target: copyrightModalId,\n },\n ],\n onError: [\n {\n handler: 'openModal',\n target: copyrightModalId,\n },\n ],\n },\n ],\n });\n }\n }, [copyrightModalId]);\n\n return (\n
\n
\n {/* 왼쪽: 저작권 및 버전 정보 */}\n
\n \n {copyright}\n \n {version && (\n <>\n •\n \n \n v{version}\n \n \n )}\n
\n\n {/* 오른쪽: 빠른 링크 */}\n {quickLinks.length > 0 && (\n
\n {quickLinks.map((link) => (\n \n {link.iconName && }\n {link.label}\n \n ))}\n
\n )}\n
\n
\n );\n};\n","import React from 'react';\nimport { Div } from '../basic/Div';\nimport { H1 } from '../basic/H1';\nimport { P } from '../basic/P';\nimport { Button } from '../basic/Button';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport { Breadcrumb, BreadcrumbItem } from './Breadcrumb';\nimport type { EditorAttrs } from '../../types';\n\n/**\n * 탭 아이템 인터페이스\n */\nexport interface TabItem {\n id: string | number;\n label: string;\n value: string;\n active?: boolean;\n badge?: string | number;\n}\n\n/**\n * 액션 버튼 인터페이스\n */\nexport interface ActionButton {\n id: string | number;\n label: string;\n onClick?: () => void;\n variant?: 'primary' | 'secondary' | 'danger' | 'ghost';\n iconName?: IconName;\n disabled?: boolean;\n}\n\n/**\n * PageHeader Props\n */\nexport interface PageHeaderProps {\n title: string;\n description?: string;\n breadcrumbItems?: BreadcrumbItem[];\n tabs?: TabItem[];\n onTabChange?: (value: string) => void;\n actions?: ActionButton[];\n className?: string;\n children?: React.ReactNode;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * PageHeader 컴포넌트\n *\n * 페이지 헤더 - admin_dashboard.json의 page_header 스타일과 동일\n * 배경색 없음, flex items-center justify-between mb-6 레이아웃\n *\n * @example\n * ```tsx\n * \n * ```\n */\nexport const PageHeader: React.FC = ({\n title,\n description,\n breadcrumbItems,\n tabs,\n onTabChange,\n actions,\n className = '',\n children,\n id,\n editorAttrs,\n}) => {\n /**\n * Variant별 버튼 스타일\n */\n const getButtonClasses = (variant: ActionButton['variant'] = 'secondary'): string => {\n const variantClasses: Record, string> = {\n primary: 'page-action-primary',\n secondary: 'page-action-secondary',\n danger: 'page-action-danger',\n ghost: 'page-action-ghost',\n };\n\n return variantClasses[variant];\n };\n\n return (\n
\n {/* 브레드크럼 - Breadcrumb 컴포넌트 재사용 */}\n {breadcrumbItems && breadcrumbItems.length > 0 && (\n
\n \n
\n )}\n\n {/* 제목 및 액션 버튼 - admin_dashboard.json 스타일 */}\n
\n
\n

{title}

\n {description && (\n

{description}

\n )}\n
\n\n {/* 액션 버튼 또는 children */}\n {children ? (\n
{children}
\n ) : actions && actions.length > 0 ? (\n
\n {actions.map((action) => (\n \n {action.iconName && (\n \n )}\n {action.variant !== 'ghost' && action.label && (\n
{action.label}
\n )}\n \n ))}\n
\n ) : null}\n
\n\n {/* 탭 네비게이션 */}\n {tabs && tabs.length > 0 && (\n
\n {tabs.map((tab) => (\n onTabChange?.(tab.value)}\n className={tab.active ? 'tab-btn-active' : 'tab-btn'}\n >\n
{tab.label}
\n {tab.badge !== undefined && (\n
\n {tab.badge}\n
\n )}\n \n ))}\n
\n )}\n
\n );\n};\n","import React from 'react';\nimport { Div } from '../basic/Div';\nimport { H2 } from '../basic/H2';\nimport { P } from '../basic/P';\nimport type { EditorAttrs } from '../../types';\n\n// G7Core 전역 객체의 스타일 헬퍼 접근\nconst G7Core = () => (window as any).G7Core;\n\nexport interface SectionHeaderProps {\n title?: string;\n description?: string;\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * SectionHeader 집합 컴포넌트\n *\n * 페이지 내부의 섹션 (카드 / 탭 / 폼 그룹 등) 머리 부분을 표준화하는\n * 가벼운 헤더 시맨틱. 제목 (좌측) + 액션 자식 (우측) 의 균형 배치.\n *\n * PageHeader 와 다른 점:\n * - PageHeader 는 페이지 단위 머리 (제목 + description + actions array\n * + tabs + breadcrumb) 등 풍부한 구조.\n * - SectionHeader 는 카드/탭/폼 그룹 안의 섹션 머리 — 제목과 우측\n * children 슬롯만. 인라인 `flex items-center justify-between` 패턴\n * 중 \"제목 + 액션\" 묶음을 흡수.\n *\n * 기본 컴포넌트 조합: Div + H2 + P\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"SectionHeader\",\n * \"props\": { \"title\": \"최근 활동\", \"className\": \"mb-4\" },\n * \"children\": [\n * { \"type\": \"basic\", \"name\": \"Button\", ... }\n * ]\n * }\n */\nexport const SectionHeader: React.FC = ({\n title,\n description,\n className = '',\n style,\n children,\n id,\n editorAttrs,\n}) => {\n const baseClasses = 'flex items-center justify-between';\n const mergedClassName =\n G7Core()?.style?.mergeClasses?.(baseClasses, className) ?? `${baseClasses} ${className}`;\n\n return (\n
\n
\n {title &&

{title}

}\n {description && (\n

{description}

\n )}\n
\n {children &&
{children}
}\n
\n );\n};\n","import React from 'react';\nimport { Div } from '../basic/Div';\nimport { Img } from '../basic/Img';\nimport { H3 } from '../basic/H3';\nimport { P } from '../basic/P';\nimport { Span } from '../basic/Span';\nimport { Button } from '../basic/Button';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport { StatusBadge, StatusType } from './StatusBadge';\nimport { ActionMenu, ActionMenuItem } from './ActionMenu';\nimport type { EditorAttrs } from '../../types';\n\n// G7Core.t() 번역 함수 참조\nconst t = (key: string, params?: Record) =>\n (window as any).G7Core?.t?.(key, params) ?? key;\n\n/**\n * 템플릿 상태\n */\nexport type TemplateStatus = 'active' | 'inactive' | 'pending' | 'error';\n\n/**\n * TemplateCard Props\n */\nexport interface TemplateCardProps {\n image?: string;\n imageAlt?: string;\n vendor: string;\n name: string;\n version: string;\n status: TemplateStatus;\n updateAvailable?: boolean;\n latestVersion?: string;\n dependencies?: string[];\n showLayoutEditButton?: boolean;\n actions?: ActionMenuItem[];\n onLayoutEditClick?: () => void;\n className?: string;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * TemplateCard 컴포넌트\n *\n * 템플릿 카드 - 상태 뱃지, 미리보기 이미지, 퀵 액션 버튼(ActionMenu) 포함\n *\n * @example\n * ```tsx\n * console.log('Edit layouts')}\n * actions={[\n * { id: 'info', label: '정보 보기', iconName: IconName.InfoCircle, onClick: () => {} },\n * { id: 'update', label: '업데이트', iconName: IconName.Download, onClick: () => {} },\n * { id: 'remove', label: '제거', iconName: IconName.Trash, variant: 'danger', onClick: () => {} }\n * ]}\n * />\n * ```\n */\nexport const TemplateCard: React.FC = ({\n image,\n imageAlt,\n vendor,\n name,\n version,\n status,\n updateAvailable = false,\n latestVersion,\n dependencies = [],\n showLayoutEditButton = false,\n actions = [],\n onLayoutEditClick,\n className = '',\n id,\n editorAttrs,\n}) => {\n /**\n * 상태를 StatusType으로 매핑\n */\n const getStatusType = (status: TemplateStatus): StatusType => {\n const statusMap: Record = {\n active: 'success',\n inactive: 'default',\n pending: 'pending',\n error: 'error',\n };\n return statusMap[status];\n };\n\n /**\n * 상태 라벨 (다국어 지원)\n */\n const getStatusLabel = (status: TemplateStatus): string => {\n const labelMap: Record = {\n active: t('common.status_active'),\n inactive: t('common.status_inactive'),\n pending: t('common.status_pending'),\n error: t('common.status_error'),\n };\n return labelMap[status];\n };\n\n return (\n \n {/* 미리보기 이미지 */}\n {image && (\n
\n \n {/* 상태 뱃지 (이미지 위) */}\n
\n \n
\n {/* 업데이트 가능 뱃지 */}\n {updateAvailable && (\n
\n \n \n {t('common.update_available')}\n \n
\n )}\n
\n )}\n\n {/* 카드 본문 */}\n
\n {/* 헤더: 템플릿 정보 + 액션 메뉴 */}\n
\n
\n

\n {vendor}/{name}\n

\n
\n v{version}\n {updateAvailable && latestVersion && (\n <>\n →\n v{latestVersion}\n \n )}\n
\n {/* 이미지가 없을 때 상태 뱃지 표시 */}\n {!image && (\n
\n \n
\n )}\n
\n\n {/* 액션 메뉴 (ActionMenu 컴포넌트 재사용) */}\n {actions.length > 0 && (\n \n )}\n
\n\n {/* 의존성 정보 */}\n {dependencies.length > 0 && (\n
\n

{t('common.dependencies')}:

\n
\n {dependencies.map((dep, index) => (\n \n {dep}\n \n ))}\n
\n
\n )}\n\n {/* 레이아웃 편집 버튼 */}\n {showLayoutEditButton && onLayoutEditClick && (\n \n \n {t('common.edit_layout')}\n \n )}\n
\n \n );\n};\n","// e2e:allow편집기 추가 직후 type 미지정 시 크래시(\"컴포넌트 로드 실패\") 결함#4 수정(typeConfig 폴백). 라이브 검증은 Chrome MCP T1~T7(에디터 추가/속성편집/저장200/reload영속/게스트 사용자화면 렌더)로 수행, 단위 회귀는 Alert.test.tsx 결함#4 describe.\nimport React from 'react';\nimport { Div } from '../basic/Div';\nimport { P } from '../basic/P';\nimport { Button } from '../basic/Button';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport type { EditorAttrs } from '../../types';\n\n/**\n * 알림 타입\n */\nexport type AlertType = 'info' | 'success' | 'warning' | 'error';\n\nexport interface AlertProps {\n /**\n * 알림 타입\n */\n type: AlertType;\n\n /**\n * 알림 메시지\n */\n message: string;\n\n /**\n * 닫기 버튼 표시 여부\n */\n dismissible?: boolean;\n\n /**\n * 닫기 버튼 클릭 시 콜백\n */\n onDismiss?: () => void;\n\n /**\n * 사용자 정의 클래스\n */\n className?: string;\n\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /**\n * 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread)\n */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * Alert 알림 컴포넌트\n *\n * 알림 메시지를 표시하는 composite 컴포넌트입니다.\n * type에 따라 다른 색상과 아이콘을 표시하며 dismissible 옵션을 지원합니다.\n *\n * @example\n * // 정보 알림\n * \n *\n * // 성공 알림 (닫기 버튼 포함)\n * console.log('dismissed')}\n * />\n *\n * // 경고 알림\n * \n *\n * // 에러 알림\n * \n */\nexport const Alert: React.FC = ({\n type,\n message,\n dismissible = false,\n onDismiss,\n className = '',\n id,\n editorAttrs,\n}) => {\n // 타입별 시맨틱 클래스 및 아이콘 매핑\n const typeConfig = {\n info: {\n containerClass: 'alert-info',\n iconClass: 'alert-icon-info',\n textClass: 'alert-text-info',\n icon: IconName.InfoCircle,\n },\n success: {\n containerClass: 'alert-success',\n iconClass: 'alert-icon-success',\n textClass: 'alert-text-success',\n icon: IconName.CheckCircle,\n },\n warning: {\n containerClass: 'alert-warning',\n iconClass: 'alert-icon-warning',\n textClass: 'alert-text-warning',\n icon: IconName.ExclamationTriangle,\n },\n error: {\n containerClass: 'alert-error',\n iconClass: 'alert-icon-error',\n textClass: 'alert-text-error',\n icon: IconName.TimesCircle,\n },\n };\n\n // type 미지정/미지원 값일 때도 크래시하지 않도록 info 로 폴백한다(레이아웃 편집기에서\n // 컴포넌트를 추가한 직후 작성자가 type 을 지정하기 전 상태를 안전하게 렌더).\n const config = typeConfig[type] ?? typeConfig.info;\n\n return (\n \n {/* 아이콘 */}\n \n\n {/* 메시지 */}\n

\n {message}\n

\n\n {/* 닫기 버튼 (dismissible이 true일 때만 표시) */}\n {dismissible && (\n \n \n \n )}\n \n );\n};\n","import React from 'react';\nimport { Div } from '../basic/Div';\nimport { H2 } from '../basic/H2';\nimport { Button } from '../basic/Button';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\n\nexport interface LayoutEditorHeaderProps {\n /**\n * 레이아웃 이름\n */\n layoutName: string;\n\n /**\n * 뒤로가기 버튼 클릭 시 콜백\n */\n onBack: () => void;\n\n /**\n * 미리보기 버튼 클릭 시 콜백\n */\n onPreview: () => void;\n\n /**\n * 저장 버튼 클릭 시 콜백\n */\n onSave: () => void;\n\n /**\n * 저장 중 상태 여부\n */\n isSaving?: boolean;\n\n /**\n * 사용자 정의 클래스\n */\n className?: string;\n}\n\n/**\n * LayoutEditorHeader 레이아웃 편집 헤더 컴포넌트\n *\n * 레이아웃 편집 화면의 헤더 영역을 구성하는 composite 컴포넌트입니다.\n * 뒤로가기, 제목, 미리보기, 저장 버튼을 포함합니다.\n *\n * @example\n * // 기본 사용\n * console.log('back')}\n * onPreview={() => console.log('preview')}\n * onSave={() => console.log('save')}\n * />\n *\n * // 저장 중 상태\n * console.log('back')}\n * onPreview={() => console.log('preview')}\n * onSave={() => console.log('save')}\n * isSaving={true}\n * />\n */\nexport const LayoutEditorHeader: React.FC = ({\n layoutName,\n onBack,\n onPreview,\n onSave,\n isSaving = false,\n className = '',\n}) => {\n // 컨테이너 클래스 조합\n const containerClasses = `\n flex items-center justify-between gap-4 p-4 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700\n ${className}\n `.trim().replace(/\\s+/g, ' ');\n\n return (\n
\n {/* 좌측 영역: 뒤로가기 버튼 + 제목 */}\n
\n {/* 뒤로가기 버튼 */}\n \n \n \n\n {/* 제목 */}\n

\n {layoutName}\n

\n
\n\n {/* 우측 영역: 미리보기 버튼 + 저장 버튼 */}\n
\n {/* 미리보기 버튼 */}\n \n
\n \n 미리보기\n
\n \n\n {/* 저장 버튼 */}\n \n
\n \n {isSaving ? '저장 중...' : '저장'}\n
\n \n
\n
\n );\n};\n","import React from 'react';\nimport { Div } from '../basic/Div';\nimport { Ul } from '../basic/Ul';\nimport { Li } from '../basic/Li';\nimport { Span } from '../basic/Span';\n\nexport interface LayoutFileItem {\n /**\n * 파일 ID\n */\n id: string | number;\n\n /**\n * 파일명\n */\n name: string;\n\n /**\n * 최종 수정 시간\n */\n updated_at: string;\n}\n\nexport interface LayoutFileListProps {\n /**\n * 파일 목록\n */\n files: LayoutFileItem[];\n\n /**\n * 선택된 파일 ID\n */\n selectedId?: string | number;\n\n /**\n * 파일 선택 시 콜백\n */\n onSelect: (id: string | number) => void;\n\n /**\n * 사용자 정의 클래스\n */\n className?: string;\n}\n\n/**\n * LayoutFileList 레이아웃 파일 목록 컴포넌트\n *\n * 레이아웃 파일 목록을 표시하고 선택 기능을 제공하는 composite 컴포넌트입니다.\n * 선택된 파일은 하이라이트되며, 접근성을 위해 ARIA 속성을 지원합니다.\n *\n * @example\n * // 기본 사용\n * console.log('Selected:', id)}\n * />\n *\n * // 빈 목록\n * {}} />\n */\nexport const LayoutFileList: React.FC = ({\n files,\n selectedId,\n onSelect,\n className = '',\n}) => {\n /**\n * ISO 날짜 문자열을 포맷팅\n */\n const formatDate = (dateString: string): string => {\n try {\n const date = new Date(dateString);\n\n // Invalid Date 체크\n if (isNaN(date.getTime())) {\n return dateString;\n }\n\n const year = date.getFullYear();\n const month = String(date.getMonth() + 1).padStart(2, '0');\n const day = String(date.getDate()).padStart(2, '0');\n const hours = String(date.getHours()).padStart(2, '0');\n const minutes = String(date.getMinutes()).padStart(2, '0');\n\n return `${year}-${month}-${day} ${hours}:${minutes}`;\n } catch {\n return dateString;\n }\n };\n\n /**\n * 파일 항목 클릭 핸들러\n */\n const handleFileClick = (id: string | number) => {\n onSelect(id);\n };\n\n // 컨테이너 클래스\n const containerClasses = `\n w-full\n ${className}\n `.trim().replace(/\\s+/g, ' ');\n\n return (\n
\n {files.length === 0 ? (\n
\n 파일이 없습니다.\n
\n ) : (\n \n {files.map((file) => {\n const isSelected = file.id === selectedId;\n\n // 항목 클래스 조합\n const itemClasses = `\n flex items-center justify-between p-4 cursor-pointer\n transition-colors duration-150\n ${\n isSelected\n ? 'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500'\n : 'hover:bg-gray-100 dark:hover:bg-gray-800'\n }\n `.trim().replace(/\\s+/g, ' ');\n\n // 파일명 클래스\n const nameClasses = `\n font-medium\n ${\n isSelected\n ? 'text-blue-900 dark:text-blue-100'\n : 'text-gray-900 dark:text-gray-100'\n }\n `.trim().replace(/\\s+/g, ' ');\n\n // 날짜 클래스\n const dateClasses = `\n text-sm\n ${\n isSelected\n ? 'text-blue-700 dark:text-blue-300'\n : 'text-gray-500 dark:text-gray-400'\n }\n `.trim().replace(/\\s+/g, ' ');\n\n return (\n handleFileClick(file.id)}\n role=\"option\"\n aria-selected={isSelected}\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n handleFileClick(file.id);\n }\n }}\n >\n
\n {file.name}\n \n {formatDate(file.updated_at)}\n \n
\n \n );\n })}\n \n )}\n
\n );\n};\n","function _arrayLikeToArray(r, a) {\n (null == a || a > r.length) && (a = r.length);\n for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];\n return n;\n}\nfunction _arrayWithHoles(r) {\n if (Array.isArray(r)) return r;\n}\nfunction _defineProperty(e, r, t) {\n return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {\n value: t,\n enumerable: true,\n configurable: true,\n writable: true\n }) : e[r] = t, e;\n}\nfunction _iterableToArrayLimit(r, l) {\n var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"];\n if (null != t) {\n var e,\n n,\n i,\n u,\n a = [],\n f = true,\n o = false;\n try {\n if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);\n } catch (r) {\n o = true, n = r;\n } finally {\n try {\n if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;\n } finally {\n if (o) throw n;\n }\n }\n return a;\n }\n}\nfunction _nonIterableRest() {\n throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\nfunction ownKeys(e, r) {\n var t = Object.keys(e);\n if (Object.getOwnPropertySymbols) {\n var o = Object.getOwnPropertySymbols(e);\n r && (o = o.filter(function (r) {\n return Object.getOwnPropertyDescriptor(e, r).enumerable;\n })), t.push.apply(t, o);\n }\n return t;\n}\nfunction _objectSpread2(e) {\n for (var r = 1; r < arguments.length; r++) {\n var t = null != arguments[r] ? arguments[r] : {};\n r % 2 ? ownKeys(Object(t), true).forEach(function (r) {\n _defineProperty(e, r, t[r]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {\n Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));\n });\n }\n return e;\n}\nfunction _objectWithoutProperties(e, t) {\n if (null == e) return {};\n var o,\n r,\n i = _objectWithoutPropertiesLoose(e, t);\n if (Object.getOwnPropertySymbols) {\n var n = Object.getOwnPropertySymbols(e);\n for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);\n }\n return i;\n}\nfunction _objectWithoutPropertiesLoose(r, e) {\n if (null == r) return {};\n var t = {};\n for (var n in r) if ({}.hasOwnProperty.call(r, n)) {\n if (-1 !== e.indexOf(n)) continue;\n t[n] = r[n];\n }\n return t;\n}\nfunction _slicedToArray(r, e) {\n return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();\n}\nfunction _toPrimitive(t, r) {\n if (\"object\" != typeof t || !t) return t;\n var e = t[Symbol.toPrimitive];\n if (void 0 !== e) {\n var i = e.call(t, r);\n if (\"object\" != typeof i) return i;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n }\n return (\"string\" === r ? String : Number)(t);\n}\nfunction _toPropertyKey(t) {\n var i = _toPrimitive(t, \"string\");\n return \"symbol\" == typeof i ? i : i + \"\";\n}\nfunction _unsupportedIterableToArray(r, a) {\n if (r) {\n if (\"string\" == typeof r) return _arrayLikeToArray(r, a);\n var t = {}.toString.call(r).slice(8, -1);\n return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;\n }\n}\n\nexport { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _defineProperty as defineProperty, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _objectSpread2 as objectSpread2, _objectWithoutProperties as objectWithoutProperties, _objectWithoutPropertiesLoose as objectWithoutPropertiesLoose, _slicedToArray as slicedToArray, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey, _unsupportedIterableToArray as unsupportedIterableToArray };\n","function _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\nfunction ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n if (enumerableOnly) symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n });\n keys.push.apply(keys, symbols);\n }\n\n return keys;\n}\n\nfunction _objectSpread2(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i] != null ? arguments[i] : {};\n\n if (i % 2) {\n ownKeys(Object(source), true).forEach(function (key) {\n _defineProperty(target, key, source[key]);\n });\n } else if (Object.getOwnPropertyDescriptors) {\n Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));\n } else {\n ownKeys(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n }\n\n return target;\n}\n\nfunction compose() {\n for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {\n fns[_key] = arguments[_key];\n }\n\n return function (x) {\n return fns.reduceRight(function (y, f) {\n return f(y);\n }, x);\n };\n}\n\nfunction curry(fn) {\n return function curried() {\n var _this = this;\n\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n return args.length >= fn.length ? fn.apply(this, args) : function () {\n for (var _len3 = arguments.length, nextArgs = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {\n nextArgs[_key3] = arguments[_key3];\n }\n\n return curried.apply(_this, [].concat(args, nextArgs));\n };\n };\n}\n\nfunction isObject(value) {\n return {}.toString.call(value).includes('Object');\n}\n\nfunction isEmpty(obj) {\n return !Object.keys(obj).length;\n}\n\nfunction isFunction(value) {\n return typeof value === 'function';\n}\n\nfunction hasOwnProperty(object, property) {\n return Object.prototype.hasOwnProperty.call(object, property);\n}\n\nfunction validateChanges(initial, changes) {\n if (!isObject(changes)) errorHandler('changeType');\n if (Object.keys(changes).some(function (field) {\n return !hasOwnProperty(initial, field);\n })) errorHandler('changeField');\n return changes;\n}\n\nfunction validateSelector(selector) {\n if (!isFunction(selector)) errorHandler('selectorType');\n}\n\nfunction validateHandler(handler) {\n if (!(isFunction(handler) || isObject(handler))) errorHandler('handlerType');\n if (isObject(handler) && Object.values(handler).some(function (_handler) {\n return !isFunction(_handler);\n })) errorHandler('handlersType');\n}\n\nfunction validateInitial(initial) {\n if (!initial) errorHandler('initialIsRequired');\n if (!isObject(initial)) errorHandler('initialType');\n if (isEmpty(initial)) errorHandler('initialContent');\n}\n\nfunction throwError(errorMessages, type) {\n throw new Error(errorMessages[type] || errorMessages[\"default\"]);\n}\n\nvar errorMessages = {\n initialIsRequired: 'initial state is required',\n initialType: 'initial state should be an object',\n initialContent: 'initial state shouldn\\'t be an empty object',\n handlerType: 'handler should be an object or a function',\n handlersType: 'all handlers should be a functions',\n selectorType: 'selector should be a function',\n changeType: 'provided value of changes should be an object',\n changeField: 'it seams you want to change a field in the state which is not specified in the \"initial\" state',\n \"default\": 'an unknown error accured in `state-local` package'\n};\nvar errorHandler = curry(throwError)(errorMessages);\nvar validators = {\n changes: validateChanges,\n selector: validateSelector,\n handler: validateHandler,\n initial: validateInitial\n};\n\nfunction create(initial) {\n var handler = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n validators.initial(initial);\n validators.handler(handler);\n var state = {\n current: initial\n };\n var didUpdate = curry(didStateUpdate)(state, handler);\n var update = curry(updateState)(state);\n var validate = curry(validators.changes)(initial);\n var getChanges = curry(extractChanges)(state);\n\n function getState() {\n var selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function (state) {\n return state;\n };\n validators.selector(selector);\n return selector(state.current);\n }\n\n function setState(causedChanges) {\n compose(didUpdate, update, validate, getChanges)(causedChanges);\n }\n\n return [getState, setState];\n}\n\nfunction extractChanges(state, causedChanges) {\n return isFunction(causedChanges) ? causedChanges(state.current) : causedChanges;\n}\n\nfunction updateState(state, changes) {\n state.current = _objectSpread2(_objectSpread2({}, state.current), changes);\n return changes;\n}\n\nfunction didStateUpdate(state, handler, changes) {\n isFunction(handler) ? handler(state.current) : Object.keys(changes).forEach(function (field) {\n var _handler$field;\n\n return (_handler$field = handler[field]) === null || _handler$field === void 0 ? void 0 : _handler$field.call(handler, state.current[field]);\n });\n return changes;\n}\n\nvar index = {\n create: create\n};\n\nexport default index;\n","var config = {\n paths: {\n vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.54.0/min/vs'\n }\n};\n\nexport { config as default };\n","function curry(fn) {\n return function curried() {\n var _this = this;\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n return args.length >= fn.length ? fn.apply(this, args) : function () {\n for (var _len2 = arguments.length, nextArgs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n nextArgs[_key2] = arguments[_key2];\n }\n return curried.apply(_this, [].concat(args, nextArgs));\n };\n };\n}\n\nexport { curry as default };\n","function isObject(value) {\n return {}.toString.call(value).includes('Object');\n}\n\nexport { isObject as default };\n","import curry from '../utils/curry.js';\nimport isObject from '../utils/isObject.js';\n\n/**\n * validates the configuration object and informs about deprecation\n * @param {Object} config - the configuration object \n * @return {Object} config - the validated configuration object\n */\nfunction validateConfig(config) {\n if (!config) errorHandler('configIsRequired');\n if (!isObject(config)) errorHandler('configType');\n if (config.urls) {\n informAboutDeprecation();\n return {\n paths: {\n vs: config.urls.monacoBase\n }\n };\n }\n return config;\n}\n\n/**\n * logs deprecation message\n */\nfunction informAboutDeprecation() {\n console.warn(errorMessages.deprecation);\n}\nfunction throwError(errorMessages, type) {\n throw new Error(errorMessages[type] || errorMessages[\"default\"]);\n}\nvar errorMessages = {\n configIsRequired: 'the configuration object is required',\n configType: 'the configuration object should be an object',\n \"default\": 'an unknown error accured in `@monaco-editor/loader` package',\n deprecation: \"Deprecation warning!\\n You are using deprecated way of configuration.\\n\\n Instead of using\\n monaco.config({ urls: { monacoBase: '...' } })\\n use\\n monaco.config({ paths: { vs: '...' } })\\n\\n For more please check the link https://github.com/suren-atoyan/monaco-loader#config\\n \"\n};\nvar errorHandler = curry(throwError)(errorMessages);\nvar validators = {\n config: validateConfig\n};\n\nexport { validators as default, errorHandler, errorMessages };\n","var compose = function compose() {\n for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {\n fns[_key] = arguments[_key];\n }\n return function (x) {\n return fns.reduceRight(function (y, f) {\n return f(y);\n }, x);\n };\n};\n\nexport { compose as default };\n","import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';\n\nfunction merge(target, source) {\n Object.keys(source).forEach(function (key) {\n if (source[key] instanceof Object) {\n if (target[key]) {\n Object.assign(source[key], merge(target[key], source[key]));\n }\n }\n });\n return _objectSpread2(_objectSpread2({}, target), source);\n}\n\nexport { merge as default };\n","// The source (has been changed) is https://github.com/facebook/react/issues/5465#issuecomment-157888325\n\nvar CANCELATION_MESSAGE = {\n type: 'cancelation',\n msg: 'operation is manually canceled'\n};\nfunction makeCancelable(promise) {\n var hasCanceled_ = false;\n var wrappedPromise = new Promise(function (resolve, reject) {\n promise.then(function (val) {\n return hasCanceled_ ? reject(CANCELATION_MESSAGE) : resolve(val);\n });\n promise[\"catch\"](reject);\n });\n return wrappedPromise.cancel = function () {\n return hasCanceled_ = true;\n }, wrappedPromise;\n}\n\nexport { CANCELATION_MESSAGE, makeCancelable as default };\n","import { slicedToArray as _slicedToArray, objectWithoutProperties as _objectWithoutProperties } from '../_virtual/_rollupPluginBabelHelpers.js';\nimport state from 'state-local';\nimport config$1 from '../config/index.js';\nimport validators from '../validators/index.js';\nimport compose from '../utils/compose.js';\nimport merge from '../utils/deepMerge.js';\nimport makeCancelable from '../utils/makeCancelable.js';\n\nvar _excluded = [\"monaco\"];\n\n/** the local state of the module */\nvar _state$create = state.create({\n config: config$1,\n isInitialized: false,\n resolve: null,\n reject: null,\n monaco: null\n }),\n _state$create2 = _slicedToArray(_state$create, 2),\n getState = _state$create2[0],\n setState = _state$create2[1];\n\n/**\n * set the loader configuration\n * @param {Object} config - the configuration object\n */\nfunction config(globalConfig) {\n var _validators$config = validators.config(globalConfig),\n monaco = _validators$config.monaco,\n config = _objectWithoutProperties(_validators$config, _excluded);\n setState(function (state) {\n return {\n config: merge(state.config, config),\n monaco: monaco\n };\n });\n}\n\n/**\n * handles the initialization of the monaco-editor\n * @return {Promise} - returns an instance of monaco (with a cancelable promise)\n */\nfunction init() {\n var state = getState(function (_ref) {\n var monaco = _ref.monaco,\n isInitialized = _ref.isInitialized,\n resolve = _ref.resolve;\n return {\n monaco: monaco,\n isInitialized: isInitialized,\n resolve: resolve\n };\n });\n if (!state.isInitialized) {\n setState({\n isInitialized: true\n });\n if (state.monaco) {\n state.resolve(state.monaco);\n return makeCancelable(wrapperPromise);\n }\n if (window.monaco && window.monaco.editor) {\n storeMonacoInstance(window.monaco);\n state.resolve(window.monaco);\n return makeCancelable(wrapperPromise);\n }\n compose(injectScripts, getMonacoLoaderScript)(configureLoader);\n }\n return makeCancelable(wrapperPromise);\n}\n\n/**\n * injects provided scripts into the document.body\n * @param {Object} script - an HTML script element\n * @return {Object} - the injected HTML script element\n */\nfunction injectScripts(script) {\n return document.body.appendChild(script);\n}\n\n/**\n * creates an HTML script element with/without provided src\n * @param {string} [src] - the source path of the script\n * @return {Object} - the created HTML script element\n */\nfunction createScript(src) {\n var script = document.createElement('script');\n return src && (script.src = src), script;\n}\n\n/**\n * creates an HTML script element with the monaco loader src\n * @return {Object} - the created HTML script element\n */\nfunction getMonacoLoaderScript(configureLoader) {\n var state = getState(function (_ref2) {\n var config = _ref2.config,\n reject = _ref2.reject;\n return {\n config: config,\n reject: reject\n };\n });\n var loaderScript = createScript(\"\".concat(state.config.paths.vs, \"/loader.js\"));\n loaderScript.onload = function () {\n return configureLoader();\n };\n loaderScript.onerror = state.reject;\n return loaderScript;\n}\n\n/**\n * configures the monaco loader\n */\nfunction configureLoader() {\n var state = getState(function (_ref3) {\n var config = _ref3.config,\n resolve = _ref3.resolve,\n reject = _ref3.reject;\n return {\n config: config,\n resolve: resolve,\n reject: reject\n };\n });\n var require = window.require;\n require.config(state.config);\n require(['vs/editor/editor.main'], function (_ref4) {\n var monaco = _ref4.m;\n storeMonacoInstance(monaco);\n state.resolve(monaco);\n }, function (error) {\n state.reject(error);\n });\n}\n\n/**\n * store monaco instance in local state\n */\nfunction storeMonacoInstance(monaco) {\n if (!getState().monaco) {\n setState({\n monaco: monaco\n });\n }\n}\n\n/**\n * internal helper function\n * extracts stored monaco instance\n * @return {Object|null} - the monaco instance\n */\nfunction __getMonacoInstance() {\n return getState(function (_ref5) {\n var monaco = _ref5.monaco;\n return monaco;\n });\n}\nvar wrapperPromise = new Promise(function (resolve, reject) {\n return setState({\n resolve: resolve,\n reject: reject\n });\n});\nvar loader = {\n config: config,\n init: init,\n __getMonacoInstance: __getMonacoInstance\n};\n\nexport { loader as default };\n","import _t from\"@monaco-editor/loader\";import{memo as Te}from\"react\";import ke,{useState as re,useRef as S,useCallback as oe,useEffect as ne}from\"react\";import Se from\"@monaco-editor/loader\";import{memo as ye}from\"react\";import K from\"react\";var le={wrapper:{display:\"flex\",position:\"relative\",textAlign:\"initial\"},fullWidth:{width:\"100%\"},hide:{display:\"none\"}},v=le;import me from\"react\";var ae={container:{display:\"flex\",height:\"100%\",width:\"100%\",justifyContent:\"center\",alignItems:\"center\"}},Y=ae;function Me({children:e}){return me.createElement(\"div\",{style:Y.container},e)}var Z=Me;var $=Z;function Ee({width:e,height:r,isEditorReady:n,loading:t,_ref:a,className:m,wrapperProps:E}){return K.createElement(\"section\",{style:{...v.wrapper,width:e,height:r},...E},!n&&K.createElement($,null,t),K.createElement(\"div\",{ref:a,style:{...v.fullWidth,...!n&&v.hide},className:m}))}var ee=Ee;var H=ye(ee);import{useEffect as xe}from\"react\";function Ce(e){xe(e,[])}var k=Ce;import{useEffect as ge,useRef as Re}from\"react\";function he(e,r,n=!0){let t=Re(!0);ge(t.current||!n?()=>{t.current=!1}:e,r)}var l=he;function D(){}function h(e,r,n,t){return De(e,t)||be(e,r,n,t)}function De(e,r){return e.editor.getModel(te(e,r))}function be(e,r,n,t){return e.editor.createModel(r,n,t?te(e,t):void 0)}function te(e,r){return e.Uri.parse(r)}function Oe({original:e,modified:r,language:n,originalLanguage:t,modifiedLanguage:a,originalModelPath:m,modifiedModelPath:E,keepCurrentOriginalModel:g=!1,keepCurrentModifiedModel:N=!1,theme:x=\"light\",loading:P=\"Loading...\",options:y={},height:V=\"100%\",width:z=\"100%\",className:F,wrapperProps:j={},beforeMount:A=D,onMount:q=D}){let[M,O]=re(!1),[T,s]=re(!0),u=S(null),c=S(null),w=S(null),d=S(q),o=S(A),b=S(!1);k(()=>{let i=Se.init();return i.then(f=>(c.current=f)&&s(!1)).catch(f=>f?.type!==\"cancelation\"&&console.error(\"Monaco initialization: error:\",f)),()=>u.current?I():i.cancel()}),l(()=>{if(u.current&&c.current){let i=u.current.getOriginalEditor(),f=h(c.current,e||\"\",t||n||\"text\",m||\"\");f!==i.getModel()&&i.setModel(f)}},[m],M),l(()=>{if(u.current&&c.current){let i=u.current.getModifiedEditor(),f=h(c.current,r||\"\",a||n||\"text\",E||\"\");f!==i.getModel()&&i.setModel(f)}},[E],M),l(()=>{let i=u.current.getModifiedEditor();i.getOption(c.current.editor.EditorOption.readOnly)?i.setValue(r||\"\"):r!==i.getValue()&&(i.executeEdits(\"\",[{range:i.getModel().getFullModelRange(),text:r||\"\",forceMoveMarkers:!0}]),i.pushUndoStop())},[r],M),l(()=>{u.current?.getModel()?.original.setValue(e||\"\")},[e],M),l(()=>{let{original:i,modified:f}=u.current.getModel();c.current.editor.setModelLanguage(i,t||n||\"text\"),c.current.editor.setModelLanguage(f,a||n||\"text\")},[n,t,a],M),l(()=>{c.current?.editor.setTheme(x)},[x],M),l(()=>{u.current?.updateOptions(y)},[y],M);let L=oe(()=>{if(!c.current)return;o.current(c.current);let i=h(c.current,e||\"\",t||n||\"text\",m||\"\"),f=h(c.current,r||\"\",a||n||\"text\",E||\"\");u.current?.setModel({original:i,modified:f})},[n,r,a,e,t,m,E]),U=oe(()=>{!b.current&&w.current&&(u.current=c.current.editor.createDiffEditor(w.current,{automaticLayout:!0,...y}),L(),c.current?.editor.setTheme(x),O(!0),b.current=!0)},[y,x,L]);ne(()=>{M&&d.current(u.current,c.current)},[M]),ne(()=>{!T&&!M&&U()},[T,M,U]);function I(){let i=u.current?.getModel();g||i?.original?.dispose(),N||i?.modified?.dispose(),u.current?.dispose()}return ke.createElement(H,{width:z,height:V,isEditorReady:M,loading:P,_ref:w,className:F,wrapperProps:j})}var ie=Oe;var we=Te(ie);import{useState as Ie}from\"react\";import ce from\"@monaco-editor/loader\";function Pe(){let[e,r]=Ie(ce.__getMonacoInstance());return k(()=>{let n;return e||(n=ce.init(),n.then(t=>{r(t)})),()=>n?.cancel()}),e}var Le=Pe;import{memo as ze}from\"react\";import We,{useState as ue,useEffect as W,useRef as C,useCallback as _e}from\"react\";import Ne from\"@monaco-editor/loader\";import{useEffect as Ue,useRef as ve}from\"react\";function He(e){let r=ve();return Ue(()=>{r.current=e},[e]),r.current}var se=He;var _=new Map;function Ve({defaultValue:e,defaultLanguage:r,defaultPath:n,value:t,language:a,path:m,theme:E=\"light\",line:g,loading:N=\"Loading...\",options:x={},overrideServices:P={},saveViewState:y=!0,keepCurrentModel:V=!1,width:z=\"100%\",height:F=\"100%\",className:j,wrapperProps:A={},beforeMount:q=D,onMount:M=D,onChange:O,onValidate:T=D}){let[s,u]=ue(!1),[c,w]=ue(!0),d=C(null),o=C(null),b=C(null),L=C(M),U=C(q),I=C(),i=C(t),f=se(m),Q=C(!1),B=C(!1);k(()=>{let p=Ne.init();return p.then(R=>(d.current=R)&&w(!1)).catch(R=>R?.type!==\"cancelation\"&&console.error(\"Monaco initialization: error:\",R)),()=>o.current?pe():p.cancel()}),l(()=>{let p=h(d.current,e||t||\"\",r||a||\"\",m||n||\"\");p!==o.current?.getModel()&&(y&&_.set(f,o.current?.saveViewState()),o.current?.setModel(p),y&&o.current?.restoreViewState(_.get(m)))},[m],s),l(()=>{o.current?.updateOptions(x)},[x],s),l(()=>{!o.current||t===void 0||(o.current.getOption(d.current.editor.EditorOption.readOnly)?o.current.setValue(t):t!==o.current.getValue()&&(B.current=!0,o.current.executeEdits(\"\",[{range:o.current.getModel().getFullModelRange(),text:t,forceMoveMarkers:!0}]),o.current.pushUndoStop(),B.current=!1))},[t],s),l(()=>{let p=o.current?.getModel();p&&a&&d.current?.editor.setModelLanguage(p,a)},[a],s),l(()=>{g!==void 0&&o.current?.revealLine(g)},[g],s),l(()=>{d.current?.editor.setTheme(E)},[E],s);let X=_e(()=>{if(!(!b.current||!d.current)&&!Q.current){U.current(d.current);let p=m||n,R=h(d.current,t||e||\"\",r||a||\"\",p||\"\");o.current=d.current?.editor.create(b.current,{model:R,automaticLayout:!0,...x},P),y&&o.current.restoreViewState(_.get(p)),d.current.editor.setTheme(E),g!==void 0&&o.current.revealLine(g),u(!0),Q.current=!0}},[e,r,n,t,a,m,x,P,y,E,g]);W(()=>{s&&L.current(o.current,d.current)},[s]),W(()=>{!c&&!s&&X()},[c,s,X]),i.current=t,W(()=>{s&&O&&(I.current?.dispose(),I.current=o.current?.onDidChangeModelContent(p=>{B.current||O(o.current.getValue(),p)}))},[s,O]),W(()=>{if(s){let p=d.current.editor.onDidChangeMarkers(R=>{let G=o.current.getModel()?.uri;if(G&&R.find(J=>J.path===G.path)){let J=d.current.editor.getModelMarkers({resource:G});T?.(J)}});return()=>{p?.dispose()}}return()=>{}},[s,T]);function pe(){I.current?.dispose(),V?y&&_.set(m,o.current.saveViewState()):o.current.getModel()?.dispose(),o.current.dispose()}return We.createElement(H,{width:z,height:F,isEditorReady:s,loading:N,_ref:b,className:j,wrapperProps:A})}var fe=Ve;var de=ze(fe);var Ft=de;export{we as DiffEditor,de as Editor,Ft as default,_t as loader,Le as useMonaco};\n//# sourceMappingURL=index.mjs.map","import React, { useEffect, useRef } from 'react';\nimport Editor, { Monaco } from '@monaco-editor/react';\nimport * as monaco from 'monaco-editor';\n\nexport interface CodeEditorProps {\n value: string;\n onChange?: (event: { target: { value: string } }) => void;\n language?: string;\n height?: string;\n readOnly?: boolean;\n theme?: 'vs-dark' | 'vs-light';\n}\n\nexport const CodeEditor: React.FC = ({\n value,\n onChange,\n language = 'json',\n height = '100%',\n readOnly = false,\n theme = 'vs-dark',\n}) => {\n const editorRef = useRef(null);\n\n const handleEditorDidMount = (\n editor: monaco.editor.IStandaloneCodeEditor,\n monacoInstance: Monaco\n ) => {\n editorRef.current = editor;\n\n // JSON 스키마 검증 설정\n if (language === 'json') {\n monacoInstance.languages.json.jsonDefaults.setDiagnosticsOptions({\n validate: true,\n schemaValidation: 'error',\n allowComments: false,\n });\n }\n\n // 에디터 옵션 설정\n editor.updateOptions({\n readOnly,\n minimap: { enabled: false },\n scrollBeyondLastLine: false,\n fontSize: 14,\n lineNumbers: 'on',\n renderWhitespace: 'selection',\n automaticLayout: true,\n });\n };\n\n const handleChange = (value: string | undefined) => {\n if (onChange && value !== undefined) {\n // 엔진의 isCustomComponentEvent 경로로 처리되도록 { target: { value } } 패턴 사용\n onChange({ target: { value } });\n }\n };\n\n useEffect(() => {\n if (editorRef.current) {\n editorRef.current.updateOptions({ readOnly });\n }\n }, [readOnly]);\n\n return (\n
\n \n
\n );\n};\n","import React, { useCallback } from 'react';\nimport { Ul } from '../basic/Ul';\nimport { Li } from '../basic/Li';\nimport { Span } from '../basic/Span';\nimport { Div } from '../basic/Div';\n\nexport interface VersionItem {\n id: string | number;\n version: string;\n created_at: string;\n changes_summary: {\n added: number;\n removed: number;\n };\n}\n\nexport interface VersionListProps {\n versions: VersionItem[];\n selectedId?: string | number;\n onSelect?: (id: string | number) => void;\n}\n\nconst formatDate = (dateString: string): string => {\n const date = new Date(dateString);\n return new Intl.DateTimeFormat('ko-KR', {\n year: 'numeric',\n month: '2-digit',\n day: '2-digit',\n hour: '2-digit',\n minute: '2-digit',\n }).format(date);\n};\n\ninterface VersionListItemProps {\n version: VersionItem;\n isSelected: boolean;\n onSelect?: (id: string | number) => void;\n}\n\nconst VersionListItem: React.FC = React.memo(({ version, isSelected, onSelect }) => {\n const handleClick = useCallback(() => {\n onSelect?.(version.id);\n }, [onSelect, version.id]);\n\n return (\n \n
\n
\n \n 버전 {version.version}\n \n \n {formatDate(version.created_at)}\n \n
\n\n
\n \n +{version.changes_summary.added}\n \n \n -{version.changes_summary.removed}\n \n
\n
\n \n );\n});\n\nVersionListItem.displayName = 'VersionListItem';\n\n/**\n * 레이아웃 버전 목록을 표시하는 컴포넌트\n * 각 버전의 변경 요약을 표시하고 선택 기능을 제공합니다.\n */\nexport const VersionList: React.FC = ({\n versions,\n selectedId,\n onSelect,\n}) => {\n if (versions.length === 0) {\n return (\n
\n 버전이 없습니다.\n
\n );\n }\n\n return (\n \n {versions.map((version) => (\n \n ))}\n \n );\n};\n","import React, { useState } from 'react';\nimport { Div } from '../basic/Div';\nimport { Button } from '../basic/Button';\nimport { VersionList, VersionItem } from './VersionList';\n\nexport interface LayoutHistoryPanelProps {\n /** 레이아웃 ID */\n layoutId: string | number;\n /** 버전 목록 */\n versions: VersionItem[];\n /** 버전 복원 콜백 */\n onRestore: (versionId: string | number) => void;\n}\n\n/**\n * 레이아웃 히스토리 패널 컴포넌트\n * 버전 목록을 표시하고 선택된 버전을 복원하는 기능을 제공합니다.\n */\nexport const LayoutHistoryPanel: React.FC = ({\n layoutId: _layoutId,\n versions,\n onRestore,\n}) => {\n const [selectedVersionId, setSelectedVersionId] = useState();\n\n const handleVersionSelect = (versionId: string | number): void => {\n setSelectedVersionId(versionId);\n };\n\n const handleRestore = (): void => {\n if (selectedVersionId !== undefined) {\n onRestore(selectedVersionId);\n }\n };\n\n const isRestoreDisabled = selectedVersionId === undefined;\n\n return (\n \n {/* 버전 목록 */}\n
\n \n
\n\n {/* 복원 버튼 */}\n
\n \n 복원\n \n
\n \n );\n};\n","import React, { useState, type FormEvent } from 'react';\nimport { Div } from '../basic/Div';\nimport { Form } from '../basic/Form';\nimport { Label } from '../basic/Label';\nimport { Input } from '../basic/Input';\nimport { Button } from '../basic/Button';\nimport { A } from '../basic/A';\nimport { P } from '../basic/P';\nimport { Svg } from '../basic/Svg';\n\n/**\n * LoginForm props 인터페이스\n */\nexport interface LoginFormProps {\n /** 이메일 라벨 텍스트 */\n emailLabel?: string;\n /** 비밀번호 라벨 텍스트 */\n passwordLabel?: string;\n /** 로그인 버튼 텍스트 */\n submitButtonText?: string;\n /** 처리 중 텍스트 */\n processingText?: string;\n /** 이메일 입력 필드 placeholder */\n emailPlaceholder?: string;\n /** 비밀번호 입력 필드 placeholder */\n passwordPlaceholder?: string;\n /** 비밀번호 찾기 텍스트 */\n forgotPasswordText?: string;\n /** 비밀번호 찾기 URL */\n forgotPasswordUrl?: string;\n /** 이메일 필수 입력 에러 메시지 */\n emailRequiredError?: string;\n /** 이메일 형식 에러 메시지 */\n emailInvalidError?: string;\n /** 비밀번호 필수 입력 에러 메시지 */\n passwordRequiredError?: string;\n /** 폼 제출 핸들러 */\n onSubmit?: (data: { email: string; password: string }) => void;\n /** 로딩 액션 맵 (ActionDispatcher에서 전달) */\n loadingActions?: Record;\n /** 외부에서 직접 로딩 상태 제어 */\n isLoading?: boolean;\n /** 외부에서 직접 비활성화 상태 제어 */\n disabled?: boolean;\n /** API 에러 메시지 (ActionDispatcher에서 전달) */\n apiError?: string;\n /** 커스텀 className */\n className?: string;\n /** 커스텀 스타일 */\n style?: React.CSSProperties;\n}\n\n/**\n * 에러 상태 인터페이스\n */\ninterface FormErrors {\n email?: string;\n password?: string;\n}\n\n/**\n * LoginForm 집합 컴포넌트\n *\n * 관리자 로그인 폼의 UI 및 상태 관리를 담당합니다.\n * - 이메일/비밀번호 입력 폼\n * - 유효성 검증\n * - 로딩 상태 표시\n * - 다크 모드 지원\n * - Laravel Sanctum API 통신\n */\nexport const LoginForm: React.FC = ({\n emailLabel = 'Email',\n passwordLabel = 'Password',\n submitButtonText = 'Sign In',\n processingText = 'Processing...',\n emailPlaceholder = 'Email',\n passwordPlaceholder = 'Password',\n forgotPasswordText = 'Forgot your password?',\n forgotPasswordUrl = '/admin/password/reset',\n emailRequiredError = 'Please enter your email.',\n emailInvalidError = 'Please enter a valid email address.',\n passwordRequiredError = 'Please enter your password.',\n onSubmit,\n loadingActions = {},\n isLoading: isLoadingProp = false,\n disabled: disabledProp = false,\n apiError: apiErrorProp = '',\n className = '',\n style,\n}) => {\n // 폼 상태 관리\n const [email, setEmail] = useState('');\n const [password, setPassword] = useState('');\n const [errors, setErrors] = useState({});\n\n // ActionDispatcher에서 전달된 apiError를 사용 (prop이 우선)\n const apiError = apiErrorProp;\n\n // loadingActions로부터 isLoading 계산\n // 외부 isLoading prop 또는 loadingActions 중 하나라도 true이면 로딩 중\n const isLoadingFromActions = Object.values(loadingActions).some((loading) => loading === true);\n const isLoading = isLoadingProp || isLoadingFromActions;\n const isDisabled = disabledProp || isLoading;\n\n /**\n * 유효성 검증\n */\n const validate = (): boolean => {\n const newErrors: FormErrors = {};\n\n // 이메일 검증 (RFC 5322 기반 더 엄격한 정규식)\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n\n if (!email || email.trim() === '') {\n newErrors.email = emailRequiredError;\n } else if (!emailRegex.test(email)) {\n newErrors.email = emailInvalidError;\n }\n\n // 비밀번호 검증\n if (!password || password.trim() === '') {\n newErrors.password = passwordRequiredError;\n }\n\n setErrors(newErrors);\n return Object.keys(newErrors).length === 0;\n };\n\n /**\n * 폼 제출 핸들러 래퍼\n *\n * ActionDispatcher의 핸들러를 실행하기 전에 클라이언트 검증을 수행합니다.\n */\n const handleSubmit = async (e: FormEvent): Promise => {\n // 유효성 검증\n if (!validate()) {\n e.preventDefault();\n return;\n }\n\n // 에러 초기화 (클라이언트 검증 에러만)\n setErrors({});\n\n // ActionDispatcher의 핸들러 실행 (onSubmit prop으로 전달됨)\n if (onSubmit) {\n // onSubmit은 ActionDispatcher.createHandler가 생성한 핸들러\n // 내부적으로 event.preventDefault(), FormData 추출, API 호출을 처리함\n // onError 핸들러에서 setError를 사용하면 apiError prop이 업데이트됨\n await (onSubmit as any)(e);\n } else {\n // onSubmit이 없으면 기본 동작 방지\n e.preventDefault();\n }\n };\n\n return (\n
\n
\n {/* API 에러 메시지 */}\n {apiError && (\n
\n

{apiError}

\n
\n )}\n\n {/* 이메일 입력 필드 */}\n
\n \n {emailLabel}\n \n setEmail(e.target.value)}\n placeholder={emailPlaceholder}\n disabled={isDisabled}\n className={`\n w-full px-4 py-3 rounded-lg border\n ${\n errors.email\n ? 'border-red-500 focus:border-red-500 focus:ring-red-500'\n : 'border-gray-300 dark:border-gray-600 focus:border-blue-500 focus:ring-blue-500'\n }\n bg-white dark:bg-gray-800\n text-gray-900 dark:text-white\n placeholder-gray-400 dark:placeholder-gray-500\n focus:outline-none focus:ring-2\n disabled:opacity-50 disabled:cursor-not-allowed\n transition-colors duration-200\n `}\n />\n {errors.email && (\n

\n {errors.email}\n

\n )}\n
\n\n {/* 비밀번호 입력 필드 */}\n
\n \n {passwordLabel}\n \n setPassword(e.target.value)}\n placeholder={passwordPlaceholder}\n disabled={isDisabled}\n className={`\n w-full px-4 py-3 rounded-lg border\n ${\n errors.password\n ? 'border-red-500 focus:border-red-500 focus:ring-red-500'\n : 'border-gray-300 dark:border-gray-600 focus:border-blue-500 focus:ring-blue-500'\n }\n bg-white dark:bg-gray-800\n text-gray-900 dark:text-white\n placeholder-gray-400 dark:placeholder-gray-500\n focus:outline-none focus:ring-2\n disabled:opacity-50 disabled:cursor-not-allowed\n transition-colors duration-200\n `}\n />\n {errors.password && (\n

\n {errors.password}\n

\n )}\n
\n\n {/* 비밀번호 찾기 링크 */}\n {forgotPasswordUrl && (\n
\n \n {forgotPasswordText}\n \n
\n )}\n\n {/* 제출 버튼 */}\n \n {isLoading ? (\n <>\n \n \n \n \n {processingText}\n \n ) : (\n submitButtonText\n )}\n \n \n
\n );\n};\n","import React, { useState, useEffect, useRef } from 'react';\nimport { Div } from '../basic/Div';\nimport { Button } from '../basic/Button';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport { Span } from '../basic/Span';\nimport type { EditorAttrs } from '../../types';\n\n/**\n * 테마 모드 타입\n */\nexport type ThemeMode = 'auto' | 'light' | 'dark';\n\n/**\n * ThemeToggle Props\n */\nexport interface ThemeToggleProps {\n /** 테마 변경 콜백 */\n onThemeChange?: (theme: ThemeMode) => void;\n /** 추가 CSS 클래스 */\n className?: string;\n /** 자동 모드 텍스트 (다국어 키 사용 권장) */\n autoText?: string;\n /** 라이트 모드 텍스트 (다국어 키 사용 권장) */\n lightText?: string;\n /** 다크 모드 텍스트 (다국어 키 사용 권장) */\n darkText?: string;\n /**\n * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)\n */\n id?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * ThemeToggle 컴포넌트\n *\n * 다크/라이트 모드 전환 버튼\n * - 3가지 모드: 자동(시스템 설정 따름), 라이트, 다크\n * - localStorage에 'g7_color_scheme' 키로 저장\n * - 시스템 prefers-color-scheme 감지 지원\n *\n * @example\n * ```json\n * {\n * \"type\": \"composite\",\n * \"name\": \"ThemeToggle\",\n * \"props\": {\n * \"autoText\": \"$t:admin.theme.auto\",\n * \"lightText\": \"$t:admin.theme.light\",\n * \"darkText\": \"$t:admin.theme.dark\"\n * }\n * }\n * ```\n */\n/**\n * 실제 적용될 테마 결정 (auto인 경우 시스템 설정 반영)\n */\nconst getEffectiveTheme = (mode: ThemeMode): 'light' | 'dark' => {\n if (mode === 'auto') {\n return window.matchMedia('(prefers-color-scheme: dark)').matches\n ? 'dark'\n : 'light';\n }\n return mode;\n};\n\n/**\n * 테마 적용\n */\nconst applyTheme = (mode: ThemeMode) => {\n const effectiveTheme = getEffectiveTheme(mode);\n document.documentElement.setAttribute('data-theme', effectiveTheme);\n\n // dark 클래스 토글 (Tailwind CSS dark: 모드 지원)\n if (effectiveTheme === 'dark') {\n document.documentElement.classList.add('dark');\n } else {\n document.documentElement.classList.remove('dark');\n }\n};\n\n/**\n * 초기 테마 로드 및 적용 (즉시 실행)\n */\nconst getInitialTheme = (): ThemeMode => {\n const savedTheme = localStorage.getItem('g7_color_scheme') as ThemeMode | null;\n if (savedTheme && ['auto', 'light', 'dark'].includes(savedTheme)) {\n return savedTheme;\n }\n return 'auto';\n};\n\nexport const ThemeToggle: React.FC = ({\n onThemeChange,\n className = '',\n autoText = 'System',\n lightText = 'Light',\n darkText = 'Dark',\n id,\n editorAttrs,\n}) => {\n // 초기 테마를 즉시 로드하고 적용\n const initialTheme = getInitialTheme();\n const [currentMode, setCurrentMode] = useState(initialTheme);\n const [showMenu, setShowMenu] = useState(false);\n const menuRef = useRef(null);\n\n /**\n * 컴포넌트 마운트 시 즉시 테마 적용\n */\n useEffect(() => {\n applyTheme(currentMode);\n }, []);\n\n /**\n * 시스템 테마 변경 감지\n */\n useEffect(() => {\n if (currentMode !== 'auto') return;\n\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n const handleChange = () => {\n applyTheme('auto');\n };\n\n mediaQuery.addEventListener('change', handleChange);\n return () => mediaQuery.removeEventListener('change', handleChange);\n }, [currentMode]);\n\n /**\n * 외부 클릭 감지\n */\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (menuRef.current && !menuRef.current.contains(event.target as Node)) {\n setShowMenu(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n /**\n * 테마 변경 핸들러\n */\n const handleThemeChange = (mode: ThemeMode) => {\n setCurrentMode(mode);\n localStorage.setItem('g7_color_scheme', mode);\n applyTheme(mode);\n setShowMenu(false);\n onThemeChange?.(mode);\n };\n\n /**\n * 현재 표시할 아이콘 결정\n */\n const getCurrentIcon = (): IconName => {\n const effectiveTheme = getEffectiveTheme(currentMode);\n return effectiveTheme === 'dark' ? IconName.Moon : IconName.Sun;\n };\n\n return (\n
\n {/* 테마 토글 버튼 */}\n setShowMenu(!showMenu)}\n className=\"w-9 h-9 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors\"\n aria-label=\"Toggle theme\"\n >\n \n \n\n {/* 테마 선택 드롭다운 */}\n {showMenu && (\n
\n
\n {/* 자동 모드 */}\n handleThemeChange('auto')}\n className={`\n w-full px-4 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-3 transition-colors\n ${currentMode === 'auto' ? 'bg-gray-50 dark:bg-gray-700' : ''}\n `}\n >\n \n {autoText}\n {currentMode === 'auto' && (\n \n )}\n \n\n {/* 라이트 모드 */}\n handleThemeChange('light')}\n className={`\n w-full px-4 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-3 transition-colors\n ${currentMode === 'light' ? 'bg-gray-50 dark:bg-gray-700' : ''}\n `}\n >\n \n {lightText}\n {currentMode === 'light' && (\n \n )}\n \n\n {/* 다크 모드 */}\n handleThemeChange('dark')}\n className={`\n w-full px-4 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-3 transition-colors\n ${currentMode === 'dark' ? 'bg-gray-50 dark:bg-gray-700' : ''}\n `}\n >\n \n {darkText}\n {currentMode === 'dark' && (\n \n )}\n \n
\n
\n )}\n
\n );\n};\n","import React, { useState, useRef, useEffect, useMemo } from 'react';\nimport { Button } from '../basic/Button';\nimport { Div } from '../basic/Div';\nimport { Span } from '../basic/Span';\nimport { Icon } from '../basic/Icon';\nimport { IconName } from '../basic/IconTypes';\nimport { Checkbox } from '../basic/Checkbox';\nimport type { EditorAttrs } from '../../types';\n\n// Logger 설정 (G7Core 초기화 전에도 동작하도록 폴백 포함)\nconst logger = ((window as any).G7Core?.createLogger?.('Comp:ColumnSelector')) ?? {\n log: (...args: unknown[]) => console.log('[Comp:ColumnSelector]', ...args),\n warn: (...args: unknown[]) => console.warn('[Comp:ColumnSelector]', ...args),\n error: (...args: unknown[]) => console.error('[Comp:ColumnSelector]', ...args),\n};\n\n// G7Core.t() 번역 함수 참조\nconst t = (key: string, params?: Record) =>\n (window as any).G7Core?.t?.(key, params) ?? key;\n\n/**\n * 전역 window 타입 확장\n * 그누보드7 Core의 AuthManager에 접근하기 위한 타입 선언\n */\ndeclare global {\n interface Window {\n G7Core?: {\n AuthManager?: {\n getInstance: () => {\n getUser: () => { uuid: string; [key: string]: any } | null;\n };\n };\n };\n }\n}\n\nexport interface ColumnItem {\n field: string;\n header: string;\n required?: boolean;\n visible?: boolean;\n}\n\n// G7Core 전역 객체의 스타일 헬퍼 접근\nconst G7Core = () => (window as any).G7Core;\n\nexport interface ColumnSelectorProps {\n /** 컴포넌트 고유 ID (레이아웃 JSON의 id 값, localStorage 키 생성에 사용) */\n id?: string;\n columns: ColumnItem[];\n visibleColumns?: string[];\n onColumnVisibilityChange?: (visibleFields: string[]) => void;\n triggerLabel?: string;\n triggerIconName?: IconName;\n position?: 'left' | 'right';\n className?: string;\n style?: React.CSSProperties;\n requiredText?: string;\n /** 드롭다운 메뉴 상단 제목 */\n menuTitle?: string;\n /** 드롭다운 메뉴 상단 설명 */\n menuDescription?: string;\n /** 기본 표시 컬럼 (localStorage에 값이 없을 때 사용) */\n defaultColumns?: string[];\n /** 트리거 버튼에 적용할 추가 className (기존 스타일과 병합됨) */\n triggerClassName?: string;\n /** 라벨 Span에 적용할 추가 className (기존 스타일과 병합됨) */\n labelClassName?: string;\n /**\n * 동적 컬럼 배열 (v1.4.0+)\n *\n * 기존 columns 배열에 동적으로 병합될 컬럼들입니다.\n * dynamicColumnsInsertAfter가 지정된 경우 해당 필드 뒤에 삽입되고,\n * 그렇지 않으면 columns 배열 끝에 추가됩니다.\n */\n dynamicColumns?: ColumnItem[];\n /**\n * 동적 컬럼 삽입 위치를 지정하는 필드명\n * 해당 필드 뒤에 dynamicColumns가 삽입됩니다.\n * 지정하지 않으면 columns 끝에 추가됩니다.\n */\n dynamicColumnsInsertAfter?: string;\n /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */\n editorAttrs?: EditorAttrs;\n}\n\n/**\n * ColumnSelector 집합 컴포넌트\n *\n * 테이블 컬럼의 표시/숨김을 선택할 수 있는 드롭다운 컴포넌트입니다.\n * required 속성이 있는 컬럼은 항상 표시되며 비활성화됩니다.\n *\n * 기본 컴포넌트 조합: Button + Div + Span + Icon + Checkbox\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"ColumnSelector\",\n * \"props\": {\n * \"columns\": [\n * {\"field\": \"id\", \"header\": \"$t:admin.users.columns.id\", \"required\": true},\n * {\"field\": \"name\", \"header\": \"$t:admin.users.columns.name\", \"required\": true},\n * {\"field\": \"email\", \"header\": \"$t:admin.users.columns.email\"},\n * {\"field\": \"status\", \"header\": \"$t:admin.users.columns.status\"}\n * ],\n * \"visibleColumns\": \"{{_local.visibleColumns}}\",\n * \"triggerLabel\": \"$t:common.column_selector\",\n * \"requiredText\": \"$t:common.required\"\n * },\n * \"actions\": [\n * {\n * \"event\": \"onColumnVisibilityChange\",\n * \"type\": \"change\",\n * \"handler\": \"setState\",\n * \"params\": {\n * \"target\": \"local\",\n * \"visibleColumns\": \"{{$args[0]}}\"\n * }\n * }\n * ]\n * }\n */\nexport const ColumnSelector: React.FC = ({\n id,\n columns,\n visibleColumns: externalVisibleColumns,\n onColumnVisibilityChange,\n triggerLabel,\n triggerIconName = IconName.Sliders,\n position = 'right',\n className = '',\n style,\n requiredText,\n menuTitle,\n menuDescription,\n defaultColumns,\n triggerClassName,\n labelClassName,\n dynamicColumns,\n dynamicColumnsInsertAfter,\n editorAttrs,\n}) => {\n // props로 전달된 값이 없으면 다국어 키 사용\n const resolvedTriggerLabel = triggerLabel ?? t('common.column_selector');\n const resolvedRequiredText = requiredText ?? t('common.required');\n\n // 동적 컬럼 병합\n // dynamicColumns가 있으면 columns에 병합하고, dynamicColumnsInsertAfter 위치에 삽입\n const mergedColumns = useMemo(() => {\n if (!dynamicColumns || !Array.isArray(dynamicColumns) || dynamicColumns.length === 0) {\n return columns;\n }\n\n // 삽입 위치 찾기\n if (dynamicColumnsInsertAfter) {\n const insertIndex = columns.findIndex((col) => col.field === dynamicColumnsInsertAfter);\n if (insertIndex !== -1) {\n return [\n ...columns.slice(0, insertIndex + 1),\n ...dynamicColumns,\n ...columns.slice(insertIndex + 1),\n ];\n }\n }\n\n // 삽입 위치가 없으면 끝에 추가\n return [...columns, ...dynamicColumns];\n }, [columns, dynamicColumns, dynamicColumnsInsertAfter]);\n\n const [isOpen, setIsOpen] = useState(false);\n const menuRef = useRef(null);\n const dropdownMenuRef = useRef(null);\n const [isInitialized, setIsInitialized] = useState(false);\n const [adjustedPosition, setAdjustedPosition] = useState<'left' | 'right'>(position);\n\n // 그누보드7 Core의 AuthManager를 통해 현재 로그인한 사용자 ID 가져오기\n // window.G7Core.AuthManager는 런타임에 G7 코어 엔진에서 제공됨\n const userId = useMemo(() => {\n try {\n const authManager = window.G7Core?.AuthManager?.getInstance();\n if (authManager) {\n const user = authManager.getUser();\n return user?.uuid;\n }\n return undefined;\n } catch {\n return undefined;\n }\n }, []);\n\n // localStorage 키 생성 (g7_columns_{id}_{userId} 형식)\n // id가 없으면 저장 기능 비활성화, userId가 없으면 공유 설정\n const storageKey = id\n ? `g7_columns_${id}${userId !== undefined ? `_${userId}` : ''}`\n : null;\n\n // localStorage에서 저장된 컬럼 설정 불러오기\n const getStoredColumns = (): string[] | null => {\n if (!storageKey) return null;\n try {\n const stored = localStorage.getItem(storageKey);\n if (stored) {\n const parsed = JSON.parse(stored);\n if (Array.isArray(parsed) && parsed.length > 0) {\n return parsed;\n }\n }\n } catch (error) {\n logger.warn('Failed to load from localStorage:', error);\n }\n return null;\n };\n\n // localStorage에 컬럼 설정 저장\n const saveToStorage = (cols: string[]) => {\n if (!storageKey) return;\n try {\n localStorage.setItem(storageKey, JSON.stringify(cols));\n } catch (error) {\n logger.warn('Failed to save to localStorage:', error);\n }\n };\n\n // 초기 컬럼 결정 (우선순위: localStorage > externalVisibleColumns > defaultColumns > 모든 컬럼)\n const getInitialColumns = (): string[] => {\n // 1. localStorage에서 불러오기\n const stored = getStoredColumns();\n if (stored) return stored;\n\n // 2. 외부에서 전달된 값\n if (externalVisibleColumns && externalVisibleColumns.length > 0) {\n return externalVisibleColumns;\n }\n\n // 3. 기본 컬럼 설정\n if (defaultColumns && defaultColumns.length > 0) {\n return defaultColumns;\n }\n\n // 4. visible !== false인 모든 컬럼\n return mergedColumns.filter((col) => col.visible !== false).map((col) => col.field);\n };\n\n // 표시할 컬럼 관리\n const [internalVisibleColumns, setInternalVisibleColumns] = useState(getInitialColumns);\n\n // 초기 로드 시 결정된 컬럼으로 부모 상태 동기화\n useEffect(() => {\n if (!isInitialized) {\n // 초기 컬럼 값으로 부모 상태 동기화 (localStorage 값 또는 defaultColumns)\n if (onColumnVisibilityChange && internalVisibleColumns.length > 0) {\n onColumnVisibilityChange(internalVisibleColumns);\n }\n setIsInitialized(true);\n }\n }, [isInitialized, onColumnVisibilityChange, internalVisibleColumns]);\n\n // 외부 visibleColumns가 변경되면 내부 상태 동기화 (단, localStorage 값이 우선)\n useEffect(() => {\n if (isInitialized && externalVisibleColumns && externalVisibleColumns.length > 0) {\n // localStorage에 저장된 값이 없을 때만 외부 값으로 동기화\n const stored = getStoredColumns();\n if (!stored) {\n setInternalVisibleColumns(externalVisibleColumns);\n }\n }\n }, [externalVisibleColumns, isInitialized]);\n\n // 동적 컬럼이 새로 추가될 때만 visibleColumns에 자동 포함\n // localStorage에 저장된 값이 있으면 사용자의 선택을 존중하고 자동 추가하지 않음\n const prevDynamicFieldsRef = useRef([]);\n const hasStoredColumnsRef = useRef(null);\n\n useEffect(() => {\n if (!isInitialized) return; // 초기화 전에는 실행하지 않음\n\n if (dynamicColumns && dynamicColumns.length > 0) {\n const currentDynamicFields = dynamicColumns.map((col) => col.field);\n\n // 최초 실행 시 localStorage 존재 여부 확인 및 prevDynamicFields 초기화\n if (hasStoredColumnsRef.current === null) {\n const stored = getStoredColumns();\n hasStoredColumnsRef.current = stored !== null;\n\n // localStorage에 저장된 값이 있으면 현재 동적 필드를 \"이미 알려진\" 것으로 기록\n // 이렇게 하면 페이지 새로고침 시 동적 컬럼이 다시 자동 추가되지 않음\n if (stored !== null) {\n prevDynamicFieldsRef.current = currentDynamicFields;\n return; // localStorage 값 존중, 자동 추가 안 함\n }\n }\n\n const prevDynamicFields = prevDynamicFieldsRef.current;\n\n // 새로 추가된 동적 필드만 찾기 (기존에 없던 필드)\n const trulyNewFields = currentDynamicFields.filter(\n (field) => !prevDynamicFields.includes(field)\n );\n\n // 새로운 동적 필드가 있을 때만 자동 추가\n if (trulyNewFields.length > 0) {\n const currentVisible = externalVisibleColumns && externalVisibleColumns.length > 0\n ? externalVisibleColumns\n : internalVisibleColumns;\n\n // 현재 visible에 없는 새 필드만 추가\n const fieldsToAdd = trulyNewFields.filter((field) => !currentVisible.includes(field));\n\n if (fieldsToAdd.length > 0) {\n const updatedVisible = [...currentVisible, ...fieldsToAdd];\n setInternalVisibleColumns(updatedVisible);\n saveToStorage(updatedVisible);\n onColumnVisibilityChange?.(updatedVisible);\n }\n }\n\n // 현재 동적 필드 목록 저장\n prevDynamicFieldsRef.current = currentDynamicFields;\n }\n }, [dynamicColumns, isInitialized]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const visibleColumns = externalVisibleColumns && externalVisibleColumns.length > 0\n ? externalVisibleColumns\n : internalVisibleColumns;\n\n // 외부 클릭 감지\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (menuRef.current && !menuRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside);\n }\n\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isOpen]);\n\n // 드롭다운 메뉴가 화면을 벗어나는지 감지하고 위치 조정\n useEffect(() => {\n if (isOpen && dropdownMenuRef.current && menuRef.current) {\n const menuRect = dropdownMenuRef.current.getBoundingClientRect();\n const triggerRect = menuRef.current.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n\n // 메뉴 너비 (w-64 = 16rem = 256px)\n const menuWidth = menuRect.width || 256;\n\n if (position === 'right') {\n // right 위치: 메뉴가 버튼의 오른쪽 끝에서 왼쪽으로 펼쳐짐\n // 메뉴의 왼쪽 끝이 화면 왼쪽을 벗어나는지 확인\n const menuLeft = triggerRect.right - menuWidth;\n if (menuLeft < 0) {\n setAdjustedPosition('left');\n } else {\n setAdjustedPosition('right');\n }\n } else {\n // left 위치: 메뉴가 버튼의 왼쪽 끝에서 오른쪽으로 펼쳐짐\n // 메뉴의 오른쪽 끝이 화면 오른쪽을 벗어나는지 확인\n const menuRight = triggerRect.left + menuWidth;\n if (menuRight > viewportWidth) {\n setAdjustedPosition('right');\n } else {\n setAdjustedPosition('left');\n }\n }\n }\n }, [isOpen, position]);\n\n const handleColumnToggle = (field: string) => {\n const column = mergedColumns.find((col) => col.field === field);\n if (column?.required) return; // required 컬럼은 토글 불가\n\n const newVisibleColumns = visibleColumns.includes(field)\n ? visibleColumns.filter((f) => f !== field)\n : [...visibleColumns, field];\n\n setInternalVisibleColumns(newVisibleColumns);\n saveToStorage(newVisibleColumns);\n onColumnVisibilityChange?.(newVisibleColumns);\n };\n\n const positionClasses = adjustedPosition === 'left' ? 'left-0' : 'right-0';\n\n return (\n \n {/* 트리거 버튼 */}\n setIsOpen(!isOpen)}\n className={G7Core()?.style?.mergeClasses?.(\n 'flex items-center gap-2 px-3 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors',\n triggerClassName\n ) ?? `flex items-center gap-2 px-3 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors ${triggerClassName ?? ''}`}\n >\n \n {resolvedTriggerLabel && (\n \n {resolvedTriggerLabel}\n \n )}\n \n\n {/* 드롭다운 메뉴 */}\n {isOpen && (\n \n {/* 헤더 영역 */}\n {(menuTitle || menuDescription) && (\n
\n {menuTitle && (\n \n {menuTitle}\n \n )}\n {menuDescription && (\n \n {menuDescription}\n \n )}\n
\n )}\n
\n {mergedColumns.map((col) => {\n const isVisible = visibleColumns.includes(col.field);\n const isRequired = col.required === true;\n\n return (\n !isRequired && handleColumnToggle(col.field)}\n className={`flex items-center gap-2 px-3 py-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700 ${\n isRequired ? 'cursor-default' : 'cursor-pointer'\n }`}\n >\n \n \n {col.header}\n \n {isRequired && resolvedRequiredText && (\n \n {resolvedRequiredText}\n \n )}\n
\n );\n })}\n \n \n )}\n \n );\n};","import React, { useState, useEffect } from 'react';\nimport { Div } from '../basic/Div';\n\n// Logger 설정 (G7Core 초기화 전에도 동작하도록 폴백 포함)\nconst logger = ((window as any).G7Core?.createLogger?.('Comp:PageTransition')) ?? {\n log: (...args: unknown[]) => console.log('[Comp:PageTransition]', ...args),\n warn: (...args: unknown[]) => console.warn('[Comp:PageTransition]', ...args),\n error: (...args: unknown[]) => console.error('[Comp:PageTransition]', ...args),\n};\n\nexport interface PageTransitionIndicatorProps {\n className?: string;\n style?: React.CSSProperties;\n}\n\n/**\n * PageTransitionIndicator 컴포넌트\n *\n * TransitionManager의 isPending 상태를 구독하여 페이지 전환 시\n * 상단에 로딩 바를 표시합니다.\n *\n * @example\n * // 레이아웃 JSON 사용 예시\n * {\n * \"name\": \"PageTransitionIndicator\"\n * }\n */\nexport const PageTransitionIndicator: React.FC = ({\n className = '',\n style,\n}) => {\n const [isPending, setIsPending] = useState(false);\n\n useEffect(() => {\n // G7Core.TransitionManager 접근\n const transitionManager = (window as any).G7Core?.TransitionManager;\n\n if (!transitionManager) {\n logger.warn('TransitionManager를 찾을 수 없습니다.');\n return;\n }\n\n // 구독 및 초기 상태 설정\n setIsPending(transitionManager.getIsPending());\n\n const unsubscribe = transitionManager.subscribe((newIsPending: boolean) => {\n setIsPending(newIsPending);\n });\n\n // 정리 함수\n return unsubscribe;\n }, []);\n\n if (!isPending) {\n return null;\n }\n\n return (\n \n
\n \n
\n\n \n \n );\n};\n","import React from 'react';\n\n/**\n * 페이지 로딩 컴포넌트 Props (엔진에서 전달)\n *\n * @since engine-v1.29.0\n */\nexport interface PageLoadingProps {\n options?: {\n text?: string;\n };\n}\n\nconst t = (key: string, params?: Record) =>\n (window as any).G7Core?.t?.(key, params) ?? key;\n\n/**\n * 어드민 페이지 로딩 인디케이터 컴포넌트\n *\n * `transition_overlay` 의 spinner 스타일에서 사용된다.\n * 엔진은 타겟 요소 내부에 빈 컨테이너만 삽입하며, 포지셔닝/배경/z-index/다크모드\n * 등 모든 비주얼 스타일은 이 컴포넌트가 결정한다. React 트리 외부에 렌더링되므로\n * 인라인 스타일을 사용한다.\n *\n * @since engine-v1.29.0\n */\nconst PageLoading: React.FC = ({ options }) => {\n const isDark = document.documentElement.classList.contains('dark');\n\n const bgColor = isDark ? 'rgb(17,24,39)' : 'rgb(249,250,251)';\n const spinnerColor = isDark ? '#6b7280' : '#9ca3af';\n const textColor = isDark ? '#9ca3af' : '#6b7280';\n\n return (\n \n \n \n {options?.text || t('nav.loading')}\n \n \n );\n};\n\nexport default PageLoading;\n","function _typeof(o) {\n \"@babel/helpers - typeof\";\n\n return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) {\n return typeof o;\n } : function (o) {\n return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o;\n }, _typeof(o);\n}\nexport { _typeof as default };","import _typeof from \"./typeof.js\";\nfunction toPrimitive(t, r) {\n if (\"object\" != _typeof(t) || !t) return t;\n var e = t[Symbol.toPrimitive];\n if (void 0 !== e) {\n var i = e.call(t, r || \"default\");\n if (\"object\" != _typeof(i)) return i;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n }\n return (\"string\" === r ? String : Number)(t);\n}\nexport { toPrimitive as default };","import _typeof from \"./typeof.js\";\nimport toPrimitive from \"./toPrimitive.js\";\nfunction toPropertyKey(t) {\n var i = toPrimitive(t, \"string\");\n return \"symbol\" == _typeof(i) ? i : i + \"\";\n}\nexport { toPropertyKey as default };","import toPropertyKey from \"./toPropertyKey.js\";\nfunction _defineProperty(e, r, t) {\n return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {\n value: t,\n enumerable: !0,\n configurable: !0,\n writable: !0\n }) : e[r] = t, e;\n}\nexport { _defineProperty as default };","import defineProperty from \"./defineProperty.js\";\nfunction ownKeys(e, r) {\n var t = Object.keys(e);\n if (Object.getOwnPropertySymbols) {\n var o = Object.getOwnPropertySymbols(e);\n r && (o = o.filter(function (r) {\n return Object.getOwnPropertyDescriptor(e, r).enumerable;\n })), t.push.apply(t, o);\n }\n return t;\n}\nfunction _objectSpread2(e) {\n for (var r = 1; r < arguments.length; r++) {\n var t = null != arguments[r] ? arguments[r] : {};\n r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {\n defineProperty(e, r, t[r]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {\n Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));\n });\n }\n return e;\n}\nexport { _objectSpread2 as default };","function _arrayWithHoles(r) {\n if (Array.isArray(r)) return r;\n}\nexport { _arrayWithHoles as default };","function _iterableToArrayLimit(r, l) {\n var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"];\n if (null != t) {\n var e,\n n,\n i,\n u,\n a = [],\n f = !0,\n o = !1;\n try {\n if (i = (t = t.call(r)).next, 0 === l) {\n if (Object(t) !== t) return;\n f = !1;\n } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);\n } catch (r) {\n o = !0, n = r;\n } finally {\n try {\n if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return;\n } finally {\n if (o) throw n;\n }\n }\n return a;\n }\n}\nexport { _iterableToArrayLimit as default };","function _arrayLikeToArray(r, a) {\n (null == a || a > r.length) && (a = r.length);\n for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];\n return n;\n}\nexport { _arrayLikeToArray as default };","import arrayLikeToArray from \"./arrayLikeToArray.js\";\nfunction _unsupportedIterableToArray(r, a) {\n if (r) {\n if (\"string\" == typeof r) return arrayLikeToArray(r, a);\n var t = {}.toString.call(r).slice(8, -1);\n return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? arrayLikeToArray(r, a) : void 0;\n }\n}\nexport { _unsupportedIterableToArray as default };","function _nonIterableRest() {\n throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\nexport { _nonIterableRest as default };","import arrayWithHoles from \"./arrayWithHoles.js\";\nimport iterableToArrayLimit from \"./iterableToArrayLimit.js\";\nimport unsupportedIterableToArray from \"./unsupportedIterableToArray.js\";\nimport nonIterableRest from \"./nonIterableRest.js\";\nfunction _slicedToArray(r, e) {\n return arrayWithHoles(r) || iterableToArrayLimit(r, e) || unsupportedIterableToArray(r, e) || nonIterableRest();\n}\nexport { _slicedToArray as default };","function _objectWithoutPropertiesLoose(r, e) {\n if (null == r) return {};\n var t = {};\n for (var n in r) if ({}.hasOwnProperty.call(r, n)) {\n if (-1 !== e.indexOf(n)) continue;\n t[n] = r[n];\n }\n return t;\n}\nexport { _objectWithoutPropertiesLoose as default };","import objectWithoutPropertiesLoose from \"./objectWithoutPropertiesLoose.js\";\nfunction _objectWithoutProperties(e, t) {\n if (null == e) return {};\n var o,\n r,\n i = objectWithoutPropertiesLoose(e, t);\n if (Object.getOwnPropertySymbols) {\n var n = Object.getOwnPropertySymbols(e);\n for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);\n }\n return i;\n}\nexport { _objectWithoutProperties as default };","import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';\nimport _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport { useState, useCallback } from 'react';\n\nvar _excluded = [\"defaultInputValue\", \"defaultMenuIsOpen\", \"defaultValue\", \"inputValue\", \"menuIsOpen\", \"onChange\", \"onInputChange\", \"onMenuClose\", \"onMenuOpen\", \"value\"];\nfunction useStateManager(_ref) {\n var _ref$defaultInputValu = _ref.defaultInputValue,\n defaultInputValue = _ref$defaultInputValu === void 0 ? '' : _ref$defaultInputValu,\n _ref$defaultMenuIsOpe = _ref.defaultMenuIsOpen,\n defaultMenuIsOpen = _ref$defaultMenuIsOpe === void 0 ? false : _ref$defaultMenuIsOpe,\n _ref$defaultValue = _ref.defaultValue,\n defaultValue = _ref$defaultValue === void 0 ? null : _ref$defaultValue,\n propsInputValue = _ref.inputValue,\n propsMenuIsOpen = _ref.menuIsOpen,\n propsOnChange = _ref.onChange,\n propsOnInputChange = _ref.onInputChange,\n propsOnMenuClose = _ref.onMenuClose,\n propsOnMenuOpen = _ref.onMenuOpen,\n propsValue = _ref.value,\n restSelectProps = _objectWithoutProperties(_ref, _excluded);\n var _useState = useState(propsInputValue !== undefined ? propsInputValue : defaultInputValue),\n _useState2 = _slicedToArray(_useState, 2),\n stateInputValue = _useState2[0],\n setStateInputValue = _useState2[1];\n var _useState3 = useState(propsMenuIsOpen !== undefined ? propsMenuIsOpen : defaultMenuIsOpen),\n _useState4 = _slicedToArray(_useState3, 2),\n stateMenuIsOpen = _useState4[0],\n setStateMenuIsOpen = _useState4[1];\n var _useState5 = useState(propsValue !== undefined ? propsValue : defaultValue),\n _useState6 = _slicedToArray(_useState5, 2),\n stateValue = _useState6[0],\n setStateValue = _useState6[1];\n var onChange = useCallback(function (value, actionMeta) {\n if (typeof propsOnChange === 'function') {\n propsOnChange(value, actionMeta);\n }\n setStateValue(value);\n }, [propsOnChange]);\n var onInputChange = useCallback(function (value, actionMeta) {\n var newValue;\n if (typeof propsOnInputChange === 'function') {\n newValue = propsOnInputChange(value, actionMeta);\n }\n setStateInputValue(newValue !== undefined ? newValue : value);\n }, [propsOnInputChange]);\n var onMenuOpen = useCallback(function () {\n if (typeof propsOnMenuOpen === 'function') {\n propsOnMenuOpen();\n }\n setStateMenuIsOpen(true);\n }, [propsOnMenuOpen]);\n var onMenuClose = useCallback(function () {\n if (typeof propsOnMenuClose === 'function') {\n propsOnMenuClose();\n }\n setStateMenuIsOpen(false);\n }, [propsOnMenuClose]);\n var inputValue = propsInputValue !== undefined ? propsInputValue : stateInputValue;\n var menuIsOpen = propsMenuIsOpen !== undefined ? propsMenuIsOpen : stateMenuIsOpen;\n var value = propsValue !== undefined ? propsValue : stateValue;\n return _objectSpread(_objectSpread({}, restSelectProps), {}, {\n inputValue: inputValue,\n menuIsOpen: menuIsOpen,\n onChange: onChange,\n onInputChange: onInputChange,\n onMenuClose: onMenuClose,\n onMenuOpen: onMenuOpen,\n value: value\n });\n}\n\nexport { useStateManager as u };\n","function _extends() {\n return _extends = Object.assign ? Object.assign.bind() : function (n) {\n for (var e = 1; e < arguments.length; e++) {\n var t = arguments[e];\n for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);\n }\n return n;\n }, _extends.apply(null, arguments);\n}\nexport { _extends as default };","function _classCallCheck(a, n) {\n if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\");\n}\nexport { _classCallCheck as default };","import toPropertyKey from \"./toPropertyKey.js\";\nfunction _defineProperties(e, r) {\n for (var t = 0; t < r.length; t++) {\n var o = r[t];\n o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, toPropertyKey(o.key), o);\n }\n}\nfunction _createClass(e, r, t) {\n return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", {\n writable: !1\n }), e;\n}\nexport { _createClass as default };","function _setPrototypeOf(t, e) {\n return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {\n return t.__proto__ = e, t;\n }, _setPrototypeOf(t, e);\n}\nexport { _setPrototypeOf as default };","import setPrototypeOf from \"./setPrototypeOf.js\";\nfunction _inherits(t, e) {\n if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\");\n t.prototype = Object.create(e && e.prototype, {\n constructor: {\n value: t,\n writable: !0,\n configurable: !0\n }\n }), Object.defineProperty(t, \"prototype\", {\n writable: !1\n }), e && setPrototypeOf(t, e);\n}\nexport { _inherits as default };","function _getPrototypeOf(t) {\n return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {\n return t.__proto__ || Object.getPrototypeOf(t);\n }, _getPrototypeOf(t);\n}\nexport { _getPrototypeOf as default };","function _isNativeReflectConstruct() {\n try {\n var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n } catch (t) {}\n return (_isNativeReflectConstruct = function _isNativeReflectConstruct() {\n return !!t;\n })();\n}\nexport { _isNativeReflectConstruct as default };","function _assertThisInitialized(e) {\n if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n return e;\n}\nexport { _assertThisInitialized as default };","import _typeof from \"./typeof.js\";\nimport assertThisInitialized from \"./assertThisInitialized.js\";\nfunction _possibleConstructorReturn(t, e) {\n if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e;\n if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\");\n return assertThisInitialized(t);\n}\nexport { _possibleConstructorReturn as default };","import getPrototypeOf from \"./getPrototypeOf.js\";\nimport isNativeReflectConstruct from \"./isNativeReflectConstruct.js\";\nimport possibleConstructorReturn from \"./possibleConstructorReturn.js\";\nfunction _createSuper(t) {\n var r = isNativeReflectConstruct();\n return function () {\n var e,\n o = getPrototypeOf(t);\n if (r) {\n var s = getPrototypeOf(this).constructor;\n e = Reflect.construct(o, arguments, s);\n } else e = o.apply(this, arguments);\n return possibleConstructorReturn(this, e);\n };\n}\nexport { _createSuper as default };","import arrayLikeToArray from \"./arrayLikeToArray.js\";\nfunction _arrayWithoutHoles(r) {\n if (Array.isArray(r)) return arrayLikeToArray(r);\n}\nexport { _arrayWithoutHoles as default };","function _iterableToArray(r) {\n if (\"undefined\" != typeof Symbol && null != r[Symbol.iterator] || null != r[\"@@iterator\"]) return Array.from(r);\n}\nexport { _iterableToArray as default };","function _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\nexport { _nonIterableSpread as default };","import arrayWithoutHoles from \"./arrayWithoutHoles.js\";\nimport iterableToArray from \"./iterableToArray.js\";\nimport unsupportedIterableToArray from \"./unsupportedIterableToArray.js\";\nimport nonIterableSpread from \"./nonIterableSpread.js\";\nfunction _toConsumableArray(r) {\n return arrayWithoutHoles(r) || iterableToArray(r) || unsupportedIterableToArray(r) || nonIterableSpread();\n}\nexport { _toConsumableArray as default };","var isDevelopment = false;\n\n/*\n\nBased off glamor's StyleSheet, thanks Sunil ❤️\n\nhigh performance StyleSheet for css-in-js systems\n\n- uses multiple style tags behind the scenes for millions of rules\n- uses `insertRule` for appending in production for *much* faster performance\n\n// usage\n\nimport { StyleSheet } from '@emotion/sheet'\n\nlet styleSheet = new StyleSheet({ key: '', container: document.head })\n\nstyleSheet.insert('#box { border: 1px solid red; }')\n- appends a css rule into the stylesheet\n\nstyleSheet.flush()\n- empties the stylesheet of all its contents\n\n*/\n\nfunction sheetForTag(tag) {\n if (tag.sheet) {\n return tag.sheet;\n } // this weirdness brought to you by firefox\n\n /* istanbul ignore next */\n\n\n for (var i = 0; i < document.styleSheets.length; i++) {\n if (document.styleSheets[i].ownerNode === tag) {\n return document.styleSheets[i];\n }\n } // this function should always return with a value\n // TS can't understand it though so we make it stop complaining here\n\n\n return undefined;\n}\n\nfunction createStyleElement(options) {\n var tag = document.createElement('style');\n tag.setAttribute('data-emotion', options.key);\n\n if (options.nonce !== undefined) {\n tag.setAttribute('nonce', options.nonce);\n }\n\n tag.appendChild(document.createTextNode(''));\n tag.setAttribute('data-s', '');\n return tag;\n}\n\nvar StyleSheet = /*#__PURE__*/function () {\n // Using Node instead of HTMLElement since container may be a ShadowRoot\n function StyleSheet(options) {\n var _this = this;\n\n this._insertTag = function (tag) {\n var before;\n\n if (_this.tags.length === 0) {\n if (_this.insertionPoint) {\n before = _this.insertionPoint.nextSibling;\n } else if (_this.prepend) {\n before = _this.container.firstChild;\n } else {\n before = _this.before;\n }\n } else {\n before = _this.tags[_this.tags.length - 1].nextSibling;\n }\n\n _this.container.insertBefore(tag, before);\n\n _this.tags.push(tag);\n };\n\n this.isSpeedy = options.speedy === undefined ? !isDevelopment : options.speedy;\n this.tags = [];\n this.ctr = 0;\n this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets\n\n this.key = options.key;\n this.container = options.container;\n this.prepend = options.prepend;\n this.insertionPoint = options.insertionPoint;\n this.before = null;\n }\n\n var _proto = StyleSheet.prototype;\n\n _proto.hydrate = function hydrate(nodes) {\n nodes.forEach(this._insertTag);\n };\n\n _proto.insert = function insert(rule) {\n // the max length is how many rules we have per style tag, it's 65000 in speedy mode\n // it's 1 in dev because we insert source maps that map a single rule to a location\n // and you can only have one source map per style tag\n if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {\n this._insertTag(createStyleElement(this));\n }\n\n var tag = this.tags[this.tags.length - 1];\n\n if (this.isSpeedy) {\n var sheet = sheetForTag(tag);\n\n try {\n // this is the ultrafast version, works across browsers\n // the big drawback is that the css won't be editable in devtools\n sheet.insertRule(rule, sheet.cssRules.length);\n } catch (e) {\n }\n } else {\n tag.appendChild(document.createTextNode(rule));\n }\n\n this.ctr++;\n };\n\n _proto.flush = function flush() {\n this.tags.forEach(function (tag) {\n var _tag$parentNode;\n\n return (_tag$parentNode = tag.parentNode) == null ? void 0 : _tag$parentNode.removeChild(tag);\n });\n this.tags = [];\n this.ctr = 0;\n };\n\n return StyleSheet;\n}();\n\nexport { StyleSheet };\n","export var MS = '-ms-'\nexport var MOZ = '-moz-'\nexport var WEBKIT = '-webkit-'\n\nexport var COMMENT = 'comm'\nexport var RULESET = 'rule'\nexport var DECLARATION = 'decl'\n\nexport var PAGE = '@page'\nexport var MEDIA = '@media'\nexport var IMPORT = '@import'\nexport var CHARSET = '@charset'\nexport var VIEWPORT = '@viewport'\nexport var SUPPORTS = '@supports'\nexport var DOCUMENT = '@document'\nexport var NAMESPACE = '@namespace'\nexport var KEYFRAMES = '@keyframes'\nexport var FONT_FACE = '@font-face'\nexport var COUNTER_STYLE = '@counter-style'\nexport var FONT_FEATURE_VALUES = '@font-feature-values'\nexport var LAYER = '@layer'\n","/**\n * @param {number}\n * @return {number}\n */\nexport var abs = Math.abs\n\n/**\n * @param {number}\n * @return {string}\n */\nexport var from = String.fromCharCode\n\n/**\n * @param {object}\n * @return {object}\n */\nexport var assign = Object.assign\n\n/**\n * @param {string} value\n * @param {number} length\n * @return {number}\n */\nexport function hash (value, length) {\n\treturn charat(value, 0) ^ 45 ? (((((((length << 2) ^ charat(value, 0)) << 2) ^ charat(value, 1)) << 2) ^ charat(value, 2)) << 2) ^ charat(value, 3) : 0\n}\n\n/**\n * @param {string} value\n * @return {string}\n */\nexport function trim (value) {\n\treturn value.trim()\n}\n\n/**\n * @param {string} value\n * @param {RegExp} pattern\n * @return {string?}\n */\nexport function match (value, pattern) {\n\treturn (value = pattern.exec(value)) ? value[0] : value\n}\n\n/**\n * @param {string} value\n * @param {(string|RegExp)} pattern\n * @param {string} replacement\n * @return {string}\n */\nexport function replace (value, pattern, replacement) {\n\treturn value.replace(pattern, replacement)\n}\n\n/**\n * @param {string} value\n * @param {string} search\n * @return {number}\n */\nexport function indexof (value, search) {\n\treturn value.indexOf(search)\n}\n\n/**\n * @param {string} value\n * @param {number} index\n * @return {number}\n */\nexport function charat (value, index) {\n\treturn value.charCodeAt(index) | 0\n}\n\n/**\n * @param {string} value\n * @param {number} begin\n * @param {number} end\n * @return {string}\n */\nexport function substr (value, begin, end) {\n\treturn value.slice(begin, end)\n}\n\n/**\n * @param {string} value\n * @return {number}\n */\nexport function strlen (value) {\n\treturn value.length\n}\n\n/**\n * @param {any[]} value\n * @return {number}\n */\nexport function sizeof (value) {\n\treturn value.length\n}\n\n/**\n * @param {any} value\n * @param {any[]} array\n * @return {any}\n */\nexport function append (value, array) {\n\treturn array.push(value), value\n}\n\n/**\n * @param {string[]} array\n * @param {function} callback\n * @return {string}\n */\nexport function combine (array, callback) {\n\treturn array.map(callback).join('')\n}\n","import {from, trim, charat, strlen, substr, append, assign} from './Utility.js'\n\nexport var line = 1\nexport var column = 1\nexport var length = 0\nexport var position = 0\nexport var character = 0\nexport var characters = ''\n\n/**\n * @param {string} value\n * @param {object | null} root\n * @param {object | null} parent\n * @param {string} type\n * @param {string[] | string} props\n * @param {object[] | string} children\n * @param {number} length\n */\nexport function node (value, root, parent, type, props, children, length) {\n\treturn {value: value, root: root, parent: parent, type: type, props: props, children: children, line: line, column: column, length: length, return: ''}\n}\n\n/**\n * @param {object} root\n * @param {object} props\n * @return {object}\n */\nexport function copy (root, props) {\n\treturn assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props)\n}\n\n/**\n * @return {number}\n */\nexport function char () {\n\treturn character\n}\n\n/**\n * @return {number}\n */\nexport function prev () {\n\tcharacter = position > 0 ? charat(characters, --position) : 0\n\n\tif (column--, character === 10)\n\t\tcolumn = 1, line--\n\n\treturn character\n}\n\n/**\n * @return {number}\n */\nexport function next () {\n\tcharacter = position < length ? charat(characters, position++) : 0\n\n\tif (column++, character === 10)\n\t\tcolumn = 1, line++\n\n\treturn character\n}\n\n/**\n * @return {number}\n */\nexport function peek () {\n\treturn charat(characters, position)\n}\n\n/**\n * @return {number}\n */\nexport function caret () {\n\treturn position\n}\n\n/**\n * @param {number} begin\n * @param {number} end\n * @return {string}\n */\nexport function slice (begin, end) {\n\treturn substr(characters, begin, end)\n}\n\n/**\n * @param {number} type\n * @return {number}\n */\nexport function token (type) {\n\tswitch (type) {\n\t\t// \\0 \\t \\n \\r \\s whitespace token\n\t\tcase 0: case 9: case 10: case 13: case 32:\n\t\t\treturn 5\n\t\t// ! + , / > @ ~ isolate token\n\t\tcase 33: case 43: case 44: case 47: case 62: case 64: case 126:\n\t\t// ; { } breakpoint token\n\t\tcase 59: case 123: case 125:\n\t\t\treturn 4\n\t\t// : accompanied token\n\t\tcase 58:\n\t\t\treturn 3\n\t\t// \" ' ( [ opening delimit token\n\t\tcase 34: case 39: case 40: case 91:\n\t\t\treturn 2\n\t\t// ) ] closing delimit token\n\t\tcase 41: case 93:\n\t\t\treturn 1\n\t}\n\n\treturn 0\n}\n\n/**\n * @param {string} value\n * @return {any[]}\n */\nexport function alloc (value) {\n\treturn line = column = 1, length = strlen(characters = value), position = 0, []\n}\n\n/**\n * @param {any} value\n * @return {any}\n */\nexport function dealloc (value) {\n\treturn characters = '', value\n}\n\n/**\n * @param {number} type\n * @return {string}\n */\nexport function delimit (type) {\n\treturn trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))\n}\n\n/**\n * @param {string} value\n * @return {string[]}\n */\nexport function tokenize (value) {\n\treturn dealloc(tokenizer(alloc(value)))\n}\n\n/**\n * @param {number} type\n * @return {string}\n */\nexport function whitespace (type) {\n\twhile (character = peek())\n\t\tif (character < 33)\n\t\t\tnext()\n\t\telse\n\t\t\tbreak\n\n\treturn token(type) > 2 || token(character) > 3 ? '' : ' '\n}\n\n/**\n * @param {string[]} children\n * @return {string[]}\n */\nexport function tokenizer (children) {\n\twhile (next())\n\t\tswitch (token(character)) {\n\t\t\tcase 0: append(identifier(position - 1), children)\n\t\t\t\tbreak\n\t\t\tcase 2: append(delimit(character), children)\n\t\t\t\tbreak\n\t\t\tdefault: append(from(character), children)\n\t\t}\n\n\treturn children\n}\n\n/**\n * @param {number} index\n * @param {number} count\n * @return {string}\n */\nexport function escaping (index, count) {\n\twhile (--count && next())\n\t\t// not 0-9 A-F a-f\n\t\tif (character < 48 || character > 102 || (character > 57 && character < 65) || (character > 70 && character < 97))\n\t\t\tbreak\n\n\treturn slice(index, caret() + (count < 6 && peek() == 32 && next() == 32))\n}\n\n/**\n * @param {number} type\n * @return {number}\n */\nexport function delimiter (type) {\n\twhile (next())\n\t\tswitch (character) {\n\t\t\t// ] ) \" '\n\t\t\tcase type:\n\t\t\t\treturn position\n\t\t\t// \" '\n\t\t\tcase 34: case 39:\n\t\t\t\tif (type !== 34 && type !== 39)\n\t\t\t\t\tdelimiter(character)\n\t\t\t\tbreak\n\t\t\t// (\n\t\t\tcase 40:\n\t\t\t\tif (type === 41)\n\t\t\t\t\tdelimiter(type)\n\t\t\t\tbreak\n\t\t\t// \\\n\t\t\tcase 92:\n\t\t\t\tnext()\n\t\t\t\tbreak\n\t\t}\n\n\treturn position\n}\n\n/**\n * @param {number} type\n * @param {number} index\n * @return {number}\n */\nexport function commenter (type, index) {\n\twhile (next())\n\t\t// //\n\t\tif (type + character === 47 + 10)\n\t\t\tbreak\n\t\t// /*\n\t\telse if (type + character === 42 + 42 && peek() === 47)\n\t\t\tbreak\n\n\treturn '/*' + slice(index, position - 1) + '*' + from(type === 47 ? type : next())\n}\n\n/**\n * @param {number} index\n * @return {string}\n */\nexport function identifier (index) {\n\twhile (!token(peek()))\n\t\tnext()\n\n\treturn slice(index, position)\n}\n","import {COMMENT, RULESET, DECLARATION} from './Enum.js'\nimport {abs, charat, trim, from, sizeof, strlen, substr, append, replace, indexof} from './Utility.js'\nimport {node, char, prev, next, peek, caret, alloc, dealloc, delimit, whitespace, escaping, identifier, commenter} from './Tokenizer.js'\n\n/**\n * @param {string} value\n * @return {object[]}\n */\nexport function compile (value) {\n\treturn dealloc(parse('', null, null, null, [''], value = alloc(value), 0, [0], value))\n}\n\n/**\n * @param {string} value\n * @param {object} root\n * @param {object?} parent\n * @param {string[]} rule\n * @param {string[]} rules\n * @param {string[]} rulesets\n * @param {number[]} pseudo\n * @param {number[]} points\n * @param {string[]} declarations\n * @return {object}\n */\nexport function parse (value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {\n\tvar index = 0\n\tvar offset = 0\n\tvar length = pseudo\n\tvar atrule = 0\n\tvar property = 0\n\tvar previous = 0\n\tvar variable = 1\n\tvar scanning = 1\n\tvar ampersand = 1\n\tvar character = 0\n\tvar type = ''\n\tvar props = rules\n\tvar children = rulesets\n\tvar reference = rule\n\tvar characters = type\n\n\twhile (scanning)\n\t\tswitch (previous = character, character = next()) {\n\t\t\t// (\n\t\t\tcase 40:\n\t\t\t\tif (previous != 108 && charat(characters, length - 1) == 58) {\n\t\t\t\t\tif (indexof(characters += replace(delimit(character), '&', '&\\f'), '&\\f') != -1)\n\t\t\t\t\t\tampersand = -1\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t// \" ' [\n\t\t\tcase 34: case 39: case 91:\n\t\t\t\tcharacters += delimit(character)\n\t\t\t\tbreak\n\t\t\t// \\t \\n \\r \\s\n\t\t\tcase 9: case 10: case 13: case 32:\n\t\t\t\tcharacters += whitespace(previous)\n\t\t\t\tbreak\n\t\t\t// \\\n\t\t\tcase 92:\n\t\t\t\tcharacters += escaping(caret() - 1, 7)\n\t\t\t\tcontinue\n\t\t\t// /\n\t\t\tcase 47:\n\t\t\t\tswitch (peek()) {\n\t\t\t\t\tcase 42: case 47:\n\t\t\t\t\t\tappend(comment(commenter(next(), caret()), root, parent), declarations)\n\t\t\t\t\t\tbreak\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tcharacters += '/'\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t// {\n\t\t\tcase 123 * variable:\n\t\t\t\tpoints[index++] = strlen(characters) * ampersand\n\t\t\t// } ; \\0\n\t\t\tcase 125 * variable: case 59: case 0:\n\t\t\t\tswitch (character) {\n\t\t\t\t\t// \\0 }\n\t\t\t\t\tcase 0: case 125: scanning = 0\n\t\t\t\t\t// ;\n\t\t\t\t\tcase 59 + offset: if (ampersand == -1) characters = replace(characters, /\\f/g, '')\n\t\t\t\t\t\tif (property > 0 && (strlen(characters) - length))\n\t\t\t\t\t\t\tappend(property > 32 ? declaration(characters + ';', rule, parent, length - 1) : declaration(replace(characters, ' ', '') + ';', rule, parent, length - 2), declarations)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t// @ ;\n\t\t\t\t\tcase 59: characters += ';'\n\t\t\t\t\t// { rule/at-rule\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tappend(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length), rulesets)\n\n\t\t\t\t\t\tif (character === 123)\n\t\t\t\t\t\t\tif (offset === 0)\n\t\t\t\t\t\t\t\tparse(characters, root, reference, reference, props, rulesets, length, points, children)\n\t\t\t\t\t\t\telse\n\t\t\t\t\t\t\t\tswitch (atrule === 99 && charat(characters, 3) === 110 ? 100 : atrule) {\n\t\t\t\t\t\t\t\t\t// d l m s\n\t\t\t\t\t\t\t\t\tcase 100: case 108: case 109: case 115:\n\t\t\t\t\t\t\t\t\t\tparse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children)\n\t\t\t\t\t\t\t\t\t\tbreak\n\t\t\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\t\tparse(characters, reference, reference, reference, [''], children, 0, points, children)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tindex = offset = property = 0, variable = ampersand = 1, type = characters = '', length = pseudo\n\t\t\t\tbreak\n\t\t\t// :\n\t\t\tcase 58:\n\t\t\t\tlength = 1 + strlen(characters), property = previous\n\t\t\tdefault:\n\t\t\t\tif (variable < 1)\n\t\t\t\t\tif (character == 123)\n\t\t\t\t\t\t--variable\n\t\t\t\t\telse if (character == 125 && variable++ == 0 && prev() == 125)\n\t\t\t\t\t\tcontinue\n\n\t\t\t\tswitch (characters += from(character), character * variable) {\n\t\t\t\t\t// &\n\t\t\t\t\tcase 38:\n\t\t\t\t\t\tampersand = offset > 0 ? 1 : (characters += '\\f', -1)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t// ,\n\t\t\t\t\tcase 44:\n\t\t\t\t\t\tpoints[index++] = (strlen(characters) - 1) * ampersand, ampersand = 1\n\t\t\t\t\t\tbreak\n\t\t\t\t\t// @\n\t\t\t\t\tcase 64:\n\t\t\t\t\t\t// -\n\t\t\t\t\t\tif (peek() === 45)\n\t\t\t\t\t\t\tcharacters += delimit(next())\n\n\t\t\t\t\t\tatrule = peek(), offset = length = strlen(type = characters += identifier(caret())), character++\n\t\t\t\t\t\tbreak\n\t\t\t\t\t// -\n\t\t\t\t\tcase 45:\n\t\t\t\t\t\tif (previous === 45 && strlen(characters) == 2)\n\t\t\t\t\t\t\tvariable = 0\n\t\t\t\t}\n\t\t}\n\n\treturn rulesets\n}\n\n/**\n * @param {string} value\n * @param {object} root\n * @param {object?} parent\n * @param {number} index\n * @param {number} offset\n * @param {string[]} rules\n * @param {number[]} points\n * @param {string} type\n * @param {string[]} props\n * @param {string[]} children\n * @param {number} length\n * @return {object}\n */\nexport function ruleset (value, root, parent, index, offset, rules, points, type, props, children, length) {\n\tvar post = offset - 1\n\tvar rule = offset === 0 ? rules : ['']\n\tvar size = sizeof(rule)\n\n\tfor (var i = 0, j = 0, k = 0; i < index; ++i)\n\t\tfor (var x = 0, y = substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x)\n\t\t\tif (z = trim(j > 0 ? rule[x] + ' ' + y : replace(y, /&\\f/g, rule[x])))\n\t\t\t\tprops[k++] = z\n\n\treturn node(value, root, parent, offset === 0 ? RULESET : type, props, children, length)\n}\n\n/**\n * @param {number} value\n * @param {object} root\n * @param {object?} parent\n * @return {object}\n */\nexport function comment (value, root, parent) {\n\treturn node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0)\n}\n\n/**\n * @param {string} value\n * @param {object} root\n * @param {object?} parent\n * @param {number} length\n * @return {object}\n */\nexport function declaration (value, root, parent, length) {\n\treturn node(value, root, parent, DECLARATION, substr(value, 0, length), substr(value, length + 1, -1), length)\n}\n","import {IMPORT, LAYER, COMMENT, RULESET, DECLARATION, KEYFRAMES} from './Enum.js'\nimport {strlen, sizeof} from './Utility.js'\n\n/**\n * @param {object[]} children\n * @param {function} callback\n * @return {string}\n */\nexport function serialize (children, callback) {\n\tvar output = ''\n\tvar length = sizeof(children)\n\n\tfor (var i = 0; i < length; i++)\n\t\toutput += callback(children[i], i, children, callback) || ''\n\n\treturn output\n}\n\n/**\n * @param {object} element\n * @param {number} index\n * @param {object[]} children\n * @param {function} callback\n * @return {string}\n */\nexport function stringify (element, index, children, callback) {\n\tswitch (element.type) {\n\t\tcase LAYER: if (element.children.length) break\n\t\tcase IMPORT: case DECLARATION: return element.return = element.return || element.value\n\t\tcase COMMENT: return ''\n\t\tcase KEYFRAMES: return element.return = element.value + '{' + serialize(element.children, callback) + '}'\n\t\tcase RULESET: element.value = element.props.join(',')\n\t}\n\n\treturn strlen(children = serialize(element.children, callback)) ? element.return = element.value + '{' + children + '}' : ''\n}\n","import {MS, MOZ, WEBKIT, RULESET, KEYFRAMES, DECLARATION} from './Enum.js'\nimport {match, charat, substr, strlen, sizeof, replace, combine} from './Utility.js'\nimport {copy, tokenize} from './Tokenizer.js'\nimport {serialize} from './Serializer.js'\nimport {prefix} from './Prefixer.js'\n\n/**\n * @param {function[]} collection\n * @return {function}\n */\nexport function middleware (collection) {\n\tvar length = sizeof(collection)\n\n\treturn function (element, index, children, callback) {\n\t\tvar output = ''\n\n\t\tfor (var i = 0; i < length; i++)\n\t\t\toutput += collection[i](element, index, children, callback) || ''\n\n\t\treturn output\n\t}\n}\n\n/**\n * @param {function} callback\n * @return {function}\n */\nexport function rulesheet (callback) {\n\treturn function (element) {\n\t\tif (!element.root)\n\t\t\tif (element = element.return)\n\t\t\t\tcallback(element)\n\t}\n}\n\n/**\n * @param {object} element\n * @param {number} index\n * @param {object[]} children\n * @param {function} callback\n */\nexport function prefixer (element, index, children, callback) {\n\tif (element.length > -1)\n\t\tif (!element.return)\n\t\t\tswitch (element.type) {\n\t\t\t\tcase DECLARATION: element.return = prefix(element.value, element.length, children)\n\t\t\t\t\treturn\n\t\t\t\tcase KEYFRAMES:\n\t\t\t\t\treturn serialize([copy(element, {value: replace(element.value, '@', '@' + WEBKIT)})], callback)\n\t\t\t\tcase RULESET:\n\t\t\t\t\tif (element.length)\n\t\t\t\t\t\treturn combine(element.props, function (value) {\n\t\t\t\t\t\t\tswitch (match(value, /(::plac\\w+|:read-\\w+)/)) {\n\t\t\t\t\t\t\t\t// :read-(only|write)\n\t\t\t\t\t\t\t\tcase ':read-only': case ':read-write':\n\t\t\t\t\t\t\t\t\treturn serialize([copy(element, {props: [replace(value, /:(read-\\w+)/, ':' + MOZ + '$1')]})], callback)\n\t\t\t\t\t\t\t\t// :placeholder\n\t\t\t\t\t\t\t\tcase '::placeholder':\n\t\t\t\t\t\t\t\t\treturn serialize([\n\t\t\t\t\t\t\t\t\t\tcopy(element, {props: [replace(value, /:(plac\\w+)/, ':' + WEBKIT + 'input-$1')]}),\n\t\t\t\t\t\t\t\t\t\tcopy(element, {props: [replace(value, /:(plac\\w+)/, ':' + MOZ + '$1')]}),\n\t\t\t\t\t\t\t\t\t\tcopy(element, {props: [replace(value, /:(plac\\w+)/, MS + 'input-$1')]})\n\t\t\t\t\t\t\t\t\t], callback)\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn ''\n\t\t\t\t\t\t})\n\t\t\t}\n}\n\n/**\n * @param {object} element\n * @param {number} index\n * @param {object[]} children\n */\nexport function namespace (element) {\n\tswitch (element.type) {\n\t\tcase RULESET:\n\t\t\telement.props = element.props.map(function (value) {\n\t\t\t\treturn combine(tokenize(value), function (value, index, children) {\n\t\t\t\t\tswitch (charat(value, 0)) {\n\t\t\t\t\t\t// \\f\n\t\t\t\t\t\tcase 12:\n\t\t\t\t\t\t\treturn substr(value, 1, strlen(value))\n\t\t\t\t\t\t// \\0 ( + > ~\n\t\t\t\t\t\tcase 0: case 40: case 43: case 62: case 126:\n\t\t\t\t\t\t\treturn value\n\t\t\t\t\t\t// :\n\t\t\t\t\t\tcase 58:\n\t\t\t\t\t\t\tif (children[++index] === 'global')\n\t\t\t\t\t\t\t\tchildren[index] = '', children[++index] = '\\f' + substr(children[index], index = 1, -1)\n\t\t\t\t\t\t// \\s\n\t\t\t\t\t\tcase 32:\n\t\t\t\t\t\t\treturn index === 1 ? '' : value\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\tswitch (index) {\n\t\t\t\t\t\t\t\tcase 0: element = value\n\t\t\t\t\t\t\t\t\treturn sizeof(children) > 1 ? '' : value\n\t\t\t\t\t\t\t\tcase index = sizeof(children) - 1: case 2:\n\t\t\t\t\t\t\t\t\treturn index === 2 ? value + element + element : value + element\n\t\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\treturn value\n\t\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t})\n\t}\n}\n","function memoize(fn) {\n var cache = Object.create(null);\n return function (arg) {\n if (cache[arg] === undefined) cache[arg] = fn(arg);\n return cache[arg];\n };\n}\n\nexport { memoize as default };\n","import { StyleSheet } from '@emotion/sheet';\nimport { dealloc, alloc, next, token, from, peek, delimit, slice, position, RULESET, combine, match, serialize, copy, replace, WEBKIT, MOZ, MS, KEYFRAMES, DECLARATION, hash, charat, strlen, indexof, stringify, rulesheet, middleware, compile } from 'stylis';\nimport '@emotion/weak-memoize';\nimport '@emotion/memoize';\n\nvar identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {\n var previous = 0;\n var character = 0;\n\n while (true) {\n previous = character;\n character = peek(); // &\\f\n\n if (previous === 38 && character === 12) {\n points[index] = 1;\n }\n\n if (token(character)) {\n break;\n }\n\n next();\n }\n\n return slice(begin, position);\n};\n\nvar toRules = function toRules(parsed, points) {\n // pretend we've started with a comma\n var index = -1;\n var character = 44;\n\n do {\n switch (token(character)) {\n case 0:\n // &\\f\n if (character === 38 && peek() === 12) {\n // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings\n // stylis inserts \\f after & to know when & where it should replace this sequence with the context selector\n // and when it should just concatenate the outer and inner selectors\n // it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here\n points[index] = 1;\n }\n\n parsed[index] += identifierWithPointTracking(position - 1, points, index);\n break;\n\n case 2:\n parsed[index] += delimit(character);\n break;\n\n case 4:\n // comma\n if (character === 44) {\n // colon\n parsed[++index] = peek() === 58 ? '&\\f' : '';\n points[index] = parsed[index].length;\n break;\n }\n\n // fallthrough\n\n default:\n parsed[index] += from(character);\n }\n } while (character = next());\n\n return parsed;\n};\n\nvar getRules = function getRules(value, points) {\n return dealloc(toRules(alloc(value), points));\n}; // WeakSet would be more appropriate, but only WeakMap is supported in IE11\n\n\nvar fixedElements = /* #__PURE__ */new WeakMap();\nvar compat = function compat(element) {\n if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo\n // negative .length indicates that this rule has been already prefixed\n element.length < 1) {\n return;\n }\n\n var value = element.value;\n var parent = element.parent;\n var isImplicitRule = element.column === parent.column && element.line === parent.line;\n\n while (parent.type !== 'rule') {\n parent = parent.parent;\n if (!parent) return;\n } // short-circuit for the simplest case\n\n\n if (element.props.length === 1 && value.charCodeAt(0) !== 58\n /* colon */\n && !fixedElements.get(parent)) {\n return;\n } // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)\n // then the props has already been manipulated beforehand as they that array is shared between it and its \"rule parent\"\n\n\n if (isImplicitRule) {\n return;\n }\n\n fixedElements.set(element, true);\n var points = [];\n var rules = getRules(value, points);\n var parentRules = parent.props;\n\n for (var i = 0, k = 0; i < rules.length; i++) {\n for (var j = 0; j < parentRules.length; j++, k++) {\n element.props[k] = points[i] ? rules[i].replace(/&\\f/g, parentRules[j]) : parentRules[j] + \" \" + rules[i];\n }\n }\n};\nvar removeLabel = function removeLabel(element) {\n if (element.type === 'decl') {\n var value = element.value;\n\n if ( // charcode for l\n value.charCodeAt(0) === 108 && // charcode for b\n value.charCodeAt(2) === 98) {\n // this ignores label\n element[\"return\"] = '';\n element.value = '';\n }\n }\n};\n\n/* eslint-disable no-fallthrough */\n\nfunction prefix(value, length) {\n switch (hash(value, length)) {\n // color-adjust\n case 5103:\n return WEBKIT + 'print-' + value + value;\n // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)\n\n case 5737:\n case 4201:\n case 3177:\n case 3433:\n case 1641:\n case 4457:\n case 2921: // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break\n\n case 5572:\n case 6356:\n case 5844:\n case 3191:\n case 6645:\n case 3005: // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,\n\n case 6391:\n case 5879:\n case 5623:\n case 6135:\n case 4599:\n case 4855: // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)\n\n case 4215:\n case 6389:\n case 5109:\n case 5365:\n case 5621:\n case 3829:\n return WEBKIT + value + value;\n // appearance, user-select, transform, hyphens, text-size-adjust\n\n case 5349:\n case 4246:\n case 4810:\n case 6968:\n case 2756:\n return WEBKIT + value + MOZ + value + MS + value + value;\n // flex, flex-direction\n\n case 6828:\n case 4268:\n return WEBKIT + value + MS + value + value;\n // order\n\n case 6165:\n return WEBKIT + value + MS + 'flex-' + value + value;\n // align-items\n\n case 5187:\n return WEBKIT + value + replace(value, /(\\w+).+(:[^]+)/, WEBKIT + 'box-$1$2' + MS + 'flex-$1$2') + value;\n // align-self\n\n case 5443:\n return WEBKIT + value + MS + 'flex-item-' + replace(value, /flex-|-self/, '') + value;\n // align-content\n\n case 4675:\n return WEBKIT + value + MS + 'flex-line-pack' + replace(value, /align-content|flex-|-self/, '') + value;\n // flex-shrink\n\n case 5548:\n return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value;\n // flex-basis\n\n case 5292:\n return WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value;\n // flex-grow\n\n case 6060:\n return WEBKIT + 'box-' + replace(value, '-grow', '') + WEBKIT + value + MS + replace(value, 'grow', 'positive') + value;\n // transition\n\n case 4554:\n return WEBKIT + replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') + value;\n // cursor\n\n case 6187:\n return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + '$1'), /(image-set)/, WEBKIT + '$1'), value, '') + value;\n // background, background-image\n\n case 5495:\n case 3959:\n return replace(value, /(image-set\\([^]*)/, WEBKIT + '$1' + '$`$1');\n // justify-content\n\n case 4968:\n return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + WEBKIT + value + value;\n // (margin|padding)-inline-(start|end)\n\n case 4095:\n case 3583:\n case 4068:\n case 2532:\n return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value;\n // (min|max)?(width|height|inline-size|block-size)\n\n case 8116:\n case 7059:\n case 5753:\n case 5535:\n case 5445:\n case 5701:\n case 4933:\n case 4677:\n case 5533:\n case 5789:\n case 5021:\n case 4765:\n // stretch, max-content, min-content, fill-available\n if (strlen(value) - 1 - length > 6) switch (charat(value, length + 1)) {\n // (m)ax-content, (m)in-content\n case 109:\n // -\n if (charat(value, length + 4) !== 45) break;\n // (f)ill-available, (f)it-content\n\n case 102:\n return replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;\n // (s)tretch\n\n case 115:\n return ~indexof(value, 'stretch') ? prefix(replace(value, 'stretch', 'fill-available'), length) + value : value;\n }\n break;\n // position: sticky\n\n case 4949:\n // (s)ticky?\n if (charat(value, length + 1) !== 115) break;\n // display: (flex|inline-flex)\n\n case 6444:\n switch (charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))) {\n // stic(k)y\n case 107:\n return replace(value, ':', ':' + WEBKIT) + value;\n // (inline-)?fl(e)x\n\n case 101:\n return replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + WEBKIT + (charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value;\n }\n\n break;\n // writing-mode\n\n case 5936:\n switch (charat(value, length + 11)) {\n // vertical-l(r)\n case 114:\n return WEBKIT + value + MS + replace(value, /[svh]\\w+-[tblr]{2}/, 'tb') + value;\n // vertical-r(l)\n\n case 108:\n return WEBKIT + value + MS + replace(value, /[svh]\\w+-[tblr]{2}/, 'tb-rl') + value;\n // horizontal(-)tb\n\n case 45:\n return WEBKIT + value + MS + replace(value, /[svh]\\w+-[tblr]{2}/, 'lr') + value;\n }\n\n return WEBKIT + value + MS + value + value;\n }\n\n return value;\n}\n\nvar prefixer = function prefixer(element, index, children, callback) {\n if (element.length > -1) if (!element[\"return\"]) switch (element.type) {\n case DECLARATION:\n element[\"return\"] = prefix(element.value, element.length);\n break;\n\n case KEYFRAMES:\n return serialize([copy(element, {\n value: replace(element.value, '@', '@' + WEBKIT)\n })], callback);\n\n case RULESET:\n if (element.length) return combine(element.props, function (value) {\n switch (match(value, /(::plac\\w+|:read-\\w+)/)) {\n // :read-(only|write)\n case ':read-only':\n case ':read-write':\n return serialize([copy(element, {\n props: [replace(value, /:(read-\\w+)/, ':' + MOZ + '$1')]\n })], callback);\n // :placeholder\n\n case '::placeholder':\n return serialize([copy(element, {\n props: [replace(value, /:(plac\\w+)/, ':' + WEBKIT + 'input-$1')]\n }), copy(element, {\n props: [replace(value, /:(plac\\w+)/, ':' + MOZ + '$1')]\n }), copy(element, {\n props: [replace(value, /:(plac\\w+)/, MS + 'input-$1')]\n })], callback);\n }\n\n return '';\n });\n }\n};\n\nvar defaultStylisPlugins = [prefixer];\n\nvar createCache = function createCache(options) {\n var key = options.key;\n\n if (key === 'css') {\n var ssrStyles = document.querySelectorAll(\"style[data-emotion]:not([data-s])\"); // get SSRed styles out of the way of React's hydration\n // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)\n // note this very very intentionally targets all style elements regardless of the key to ensure\n // that creating a cache works inside of render of a React component\n\n Array.prototype.forEach.call(ssrStyles, function (node) {\n // we want to only move elements which have a space in the data-emotion attribute value\n // because that indicates that it is an Emotion 11 server-side rendered style elements\n // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector\n // Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)\n // so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles\n // will not result in the Emotion 10 styles being destroyed\n var dataEmotionAttribute = node.getAttribute('data-emotion');\n\n if (dataEmotionAttribute.indexOf(' ') === -1) {\n return;\n }\n\n document.head.appendChild(node);\n node.setAttribute('data-s', '');\n });\n }\n\n var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;\n\n var inserted = {};\n var container;\n var nodesToHydrate = [];\n\n {\n container = options.container || document.head;\n Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which\n // means that the style elements we're looking at are only Emotion 11 server-rendered style elements\n document.querySelectorAll(\"style[data-emotion^=\\\"\" + key + \" \\\"]\"), function (node) {\n var attrib = node.getAttribute(\"data-emotion\").split(' ');\n\n for (var i = 1; i < attrib.length; i++) {\n inserted[attrib[i]] = true;\n }\n\n nodesToHydrate.push(node);\n });\n }\n\n var _insert;\n\n var omnipresentPlugins = [compat, removeLabel];\n\n {\n var currentSheet;\n var finalizingPlugins = [stringify, rulesheet(function (rule) {\n currentSheet.insert(rule);\n })];\n var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));\n\n var stylis = function stylis(styles) {\n return serialize(compile(styles), serializer);\n };\n\n _insert = function insert(selector, serialized, sheet, shouldCache) {\n currentSheet = sheet;\n\n stylis(selector ? selector + \"{\" + serialized.styles + \"}\" : serialized.styles);\n\n if (shouldCache) {\n cache.inserted[serialized.name] = true;\n }\n };\n }\n\n var cache = {\n key: key,\n sheet: new StyleSheet({\n key: key,\n container: container,\n nonce: options.nonce,\n speedy: options.speedy,\n prepend: options.prepend,\n insertionPoint: options.insertionPoint\n }),\n nonce: options.nonce,\n inserted: inserted,\n registered: {},\n insert: _insert\n };\n cache.sheet.hydrate(nodesToHydrate);\n return cache;\n};\n\nexport { createCache as default };\n","/** @license React v16.13.1\n * react-is.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';var b=\"function\"===typeof Symbol&&Symbol.for,c=b?Symbol.for(\"react.element\"):60103,d=b?Symbol.for(\"react.portal\"):60106,e=b?Symbol.for(\"react.fragment\"):60107,f=b?Symbol.for(\"react.strict_mode\"):60108,g=b?Symbol.for(\"react.profiler\"):60114,h=b?Symbol.for(\"react.provider\"):60109,k=b?Symbol.for(\"react.context\"):60110,l=b?Symbol.for(\"react.async_mode\"):60111,m=b?Symbol.for(\"react.concurrent_mode\"):60111,n=b?Symbol.for(\"react.forward_ref\"):60112,p=b?Symbol.for(\"react.suspense\"):60113,q=b?\nSymbol.for(\"react.suspense_list\"):60120,r=b?Symbol.for(\"react.memo\"):60115,t=b?Symbol.for(\"react.lazy\"):60116,v=b?Symbol.for(\"react.block\"):60121,w=b?Symbol.for(\"react.fundamental\"):60117,x=b?Symbol.for(\"react.responder\"):60118,y=b?Symbol.for(\"react.scope\"):60119;\nfunction z(a){if(\"object\"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;exports.Fragment=e;exports.Lazy=t;exports.Memo=r;exports.Portal=d;\nexports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;exports.isAsyncMode=function(a){return A(a)||z(a)===l};exports.isConcurrentMode=A;exports.isContextConsumer=function(a){return z(a)===k};exports.isContextProvider=function(a){return z(a)===h};exports.isElement=function(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return z(a)===n};exports.isFragment=function(a){return z(a)===e};exports.isLazy=function(a){return z(a)===t};\nexports.isMemo=function(a){return z(a)===r};exports.isPortal=function(a){return z(a)===d};exports.isProfiler=function(a){return z(a)===g};exports.isStrictMode=function(a){return z(a)===f};exports.isSuspense=function(a){return z(a)===p};\nexports.isValidElementType=function(a){return\"string\"===typeof a||\"function\"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||\"object\"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};exports.typeOf=z;\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-is.production.min.js');\n} else {\n module.exports = require('./cjs/react-is.development.js');\n}\n","'use strict';\n\nvar reactIs = require('react-is');\n\n/**\n * Copyright 2015, Yahoo! Inc.\n * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.\n */\nvar REACT_STATICS = {\n childContextTypes: true,\n contextType: true,\n contextTypes: true,\n defaultProps: true,\n displayName: true,\n getDefaultProps: true,\n getDerivedStateFromError: true,\n getDerivedStateFromProps: true,\n mixins: true,\n propTypes: true,\n type: true\n};\nvar KNOWN_STATICS = {\n name: true,\n length: true,\n prototype: true,\n caller: true,\n callee: true,\n arguments: true,\n arity: true\n};\nvar FORWARD_REF_STATICS = {\n '$$typeof': true,\n render: true,\n defaultProps: true,\n displayName: true,\n propTypes: true\n};\nvar MEMO_STATICS = {\n '$$typeof': true,\n compare: true,\n defaultProps: true,\n displayName: true,\n propTypes: true,\n type: true\n};\nvar TYPE_STATICS = {};\nTYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;\nTYPE_STATICS[reactIs.Memo] = MEMO_STATICS;\n\nfunction getStatics(component) {\n // React v16.11 and below\n if (reactIs.isMemo(component)) {\n return MEMO_STATICS;\n } // React v16.12 and above\n\n\n return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;\n}\n\nvar defineProperty = Object.defineProperty;\nvar getOwnPropertyNames = Object.getOwnPropertyNames;\nvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\nvar getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;\nvar getPrototypeOf = Object.getPrototypeOf;\nvar objectPrototype = Object.prototype;\nfunction hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {\n if (typeof sourceComponent !== 'string') {\n // don't hoist over string (html) components\n if (objectPrototype) {\n var inheritedComponent = getPrototypeOf(sourceComponent);\n\n if (inheritedComponent && inheritedComponent !== objectPrototype) {\n hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);\n }\n }\n\n var keys = getOwnPropertyNames(sourceComponent);\n\n if (getOwnPropertySymbols) {\n keys = keys.concat(getOwnPropertySymbols(sourceComponent));\n }\n\n var targetStatics = getStatics(targetComponent);\n var sourceStatics = getStatics(sourceComponent);\n\n for (var i = 0; i < keys.length; ++i) {\n var key = keys[i];\n\n if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {\n var descriptor = getOwnPropertyDescriptor(sourceComponent, key);\n\n try {\n // Avoid failures from read-only properties\n defineProperty(targetComponent, key, descriptor);\n } catch (e) {}\n }\n }\n }\n\n return targetComponent;\n}\n\nmodule.exports = hoistNonReactStatics;\n","var isBrowser = true;\n\nfunction getRegisteredStyles(registered, registeredStyles, classNames) {\n var rawClassName = '';\n classNames.split(' ').forEach(function (className) {\n if (registered[className] !== undefined) {\n registeredStyles.push(registered[className] + \";\");\n } else if (className) {\n rawClassName += className + \" \";\n }\n });\n return rawClassName;\n}\nvar registerStyles = function registerStyles(cache, serialized, isStringTag) {\n var className = cache.key + \"-\" + serialized.name;\n\n if ( // we only need to add the styles to the registered cache if the\n // class name could be used further down\n // the tree but if it's a string tag, we know it won't\n // so we don't have to add it to registered cache.\n // this improves memory usage since we can avoid storing the whole style string\n (isStringTag === false || // we need to always store it if we're in compat mode and\n // in node since emotion-server relies on whether a style is in\n // the registered cache to know whether a style is global or not\n // also, note that this check will be dead code eliminated in the browser\n isBrowser === false ) && cache.registered[className] === undefined) {\n cache.registered[className] = serialized.styles;\n }\n};\nvar insertStyles = function insertStyles(cache, serialized, isStringTag) {\n registerStyles(cache, serialized, isStringTag);\n var className = cache.key + \"-\" + serialized.name;\n\n if (cache.inserted[serialized.name] === undefined) {\n var current = serialized;\n\n do {\n cache.insert(serialized === current ? \".\" + className : '', current, cache.sheet, true);\n\n current = current.next;\n } while (current !== undefined);\n }\n};\n\nexport { getRegisteredStyles, insertStyles, registerStyles };\n","/* eslint-disable */\n// Inspired by https://github.com/garycourt/murmurhash-js\n// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86\nfunction murmur2(str) {\n // 'm' and 'r' are mixing constants generated offline.\n // They're not really 'magic', they just happen to work well.\n // const m = 0x5bd1e995;\n // const r = 24;\n // Initialize the hash\n var h = 0; // Mix 4 bytes at a time into the hash\n\n var k,\n i = 0,\n len = str.length;\n\n for (; len >= 4; ++i, len -= 4) {\n k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;\n k =\n /* Math.imul(k, m): */\n (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);\n k ^=\n /* k >>> r: */\n k >>> 24;\n h =\n /* Math.imul(k, m): */\n (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^\n /* Math.imul(h, m): */\n (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);\n } // Handle the last few bytes of the input array\n\n\n switch (len) {\n case 3:\n h ^= (str.charCodeAt(i + 2) & 0xff) << 16;\n\n case 2:\n h ^= (str.charCodeAt(i + 1) & 0xff) << 8;\n\n case 1:\n h ^= str.charCodeAt(i) & 0xff;\n h =\n /* Math.imul(h, m): */\n (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);\n } // Do a few final mixes of the hash to ensure the last few\n // bytes are well-incorporated.\n\n\n h ^= h >>> 13;\n h =\n /* Math.imul(h, m): */\n (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);\n return ((h ^ h >>> 15) >>> 0).toString(36);\n}\n\nexport { murmur2 as default };\n","var unitlessKeys = {\n animationIterationCount: 1,\n aspectRatio: 1,\n borderImageOutset: 1,\n borderImageSlice: 1,\n borderImageWidth: 1,\n boxFlex: 1,\n boxFlexGroup: 1,\n boxOrdinalGroup: 1,\n columnCount: 1,\n columns: 1,\n flex: 1,\n flexGrow: 1,\n flexPositive: 1,\n flexShrink: 1,\n flexNegative: 1,\n flexOrder: 1,\n gridRow: 1,\n gridRowEnd: 1,\n gridRowSpan: 1,\n gridRowStart: 1,\n gridColumn: 1,\n gridColumnEnd: 1,\n gridColumnSpan: 1,\n gridColumnStart: 1,\n msGridRow: 1,\n msGridRowSpan: 1,\n msGridColumn: 1,\n msGridColumnSpan: 1,\n fontWeight: 1,\n lineHeight: 1,\n opacity: 1,\n order: 1,\n orphans: 1,\n scale: 1,\n tabSize: 1,\n widows: 1,\n zIndex: 1,\n zoom: 1,\n WebkitLineClamp: 1,\n // SVG-related properties\n fillOpacity: 1,\n floodOpacity: 1,\n stopOpacity: 1,\n strokeDasharray: 1,\n strokeDashoffset: 1,\n strokeMiterlimit: 1,\n strokeOpacity: 1,\n strokeWidth: 1\n};\n\nexport { unitlessKeys as default };\n","import hashString from '@emotion/hash';\nimport unitless from '@emotion/unitless';\nimport memoize from '@emotion/memoize';\n\nvar isDevelopment = false;\n\nvar hyphenateRegex = /[A-Z]|^ms/g;\nvar animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;\n\nvar isCustomProperty = function isCustomProperty(property) {\n return property.charCodeAt(1) === 45;\n};\n\nvar isProcessableValue = function isProcessableValue(value) {\n return value != null && typeof value !== 'boolean';\n};\n\nvar processStyleName = /* #__PURE__ */memoize(function (styleName) {\n return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();\n});\n\nvar processStyleValue = function processStyleValue(key, value) {\n switch (key) {\n case 'animation':\n case 'animationName':\n {\n if (typeof value === 'string') {\n return value.replace(animationRegex, function (match, p1, p2) {\n cursor = {\n name: p1,\n styles: p2,\n next: cursor\n };\n return p1;\n });\n }\n }\n }\n\n if (unitless[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {\n return value + 'px';\n }\n\n return value;\n};\n\nvar noComponentSelectorMessage = 'Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.';\n\nfunction handleInterpolation(mergedProps, registered, interpolation) {\n if (interpolation == null) {\n return '';\n }\n\n var componentSelector = interpolation;\n\n if (componentSelector.__emotion_styles !== undefined) {\n\n return componentSelector;\n }\n\n switch (typeof interpolation) {\n case 'boolean':\n {\n return '';\n }\n\n case 'object':\n {\n var keyframes = interpolation;\n\n if (keyframes.anim === 1) {\n cursor = {\n name: keyframes.name,\n styles: keyframes.styles,\n next: cursor\n };\n return keyframes.name;\n }\n\n var serializedStyles = interpolation;\n\n if (serializedStyles.styles !== undefined) {\n var next = serializedStyles.next;\n\n if (next !== undefined) {\n // not the most efficient thing ever but this is a pretty rare case\n // and there will be very few iterations of this generally\n while (next !== undefined) {\n cursor = {\n name: next.name,\n styles: next.styles,\n next: cursor\n };\n next = next.next;\n }\n }\n\n var styles = serializedStyles.styles + \";\";\n return styles;\n }\n\n return createStringFromObject(mergedProps, registered, interpolation);\n }\n\n case 'function':\n {\n if (mergedProps !== undefined) {\n var previousCursor = cursor;\n var result = interpolation(mergedProps);\n cursor = previousCursor;\n return handleInterpolation(mergedProps, registered, result);\n }\n\n break;\n }\n } // finalize string values (regular strings and functions interpolated into css calls)\n\n\n var asString = interpolation;\n\n if (registered == null) {\n return asString;\n }\n\n var cached = registered[asString];\n return cached !== undefined ? cached : asString;\n}\n\nfunction createStringFromObject(mergedProps, registered, obj) {\n var string = '';\n\n if (Array.isArray(obj)) {\n for (var i = 0; i < obj.length; i++) {\n string += handleInterpolation(mergedProps, registered, obj[i]) + \";\";\n }\n } else {\n for (var key in obj) {\n var value = obj[key];\n\n if (typeof value !== 'object') {\n var asString = value;\n\n if (registered != null && registered[asString] !== undefined) {\n string += key + \"{\" + registered[asString] + \"}\";\n } else if (isProcessableValue(asString)) {\n string += processStyleName(key) + \":\" + processStyleValue(key, asString) + \";\";\n }\n } else {\n if (key === 'NO_COMPONENT_SELECTOR' && isDevelopment) {\n throw new Error(noComponentSelectorMessage);\n }\n\n if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {\n for (var _i = 0; _i < value.length; _i++) {\n if (isProcessableValue(value[_i])) {\n string += processStyleName(key) + \":\" + processStyleValue(key, value[_i]) + \";\";\n }\n }\n } else {\n var interpolated = handleInterpolation(mergedProps, registered, value);\n\n switch (key) {\n case 'animation':\n case 'animationName':\n {\n string += processStyleName(key) + \":\" + interpolated + \";\";\n break;\n }\n\n default:\n {\n\n string += key + \"{\" + interpolated + \"}\";\n }\n }\n }\n }\n }\n }\n\n return string;\n}\n\nvar labelPattern = /label:\\s*([^\\s;{]+)\\s*(;|$)/g; // this is the cursor for keyframes\n// keyframes are stored on the SerializedStyles object as a linked list\n\nvar cursor;\nfunction serializeStyles(args, registered, mergedProps) {\n if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {\n return args[0];\n }\n\n var stringMode = true;\n var styles = '';\n cursor = undefined;\n var strings = args[0];\n\n if (strings == null || strings.raw === undefined) {\n stringMode = false;\n styles += handleInterpolation(mergedProps, registered, strings);\n } else {\n var asTemplateStringsArr = strings;\n\n styles += asTemplateStringsArr[0];\n } // we start at 1 since we've already handled the first arg\n\n\n for (var i = 1; i < args.length; i++) {\n styles += handleInterpolation(mergedProps, registered, args[i]);\n\n if (stringMode) {\n var templateStringsArr = strings;\n\n styles += templateStringsArr[i];\n }\n } // using a global regex with .exec is stateful so lastIndex has to be reset each time\n\n\n labelPattern.lastIndex = 0;\n var identifierName = '';\n var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5\n\n while ((match = labelPattern.exec(styles)) !== null) {\n identifierName += '-' + match[1];\n }\n\n var name = hashString(styles) + identifierName;\n\n return {\n name: name,\n styles: styles,\n next: cursor\n };\n}\n\nexport { serializeStyles };\n","import * as React from 'react';\n\nvar syncFallback = function syncFallback(create) {\n return create();\n};\n\nvar useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : false;\nvar useInsertionEffectAlwaysWithSyncFallback = useInsertionEffect || syncFallback;\nvar useInsertionEffectWithLayoutFallback = useInsertionEffect || React.useLayoutEffect;\n\nexport { useInsertionEffectAlwaysWithSyncFallback, useInsertionEffectWithLayoutFallback };\n","import * as React from 'react';\nimport { useContext, forwardRef } from 'react';\nimport createCache from '@emotion/cache';\nimport _extends from '@babel/runtime/helpers/esm/extends';\nimport weakMemoize from '@emotion/weak-memoize';\nimport hoistNonReactStatics from '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js';\nimport { getRegisteredStyles, registerStyles, insertStyles } from '@emotion/utils';\nimport { serializeStyles } from '@emotion/serialize';\nimport { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\n\nvar isDevelopment = false;\n\nvar EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case\n// because this module is primarily intended for the browser and node\n// but it's also required in react native and similar environments sometimes\n// and we could have a special build just for that\n// but this is much easier and the native packages\n// might use a different theme context in the future anyway\ntypeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({\n key: 'css'\n}) : null);\n\nvar CacheProvider = EmotionCacheContext.Provider;\nvar __unsafe_useEmotionCache = function useEmotionCache() {\n return useContext(EmotionCacheContext);\n};\n\nvar withEmotionCache = function withEmotionCache(func) {\n return /*#__PURE__*/forwardRef(function (props, ref) {\n // the cache will never be null in the browser\n var cache = useContext(EmotionCacheContext);\n return func(props, cache, ref);\n });\n};\n\nvar ThemeContext = /* #__PURE__ */React.createContext({});\n\nvar useTheme = function useTheme() {\n return React.useContext(ThemeContext);\n};\n\nvar getTheme = function getTheme(outerTheme, theme) {\n if (typeof theme === 'function') {\n var mergedTheme = theme(outerTheme);\n\n return mergedTheme;\n }\n\n return _extends({}, outerTheme, theme);\n};\n\nvar createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {\n return weakMemoize(function (theme) {\n return getTheme(outerTheme, theme);\n });\n});\nvar ThemeProvider = function ThemeProvider(props) {\n var theme = React.useContext(ThemeContext);\n\n if (props.theme !== theme) {\n theme = createCacheWithTheme(theme)(props.theme);\n }\n\n return /*#__PURE__*/React.createElement(ThemeContext.Provider, {\n value: theme\n }, props.children);\n};\nfunction withTheme(Component) {\n var componentName = Component.displayName || Component.name || 'Component';\n var WithTheme = /*#__PURE__*/React.forwardRef(function render(props, ref) {\n var theme = React.useContext(ThemeContext);\n return /*#__PURE__*/React.createElement(Component, _extends({\n theme: theme,\n ref: ref\n }, props));\n });\n WithTheme.displayName = \"WithTheme(\" + componentName + \")\";\n return hoistNonReactStatics(WithTheme, Component);\n}\n\nvar hasOwn = {}.hasOwnProperty;\n\nvar typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';\nvar createEmotionProps = function createEmotionProps(type, props) {\n\n var newProps = {};\n\n for (var _key in props) {\n if (hasOwn.call(props, _key)) {\n newProps[_key] = props[_key];\n }\n }\n\n newProps[typePropName] = type; // Runtime labeling is an opt-in feature because:\n\n return newProps;\n};\n\nvar Insertion = function Insertion(_ref) {\n var cache = _ref.cache,\n serialized = _ref.serialized,\n isStringTag = _ref.isStringTag;\n registerStyles(cache, serialized, isStringTag);\n useInsertionEffectAlwaysWithSyncFallback(function () {\n return insertStyles(cache, serialized, isStringTag);\n });\n\n return null;\n};\n\nvar Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {\n var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works\n // not passing the registered cache to serializeStyles because it would\n // make certain babel optimisations not possible\n\n if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {\n cssProp = cache.registered[cssProp];\n }\n\n var WrappedComponent = props[typePropName];\n var registeredStyles = [cssProp];\n var className = '';\n\n if (typeof props.className === 'string') {\n className = getRegisteredStyles(cache.registered, registeredStyles, props.className);\n } else if (props.className != null) {\n className = props.className + \" \";\n }\n\n var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext));\n\n className += cache.key + \"-\" + serialized.name;\n var newProps = {};\n\n for (var _key2 in props) {\n if (hasOwn.call(props, _key2) && _key2 !== 'css' && _key2 !== typePropName && (!isDevelopment )) {\n newProps[_key2] = props[_key2];\n }\n }\n\n newProps.className = className;\n\n if (ref) {\n newProps.ref = ref;\n }\n\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {\n cache: cache,\n serialized: serialized,\n isStringTag: typeof WrappedComponent === 'string'\n }), /*#__PURE__*/React.createElement(WrappedComponent, newProps));\n});\n\nvar Emotion$1 = Emotion;\n\nexport { CacheProvider as C, Emotion$1 as E, ThemeContext as T, __unsafe_useEmotionCache as _, ThemeProvider as a, withTheme as b, createEmotionProps as c, hasOwn as h, isDevelopment as i, useTheme as u, withEmotionCache as w };\n","import { h as hasOwn, E as Emotion, c as createEmotionProps, w as withEmotionCache, T as ThemeContext, i as isDevelopment } from './emotion-element-f0de968e.browser.esm.js';\nexport { C as CacheProvider, T as ThemeContext, a as ThemeProvider, _ as __unsafe_useEmotionCache, u as useTheme, w as withEmotionCache, b as withTheme } from './emotion-element-f0de968e.browser.esm.js';\nimport * as React from 'react';\nimport { insertStyles, registerStyles, getRegisteredStyles } from '@emotion/utils';\nimport { useInsertionEffectWithLayoutFallback, useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\nimport { serializeStyles } from '@emotion/serialize';\nimport '@emotion/cache';\nimport '@babel/runtime/helpers/extends';\nimport '@emotion/weak-memoize';\nimport '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js';\nimport 'hoist-non-react-statics';\n\nvar jsx = function jsx(type, props) {\n // eslint-disable-next-line prefer-rest-params\n var args = arguments;\n\n if (props == null || !hasOwn.call(props, 'css')) {\n return React.createElement.apply(undefined, args);\n }\n\n var argsLength = args.length;\n var createElementArgArray = new Array(argsLength);\n createElementArgArray[0] = Emotion;\n createElementArgArray[1] = createEmotionProps(type, props);\n\n for (var i = 2; i < argsLength; i++) {\n createElementArgArray[i] = args[i];\n }\n\n return React.createElement.apply(null, createElementArgArray);\n};\n\n(function (_jsx) {\n var JSX;\n\n (function (_JSX) {})(JSX || (JSX = _jsx.JSX || (_jsx.JSX = {})));\n})(jsx || (jsx = {}));\n\n// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild\n// initial client-side render from SSR, use place of hydrating tag\n\nvar Global = /* #__PURE__ */withEmotionCache(function (props, cache) {\n\n var styles = props.styles;\n var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext));\n // but it is based on a constant that will never change at runtime\n // it's effectively like having two implementations and switching them out\n // so it's not actually breaking anything\n\n\n var sheetRef = React.useRef();\n useInsertionEffectWithLayoutFallback(function () {\n var key = cache.key + \"-global\"; // use case of https://github.com/emotion-js/emotion/issues/2675\n\n var sheet = new cache.sheet.constructor({\n key: key,\n nonce: cache.sheet.nonce,\n container: cache.sheet.container,\n speedy: cache.sheet.isSpeedy\n });\n var rehydrating = false;\n var node = document.querySelector(\"style[data-emotion=\\\"\" + key + \" \" + serialized.name + \"\\\"]\");\n\n if (cache.sheet.tags.length) {\n sheet.before = cache.sheet.tags[0];\n }\n\n if (node !== null) {\n rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other s\n\n node.setAttribute('data-emotion', key);\n sheet.hydrate([node]);\n }\n\n sheetRef.current = [sheet, rehydrating];\n return function () {\n sheet.flush();\n };\n }, [cache]);\n useInsertionEffectWithLayoutFallback(function () {\n var sheetRefCurrent = sheetRef.current;\n var sheet = sheetRefCurrent[0],\n rehydrating = sheetRefCurrent[1];\n\n if (rehydrating) {\n sheetRefCurrent[1] = false;\n return;\n }\n\n if (serialized.next !== undefined) {\n // insert keyframes\n insertStyles(cache, serialized.next, true);\n }\n\n if (sheet.tags.length) {\n // if this doesn't exist then it will be null so the style element will be appended\n var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;\n sheet.before = element;\n sheet.flush();\n }\n\n cache.insert(\"\", serialized, sheet, false);\n }, [cache, serialized.name]);\n return null;\n});\n\nfunction css() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return serializeStyles(args);\n}\n\nfunction keyframes() {\n var insertable = css.apply(void 0, arguments);\n var name = \"animation-\" + insertable.name;\n return {\n name: name,\n styles: \"@keyframes \" + name + \"{\" + insertable.styles + \"}\",\n anim: 1,\n toString: function toString() {\n return \"_EMO_\" + this.name + \"_\" + this.styles + \"_EMO_\";\n }\n };\n}\n\nvar classnames = function classnames(args) {\n var len = args.length;\n var i = 0;\n var cls = '';\n\n for (; i < len; i++) {\n var arg = args[i];\n if (arg == null) continue;\n var toAdd = void 0;\n\n switch (typeof arg) {\n case 'boolean':\n break;\n\n case 'object':\n {\n if (Array.isArray(arg)) {\n toAdd = classnames(arg);\n } else {\n\n toAdd = '';\n\n for (var k in arg) {\n if (arg[k] && k) {\n toAdd && (toAdd += ' ');\n toAdd += k;\n }\n }\n }\n\n break;\n }\n\n default:\n {\n toAdd = arg;\n }\n }\n\n if (toAdd) {\n cls && (cls += ' ');\n cls += toAdd;\n }\n }\n\n return cls;\n};\n\nfunction merge(registered, css, className) {\n var registeredStyles = [];\n var rawClassName = getRegisteredStyles(registered, registeredStyles, className);\n\n if (registeredStyles.length < 2) {\n return className;\n }\n\n return rawClassName + css(registeredStyles);\n}\n\nvar Insertion = function Insertion(_ref) {\n var cache = _ref.cache,\n serializedArr = _ref.serializedArr;\n useInsertionEffectAlwaysWithSyncFallback(function () {\n\n for (var i = 0; i < serializedArr.length; i++) {\n insertStyles(cache, serializedArr[i], false);\n }\n });\n\n return null;\n};\n\nvar ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {\n var hasRendered = false;\n var serializedArr = [];\n\n var css = function css() {\n if (hasRendered && isDevelopment) {\n throw new Error('css can only be used during render');\n }\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n var serialized = serializeStyles(args, cache.registered);\n serializedArr.push(serialized); // registration has to happen here as the result of this might get consumed by `cx`\n\n registerStyles(cache, serialized, false);\n return cache.key + \"-\" + serialized.name;\n };\n\n var cx = function cx() {\n if (hasRendered && isDevelopment) {\n throw new Error('cx can only be used during render');\n }\n\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n return merge(cache.registered, css, classnames(args));\n };\n\n var content = {\n css: css,\n cx: cx,\n theme: React.useContext(ThemeContext)\n };\n var ele = props.children(content);\n hasRendered = true;\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {\n cache: cache,\n serializedArr: serializedArr\n }), ele);\n});\n\nexport { ClassNames, Global, jsx as createElement, css, jsx, keyframes };\n","function _taggedTemplateLiteral(e, t) {\n return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {\n raw: {\n value: Object.freeze(t)\n }\n }));\n}\nexport { _taggedTemplateLiteral as default };","/**\n * Custom positioning reference element.\n * @see https://floating-ui.com/docs/virtual-elements\n */\n\nconst sides = ['top', 'right', 'bottom', 'left'];\nconst alignments = ['start', 'end'];\nconst placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + \"-\" + alignments[0], side + \"-\" + alignments[1]), []);\nconst min = Math.min;\nconst max = Math.max;\nconst round = Math.round;\nconst floor = Math.floor;\nconst createCoords = v => ({\n x: v,\n y: v\n});\nconst oppositeSideMap = {\n left: 'right',\n right: 'left',\n bottom: 'top',\n top: 'bottom'\n};\nconst oppositeAlignmentMap = {\n start: 'end',\n end: 'start'\n};\nfunction clamp(start, value, end) {\n return max(start, min(value, end));\n}\nfunction evaluate(value, param) {\n return typeof value === 'function' ? value(param) : value;\n}\nfunction getSide(placement) {\n return placement.split('-')[0];\n}\nfunction getAlignment(placement) {\n return placement.split('-')[1];\n}\nfunction getOppositeAxis(axis) {\n return axis === 'x' ? 'y' : 'x';\n}\nfunction getAxisLength(axis) {\n return axis === 'y' ? 'height' : 'width';\n}\nconst yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);\nfunction getSideAxis(placement) {\n return yAxisSides.has(getSide(placement)) ? 'y' : 'x';\n}\nfunction getAlignmentAxis(placement) {\n return getOppositeAxis(getSideAxis(placement));\n}\nfunction getAlignmentSides(placement, rects, rtl) {\n if (rtl === void 0) {\n rtl = false;\n }\n const alignment = getAlignment(placement);\n const alignmentAxis = getAlignmentAxis(placement);\n const length = getAxisLength(alignmentAxis);\n let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';\n if (rects.reference[length] > rects.floating[length]) {\n mainAlignmentSide = getOppositePlacement(mainAlignmentSide);\n }\n return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];\n}\nfunction getExpandedPlacements(placement) {\n const oppositePlacement = getOppositePlacement(placement);\n return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];\n}\nfunction getOppositeAlignmentPlacement(placement) {\n return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);\n}\nconst lrPlacement = ['left', 'right'];\nconst rlPlacement = ['right', 'left'];\nconst tbPlacement = ['top', 'bottom'];\nconst btPlacement = ['bottom', 'top'];\nfunction getSideList(side, isStart, rtl) {\n switch (side) {\n case 'top':\n case 'bottom':\n if (rtl) return isStart ? rlPlacement : lrPlacement;\n return isStart ? lrPlacement : rlPlacement;\n case 'left':\n case 'right':\n return isStart ? tbPlacement : btPlacement;\n default:\n return [];\n }\n}\nfunction getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {\n const alignment = getAlignment(placement);\n let list = getSideList(getSide(placement), direction === 'start', rtl);\n if (alignment) {\n list = list.map(side => side + \"-\" + alignment);\n if (flipAlignment) {\n list = list.concat(list.map(getOppositeAlignmentPlacement));\n }\n }\n return list;\n}\nfunction getOppositePlacement(placement) {\n return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);\n}\nfunction expandPaddingObject(padding) {\n return {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n ...padding\n };\n}\nfunction getPaddingObject(padding) {\n return typeof padding !== 'number' ? expandPaddingObject(padding) : {\n top: padding,\n right: padding,\n bottom: padding,\n left: padding\n };\n}\nfunction rectToClientRect(rect) {\n const {\n x,\n y,\n width,\n height\n } = rect;\n return {\n width,\n height,\n top: y,\n left: x,\n right: x + width,\n bottom: y + height,\n x,\n y\n };\n}\n\nexport { alignments, clamp, createCoords, evaluate, expandPaddingObject, floor, getAlignment, getAlignmentAxis, getAlignmentSides, getAxisLength, getExpandedPlacements, getOppositeAlignmentPlacement, getOppositeAxis, getOppositeAxisPlacements, getOppositePlacement, getPaddingObject, getSide, getSideAxis, max, min, placements, rectToClientRect, round, sides };\n","function hasWindow() {\n return typeof window !== 'undefined';\n}\nfunction getNodeName(node) {\n if (isNode(node)) {\n return (node.nodeName || '').toLowerCase();\n }\n // Mocked nodes in testing environments may not be instances of Node. By\n // returning `#document` an infinite loop won't occur.\n // https://github.com/floating-ui/floating-ui/issues/2317\n return '#document';\n}\nfunction getWindow(node) {\n var _node$ownerDocument;\n return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;\n}\nfunction getDocumentElement(node) {\n var _ref;\n return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;\n}\nfunction isNode(value) {\n if (!hasWindow()) {\n return false;\n }\n return value instanceof Node || value instanceof getWindow(value).Node;\n}\nfunction isElement(value) {\n if (!hasWindow()) {\n return false;\n }\n return value instanceof Element || value instanceof getWindow(value).Element;\n}\nfunction isHTMLElement(value) {\n if (!hasWindow()) {\n return false;\n }\n return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;\n}\nfunction isShadowRoot(value) {\n if (!hasWindow() || typeof ShadowRoot === 'undefined') {\n return false;\n }\n return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;\n}\nconst invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);\nfunction isOverflowElement(element) {\n const {\n overflow,\n overflowX,\n overflowY,\n display\n } = getComputedStyle(element);\n return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);\n}\nconst tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);\nfunction isTableElement(element) {\n return tableElements.has(getNodeName(element));\n}\nconst topLayerSelectors = [':popover-open', ':modal'];\nfunction isTopLayer(element) {\n return topLayerSelectors.some(selector => {\n try {\n return element.matches(selector);\n } catch (_e) {\n return false;\n }\n });\n}\nconst transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];\nconst willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];\nconst containValues = ['paint', 'layout', 'strict', 'content'];\nfunction isContainingBlock(elementOrCss) {\n const webkit = isWebKit();\n const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;\n\n // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block\n // https://drafts.csswg.org/css-transforms-2/#individual-transforms\n return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));\n}\nfunction getContainingBlock(element) {\n let currentNode = getParentNode(element);\n while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {\n if (isContainingBlock(currentNode)) {\n return currentNode;\n } else if (isTopLayer(currentNode)) {\n return null;\n }\n currentNode = getParentNode(currentNode);\n }\n return null;\n}\nfunction isWebKit() {\n if (typeof CSS === 'undefined' || !CSS.supports) return false;\n return CSS.supports('-webkit-backdrop-filter', 'none');\n}\nconst lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);\nfunction isLastTraversableNode(node) {\n return lastTraversableNodeNames.has(getNodeName(node));\n}\nfunction getComputedStyle(element) {\n return getWindow(element).getComputedStyle(element);\n}\nfunction getNodeScroll(element) {\n if (isElement(element)) {\n return {\n scrollLeft: element.scrollLeft,\n scrollTop: element.scrollTop\n };\n }\n return {\n scrollLeft: element.scrollX,\n scrollTop: element.scrollY\n };\n}\nfunction getParentNode(node) {\n if (getNodeName(node) === 'html') {\n return node;\n }\n const result =\n // Step into the shadow DOM of the parent of a slotted node.\n node.assignedSlot ||\n // DOM Element detected.\n node.parentNode ||\n // ShadowRoot detected.\n isShadowRoot(node) && node.host ||\n // Fallback.\n getDocumentElement(node);\n return isShadowRoot(result) ? result.host : result;\n}\nfunction getNearestOverflowAncestor(node) {\n const parentNode = getParentNode(node);\n if (isLastTraversableNode(parentNode)) {\n return node.ownerDocument ? node.ownerDocument.body : node.body;\n }\n if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {\n return parentNode;\n }\n return getNearestOverflowAncestor(parentNode);\n}\nfunction getOverflowAncestors(node, list, traverseIframes) {\n var _node$ownerDocument2;\n if (list === void 0) {\n list = [];\n }\n if (traverseIframes === void 0) {\n traverseIframes = true;\n }\n const scrollableAncestor = getNearestOverflowAncestor(node);\n const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);\n const win = getWindow(scrollableAncestor);\n if (isBody) {\n const frameElement = getFrameElement(win);\n return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);\n }\n return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));\n}\nfunction getFrameElement(win) {\n return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;\n}\n\nexport { getComputedStyle, getContainingBlock, getDocumentElement, getFrameElement, getNearestOverflowAncestor, getNodeName, getNodeScroll, getOverflowAncestors, getParentNode, getWindow, isContainingBlock, isElement, isHTMLElement, isLastTraversableNode, isNode, isOverflowElement, isShadowRoot, isTableElement, isTopLayer, isWebKit };\n","import { rectToClientRect, arrow as arrow$1, autoPlacement as autoPlacement$1, detectOverflow as detectOverflow$1, flip as flip$1, hide as hide$1, inline as inline$1, limitShift as limitShift$1, offset as offset$1, shift as shift$1, size as size$1, computePosition as computePosition$1 } from '@floating-ui/core';\nimport { round, createCoords, max, min, floor } from '@floating-ui/utils';\nimport { getComputedStyle as getComputedStyle$1, isHTMLElement, isElement, getWindow, isWebKit, getFrameElement, getNodeScroll, getDocumentElement, isTopLayer, getNodeName, isOverflowElement, getOverflowAncestors, getParentNode, isLastTraversableNode, isContainingBlock, isTableElement, getContainingBlock } from '@floating-ui/utils/dom';\nexport { getOverflowAncestors } from '@floating-ui/utils/dom';\n\nfunction getCssDimensions(element) {\n const css = getComputedStyle$1(element);\n // In testing environments, the `width` and `height` properties are empty\n // strings for SVG elements, returning NaN. Fallback to `0` in this case.\n let width = parseFloat(css.width) || 0;\n let height = parseFloat(css.height) || 0;\n const hasOffset = isHTMLElement(element);\n const offsetWidth = hasOffset ? element.offsetWidth : width;\n const offsetHeight = hasOffset ? element.offsetHeight : height;\n const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;\n if (shouldFallback) {\n width = offsetWidth;\n height = offsetHeight;\n }\n return {\n width,\n height,\n $: shouldFallback\n };\n}\n\nfunction unwrapElement(element) {\n return !isElement(element) ? element.contextElement : element;\n}\n\nfunction getScale(element) {\n const domElement = unwrapElement(element);\n if (!isHTMLElement(domElement)) {\n return createCoords(1);\n }\n const rect = domElement.getBoundingClientRect();\n const {\n width,\n height,\n $\n } = getCssDimensions(domElement);\n let x = ($ ? round(rect.width) : rect.width) / width;\n let y = ($ ? round(rect.height) : rect.height) / height;\n\n // 0, NaN, or Infinity should always fallback to 1.\n\n if (!x || !Number.isFinite(x)) {\n x = 1;\n }\n if (!y || !Number.isFinite(y)) {\n y = 1;\n }\n return {\n x,\n y\n };\n}\n\nconst noOffsets = /*#__PURE__*/createCoords(0);\nfunction getVisualOffsets(element) {\n const win = getWindow(element);\n if (!isWebKit() || !win.visualViewport) {\n return noOffsets;\n }\n return {\n x: win.visualViewport.offsetLeft,\n y: win.visualViewport.offsetTop\n };\n}\nfunction shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {\n if (isFixed === void 0) {\n isFixed = false;\n }\n if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {\n return false;\n }\n return isFixed;\n}\n\nfunction getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {\n if (includeScale === void 0) {\n includeScale = false;\n }\n if (isFixedStrategy === void 0) {\n isFixedStrategy = false;\n }\n const clientRect = element.getBoundingClientRect();\n const domElement = unwrapElement(element);\n let scale = createCoords(1);\n if (includeScale) {\n if (offsetParent) {\n if (isElement(offsetParent)) {\n scale = getScale(offsetParent);\n }\n } else {\n scale = getScale(element);\n }\n }\n const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);\n let x = (clientRect.left + visualOffsets.x) / scale.x;\n let y = (clientRect.top + visualOffsets.y) / scale.y;\n let width = clientRect.width / scale.x;\n let height = clientRect.height / scale.y;\n if (domElement) {\n const win = getWindow(domElement);\n const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;\n let currentWin = win;\n let currentIFrame = getFrameElement(currentWin);\n while (currentIFrame && offsetParent && offsetWin !== currentWin) {\n const iframeScale = getScale(currentIFrame);\n const iframeRect = currentIFrame.getBoundingClientRect();\n const css = getComputedStyle$1(currentIFrame);\n const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;\n const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;\n x *= iframeScale.x;\n y *= iframeScale.y;\n width *= iframeScale.x;\n height *= iframeScale.y;\n x += left;\n y += top;\n currentWin = getWindow(currentIFrame);\n currentIFrame = getFrameElement(currentWin);\n }\n }\n return rectToClientRect({\n width,\n height,\n x,\n y\n });\n}\n\n// If has a CSS width greater than the viewport, then this will be\n// incorrect for RTL.\nfunction getWindowScrollBarX(element, rect) {\n const leftScroll = getNodeScroll(element).scrollLeft;\n if (!rect) {\n return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;\n }\n return rect.left + leftScroll;\n}\n\nfunction getHTMLOffset(documentElement, scroll) {\n const htmlRect = documentElement.getBoundingClientRect();\n const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);\n const y = htmlRect.top + scroll.scrollTop;\n return {\n x,\n y\n };\n}\n\nfunction convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {\n let {\n elements,\n rect,\n offsetParent,\n strategy\n } = _ref;\n const isFixed = strategy === 'fixed';\n const documentElement = getDocumentElement(offsetParent);\n const topLayer = elements ? isTopLayer(elements.floating) : false;\n if (offsetParent === documentElement || topLayer && isFixed) {\n return rect;\n }\n let scroll = {\n scrollLeft: 0,\n scrollTop: 0\n };\n let scale = createCoords(1);\n const offsets = createCoords(0);\n const isOffsetParentAnElement = isHTMLElement(offsetParent);\n if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {\n if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {\n scroll = getNodeScroll(offsetParent);\n }\n if (isHTMLElement(offsetParent)) {\n const offsetRect = getBoundingClientRect(offsetParent);\n scale = getScale(offsetParent);\n offsets.x = offsetRect.x + offsetParent.clientLeft;\n offsets.y = offsetRect.y + offsetParent.clientTop;\n }\n }\n const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);\n return {\n width: rect.width * scale.x,\n height: rect.height * scale.y,\n x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,\n y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y\n };\n}\n\nfunction getClientRects(element) {\n return Array.from(element.getClientRects());\n}\n\n// Gets the entire size of the scrollable document area, even extending outside\n// of the `` and `` rect bounds if horizontally scrollable.\nfunction getDocumentRect(element) {\n const html = getDocumentElement(element);\n const scroll = getNodeScroll(element);\n const body = element.ownerDocument.body;\n const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);\n const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);\n let x = -scroll.scrollLeft + getWindowScrollBarX(element);\n const y = -scroll.scrollTop;\n if (getComputedStyle$1(body).direction === 'rtl') {\n x += max(html.clientWidth, body.clientWidth) - width;\n }\n return {\n width,\n height,\n x,\n y\n };\n}\n\n// Safety check: ensure the scrollbar space is reasonable in case this\n// calculation is affected by unusual styles.\n// Most scrollbars leave 15-18px of space.\nconst SCROLLBAR_MAX = 25;\nfunction getViewportRect(element, strategy) {\n const win = getWindow(element);\n const html = getDocumentElement(element);\n const visualViewport = win.visualViewport;\n let width = html.clientWidth;\n let height = html.clientHeight;\n let x = 0;\n let y = 0;\n if (visualViewport) {\n width = visualViewport.width;\n height = visualViewport.height;\n const visualViewportBased = isWebKit();\n if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {\n x = visualViewport.offsetLeft;\n y = visualViewport.offsetTop;\n }\n }\n const windowScrollbarX = getWindowScrollBarX(html);\n // `overflow: hidden` + `scrollbar-gutter: stable` reduces the\n // visual width of the but this is not considered in the size\n // of `html.clientWidth`.\n if (windowScrollbarX <= 0) {\n const doc = html.ownerDocument;\n const body = doc.body;\n const bodyStyles = getComputedStyle(body);\n const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;\n const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);\n if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {\n width -= clippingStableScrollbarWidth;\n }\n } else if (windowScrollbarX <= SCROLLBAR_MAX) {\n // If the scrollbar is on the left, the width needs to be extended\n // by the scrollbar amount so there isn't extra space on the right.\n width += windowScrollbarX;\n }\n return {\n width,\n height,\n x,\n y\n };\n}\n\nconst absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);\n// Returns the inner client rect, subtracting scrollbars if present.\nfunction getInnerBoundingClientRect(element, strategy) {\n const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');\n const top = clientRect.top + element.clientTop;\n const left = clientRect.left + element.clientLeft;\n const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);\n const width = element.clientWidth * scale.x;\n const height = element.clientHeight * scale.y;\n const x = left * scale.x;\n const y = top * scale.y;\n return {\n width,\n height,\n x,\n y\n };\n}\nfunction getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {\n let rect;\n if (clippingAncestor === 'viewport') {\n rect = getViewportRect(element, strategy);\n } else if (clippingAncestor === 'document') {\n rect = getDocumentRect(getDocumentElement(element));\n } else if (isElement(clippingAncestor)) {\n rect = getInnerBoundingClientRect(clippingAncestor, strategy);\n } else {\n const visualOffsets = getVisualOffsets(element);\n rect = {\n x: clippingAncestor.x - visualOffsets.x,\n y: clippingAncestor.y - visualOffsets.y,\n width: clippingAncestor.width,\n height: clippingAncestor.height\n };\n }\n return rectToClientRect(rect);\n}\nfunction hasFixedPositionAncestor(element, stopNode) {\n const parentNode = getParentNode(element);\n if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {\n return false;\n }\n return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);\n}\n\n// A \"clipping ancestor\" is an `overflow` element with the characteristic of\n// clipping (or hiding) child elements. This returns all clipping ancestors\n// of the given element up the tree.\nfunction getClippingElementAncestors(element, cache) {\n const cachedResult = cache.get(element);\n if (cachedResult) {\n return cachedResult;\n }\n let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');\n let currentContainingBlockComputedStyle = null;\n const elementIsFixed = getComputedStyle$1(element).position === 'fixed';\n let currentNode = elementIsFixed ? getParentNode(element) : element;\n\n // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block\n while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {\n const computedStyle = getComputedStyle$1(currentNode);\n const currentNodeIsContaining = isContainingBlock(currentNode);\n if (!currentNodeIsContaining && computedStyle.position === 'fixed') {\n currentContainingBlockComputedStyle = null;\n }\n const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);\n if (shouldDropCurrentNode) {\n // Drop non-containing blocks.\n result = result.filter(ancestor => ancestor !== currentNode);\n } else {\n // Record last containing block for next iteration.\n currentContainingBlockComputedStyle = computedStyle;\n }\n currentNode = getParentNode(currentNode);\n }\n cache.set(element, result);\n return result;\n}\n\n// Gets the maximum area that the element is visible in due to any number of\n// clipping ancestors.\nfunction getClippingRect(_ref) {\n let {\n element,\n boundary,\n rootBoundary,\n strategy\n } = _ref;\n const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);\n const clippingAncestors = [...elementClippingAncestors, rootBoundary];\n const firstClippingAncestor = clippingAncestors[0];\n const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {\n const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);\n accRect.top = max(rect.top, accRect.top);\n accRect.right = min(rect.right, accRect.right);\n accRect.bottom = min(rect.bottom, accRect.bottom);\n accRect.left = max(rect.left, accRect.left);\n return accRect;\n }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));\n return {\n width: clippingRect.right - clippingRect.left,\n height: clippingRect.bottom - clippingRect.top,\n x: clippingRect.left,\n y: clippingRect.top\n };\n}\n\nfunction getDimensions(element) {\n const {\n width,\n height\n } = getCssDimensions(element);\n return {\n width,\n height\n };\n}\n\nfunction getRectRelativeToOffsetParent(element, offsetParent, strategy) {\n const isOffsetParentAnElement = isHTMLElement(offsetParent);\n const documentElement = getDocumentElement(offsetParent);\n const isFixed = strategy === 'fixed';\n const rect = getBoundingClientRect(element, true, isFixed, offsetParent);\n let scroll = {\n scrollLeft: 0,\n scrollTop: 0\n };\n const offsets = createCoords(0);\n\n // If the scrollbar appears on the left (e.g. RTL systems). Use\n // Firefox with layout.scrollbar.side = 3 in about:config to test this.\n function setLeftRTLScrollbarOffset() {\n offsets.x = getWindowScrollBarX(documentElement);\n }\n if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {\n if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {\n scroll = getNodeScroll(offsetParent);\n }\n if (isOffsetParentAnElement) {\n const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);\n offsets.x = offsetRect.x + offsetParent.clientLeft;\n offsets.y = offsetRect.y + offsetParent.clientTop;\n } else if (documentElement) {\n setLeftRTLScrollbarOffset();\n }\n }\n if (isFixed && !isOffsetParentAnElement && documentElement) {\n setLeftRTLScrollbarOffset();\n }\n const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);\n const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;\n const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;\n return {\n x,\n y,\n width: rect.width,\n height: rect.height\n };\n}\n\nfunction isStaticPositioned(element) {\n return getComputedStyle$1(element).position === 'static';\n}\n\nfunction getTrueOffsetParent(element, polyfill) {\n if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {\n return null;\n }\n if (polyfill) {\n return polyfill(element);\n }\n let rawOffsetParent = element.offsetParent;\n\n // Firefox returns the element as the offsetParent if it's non-static,\n // while Chrome and Safari return the element. The element must\n // be used to perform the correct calculations even if the element is\n // non-static.\n if (getDocumentElement(element) === rawOffsetParent) {\n rawOffsetParent = rawOffsetParent.ownerDocument.body;\n }\n return rawOffsetParent;\n}\n\n// Gets the closest ancestor positioned element. Handles some edge cases,\n// such as table ancestors and cross browser bugs.\nfunction getOffsetParent(element, polyfill) {\n const win = getWindow(element);\n if (isTopLayer(element)) {\n return win;\n }\n if (!isHTMLElement(element)) {\n let svgOffsetParent = getParentNode(element);\n while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {\n if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {\n return svgOffsetParent;\n }\n svgOffsetParent = getParentNode(svgOffsetParent);\n }\n return win;\n }\n let offsetParent = getTrueOffsetParent(element, polyfill);\n while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {\n offsetParent = getTrueOffsetParent(offsetParent, polyfill);\n }\n if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {\n return win;\n }\n return offsetParent || getContainingBlock(element) || win;\n}\n\nconst getElementRects = async function (data) {\n const getOffsetParentFn = this.getOffsetParent || getOffsetParent;\n const getDimensionsFn = this.getDimensions;\n const floatingDimensions = await getDimensionsFn(data.floating);\n return {\n reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),\n floating: {\n x: 0,\n y: 0,\n width: floatingDimensions.width,\n height: floatingDimensions.height\n }\n };\n};\n\nfunction isRTL(element) {\n return getComputedStyle$1(element).direction === 'rtl';\n}\n\nconst platform = {\n convertOffsetParentRelativeRectToViewportRelativeRect,\n getDocumentElement,\n getClippingRect,\n getOffsetParent,\n getElementRects,\n getClientRects,\n getDimensions,\n getScale,\n isElement,\n isRTL\n};\n\nfunction rectsAreEqual(a, b) {\n return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;\n}\n\n// https://samthor.au/2021/observing-dom/\nfunction observeMove(element, onMove) {\n let io = null;\n let timeoutId;\n const root = getDocumentElement(element);\n function cleanup() {\n var _io;\n clearTimeout(timeoutId);\n (_io = io) == null || _io.disconnect();\n io = null;\n }\n function refresh(skip, threshold) {\n if (skip === void 0) {\n skip = false;\n }\n if (threshold === void 0) {\n threshold = 1;\n }\n cleanup();\n const elementRectForRootMargin = element.getBoundingClientRect();\n const {\n left,\n top,\n width,\n height\n } = elementRectForRootMargin;\n if (!skip) {\n onMove();\n }\n if (!width || !height) {\n return;\n }\n const insetTop = floor(top);\n const insetRight = floor(root.clientWidth - (left + width));\n const insetBottom = floor(root.clientHeight - (top + height));\n const insetLeft = floor(left);\n const rootMargin = -insetTop + \"px \" + -insetRight + \"px \" + -insetBottom + \"px \" + -insetLeft + \"px\";\n const options = {\n rootMargin,\n threshold: max(0, min(1, threshold)) || 1\n };\n let isFirstUpdate = true;\n function handleObserve(entries) {\n const ratio = entries[0].intersectionRatio;\n if (ratio !== threshold) {\n if (!isFirstUpdate) {\n return refresh();\n }\n if (!ratio) {\n // If the reference is clipped, the ratio is 0. Throttle the refresh\n // to prevent an infinite loop of updates.\n timeoutId = setTimeout(() => {\n refresh(false, 1e-7);\n }, 1000);\n } else {\n refresh(false, ratio);\n }\n }\n if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {\n // It's possible that even though the ratio is reported as 1, the\n // element is not actually fully within the IntersectionObserver's root\n // area anymore. This can happen under performance constraints. This may\n // be a bug in the browser's IntersectionObserver implementation. To\n // work around this, we compare the element's bounding rect now with\n // what it was at the time we created the IntersectionObserver. If they\n // are not equal then the element moved, so we refresh.\n refresh();\n }\n isFirstUpdate = false;\n }\n\n // Older browsers don't support a `document` as the root and will throw an\n // error.\n try {\n io = new IntersectionObserver(handleObserve, {\n ...options,\n // Handle