@designbasekorea/figma-ui 0.8.1 → 0.8.3

package/dist/index.esm.js

@@ -38,6 +38,15 @@ const FIGMA_UI_TRANSLATIONS = {
         remainingShort: '남음',
         usageCountCaption: '오늘 사용',
         remainingCopy: '{{count}}회 남음 · 매일 리셋',
+        'usage.caption.none': '남은 무료 사용량',
+        'usage.caption.weekly': '이번 주 남은 사용량',
+        'usage.caption.monthly': '이번 달 남은 사용량',
+        'usage.remaining.none': '{{count}}회 남음 · 자동 초기화 없음',
+        'usage.remaining.weekly': '{{count}}회 남음 · 매주 초기화',
+        'usage.remaining.monthly': '{{count}}회 남음 · 매월 초기화',
+        'license.this_plugin': '현재 플러그인',
+        'license.purchase_or_membership_description': '구매한 상품의 라이선스 키 또는 YouTube 멤버십 키를 등록하세요. 이용 범위는 키에 부여된 권한에 따라 달라집니다.',
+        'license.purchase_benefit_title': '구매한 플러그인의 프로 기능 사용',
         lowUsageWarning: '무료 사용량이 {{count}}회({{percent}}%) 남았습니다. 멤버십으로 무제한 이용해보세요.',
         usageUnavailable: '사용량 제한이 없습니다',
         unlimitedUsageTooltip: '모든 기능을 제한 없이 사용할 수 있습니다',
@@ -197,6 +206,15 @@ const FIGMA_UI_TRANSLATIONS = {
         remainingShort: 'left',
         usageCountCaption: 'Used today',
         remainingCopy: '{{count}} remaining · resets daily',
+        'usage.caption.none': 'Remaining free uses',
+        'usage.caption.weekly': 'Remaining uses this week',
+        'usage.caption.monthly': 'Remaining uses this month',
+        'usage.remaining.none': '{{count}} uses left · No automatic reset',
+        'usage.remaining.weekly': '{{count}} uses left · Resets weekly',
+        'usage.remaining.monthly': '{{count}} uses left · Resets monthly',
+        'license.this_plugin': 'This plugin',
+        'license.purchase_or_membership_description': 'Enter a purchased product license or a YouTube membership key. Access depends on the permissions attached to your key.',
+        'license.purchase_benefit_title': 'Unlock Pro for your purchased plugin',
         lowUsageWarning: 'Only {{count}} free uses ({{percent}}%) remain. Upgrade for unlimited access.',
         usageUnavailable: 'No usage limit',
         unlimitedUsageTooltip: 'Use every feature without limits',
@@ -356,6 +374,15 @@ const FIGMA_UI_TRANSLATIONS = {
         remainingShort: '残り',
         usageCountCaption: '今日の使用',
         remainingCopy: '{{count}}回残り · 毎日リセット',
+        'usage.caption.none': '無料利用の残り回数',
+        'usage.caption.weekly': '今週の残り回数',
+        'usage.caption.monthly': '今月の残り回数',
+        'usage.remaining.none': '残り{{count}}回 · 自動リセットなし',
+        'usage.remaining.weekly': '残り{{count}}回 · 毎週リセット',
+        'usage.remaining.monthly': '残り{{count}}回 · 毎月リセット',
+        'license.this_plugin': 'このプラグイン',
+        'license.purchase_or_membership_description': '購入ライセンスまたはYouTubeメンバーシップキーを登録してください。利用範囲はキーの権限によって異なります。',
+        'license.purchase_benefit_title': '購入したプラグインのPro機能を利用',
         lowUsageWarning: '無料使用回数は残り{{count}}回（{{percent}}%）です。無制限利用にアップグレードできます。',
         usageUnavailable: '使用制限はありません',
         unlimitedUsageTooltip: 'すべての機能を無制限で使用できます',
@@ -1060,7 +1087,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, licenseSource, accessScope, expiresAt, lastVerifiedAt, t, locale, className, }) => {
+const UsageStatusPopover = ({ paymentStatus, usageCount = 0, remainingUsage, maxDailyUsage = 20, usageReset = 'daily', 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);
@@ -1110,15 +1137,15 @@ const UsageStatusPopover = ({ paymentStatus, usageCount = 0, remainingUsage, max
     };
     const formattedSource = licenseSource === 'youtube_membership' || licenseSource === 'membership'
         ? fallbackText(translate, 'license.source_youtube_membership', 'YouTube 멤버십')
-        : licenseSource === 'lemonsqueezy'
+        : ['lemonsqueezy', 'lemon_squeezy', 'lemon-squeezy', 'order'].includes(licenseSource || '')
             ? fallbackText(translate, 'license.source_purchase', '구매 라이선스')
             : licenseSource;
     const formattedScope = accessScope === 'all-products' || accessScope === 'all_products'
         ? fallbackText(translate, 'license.all_plugins', '모든 플러그인')
-        : accessScope;
+        : accessScope === 'product' ? fallbackText(translate, 'license.this_plugin', '현재 플러그인') : accessScope;
     const paidMetadata = [
         formattedSource && {
-            label: fallbackText(translate, 'license.membership', '멤버십'),
+            label: fallbackText(translate, 'license.source', '출처'),
             value: formattedSource,
         },
         expiresAt && {
@@ -1200,13 +1227,13 @@ const UsageStatusPopover = ({ paymentStatus, usageCount = 0, remainingUsage, max
                         remaining,
                         React.createElement("span", { className: "designbase-figma-usage-status__usage-divider" }, "/"),
                         limit),
-                    React.createElement("span", { className: "designbase-figma-usage-status__usage-caption" }, fallbackText(translate, 'remainingToday', '오늘 남은 사용량')),
+                    React.createElement("span", { className: "designbase-figma-usage-status__usage-caption" }, usageReset === 'daily' ? fallbackText(translate, 'remainingToday', '오늘 남은 사용량') : translate(`usage.caption.${usageReset}`)),
                     React.createElement("strong", { className: "designbase-figma-usage-status__usage-percent" },
                         remainingPercent,
                         "%")),
-                React.createElement("div", { className: "designbase-figma-usage-status__progress", role: "progressbar", "aria-label": fallbackText(translate, 'remainingToday', '오늘 남은 사용량'), "aria-valuemin": 0, "aria-valuemax": limit, "aria-valuenow": remaining, "aria-valuetext": `${remaining} / ${limit}, ${remainingPercent}%` },
+                React.createElement("div", { className: "designbase-figma-usage-status__progress", role: "progressbar", "aria-label": usageReset === 'daily' ? fallbackText(translate, 'remainingToday', '오늘 남은 사용량') : translate(`usage.caption.${usageReset}`), "aria-valuemin": 0, "aria-valuemax": limit, "aria-valuenow": remaining, "aria-valuetext": `${remaining} / ${limit}, ${remainingPercent}%` },
                     React.createElement("span", { style: { width: `${remainingPercent}%` } })),
-                React.createElement("p", { className: "designbase-figma-usage-status__remaining-copy" }, resolveText(translate, { key: 'remainingCopy', values: { count: remaining } }, `${remaining}회 남음 · 매일 리셋`)))) : (React.createElement("p", { className: "designbase-figma-usage-status__note" }, fallbackText(translate, 'usageUnavailable', '사용량 제한이 없습니다')))))));
+                React.createElement("p", { className: "designbase-figma-usage-status__remaining-copy" }, resolveText(translate, { key: usageReset === 'daily' ? 'remainingCopy' : `usage.remaining.${usageReset}`, values: { count: remaining } }, `${remaining}회 남음 · 매일 리셋`)))) : (React.createElement("p", { className: "designbase-figma-usage-status__note" }, fallbackText(translate, 'usageUnavailable', '사용량 제한이 없습니다')))))));
 };
 UsageStatusPopover.displayName = 'UsageStatusPopover';
 
@@ -1296,7 +1323,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, 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 FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount = 0, remainingUsage, listenForUsageMessages = true, isLoading = false, showPaymentStatus = true, showUsageInfo = true, maxDailyUsage = 20, usageReset = 'daily', 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({});
@@ -1306,6 +1333,7 @@ const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount =
     const effectiveUsageCount = liveUsage.usageCount ?? usageCount;
     const effectiveRemainingUsage = liveUsage.remainingUsage ?? remainingUsage;
     const effectiveMaxDailyUsage = liveUsage.maxDailyUsage ?? maxDailyUsage;
+    const effectiveUsageReset = liveUsage.usageReset ?? usageReset;
     const effectiveLicenseSource = liveUsage.licenseSource ?? licenseSource;
     const effectiveAccessScope = liveUsage.accessScope ?? accessScope;
     const effectiveExpiresAt = liveUsage.expiresAt ?? expiresAt;
@@ -1330,6 +1358,8 @@ const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount =
             }
             const nextLimit = [message.usageLimit, message.freeDailyLimit, message.maxDailyUsage]
                 .find((value) => typeof value === 'number' && Number.isFinite(value) && value > 0);
+            const nextReset = ['none', 'daily', 'weekly', 'monthly'].includes(message.usageReset)
+                ? message.usageReset : undefined;
             const nextUsed = [message.usageUsed, message.dailyUsage]
                 .find((value) => typeof value === 'number' && Number.isFinite(value) && value >= 0);
             const nextRemaining = typeof message.remainingUsage === 'number' && Number.isFinite(message.remainingUsage)
@@ -1361,6 +1391,7 @@ const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount =
                     : undefined;
             if (nextPaymentStatus === undefined
                 && nextLimit === undefined
+                && nextReset === undefined
                 && nextUsed === undefined
                 && nextRemaining === undefined
                 && nextLicenseSource === undefined
@@ -1373,12 +1404,17 @@ const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount =
                 ...previous,
                 ...(nextPaymentStatus ? { paymentStatus: nextPaymentStatus } : {}),
                 ...(typeof nextLimit === 'number' ? { maxDailyUsage: nextLimit } : {}),
+                ...(nextReset !== undefined ? { usageReset: nextReset } : {}),
                 ...(typeof nextUsed === 'number' ? { usageCount: nextUsed } : {}),
                 ...(typeof nextRemaining === 'number' ? { remainingUsage: nextRemaining } : {}),
                 ...(nextLicenseSource ? { licenseSource: nextLicenseSource } : {}),
                 ...(nextAccessScope ? { accessScope: nextAccessScope } : {}),
                 ...(nextExpiresAt ? { expiresAt: nextExpiresAt } : {}),
                 ...(nextLastVerifiedAt ? { lastVerifiedAt: nextLastVerifiedAt } : {}),
+                ...((nextPaymentStatus === 'FREE' || nextLicenseSource !== undefined || nextAccessScope !== undefined) ? {
+                    licenseSource: nextLicenseSource || '', accessScope: nextAccessScope || '',
+                    expiresAt: nextExpiresAt || '', lastVerifiedAt: nextLastVerifiedAt || '',
+                } : {}),
             }));
         };
         window.addEventListener('message', handleUsageMessage);
@@ -1437,7 +1473,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, licenseSource: effectiveLicenseSource, accessScope: effectiveAccessScope, expiresAt: effectiveExpiresAt, lastVerifiedAt: effectiveLastVerifiedAt, locale: currentLanguage, t: translate })),
+                (resolvedShowUsageInfo || resolvedShowPaymentBadge) && (React.createElement(UsageStatusPopover, { paymentStatus: effectivePaymentStatus, usageCount: effectiveUsageCount, remainingUsage: effectiveRemainingUsage, maxDailyUsage: effectiveMaxDailyUsage, usageReset: effectiveUsageReset, 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));
@@ -1600,6 +1636,8 @@ function formatScope(value, t) {
     if (value === 'all-products' || value === 'all_products') {
         return resolveText(t, { key: 'license.all_plugins' }, '모든 플러그인');
     }
+    if (value === 'product')
+        return resolveText(t, { key: 'license.this_plugin' }, '현재 플러그인');
     return value;
 }
 function formatSource(value, t) {
@@ -1608,7 +1646,7 @@ function formatSource(value, t) {
     if (value === 'youtube_membership' || value === 'membership') {
         return resolveText(t, { key: 'license.source_youtube_membership' }, 'YouTube 멤버십');
     }
-    if (value === 'lemonsqueezy') {
+    if (['lemonsqueezy', 'lemon_squeezy', 'lemon-squeezy', 'order'].includes(value)) {
         return resolveText(t, { key: 'license.source_purchase' }, '구매 라이선스');
     }
     return value;
@@ -1838,12 +1876,21 @@ function readBoolean(data, keys) {
     }
     return undefined;
 }
+function readOptionalText(data, keys) {
+    for (const key of keys) {
+        if (Object.prototype.hasOwnProperty.call(data, key)) {
+            return typeof data[key] === 'string' ? data[key] : '';
+        }
+    }
+    return undefined;
+}
 function parseLicenseMessage(data) {
-    const paymentStatus = readString(data, ['paymentStatus', 'status']);
+    const status = readString(data, ['paymentStatus', 'status']);
+    const paymentStatus = ['PAID', 'FREE', 'UNPAID'].includes(status) ? status : '';
     const usageLimitRaw = data.usageLimit;
     return {
         ...(paymentStatus ? { paymentStatus } : {}),
-        licenseKey: readString(data, ['licenseKey']) || undefined,
+        licenseKey: readOptionalText(data, ['licenseKey']),
         planTier: readString(data, ['planTier']) || undefined,
         hasLicenseKey: readBoolean(data, ['hasLicenseKey']),
         isLicenseRegistered: readBoolean(data, ['isLicenseRegistered']),
@@ -1858,12 +1905,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,
+        licenseStatus: readOptionalText(data, ['licenseStatus', 'license_status']),
+        licenseSource: readOptionalText(data, ['licenseSource', 'license_source', 'source']),
+        accessScope: readOptionalText(data, ['accessScope', 'access_scope', 'scope']),
+        expiresAt: readOptionalText(data, ['expiresAt', 'expires_at']),
+        lastVerifiedAt: readOptionalText(data, ['lastVerifiedAt', 'last_verified_at']),
+        validationMessage: readOptionalText(data, ['validationMessage', 'validation_message']),
     };
 }
 function useFigmaLicenseBridge(options = {}) {
@@ -1934,8 +1981,16 @@ function useFigmaLicenseBridge(options = {}) {
                         isLicenseRegistered: false,
                         activationLimit: 0,
                         activationUsage: 0,
+                        licenseStatus: '',
+                        licenseSource: '',
+                        accessScope: '',
+                        expiresAt: '',
+                        lastVerifiedAt: '',
+                        validationMessage: '',
+                        lastMessage: '',
+                        lastErrorCode: '',
                         deactivateMessage: parsed.lastMessage || '라이선스가 비활성화되었습니다.',
-                        deactivateErrorCode: undefined,
+                        deactivateErrorCode: '',
                     });
                 }
             }
@@ -2080,22 +2135,22 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
                 React.createElement("div", { className: "designbase-figma-page-license__title" },
                     React.createElement("h2", null, isPaid
                         ? resolveText(translate, { key: 'license.pro_account' }, '프로 계정')
-                        : showYoutubeMembershipTab
+                        : (showYoutubeMembershipTab || isMembershipMode)
                             ? resolveText(translate, { key: 'license.unlock_unlimited' }, 'Unlock Unlimited Access')
                             : resolveText(translate, { key: 'license.upgrade_to_pro' }, '프로로 업그레이드')),
                     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' }, '모든 기능을 사용할 수 있습니다.')
-                    : showYoutubeMembershipTab
+                    : (showYoutubeMembershipTab || isMembershipMode)
                         ? resolveText(translate, {
-                            key: 'license.unlock_unlimited_description',
+                            key: isMembershipMode ? 'license.unlock_unlimited_description' : 'license.purchase_or_membership_description',
                         }, 'Add a license key to unlock Pro features and unlimited use across Designbase plugins.')
                         : resolveText(translate, { key: 'license.purchase_for_unlimited' }, '디자인베이스 멤버십 또는 라이선스로 무제한 이용이 가능합니다.')),
                 !isPaid && !showYoutubeMembershipTab && !isMembershipMode && (React.createElement("p", { className: "designbase-figma-page-license__usage" }, usageLabel))),
-            !isPaid && showYoutubeMembershipTab && (React.createElement("div", { className: "designbase-figma-page-license__benefit" },
+            !isPaid && (showYoutubeMembershipTab || isMembershipMode) && (React.createElement("div", { className: "designbase-figma-page-license__benefit" },
                 React.createElement("span", { className: "designbase-figma-page-license__benefit-icon", "aria-hidden": "true" }, "\u221E"),
                 React.createElement("div", null,
-                    React.createElement("strong", null, resolveText(translate, { key: 'license.unlimited_benefit_title' }, '모든 플러그인 무제한 사용')),
+                    React.createElement("strong", null, resolveText(translate, { key: isMembershipMode ? 'license.unlimited_benefit_title' : 'license.purchase_benefit_title' }, '모든 플러그인 무제한 사용')),
                     React.createElement("p", null, resolveText(translate, { key: 'license.unlimited_benefit_description' }, '사용 횟수 제한 없이 프로 기능과 프리미엄 콘텐츠를 이용할 수 있습니다.'))))),
             hasSourceTabs && (React.createElement("div", { className: "designbase-figma-page-license__source-tabs", role: "tablist", "aria-label": resolveText(translate, { key: 'license.source_tabs_label' }, 'License type') },
                 React.createElement("button", { type: "button", role: "tab", "aria-selected": !isMembershipMode, onClick: () => setActiveLicenseMode('pricing') }, resolveText(translate, { key: 'license.source_lemon_squeezy' }, 'Lemon Squeezy license')),