@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Header.css

@@ -0,0 +1,274 @@
+/* Header / left navigation styles (moved into package) */
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  box-sizing: content-box;
+  background: var(--color-deepWhite);
+  border-left: 1px solid var(--color-whiteLine);
+  border-right: 1px solid var(--color-whiteLine);
+  z-index: var(--z-sidebar);
+  /* Prevent header from scrolling or causing scroll chaining */
+  overflow: visible;
+  overscroll-behavior: none;
+  isolation: isolate;
+}
+
+
+.header__menu-button {
+  display: none;
+  background: transparent;
+  border: none;
+}
+
+.header__bottom {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 56px;
+  background: var(--color-deepWhite);
+  border-top: 1px solid var(--color-whiteLine);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  padding-bottom: calc(var(--spacing-content) + env(safe-area-inset-bottom));
+}
+
+.header__category-button {
+  background: transparent;
+  border: none;
+}
+
+/* 그라데이션 오버레이 — opacity로 부드럽게 전환 */
+.header::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(160deg, var(--color-main) 0%, var(--color-sub) 100%);
+  opacity: 0;
+  transition: opacity 200ms ease;
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* 말귀매니저 모드 — 사이드바 배경 & 텍스트 */
+.header--manager {
+  border-right-color: rgba(255,255,255,0.2);
+}
+.header--manager::before {
+  opacity: 1;
+}
+
+/* 구분선 */
+.header--manager .side-nav__separator {
+  background: rgba(255,255,255,0.25);
+}
+
+/* 메뉴 아이템 기본 */
+.header--manager .side-nav__item {
+  color: var(--color-deepWhite);
+}
+.header--manager .side-nav__icon {
+  color: var(--color-deepWhite);
+}
+
+/* 호버 */
+.header--manager .side-nav__item:hover:not(.active),
+.header--manager .side-nav__item:focus:not(.active) {
+  background: rgba(255,255,255,0.15);
+  color: #ffffff;
+}
+.header--manager .side-nav__item:hover:not(.active) .side-nav__icon,
+.header--manager .side-nav__item:focus:not(.active) .side-nav__icon {
+  color: #ffffff;
+}
+
+/* 활성(선택): 흰색 sweep + darkGray 텍스트·lightGray 아이콘 */
+.header--manager .side-nav__item.active {
+  background: linear-gradient(90deg, var(--color-pureWhite) 50%, color-mix(in srgb, var(--color-main) 50%, white) 100%);
+  background-size: 200% 100%;
+  background-position: 0% 0;
+  color: var(--color-darkGray);
+  box-shadow: var(--shadow-card);
+  animation: ihabCoreSnSweep 1000ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+.header--manager .side-nav__item.active .side-nav__icon {
+  color: var(--color-lightGray);
+  animation: ihabCoreSnIconBounce 480ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+.header--manager .side-nav__item.active .side-nav__icon img {
+  filter: none;
+  opacity: 1;
+}
+
+/* footer 아이콘 버튼들 */
+.header--manager .side-nav__footer button,
+.header--manager .side-nav__footer [role="button"] {
+  color: rgba(255,255,255,0.55);
+}
+
+/* 전환 버튼 */
+.header--manager .side-nav__mode-switch {
+  border-color: rgba(255,255,255,0.2);
+  background: transparent;
+}
+.header--manager .side-nav__mode-switch:hover {
+  background: rgba(255,255,255,0.12);
+  border-color: rgba(255,255,255,0.35);
+}
+.header--manager .side-nav__mode-switch-label {
+  color: rgba(255,255,255,0.7);
+}
+.header--manager .side-nav__mode-switch-arrow {
+  color: rgba(255,255,255,0.35);
+}
+
+/* Desktop: width 220px */
+@media (min-width: 1024px) {
+  .header {
+    width: 220px;
+  }
+  .header__menu-button { display: none; }
+  .header__bottom { display: none; }
+}
+
+/* Tablet: narrow left rail 60px */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .header {
+    width: 72px;
+  }
+  .header__branding { height: 80px; }
+  /* Collapsed: rounded square button (52x52) centered in 72px rail */
+  .header .side-nav__menu {
+    padding: 0 10px;
+    transition: padding 180ms ease;
+  }
+  .header .side-nav__item {
+    /* (52px item - 24px icon) / 2 = 14px to center icon when collapsed */
+    padding: 0 14px;
+    gap: 0;
+    border-radius: var(--radius-card);
+    transition: padding 180ms ease, gap 180ms ease;
+  }
+
+  .header:hover .side-nav__menu,
+  .header:focus-within .side-nav__menu {
+    padding: 0 10px;
+  }
+
+  .header:hover .side-nav__item,
+  .header:focus-within .side-nav__item {
+    padding: 0 16px;
+    gap: 10px;
+  }
+
+  /* Hide label completely from layout when collapsed; fade in on hover */
+  .header .side-nav__label {
+    display: inline-block;
+    max-width: 0;
+    opacity: 0;
+    overflow: hidden;
+    transform: translateX(-6px);
+    transition: max-width 180ms ease, opacity 180ms ease, transform 180ms ease;
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  .header {
+    width: 72px;
+    transition: width 180ms ease;
+    overflow: visible;
+  }
+
+  .header:hover,
+  .header:focus-within {
+    width: 220px; /* match desktop */
+  }
+
+  .header:hover .side-nav__label,
+  .header:focus-within .side-nav__label {
+    max-width: 200px;
+    opacity: 1;
+    transform: translateX(0);
+    pointer-events: auto;
+  }
+
+  /* When JS forces collapsed state (e.g. after navigation), prevent hover from expanding.
+     !important 불필요 — 선택자 특이도(2클래스, :hover 변형은 3클래스)가 .header:hover(1클래스+가상클래스)보다
+     이미 높거나 동일 특이도에서 소스 순서상 뒤에 있어 자연스럽게 우선 적용됨. */
+  .header.header--force-collapsed {
+    width: 72px;
+  }
+  .header.header--force-collapsed .side-nav__label {
+    max-width: 0;
+    opacity: 0;
+    transform: translateX(-6px);
+    pointer-events: none;
+  }
+  .header.header--force-collapsed:hover {
+    width: 72px;
+  }
+}
+
+/* Mobile: top header + bottom bar */
+@media (max-width: 767px) {
+  .header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 64px;
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border-left: none;
+    border-right: none;
+    border-bottom: 1px solid var(--color-whiteLine);
+  }
+
+  .header__top { flex: 1; display: flex; align-items: center; }
+  .header__branding { height: auto; }
+  .header__menu-button { display: inline-flex; }
+
+  /* hide header branding/menu area and side nav footer on mobile */
+  /* show branding (logo) on mobile header */
+  /* 가로 모드 노치 대응: 좌우 padding에 safe-area-inset 반영 */
+  .header__bi { display: flex; align-items: center; gap: var(--spacing-xs); width: 100%; padding: 0 calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));}
+  /* push menu button to the far right inside the header */
+  .header__bi .header__menu-button { margin-left: auto; }
+  .header__bottom { display: none; }
+}
+
+/* BrandIdentity (inlined into Header.jsx) */
+.brand-identity__root {
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.brand-identity__image {
+  height: 48px;
+  width: auto;
+  object-fit: contain;
+}
+
+@media (min-width: 1024px) {
+  .brand-identity__root { height: 100px; }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .brand-identity__root { height: 100px; }
+}
+
+@media (max-width: 767px) {
+  .brand-identity__root { height: 64px; padding: 10px;}
+  .brand-identity__image { height: 40px; }
+}
+

package/dist/packages/core/src/components/Header.d.ts

@@ -0,0 +1,44 @@
+import './Tooltip/Tooltip.css';
+import { type SideNavItem } from './SideNav';
+import './Header.css';
+/** @public */
+export declare function BrandIdentity({ appMode }: {
+    appMode?: 'malgwi' | 'manager';
+}): import("react").JSX.Element;
+/**
+ * 앱 전체 레이아웃의 내비게이션 헤더(사이드바)입니다.
+ *
+ * \> ⚠️ 이 컴포넌트는 **앱 수준 사이드 내비게이션**입니다.
+ * \> 팝업 내부의 타이틀 영역에는 {@link TrainingPagePopupTitle}을 사용하세요.
+ *
+ * - 데스크톱/태블릿: 왼쪽 사이드 내비게이션으로 렌더링
+ * - 모바일: 하단 `BottomNav`로 전환되어 렌더링
+ *
+ * `AppHeader`로도 임포트할 수 있습니다 (이름 충돌 방지용 alias).
+ *
+ * @public
+ */
+export default function Header({ activeKey, onChange, items, malgwiItems: _malgwiItems, managerItems: _managerItems, unreadCount, onDebug, onNotification, onAccount, onSetting, onHelp, appMode, onAppModeChange }: {
+    activeKey?: string | null;
+    onChange?: (key?: string) => void;
+    items?: SideNavItem[];
+    malgwiItems?: SideNavItem[];
+    managerItems?: SideNavItem[];
+    unreadCount?: number;
+    onDebug?: () => void;
+    onNotification?: () => void;
+    onAccount?: () => void;
+    onSetting?: () => void;
+    onHelp?: () => void;
+    appMode?: 'malgwi' | 'manager';
+    onAppModeChange?: (mode: 'malgwi' | 'manager') => void;
+}): import("react").JSX.Element;
+/**
+ * `Header`의 alias입니다. 프로젝트 내 `Header`라는 이름이 이미 사용 중일 때 충돌 없이 임포트할 수 있습니다.
+ *
+ * ```tsx
+ * import { AppHeader } from '@ihabdevteam/core'
+ * ```
+ * @public
+ */
+export declare const AppHeader: typeof Header;

package/dist/packages/core/src/components/Header.js

@@ -0,0 +1,98 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMediaQuery } from '../hooks';
+import BottomNav from './BottomNav';
+import Button from './Button';
+import MenuTooltip from './Tooltip/MenuTooltip';
+import { useAnchoredMenu } from './useAnchoredMenu';
+import { createPortal } from 'react-dom';
+// 메뉴 표면(.tooltip-content) 정의 — Tooltip.tsx를 거치지 않고 클래스만 쓰므로 명시적으로.
+import './Tooltip/Tooltip.css';
+import SideNav from './SideNav';
+import { resolveAssetUrl } from '../utils';
+import LogoSvg from '../logo/Logo_speechear_kr.svg';
+import LogoManagerSvg from '../logo/Logo_speechearManager_kr.svg';
+import SymbolSvg from '../logo/Symbol_speechear.svg';
+import './Header.css';
+/** @public */
+export function BrandIdentity({ appMode }) {
+    const { t } = useTranslation();
+    const isManager = appMode === 'manager';
+    const logo = isManager
+        ? (typeof LogoManagerSvg === 'string' && LogoManagerSvg) || resolveAssetUrl('logo/Logo_speechearManager_kr.svg')
+        : (typeof LogoSvg === 'string' && LogoSvg) || resolveAssetUrl('logo/Logo_speechear_kr.svg');
+    const symbol = (typeof SymbolSvg === 'string' && SymbolSvg) || resolveAssetUrl('logo/Symbol_speechear.svg');
+    const isTablet = useMediaQuery("(min-width: 768px) and (max-width: 1023px)");
+    return (_jsx("div", { className: "brand-identity__root", "aria-label": t('header.biArea', 'BI 영역'), children: isTablet ? (_jsx("img", { src: symbol, alt: t('header.biSymbol', 'BI 심볼'), className: "brand-identity__image" })) : (_jsx("img", { src: logo, alt: isManager ? t('header.logoManager', '말귀매니저 로고') : t('header.logoMalgwi', '말귀 로고'), className: "brand-identity__image" })) }));
+}
+/**
+ * 앱 전체 레이아웃의 내비게이션 헤더(사이드바)입니다.
+ *
+ * \> ⚠️ 이 컴포넌트는 **앱 수준 사이드 내비게이션**입니다.
+ * \> 팝업 내부의 타이틀 영역에는 {@link TrainingPagePopupTitle}을 사용하세요.
+ *
+ * - 데스크톱/태블릿: 왼쪽 사이드 내비게이션으로 렌더링
+ * - 모바일: 하단 `BottomNav`로 전환되어 렌더링
+ *
+ * `AppHeader`로도 임포트할 수 있습니다 (이름 충돌 방지용 alias).
+ *
+ * @public
+ */
+export default function Header({ activeKey, onChange, items, malgwiItems: _malgwiItems, managerItems: _managerItems, unreadCount, onDebug, onNotification, onAccount, onSetting, onHelp, appMode, onAppModeChange }) {
+    const { t } = useTranslation();
+    const isMobile = useMediaQuery("(max-width: 767px)");
+    // 모바일 하단 더보기(…) 메뉴에 노출할 유틸(알림·설정·도움말·계정·디버그).
+    // 데스크톱 SideNav 푸터와 동일한 아이콘/키를 사용해 활성표시가 일관되게 반영된다.
+    const bottomMoreItems = useMemo(() => {
+        const list = [];
+        if (onDebug)
+            list.push({ key: 'debug', icon: 'terminal', label: t('nav.debug', '디버그'), onClick: onDebug });
+        if (onNotification)
+            list.push({
+                key: 'notifications', icon: 'bell',
+                // 개수는 라벨 문자열이 아니라 원형 배지로 — SideNav 푸터와 같은 표현을 쓴다.
+                label: t('nav.notifications', '알림'),
+                badgeCount: unreadCount,
+                onClick: onNotification,
+            });
+        if (onSetting)
+            list.push({ key: 'settings', icon: 'settings', label: t('nav.settings', '설정'), onClick: onSetting });
+        if (onHelp)
+            list.push({ key: 'help', icon: 'message-circle-question-mark', label: t('nav.help', '도움말'), onClick: onHelp });
+        if (onAccount)
+            list.push({ key: 'account', icon: 'user-round', label: t('nav.account', '계정'), onClick: onAccount });
+        return list;
+    }, [t, onDebug, onNotification, onSetting, onHelp, onAccount, unreadCount]);
+    // 헤더 햄버거 — SideNav 푸터에 해당하는 유틸(알림·설정·도움말·계정·디버그)을 띄운다.
+    // 데스크톱에선 SideNav 푸터에 늘 보이지만 모바일에선 그 자리가 없어, 같은 항목을
+    // 하단 더보기(…)와 동일한 구성(bottomMoreItems)으로 재사용한다.
+    const computeUtilMenuStyle = useCallback((rect) => ({
+        position: 'fixed',
+        top: rect.bottom + 8,
+        right: Math.max(8, window.innerWidth - rect.right),
+        zIndex: 10000,
+    }), []);
+    const { open: utilOpen, toggle: toggleUtilMenu, close: closeUtilMenu, style: utilMenuStyle, triggerRef: utilTriggerRef, menuRef: utilMenuRef } = useAnchoredMenu({ computeStyle: computeUtilMenuStyle, onScroll: 'ignore', onResize: 'ignore' });
+    const utilColumns = useMemo(() => [{
+            items: bottomMoreItems.map(it => ({
+                label: it.label,
+                icon: it.icon,
+                badgeCount: it.badgeCount,
+                selected: it.selected ?? (!!it.key && it.key === activeKey),
+                closeOnSelect: true,
+                onClick: () => { it.onClick?.(); closeUtilMenu(); },
+            })),
+        }], [bottomMoreItems, activeKey, closeUtilMenu]);
+    return (_jsxs("aside", { className: `header${appMode === 'manager' ? ' header--manager' : ''}`, children: [_jsxs("div", { className: "header__bi", children: [_jsx(BrandIdentity, { appMode: appMode }), _jsxs("div", { className: "header__menu-button", ref: utilTriggerRef, children: [_jsx(Button, { size: 48, type: "dot", shape: "pill", variant: "default", icon: 'menu', ariaLabel: t('header.menuOpen', '메뉴 열기'), onClick: toggleUtilMenu }), utilOpen && createPortal(_jsx("div", { className: "tooltip-content", style: utilMenuStyle, ref: utilMenuRef, children: _jsx(MenuTooltip, { columns: utilColumns, onClose: closeUtilMenu }) }), document.body)] })] }), _jsx(SideNav, { items: items, activeKey: activeKey ?? undefined, onChange: onChange, unreadCount: unreadCount, onDebug: onDebug, onNotification: onNotification, onAccount: onAccount, onSetting: onSetting, onHelp: onHelp, appMode: appMode, onAppModeChange: onAppModeChange }), isMobile && _jsx(BottomNav, { items: items, activeKey: activeKey ?? undefined, onChange: onChange, appMode: appMode, onAppModeChange: onAppModeChange })] }));
+}
+/**
+ * `Header`의 alias입니다. 프로젝트 내 `Header`라는 이름이 이미 사용 중일 때 충돌 없이 임포트할 수 있습니다.
+ *
+ * ```tsx
+ * import { AppHeader } from '@ihabdevteam/core'
+ * ```
+ * @public
+ */
+export const AppHeader = Header;

package/dist/packages/core/src/components/HearingDeviceInfo.css

@@ -0,0 +1,48 @@
+.hearing-device-info {
+  background: var(--color-white);
+  border-radius: var(--radius-card);
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+.hearing-device-info__title {
+  font-weight: 700;
+  color: var(--color-darkGray);
+}
+.hearing-device-info__row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-xs);
+  flex: 1;
+}
+.hearing-device-info__side {
+  background: var(--color-deepWhite);
+  border-radius: var(--radius-s);
+  padding: 10px 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+  min-height: 80px;
+}
+.hearing-device-info__side-label {
+  font-weight: 600;
+  color: var(--color-gray);
+}
+.hearing-device-info__device {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 100%;
+}
+.hearing-device-info__device-name    { font-weight: 700; color: var(--color-darkGray); }
+.hearing-device-info__device-detail  { font-size: 12px;  color: var(--color-gray); }
+.hearing-device-info__device-product { font-size: 12px;  color: var(--color-darkGray); }
+.hearing-device-info__device-date    { font-size: 11px;  color: var(--color-lightGray); margin-top: 2px; }
+.hearing-device-info__actions {
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+  margin-top: var(--spacing-xs);
+}

package/dist/packages/core/src/components/HearingDeviceInfo.d.ts

@@ -0,0 +1,22 @@
+import './HearingDeviceInfo.css';
+export type DeviceSide = '좌' | '우';
+export interface DeviceEntry {
+    brand: string;
+    device: string;
+    fitType?: string;
+    productName?: string;
+    wornYear: string;
+    wornMonth: string;
+    wornDay: string;
+}
+interface HearingDeviceInfoProps {
+    devices: {
+        좌: DeviceEntry | null;
+        우: DeviceEntry | null;
+    };
+    onAddDevice: (side: DeviceSide) => void;
+    onOpenList: (side: DeviceSide) => void;
+    onRemoveDevice: (side: DeviceSide) => void;
+}
+export default function HearingDeviceInfo({ devices, onAddDevice, onOpenList, onRemoveDevice }: HearingDeviceInfoProps): import("react").JSX.Element;
+export {};

package/dist/packages/core/src/components/HearingDeviceInfo.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import Button from './Button';
+import './HearingDeviceInfo.css';
+export default function HearingDeviceInfo({ devices, onAddDevice, onOpenList, onRemoveDevice }) {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "hearing-device-info", children: [_jsx("div", { className: "hearing-device-info__title body-3", children: t('customers.device.title', '청각재활기기') }), _jsx("div", { className: "hearing-device-info__row", children: ['좌', '우'].map(side => {
+                    const d = devices[side];
+                    const sideLabel = side === '좌' ? t('device.direction.left', '좌') : t('device.direction.right', '우');
+                    return (_jsxs("div", { className: "hearing-device-info__side", children: [_jsx("span", { className: "hearing-device-info__side-label body-3", children: sideLabel }), d ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "hearing-device-info__device", children: [_jsx("span", { className: "hearing-device-info__device-name body-3", children: d.brand }), _jsxs("span", { className: "hearing-device-info__device-detail", children: [d.device, d.fitType ? ` · ${d.fitType}` : ''] }), d.productName && _jsx("span", { className: "hearing-device-info__device-product", children: d.productName }), _jsxs("span", { className: "hearing-device-info__device-date", children: [d.wornYear, ".", d.wornMonth, ".", d.wornDay] })] }), _jsxs("div", { className: "hearing-device-info__actions", children: [_jsx(Button, { size: 40, type: "dot", icon: "plus", onClick: () => onAddDevice(side), showTooltipInfo: t('device.addNew', '새 기기 추가'), ariaLabel: t('device.addNew', '새 기기 추가') }), _jsx(Button, { size: 40, type: "dot", icon: "list", onClick: () => onOpenList(side), showTooltipInfo: t('device.selectFromList', '목록에서 선택'), ariaLabel: t('device.selectFromList', '목록에서 선택') }), _jsx(Button, { size: 40, type: "dot", icon: "x", variant: "danger", onClick: () => onRemoveDevice(side), showTooltipInfo: t('device.removeDevice', '착용 해제'), ariaLabel: t('device.removeDevice', '착용 해제') })] })] })) : (_jsxs("div", { className: "hearing-device-info__actions", children: [_jsx(Button, { size: 40, type: "dot", icon: "plus", onClick: () => onAddDevice(side), showTooltipInfo: t('device.addNew', '새 기기 추가'), ariaLabel: t('device.addNew', '새 기기 추가') }), _jsx(Button, { size: 40, type: "dot", icon: "list", onClick: () => onOpenList(side), showTooltipInfo: t('device.selectFromList', '목록에서 선택'), ariaLabel: t('device.selectFromList', '목록에서 선택') })] }))] }, side));
+                }) })] }));
+}

package/dist/packages/core/src/components/Icon.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode, type CSSProperties } from 'react';
+/** @public */
+export interface IconProps {
+    icon?: ReactNode | string;
+    label?: ReactNode;
+    className?: string;
+    imgClassName?: string;
+    maskClassName?: string;
+    svgClassName?: string;
+    wrapperStyle?: CSSProperties;
+    size?: number;
+}
+/** @public */
+export default function Icon(props: IconProps): import("react").JSX.Element | null;

package/dist/packages/core/src/components/Icon.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement } from 'react';
+import useLucideIcon from '../hooks/useLucideIcon';
+import useIcon from '../hooks/useIcon';
+import { resolveAssetUrl } from '../utils';
+/** @public */
+export default function Icon(props) {
+    const { icon, label, className, imgClassName, maskClassName, svgClassName, wrapperStyle, size } = props || {};
+    const wrapperClass = className ?? 'iconRenderer-icon';
+    const defaultImgClass = imgClassName ?? 'iconRenderer-icon-image';
+    const defaultMaskClass = maskClassName ?? 'iconRenderer-icon-mask';
+    const defaultSvgClass = svgClassName ?? 'iconRenderer-icon-svg';
+    // ─── 훅은 항상 최상단에서 무조건 호출 (조건부 return 이전) ───────────────────
+    // useLucideIcon: async 로드 — 초기 null, 로드 완료 후 컴포넌트 반환
+    // useIcon: SVG/이미지 파일 경로 처리 — lucide 아이콘이 아닐 때 사용
+    // 둘 다 string이 아닌 경우엔 null을 넘겨 내부에서 no-op 처리됨
+    const iconStr = typeof icon === 'string' ? icon : null;
+    const lucideComp = useLucideIcon(iconStr);
+    const { iconToUse, mode, svgText, blobUrl } = useIcon(iconStr);
+    // ────────────────────────────────────────────────────────────────────────────
+    const createWrapper = (children, extraProps = {}) => (_jsx("span", { className: wrapperClass, style: wrapperStyle, ...extraProps, children: children }));
+    const createImage = (src, extraProps = {}) => (_jsx("img", { src: src, alt: typeof label === 'string' ? label : (label ? String(label) : ''), className: defaultImgClass, ...extraProps }));
+    if (!icon)
+        return null;
+    if (typeof icon !== 'string')
+        return createWrapper(icon);
+    // Special-case: empty placeholder icon name -> render an empty 24x24 SVG
+    if (icon === 'none') {
+        const emptySvg = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"></svg>';
+        return createWrapper(_jsx("span", { className: defaultSvgClass, dangerouslySetInnerHTML: { __html: emptySvg } }), { 'aria-hidden': 'true' });
+    }
+    if (lucideComp) {
+        try {
+            const appliedSize = typeof size === 'number' ? size : 20;
+            return createWrapper(createElement(lucideComp, { className: defaultSvgClass, size: appliedSize }), { 'aria-hidden': 'true' });
+        }
+        catch (e) {
+            // fallthrough to existing behavior
+        }
+    }
+    if (iconToUse && iconToUse.endsWith('.svg')) {
+        if (mode === 'mask') {
+            const urlValue = blobUrl ? `url(${blobUrl})` : `url(${iconToUse})`;
+            const maskStyle = { '--icon-url': urlValue };
+            return createWrapper(_jsx("span", { className: defaultMaskClass, style: maskStyle }), { 'aria-hidden': 'true' });
+        }
+        if (mode === 'img') {
+            return createWrapper(createImage(iconToUse, {
+                onError: (e) => {
+                    e.currentTarget.onerror = null;
+                    e.currentTarget.style.display = 'none';
+                },
+            }), { 'aria-hidden': 'true' });
+        }
+        if (mode === 'inline') {
+            return createWrapper(_jsx("span", { className: defaultSvgClass, dangerouslySetInnerHTML: svgText ? { __html: svgText } : undefined }), { 'aria-hidden': 'true' });
+        }
+        return createWrapper(null, { 'aria-hidden': 'true' });
+    }
+    if (icon.startsWith('/') || icon.includes('/assets/') || icon.match(/\.(png|jpg|jpeg|webp|gif)$/i)) {
+        return createImage(resolveAssetUrl(icon), {
+            style: wrapperStyle,
+            onError: (e) => {
+                e.currentTarget.onerror = null;
+                e.currentTarget.style.display = 'none';
+            },
+        });
+    }
+    // 매칭되는 아이콘이 없을 때 null.svg 폴백 렌더링
+    const nullSize = typeof size === 'number' ? size : 20;
+    const nullSvg = `<svg width="${nullSize}" height="${nullSize}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2" style="fill:none;stroke:currentColor;stroke-width:2"/></svg>`;
+    return createWrapper(_jsx("span", { className: defaultSvgClass, dangerouslySetInnerHTML: { __html: nullSvg } }), { 'aria-hidden': 'true' });
+}