@designbasekorea/figma-ui 0.6.0 → 0.6.4

package/dist/index.esm.js

@@ -1,7 +1,7 @@
-import React, { useRef, useState, useEffect, createContext, useContext, useCallback } from 'react';
-import { HeartFilledIcon, CoffeeFilledIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronDownIcon, AppWindowIcon, YoutubeIcon, InstagramIcon, FigmaIcon, MailIcon, ExternalLinkIcon, CloseIcon, CircleCheckFilledIcon, ResizableIcon, GripVerticalIcon, ChevronRightIcon } from '@designbasekorea/icons';
-import { Button, Dropdown, Badge, Toggle, Spinner, SegmentControl, Logo, ToastContainer, Toast, Input, Modal, Progressbar, RandomGradient } from '@designbasekorea/ui';
-export * from '@designbasekorea/ui';
+import React, { useRef, useState, useLayoutEffect, useEffect, createContext, useContext, useCallback, useMemo } from 'react';
+import { Button, Dropdown, Badge, Toggle, Spinner, SegmentControl, Logo, Toast, Input, Modal, Progressbar, RandomGradient } from '@designbasekorea/ui-wc/react';
+export * from '@designbasekorea/ui-wc/react';
+import { ChevronDownIcon, AppWindowIcon, YoutubeIcon, InstagramIcon, FigmaIcon, MailIcon, ExternalLinkIcon, MoreHorizontalIcon, CloseIcon, CircleCheckFilledIcon, ResizableIcon, GripVerticalIcon, ChevronRightIcon } from '@designbasekorea/icons';
 
 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}
 
@@ -11,10 +11,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();
@@ -23,15 +33,12 @@ const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', te
             window.open(donationUrl, '_blank', 'noopener,noreferrer');
         }
     };
-    const Icon = iconType === 'heart' ? HeartFilledIcon : 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(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(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';
 
@@ -69,10 +76,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(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(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';
@@ -81,22 +89,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(Button, { variant: "tertiary", size: "s", iconOnly: true, onPress: onBack, "aria-label": "\uB4A4\uB85C\uAC00\uAE30" },
-                React.createElement(ChevronLeftIcon, { size: 14 })),
+            React.createElement(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(Dropdown, { trigger: React.createElement("button", { type: "button", className: "designbase-figma-page-head__more-button", "aria-label": "\uB354\uBCF4\uAE30" },
-                    React.createElement(MoreHorizontalIcon, { size: 16 })), items: dropdownItems, placement: "bottom-right", size: "s" })))));
+            moreActions.length > 0 && (React.createElement(Dropdown, { items: dropdownItems, triggerIcon: "more-horizontal", iconOnly: true, triggerVariant: "tertiary", placement: "bottom-right", size: "s", onChange: handleDropdownChange })))));
 };
 FigmaPageHead.displayName = 'FigmaPageHead';
 
@@ -105,7 +115,9 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
     const clipRef = useRef(null);
     const innerRef = useRef(null);
     const animatingRef = useRef(false);
+    const isInitialMountRef = useRef(true);
     const [collapsed, setCollapsed] = useState(defaultCollapsed);
+    const [contentHidden, setContentHidden] = useState(defaultCollapsed);
     const sectionStyle = marginBottom ? { marginBottom: `${marginBottom}px` } : undefined;
     const classes = [
         'designbase-figma-section',
@@ -118,38 +130,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')
@@ -159,6 +175,7 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
                 setH('auto');
             }
             animatingRef.current = false;
+            onComplete?.();
         };
         clip.addEventListener('transitionend', onEnd);
         window.setTimeout(() => {
@@ -167,15 +184,29 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
             if (!toCollapsed)
                 setH('auto');
             animatingRef.current = false;
+            onComplete?.();
         }, transitionMs + 50);
     };
-    useEffect(() => {
-        const clip = clipRef.current;
-        const inner = innerRef.current;
-        if (!clip || !inner)
+    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]);
     useEffect(() => {
         if (collapsed)
             return;
@@ -202,14 +233,14 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
                         ? resolveText(t, title)
                         : title,
                     badge && (React.createElement(Badge, { variant: "secondary", size: "s" }, badge)))),
-            React.createElement("div", { className: "designbase-figma-section__controls" },
+            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(ChevronDownIcon, { size: 16 }))),
                 onToggle && (React.createElement(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) => {
@@ -392,10 +423,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(SegmentControl, { options: segmentOptions, value: activeLanguage, onChange: handleLanguageChange, size: size, className: "designbase-figma-language-selector__segment" })));
+        React.createElement(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';
 
@@ -485,22 +521,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(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 = createContext(null);
 const useToast = () => {
     const context = useContext(ToastContext);
@@ -518,13 +561,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 = useCallback((id) => {
-        setToasts(prev => prev.filter(toast => toast.id !== id));
+        setToasts((prev) => prev.filter((toast) => toast.id !== id));
     }, []);
     const showToast = useCallback((message, options = {}) => {
         addToast({
@@ -543,17 +586,17 @@ const FigmaToastProvider = ({ children, position = 'top-right', maxToasts = 5, }
     };
     return (React.createElement(ToastContext.Provider, { value: contextValue },
         children,
-        React.createElement(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(Toast, { id: "figma-toast-simple", title: message, status: type, duration: duration, showProgress: false, showCloseButton: true, onClose: onClose, position: "top-right" })));
+        React.createElement(Toast, { toastId: "figma-toast-simple", title: message, status: type, duration: duration, showProgress: false, showClose: true, onClose: onClose })));
 };
 const useFigmaToast = () => {
     const [toast, setToast] = useState({ message: '', isVisible: false });
-    const showToast = useCallback((message, type = 'info') => {
+    const showToast = useCallback((message, _type = 'info') => {
         setToast({ message, isVisible: true });
         setTimeout(() => setToast({ message: '', isVisible: false }), 5000);
     }, []);
@@ -584,7 +627,12 @@ 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(Input, { value: inputValue, onChange: handleChange, placeholder: displayPlaceholder, helperText: displayHelperText, disabled: disabled || isSubmitting, size: "m" })),
+            React.createElement(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(Button, { type: "submit", variant: "primary", size: "m", loading: isSubmitting, disabled: !inputValue.trim() || isSubmitting || disabled, fullWidth: true }, isSubmitting ? displaySubmittingText : displaySubmitText)));
 };
 FormWithSubmit.displayName = 'FormWithSubmit';
@@ -637,18 +685,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(SegmentControl, { value: isYearly ? 'yearly' : 'monthly', onChange: (value) => setIsYearly(value === 'yearly'), options: [
+            React.createElement(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" },
@@ -676,123 +723,306 @@ 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] = 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 = useMemo(() => ({ ...DEFAULT_LICENSE_MESSAGE_TYPES, ...options.messageTypes }), [options.messageTypes]);
+    const [state, setState] = useState({
+        ...INITIAL_LICENSE_PAGE_STATE,
+        ...options.initialState,
+    });
+    const [isVerifying, setIsVerifying] = useState(false);
     const [isDeactivating, setIsDeactivating] = useState(false);
-    const [licenseKey, setLicenseKey] = useState(initialLicenseKey);
-    const [status, setStatus] = useState(initialStatus);
-    const [usageCount, setLocalUsageCount] = useState(initialUsageCount);
-    const [activationLimit, setActivationLimit] = useState(0);
-    const [activationUsage, setActivationUsage] = useState(0);
-    const [showDetails, setShowDetails] = useState(false);
+    const [isStartingAuth, setIsStartingAuth] = useState(false);
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    const applyPatch = 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;
+        });
+    }, []);
     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 = useCallback((licenseKey) => {
+        setIsVerifying(true);
+        postPluginMessage({
+            type: messageTypes.verifyLicense,
+            licenseKey,
+        });
+    }, [messageTypes.verifyLicense]);
+    const deactivateLicense = useCallback(() => {
+        setIsDeactivating(true);
+        postPluginMessage({ type: messageTypes.deactivateLicense });
+    }, [messageTypes.deactivateLicense]);
+    const startDesignbaseAuth = 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 = 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] = useState(false);
+    const [licenseKeyDraft, setLicenseKeyDraft] = 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(Button, { onClick: () => setShowDetails(!showDetails), variant: "tertiary", size: "s", iconOnly: true },
                         React.createElement(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(Button, { onClick: handleDeactivateLicense, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating
-                        ? resolveText(t, { key: 'license.deactivating' }, '비활성화중...')
+                            state.activationLimit)),
+                    React.createElement(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(Button, { onClick: () => window.open(paymentPageUrl, '_blank'), variant: "primary", size: "s" },
-                        React.createElement("span", null, resolveText(t, { key: 'license.purchase' }, '라이선스 구매')),
-                        React.createElement(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 })))),
+            !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(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(Button, { onClick: () => openExternalUrl(links.purchaseUrl), variant: "secondary", size: "m", fullWidth: true },
+                            React.createElement("span", null, resolveText(t, { key: 'license.purchase_membership' }, '멤버십 구매')),
+                            React.createElement(ExternalLinkIcon, { size: 16 }))),
+                        links.accountUrl && (React.createElement(Button, { onClick: () => openExternalUrl(links.accountUrl), variant: "tertiary", size: "s", fullWidth: true },
+                            React.createElement("span", null, resolveText(t, { key: 'license.manage_account' }, '계정·멤버십 관리')),
+                            React.createElement(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(Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", "aria-label": "Close" },
             React.createElement(CloseIcon, { size: 20 }))));
 };
@@ -1066,11 +1296,11 @@ 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(Button, { onClick: onClick, variant: "primary", size: "m", disabled: isLoading }, displayButtonText)) : (React.createElement("div", { className: "designbase-figma-upgrade-banner__icon" },
+        variant === 'button' ? (React.createElement(Button, { onPress: onClick, variant: "primary", size: "m", disabled: isLoading }, displayButtonText)) : (React.createElement("div", { className: "designbase-figma-upgrade-banner__icon" },
             React.createElement(ChevronRightIcon, { size: 20 })))));
     return (React.createElement("div", { className: `designbase-figma-upgrade-banner designbase-figma-upgrade-banner--${variant} ${className || ''}` }, useGradient ? (React.createElement(RandomGradient, { scheme: gradientScheme, tone: gradientTone, animated: gradientAnimated, height: "100%", width: "100%", className: "designbase-figma-upgrade-banner__gradient-bg" }, bannerContent)) : (bannerContent)));
 };
 UpgradeBanner.displayName = 'UpgradeBanner';
 
-export { DonationBadge, FigmaContainer, FigmaFooter, FigmaHeader, FigmaPageHead, FigmaSection, FigmaSidebar, FigmaToast, FigmaToastProvider, FormWithSubmit, InteractionFeedback, LanguageSelector, LogoDropdown, PageLicense, PaymentBadge, PaymentStatusSection, PricingComparison, ProgressModal, ResizablePlugin, SettingsModal, TitleDescription, UpgradeBanner, getActiveSection, resolveText, scrollToSection, useFigmaToast, useToast };
+export { DEFAULT_LICENSE_MESSAGE_TYPES, DonationBadge, FigmaContainer, FigmaFooter, FigmaHeader, FigmaPageHead, FigmaSection, FigmaSidebar, FigmaToast, FigmaToastProvider, FormWithSubmit, InteractionFeedback, LanguageSelector, LogoDropdown, PageLicense, PaymentBadge, PaymentStatusSection, PricingComparison, ProgressModal, ResizablePlugin, START_DESIGNBASE_AUTH_MESSAGE, SettingsModal, TitleDescription, UpgradeBanner, getActiveSection, resolveText, scrollToSection, useFigmaLicenseBridge, useFigmaToast, useToast };
 //# sourceMappingURL=index.esm.js.map