@designbasekorea/figma-ui 0.7.0 → 0.7.1

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import React, { createContext, useMemo, useContext, useRef, useState, useLayoutE
 import { Button, Dropdown, Badge, Toggle, Modal, ModalBody, Logo, Toast, Input, Spinner, SegmentControl, Progressbar, RandomGradient } from '@designbasekorea/ui-wc/react';
 export * from '@designbasekorea/ui-wc/react';
 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';
+import { ChevronDownIcon, AppWindowIcon, YoutubeIcon, InstagramIcon, FigmaIcon, MailIcon, ExternalLinkIcon, TranslateIcon, CloseIcon, CircleCheckFilledIcon, ResizableIcon, GripVerticalIcon, ChevronRightIcon } from '@designbasekorea/icons';
 import { DEFAULT_LICENSE_MESSAGE_TYPES } from '@designbasekorea/figma-license-core';
 export { DEFAULT_LICENSE_MESSAGE_TYPES } from '@designbasekorea/figma-license-core';
 
@@ -53,12 +53,16 @@ const FIGMA_UI_TRANSLATIONS = {
         'form.submit': '제출',
         'form.verifying': '확인 중...',
         'license.youtube_membership': 'YouTube 멤버십',
+        'license.current_plan': '현재 플랜',
+        'license.pro_plan': '프로 플랜',
+        'license.membership': '멤버십',
         'license.pro_account': '프로 계정',
         'license.upgrade_to_pro': '프로로 업그레이드',
         'license.all_features_available': '모든 기능을 사용할 수 있습니다.',
         'license.youtube_membership_description': 'YouTube 멤버십에 가입하면 Designbase 플러그인을 무제한으로 사용할 수 있습니다.',
         'license.purchase_for_unlimited': '디자인베이스 멤버십 또는 라이선스로 무제한 이용이 가능합니다.',
         'license.usage_unlimited': '사용 횟수 제한 없음',
+        'license.active_until_expiry': '만료일까지 모든 기능을 제한 없이 사용할 수 있습니다.',
         'license.usage_daily': '오늘 남은 횟수 {{remaining}}/{{limit}}',
         'license.usage_weekly': '이번 주 남은 횟수 {{remaining}}/{{limit}}',
         'license.usage_monthly': '이번 달 남은 횟수 {{remaining}}/{{limit}}',
@@ -68,6 +72,7 @@ const FIGMA_UI_TRANSLATIONS = {
         'license.spots_remaining': '자리 남음',
         'license.deactivating': '비활성화 중...',
         'license.deactivate': '라이선스 비활성화',
+        'license.deactivate_hint': '이 기기에서 라이선스 연결을 해제합니다.',
         'license.designbase_account': '디자인베이스 계정',
         'license.designbase_account_hint': 'WordPress 계정으로 로그인하거나 멤버십을 구매하면 플러그인이 자동으로 활성화됩니다.',
         'license.authenticating': '인증 중...',
@@ -186,12 +191,16 @@ const FIGMA_UI_TRANSLATIONS = {
         'form.submit': 'Activate',
         'form.verifying': 'Verifying...',
         'license.youtube_membership': 'YouTube Membership',
+        'license.current_plan': 'Current plan',
+        'license.pro_plan': 'Pro plan',
+        'license.membership': 'Membership',
         'license.pro_account': 'Pro account',
         'license.upgrade_to_pro': 'Upgrade to Pro',
         'license.all_features_available': 'All features are available.',
         'license.youtube_membership_description': 'Join YouTube Membership to use Designbase plugins without limits.',
         'license.purchase_for_unlimited': 'Get unlimited access with a Designbase membership or license.',
         'license.usage_unlimited': 'Unlimited usage',
+        'license.active_until_expiry': 'All features remain available without limits until expiration.',
         'license.usage_daily': '{{remaining}}/{{limit}} remaining today',
         'license.usage_weekly': '{{remaining}}/{{limit}} remaining this week',
         'license.usage_monthly': '{{remaining}}/{{limit}} remaining this month',
@@ -201,6 +210,7 @@ const FIGMA_UI_TRANSLATIONS = {
         'license.spots_remaining': 'spots remaining',
         'license.deactivating': 'Deactivating...',
         'license.deactivate': 'Deactivate license',
+        'license.deactivate_hint': 'Disconnects this license from the current device.',
         'license.designbase_account': 'Designbase account',
         'license.designbase_account_hint': 'Sign in with your WordPress account or purchase a membership to activate the plugin automatically.',
         'license.authenticating': 'Authenticating...',
@@ -319,12 +329,16 @@ const FIGMA_UI_TRANSLATIONS = {
         'form.submit': '有効化',
         'form.verifying': '確認中...',
         'license.youtube_membership': 'YouTubeメンバーシップ',
+        'license.current_plan': '現在のプラン',
+        'license.pro_plan': 'Proプラン',
+        'license.membership': 'メンバーシップ',
         'license.pro_account': 'Proアカウント',
         'license.upgrade_to_pro': 'Proにアップグレード',
         'license.all_features_available': 'すべての機能を使用できます。',
         'license.youtube_membership_description': 'YouTubeメンバーシップに参加すると、Designbaseプラグインを無制限で使用できます。',
         'license.purchase_for_unlimited': 'Designbaseのメンバーシップまたはライセンスで無制限に利用できます。',
         'license.usage_unlimited': '使用回数の制限なし',
+        'license.active_until_expiry': '有効期限まで、すべての機能を制限なく使用できます。',
         'license.usage_daily': '今日の残り {{remaining}}/{{limit}}回',
         'license.usage_weekly': '今週の残り {{remaining}}/{{limit}}回',
         'license.usage_monthly': '今月の残り {{remaining}}/{{limit}}回',
@@ -334,6 +348,7 @@ const FIGMA_UI_TRANSLATIONS = {
         'license.spots_remaining': '枠残り',
         'license.deactivating': '無効化中...',
         'license.deactivate': 'ライセンスを無効化',
+        'license.deactivate_hint': 'このデバイスからライセンスの接続を解除します。',
         'license.designbase_account': 'Designbaseアカウント',
         'license.designbase_account_hint': 'WordPressアカウントでサインインするか、メンバーシップを購入するとプラグインが自動的に有効化されます。',
         'license.authenticating': '認証中...',
@@ -982,7 +997,7 @@ const fallbackText = (t, key, fallback) => {
     const translated = t?.(key);
     return translated && translated !== key ? translated : fallback;
 };
-const UsageStatusPopover = ({ paymentStatus, usageCount = 0, remainingUsage, maxDailyUsage = 20, showUsage = true, showPlan = true, isLoading = false, onLicensePageClick, t, locale, className, }) => {
+const UsageStatusPopover = ({ paymentStatus, usageCount = 0, remainingUsage, maxDailyUsage = 20, showUsage = true, showPlan = true, isLoading = false, onLicensePageClick, licenseSource, accessScope, expiresAt, lastVerifiedAt, t, locale, className, }) => {
     const { t: translate } = useFigmaUiI18n(locale, t);
     const [isOpen, setIsOpen] = useState(false);
     const rootRef = useRef(null);
@@ -1005,9 +1020,12 @@ const UsageStatusPopover = ({ paymentStatus, usageCount = 0, remainingUsage, max
             : paymentStatus === 'TRIAL'
                 ? fallbackText(translate, 'trialPlan', '체험판')
                 : fallbackText(translate, 'free', '무료');
-    const planTitle = isBeta
+    const planSuffix = fallbackText(translate, 'planSuffix', '플랜');
+    const normalizedPlanLabel = planLabel.toLocaleLowerCase();
+    const normalizedPlanSuffix = planSuffix.toLocaleLowerCase();
+    const planTitle = isBeta || normalizedPlanLabel.includes(normalizedPlanSuffix)
         ? planLabel
-        : `${planLabel} ${fallbackText(translate, 'planSuffix', '플랜')}`;
+        : `${planLabel} ${planSuffix}`;
     const triggerLabel = isPaid
         ? `${planLabel}, ${fallbackText(translate, 'unlimitedUsage', '무제한 사용 가능')}`
         : isBeta
@@ -1018,6 +1036,41 @@ const UsageStatusPopover = ({ paymentStatus, usageCount = 0, remainingUsage, max
     const upgradeLabel = isPaid
         ? fallbackText(translate, 'managePlan', '플랜 관리')
         : fallbackText(translate, 'upgradePlan', '플랜 업그레이드');
+    const resolvedLocale = locale || 'ko';
+    const formatDate = (value) => {
+        if (!value)
+            return undefined;
+        const date = new Date(value);
+        if (Number.isNaN(date.getTime()))
+            return value;
+        return new Intl.DateTimeFormat(resolvedLocale, { dateStyle: 'medium' }).format(date);
+    };
+    const formattedSource = licenseSource === 'youtube_membership' || licenseSource === 'membership'
+        ? fallbackText(translate, 'license.source_youtube_membership', 'YouTube 멤버십')
+        : licenseSource === 'lemonsqueezy'
+            ? fallbackText(translate, 'license.source_purchase', '구매 라이선스')
+            : licenseSource;
+    const formattedScope = accessScope === 'all-products' || accessScope === 'all_products'
+        ? fallbackText(translate, 'license.all_plugins', '모든 플러그인')
+        : accessScope;
+    const paidMetadata = [
+        formattedSource && {
+            label: fallbackText(translate, 'license.membership', '멤버십'),
+            value: formattedSource,
+        },
+        expiresAt && {
+            label: fallbackText(translate, 'license.expires', '만료일'),
+            value: formatDate(expiresAt),
+        },
+        formattedScope && {
+            label: fallbackText(translate, 'license.access', '접근 범위'),
+            value: formattedScope,
+        },
+        lastVerifiedAt && {
+            label: fallbackText(translate, 'license.last_checked', '최근 확인'),
+            value: formatDate(lastVerifiedAt),
+        },
+    ].filter(Boolean);
     useEffect(() => {
         if (!isOpen)
             return undefined;
@@ -1052,7 +1105,10 @@ const UsageStatusPopover = ({ paymentStatus, usageCount = 0, remainingUsage, max
             '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(translate, '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,
+            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(translate, 'loading', '불러오는 중') : triggerLabel, disabled: isLoading, onClick: togglePopover }, isLoading ? (React.createElement("span", { className: "designbase-figma-usage-status__skeleton", "aria-hidden": "true" })) : isPaid ? (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: "designbase-figma-usage-status__mini-progress", "aria-hidden": "true" },
+                    React.createElement("span", { style: { width: '100%' } })),
+                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: `${remainingPercent}%` } })),
                 React.createElement("span", { className: "designbase-figma-usage-status__usage-value" },
@@ -1063,11 +1119,19 @@ const UsageStatusPopover = ({ paymentStatus, usageCount = 0, remainingUsage, max
             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(translate, 'usageDetails', '사용량 상세') },
             React.createElement("div", { className: "designbase-figma-usage-status__popover-header" },
-                React.createElement("span", { className: "designbase-figma-usage-status__plan-title" }, planTitle),
+                React.createElement("span", { className: "designbase-figma-usage-status__plan-heading" },
+                    React.createElement("span", null, fallbackText(translate, 'license.current_plan', '현재 플랜')),
+                    React.createElement("strong", null, 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(translate, 'unlimitedUsageTooltip', '모든 기능을 제한 없이 사용할 수 있습니다')))) : isBeta ? (React.createElement("p", { className: "designbase-figma-usage-status__note" }, fallbackText(translate, 'betaUsageDescription', '베타 기간에는 사용량 제한이 적용되지 않습니다'))) : hasDailyLimit ? (React.createElement("div", { className: "designbase-figma-usage-status__usage-detail" },
+            isPaid ? (React.createElement(React.Fragment, null,
+                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,
+                        React.createElement("strong", null, fallbackText(translate, 'unlimitedUsage', '무제한 사용')),
+                        React.createElement("small", null, fallbackText(translate, 'unlimitedUsageTooltip', '모든 기능을 제한 없이 사용할 수 있습니다')))),
+                paidMetadata.length > 0 && (React.createElement("dl", { className: "designbase-figma-usage-status__license-meta" }, paidMetadata.map((item) => (React.createElement("div", { key: item.label },
+                    React.createElement("dt", null, item.label),
+                    React.createElement("dd", null, item.value)))))))) : isBeta ? (React.createElement("p", { className: "designbase-figma-usage-status__note" }, fallbackText(translate, '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" },
                         remaining,
@@ -1169,7 +1233,7 @@ FigmaToastProvider.displayName = 'FigmaToastProvider';
 FigmaToast.displayName = 'FigmaToast';
 
 const DEFAULT_LOW_USAGE_WARNING = { key: 'lowUsageWarning' };
-const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount = 0, remainingUsage, listenForUsageMessages = true, isLoading = false, showPaymentStatus = true, showUsageInfo = true, maxDailyUsage = 20, showLowUsageWarning = true, lowUsageThresholdPercent = 10, lowUsageWarningText = DEFAULT_LOW_USAGE_WARNING, onLowUsageWarning, showPaymentBadge = true, showDonation = true, donationUrl = 'https://buymeacoffee.com/designbase', donationText = { key: 'donation.buy_me_a_coffee' }, showDonationText = true, donationPromptText, showLanguageSelector = true, currentLanguage = 'ko', languages, onLanguageChange, logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', logoLinks, className, t, children, }) => {
+const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount = 0, remainingUsage, listenForUsageMessages = true, isLoading = false, showPaymentStatus = true, showUsageInfo = true, maxDailyUsage = 20, licenseSource, accessScope, expiresAt, lastVerifiedAt, showLowUsageWarning = true, lowUsageThresholdPercent = 10, lowUsageWarningText = DEFAULT_LOW_USAGE_WARNING, onLowUsageWarning, showPaymentBadge = true, showDonation = true, donationUrl = 'https://buymeacoffee.com/designbase', donationText = { key: 'donation.buy_me_a_coffee' }, showDonationText = true, donationPromptText, showLanguageSelector = true, currentLanguage = 'ko', languages, onLanguageChange, logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', logoLinks, className, t, children, }) => {
     const { t: translate } = useFigmaUiI18n(currentLanguage, t);
     const { showToast, toastComponent } = useFigmaToast();
     const [liveUsage, setLiveUsage] = useState({});
@@ -1179,12 +1243,17 @@ const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount =
     const effectiveUsageCount = liveUsage.usageCount ?? usageCount;
     const effectiveRemainingUsage = liveUsage.remainingUsage ?? remainingUsage;
     const effectiveMaxDailyUsage = liveUsage.maxDailyUsage ?? maxDailyUsage;
+    const effectiveLicenseSource = liveUsage.licenseSource ?? licenseSource;
+    const effectiveAccessScope = liveUsage.accessScope ?? accessScope;
+    const effectiveExpiresAt = liveUsage.expiresAt ?? expiresAt;
+    const effectiveLastVerifiedAt = liveUsage.lastVerifiedAt ?? lastVerifiedAt;
     const limit = Math.max(1, Math.round(effectiveMaxDailyUsage));
     const resolvedRemaining = typeof effectiveRemainingUsage === 'number' && Number.isFinite(effectiveRemainingUsage)
         ? Math.min(limit, Math.max(0, Math.round(effectiveRemainingUsage)))
         : Math.max(0, limit - Math.min(limit, Math.max(0, Math.round(effectiveUsageCount))));
     const remainingPercent = Math.round((resolvedRemaining / limit) * 100);
-    const resolvedShowUsageInfo = showPaymentStatus && (showUsageInfo || effectivePaymentStatus === 'FREE');
+    const resolvedShowUsageInfo = showPaymentStatus
+        && (showUsageInfo || effectivePaymentStatus === 'FREE' || effectivePaymentStatus === 'PAID');
     const resolvedShowPaymentBadge = showPaymentStatus && showPaymentBadge;
     const resolvedLicensePageClick = effectivePaymentStatus === 'BETA' ? undefined : onLicensePageClick;
     const hasChildren = React.Children.count(children) > 0;
@@ -1210,10 +1279,31 @@ const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount =
                 : message.paymentStatus === 'FREE' || message.paymentStatus === 'UNPAID'
                     ? 'FREE'
                     : undefined;
+            const nextLicenseSource = typeof message.licenseSource === 'string' ? message.licenseSource : undefined;
+            const nextAccessScope = typeof message.accessScope === 'string' ? message.accessScope : undefined;
+            const nextExpiresAt = typeof message.expiresAt === 'string' ? message.expiresAt : undefined;
+            const rawLastVerifiedAt = message.lastVerifiedAt;
+            const numericLastVerifiedAt = typeof rawLastVerifiedAt === 'number' && Number.isFinite(rawLastVerifiedAt)
+                ? rawLastVerifiedAt < 1000000000000
+                    ? rawLastVerifiedAt * 1000
+                    : rawLastVerifiedAt
+                : undefined;
+            const parsedLastVerifiedAt = numericLastVerifiedAt === undefined
+                ? undefined
+                : new Date(numericLastVerifiedAt);
+            const nextLastVerifiedAt = typeof rawLastVerifiedAt === 'string'
+                ? rawLastVerifiedAt
+                : parsedLastVerifiedAt && !Number.isNaN(parsedLastVerifiedAt.getTime())
+                    ? parsedLastVerifiedAt.toISOString()
+                    : undefined;
             if (nextPaymentStatus === undefined
                 && nextLimit === undefined
                 && nextUsed === undefined
-                && nextRemaining === undefined) {
+                && nextRemaining === undefined
+                && nextLicenseSource === undefined
+                && nextAccessScope === undefined
+                && nextExpiresAt === undefined
+                && nextLastVerifiedAt === undefined) {
                 return;
             }
             setLiveUsage((previous) => ({
@@ -1222,6 +1312,10 @@ const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount =
                 ...(typeof nextLimit === 'number' ? { maxDailyUsage: nextLimit } : {}),
                 ...(typeof nextUsed === 'number' ? { usageCount: nextUsed } : {}),
                 ...(typeof nextRemaining === 'number' ? { remainingUsage: nextRemaining } : {}),
+                ...(nextLicenseSource ? { licenseSource: nextLicenseSource } : {}),
+                ...(nextAccessScope ? { accessScope: nextAccessScope } : {}),
+                ...(nextExpiresAt ? { expiresAt: nextExpiresAt } : {}),
+                ...(nextLastVerifiedAt ? { lastVerifiedAt: nextLastVerifiedAt } : {}),
             }));
         };
         window.addEventListener('message', handleUsageMessage);
@@ -1280,7 +1374,7 @@ 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, languages: languages, currentLanguage: currentLanguage, showLanguageSelector: showLanguageSelector, onLanguageChange: onLanguageChange, t: translate })),
             React.createElement("div", { className: "designbase-figma-footer__right" },
-                (resolvedShowUsageInfo || resolvedShowPaymentBadge) && (React.createElement(UsageStatusPopover, { paymentStatus: effectivePaymentStatus, usageCount: effectiveUsageCount, remainingUsage: effectiveRemainingUsage, maxDailyUsage: effectiveMaxDailyUsage, showUsage: resolvedShowUsageInfo, showPlan: resolvedShowPaymentBadge, isLoading: isLoading, onLicensePageClick: resolvedLicensePageClick, t: translate })),
+                (resolvedShowUsageInfo || resolvedShowPaymentBadge) && (React.createElement(UsageStatusPopover, { paymentStatus: effectivePaymentStatus, usageCount: effectiveUsageCount, remainingUsage: effectiveRemainingUsage, maxDailyUsage: effectiveMaxDailyUsage, showUsage: resolvedShowUsageInfo, showPlan: resolvedShowPaymentBadge, isLoading: isLoading, onLicensePageClick: resolvedLicensePageClick, licenseSource: effectiveLicenseSource, accessScope: effectiveAccessScope, expiresAt: effectiveExpiresAt, lastVerifiedAt: effectiveLastVerifiedAt, locale: currentLanguage, t: translate })),
                 showDonation && (React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s", iconOnly: true, showPrompt: false, t: translate })))),
         children,
         toastComponent));
@@ -1293,9 +1387,15 @@ const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = fals
     useEffect(() => {
         setInputValue(value);
     }, [value]);
+    const submitLicense = async () => {
+        const normalizedValue = inputValue.trim();
+        if (!normalizedValue || disabled || isSubmitting)
+            return;
+        await onLicenseSubmit(normalizedValue);
+    };
     const handleSubmit = async (e) => {
         e.preventDefault();
-        await onLicenseSubmit(inputValue);
+        await submitLicense();
     };
     const handleChange = (value) => {
         setInputValue(value);
@@ -1315,7 +1415,9 @@ const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = fals
                         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)));
+        React.createElement(Button, { type: "button", variant: "primary", size: "m", loading: isSubmitting, disabled: !inputValue.trim() || isSubmitting || disabled, fullWidth: true, onPress: () => {
+                void submitLicense();
+            } }, isSubmitting ? displaySubmittingText : displaySubmitText)));
 };
 FormWithSubmit.displayName = 'FormWithSubmit';
 
@@ -1438,7 +1540,7 @@ function formatSource(value, t) {
     }
     return value;
 }
-const LicenseStatusCard = ({ status, licenseKey = '', licenseStatus, licenseSource, accessScope, expiresAt, lastVerifiedAt, validationMessage, allowRevealKey = false, t, locale, className, }) => {
+const LicenseStatusCard = ({ status, licenseKey = '', licenseStatus, licenseSource, accessScope, expiresAt, lastVerifiedAt, validationMessage, showHeader = true, allowRevealKey = false, t, locale, className, }) => {
     const { locale: resolvedLocale, t: translate } = useFigmaUiI18n(locale, t);
     const [isKeyRevealed, setIsKeyRevealed] = useState(false);
     const normalizedLicenseStatus = licenseStatus?.toLowerCase();
@@ -1449,13 +1551,15 @@ const LicenseStatusCard = ({ status, licenseKey = '', licenseStatus, licenseSour
         : resolveText(translate, { 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" },
+        showHeader && (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(translate, { key: 'license.activated' }, '라이선스 활성화됨')
                     : resolveText(translate, { key: 'license.status_label' }, '라이선스 상태')),
                 React.createElement("h3", null, statusText)),
-            React.createElement("span", { className: "designbase-figma-license-status-card__badge" }, licenseStatus || (isActive ? 'active' : 'inactive'))),
+            React.createElement("span", { className: "designbase-figma-license-status-card__badge" }, isActive
+                ? resolveText(translate, { key: 'license.status_active' }, '활성')
+                : resolveText(translate, { key: 'license.status_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(translate, { key: 'license.key_label' }, '라이선스 키')),
@@ -1850,7 +1954,7 @@ function formatUsageLabel(state, t) {
     }
     return resolveText(t, { key: 'license.usage_generic', values: { remaining, limit } }, `남은 횟수 ${remaining}/${limit}`) ?? `남은 횟수 ${remaining}/${limit}`;
 }
-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, locale, className, }) => {
+const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicenseKey = '', licenseStatus: initialLicenseStatus, licenseSource: initialLicenseSource, accessScope: initialAccessScope, expiresAt: initialExpiresAt, lastVerifiedAt: initialLastVerifiedAt, wordpressLinks, paymentPageUrl, mode = 'pricing', membershipUrl, enableAccountAuth = true, showLicenseKeyInput = true, pricingFeatures, pricing, paymentType = 'subscription', messageTypes, onStateChange, setPaymentStatus, setUsageCount, onLicenseSubmit, usageCount: initialUsageCount = 0, t, locale, className, }) => {
     const { t: translate } = useFigmaUiI18n(locale, t);
     const links = useMemo(() => ({
         purchaseUrl: wordpressLinks?.purchaseUrl ?? paymentPageUrl,
@@ -1863,13 +1967,21 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
         initialState: {
             paymentStatus: initialStatus,
             licenseKey: initialLicenseKey,
+            hasLicenseKey: Boolean(initialLicenseKey),
+            isLicenseRegistered: initialStatus === 'PAID',
+            planTier: initialStatus === 'PAID' ? 'PRO' : 'FREE',
+            usageLimit: initialStatus === 'PAID' ? 'unlimited' : 0,
+            licenseStatus: initialLicenseStatus,
+            licenseSource: initialLicenseSource,
+            accessScope: initialAccessScope,
+            expiresAt: initialExpiresAt,
+            lastVerifiedAt: initialLastVerifiedAt,
             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 isMembershipMode = mode === 'youtube-membership';
@@ -1894,7 +2006,7 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
                         : isPaid
                             ? resolveText(translate, { key: 'license.pro_account' }, '프로 계정')
                             : resolveText(translate, { key: 'license.upgrade_to_pro' }, '프로로 업그레이드')),
-                    state.planTier && state.planTier !== 'FREE' && (React.createElement("span", { className: "designbase-figma-page-license__tier" }, state.planTier))),
+                    isPaid && (React.createElement("span", { className: "designbase-figma-page-license__tier" }, resolveText(translate, { key: 'license.pro_plan' }, '프로 플랜')))),
                 React.createElement("p", { className: "designbase-figma-page-license__description" }, isPaid
                     ? resolveText(translate, { key: 'license.all_features_available' }, '모든 기능을 사용할 수 있습니다.')
                     : isMembershipMode
@@ -1902,16 +2014,16 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
                         : resolveText(translate, { 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: translate })),
-            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(translate, { key: 'license.activated' }, '라이선스 활성화됨')),
-                    React.createElement(Button, { onPress: () => setShowDetails(!showDetails), variant: "tertiary", size: "s", iconOnly: true },
-                        React.createElement(MoreHorizontalIcon, { size: 16 }))),
-                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: translate }),
-                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" },
+            state.lastMessage && state.lastErrorCode && !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__paid-summary" },
+                React.createElement("div", { className: "designbase-figma-page-license__paid-hero" },
+                    React.createElement("span", { "aria-hidden": "true" }, "\u221E"),
+                    React.createElement("div", null,
+                        React.createElement("strong", null, resolveText(translate, { key: 'license.usage_unlimited' }, '무제한 사용')),
+                        React.createElement("p", null, resolveText(translate, { key: 'license.active_until_expiry' }, '만료일까지 모든 기능을 제한 없이 사용할 수 있습니다.')))),
+                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, showHeader: false, t: translate }),
+                React.createElement("div", { className: "designbase-figma-page-license__paid-actions" },
+                    state.activationLimit > 0 && (React.createElement("div", { className: "designbase-figma-page-license__activation-info" },
                         React.createElement("div", { className: "designbase-figma-page-license__remaining" },
                             Math.max(0, state.activationLimit - state.activationUsage),
                             ' ',
@@ -1921,12 +2033,12 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
                         React.createElement("div", { className: "designbase-figma-page-license__usage-count" },
                             state.activationUsage,
                             "/",
-                            state.activationLimit)),
-                    React.createElement("div", { className: "designbase-figma-page-license__action" },
-                        React.createElement(Button, { onPress: deactivateLicense, variant: "secondary", size: "s", fullWidth: true, disabled: isDeactivating }, isDeactivating
-                            ? resolveText(translate, { key: 'license.deactivating' }, '비활성화 중...')
-                            : resolveText(translate, { 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))))))),
+                            state.activationLimit))),
+                    React.createElement(Button, { onPress: deactivateLicense, variant: "secondary", size: "m", fullWidth: true, disabled: isDeactivating }, isDeactivating
+                        ? resolveText(translate, { key: 'license.deactivating' }, '비활성화 중...')
+                        : resolveText(translate, { key: 'license.deactivate' }, '라이선스 비활성화')),
+                    state.deactivateMessage && state.deactivateErrorCode && (React.createElement("p", { className: `designbase-figma-page-license__action-feedback designbase-figma-page-license__action-feedback--${resolvePaymentFeedbackVariant(state.deactivateErrorCode)}`, role: "alert", "aria-live": "polite" }, state.deactivateMessage)),
+                    React.createElement("p", { className: "designbase-figma-page-license__deactivate-hint" }, resolveText(translate, { key: 'license.deactivate_hint' }, '이 기기에서 라이선스 연결을 해제합니다.'))))),
             !isPaid && (React.createElement(React.Fragment, null,
                 isMembershipMode && (React.createElement(LicenseOffer, { joinUrl: links.membershipUrl || links.purchaseUrl, guideUrl: links.helpUrl || links.purchaseUrl, t: translate })),
                 !isMembershipMode && (enableAccountAuth || links.purchaseUrl || links.accountUrl) && (React.createElement("div", { className: "designbase-figma-page-license__section" },