@designbasekorea/figma-ui 0.6.4 → 0.6.8

package/dist/index.esm.js

@@ -1,10 +1,19 @@
-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';
+import React, { useRef, useState, useLayoutEffect, useEffect, useId, createContext, useContext, useCallback, useMemo } from 'react';
+import { Button, Dropdown, Badge, Toggle, Modal, Logo, Toast, Input, Spinner, SegmentControl, 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';
+export { Accordion, ActivityHeatmap, AdBanner, AiChat, AiChatList, Alert, AnimationBackground, AnimationText, AppBadge, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, ChatComposer, ChatList, ChatMessage, ChatOrb, ChatRoom, ChatSuggestions, ChatTyping, ChatWelcome, ChatWidget, Checkbox, Chip, CodeBlock, ColorPicker, ColorSwatch, Confirm, Container, ContextMenu, CookieBanner, Countdown, CursorFollower, DatePicker, Divider, DownloadProgress, Drawer, Dropdown, Dropzone, EmailVerify, EmptyState, FileUploader, FloatingActionButton, Footer, Form, Gantt, Gradient, Grid, GridBackground, GridItem, Image, ImageList, ImagePlaceholder, Indicator, Input, Kanban, Label, Lightbox, List, Logo, MarkdownEditor, Marquee, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, OtpInput, PageHeader, Pagination, PhoneVerify, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SectionAppDownload, SectionContact, SectionCta, SectionFaq, SectionFeature, SectionFeatureGrid, SectionHero, SectionLogoCloud, SectionPricing, SectionStats, SectionTestimonials, SegmentControl, Select, Share, Sidebar, Signature, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Testimonial, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, TopBanner, Tutorial, TwoFactor, VideoPlayer, YouTubePlayer, useContextMenu } from '@designbasekorea/ui-wc/react';
+import { ChevronDownIcon, AppWindowIcon, YoutubeIcon, InstagramIcon, FigmaIcon, MailIcon, ExternalLinkIcon, TranslateIcon, 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}
 
+function interpolateText(template, values) {
+    if (!values)
+        return template;
+    return Object.entries(values).reduce((result, [key, value]) => {
+        const replacement = value == null ? '' : String(value);
+        return result.replace(new RegExp(`\\{\\{${key}\\}\\}`, 'g'), replacement);
+    }, template);
+}
 function resolveText(t, input, fallback) {
     if (input == null)
         return fallback;
@@ -14,10 +23,13 @@ function resolveText(t, input, fallback) {
     if (t) {
         const translated = t(input.key, input.values);
         if (translated && translated !== input.key) {
-            return translated;
+            return interpolateText(translated, input.values);
         }
     }
-    return fallback ?? input.key;
+    if (fallback) {
+        return interpolateText(fallback, input.values);
+    }
+    return input.key;
 }
 
 const DONATION_ICON_NAMES = {
@@ -383,58 +395,63 @@ const FigmaSidebar = ({ categories, categoryGroups = {}, categoryLabels = {}, ac
 };
 FigmaSidebar.displayName = 'FigmaSidebar';
 
-const PaymentBadge = ({ isActive, onClick, isLoading = false, text, t = (key) => key, className, }) => {
-    const getBadgeText = () => {
-        if (text)
-            return text;
-        return isActive
-            ? (t('proUser') || '프로 계정')
-            : (t('usingFree') || '무료 사용');
-    };
-    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(Spinner, { size: "s" })) : (React.createElement(Badge, { variant: getBadgeVariant(), size: "s", className: "designbase-figma-payment-badge__badge" }, getBadgeText()))));
-};
-PaymentBadge.displayName = 'PaymentBadge';
-
-let useTranslation = null;
+let useTranslation$2 = null;
 try {
     const reactI18next = require('react-i18next');
-    useTranslation = reactI18next.useTranslation;
+    useTranslation$2 = reactI18next.useTranslation;
 }
 catch (e) {
 }
-const DEFAULT_LANGUAGES = [
-    { code: 'ko', label: 'KO' },
-    { code: 'en', label: 'EN' },
+const DEFAULT_LANGUAGES$1 = [
+    { code: 'ko', label: '한국어' },
+    { code: 'en', label: 'English' },
+    { code: 'ja', label: '日本語' },
 ];
-const LanguageSelector = ({ currentLanguage, languages = DEFAULT_LANGUAGES, onLanguageChange, size = 's', className, t }) => {
-    const i18n = useTranslation ? useTranslation().i18n : null;
-    const activeLanguage = currentLanguage || (i18n?.language) || 'ko';
-    const handleLanguageChange = (languageCode) => {
+const defaultT$2 = (key) => {
+    const translations = {
+        languageSettings: '언어 설정',
+        languageSettingsDescription: '플러그인에 표시할 언어를 선택하세요.',
+        'language.korean': '한국어',
+        'language.english': 'English',
+        'language.japanese': '日本語',
+    };
+    return translations[key] || key;
+};
+const LanguageSettingsModal = ({ isOpen, onClose, languages = DEFAULT_LANGUAGES$1, currentLanguage, onLanguageChange, title, description, className, t = defaultT$2, }) => {
+    const i18n = useTranslation$2 ? useTranslation$2().i18n : null;
+    const activeLanguage = currentLanguage || i18n?.language || languages[0]?.code;
+    const translate = (key, fallback) => {
+        const translated = t(key);
+        return translated && translated !== key ? translated : fallback;
+    };
+    const handleSelect = (languageCode) => {
         if (i18n) {
             i18n.changeLanguage(languageCode);
         }
-        if (onLanguageChange) {
-            onLanguageChange(languageCode);
-        }
+        onLanguageChange?.(languageCode);
+        onClose();
     };
-    const segmentOptions = languages.map((language) => ({
-        value: language.code,
-        label: resolveText(t, language.label),
-        disabled: false,
-    }));
-    return (React.createElement("div", { className: `designbase-figma-language-selector ${className || ''}` },
-        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" })));
+    return (React.createElement(Modal, { isOpen: isOpen, onClose: onClose, title: title || translate('languageSettings', '언어 설정'), size: "s", className: clsx('designbase-figma-language-settings-modal', className) },
+        React.createElement("div", { className: "designbase-figma-language-settings-modal__content" },
+            React.createElement("p", { className: "designbase-figma-language-settings-modal__description" }, description || translate('languageSettingsDescription', '플러그인에 표시할 언어를 선택하세요.')),
+            React.createElement("ul", { className: "designbase-figma-language-settings-modal__list", role: "listbox", "aria-label": translate('languageSettings', '언어 설정') }, languages.map((language) => {
+                const label = resolveText(t, language.label, language.code.toUpperCase());
+                const isActive = language.code === activeLanguage;
+                return (React.createElement("li", { key: language.code, role: "presentation" },
+                    React.createElement("button", { type: "button", className: clsx('designbase-figma-language-settings-modal__option', { 'designbase-figma-language-settings-modal__option--active': isActive }), role: "option", "aria-selected": isActive, onClick: () => handleSelect(language.code) },
+                        React.createElement("span", { className: "designbase-figma-language-settings-modal__option-label" }, label),
+                        React.createElement("span", { className: "designbase-figma-language-settings-modal__option-indicator", "aria-hidden": "true" }))));
+            })))));
 };
-LanguageSelector.displayName = 'LanguageSelector';
+LanguageSettingsModal.displayName = 'LanguageSettingsModal';
 
+let useTranslation$1 = null;
+try {
+    const reactI18next = require('react-i18next');
+    useTranslation$1 = reactI18next.useTranslation;
+}
+catch (e) {
+}
 const defaultLinks = [
     {
         name: 'officialWebsite',
@@ -468,50 +485,219 @@ const defaultTranslations$1 = {
     instagram: '인스타그램',
     figmaCommunity: '피그마 커뮤니티',
     contact: '문의하기',
+    languageSettings: '언어 설정',
 };
 const defaultT$1 = (key) => defaultTranslations$1[key] || key;
-const LogoDropdown = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', links = defaultLinks, position = 'top-left', className, t = defaultT$1, }) => {
+const defaultLanguages = [
+    { code: 'ko', label: '한국어' },
+    { code: 'en', label: 'English' },
+    { code: 'ja', label: '日本語' },
+];
+const LogoDropdown = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', links = defaultLinks, position = 'top-left', className, t = defaultT$1, showLanguageSelector = true, languages = defaultLanguages, currentLanguage, onLanguageChange, }) => {
     const [isOpen, setIsOpen] = useState(false);
-    const toggleDropdown = () => setIsOpen(!isOpen);
+    const [isLanguageModalOpen, setIsLanguageModalOpen] = useState(false);
+    const i18n = useTranslation$1 ? useTranslation$1().i18n : null;
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const menuId = `designbase-figma-logo-menu-${useId().replace(/:/g, '')}`;
+    const activeLanguage = currentLanguage || i18n?.language || languages[0]?.code;
+    const translate = (key, fallback) => {
+        const translated = t(key);
+        return translated && translated !== key ? translated : fallback;
+    };
+    useEffect(() => {
+        if (!isOpen) {
+            return undefined;
+        }
+        const handlePointerDown = (event) => {
+            if (!rootRef.current?.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                setIsOpen(false);
+                triggerRef.current?.focus();
+            }
+        };
+        document.addEventListener('mousedown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen]);
+    const toggleDropdown = () => setIsOpen((value) => !value);
     const handleLinkClick = (url) => {
+        setIsOpen(false);
         if (url.startsWith('mailto:')) {
             return;
         }
         window.open(url, '_blank', 'noopener,noreferrer');
     };
+    const handleLanguageSettingsClick = () => {
+        setIsOpen(false);
+        setIsLanguageModalOpen(true);
+    };
+    const handleLanguageChange = (languageCode) => {
+        if (i18n) {
+            i18n.changeLanguage(languageCode);
+        }
+        onLanguageChange?.(languageCode);
+    };
     const classes = clsx('designbase-figma-logo-dropdown', `designbase-figma-logo-dropdown--${position}`, {
         'designbase-figma-logo-dropdown--open': isOpen,
     }, className);
     const renderLogo = () => {
-        if (logoSrc) {
-            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(Logo, { type: logoType, size: logoSize, variant: "default" })));
+        return (React.createElement("button", { ref: triggerRef, type: "button", className: "designbase-figma-logo-dropdown__logo", "aria-label": logoAlt, "aria-expanded": isOpen, "aria-controls": menuId, "aria-haspopup": "menu", onClick: toggleDropdown }, logoSrc ? (React.createElement("img", { src: logoSrc, alt: "" })) : (React.createElement(Logo, { type: logoType, size: logoSize, variant: "default" }))));
     };
-    return (React.createElement("div", { className: classes },
+    return (React.createElement("div", { ref: rootRef, className: classes },
         renderLogo(),
-        isOpen && (React.createElement("ul", { className: "designbase-figma-logo-dropdown__menu" }, links.map((link, index) => (React.createElement("li", { key: index, className: "designbase-figma-logo-dropdown__item" },
-            React.createElement("button", { type: "button", className: "designbase-figma-logo-dropdown__link", onClick: () => handleLinkClick(link.url) },
-                link.icon && (React.createElement("span", { className: "designbase-figma-logo-dropdown__icon" }, link.icon)),
-                React.createElement("span", { className: "designbase-figma-logo-dropdown__text" }, t(link.name)),
-                React.createElement(ExternalLinkIcon, { size: 16, className: "designbase-figma-logo-dropdown__arrow" })))))))));
+        isOpen && (React.createElement("ul", { id: menuId, className: "designbase-figma-logo-dropdown__menu", role: "menu" },
+            links.map((link, index) => (React.createElement("li", { key: index, className: "designbase-figma-logo-dropdown__item", role: "none" },
+                React.createElement("button", { type: "button", className: "designbase-figma-logo-dropdown__link", role: "menuitem", onClick: () => handleLinkClick(link.url) },
+                    link.icon && (React.createElement("span", { className: "designbase-figma-logo-dropdown__icon" }, link.icon)),
+                    React.createElement("span", { className: "designbase-figma-logo-dropdown__text" }, t(link.name)),
+                    React.createElement(ExternalLinkIcon, { size: 16, className: "designbase-figma-logo-dropdown__arrow" }))))),
+            showLanguageSelector && (React.createElement("li", { className: "designbase-figma-logo-dropdown__item designbase-figma-logo-dropdown__language-item", role: "none" },
+                React.createElement("button", { type: "button", className: "designbase-figma-logo-dropdown__link", role: "menuitem", onClick: handleLanguageSettingsClick },
+                    React.createElement("span", { className: "designbase-figma-logo-dropdown__icon" },
+                        React.createElement(TranslateIcon, { size: 20, "aria-hidden": "true" })),
+                    React.createElement("span", { className: "designbase-figma-logo-dropdown__text" }, translate('languageSettings', '언어 설정'))))))),
+        showLanguageSelector && (React.createElement(LanguageSettingsModal, { isOpen: isLanguageModalOpen, onClose: () => setIsLanguageModalOpen(false), languages: languages, currentLanguage: activeLanguage, onLanguageChange: handleLanguageChange, t: t }))));
 };
 LogoDropdown.displayName = 'LogoDropdown';
 
+const fallbackText = (t, key, fallback) => {
+    const translated = t?.(key);
+    return translated && translated !== key ? translated : fallback;
+};
+const UsageStatusPopover = ({ paymentStatus, usageCount = 0, maxDailyUsage = 20, showUsage = true, showPlan = true, isLoading = false, onLicensePageClick, t, className, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const popoverId = `designbase-figma-usage-popover-${useId().replace(/:/g, '')}`;
+    const isPaid = paymentStatus === 'PAID';
+    const isBeta = paymentStatus === 'BETA';
+    const hasDailyLimit = !isPaid && maxDailyUsage > 0;
+    const limit = Math.max(1, Math.round(maxDailyUsage));
+    const used = Math.min(limit, Math.max(0, Math.round(usageCount)));
+    const remaining = Math.max(0, limit - used);
+    const usedPercent = hasDailyLimit ? Math.round((used / limit) * 100) : 0;
+    const hasControl = showUsage || showPlan;
+    const planLabel = isPaid
+        ? fallbackText(t, 'proUser', '프로')
+        : isBeta
+            ? fallbackText(t, 'betaStatus', 'BETA')
+            : paymentStatus === 'TRIAL'
+                ? fallbackText(t, 'trialPlan', '체험판')
+                : fallbackText(t, 'free', '무료');
+    const planTitle = isBeta
+        ? planLabel
+        : `${planLabel} ${fallbackText(t, 'planSuffix', '플랜')}`;
+    const triggerLabel = isPaid
+        ? `${planLabel}, ${fallbackText(t, 'unlimitedUsage', '무제한 사용 가능')}`
+        : isBeta
+            ? planLabel
+            : hasDailyLimit
+                ? `${remaining}/${limit} ${fallbackText(t, 'remainingShort', '남음')}`
+                : planLabel;
+    const upgradeLabel = isPaid
+        ? fallbackText(t, 'managePlan', '플랜 관리')
+        : fallbackText(t, 'upgradePlan', '플랜 업그레이드');
+    useEffect(() => {
+        if (!isOpen)
+            return undefined;
+        const handlePointerDown = (event) => {
+            if (!rootRef.current?.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                setIsOpen(false);
+                triggerRef.current?.focus();
+            }
+        };
+        document.addEventListener('mousedown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen]);
+    if (!hasControl)
+        return null;
+    const handleManageClick = () => {
+        setIsOpen(false);
+        onLicensePageClick?.();
+    };
+    const togglePopover = () => setIsOpen((value) => !value);
+    return (React.createElement("div", { ref: rootRef, className: clsx('designbase-figma-usage-status', {
+            'designbase-figma-usage-status--open': isOpen,
+            'designbase-figma-usage-status--unlimited': isPaid,
+            'designbase-figma-usage-status--loading': isLoading,
+        }, className) },
+        React.createElement("div", { className: "designbase-figma-usage-status__control" },
+            showUsage && (React.createElement("button", { ref: triggerRef, type: "button", className: "designbase-figma-usage-status__trigger", "aria-expanded": isOpen, "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": isLoading ? fallbackText(t, 'loading', '불러오는 중') : triggerLabel, disabled: isLoading, onClick: togglePopover }, isLoading ? (React.createElement("span", { className: "designbase-figma-usage-status__skeleton", "aria-hidden": "true" })) : isPaid ? (React.createElement("span", { className: "designbase-figma-usage-status__unlimited-mark", "aria-hidden": "true" }, "\u221E")) : hasDailyLimit ? (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: "designbase-figma-usage-status__mini-progress", "aria-hidden": "true" },
+                    React.createElement("span", { style: { width: `${usedPercent}%` } })),
+                React.createElement("span", { className: "designbase-figma-usage-status__usage-value" },
+                    React.createElement("strong", null, remaining),
+                    React.createElement("span", null,
+                        "/",
+                        limit)))) : (React.createElement("span", { className: "designbase-figma-usage-status__plan-label" }, planLabel)))),
+            showPlan && !isLoading && (React.createElement("button", { type: "button", className: "designbase-figma-usage-status__plan-badge", "aria-expanded": isOpen, "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": planTitle, onClick: togglePopover }, planLabel))),
+        isOpen && (React.createElement("div", { id: popoverId, className: "designbase-figma-usage-status__popover", role: "dialog", "aria-label": fallbackText(t, 'usageDetails', '사용량 상세') },
+            React.createElement("div", { className: "designbase-figma-usage-status__popover-header" },
+                React.createElement("span", { className: "designbase-figma-usage-status__plan-title" }, planTitle),
+                !isBeta && (React.createElement(Button, { className: "designbase-figma-usage-status__upgrade", variant: isPaid ? 'secondary' : 'primary', size: "s", endIcon: "chevron-right", onPress: handleManageClick }, upgradeLabel))),
+            isPaid ? (React.createElement("div", { className: "designbase-figma-usage-status__unlimited-copy" },
+                React.createElement("span", { className: "designbase-figma-usage-status__unlimited-mark", "aria-hidden": "true" }, "\u221E"),
+                React.createElement("span", null, fallbackText(t, 'unlimitedUsageTooltip', '모든 기능을 제한 없이 사용할 수 있습니다')))) : isBeta ? (React.createElement("p", { className: "designbase-figma-usage-status__note" }, fallbackText(t, 'betaUsageDescription', '베타 기간에는 사용량 제한이 적용되지 않습니다'))) : hasDailyLimit ? (React.createElement("div", { className: "designbase-figma-usage-status__usage-detail" },
+                React.createElement("div", { className: "designbase-figma-usage-status__usage-summary" },
+                    React.createElement("strong", { className: "designbase-figma-usage-status__usage-count" },
+                        used,
+                        React.createElement("span", { className: "designbase-figma-usage-status__usage-divider" }, "/"),
+                        limit),
+                    React.createElement("span", { className: "designbase-figma-usage-status__usage-caption" }, fallbackText(t, 'usageCountCaption', '오늘 사용'))),
+                React.createElement("div", { className: "designbase-figma-usage-status__progress", role: "progressbar", "aria-label": fallbackText(t, 'usageCountCaption', '오늘 사용'), "aria-valuemin": 0, "aria-valuemax": limit, "aria-valuenow": used, "aria-valuetext": `${used} / ${limit}` },
+                    React.createElement("span", { style: { width: `${usedPercent}%` } })),
+                React.createElement("p", { className: "designbase-figma-usage-status__remaining-copy" }, resolveText(t, { key: 'remainingCopy', values: { count: remaining } }, `${remaining}회 남음 · 매일 리셋`)))) : (React.createElement("p", { className: "designbase-figma-usage-status__note" }, fallbackText(t, 'usageUnavailable', '사용량 제한이 없습니다')))))));
+};
+UsageStatusPopover.displayName = 'UsageStatusPopover';
+
 const defaultTranslations = {
     unlimitedUsage: '무제한 사용',
+    proUser: '프로',
+    free: '무료',
+    trialPlan: '체험판',
+    planSuffix: '플랜',
+    usageDetails: '사용량 상세',
+    dailyUsage: '오늘 사용량',
+    usedToday: '오늘 사용',
+    remainingToday: '오늘 남은 사용량',
+    remainingUsage: '오늘 남은 사용량',
+    managePlan: '플랜 관리',
+    upgradePlan: '플랜 업그레이드',
+    remainingShort: '남음',
+    usageCountCaption: '오늘 사용',
+    remainingCopy: '{{count}}회 남음 · 매일 리셋',
+    usageUnavailable: '사용량 제한이 없습니다',
+    betaUsageDescription: '베타 기간에는 사용량 제한이 적용되지 않습니다',
     perDay: '일',
     resetsDaily: '매일 리셋',
     donationPrompt: '이 플러그인이 유용했나요?',
     betaStatus: 'BETA',
 };
-const defaultT = (key) => defaultTranslations[key] || key;
-const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount = 0, isLoading = false, showPaymentStatus = true, showUsageInfo = true, maxDailyUsage = 20, showPaymentBadge = true, showDonation = true, donationUrl = 'https://buymeacoffee.com/designbase', donationText = 'Buy me a coffee', showDonationText = true, donationPromptText, showLanguageSelector = false, currentLanguage = 'ko', languages, onLanguageChange, logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', logoLinks, className, t = defaultT, children, }) => {
-    const isActive = paymentStatus === 'PAID';
-    const isBeta = paymentStatus === 'BETA';
-    const resolvedShowUsageInfo = showUsageInfo && !isLoading && !isBeta;
+const defaultT = (key, values) => {
+    const template = defaultTranslations[key] || key;
+    return interpolateText(template, values);
+};
+const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount = 0, isLoading = false, showPaymentStatus = true, showUsageInfo = true, maxDailyUsage = 20, showPaymentBadge = true, showDonation = true, donationUrl = 'https://buymeacoffee.com/designbase', donationText = 'Buy me a coffee', showDonationText = true, donationPromptText, showLanguageSelector = true, currentLanguage = 'ko', languages, onLanguageChange, logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', logoLinks, className, t = defaultT, children, }) => {
+    const resolvedShowUsageInfo = showPaymentStatus && showUsageInfo;
     const resolvedShowPaymentBadge = showPaymentStatus && showPaymentBadge;
+    const resolvedLicensePageClick = paymentStatus === 'BETA' ? undefined : onLicensePageClick;
     const hasChildren = React.Children.count(children) > 0;
     const classes = clsx('designbase-figma-footer', {
         'designbase-figma-footer--has-children': hasChildren,
@@ -519,17 +705,9 @@ const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount =
     return (React.createElement("footer", { className: classes },
         React.createElement("div", { className: "designbase-figma-footer__wrap" },
             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" }))),
+                React.createElement(LogoDropdown, { logoSrc: logoSrc, logoAlt: logoAlt, logoType: logoType, logoSize: logoSize, links: logoLinks, languages: languages, currentLanguage: currentLanguage, showLanguageSelector: showLanguageSelector, onLanguageChange: onLanguageChange, 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 })),
+                (resolvedShowUsageInfo || resolvedShowPaymentBadge) && (React.createElement(UsageStatusPopover, { paymentStatus: paymentStatus, usageCount: usageCount, maxDailyUsage: maxDailyUsage, showUsage: resolvedShowUsageInfo, showPlan: resolvedShowPaymentBadge, isLoading: isLoading, onLicensePageClick: resolvedLicensePageClick, t: t })),
                 showDonation && (React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s", iconOnly: true, showPrompt: false, t: t })))),
         children));
 };
@@ -653,6 +831,205 @@ const InteractionFeedback = ({ status = 'default', message, statusMessage, leftC
 };
 InteractionFeedback.displayName = 'InteractionFeedback';
 
+let useTranslation = null;
+try {
+    const reactI18next = require('react-i18next');
+    useTranslation = reactI18next.useTranslation;
+}
+catch (e) {
+}
+const DEFAULT_LANGUAGES = [
+    { code: 'ko', label: 'KO' },
+    { code: 'en', label: 'EN' },
+];
+const LanguageSelector = ({ currentLanguage, languages = DEFAULT_LANGUAGES, onLanguageChange, size = 's', className, t }) => {
+    const i18n = useTranslation ? useTranslation().i18n : null;
+    const activeLanguage = currentLanguage || (i18n?.language) || 'ko';
+    const handleLanguageChange = (languageCode) => {
+        if (i18n) {
+            i18n.changeLanguage(languageCode);
+        }
+        if (onLanguageChange) {
+            onLanguageChange(languageCode);
+        }
+    };
+    const segmentOptions = languages.map((language) => ({
+        value: language.code,
+        label: resolveText(t, language.label),
+        disabled: false,
+    }));
+    return (React.createElement("div", { className: `designbase-figma-language-selector ${className || ''}` },
+        React.createElement(SegmentControl, { options: segmentOptions, value: activeLanguage, onChange: (event) => {
+                const detail = event.detail;
+                const value = typeof detail === 'object' && detail !== null && 'value' in detail &&
+                    typeof detail.value === 'string'
+                    ? detail.value
+                    : undefined;
+                if (value) {
+                    handleLanguageChange(value);
+                }
+            }, size: size, className: "designbase-figma-language-selector__segment" })));
+};
+LanguageSelector.displayName = 'LanguageSelector';
+
+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 LicenseOffer = ({ joinUrl, guideUrl, membershipUrl, t, className, }) => {
+    const titleId = `designbase-license-offer-title-${useId().replace(/:/g, '')}`;
+    const resolvedJoinUrl = joinUrl || membershipUrl;
+    const steps = [
+        resolveText(t, { key: 'license.youtube_membership_step_1' }, 'Designbase YouTube 채널 멤버십에 가입합니다.'),
+        resolveText(t, { key: 'license.youtube_membership_step_2' }, '멤버 전용 커뮤니티에서 이번 달 키를 복사합니다.'),
+        resolveText(t, { key: 'license.youtube_membership_step_3' }, '아래 입력창에 키를 붙여 넣고 활성화합니다.'),
+    ];
+    return (React.createElement("section", { className: `designbase-figma-license-offer ${className || ''}`, "aria-labelledby": titleId },
+        React.createElement("h3", { id: titleId, className: "designbase-figma-license-offer__title" }, resolveText(t, { key: 'license.youtube_membership_howto' }, '이용 방법')),
+        React.createElement("ol", { className: "designbase-figma-license-offer__steps" }, steps.map((step, index) => (React.createElement("li", { key: index },
+            React.createElement("span", { className: "designbase-figma-license-offer__step-index", "aria-hidden": "true" },
+                index + 1,
+                "."),
+            React.createElement("span", null, step))))),
+        (resolvedJoinUrl || guideUrl) && (React.createElement("div", { className: "designbase-figma-license-offer__actions" },
+            resolvedJoinUrl && (React.createElement(Button, { onPress: () => openExternalUrl(resolvedJoinUrl), variant: "primary", size: "m", fullWidth: true }, resolveText(t, { key: 'license.youtube_membership_join' }, '멤버십 가입'))),
+            guideUrl && (React.createElement(Button, { onPress: () => openExternalUrl(guideUrl), variant: "secondary", size: "m", fullWidth: true },
+                React.createElement("span", null, resolveText(t, { key: 'license.youtube_membership_guide' }, '안내보기')),
+                React.createElement(ExternalLinkIcon, { size: 16, "aria-hidden": "true" })))))));
+};
+LicenseOffer.displayName = 'LicenseOffer';
+
+function maskLicenseKey(value) {
+    if (value.length <= 8)
+        return '••••••••';
+    return `${value.slice(0, 4)}••••${value.slice(-4)}`;
+}
+function formatDate(value) {
+    if (!value)
+        return undefined;
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return value;
+    return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(date);
+}
+function formatScope(value, t) {
+    if (!value)
+        return undefined;
+    if (value === 'all-products' || value === 'all_products') {
+        return resolveText(t, { key: 'license.all_plugins' }, '모든 플러그인');
+    }
+    return value;
+}
+function formatSource(value, t) {
+    if (!value)
+        return undefined;
+    if (value === 'youtube_membership' || value === 'membership') {
+        return resolveText(t, { key: 'license.source_youtube_membership' }, 'YouTube 멤버십');
+    }
+    if (value === 'lemonsqueezy') {
+        return resolveText(t, { key: 'license.source_purchase' }, '구매 라이선스');
+    }
+    return value;
+}
+const LicenseStatusCard = ({ status, licenseKey = '', licenseStatus, licenseSource, accessScope, expiresAt, lastVerifiedAt, validationMessage, allowRevealKey = false, t, className, }) => {
+    const [isKeyRevealed, setIsKeyRevealed] = useState(false);
+    const normalizedLicenseStatus = licenseStatus?.toLowerCase();
+    const isInactiveStatus = ['expired', 'revoked', 'invalid', 'inactive'].includes(normalizedLicenseStatus || '');
+    const isActive = status === 'PAID' && !isInactiveStatus;
+    const statusText = isActive
+        ? resolveText(t, { key: 'license.status_active' }, 'Active')
+        : resolveText(t, { key: 'license.status_inactive' }, 'License check failed');
+    const statusClass = isActive ? 'active' : 'inactive';
+    return (React.createElement("section", { className: `designbase-figma-license-status-card designbase-figma-license-status-card--${statusClass} ${className || ''}`, "aria-label": statusText },
+        React.createElement("div", { className: "designbase-figma-license-status-card__header" },
+            React.createElement("div", null,
+                React.createElement("div", { className: "designbase-figma-license-status-card__eyebrow" }, isActive
+                    ? resolveText(t, { key: 'license.activated' }, '라이선스 활성화됨')
+                    : resolveText(t, { key: 'license.status_label' }, '라이선스 상태')),
+                React.createElement("h3", null, statusText)),
+            React.createElement("span", { className: "designbase-figma-license-status-card__badge" }, licenseStatus || (isActive ? 'active' : 'inactive'))),
+        validationMessage && !isActive && (React.createElement("p", { className: "designbase-figma-license-status-card__message" }, validationMessage)),
+        licenseKey && (React.createElement("div", { className: "designbase-figma-license-status-card__key-row" },
+            React.createElement("span", null, resolveText(t, { key: 'license.key_label' }, '라이선스 키')),
+            React.createElement("code", null, allowRevealKey && isKeyRevealed ? licenseKey : maskLicenseKey(licenseKey)),
+            allowRevealKey && (React.createElement(Button, { type: "button", onPress: () => setIsKeyRevealed((value) => !value), variant: "tertiary", size: "s" }, isKeyRevealed
+                ? resolveText(t, { key: 'license.hide_key' }, '숨기기')
+                : resolveText(t, { key: 'license.reveal_key' }, '보기'))))),
+        (licenseSource || accessScope || expiresAt || lastVerifiedAt) && (React.createElement("dl", { className: "designbase-figma-license-status-card__meta" },
+            formatSource(licenseSource, t) && React.createElement(React.Fragment, null,
+                React.createElement("dt", null, resolveText(t, { key: 'license.source' }, '출처')),
+                React.createElement("dd", null, formatSource(licenseSource, t))),
+            formatScope(accessScope, t) && React.createElement(React.Fragment, null,
+                React.createElement("dt", null, resolveText(t, { key: 'license.access' }, '접근 범위')),
+                React.createElement("dd", null, formatScope(accessScope, t))),
+            expiresAt && React.createElement(React.Fragment, null,
+                React.createElement("dt", null, resolveText(t, { key: 'license.expires' }, '만료일')),
+                React.createElement("dd", null, formatDate(expiresAt) || expiresAt)),
+            lastVerifiedAt && React.createElement(React.Fragment, null,
+                React.createElement("dt", null, resolveText(t, { key: 'license.last_checked' }, '최근 확인')),
+                React.createElement("dd", null, formatDate(lastVerifiedAt) || lastVerifiedAt))))));
+};
+LicenseStatusCard.displayName = 'LicenseStatusCard';
+
+function resolvePaymentFeedbackVariant(errorCode, explicitVariant) {
+    if (explicitVariant)
+        return explicitVariant;
+    if (!errorCode)
+        return 'success';
+    const normalized = errorCode.toLowerCase();
+    if (normalized.includes('network')
+        || normalized.includes('server')
+        || normalized.includes('rate')
+        || normalized.includes('timeout')) {
+        return 'warning';
+    }
+    if (normalized.includes('info')) {
+        return 'info';
+    }
+    return 'error';
+}
+const PaymentStatusSection = ({ activationLimit, activationUsage, licenseKey, onDeactivate, isDeactivating = false, showDetails = false, actionMessage, actionMessageVariant, errorCode, className, t, }) => {
+    const remainingActivations = Math.max(0, activationLimit - activationUsage);
+    const resolvedActionMessage = actionMessage ? resolveText(t, actionMessage) : undefined;
+    const feedbackVariant = resolvedActionMessage
+        ? resolvePaymentFeedbackVariant(errorCode, actionMessageVariant)
+        : undefined;
+    return (React.createElement("div", { className: clsx('designbase-figma-payment-status', className) },
+        React.createElement("div", { className: "designbase-figma-payment-status__license-key" },
+            resolveText(t, { key: 'payment.license_key_label' }, '라이선스 키'),
+            ": ",
+            React.createElement("span", null, licenseKey)),
+        showDetails && (React.createElement("div", { className: "designbase-figma-payment-status__details" },
+            React.createElement("div", { className: "designbase-figma-payment-status__activation-info" },
+                React.createElement("div", { className: "designbase-figma-payment-status__remaining" },
+                    remainingActivations,
+                    ' ',
+                    resolveText(t, { key: 'payment.activations_remaining' }, '활성'),
+                    ' ',
+                    resolveText(t, { key: 'payment.spots_remaining' }, '자리 남음')),
+                React.createElement("div", { className: "designbase-figma-payment-status__usage" },
+                    activationUsage,
+                    "/",
+                    activationLimit)),
+            React.createElement("div", { className: "designbase-figma-payment-status__action" },
+                React.createElement(Button, { onPress: onDeactivate, variant: "secondary", size: "s", fullWidth: true, disabled: isDeactivating }, isDeactivating
+                    ? resolveText(t, { key: 'payment.deactivating' }, '비활성화중...')
+                    : resolveText(t, { key: 'payment.deactivate_license' }, '라이선스 비활성화')),
+                resolvedActionMessage && feedbackVariant && (React.createElement("p", { className: clsx('designbase-figma-payment-status__feedback', `designbase-figma-payment-status__feedback--${feedbackVariant}`), role: feedbackVariant === 'error' ? 'alert' : 'status', "aria-live": "polite" }, resolvedActionMessage)))))));
+};
+PaymentStatusSection.displayName = 'PaymentStatusSection';
+
 const defaultFeatures = [
     { name: '사용 제한', free: '일일 제한', pro: '무제한' },
     { name: '모든 주제 사용', free: false, pro: true },
@@ -686,7 +1063,11 @@ 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: (event) => {
-                    const value = event.detail?.value;
+                    const detail = event.detail;
+                    const value = typeof detail === 'object' && detail !== null && 'value' in detail &&
+                        typeof detail.value === 'string'
+                        ? detail.value
+                        : undefined;
                     setIsYearly(value === 'yearly');
                 }, options: [
                     {
@@ -723,21 +1104,6 @@ const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricin
 };
 PricingComparison.displayName = 'PricingComparison';
 
-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',
@@ -810,6 +1176,12 @@ function parseLicenseMessage(data) {
         usageReason: readString(data, ['usageReason']) || undefined,
         lastMessage: readString(data, ['message']) || undefined,
         lastErrorCode: readString(data, ['errorCode']) || undefined,
+        licenseStatus: readString(data, ['licenseStatus', 'license_status']) || undefined,
+        licenseSource: readString(data, ['licenseSource', 'license_source', 'source']) || undefined,
+        accessScope: readString(data, ['accessScope', 'access_scope', 'scope']) || undefined,
+        expiresAt: readString(data, ['expiresAt', 'expires_at']) || undefined,
+        lastVerifiedAt: readString(data, ['lastVerifiedAt', 'last_verified_at']) || undefined,
+        validationMessage: readString(data, ['validationMessage', 'validation_message']) || undefined,
     };
 }
 function useFigmaLicenseBridge(options = {}) {
@@ -852,15 +1224,27 @@ function useFigmaLicenseBridge(options = {}) {
             if (type === messageTypes.verifyResult) {
                 setIsVerifying(false);
                 setIsStartingAuth(false);
-                applyPatch(parseLicenseMessage(payload));
+                applyPatch({
+                    ...parseLicenseMessage(payload),
+                    deactivateMessage: '',
+                    deactivateErrorCode: '',
+                });
                 if (payload.success === true) {
                     applyPatch({ paymentStatus: 'PAID', isLicenseRegistered: true });
                 }
             }
             if (type === messageTypes.deactivateResult) {
                 setIsDeactivating(false);
-                applyPatch(parseLicenseMessage(payload));
-                if (payload.success === true) {
+                const parsed = parseLicenseMessage(payload);
+                const isSuccess = payload.success === true;
+                applyPatch({
+                    ...parsed,
+                    deactivateMessage: parsed.lastMessage,
+                    deactivateErrorCode: isSuccess ? undefined : parsed.lastErrorCode,
+                    lastMessage: isSuccess ? undefined : parsed.lastMessage,
+                    lastErrorCode: isSuccess ? undefined : parsed.lastErrorCode,
+                });
+                if (isSuccess) {
                     applyPatch({
                         paymentStatus: 'UNPAID',
                         licenseKey: '',
@@ -868,6 +1252,8 @@ function useFigmaLicenseBridge(options = {}) {
                         isLicenseRegistered: false,
                         activationLimit: 0,
                         activationUsage: 0,
+                        deactivateMessage: parsed.lastMessage || '라이선스가 비활성화되었습니다.',
+                        deactivateErrorCode: undefined,
                     });
                 }
             }
@@ -894,8 +1280,12 @@ function useFigmaLicenseBridge(options = {}) {
     }, [messageTypes.verifyLicense]);
     const deactivateLicense = useCallback(() => {
         setIsDeactivating(true);
+        applyPatch({
+            deactivateMessage: '',
+            deactivateErrorCode: '',
+        });
         postPluginMessage({ type: messageTypes.deactivateLicense });
-    }, [messageTypes.deactivateLicense]);
+    }, [applyPatch, messageTypes.deactivateLicense]);
     const startDesignbaseAuth = useCallback(() => {
         setIsStartingAuth(true);
         postPluginMessage({ type: START_DESIGNBASE_AUTH_MESSAGE });
@@ -915,28 +1305,29 @@ function useFigmaLicenseBridge(options = {}) {
 function formatUsageLabel(state, t) {
     const { remainingUsage, usageUsed, usageLimit, usageReset } = state;
     if (usageLimit === 'unlimited') {
-        return resolveText(t, { key: 'license.usage_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);
+        const translated = resolveText(t, { key: 'license.usage_daily' }, fallback) ?? fallback;
         return translated.includes(String(remaining)) ? translated : fallback;
     }
     if (usageReset === 'monthly') {
         const fallback = `이번 달 남은 횟수 ${remaining}/${limit}`;
-        const translated = resolveText(t, { key: 'license.usage_monthly' }, fallback);
+        const translated = resolveText(t, { key: 'license.usage_monthly' }, fallback) ?? 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 PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicenseKey = '', wordpressLinks, paymentPageUrl, mode = 'pricing', membershipUrl, 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,
+        membershipUrl: membershipUrl ?? wordpressLinks?.membershipUrl,
         accountUrl: wordpressLinks?.accountUrl,
         helpUrl: wordpressLinks?.helpUrl,
-    }), [wordpressLinks, paymentPageUrl]);
+    }), [wordpressLinks, paymentPageUrl, membershipUrl]);
     const { state, isVerifying, isDeactivating, isStartingAuth, verifyLicense, deactivateLicense, startDesignbaseAuth, setLicenseKeyInput, } = useFigmaLicenseBridge({
         messageTypes,
         initialState: {
@@ -950,7 +1341,8 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
     });
     const [showDetails, setShowDetails] = useState(false);
     const [licenseKeyDraft, setLicenseKeyDraft] = useState(initialLicenseKey);
-    const isPaid = state.isLicenseRegistered || state.paymentStatus === 'PAID';
+    const isPaid = state.isLicenseRegistered && state.paymentStatus === 'PAID';
+    const isMembershipMode = mode === 'youtube-membership';
     const usageLabel = formatUsageLabel(state, t);
     const handleLicenseSubmit = async (submittedLicenseKey) => {
         if (onLicenseSubmit) {
@@ -963,29 +1355,30 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
         setLicenseKeyDraft(value);
         setLicenseKeyInput(value);
     };
-    return (React.createElement("div", { className: `designbase-figma-page-license ${className || ''}` },
+    return (React.createElement("div", { className: `designbase-figma-page-license designbase-figma-page-license--${mode} ${className || ''}`, "data-license-mode": mode },
         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, isMembershipMode
+                        ? resolveText(t, { key: 'license.youtube_membership' }, 'YouTube 멤버십')
+                        : 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' }, '디자인베이스 멤버십 또는 라이선스로 무제한 이용이 가능합니다.')),
-                !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)),
+                    : isMembershipMode
+                        ? resolveText(t, { key: 'license.youtube_membership_description' }, 'YouTube 멤버십에 가입하면 Designbase 플러그인을 무제한으로 사용할 수 있습니다.')
+                        : resolveText(t, { key: 'license.purchase_for_unlimited' }, '디자인베이스 멤버십 또는 라이선스로 무제한 이용이 가능합니다.')),
+                !isPaid && !isMembershipMode && (React.createElement("p", { className: "designbase-figma-page-license__usage" }, usageLabel))),
+            !isMembershipMode && (React.createElement(PricingComparison, { features: pricingFeatures, pricing: pricing, paymentType: paymentType, t: t })),
+            state.lastMessage && !state.deactivateMessage && (React.createElement("p", { className: `designbase-figma-page-license__feedback ${state.lastErrorCode ? 'designbase-figma-page-license__feedback--error' : ''}`, "aria-live": "polite" }, 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(Button, { onPress: () => setShowDetails(!showDetails), variant: "tertiary", size: "s", iconOnly: true },
                         React.createElement(MoreHorizontalIcon, { size: 16 }))),
-                state.licenseKey && (React.createElement("div", { className: "designbase-figma-page-license__license-key" },
-                    resolveText(t, { key: 'license.key_label' }, '라이선스 키'),
-                    ": ",
-                    React.createElement("span", null, state.licenseKey))),
+                React.createElement(LicenseStatusCard, { status: state.paymentStatus, licenseKey: state.licenseKey, licenseStatus: state.licenseStatus, licenseSource: state.licenseSource, accessScope: state.accessScope, expiresAt: state.expiresAt, lastVerifiedAt: state.lastVerifiedAt, validationMessage: state.validationMessage, allowRevealKey: false, t: t }),
                 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" },
@@ -999,59 +1392,54 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
                             state.activationUsage,
                             "/",
                             state.activationLimit)),
-                    React.createElement(Button, { onClick: deactivateLicense, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating
-                        ? resolveText(t, { key: 'license.deactivating' }, '비활성화 중...')
-                        : resolveText(t, { key: 'license.deactivate' }, '라이선스 비활성화')))))),
+                    React.createElement("div", { className: "designbase-figma-page-license__action" },
+                        React.createElement(Button, { onPress: deactivateLicense, variant: "secondary", size: "s", fullWidth: true, disabled: isDeactivating }, isDeactivating
+                            ? resolveText(t, { key: 'license.deactivating' }, '비활성화 중...')
+                            : resolveText(t, { key: 'license.deactivate' }, '라이선스 비활성화')),
+                        state.deactivateMessage && (React.createElement("p", { className: `designbase-figma-page-license__action-feedback designbase-figma-page-license__action-feedback--${resolvePaymentFeedbackVariant(state.deactivateErrorCode)}`, role: state.deactivateErrorCode ? 'alert' : 'status', "aria-live": "polite" }, state.deactivateMessage))))))),
             !isPaid && (React.createElement(React.Fragment, null,
-                (enableAccountAuth || links.purchaseUrl || links.accountUrl) && (React.createElement("div", { className: "designbase-figma-page-license__section" },
+                isMembershipMode && (React.createElement(LicenseOffer, { joinUrl: links.membershipUrl || links.purchaseUrl, guideUrl: links.helpUrl || links.purchaseUrl, t: t })),
+                !isMembershipMode && (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
+                        enableAccountAuth && (React.createElement(Button, { onPress: 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' }, '멤버십 구매')),
+                        links.purchaseUrl && (React.createElement(Button, { onPress: () => 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 },
+                        links.accountUrl && (React.createElement(Button, { onPress: () => 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" },
+                showLicenseKeyInput && (React.createElement("div", { className: isMembershipMode
+                        ? 'designbase-figma-page-license__key-form'
+                        : '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(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: isMembershipMode ? 'license.enter_from_youtube' : 'license.enter_from_email' }, t: t }))))),
+            links.helpUrl && !isMembershipMode && (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 }))));
+        React.createElement(Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", iconOnly: true, "aria-label": "Close" },
+            React.createElement(CloseIcon, { size: 16 }))));
 };
 PageLicense.displayName = 'PageLicense';
 
-const PaymentStatusSection = ({ status, usageCount, activationLimit, activationUsage, licenseKey, onDeactivate, isDeactivating = false, showDetails = false, className, t }) => {
-    const remainingActivations = activationLimit - activationUsage;
-    return (React.createElement("div", { className: `designbase-figma-payment-status ${className || ''}` },
-        React.createElement("div", { className: "designbase-figma-payment-status__license-key" },
-            resolveText(t, { key: 'payment.license_key_label' }, '라이선스 키'),
-            ": ",
-            React.createElement("span", null, licenseKey)),
-        showDetails && (React.createElement("div", { className: "designbase-figma-payment-status__details" },
-            React.createElement("div", { className: "designbase-figma-payment-status__activation-info" },
-                React.createElement("div", { className: "designbase-figma-payment-status__remaining" },
-                    remainingActivations,
-                    " ",
-                    resolveText(t, { key: 'payment.activations_remaining' }, '활성'),
-                    " ",
-                    resolveText(t, { key: 'payment.spots_remaining' }, '자리 남음')),
-                React.createElement("div", { className: "designbase-figma-payment-status__usage" },
-                    activationUsage,
-                    "/",
-                    activationLimit)),
-            React.createElement(Button, { onClick: onDeactivate, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating
-                ? resolveText(t, { key: 'payment.deactivating' }, '비활성화중...')
-                : resolveText(t, { key: 'payment.deactivate_license' }, '라이선스 비활성화'))))));
+const PaymentBadge = ({ isActive, onClick, isLoading = false, text, t = (key) => key, className, }) => {
+    const getBadgeText = () => {
+        if (text)
+            return text;
+        return isActive
+            ? (t('proUser') || '프로 계정')
+            : (t('usingFree') || '무료 사용');
+    };
+    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(Spinner, { size: "s" })) : (React.createElement(Badge, { variant: getBadgeVariant(), size: "s", className: "designbase-figma-payment-badge__badge" }, getBadgeText()))));
 };
-PaymentStatusSection.displayName = 'PaymentStatusSection';
+PaymentBadge.displayName = 'PaymentBadge';
 
 const ProgressModal = ({ isOpen, onClose, progress, title = { key: 'progress.working' }, completedMessage = { key: 'progress.completed' }, processingMessage = { key: 'progress.processing' }, stopButtonText = { key: 'progress.stop' }, confirmButtonText = { key: 'progress.confirm' }, helpText, onStop, onComplete, loadingIcon, completeIcon, className, t, autoComplete = true, autoCloseOnComplete = false }) => {
     const [isCompleted, setIsCompleted] = useState(false);
@@ -1095,7 +1483,7 @@ const ProgressModal = ({ isOpen, onClose, progress, title = { key: 'progress.wor
                 React.createElement(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(Progressbar, { value: progressPercentage, size: "m", variant: isCompleted ? 'success' : 'primary', style: "animated", fullWidth: true }),
+            React.createElement(Progressbar, { value: progressPercentage, size: "m", variant: isCompleted ? 'success' : 'primary', barStyle: "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(Button, { onPress: handleConfirm, variant: "primary", size: "m", fullWidth: true }, displayConfirmText)) : (React.createElement(Button, { onPress: handleStop, variant: "secondary", size: "m", fullWidth: true }, displayStopText))))));
 };
@@ -1302,5 +1690,5 @@ const UpgradeBanner = ({ onClick, variant = 'button', isLoading = false, title =
 };
 UpgradeBanner.displayName = 'UpgradeBanner';
 
-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 };
+export { DEFAULT_LICENSE_MESSAGE_TYPES, DonationBadge, FigmaContainer, FigmaFooter, FigmaHeader, FigmaPageHead, FigmaSection, FigmaSidebar, FigmaToast, FigmaToastProvider, FormWithSubmit, InteractionFeedback, LanguageSelector, LanguageSettingsModal, LicenseOffer, LicenseStatusCard, LogoDropdown, PageLicense, PaymentBadge, PaymentStatusSection, PricingComparison, ProgressModal, ResizablePlugin, START_DESIGNBASE_AUTH_MESSAGE, SettingsModal, TitleDescription, UpgradeBanner, UsageStatusPopover, getActiveSection, interpolateText, resolvePaymentFeedbackVariant, resolveText, scrollToSection, useFigmaLicenseBridge, useFigmaToast, useToast };
 //# sourceMappingURL=index.esm.js.map