@designbasekorea/figma-ui 0.6.0 → 0.6.4

package/dist/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
+var react = require('@designbasekorea/ui-wc/react');
 var icons = require('@designbasekorea/icons');
-var ui = require('@designbasekorea/ui');
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -12,10 +12,20 @@ function resolveText(t, input, fallback) {
     if (typeof input === 'string') {
         return input;
     }
-    return t ? t(input.key, input.values) : input.key;
+    if (t) {
+        const translated = t(input.key, input.values);
+        if (translated && translated !== input.key) {
+            return translated;
+        }
+    }
+    return fallback ?? input.key;
 }
 
-const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', text = { key: 'donation.buy_me_a_coffee' }, iconType = 'heart', size = 's', variant = 'tertiary', fullWidth = false, disabled = false, showPrompt = false, promptText = { key: 'donation.prompt' }, className, onClick, t }) => {
+const DONATION_ICON_NAMES = {
+    heart: 'star-filled',
+    coffee: 'cart',
+};
+const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', text = { key: 'donation.buy_me_a_coffee' }, iconType = 'heart', size = 's', variant = 'tertiary', fullWidth = false, iconOnly = false, disabled = false, showPrompt = false, promptText = { key: 'donation.prompt' }, className, onClick, t }) => {
     const handleClick = () => {
         if (onClick) {
             onClick();
@@ -24,15 +34,12 @@ const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', te
             window.open(donationUrl, '_blank', 'noopener,noreferrer');
         }
     };
-    const Icon = iconType === 'heart' ? icons.HeartFilledIcon : icons.CoffeeFilledIcon;
     const displayText = resolveText(t, text, 'Buy me a coffee');
     const displayPromptText = resolveText(t, promptText, '도움이 되었다면 커피 한 잔 사주세요!');
     const buttonSize = size;
     return (React.createElement("div", { className: clsx('designbase-figma-donation-badge-container', className) },
-        showPrompt && (React.createElement("div", { className: "designbase-figma-donation-badge__prompt" }, displayPromptText)),
-        React.createElement(ui.Button, { variant: variant, size: buttonSize, fullWidth: fullWidth, disabled: disabled, onPress: handleClick, startIcon: Icon, className: clsx('designbase-figma-donation-badge', `designbase-figma-donation-badge--${iconType}`), "aria-label": displayText, style: {
-                '--designbase-figma-donation-badge-icon-color': 'var(--db-brand-primary)'
-            } }, displayText)));
+        showPrompt && !iconOnly && (React.createElement("div", { className: "designbase-figma-donation-badge__prompt" }, displayPromptText)),
+        React.createElement(react.Button, { variant: variant, size: buttonSize, fullWidth: fullWidth, disabled: disabled, onPress: handleClick, iconOnly: iconOnly, startIcon: DONATION_ICON_NAMES[iconType], className: clsx('designbase-figma-donation-badge', `designbase-figma-donation-badge--${iconType}`), "aria-label": displayText }, iconOnly ? undefined : displayText)));
 };
 DonationBadge.displayName = 'DonationBadge';
 
@@ -70,10 +77,11 @@ const FigmaHeader = ({ children, actions = [], searchBar, sticky = true, classNa
         'designbase-figma-header--with-search': !!searchBar,
         'designbase-figma-header--with-actions': actions.length > 0,
     }, className);
+    const hasToolbar = !!children || actions.length > 0;
     return (React.createElement("header", { className: classes },
-        React.createElement("div", { className: "designbase-figma-header__container" },
+        hasToolbar && (React.createElement("div", { className: "designbase-figma-header__container" },
             children && (React.createElement("div", { className: "designbase-figma-header__center" }, children)),
-            actions.length > 0 && (React.createElement("div", { className: "designbase-figma-header__right" }, actions.map((action, index) => (React.createElement(ui.Button, { key: index, variant: "tertiary", size: "s", iconOnly: true, "aria-label": `액션 ${index + 1}` }, action)))))),
+            actions.length > 0 && (React.createElement("div", { className: "designbase-figma-header__right" }, actions.map((action, index) => (React.createElement(react.Button, { key: `${action.startIcon}-${index}`, variant: "tertiary", size: "s", iconOnly: true, startIcon: action.startIcon, "aria-label": action.ariaLabel, onPress: action.onPress }))))))),
         searchBar && (React.createElement("div", { className: "designbase-figma-header__search-container" }, searchBar))));
 };
 FigmaHeader.displayName = 'FigmaHeader';
@@ -82,22 +90,24 @@ const FigmaPageHead = ({ onBack, title, description, actions = [], moreActions =
     const classes = clsx('designbase-figma-page-head', className);
     const displayTitle = resolveText(t, title);
     const displayDescription = description ? resolveText(t, description) : undefined;
-    const dropdownItems = moreActions.map(action => ({
+    const dropdownItems = moreActions.map((action) => ({
         id: action.id,
         label: resolveText(t, action.label),
-        onClick: action.onClick
     }));
+    const handleDropdownChange = (event) => {
+        const actionId = event.detail?.id ?? event.detail?.value;
+        const action = moreActions.find((item) => item.id === actionId);
+        action?.onClick();
+    };
     return (React.createElement("div", { className: classes },
         React.createElement("div", { className: "designbase-figma-page-head__left" },
-            React.createElement(ui.Button, { variant: "tertiary", size: "s", iconOnly: true, onPress: onBack, "aria-label": "\uB4A4\uB85C\uAC00\uAE30" },
-                React.createElement(icons.ChevronLeftIcon, { size: 14 })),
+            React.createElement(react.Button, { variant: "tertiary", size: "s", iconOnly: true, startIcon: "chevron-left", onPress: onBack, "aria-label": "\uB4A4\uB85C\uAC00\uAE30" }),
             React.createElement("div", { className: "designbase-figma-page-head__titles" },
                 React.createElement("h2", null, displayTitle),
                 displayDescription && React.createElement("p", null, displayDescription))),
         React.createElement("div", { className: "designbase-figma-page-head__actions" },
             actions.map((action, index) => (React.createElement(React.Fragment, { key: index }, action))),
-            moreActions.length > 0 && (React.createElement(ui.Dropdown, { trigger: React.createElement("button", { type: "button", className: "designbase-figma-page-head__more-button", "aria-label": "\uB354\uBCF4\uAE30" },
-                    React.createElement(icons.MoreHorizontalIcon, { size: 16 })), items: dropdownItems, placement: "bottom-right", size: "s" })))));
+            moreActions.length > 0 && (React.createElement(react.Dropdown, { items: dropdownItems, triggerIcon: "more-horizontal", iconOnly: true, triggerVariant: "tertiary", placement: "bottom-right", size: "s", onChange: handleDropdownChange })))));
 };
 FigmaPageHead.displayName = 'FigmaPageHead';
 
@@ -106,7 +116,9 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
     const clipRef = React.useRef(null);
     const innerRef = React.useRef(null);
     const animatingRef = React.useRef(false);
+    const isInitialMountRef = React.useRef(true);
     const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
+    const [contentHidden, setContentHidden] = React.useState(defaultCollapsed);
     const sectionStyle = marginBottom ? { marginBottom: `${marginBottom}px` } : undefined;
     const classes = [
         'designbase-figma-section',
@@ -119,38 +131,42 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
     const toggle = () => {
         if (!collapsible)
             return;
-        setCollapsed(v => {
-            const next = !v;
+        setCollapsed((prev) => {
+            const next = !prev;
             onCollapseChange?.(next, dataCategory);
-            animate(next);
             return next;
         });
     };
-    const animate = (toCollapsed) => {
+    const animate = (toCollapsed, onComplete) => {
         const clip = clipRef.current;
         const inner = innerRef.current;
         if (!clip || !inner)
             return;
         const transitionMs = 250;
-        const setH = (h) => { clip.style.height = h; };
+        const setH = (h) => {
+            clip.style.height = h;
+        };
         if (animatingRef.current) {
             const current = `${clip.getBoundingClientRect().height}px`;
             clip.style.transition = 'none';
             setH(current);
-            clip.offsetHeight;
+            void clip.offsetHeight;
             clip.style.transition = '';
         }
         animatingRef.current = true;
         if (toCollapsed) {
+            inner.classList.remove('is-collapsed');
             const start = `${inner.scrollHeight}px`;
             setH(start);
-            clip.offsetHeight;
+            void clip.offsetHeight;
             setH('0px');
         }
         else {
+            inner.classList.remove('is-collapsed');
+            const targetHeight = inner.scrollHeight;
             setH('0px');
-            clip.offsetHeight;
-            setH(`${inner.scrollHeight}px`);
+            void clip.offsetHeight;
+            setH(`${targetHeight}px`);
         }
         const onEnd = (e) => {
             if (e.propertyName !== 'height')
@@ -160,6 +176,7 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
                 setH('auto');
             }
             animatingRef.current = false;
+            onComplete?.();
         };
         clip.addEventListener('transitionend', onEnd);
         window.setTimeout(() => {
@@ -168,15 +185,29 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
             if (!toCollapsed)
                 setH('auto');
             animatingRef.current = false;
+            onComplete?.();
         }, transitionMs + 50);
     };
-    React.useEffect(() => {
-        const clip = clipRef.current;
-        const inner = innerRef.current;
-        if (!clip || !inner)
+    React.useLayoutEffect(() => {
+        if (!collapsible)
             return;
-        clip.style.height = collapsed ? '0px' : 'auto';
-    }, []);
+        if (isInitialMountRef.current) {
+            isInitialMountRef.current = false;
+            const clip = clipRef.current;
+            if (clip) {
+                clip.style.height = collapsed ? '0px' : 'auto';
+            }
+            setContentHidden(collapsed);
+            return;
+        }
+        if (collapsed) {
+            animate(true, () => setContentHidden(true));
+        }
+        else {
+            setContentHidden(false);
+            animate(false);
+        }
+    }, [collapsed, collapsible]);
     React.useEffect(() => {
         if (collapsed)
             return;
@@ -202,15 +233,15 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
                     typeof title === 'string' || (typeof title === 'object' && 'key' in title)
                         ? resolveText(t, title)
                         : title,
-                    badge && (React.createElement(ui.Badge, { variant: "secondary", size: "s" }, badge)))),
-            React.createElement("div", { className: "designbase-figma-section__controls" },
+                    badge && (React.createElement(react.Badge, { variant: "secondary", size: "s" }, badge)))),
+            React.createElement("div", { className: "designbase-figma-section__controls", onClick: (e) => e.stopPropagation() },
                 iconButton,
                 collapsible && (React.createElement("span", { className: `designbase-figma-section__collapse-icon ${collapsed ? 'designbase-figma-section__collapse-icon--collapsed' : ''}` },
                     React.createElement(icons.ChevronDownIcon, { size: 16 }))),
-                onToggle && (React.createElement(ui.Toggle, { checked: isEnabled, onChange: () => onToggle(dataCategory), size: "s" }))))),
+                onToggle && (React.createElement(react.Toggle, { checked: isEnabled, onChange: () => onToggle(dataCategory), size: "s" }))))),
         React.createElement("div", { className: `designbase-figma-section__content ${!isEnabled ? 'designbase-figma-section__content--hidden' : ''}` },
             React.createElement("div", { ref: clipRef, className: "designbase-figma-section__content-clip" },
-                React.createElement("div", { ref: innerRef, className: `designbase-figma-section__content-inner ${collapsible && collapsed ? 'is-collapsed' : ''}` }, children)))));
+                React.createElement("div", { ref: innerRef, className: `designbase-figma-section__content-inner ${collapsible && contentHidden ? 'is-collapsed' : ''}` }, children)))));
 };
 FigmaSection.displayName = 'FigmaSection';
 const scrollToSection = (category, headerHeight = 94) => {
@@ -364,7 +395,7 @@ const PaymentBadge = ({ isActive, onClick, isLoading = false, text, t = (key) =>
     const getBadgeVariant = () => {
         return isActive ? 'success' : 'secondary';
     };
-    return (React.createElement("div", { className: `designbase-figma-payment-badge ${className || ''} ${isActive ? 'active' : 'free'}`, onClick: onClick, style: { cursor: onClick ? 'pointer' : 'default' } }, isLoading ? (React.createElement(ui.Spinner, { size: "s" })) : (React.createElement(ui.Badge, { variant: getBadgeVariant(), size: "s", className: "designbase-figma-payment-badge__badge" }, getBadgeText()))));
+    return (React.createElement("div", { className: `designbase-figma-payment-badge ${className || ''} ${isActive ? 'active' : 'free'}`, onClick: onClick, style: { cursor: onClick ? 'pointer' : 'default' } }, isLoading ? (React.createElement(react.Spinner, { size: "s" })) : (React.createElement(react.Badge, { variant: getBadgeVariant(), size: "s", className: "designbase-figma-payment-badge__badge" }, getBadgeText()))));
 };
 PaymentBadge.displayName = 'PaymentBadge';
 
@@ -393,10 +424,15 @@ const LanguageSelector = ({ currentLanguage, languages = DEFAULT_LANGUAGES, onLa
     const segmentOptions = languages.map((language) => ({
         value: language.code,
         label: resolveText(t, language.label),
-        disabled: false
+        disabled: false,
     }));
     return (React.createElement("div", { className: `designbase-figma-language-selector ${className || ''}` },
-        React.createElement(ui.SegmentControl, { options: segmentOptions, value: activeLanguage, onChange: handleLanguageChange, size: size, className: "designbase-figma-language-selector__segment" })));
+        React.createElement(react.SegmentControl, { options: segmentOptions, value: activeLanguage, onChange: (event) => {
+                const value = event.detail?.value;
+                if (value) {
+                    handleLanguageChange(value);
+                }
+            }, size: size, className: "designbase-figma-language-selector__segment" })));
 };
 LanguageSelector.displayName = 'LanguageSelector';
 
@@ -452,7 +488,7 @@ const LogoDropdown = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase'
             return (React.createElement("img", { className: "designbase-figma-logo-dropdown__logo", src: logoSrc, alt: logoAlt, onClick: toggleDropdown }));
         }
         return (React.createElement("div", { className: "designbase-figma-logo-dropdown__logo", onClick: toggleDropdown },
-            React.createElement(ui.Logo, { type: logoType, size: logoSize, variant: "default" })));
+            React.createElement(react.Logo, { type: logoType, size: logoSize, variant: "default" })));
     };
     return (React.createElement("div", { className: classes },
         renderLogo(),
@@ -486,22 +522,29 @@ const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount =
             React.createElement("div", { className: "designbase-figma-footer__left" },
                 React.createElement(LogoDropdown, { logoSrc: logoSrc, logoAlt: logoAlt, logoType: logoType, logoSize: logoSize, links: logoLinks, t: t }),
                 showLanguageSelector && (React.createElement(LanguageSelector, { currentLanguage: currentLanguage, languages: languages, onLanguageChange: onLanguageChange, size: "s" }))),
-            showPaymentStatus && (React.createElement("div", { className: "designbase-figma-footer__payment-states" },
-                resolvedShowUsageInfo && (React.createElement("div", { className: "designbase-figma-footer__usage-info" }, isActive ? (React.createElement("span", { className: "designbase-figma-footer__unlimited-usage designbase-figma-footer__unlimited-usage--tooltip", title: t('unlimitedUsageTooltip') }, t('unlimitedUsage'))) : (React.createElement(React.Fragment, null,
-                    React.createElement("span", { className: "designbase-figma-footer__usage-info designbase-figma-footer__usage-info--tooltip", title: t('resetsDaily') },
-                        React.createElement("span", { className: "designbase-figma-footer__usage-count" }, usageCount),
-                        React.createElement("span", { className: "designbase-figma-footer__max-daily-usage" },
-                            "/",
-                            maxDailyUsage,
-                            " ",
-                            t('perDay'))))))),
-                resolvedShowPaymentBadge && (React.createElement(PaymentBadge, { isActive: isActive, onClick: isBeta ? undefined : onLicensePageClick, isLoading: isLoading, text: isBeta ? (t('betaStatus') || 'BETA') : undefined, t: t })))),
-            showDonation && (React.createElement("div", { className: "designbase-figma-footer__donation" },
-                React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s", showPrompt: showDonationText && !isActive, promptText: donationPromptText, t: t })))),
+            React.createElement("div", { className: "designbase-figma-footer__right" },
+                showPaymentStatus && resolvedShowUsageInfo && (React.createElement("div", { className: "designbase-figma-footer__usage-info" }, isActive ? (React.createElement("span", { className: "designbase-figma-footer__unlimited-usage designbase-figma-footer__unlimited-usage--tooltip", title: t('unlimitedUsageTooltip') }, t('unlimitedUsage'))) : (React.createElement("span", { className: "designbase-figma-footer__usage-info designbase-figma-footer__usage-info--tooltip", title: t('resetsDaily') },
+                    React.createElement("span", { className: "designbase-figma-footer__usage-count" }, usageCount),
+                    React.createElement("span", { className: "designbase-figma-footer__max-daily-usage" },
+                        "/",
+                        maxDailyUsage,
+                        " ",
+                        t('perDay')))))),
+                showPaymentStatus && resolvedShowPaymentBadge && (React.createElement(PaymentBadge, { isActive: isActive, onClick: isBeta ? undefined : onLicensePageClick, isLoading: isLoading, text: isBeta ? (t('betaStatus') || 'BETA') : undefined, t: t })),
+                showDonation && (React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s", iconOnly: true, showPrompt: false, t: t })))),
         children));
 };
 FigmaFooter.displayName = 'FigmaFooter';
 
+const FigmaToastStack = ({ toasts, position, maxToasts, onRemoveToast, }) => {
+    const visibleToasts = [...toasts]
+        .sort((a, b) => b.createdAt - a.createdAt)
+        .slice(0, maxToasts);
+    if (visibleToasts.length === 0)
+        return null;
+    return (React.createElement("div", { className: `figma-toast-container figma-toast-container--${position}` }, visibleToasts.map((toast) => (React.createElement("div", { key: toast.id, className: "figma-toast-container__item" },
+        React.createElement(react.Toast, { toastId: toast.id, title: toast.title, description: toast.description, status: toast.status, duration: toast.duration, showProgress: toast.showProgress, showClose: toast.showCloseButton, onClose: () => onRemoveToast(toast.id) }))))));
+};
 const ToastContext = React.createContext(null);
 const useToast = () => {
     const context = React.useContext(ToastContext);
@@ -519,13 +562,13 @@ const FigmaToastProvider = ({ children, position = 'top-right', maxToasts = 5, }
             id,
             createdAt: Date.now(),
         };
-        setToasts(prev => {
+        setToasts((prev) => {
             const updated = [newToast, ...prev];
             return updated.slice(0, maxToasts);
         });
     }, [maxToasts]);
     const removeToast = React.useCallback((id) => {
-        setToasts(prev => prev.filter(toast => toast.id !== id));
+        setToasts((prev) => prev.filter((toast) => toast.id !== id));
     }, []);
     const showToast = React.useCallback((message, options = {}) => {
         addToast({
@@ -544,17 +587,17 @@ const FigmaToastProvider = ({ children, position = 'top-right', maxToasts = 5, }
     };
     return (React.createElement(ToastContext.Provider, { value: contextValue },
         children,
-        React.createElement(ui.ToastContainer, { toasts: toasts, onRemoveToast: removeToast, position: position, maxToasts: maxToasts })));
+        React.createElement(FigmaToastStack, { toasts: toasts, onRemoveToast: removeToast, position: position, maxToasts: maxToasts })));
 };
 const FigmaToast = ({ message, isVisible, onClose, type = 'info', duration = 3000, className, }) => {
     if (!isVisible)
         return null;
     return (React.createElement("div", { className: `figma-toast-fixed-wrap ${className || ''}` },
-        React.createElement(ui.Toast, { id: "figma-toast-simple", title: message, status: type, duration: duration, showProgress: false, showCloseButton: true, onClose: onClose, position: "top-right" })));
+        React.createElement(react.Toast, { toastId: "figma-toast-simple", title: message, status: type, duration: duration, showProgress: false, showClose: true, onClose: onClose })));
 };
 const useFigmaToast = () => {
     const [toast, setToast] = React.useState({ message: '', isVisible: false });
-    const showToast = React.useCallback((message, type = 'info') => {
+    const showToast = React.useCallback((message, _type = 'info') => {
         setToast({ message, isVisible: true });
         setTimeout(() => setToast({ message: '', isVisible: false }), 5000);
     }, []);
@@ -585,8 +628,13 @@ const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = fals
     return (React.createElement("form", { className: `designbase-figma-form-with-submit ${className || ''}`, onSubmit: handleSubmit },
         React.createElement("div", { className: "designbase-figma-form-with-submit__field" },
             React.createElement("label", { className: "designbase-figma-form-with-submit__label" }, displayLabel),
-            React.createElement(ui.Input, { value: inputValue, onChange: handleChange, placeholder: displayPlaceholder, helperText: displayHelperText, disabled: disabled || isSubmitting, size: "m" })),
-        React.createElement(ui.Button, { type: "submit", variant: "primary", size: "m", loading: isSubmitting, disabled: !inputValue.trim() || isSubmitting || disabled, fullWidth: true }, isSubmitting ? displaySubmittingText : displaySubmitText)));
+            React.createElement(react.Input, { value: inputValue, onChange: (event) => {
+                    const value = event.detail?.value;
+                    if (value !== undefined) {
+                        handleChange(value);
+                    }
+                }, placeholder: displayPlaceholder, helperText: displayHelperText, disabled: disabled || isSubmitting, size: "m" })),
+        React.createElement(react.Button, { type: "submit", variant: "primary", size: "m", loading: isSubmitting, disabled: !inputValue.trim() || isSubmitting || disabled, fullWidth: true }, isSubmitting ? displaySubmittingText : displaySubmitText)));
 };
 FormWithSubmit.displayName = 'FormWithSubmit';
 
@@ -599,7 +647,7 @@ const InteractionFeedback = ({ status = 'default', message, statusMessage, leftC
     return (React.createElement("div", { className: feedbackClasses },
         React.createElement("div", { className: "designbase-figma-interaction__content" },
             React.createElement("div", { className: "designbase-figma-interaction__left" }, leftContent || (React.createElement("div", { className: "designbase-figma-interaction__message" },
-                status === 'loading' && (React.createElement(ui.Spinner, { size: "s", type: "circular", label: "\uBD88\uB7EC\uC624\uB294 \uC911\uC785\uB2C8\uB2E4...", showLabel: false })),
+                status === 'loading' && (React.createElement(react.Spinner, { size: "s", type: "circular", label: "\uBD88\uB7EC\uC624\uB294 \uC911\uC785\uB2C8\uB2E4...", showLabel: false })),
                 (message || status === 'loading') && (React.createElement("span", { className: "designbase-figma-interaction__text" }, resolveText(t, message || '불러오는 중입니다...'))),
                 statusMessage && (React.createElement("span", { className: "designbase-figma-interaction__status-text" }, resolveText(t, statusMessage)))))),
             rightAction && (React.createElement("div", { className: "designbase-figma-interaction__right" }, rightAction)))));
@@ -638,18 +686,17 @@ const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricin
     };
     return (React.createElement("div", { className: `designbase-figma-pricing-comparison ${className || ''}` },
         paymentType === 'subscription' && (React.createElement("div", { className: "designbase-figma-pricing-comparison__billing-toggle" },
-            React.createElement(ui.SegmentControl, { value: isYearly ? 'yearly' : 'monthly', onChange: (value) => setIsYearly(value === 'yearly'), options: [
+            React.createElement(react.SegmentControl, { value: isYearly ? 'yearly' : 'monthly', onChange: (event) => {
+                    const value = event.detail?.value;
+                    setIsYearly(value === 'yearly');
+                }, options: [
                     {
                         value: 'monthly',
                         label: t('monthlyBilling') || '월간 결제',
                     },
                     {
                         value: 'yearly',
-                        label: (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
-                            t('yearlyBilling') || '연간 결제',
-                            React.createElement("span", { className: "designbase-figma-pricing-comparison__discount-badge" },
-                                getDiscountPercentage(),
-                                "% \uC808\uC57D"))),
+                        label: `${t('yearlyBilling') || '연간 결제'} (${getDiscountPercentage()}% 절약)`,
                     },
                 ], size: "s" }))),
         paymentType === 'lifetime' && (React.createElement("div", { className: "designbase-figma-pricing-comparison__lifetime-info" },
@@ -677,124 +724,307 @@ const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricin
 };
 PricingComparison.displayName = 'PricingComparison';
 
-const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageCount = 0, onLicenseSubmit, licenseKey: initialLicenseKey = '', setPaymentStatus, setUsageCount, setShowLicensePage, paymentPageUrl, pricingFeatures, pricing, paymentType = 'subscription', t, className, }) => {
-    const [isSubmitting, setIsSubmitting] = React.useState(false);
+function postPluginMessage(message) {
+    if (typeof parent === 'undefined') {
+        return;
+    }
+    parent.postMessage({ pluginMessage: message }, '*');
+}
+function openExternalUrl(url) {
+    if (!url)
+        return;
+    postPluginMessage({ type: 'open-external-url', url });
+    if (typeof window !== 'undefined') {
+        window.open(url, '_blank', 'noopener,noreferrer');
+    }
+}
+
+const DEFAULT_LICENSE_MESSAGE_TYPES = {
+    initialize: 'initialize',
+    verifyLicense: 'verify-license',
+    deactivateLicense: 'deactivate-license',
+    updateStatus: 'update-plugin-status',
+    verifyResult: 'license-verification-result',
+    deactivateResult: 'license-deactivation-result',
+};
+const START_DESIGNBASE_AUTH_MESSAGE = 'start-designbase-auth';
+const INITIAL_LICENSE_PAGE_STATE = {
+    paymentStatus: 'FREE',
+    licenseKey: '',
+    planTier: 'FREE',
+    hasLicenseKey: false,
+    isLicenseRegistered: false,
+    activationLimit: 0,
+    activationUsage: 0,
+    usageCount: 0,
+    remainingUsage: 0,
+    usageUsed: 0,
+    usageLimit: 0,
+    usageReset: 'none',
+    canUseFeature: true,
+};
+
+function readString(data, keys) {
+    for (const key of keys) {
+        const value = data[key];
+        if (typeof value === 'string') {
+            return value;
+        }
+    }
+    return '';
+}
+function readNumber(data, keys) {
+    for (const key of keys) {
+        const value = data[key];
+        if (typeof value === 'number' && Number.isFinite(value)) {
+            return value;
+        }
+    }
+    return undefined;
+}
+function readBoolean(data, keys) {
+    for (const key of keys) {
+        const value = data[key];
+        if (typeof value === 'boolean') {
+            return value;
+        }
+    }
+    return undefined;
+}
+function parseLicenseMessage(data) {
+    const paymentStatus = readString(data, ['paymentStatus', 'status']);
+    const usageLimitRaw = data.usageLimit;
+    return {
+        ...(paymentStatus ? { paymentStatus } : {}),
+        licenseKey: readString(data, ['licenseKey']) || undefined,
+        planTier: readString(data, ['planTier']) || undefined,
+        hasLicenseKey: readBoolean(data, ['hasLicenseKey']),
+        isLicenseRegistered: readBoolean(data, ['isLicenseRegistered']),
+        activationLimit: readNumber(data, ['activationLimit']),
+        activationUsage: readNumber(data, ['activationUsage']),
+        usageCount: readNumber(data, ['usageCount']),
+        remainingUsage: readNumber(data, ['remainingUsage']),
+        usageUsed: readNumber(data, ['usageUsed']),
+        usageLimit: usageLimitRaw === 'unlimited' ? 'unlimited' : readNumber(data, ['usageLimit']),
+        usageReset: readString(data, ['usageReset']) || undefined,
+        canUseFeature: readBoolean(data, ['canUseFeature']),
+        usageReason: readString(data, ['usageReason']) || undefined,
+        lastMessage: readString(data, ['message']) || undefined,
+        lastErrorCode: readString(data, ['errorCode']) || undefined,
+    };
+}
+function useFigmaLicenseBridge(options = {}) {
+    const messageTypes = React.useMemo(() => ({ ...DEFAULT_LICENSE_MESSAGE_TYPES, ...options.messageTypes }), [options.messageTypes]);
+    const [state, setState] = React.useState({
+        ...INITIAL_LICENSE_PAGE_STATE,
+        ...options.initialState,
+    });
+    const [isVerifying, setIsVerifying] = React.useState(false);
     const [isDeactivating, setIsDeactivating] = React.useState(false);
-    const [licenseKey, setLicenseKey] = React.useState(initialLicenseKey);
-    const [status, setStatus] = React.useState(initialStatus);
-    const [usageCount, setLocalUsageCount] = React.useState(initialUsageCount);
-    const [activationLimit, setActivationLimit] = React.useState(0);
-    const [activationUsage, setActivationUsage] = React.useState(0);
-    const [showDetails, setShowDetails] = React.useState(false);
+    const [isStartingAuth, setIsStartingAuth] = React.useState(false);
+    const optionsRef = React.useRef(options);
+    optionsRef.current = options;
+    const applyPatch = React.useCallback((patch) => {
+        setState((prev) => {
+            const next = {
+                ...prev,
+                ...Object.fromEntries(Object.entries(patch).filter(([, value]) => value !== undefined)),
+            };
+            optionsRef.current.onStateChange?.(next);
+            if (patch.paymentStatus) {
+                optionsRef.current.onPaymentStatusChange?.(patch.paymentStatus);
+            }
+            if (patch.usageCount !== undefined) {
+                optionsRef.current.onUsageCountChange?.(patch.usageCount);
+            }
+            return next;
+        });
+    }, []);
     React.useEffect(() => {
         const handleMessage = (event) => {
-            const { type, paymentStatus, licenseKey, activationLimit, activationUsage, success, message, usageCount } = event.data.pluginMessage || {};
-            if (type === 'update-plugin-status' || type === 'license-verification-result') {
-                if (paymentStatus)
-                    setStatus(paymentStatus);
-                if (licenseKey)
-                    setLicenseKey(licenseKey);
-                if (activationLimit !== undefined)
-                    setActivationLimit(activationLimit);
-                if (activationUsage !== undefined)
-                    setActivationUsage(activationUsage);
-                if (paymentStatus)
-                    setPaymentStatus(paymentStatus);
-                if (usageCount !== undefined) {
-                    setLocalUsageCount(usageCount);
-                    setUsageCount(usageCount);
-                }
+            const data = event.data?.pluginMessage;
+            if (!data || typeof data !== 'object')
+                return;
+            const payload = data;
+            const type = typeof payload.type === 'string' ? payload.type : '';
+            if (type === messageTypes.updateStatus) {
+                applyPatch(parseLicenseMessage(payload));
             }
-            if (type === 'license-verification-result') {
-                setIsSubmitting(false);
-                if (message)
-                    console.log('License verification:', message);
-                if (success) {
-                    setStatus('PAID');
-                    setPaymentStatus('PAID');
+            if (type === messageTypes.verifyResult) {
+                setIsVerifying(false);
+                setIsStartingAuth(false);
+                applyPatch(parseLicenseMessage(payload));
+                if (payload.success === true) {
+                    applyPatch({ paymentStatus: 'PAID', isLicenseRegistered: true });
                 }
             }
-            if (type === 'license-deactivation-result') {
+            if (type === messageTypes.deactivateResult) {
                 setIsDeactivating(false);
-                if (message)
-                    console.log('License deactivation:', message);
-                if (success) {
-                    setStatus('UNPAID');
-                    setPaymentStatus('UNPAID');
-                    setLicenseKey('');
-                    setLocalUsageCount(20);
-                    setActivationLimit(0);
-                    setActivationUsage(0);
+                applyPatch(parseLicenseMessage(payload));
+                if (payload.success === true) {
+                    applyPatch({
+                        paymentStatus: 'UNPAID',
+                        licenseKey: '',
+                        hasLicenseKey: false,
+                        isLicenseRegistered: false,
+                        activationLimit: 0,
+                        activationUsage: 0,
+                    });
+                }
+            }
+            if (type === 'designbase-auth-result') {
+                setIsStartingAuth(false);
+                if (payload.success === true) {
+                    applyPatch(parseLicenseMessage(payload));
+                }
+                else if (typeof payload.message === 'string') {
+                    applyPatch({ lastMessage: payload.message });
                 }
             }
         };
         window.addEventListener('message', handleMessage);
-        if (typeof parent !== 'undefined') {
-            parent.postMessage({ pluginMessage: { type: 'initialize' } }, '*');
-        }
+        postPluginMessage({ type: messageTypes.initialize });
         return () => window.removeEventListener('message', handleMessage);
-    }, [setPaymentStatus, setUsageCount]);
+    }, [applyPatch, messageTypes]);
+    const verifyLicense = React.useCallback((licenseKey) => {
+        setIsVerifying(true);
+        postPluginMessage({
+            type: messageTypes.verifyLicense,
+            licenseKey,
+        });
+    }, [messageTypes.verifyLicense]);
+    const deactivateLicense = React.useCallback(() => {
+        setIsDeactivating(true);
+        postPluginMessage({ type: messageTypes.deactivateLicense });
+    }, [messageTypes.deactivateLicense]);
+    const startDesignbaseAuth = React.useCallback(() => {
+        setIsStartingAuth(true);
+        postPluginMessage({ type: START_DESIGNBASE_AUTH_MESSAGE });
+    }, []);
+    return {
+        state,
+        isVerifying,
+        isDeactivating,
+        isStartingAuth,
+        verifyLicense,
+        deactivateLicense,
+        startDesignbaseAuth,
+        setLicenseKeyInput: (licenseKey) => applyPatch({ licenseKey }),
+    };
+}
+
+function formatUsageLabel(state, t) {
+    const { remainingUsage, usageUsed, usageLimit, usageReset } = state;
+    if (usageLimit === 'unlimited') {
+        return resolveText(t, { key: 'license.usage_unlimited' }, '사용 횟수 제한 없음');
+    }
+    const limit = typeof usageLimit === 'number' ? usageLimit : remainingUsage + usageUsed;
+    const remaining = remainingUsage ?? Math.max(0, limit - usageUsed);
+    if (usageReset === 'daily') {
+        const fallback = `오늘 남은 횟수 ${remaining}/${limit}`;
+        const translated = resolveText(t, { key: 'license.usage_daily' }, fallback);
+        return translated.includes(String(remaining)) ? translated : fallback;
+    }
+    if (usageReset === 'monthly') {
+        const fallback = `이번 달 남은 횟수 ${remaining}/${limit}`;
+        const translated = resolveText(t, { key: 'license.usage_monthly' }, fallback);
+        return translated.includes(String(remaining)) ? translated : fallback;
+    }
+    return `남은 횟수 ${remaining}/${limit}`;
+}
+const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicenseKey = '', wordpressLinks, paymentPageUrl, enableAccountAuth = true, showLicenseKeyInput = true, pricingFeatures, pricing, paymentType = 'subscription', messageTypes, onStateChange, setPaymentStatus, setUsageCount, onLicenseSubmit, usageCount: initialUsageCount = 0, t, className, }) => {
+    const links = React.useMemo(() => ({
+        purchaseUrl: wordpressLinks?.purchaseUrl ?? paymentPageUrl,
+        accountUrl: wordpressLinks?.accountUrl,
+        helpUrl: wordpressLinks?.helpUrl,
+    }), [wordpressLinks, paymentPageUrl]);
+    const { state, isVerifying, isDeactivating, isStartingAuth, verifyLicense, deactivateLicense, startDesignbaseAuth, setLicenseKeyInput, } = useFigmaLicenseBridge({
+        messageTypes,
+        initialState: {
+            paymentStatus: initialStatus,
+            licenseKey: initialLicenseKey,
+            usageCount: initialUsageCount,
+        },
+        onStateChange,
+        onPaymentStatusChange: setPaymentStatus,
+        onUsageCountChange: setUsageCount,
+    });
+    const [showDetails, setShowDetails] = React.useState(false);
+    const [licenseKeyDraft, setLicenseKeyDraft] = React.useState(initialLicenseKey);
+    const isPaid = state.isLicenseRegistered || state.paymentStatus === 'PAID';
+    const usageLabel = formatUsageLabel(state, t);
     const handleLicenseSubmit = async (submittedLicenseKey) => {
-        setIsSubmitting(true);
-        if (typeof parent !== 'undefined') {
-            parent.postMessage({
-                pluginMessage: {
-                    type: 'verify-license',
-                    licenseKey: submittedLicenseKey
-                }
-            }, '*');
+        if (onLicenseSubmit) {
+            await onLicenseSubmit(submittedLicenseKey);
+            return;
         }
+        verifyLicense(submittedLicenseKey);
     };
-    const handleDeactivateLicense = () => {
-        setIsDeactivating(true);
-        if (typeof parent !== 'undefined') {
-            parent.postMessage({
-                pluginMessage: { type: 'deactivate-license' }
-            }, '*');
-        }
+    const handleLicenseKeyChange = (value) => {
+        setLicenseKeyDraft(value);
+        setLicenseKeyInput(value);
     };
-    const isPaid = status === 'PAID';
     return (React.createElement("div", { className: `designbase-figma-page-license ${className || ''}` },
         React.createElement("div", { className: "designbase-figma-page-license__content" },
             React.createElement("div", { className: "designbase-figma-page-license__header" },
                 React.createElement("div", { className: "designbase-figma-page-license__title" },
-                    React.createElement("h2", null, isPaid ? resolveText(t, { key: 'license.pro_account' }, '프로 계정') : resolveText(t, { key: 'license.upgrade_to_pro' }, '프로로 업그레이드'))),
+                    React.createElement("h2", null, isPaid
+                        ? resolveText(t, { key: 'license.pro_account' }, '프로 계정')
+                        : resolveText(t, { key: 'license.upgrade_to_pro' }, '프로로 업그레이드')),
+                    state.planTier && state.planTier !== 'FREE' && (React.createElement("span", { className: "designbase-figma-page-license__tier" }, state.planTier))),
                 React.createElement("p", { className: "designbase-figma-page-license__description" }, isPaid
                     ? resolveText(t, { key: 'license.all_features_available' }, '모든 기능을 사용할 수 있습니다.')
-                    : resolveText(t, { key: 'license.purchase_for_unlimited' }, '라이선스 구매 후 무제한 접근이 가능합니다.'))),
+                    : resolveText(t, { key: 'license.purchase_for_unlimited' }, '디자인베이스 멤버십 또는 라이선스로 무제한 이용이 가능합니다.')),
+                !isPaid && (React.createElement("p", { className: "designbase-figma-page-license__usage" }, usageLabel))),
             React.createElement(PricingComparison, { features: pricingFeatures, pricing: pricing, paymentType: paymentType, t: t }),
+            state.lastMessage && (React.createElement("p", { className: `designbase-figma-page-license__feedback ${state.lastErrorCode ? 'designbase-figma-page-license__feedback--error' : ''}` }, state.lastMessage)),
             isPaid && (React.createElement("div", { className: "designbase-figma-page-license__section" },
                 React.createElement("div", { className: "designbase-figma-page-license__section-header" },
                     React.createElement("h3", null, resolveText(t, { key: 'license.activated' }, '라이선스 활성화됨')),
-                    React.createElement(ui.Button, { onClick: () => setShowDetails(!showDetails), variant: "tertiary", size: "s", iconOnly: true },
+                    React.createElement(react.Button, { onClick: () => setShowDetails(!showDetails), variant: "tertiary", size: "s", iconOnly: true },
                         React.createElement(icons.MoreHorizontalIcon, { size: 16 }))),
-                React.createElement("div", { className: "designbase-figma-page-license__license-key" },
+                state.licenseKey && (React.createElement("div", { className: "designbase-figma-page-license__license-key" },
                     resolveText(t, { key: 'license.key_label' }, '라이선스 키'),
                     ": ",
-                    React.createElement("span", null, licenseKey)),
+                    React.createElement("span", null, state.licenseKey))),
+                React.createElement("p", { className: "designbase-figma-page-license__usage" }, usageLabel),
                 showDetails && (React.createElement("div", { className: "designbase-figma-page-license__details" },
                     React.createElement("div", { className: "designbase-figma-page-license__activation-info" },
                         React.createElement("div", { className: "designbase-figma-page-license__remaining" },
-                            activationLimit - activationUsage,
-                            " ",
+                            Math.max(0, state.activationLimit - state.activationUsage),
+                            ' ',
                             resolveText(t, { key: 'license.activations_remaining' }, '활성'),
-                            " ",
+                            ' ',
                             resolveText(t, { key: 'license.spots_remaining' }, '자리 남음')),
-                        React.createElement("div", { className: "designbase-figma-page-license__usage" },
-                            activationUsage,
+                        React.createElement("div", { className: "designbase-figma-page-license__usage-count" },
+                            state.activationUsage,
                             "/",
-                            activationLimit)),
-                    React.createElement(ui.Button, { onClick: handleDeactivateLicense, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating
-                        ? resolveText(t, { key: 'license.deactivating' }, '비활성화중...')
+                            state.activationLimit)),
+                    React.createElement(react.Button, { onClick: deactivateLicense, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating
+                        ? resolveText(t, { key: 'license.deactivating' }, '비활성화 중...')
                         : resolveText(t, { key: 'license.deactivate' }, '라이선스 비활성화')))))),
-            !isPaid && (React.createElement("div", { className: "designbase-figma-page-license__section" },
-                React.createElement("div", { className: "designbase-figma-page-license__section-header" },
-                    React.createElement("h3", null, resolveText(t, { key: 'license.enter_key' }, '라이선스 키 입력')),
-                    paymentPageUrl && (React.createElement(ui.Button, { onClick: () => window.open(paymentPageUrl, '_blank'), variant: "primary", size: "s" },
-                        React.createElement("span", null, resolveText(t, { key: 'license.purchase' }, '라이선스 구매')),
-                        React.createElement(icons.ExternalLinkIcon, { size: 16 })))),
-                React.createElement(FormWithSubmit, { onLicenseSubmit: handleLicenseSubmit, disabled: false, isSubmitting: isSubmitting, value: licenseKey, onValueChange: setLicenseKey, label: { key: 'license.key' }, submitText: { key: 'license.submit' }, submittingText: { key: 'license.verifying' }, helperText: { key: 'license.enter_from_email' }, t: t })))),
-        React.createElement(ui.Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", "aria-label": "Close" },
+            !isPaid && (React.createElement(React.Fragment, null,
+                (enableAccountAuth || links.purchaseUrl || links.accountUrl) && (React.createElement("div", { className: "designbase-figma-page-license__section" },
+                    React.createElement("div", { className: "designbase-figma-page-license__section-header" },
+                        React.createElement("h3", null, resolveText(t, { key: 'license.designbase_account' }, '디자인베이스 계정'))),
+                    React.createElement("p", { className: "designbase-figma-page-license__hint" }, resolveText(t, { key: 'license.designbase_account_hint' }, 'WordPress 계정으로 로그인하거나 멤버십을 구매하면 플러그인이 자동으로 활성화됩니다.')),
+                    React.createElement("div", { className: "designbase-figma-page-license__actions" },
+                        enableAccountAuth && (React.createElement(react.Button, { onClick: startDesignbaseAuth, variant: "primary", size: "m", disabled: isStartingAuth || isVerifying, fullWidth: true }, isStartingAuth
+                            ? resolveText(t, { key: 'license.authenticating' }, '인증 중...')
+                            : resolveText(t, { key: 'license.login_with_designbase' }, '디자인베이스로 로그인'))),
+                        links.purchaseUrl && (React.createElement(react.Button, { onClick: () => openExternalUrl(links.purchaseUrl), variant: "secondary", size: "m", fullWidth: true },
+                            React.createElement("span", null, resolveText(t, { key: 'license.purchase_membership' }, '멤버십 구매')),
+                            React.createElement(icons.ExternalLinkIcon, { size: 16 }))),
+                        links.accountUrl && (React.createElement(react.Button, { onClick: () => openExternalUrl(links.accountUrl), variant: "tertiary", size: "s", fullWidth: true },
+                            React.createElement("span", null, resolveText(t, { key: 'license.manage_account' }, '계정·멤버십 관리')),
+                            React.createElement(icons.ExternalLinkIcon, { size: 16 })))))),
+                showLicenseKeyInput && (React.createElement("div", { className: "designbase-figma-page-license__section" },
+                    React.createElement("div", { className: "designbase-figma-page-license__section-header" },
+                        React.createElement("h3", null, resolveText(t, { key: 'license.enter_key' }, '라이선스 키 입력'))),
+                    React.createElement(FormWithSubmit, { onLicenseSubmit: handleLicenseSubmit, disabled: false, isSubmitting: isVerifying, value: licenseKeyDraft, onValueChange: handleLicenseKeyChange, label: { key: 'license.key' }, submitText: { key: 'license.submit' }, submittingText: { key: 'license.verifying' }, helperText: { key: 'license.enter_from_email' }, t: t }))))),
+            links.helpUrl && (React.createElement("p", { className: "designbase-figma-page-license__disclaimer" },
+                React.createElement("button", { type: "button", className: "designbase-figma-page-license__link", onClick: () => openExternalUrl(links.helpUrl) }, resolveText(t, { key: 'license.help_link' }, '라이선스·결제 도움말'))))),
+        React.createElement(react.Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", "aria-label": "Close" },
             React.createElement(icons.CloseIcon, { size: 20 }))));
 };
 PageLicense.displayName = 'PageLicense';
@@ -818,7 +1048,7 @@ const PaymentStatusSection = ({ status, usageCount, activationLimit, activationU
                     activationUsage,
                     "/",
                     activationLimit)),
-            React.createElement(ui.Button, { onClick: onDeactivate, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating
+            React.createElement(react.Button, { onClick: onDeactivate, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating
                 ? resolveText(t, { key: 'payment.deactivating' }, '비활성화중...')
                 : resolveText(t, { key: 'payment.deactivate_license' }, '라이선스 비활성화'))))));
 };
@@ -859,16 +1089,16 @@ const ProgressModal = ({ isOpen, onClose, progress, title = { key: 'progress.wor
     const displayStopText = resolveText(t, stopButtonText, '중지');
     const displayConfirmText = resolveText(t, confirmButtonText, '확인');
     const displayHelpText = resolveText(t, helpText);
-    return (React.createElement(ui.Modal, { isOpen: isOpen, onClose: isCompleted ? onClose : undefined, title: displayTitle, size: "s", className: modalClasses, showCloseButton: false },
+    return (React.createElement(react.Modal, { isOpen: isOpen, onClose: isCompleted ? onClose : undefined, title: displayTitle, size: "s", className: modalClasses, showCloseButton: false },
         React.createElement("div", { className: "designbase-figma-progress-modal__content" },
             React.createElement("div", { className: "designbase-figma-progress-modal__icon", "aria-hidden": "true" }, isCompleted ? (completeIcon || (React.createElement("div", { className: "designbase-figma-progress-modal__icon-success" },
                 React.createElement(icons.CircleCheckFilledIcon, null)))) : (loadingIcon || (React.createElement("div", { className: "designbase-figma-progress-modal__icon-loading" },
-                React.createElement(ui.Spinner, { size: "m" }))))),
+                React.createElement(react.Spinner, { size: "m" }))))),
             React.createElement("p", { className: "designbase-figma-progress-modal__message" }, displayMessage),
             React.createElement("div", { className: "designbase-figma-progress-modal__status" }, `${processedNodes} / ${totalNodes} (${progressPercentage.toFixed(1)}%)`),
-            React.createElement(ui.Progressbar, { value: progressPercentage, size: "m", variant: isCompleted ? 'success' : 'primary', style: "animated", fullWidth: true }),
+            React.createElement(react.Progressbar, { value: progressPercentage, size: "m", variant: isCompleted ? 'success' : 'primary', style: "animated", fullWidth: true }),
             displayHelpText && !isCompleted && (React.createElement("p", { className: "designbase-figma-progress-modal__help-text" }, displayHelpText)),
-            React.createElement("div", { className: "designbase-figma-progress-modal__actions" }, isCompleted ? (React.createElement(ui.Button, { onPress: handleConfirm, variant: "primary", size: "m", fullWidth: true }, displayConfirmText)) : (React.createElement(ui.Button, { onPress: handleStop, variant: "secondary", size: "m", fullWidth: true }, displayStopText))))));
+            React.createElement("div", { className: "designbase-figma-progress-modal__actions" }, isCompleted ? (React.createElement(react.Button, { onPress: handleConfirm, variant: "primary", size: "m", fullWidth: true }, displayConfirmText)) : (React.createElement(react.Button, { onPress: handleStop, variant: "secondary", size: "m", fullWidth: true }, displayStopText))))));
 };
 ProgressModal.displayName = 'ProgressModal';
 
@@ -1007,7 +1237,7 @@ const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categor
     const modalClasses = clsx('designbase-figma-settings-modal', className);
     const displayTitle = resolveText(t, title, '목록 변경');
     const displayDescription = resolveText(t, description, '드래그하여 순서를 변경하거나, 토글하여 카테고리를 숨길 수 있습니다.');
-    return (React.createElement(ui.Modal, { isOpen: isOpen, onClose: onClose, title: displayTitle, size: "m", className: modalClasses },
+    return (React.createElement(react.Modal, { isOpen: isOpen, onClose: onClose, title: displayTitle, size: "m", className: modalClasses },
         React.createElement("div", { className: "designbase-figma-settings-modal__content" },
             displayDescription && (React.createElement("p", { className: "designbase-figma-settings-modal__description" }, displayDescription)),
             React.createElement("ul", { className: "designbase-figma-settings-modal__list" }, tempCategories.map((category, index) => (React.createElement("li", { key: category.id, draggable: true, onDragStart: (e) => handleDragStart(e, index), onDragOver: handleDragOver, onDrop: (e) => handleDrop(e, index), onDragEnd: handleDragEnd, className: clsx('designbase-figma-settings-modal__item', {
@@ -1019,12 +1249,12 @@ const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categor
                         React.createElement(icons.GripVerticalIcon, { size: 16 })),
                     category.icon && (React.createElement("span", { className: "designbase-figma-settings-modal__category-icon" }, category.icon)),
                     React.createElement("span", { className: "designbase-figma-settings-modal__category-title" }, resolveText(t, category.title))),
-                React.createElement(ui.Toggle, { checked: category.enabled, onChange: () => handleToggle(category.id), size: "s" })))))),
+                React.createElement(react.Toggle, { checked: category.enabled, onChange: () => handleToggle(category.id), size: "s" })))))),
         React.createElement("div", { className: "designbase-figma-settings-modal__footer" },
-            onReset && (React.createElement(ui.Button, { onPress: handleReset, variant: "tertiary", size: "s" }, resolveText(t, { key: 'settings.reset' }, '초기화'))),
+            onReset && (React.createElement(react.Button, { onPress: handleReset, variant: "tertiary", size: "s" }, resolveText(t, { key: 'settings.reset' }, '초기화'))),
             React.createElement("div", { className: "designbase-figma-settings-modal__footer-right" },
-                React.createElement(ui.Button, { onPress: handleCancel, variant: "tertiary", size: "s" }, resolveText(t, { key: 'settings.cancel' }, '취소')),
-                React.createElement(ui.Button, { onPress: handleSave, variant: "primary", size: "s" }, resolveText(t, { key: 'settings.save' }, '저장'))))));
+                React.createElement(react.Button, { onPress: handleCancel, variant: "tertiary", size: "s" }, resolveText(t, { key: 'settings.cancel' }, '취소')),
+                React.createElement(react.Button, { onPress: handleSave, variant: "primary", size: "s" }, resolveText(t, { key: 'settings.save' }, '저장'))))));
 };
 SettingsModal.displayName = 'SettingsModal';
 
@@ -1067,12 +1297,13 @@ const UpgradeBanner = ({ onClick, variant = 'button', isLoading = false, title =
         React.createElement("div", { className: "designbase-figma-upgrade-banner__text-wrap" },
             React.createElement("h3", { className: "designbase-figma-upgrade-banner__title" }, displayTitle),
             React.createElement("p", { className: "designbase-figma-upgrade-banner__text" }, displayDescription)),
-        variant === 'button' ? (React.createElement(ui.Button, { onClick: onClick, variant: "primary", size: "m", disabled: isLoading }, displayButtonText)) : (React.createElement("div", { className: "designbase-figma-upgrade-banner__icon" },
+        variant === 'button' ? (React.createElement(react.Button, { onPress: onClick, variant: "primary", size: "m", disabled: isLoading }, displayButtonText)) : (React.createElement("div", { className: "designbase-figma-upgrade-banner__icon" },
             React.createElement(icons.ChevronRightIcon, { size: 20 })))));
-    return (React.createElement("div", { className: `designbase-figma-upgrade-banner designbase-figma-upgrade-banner--${variant} ${className || ''}` }, useGradient ? (React.createElement(ui.RandomGradient, { scheme: gradientScheme, tone: gradientTone, animated: gradientAnimated, height: "100%", width: "100%", className: "designbase-figma-upgrade-banner__gradient-bg" }, bannerContent)) : (bannerContent)));
+    return (React.createElement("div", { className: `designbase-figma-upgrade-banner designbase-figma-upgrade-banner--${variant} ${className || ''}` }, useGradient ? (React.createElement(react.RandomGradient, { scheme: gradientScheme, tone: gradientTone, animated: gradientAnimated, height: "100%", width: "100%", className: "designbase-figma-upgrade-banner__gradient-bg" }, bannerContent)) : (bannerContent)));
 };
 UpgradeBanner.displayName = 'UpgradeBanner';
 
+exports.DEFAULT_LICENSE_MESSAGE_TYPES = DEFAULT_LICENSE_MESSAGE_TYPES;
 exports.DonationBadge = DonationBadge;
 exports.FigmaContainer = FigmaContainer;
 exports.FigmaFooter = FigmaFooter;
@@ -1092,18 +1323,20 @@ exports.PaymentStatusSection = PaymentStatusSection;
 exports.PricingComparison = PricingComparison;
 exports.ProgressModal = ProgressModal;
 exports.ResizablePlugin = ResizablePlugin;
+exports.START_DESIGNBASE_AUTH_MESSAGE = START_DESIGNBASE_AUTH_MESSAGE;
 exports.SettingsModal = SettingsModal;
 exports.TitleDescription = TitleDescription;
 exports.UpgradeBanner = UpgradeBanner;
 exports.getActiveSection = getActiveSection;
 exports.resolveText = resolveText;
 exports.scrollToSection = scrollToSection;
+exports.useFigmaLicenseBridge = useFigmaLicenseBridge;
 exports.useFigmaToast = useFigmaToast;
 exports.useToast = useToast;
-Object.keys(ui).forEach(function (k) {
+Object.keys(react).forEach(function (k) {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
         enumerable: true,
-        get: function () { return ui[k]; }
+        get: function () { return react[k]; }
     });
 });
 //# sourceMappingURL=index.js.map