@designbasekorea/figma-ui 0.6.9 → 0.7.0

package/dist/index.js

@@ -3,9 +3,429 @@
 var React = require('react');
 var react = require('@designbasekorea/ui-wc/react');
 var icons = require('@designbasekorea/icons');
+var figmaLicenseCore = require('@designbasekorea/figma-license-core');
 
 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}
 
+const FIGMA_UI_TRANSLATIONS = {
+    ko: {
+        close: '닫기',
+        back: '뒤로가기',
+        officialWebsite: '공식 웹사이트',
+        youtube: '유튜브',
+        instagram: '인스타그램',
+        figmaCommunity: '피그마 커뮤니티',
+        contact: '문의하기',
+        languageSettings: '언어 설정',
+        languageSettingsDescription: '플러그인에 표시할 언어를 선택하세요.',
+        'language.korean': '한국어',
+        'language.english': 'English',
+        'language.japanese': '日本語',
+        unlimitedUsage: '무제한 사용',
+        proUser: '프로',
+        usingFree: '무료 사용',
+        free: '무료',
+        trialPlan: '체험판',
+        planSuffix: '플랜',
+        usageDetails: '사용량 상세',
+        dailyUsage: '오늘 사용량',
+        usedToday: '오늘 사용',
+        remainingToday: '오늘 남은 사용량',
+        remainingUsage: '오늘 남은 사용량',
+        managePlan: '플랜 관리',
+        upgradePlan: '플랜 업그레이드',
+        remainingShort: '남음',
+        usageCountCaption: '오늘 사용',
+        remainingCopy: '{{count}}회 남음 · 매일 리셋',
+        lowUsageWarning: '무료 사용량이 {{count}}회({{percent}}%) 남았습니다. 멤버십으로 무제한 이용해보세요.',
+        usageUnavailable: '사용량 제한이 없습니다',
+        unlimitedUsageTooltip: '모든 기능을 제한 없이 사용할 수 있습니다',
+        betaUsageDescription: '베타 기간에는 사용량 제한이 적용되지 않습니다',
+        perDay: '일',
+        resetsDaily: '매일 리셋',
+        donationPrompt: '이 플러그인이 유용했나요?',
+        betaStatus: 'BETA',
+        'donation.buy_me_a_coffee': '커피 한 잔 사기',
+        'donation.prompt': '도움이 되었다면 커피 한 잔 사주세요!',
+        'form.license_key': '라이선스 키',
+        'form.license_placeholder': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
+        'form.submit': '제출',
+        'form.verifying': '확인 중...',
+        'license.youtube_membership': 'YouTube 멤버십',
+        '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.usage_daily': '오늘 남은 횟수 {{remaining}}/{{limit}}',
+        'license.usage_weekly': '이번 주 남은 횟수 {{remaining}}/{{limit}}',
+        'license.usage_monthly': '이번 달 남은 횟수 {{remaining}}/{{limit}}',
+        'license.usage_generic': '남은 횟수 {{remaining}}/{{limit}}',
+        'license.activated': '라이선스 활성화됨',
+        'license.activations_remaining': '활성',
+        'license.spots_remaining': '자리 남음',
+        'license.deactivating': '비활성화 중...',
+        'license.deactivate': '라이선스 비활성화',
+        'license.designbase_account': '디자인베이스 계정',
+        'license.designbase_account_hint': 'WordPress 계정으로 로그인하거나 멤버십을 구매하면 플러그인이 자동으로 활성화됩니다.',
+        'license.authenticating': '인증 중...',
+        'license.login_with_designbase': '디자인베이스로 로그인',
+        'license.purchase_membership': '멤버십 안내',
+        'license.manage_account': '계정·멤버십 관리',
+        'license.enter_key': '라이선스 키 입력',
+        'license.key': '라이선스 키',
+        'license.submit': '활성화',
+        'license.verifying': '확인 중...',
+        'license.enter_from_email': '이메일로 받은 라이선스 키를 입력하세요.',
+        'license.enter_from_youtube': '멤버 전용 커뮤니티에서 받은 키를 입력하세요.',
+        'license.help_link': '라이선스·결제 도움말',
+        'license.youtube_membership_howto': '이용 방법',
+        'license.youtube_membership_step_1': 'Designbase YouTube 채널 멤버십에 가입합니다.',
+        'license.youtube_membership_step_2': '멤버 전용 커뮤니티에서 이번 달 키를 복사합니다.',
+        'license.youtube_membership_step_3': '아래 입력창에 키를 붙여 넣고 활성화합니다.',
+        'license.youtube_membership_join': '멤버십 가입',
+        'license.youtube_membership_guide': '안내보기',
+        'license.all_plugins': '모든 플러그인',
+        'license.source_youtube_membership': 'YouTube 멤버십',
+        'license.source_purchase': '구매 라이선스',
+        'license.status_active': '활성',
+        'license.status_inactive': '라이선스 확인 실패',
+        'license.status_label': '라이선스 상태',
+        'license.key_label': '라이선스 키',
+        'license.hide_key': '숨기기',
+        'license.reveal_key': '보기',
+        'license.source': '출처',
+        'license.access': '접근 범위',
+        'license.expires': '만료일',
+        'license.last_checked': '최근 확인',
+        'payment.license_key_label': '라이선스 키',
+        'payment.activations_remaining': '활성',
+        'payment.spots_remaining': '자리 남음',
+        'payment.deactivating': '비활성화 중...',
+        'payment.deactivate_license': '라이선스 비활성화',
+        lifetimeAccess: '평생 이용',
+        perYear: '년',
+        perMonth: '월',
+        monthlyBilling: '월간 결제',
+        yearlyBilling: '연간 결제',
+        oneTimePaymentLifetime: '평생 이용을 위한 일회성 결제입니다.',
+        feature: '기능',
+        freePrice: '$0',
+        pro: '프로',
+        recommended: '추천',
+        'pricing.usage_limit': '사용 제한',
+        'pricing.daily_limit': '일일 제한',
+        'pricing.unlimited': '무제한',
+        'pricing.all_topics': '모든 주제 사용',
+        'pricing.max_selection': '최대 선택 제한',
+        'pricing.max_selection_free': '최대 5개',
+        'pricing.max_selection_pro': '최대 30개',
+        'pricing.dummy_count': '더미 개수',
+        'pricing.dummy_count_free': '1,400개',
+        'pricing.dummy_count_pro': '4,400개 이상',
+        'pricing.custom_number': '커스텀 숫자 사용',
+        'pricing.discount_suffix': '절약',
+        'settings.modal_title': '목록 변경',
+        'settings.modal_description': '드래그하여 순서를 변경하거나, 토글하여 카테고리를 숨길 수 있습니다.',
+        'settings.reset': '초기화',
+        'settings.cancel': '취소',
+        'settings.save': '저장',
+        'progress.working': '작업 중',
+        'progress.processing': '처리 중...',
+        'progress.completed': '완료되었습니다',
+        'progress.stop': '중지',
+        'progress.confirm': '확인',
+        'banner.upgrade_title': '프로로 업그레이드하세요',
+        'banner.upgrade_description': '무제한 기능을 사용하고 더 많은 혜택을 누리세요.',
+        'banner.upgrade_button': '지금 업그레이드',
+        loading: '불러오는 중',
+    },
+    en: {
+        close: 'Close',
+        back: 'Back',
+        officialWebsite: 'Official website',
+        youtube: 'YouTube',
+        instagram: 'Instagram',
+        figmaCommunity: 'Figma Community',
+        contact: 'Contact',
+        languageSettings: 'Language settings',
+        languageSettingsDescription: 'Choose the language to display in the plugin.',
+        'language.korean': 'Korean',
+        'language.english': 'English',
+        'language.japanese': 'Japanese',
+        unlimitedUsage: 'Unlimited use',
+        proUser: 'Pro',
+        usingFree: 'Free use',
+        free: 'Free',
+        trialPlan: 'Trial',
+        planSuffix: 'plan',
+        usageDetails: 'Usage details',
+        dailyUsage: "Today's usage",
+        usedToday: 'Used today',
+        remainingToday: 'Remaining today',
+        remainingUsage: 'Remaining today',
+        managePlan: 'Manage plan',
+        upgradePlan: 'Upgrade plan',
+        remainingShort: 'left',
+        usageCountCaption: 'Used today',
+        remainingCopy: '{{count}} remaining · resets daily',
+        lowUsageWarning: 'Only {{count}} free uses ({{percent}}%) remain. Upgrade for unlimited access.',
+        usageUnavailable: 'No usage limit',
+        unlimitedUsageTooltip: 'Use every feature without limits',
+        betaUsageDescription: 'Usage limits are not applied during the beta period',
+        perDay: 'day',
+        resetsDaily: 'Resets daily',
+        donationPrompt: 'Is this plugin useful?',
+        betaStatus: 'BETA',
+        'donation.buy_me_a_coffee': 'Buy me a coffee',
+        'donation.prompt': 'If this helped, buy me a coffee!',
+        'form.license_key': 'License key',
+        'form.license_placeholder': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
+        'form.submit': 'Activate',
+        'form.verifying': 'Verifying...',
+        'license.youtube_membership': 'YouTube 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.usage_daily': '{{remaining}}/{{limit}} remaining today',
+        'license.usage_weekly': '{{remaining}}/{{limit}} remaining this week',
+        'license.usage_monthly': '{{remaining}}/{{limit}} remaining this month',
+        'license.usage_generic': '{{remaining}}/{{limit}} remaining',
+        'license.activated': 'License activated',
+        'license.activations_remaining': 'activations',
+        'license.spots_remaining': 'spots remaining',
+        'license.deactivating': 'Deactivating...',
+        'license.deactivate': 'Deactivate license',
+        '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...',
+        'license.login_with_designbase': 'Sign in with Designbase',
+        'license.purchase_membership': 'Membership details',
+        'license.manage_account': 'Manage account · membership',
+        'license.enter_key': 'Enter license key',
+        'license.key': 'License key',
+        'license.submit': 'Activate',
+        'license.verifying': 'Verifying...',
+        'license.enter_from_email': 'Enter the license key you received by email.',
+        'license.enter_from_youtube': 'Enter the key from the members-only community.',
+        'license.help_link': 'License · payment help',
+        'license.youtube_membership_howto': 'How to use',
+        'license.youtube_membership_step_1': 'Join the Designbase YouTube channel membership.',
+        'license.youtube_membership_step_2': 'Copy this month’s key from the members-only community.',
+        'license.youtube_membership_step_3': 'Paste the key below and activate it.',
+        'license.youtube_membership_join': 'Join membership',
+        'license.youtube_membership_guide': 'View guide',
+        'license.all_plugins': 'All plugins',
+        'license.source_youtube_membership': 'YouTube Membership',
+        'license.source_purchase': 'Purchased license',
+        'license.status_active': 'Active',
+        'license.status_inactive': 'License check failed',
+        'license.status_label': 'License status',
+        'license.key_label': 'License key',
+        'license.hide_key': 'Hide',
+        'license.reveal_key': 'Show',
+        'license.source': 'Source',
+        'license.access': 'Access',
+        'license.expires': 'Expires',
+        'license.last_checked': 'Last checked',
+        'payment.license_key_label': 'License key',
+        'payment.activations_remaining': 'activations',
+        'payment.spots_remaining': 'spots remaining',
+        'payment.deactivating': 'Deactivating...',
+        'payment.deactivate_license': 'Deactivate license',
+        lifetimeAccess: 'Lifetime access',
+        perYear: 'year',
+        perMonth: 'month',
+        monthlyBilling: 'Monthly billing',
+        yearlyBilling: 'Yearly billing',
+        oneTimePaymentLifetime: 'One-time payment for lifetime access.',
+        feature: 'Feature',
+        freePrice: '$0',
+        pro: 'Pro',
+        recommended: 'Recommended',
+        'pricing.usage_limit': 'Usage limit',
+        'pricing.daily_limit': 'Daily limit',
+        'pricing.unlimited': 'Unlimited',
+        'pricing.all_topics': 'All topics',
+        'pricing.max_selection': 'Selection limit',
+        'pricing.max_selection_free': 'Up to 5',
+        'pricing.max_selection_pro': 'Up to 30',
+        'pricing.dummy_count': 'Dummy count',
+        'pricing.dummy_count_free': '1,400',
+        'pricing.dummy_count_pro': '4,400+',
+        'pricing.custom_number': 'Custom numbers',
+        'pricing.discount_suffix': 'saved',
+        'settings.modal_title': 'Change list',
+        'settings.modal_description': 'Drag to reorder or toggle a category to hide it.',
+        'settings.reset': 'Reset',
+        'settings.cancel': 'Cancel',
+        'settings.save': 'Save',
+        'progress.working': 'Working',
+        'progress.processing': 'Processing...',
+        'progress.completed': 'Completed',
+        'progress.stop': 'Stop',
+        'progress.confirm': 'Done',
+        'banner.upgrade_title': 'Upgrade to Pro',
+        'banner.upgrade_description': 'Unlock unlimited features and more benefits.',
+        'banner.upgrade_button': 'Upgrade now',
+        loading: 'Loading',
+    },
+    ja: {
+        close: '閉じる',
+        back: '戻る',
+        officialWebsite: '公式ウェブサイト',
+        youtube: 'YouTube',
+        instagram: 'Instagram',
+        figmaCommunity: 'Figmaコミュニティ',
+        contact: 'お問い合わせ',
+        languageSettings: '言語設定',
+        languageSettingsDescription: 'プラグインに表示する言語を選択してください。',
+        'language.korean': '韓国語',
+        'language.english': '英語',
+        'language.japanese': '日本語',
+        unlimitedUsage: '無制限で使用',
+        proUser: 'Pro',
+        usingFree: '無料で使用中',
+        free: '無料',
+        trialPlan: 'トライアル',
+        planSuffix: 'プラン',
+        usageDetails: '使用量の詳細',
+        dailyUsage: '今日の使用量',
+        usedToday: '今日の使用',
+        remainingToday: '今日の残り使用量',
+        remainingUsage: '今日の残り使用量',
+        managePlan: 'プランを管理',
+        upgradePlan: 'プランをアップグレード',
+        remainingShort: '残り',
+        usageCountCaption: '今日の使用',
+        remainingCopy: '{{count}}回残り · 毎日リセット',
+        lowUsageWarning: '無料使用回数は残り{{count}}回（{{percent}}%）です。無制限利用にアップグレードできます。',
+        usageUnavailable: '使用制限はありません',
+        unlimitedUsageTooltip: 'すべての機能を無制限で使用できます',
+        betaUsageDescription: 'ベータ期間中は使用制限がありません',
+        perDay: '日',
+        resetsDaily: '毎日リセット',
+        donationPrompt: 'このプラグインは役に立ちましたか？',
+        betaStatus: 'BETA',
+        'donation.buy_me_a_coffee': 'コーヒーを一杯おごる',
+        'donation.prompt': '役に立ったらコーヒーを一杯おごってください！',
+        'form.license_key': 'ライセンスキー',
+        'form.license_placeholder': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
+        'form.submit': '有効化',
+        'form.verifying': '確認中...',
+        'license.youtube_membership': 'YouTubeメンバーシップ',
+        '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.usage_daily': '今日の残り {{remaining}}/{{limit}}回',
+        'license.usage_weekly': '今週の残り {{remaining}}/{{limit}}回',
+        'license.usage_monthly': '今月の残り {{remaining}}/{{limit}}回',
+        'license.usage_generic': '残り {{remaining}}/{{limit}}回',
+        'license.activated': 'ライセンス有効化済み',
+        'license.activations_remaining': '有効化',
+        'license.spots_remaining': '枠残り',
+        'license.deactivating': '無効化中...',
+        'license.deactivate': 'ライセンスを無効化',
+        'license.designbase_account': 'Designbaseアカウント',
+        'license.designbase_account_hint': 'WordPressアカウントでサインインするか、メンバーシップを購入するとプラグインが自動的に有効化されます。',
+        'license.authenticating': '認証中...',
+        'license.login_with_designbase': 'Designbaseでサインイン',
+        'license.purchase_membership': 'メンバーシップの詳細',
+        'license.manage_account': 'アカウント・メンバーシップを管理',
+        'license.enter_key': 'ライセンスキーを入力',
+        'license.key': 'ライセンスキー',
+        'license.submit': '有効化',
+        'license.verifying': '確認中...',
+        'license.enter_from_email': 'メールで受け取ったライセンスキーを入力してください。',
+        'license.enter_from_youtube': 'メンバー限定コミュニティのキーを入力してください。',
+        'license.help_link': 'ライセンス・支払いヘルプ',
+        'license.youtube_membership_howto': '利用方法',
+        'license.youtube_membership_step_1': 'Designbase YouTubeチャンネルのメンバーシップに参加します。',
+        'license.youtube_membership_step_2': 'メンバー限定コミュニティから今月のキーをコピーします。',
+        'license.youtube_membership_step_3': '下の入力欄にキーを貼り付けて有効化します。',
+        'license.youtube_membership_join': 'メンバーシップに参加',
+        'license.youtube_membership_guide': 'ガイドを見る',
+        'license.all_plugins': 'すべてのプラグイン',
+        'license.source_youtube_membership': 'YouTubeメンバーシップ',
+        'license.source_purchase': '購入ライセンス',
+        'license.status_active': '有効',
+        'license.status_inactive': 'ライセンス確認に失敗しました',
+        'license.status_label': 'ライセンス状態',
+        'license.key_label': 'ライセンスキー',
+        'license.hide_key': '隠す',
+        'license.reveal_key': '表示',
+        'license.source': '取得元',
+        'license.access': 'アクセス範囲',
+        'license.expires': '有効期限',
+        'license.last_checked': '最終確認',
+        'payment.license_key_label': 'ライセンスキー',
+        'payment.activations_remaining': '有効化',
+        'payment.spots_remaining': '枠残り',
+        'payment.deactivating': '無効化中...',
+        'payment.deactivate_license': 'ライセンスを無効化',
+        lifetimeAccess: '生涯利用',
+        perYear: '年',
+        perMonth: '月',
+        monthlyBilling: '月払い',
+        yearlyBilling: '年払い',
+        oneTimePaymentLifetime: '生涯利用のための一括払いです。',
+        feature: '機能',
+        freePrice: '$0',
+        pro: 'Pro',
+        recommended: 'おすすめ',
+        'pricing.usage_limit': '使用制限',
+        'pricing.daily_limit': '1日の制限',
+        'pricing.unlimited': '無制限',
+        'pricing.all_topics': 'すべてのトピック',
+        'pricing.max_selection': '選択上限',
+        'pricing.max_selection_free': '最大5個',
+        'pricing.max_selection_pro': '最大30個',
+        'pricing.dummy_count': 'ダミー数',
+        'pricing.dummy_count_free': '1,400個',
+        'pricing.dummy_count_pro': '4,400個以上',
+        'pricing.custom_number': 'カスタム数値',
+        'pricing.discount_suffix': '割引',
+        'settings.modal_title': 'リストを変更',
+        'settings.modal_description': 'ドラッグして並べ替えるか、トグルでカテゴリを非表示にできます。',
+        'settings.reset': 'リセット',
+        'settings.cancel': 'キャンセル',
+        'settings.save': '保存',
+        'progress.working': '処理中',
+        'progress.processing': '処理しています...',
+        'progress.completed': '完了しました',
+        'progress.stop': '停止',
+        'progress.confirm': '完了',
+        'banner.upgrade_title': 'Proにアップグレード',
+        'banner.upgrade_description': '無制限の機能とさらに多くの特典を利用できます。',
+        'banner.upgrade_button': '今すぐアップグレード',
+        loading: '読み込み中',
+    },
+};
+function normalizeFigmaUiLocale(locale) {
+    const normalized = (locale || '').toLowerCase().split(/[-_]/)[0];
+    if (normalized === 'en' || normalized === 'ja')
+        return normalized;
+    return 'ko';
+}
+function createFigmaUiTranslator(locale = 'ko', parentT) {
+    const normalizedLocale = normalizeFigmaUiLocale(locale);
+    const translations = FIGMA_UI_TRANSLATIONS[normalizedLocale];
+    return (key, values) => {
+        const parentValue = parentT?.(key, values);
+        if (parentValue && parentValue !== key) {
+            return interpolateText(parentValue, values);
+        }
+        const value = translations[key] ?? FIGMA_UI_TRANSLATIONS.ko[key] ?? key;
+        return interpolateText(value, values);
+    };
+}
 function interpolateText(template, values) {
     if (!values)
         return template;
@@ -32,11 +452,34 @@ function resolveText(t, input, fallback) {
     return input.key;
 }
 
+const defaultContextValue = {
+    locale: 'ko',
+    t: createFigmaUiTranslator('ko'),
+};
+const FigmaUiI18nContext = React.createContext(defaultContextValue);
+const FigmaUiI18nProvider = ({ locale = 'ko', t: parentT, children, }) => {
+    const normalizedLocale = normalizeFigmaUiLocale(locale);
+    const value = React.useMemo(() => ({
+        locale: normalizedLocale,
+        parentT,
+        t: createFigmaUiTranslator(normalizedLocale, parentT),
+    }), [normalizedLocale, parentT]);
+    return React.createElement(FigmaUiI18nContext.Provider, { value: value }, children);
+};
+function useFigmaUiI18n(localeOverride, tOverride) {
+    const context = React.useContext(FigmaUiI18nContext);
+    const locale = normalizeFigmaUiLocale(localeOverride ?? context.locale);
+    const parentT = tOverride ?? context.parentT;
+    const t = React.useMemo(() => createFigmaUiTranslator(locale, parentT), [locale, parentT]);
+    return { locale, parentT, t };
+}
+
 const DONATION_ICON_NAMES = {
     heart: 'star-filled',
     coffee: 'cart',
 };
-const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', text = { key: 'donation.buy_me_a_coffee' }, iconType = 'heart', size = 's', variant = 'tertiary', fullWidth = false, iconOnly = false, disabled = false, showPrompt = false, promptText = { key: 'donation.prompt' }, className, onClick, t }) => {
+const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', text = { key: 'donation.buy_me_a_coffee' }, iconType = 'heart', size = 's', variant = 'tertiary', fullWidth = false, iconOnly = false, disabled = false, showPrompt = false, promptText = { key: 'donation.prompt' }, className, onClick, t, locale, }) => {
+    const { t: translate } = useFigmaUiI18n(locale, t);
     const handleClick = () => {
         if (onClick) {
             onClick();
@@ -45,8 +488,8 @@ const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', te
             window.open(donationUrl, '_blank', 'noopener,noreferrer');
         }
     };
-    const displayText = resolveText(t, text, 'Buy me a coffee');
-    const displayPromptText = resolveText(t, promptText, '도움이 되었다면 커피 한 잔 사주세요!');
+    const displayText = resolveText(translate, text, 'Buy me a coffee');
+    const displayPromptText = resolveText(translate, promptText, '도움이 되었다면 커피 한 잔 사주세요!');
     const buttonSize = size;
     return (React.createElement("div", { className: clsx('designbase-figma-donation-badge-container', className) },
         showPrompt && !iconOnly && (React.createElement("div", { className: "designbase-figma-donation-badge__prompt" }, displayPromptText)),
@@ -97,13 +540,14 @@ const FigmaHeader = ({ children, actions = [], searchBar, sticky = true, classNa
 };
 FigmaHeader.displayName = 'FigmaHeader';
 
-const FigmaPageHead = ({ onBack, title, description, actions = [], moreActions = [], className, t }) => {
+const FigmaPageHead = ({ onBack, title, description, actions = [], moreActions = [], className, t, locale, }) => {
+    const { t: translate } = useFigmaUiI18n(locale, t);
     const classes = clsx('designbase-figma-page-head', className);
-    const displayTitle = resolveText(t, title);
-    const displayDescription = description ? resolveText(t, description) : undefined;
+    const displayTitle = resolveText(translate, title);
+    const displayDescription = description ? resolveText(translate, description) : undefined;
     const dropdownItems = moreActions.map((action) => ({
         id: action.id,
-        label: resolveText(t, action.label),
+        label: resolveText(translate, action.label),
     }));
     const handleDropdownChange = (event) => {
         const actionId = event.detail?.id ?? event.detail?.value;
@@ -112,7 +556,7 @@ const FigmaPageHead = ({ onBack, title, description, actions = [], moreActions =
     };
     return (React.createElement("div", { className: classes },
         React.createElement("div", { className: "designbase-figma-page-head__left" },
-            React.createElement(react.Button, { variant: "tertiary", size: "s", iconOnly: true, startIcon: "chevron-left", onPress: onBack, "aria-label": "\uB4A4\uB85C\uAC00\uAE30" }),
+            React.createElement(react.Button, { variant: "tertiary", size: "s", iconOnly: true, startIcon: "chevron-left", onPress: onBack, "aria-label": translate('back') }),
             React.createElement("div", { className: "designbase-figma-page-head__titles" },
                 React.createElement("h2", null, displayTitle),
                 displayDescription && React.createElement("p", null, displayDescription))),
@@ -122,7 +566,8 @@ const FigmaPageHead = ({ onBack, title, description, actions = [], moreActions =
 };
 FigmaPageHead.displayName = 'FigmaPageHead';
 
-const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom, isEnabled = true, onToggle, className, enableScrollNavigation = false, headerHeight = 94, onActiveSectionChange, t, collapsible = false, defaultCollapsed = false, onCollapseChange, badge, overflowVisible = false, }) => {
+const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom, isEnabled = true, onToggle, className, enableScrollNavigation = false, headerHeight = 94, onActiveSectionChange, t, locale, collapsible = false, defaultCollapsed = false, onCollapseChange, badge, overflowVisible = false, }) => {
+    const { t: translate } = useFigmaUiI18n(locale, t);
     const sectionRef = React.useRef(null);
     const clipRef = React.useRef(null);
     const innerRef = React.useRef(null);
@@ -242,7 +687,7 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
             React.createElement("div", { className: "designbase-figma-section__title-area" },
                 React.createElement("h2", { className: "designbase-figma-section__title" },
                     typeof title === 'string' || (typeof title === 'object' && 'key' in title)
-                        ? resolveText(t, title)
+                        ? resolveText(translate, title)
                         : title,
                     badge && (React.createElement(react.Badge, { variant: "secondary", size: "s" }, badge)))),
             React.createElement("div", { className: "designbase-figma-section__controls", onClick: (e) => e.stopPropagation() },
@@ -395,54 +840,30 @@ const FigmaSidebar = ({ categories, categoryGroups = {}, categoryLabels = {}, ac
 };
 FigmaSidebar.displayName = 'FigmaSidebar';
 
-let useTranslation$2 = null;
-try {
-    const reactI18next = require('react-i18next');
-    useTranslation$2 = reactI18next.useTranslation;
-}
-catch (e) {
-}
 const DEFAULT_LANGUAGES$1 = [
-    { code: 'ko', label: '한국어' },
-    { code: 'en', label: 'English' },
-    { code: 'ja', label: '日本語' },
+    { code: 'ko', label: { key: 'language.korean' } },
+    { code: 'en', label: { key: 'language.english' } },
+    { code: 'ja', label: { key: 'language.japanese' } },
 ];
-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 resolvedCurrentLanguage = currentLanguage || i18n?.language || languages[0]?.code;
+const LanguageSettingsModal = ({ isOpen, onClose, languages = DEFAULT_LANGUAGES$1, currentLanguage, onLanguageChange, title, description, className, t, }) => {
+    const { t: translate } = useFigmaUiI18n(currentLanguage, t);
+    const resolvedCurrentLanguage = currentLanguage || languages[0]?.code;
     const [pendingLanguage, setPendingLanguage] = React.useState(resolvedCurrentLanguage);
     React.useEffect(() => {
         if (isOpen) {
             setPendingLanguage(resolvedCurrentLanguage);
         }
     }, [isOpen, resolvedCurrentLanguage]);
-    const translate = (key, fallback) => {
-        const translated = t(key);
-        return translated && translated !== key ? translated : fallback;
-    };
     const handleSelect = React.useCallback((languageCode) => {
         setPendingLanguage(languageCode);
-        if (i18n) {
-            i18n.changeLanguage(languageCode);
-        }
         onLanguageChange?.(languageCode);
         onClose();
-    }, [i18n, onClose, onLanguageChange]);
-    return (React.createElement(react.Modal, { isOpen: isOpen, onClose: onClose, title: title || translate('languageSettings', '언어 설정'), size: "s", className: clsx('designbase-figma-language-settings-modal', className) },
+    }, [onClose, onLanguageChange]);
+    return (React.createElement(react.Modal, { isOpen: isOpen, onClose: onClose, title: title || translate('languageSettings'), size: "s", className: clsx('designbase-figma-language-settings-modal', className) },
         React.createElement(react.ModalBody, { 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());
+            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(translate, language.label, language.code.toUpperCase());
                 const isActive = language.code === pendingLanguage;
                 return (React.createElement("li", { key: language.code, role: "presentation" },
                     React.createElement(react.Button, { type: "button", variant: "tertiary", size: "m", fullWidth: true, className: clsx('designbase-figma-language-settings-modal__option', { 'designbase-figma-language-settings-modal__option--active': isActive }), role: "option", "aria-selected": isActive, onPress: () => handleSelect(language.code) },
@@ -452,13 +873,6 @@ const LanguageSettingsModal = ({ isOpen, onClose, languages = DEFAULT_LANGUAGES$
 };
 LanguageSettingsModal.displayName = 'LanguageSettingsModal';
 
-let useTranslation$1 = null;
-try {
-    const reactI18next = require('react-i18next');
-    useTranslation$1 = reactI18next.useTranslation;
-}
-catch (e) {
-}
 const defaultLinks = [
     {
         name: 'officialWebsite',
@@ -486,33 +900,20 @@ const defaultLinks = [
         icon: React.createElement(icons.MailIcon, { size: 20 }),
     },
 ];
-const defaultTranslations$1 = {
-    officialWebsite: '공식 웹사이트',
-    youtube: '유튜브',
-    instagram: '인스타그램',
-    figmaCommunity: '피그마 커뮤니티',
-    contact: '문의하기',
-    languageSettings: '언어 설정',
-};
-const defaultT$1 = (key) => defaultTranslations$1[key] || key;
 const defaultLanguages = [
-    { code: 'ko', label: '한국어' },
-    { code: 'en', label: 'English' },
-    { code: 'ja', label: '日本語' },
+    { code: 'ko', label: { key: 'language.korean' } },
+    { code: 'en', label: { key: 'language.english' } },
+    { code: 'ja', label: { key: 'language.japanese' } },
 ];
-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 LogoDropdown = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', links = defaultLinks, position = 'top-left', className, t, showLanguageSelector = true, languages = defaultLanguages, currentLanguage, onLanguageChange, }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [isLanguageModalOpen, setIsLanguageModalOpen] = React.useState(false);
     const [internalLanguage, setInternalLanguage] = React.useState();
-    const i18n = useTranslation$1 ? useTranslation$1().i18n : null;
+    const { t: translate } = useFigmaUiI18n(currentLanguage ?? internalLanguage, t);
     const rootRef = React.useRef(null);
     const triggerRef = React.useRef(null);
     const menuId = `designbase-figma-logo-menu-${React.useId().replace(/:/g, '')}`;
-    const activeLanguage = currentLanguage ?? internalLanguage ?? i18n?.language ?? languages[0]?.code;
-    const translate = (key, fallback) => {
-        const translated = t(key);
-        return translated && translated !== key ? translated : fallback;
-    };
+    const activeLanguage = currentLanguage ?? internalLanguage ?? languages[0]?.code;
     React.useEffect(() => {
         if (!isOpen) {
             return undefined;
@@ -551,9 +952,6 @@ const LogoDropdown = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase'
         if (currentLanguage === undefined) {
             setInternalLanguage(languageCode);
         }
-        if (i18n) {
-            i18n.changeLanguage(languageCode);
-        }
         onLanguageChange?.(languageCode);
     };
     const classes = clsx('designbase-figma-logo-dropdown', `designbase-figma-logo-dropdown--${position}`, {
@@ -568,14 +966,14 @@ const LogoDropdown = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase'
             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("span", { className: "designbase-figma-logo-dropdown__text" }, translate(link.name)),
                     React.createElement(icons.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(icons.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 }))));
+                    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: translate }))));
 };
 LogoDropdown.displayName = 'LogoDropdown';
 
@@ -583,7 +981,8 @@ 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 UsageStatusPopover = ({ paymentStatus, usageCount = 0, remainingUsage, maxDailyUsage = 20, showUsage = true, showPlan = true, isLoading = false, onLicensePageClick, t, locale, className, }) => {
+    const { t: translate } = useFigmaUiI18n(locale, t);
     const [isOpen, setIsOpen] = React.useState(false);
     const rootRef = React.useRef(null);
     const triggerRef = React.useRef(null);
@@ -592,30 +991,32 @@ const UsageStatusPopover = ({ paymentStatus, usageCount = 0, maxDailyUsage = 20,
     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 hasRemainingUsage = typeof remainingUsage === 'number' && Number.isFinite(remainingUsage);
+    const remaining = hasRemainingUsage
+        ? Math.min(limit, Math.max(0, Math.round(remainingUsage)))
+        : Math.max(0, limit - Math.min(limit, Math.max(0, Math.round(usageCount))));
+    const remainingPercent = hasDailyLimit ? Math.round((remaining / limit) * 100) : 0;
     const hasControl = showUsage || showPlan;
     const planLabel = isPaid
-        ? fallbackText(t, 'proUser', '프로')
+        ? fallbackText(translate, 'proUser', '프로')
         : isBeta
-            ? fallbackText(t, 'betaStatus', 'BETA')
+            ? fallbackText(translate, 'betaStatus', 'BETA')
             : paymentStatus === 'TRIAL'
-                ? fallbackText(t, 'trialPlan', '체험판')
-                : fallbackText(t, 'free', '무료');
+                ? fallbackText(translate, 'trialPlan', '체험판')
+                : fallbackText(translate, 'free', '무료');
     const planTitle = isBeta
         ? planLabel
-        : `${planLabel} ${fallbackText(t, 'planSuffix', '플랜')}`;
+        : `${planLabel} ${fallbackText(translate, 'planSuffix', '플랜')}`;
     const triggerLabel = isPaid
-        ? `${planLabel}, ${fallbackText(t, 'unlimitedUsage', '무제한 사용 가능')}`
+        ? `${planLabel}, ${fallbackText(translate, 'unlimitedUsage', '무제한 사용 가능')}`
         : isBeta
             ? planLabel
             : hasDailyLimit
-                ? `${remaining}/${limit} ${fallbackText(t, 'remainingShort', '남음')}`
+                ? `${remaining}/${limit} ${fallbackText(translate, 'remainingShort', '남음')}`
                 : planLabel;
     const upgradeLabel = isPaid
-        ? fallbackText(t, 'managePlan', '플랜 관리')
-        : fallbackText(t, 'upgradePlan', '플랜 업그레이드');
+        ? fallbackText(translate, 'managePlan', '플랜 관리')
+        : fallbackText(translate, 'upgradePlan', '플랜 업그레이드');
     React.useEffect(() => {
         if (!isOpen)
             return undefined;
@@ -650,80 +1051,37 @@ const UsageStatusPopover = ({ paymentStatus, usageCount = 0, maxDailyUsage = 20,
             '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,
+            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,
                 React.createElement("span", { className: "designbase-figma-usage-status__mini-progress", "aria-hidden": "true" },
-                    React.createElement("span", { style: { width: `${usedPercent}%` } })),
+                    React.createElement("span", { style: { width: `${remainingPercent}%` } })),
                 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', '사용량 상세') },
+        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),
                 !isBeta && (React.createElement(react.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("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" },
                 React.createElement("div", { className: "designbase-figma-usage-status__usage-summary" },
                     React.createElement("strong", { className: "designbase-figma-usage-status__usage-count" },
-                        used,
+                        remaining,
                         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', '사용량 제한이 없습니다')))))));
+                    React.createElement("span", { className: "designbase-figma-usage-status__usage-caption" }, fallbackText(translate, 'remainingToday', '오늘 남은 사용량')),
+                    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("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', '사용량 제한이 없습니다')))))));
 };
 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, 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,
-    }, className);
-    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, languages: languages, currentLanguage: currentLanguage, showLanguageSelector: showLanguageSelector, onLanguageChange: onLanguageChange, t: t })),
-            React.createElement("div", { className: "designbase-figma-footer__right" },
-                (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));
-};
-FigmaFooter.displayName = 'FigmaFooter';
-
 const FigmaToastStack = ({ toasts, position, maxToasts, onRemoveToast, }) => {
     const visibleToasts = [...toasts]
         .sort((a, b) => b.createdAt - a.createdAt)
@@ -784,18 +1142,152 @@ const FigmaToast = ({ message, isVisible, onClose, type = 'info', duration = 300
         React.createElement(react.Toast, { toastId: "figma-toast-simple", title: message, status: type, duration: duration, showProgress: false, showClose: true, onClose: onClose })));
 };
 const useFigmaToast = () => {
-    const [toast, setToast] = React.useState({ message: '', isVisible: false });
-    const showToast = React.useCallback((message, _type = 'info') => {
-        setToast({ message, isVisible: true });
-        setTimeout(() => setToast({ message: '', isVisible: false }), 5000);
+    const [toast, setToast] = React.useState({
+        message: '',
+        isVisible: false,
+        type: 'info',
+    });
+    const timeoutRef = React.useRef(null);
+    const showToast = React.useCallback((message, type = 'info') => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        setToast({ message, isVisible: true, type });
+        timeoutRef.current = setTimeout(() => {
+            setToast({ message: '', isVisible: false, type: 'info' });
+            timeoutRef.current = null;
+        }, 5000);
+    }, []);
+    React.useEffect(() => () => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
     }, []);
-    const toastComponent = toast.isVisible ? (React.createElement(FigmaToast, { message: toast.message, isVisible: toast.isVisible, onClose: () => setToast({ message: '', isVisible: false }), type: "info", duration: 5000 })) : null;
+    const toastComponent = toast.isVisible ? (React.createElement(FigmaToast, { message: toast.message, isVisible: toast.isVisible, onClose: () => setToast({ message: '', isVisible: false, type: 'info' }), type: toast.type, duration: 5000 })) : null;
     return { showToast, toastComponent };
 };
 FigmaToastProvider.displayName = 'FigmaToastProvider';
 FigmaToast.displayName = 'FigmaToast';
 
-const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = false, value = '', onValueChange, label = { key: 'form.license_key' }, placeholder = { key: 'form.license_placeholder' }, submitText = { key: 'form.submit' }, submittingText = { key: 'form.verifying' }, helperText, className, t }) => {
+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 { t: translate } = useFigmaUiI18n(currentLanguage, t);
+    const { showToast, toastComponent } = useFigmaToast();
+    const [liveUsage, setLiveUsage] = React.useState({});
+    const previousRemainingRef = React.useRef(null);
+    const hasWarnedLowUsageRef = React.useRef(false);
+    const effectivePaymentStatus = liveUsage.paymentStatus ?? paymentStatus;
+    const effectiveUsageCount = liveUsage.usageCount ?? usageCount;
+    const effectiveRemainingUsage = liveUsage.remainingUsage ?? remainingUsage;
+    const effectiveMaxDailyUsage = liveUsage.maxDailyUsage ?? maxDailyUsage;
+    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 resolvedShowPaymentBadge = showPaymentStatus && showPaymentBadge;
+    const resolvedLicensePageClick = effectivePaymentStatus === 'BETA' ? undefined : onLicensePageClick;
+    const hasChildren = React.Children.count(children) > 0;
+    React.useEffect(() => {
+        if (!listenForUsageMessages || typeof window === 'undefined')
+            return undefined;
+        const handleUsageMessage = (event) => {
+            const message = event.data?.pluginMessage;
+            if (!message || !['initialize', 'update-plugin-status', 'usage-consume-result'].includes(message.type)) {
+                return;
+            }
+            const nextLimit = [message.usageLimit, message.freeDailyLimit, message.maxDailyUsage]
+                .find((value) => typeof value === 'number' && Number.isFinite(value) && value > 0);
+            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)
+                ? message.remainingUsage
+                : typeof nextLimit === 'number' && typeof nextUsed === 'number'
+                    ? Math.max(0, nextLimit - nextUsed)
+                    : undefined;
+            const nextPaymentStatus = message.paymentStatus === 'PAID'
+                ? 'PAID'
+                : message.paymentStatus === 'FREE' || message.paymentStatus === 'UNPAID'
+                    ? 'FREE'
+                    : undefined;
+            if (nextPaymentStatus === undefined
+                && nextLimit === undefined
+                && nextUsed === undefined
+                && nextRemaining === undefined) {
+                return;
+            }
+            setLiveUsage((previous) => ({
+                ...previous,
+                ...(nextPaymentStatus ? { paymentStatus: nextPaymentStatus } : {}),
+                ...(typeof nextLimit === 'number' ? { maxDailyUsage: nextLimit } : {}),
+                ...(typeof nextUsed === 'number' ? { usageCount: nextUsed } : {}),
+                ...(typeof nextRemaining === 'number' ? { remainingUsage: nextRemaining } : {}),
+            }));
+        };
+        window.addEventListener('message', handleUsageMessage);
+        return () => window.removeEventListener('message', handleUsageMessage);
+    }, [listenForUsageMessages]);
+    React.useEffect(() => {
+        const previousRemaining = previousRemainingRef.current;
+        const shouldTrack = showLowUsageWarning && effectivePaymentStatus === 'FREE' && effectiveMaxDailyUsage > 0;
+        if (!shouldTrack) {
+            previousRemainingRef.current = resolvedRemaining;
+            hasWarnedLowUsageRef.current = false;
+            return;
+        }
+        if (remainingPercent >= lowUsageThresholdPercent) {
+            hasWarnedLowUsageRef.current = false;
+        }
+        else if (previousRemaining !== null
+            && resolvedRemaining < previousRemaining
+            && !hasWarnedLowUsageRef.current) {
+            hasWarnedLowUsageRef.current = true;
+            const warningText = typeof lowUsageWarningText === 'string'
+                ? lowUsageWarningText
+                : {
+                    ...lowUsageWarningText,
+                    values: {
+                        ...(lowUsageWarningText.values || {}),
+                        count: resolvedRemaining,
+                        percent: remainingPercent,
+                    },
+                };
+            onLowUsageWarning?.({
+                remaining: resolvedRemaining,
+                percent: remainingPercent,
+                limit,
+            });
+            showToast(resolveText(translate, warningText, `무료 사용량이 ${resolvedRemaining}회(${remainingPercent}%) 남았습니다.`) || `무료 사용량이 ${resolvedRemaining}회(${remainingPercent}%) 남았습니다.`, 'warning');
+        }
+        previousRemainingRef.current = resolvedRemaining;
+    }, [
+        lowUsageThresholdPercent,
+        lowUsageWarningText,
+        effectiveMaxDailyUsage,
+        effectivePaymentStatus,
+        onLowUsageWarning,
+        remainingPercent,
+        resolvedRemaining,
+        showLowUsageWarning,
+        showToast,
+        translate,
+    ]);
+    const classes = clsx('designbase-figma-footer', {
+        'designbase-figma-footer--has-children': hasChildren,
+    }, className);
+    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, 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 })),
+                showDonation && (React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s", iconOnly: true, showPrompt: false, t: translate })))),
+        children,
+        toastComponent));
+};
+FigmaFooter.displayName = 'FigmaFooter';
+
+const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = false, value = '', onValueChange, label = { key: 'form.license_key' }, placeholder = { key: 'form.license_placeholder' }, submitText = { key: 'form.submit' }, submittingText = { key: 'form.verifying' }, helperText, className, t, locale, }) => {
+    const { t: translate } = useFigmaUiI18n(locale, t);
     const [inputValue, setInputValue] = React.useState(value);
     React.useEffect(() => {
         setInputValue(value);
@@ -808,11 +1300,11 @@ const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = fals
         setInputValue(value);
         onValueChange?.(value);
     };
-    const displayLabel = resolveText(t, label, 'License Key');
-    const displayPlaceholder = resolveText(t, placeholder, 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');
-    const displaySubmitText = resolveText(t, submitText, 'Submit');
-    const displaySubmittingText = resolveText(t, submittingText, 'Verifying...');
-    const displayHelperText = helperText ? resolveText(t, helperText, '') : undefined;
+    const displayLabel = resolveText(translate, label, 'License Key');
+    const displayPlaceholder = resolveText(translate, placeholder, 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');
+    const displaySubmitText = resolveText(translate, submitText, 'Submit');
+    const displaySubmittingText = resolveText(translate, submittingText, 'Verifying...');
+    const displayHelperText = helperText ? resolveText(translate, helperText, '') : undefined;
     return (React.createElement("form", { className: `designbase-figma-form-with-submit ${className || ''}`, onSubmit: handleSubmit },
         React.createElement("div", { className: "designbase-figma-form-with-submit__field" },
             React.createElement("label", { className: "designbase-figma-form-with-submit__label" }, displayLabel),
@@ -826,7 +1318,8 @@ const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = fals
 };
 FormWithSubmit.displayName = 'FormWithSubmit';
 
-const InteractionFeedback = ({ status = 'default', message, statusMessage, leftContent, rightAction, visible = true, className, t }) => {
+const InteractionFeedback = ({ status = 'default', message, statusMessage, leftContent, rightAction, visible = true, className, t, locale, }) => {
+    const { t: translate } = useFigmaUiI18n(locale, t);
     const feedbackClasses = clsx('designbase-figma-interaction', `designbase-figma-interaction--${status}`, {
         'designbase-figma-interaction--visible': visible,
     }, className);
@@ -835,38 +1328,28 @@ const InteractionFeedback = ({ status = 'default', message, statusMessage, leftC
     return (React.createElement("div", { className: feedbackClasses },
         React.createElement("div", { className: "designbase-figma-interaction__content" },
             React.createElement("div", { className: "designbase-figma-interaction__left" }, leftContent || (React.createElement("div", { className: "designbase-figma-interaction__message" },
-                status === 'loading' && (React.createElement(react.Spinner, { size: "s", type: "circular", label: "\uBD88\uB7EC\uC624\uB294 \uC911\uC785\uB2C8\uB2E4...", showLabel: false })),
-                (message || status === 'loading') && (React.createElement("span", { className: "designbase-figma-interaction__text" }, resolveText(t, message || '불러오는 중입니다...'))),
-                statusMessage && (React.createElement("span", { className: "designbase-figma-interaction__status-text" }, resolveText(t, statusMessage)))))),
+                status === 'loading' && (React.createElement(react.Spinner, { size: "s", type: "circular", label: translate('loading'), showLabel: false })),
+                (message || status === 'loading') && (React.createElement("span", { className: "designbase-figma-interaction__text" }, resolveText(translate, message || { key: 'loading' }))),
+                statusMessage && (React.createElement("span", { className: "designbase-figma-interaction__status-text" }, resolveText(translate, statusMessage)))))),
             rightAction && (React.createElement("div", { className: "designbase-figma-interaction__right" }, rightAction)))));
 };
 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 { locale, t: translate } = useFigmaUiI18n(currentLanguage, t);
+    const activeLanguage = currentLanguage || locale;
     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),
+        label: resolveText(translate, language.label, language.code.toUpperCase()),
         disabled: false,
     }));
     return (React.createElement("div", { className: `designbase-figma-language-selector ${className || ''}` },
@@ -898,25 +1381,26 @@ function openExternalUrl(url) {
     }
 }
 
-const LicenseOffer = ({ joinUrl, guideUrl, membershipUrl, t, className, }) => {
+const LicenseOffer = ({ joinUrl, guideUrl, membershipUrl, t, locale, className, }) => {
+    const { t: translate } = useFigmaUiI18n(locale, t);
     const titleId = `designbase-license-offer-title-${React.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' }, '아래 입력창에 키를 붙여 넣고 활성화합니다.'),
+        resolveText(translate, { key: 'license.youtube_membership_step_1' }, 'Designbase YouTube 채널 멤버십에 가입합니다.'),
+        resolveText(translate, { key: 'license.youtube_membership_step_2' }, '멤버 전용 커뮤니티에서 이번 달 키를 복사합니다.'),
+        resolveText(translate, { 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("h3", { id: titleId, className: "designbase-figma-license-offer__title" }, resolveText(translate, { 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(react.Button, { onPress: () => openExternalUrl(resolvedJoinUrl), variant: "primary", size: "m", fullWidth: true }, resolveText(t, { key: 'license.youtube_membership_join' }, '멤버십 가입'))),
+            resolvedJoinUrl && (React.createElement(react.Button, { onPress: () => openExternalUrl(resolvedJoinUrl), variant: "primary", size: "m", fullWidth: true }, resolveText(translate, { key: 'license.youtube_membership_join' }, '멤버십 가입'))),
             guideUrl && (React.createElement(react.Button, { onPress: () => openExternalUrl(guideUrl), variant: "secondary", size: "m", fullWidth: true },
-                React.createElement("span", null, resolveText(t, { key: 'license.youtube_membership_guide' }, '안내보기')),
+                React.createElement("span", null, resolveText(translate, { key: 'license.youtube_membership_guide' }, '안내보기')),
                 React.createElement(icons.ExternalLinkIcon, { size: 16, "aria-hidden": "true" })))))));
 };
 LicenseOffer.displayName = 'LicenseOffer';
@@ -926,13 +1410,13 @@ function maskLicenseKey(value) {
         return '••••••••';
     return `${value.slice(0, 4)}••••${value.slice(-4)}`;
 }
-function formatDate(value) {
+function formatDate(value, locale) {
     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);
+    return new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(date);
 }
 function formatScope(value, t) {
     if (!value)
@@ -953,43 +1437,44 @@ function formatSource(value, t) {
     }
     return value;
 }
-const LicenseStatusCard = ({ status, licenseKey = '', licenseStatus, licenseSource, accessScope, expiresAt, lastVerifiedAt, validationMessage, allowRevealKey = false, t, className, }) => {
+const LicenseStatusCard = ({ status, licenseKey = '', licenseStatus, licenseSource, accessScope, expiresAt, lastVerifiedAt, validationMessage, allowRevealKey = false, t, locale, className, }) => {
+    const { locale: resolvedLocale, t: translate } = useFigmaUiI18n(locale, t);
     const [isKeyRevealed, setIsKeyRevealed] = React.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');
+        ? resolveText(translate, { key: 'license.status_active' }, 'Active')
+        : 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" },
             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' }, '라이선스 상태')),
+                    ? 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'))),
         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("span", null, resolveText(translate, { key: 'license.key_label' }, '라이선스 키')),
             React.createElement("code", null, allowRevealKey && isKeyRevealed ? licenseKey : maskLicenseKey(licenseKey)),
             allowRevealKey && (React.createElement(react.Button, { type: "button", onPress: () => setIsKeyRevealed((value) => !value), variant: "tertiary", size: "s" }, isKeyRevealed
-                ? resolveText(t, { key: 'license.hide_key' }, '숨기기')
-                : resolveText(t, { key: 'license.reveal_key' }, '보기'))))),
+                ? resolveText(translate, { key: 'license.hide_key' }, '숨기기')
+                : resolveText(translate, { 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))),
+            formatSource(licenseSource, translate) && React.createElement(React.Fragment, null,
+                React.createElement("dt", null, resolveText(translate, { key: 'license.source' }, '출처')),
+                React.createElement("dd", null, formatSource(licenseSource, translate))),
+            formatScope(accessScope, translate) && React.createElement(React.Fragment, null,
+                React.createElement("dt", null, resolveText(translate, { key: 'license.access' }, '접근 범위')),
+                React.createElement("dd", null, formatScope(accessScope, translate))),
             expiresAt && React.createElement(React.Fragment, null,
-                React.createElement("dt", null, resolveText(t, { key: 'license.expires' }, '만료일')),
-                React.createElement("dd", null, formatDate(expiresAt) || expiresAt)),
+                React.createElement("dt", null, resolveText(translate, { key: 'license.expires' }, '만료일')),
+                React.createElement("dd", null, formatDate(expiresAt, resolvedLocale) || expiresAt)),
             lastVerifiedAt && React.createElement(React.Fragment, null,
-                React.createElement("dt", null, resolveText(t, { key: 'license.last_checked' }, '최근 확인')),
-                React.createElement("dd", null, formatDate(lastVerifiedAt) || lastVerifiedAt))))));
+                React.createElement("dt", null, resolveText(translate, { key: 'license.last_checked' }, '최근 확인')),
+                React.createElement("dd", null, formatDate(lastVerifiedAt, resolvedLocale) || lastVerifiedAt))))));
 };
 LicenseStatusCard.displayName = 'LicenseStatusCard';
 
@@ -1010,15 +1495,16 @@ function resolvePaymentFeedbackVariant(errorCode, explicitVariant) {
     }
     return 'error';
 }
-const PaymentStatusSection = ({ activationLimit, activationUsage, licenseKey, onDeactivate, isDeactivating = false, showDetails = false, actionMessage, actionMessageVariant, errorCode, className, t, }) => {
+const PaymentStatusSection = ({ activationLimit, activationUsage, licenseKey, onDeactivate, isDeactivating = false, showDetails = false, actionMessage, actionMessageVariant, errorCode, className, t, locale, }) => {
+    const { t: translate } = useFigmaUiI18n(locale, t);
     const remainingActivations = Math.max(0, activationLimit - activationUsage);
-    const resolvedActionMessage = actionMessage ? resolveText(t, actionMessage) : undefined;
+    const resolvedActionMessage = actionMessage ? resolveText(translate, 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' }, '라이선스 키'),
+            resolveText(translate, { key: 'payment.license_key_label' }, '라이선스 키'),
             ": ",
             React.createElement("span", null, licenseKey)),
         showDetails && (React.createElement("div", { className: "designbase-figma-payment-status__details" },
@@ -1026,41 +1512,60 @@ const PaymentStatusSection = ({ activationLimit, activationUsage, licenseKey, on
                 React.createElement("div", { className: "designbase-figma-payment-status__remaining" },
                     remainingActivations,
                     ' ',
-                    resolveText(t, { key: 'payment.activations_remaining' }, '활성'),
+                    resolveText(translate, { key: 'payment.activations_remaining' }, '활성'),
                     ' ',
-                    resolveText(t, { key: 'payment.spots_remaining' }, '자리 남음')),
+                    resolveText(translate, { 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(react.Button, { onPress: onDeactivate, variant: "secondary", size: "s", fullWidth: true, disabled: isDeactivating }, isDeactivating
-                    ? resolveText(t, { key: 'payment.deactivating' }, '비활성화중...')
-                    : resolveText(t, { key: 'payment.deactivate_license' }, '라이선스 비활성화')),
+                    ? resolveText(translate, { key: 'payment.deactivating' }, '비활성화중...')
+                    : resolveText(translate, { 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 },
-    { name: '최대 선택 제한', free: '최대 5개', pro: '최대 30개' },
-    { name: '더미 개수', free: '1,400개', pro: '4,400개 +' },
-    { name: '커스텀 숫자 사용', free: false, pro: true },
-];
+const defaultFeaturesByLocale = {
+    ko: [
+        { name: '사용 제한', free: '일일 제한', pro: '무제한' },
+        { name: '모든 주제 사용', free: false, pro: true },
+        { name: '최대 선택 제한', free: '최대 5개', pro: '최대 30개' },
+        { name: '더미 개수', free: '1,400개', pro: '4,400개 이상' },
+        { name: '커스텀 숫자 사용', free: false, pro: true },
+    ],
+    en: [
+        { name: 'Usage limit', free: 'Daily limit', pro: 'Unlimited' },
+        { name: 'All topics', free: false, pro: true },
+        { name: 'Selection limit', free: 'Up to 5', pro: 'Up to 30' },
+        { name: 'Dummy count', free: '1,400', pro: '4,400+' },
+        { name: 'Custom numbers', free: false, pro: true },
+    ],
+    ja: [
+        { name: '使用制限', free: '1日の制限', pro: '無制限' },
+        { name: 'すべてのトピック', free: false, pro: true },
+        { name: '選択上限', free: '最大5個', pro: '最大30個' },
+        { name: 'ダミー数', free: '1,400個', pro: '4,400個以上' },
+        { name: 'カスタム数値', free: false, pro: true },
+    ],
+};
 const defaultPricing = {
     monthly: 2,
     yearly: 21.6,
     lifetime: 50,
 };
-const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricing, paymentType = 'subscription', t = (key) => key, className, }) => {
+const PricingComparison = ({ features, pricing = defaultPricing, paymentType = 'subscription', t, locale, className, }) => {
+    const { locale: resolvedLocale, t: translate } = useFigmaUiI18n(locale, t);
     const [isYearly, setIsYearly] = React.useState(false);
+    const resolvedFeatures = features ?? defaultFeaturesByLocale[resolvedLocale];
+    const resolveFeatureValue = (value) => typeof value === 'boolean' ? (value ? '✓' : '✗') : value;
     const getPrice = () => {
         if (paymentType === 'lifetime') {
-            return `$${pricing.lifetime?.toLocaleString()} - ${t('lifetimeAccess') || '평생 이용'}`;
+            return `$${pricing.lifetime?.toLocaleString()} - ${translate('lifetimeAccess')}`;
         }
         const price = isYearly ? pricing.yearly : pricing.monthly;
-        return `$${price?.toLocaleString()} / ${isYearly ? t('perYear') : t('perMonth')}`;
+        return `$${price?.toLocaleString()} / ${isYearly ? translate('perYear') : translate('perMonth')}`;
     };
     const getDiscountPercentage = () => {
         if (paymentType === 'lifetime') {
@@ -1083,46 +1588,34 @@ const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricin
                 }, options: [
                     {
                         value: 'monthly',
-                        label: t('monthlyBilling') || '월간 결제',
+                        label: translate('monthlyBilling'),
                     },
                     {
                         value: 'yearly',
-                        label: `${t('yearlyBilling') || '연간 결제'} (${getDiscountPercentage()}% 절약)`,
+                        label: `${translate('yearlyBilling')} (${getDiscountPercentage()}% ${translate('pricing.discount_suffix')})`,
                     },
                 ], size: "s" }))),
         paymentType === 'lifetime' && (React.createElement("div", { className: "designbase-figma-pricing-comparison__lifetime-info" },
-            React.createElement("p", { className: "designbase-figma-pricing-comparison__lifetime-text" }, t('oneTimePaymentLifetime') || 'One-time payment for lifetime access!'))),
+            React.createElement("p", { className: "designbase-figma-pricing-comparison__lifetime-text" }, translate('oneTimePaymentLifetime')))),
         React.createElement("table", { className: "designbase-figma-pricing-comparison__table" },
             React.createElement("thead", null,
                 React.createElement("tr", null,
-                    React.createElement("th", null, t('feature') || '기능'),
+                    React.createElement("th", null, translate('feature')),
                     React.createElement("th", null,
-                        React.createElement("div", { className: "designbase-figma-pricing-comparison__plan-name" }, t('free') || 'Free'),
-                        React.createElement("div", null, t('freePrice') || '$0')),
+                        React.createElement("div", { className: "designbase-figma-pricing-comparison__plan-name" }, translate('free')),
+                        React.createElement("div", null, translate('freePrice'))),
                     React.createElement("th", { className: "designbase-figma-pricing-comparison__recommended" },
                         React.createElement("div", { className: "designbase-figma-pricing-comparison__plan-name" },
-                            t('pro') || 'Pro',
-                            React.createElement("span", { className: "designbase-figma-pricing-comparison__recommended-badge" }, t('recommended') || '추천')),
+                            translate('pro'),
+                            React.createElement("span", { className: "designbase-figma-pricing-comparison__recommended-badge" }, translate('recommended'))),
                         React.createElement("div", null, getPrice())))),
-            React.createElement("tbody", null, features.map((feature, index) => (React.createElement("tr", { key: index },
+            React.createElement("tbody", null, resolvedFeatures.map((feature, index) => (React.createElement("tr", { key: index },
                 React.createElement("td", null, feature.name),
-                React.createElement("td", null, typeof feature.free === 'boolean'
-                    ? (feature.free ? '✓' : '✗')
-                    : feature.free),
-                React.createElement("td", null, typeof feature.pro === 'boolean'
-                    ? (feature.pro ? '✓' : '✗')
-                    : feature.pro))))))));
+                React.createElement("td", null, resolveFeatureValue(feature.free)),
+                React.createElement("td", null, resolveFeatureValue(feature.pro)))))))));
 };
 PricingComparison.displayName = 'PricingComparison';
 
-const DEFAULT_LICENSE_MESSAGE_TYPES = {
-    initialize: 'initialize',
-    verifyLicense: 'verify-license',
-    deactivateLicense: 'deactivate-license',
-    updateStatus: 'update-plugin-status',
-    verifyResult: 'license-verification-result',
-    deactivateResult: 'license-deactivation-result',
-};
 const START_DESIGNBASE_AUTH_MESSAGE = 'start-designbase-auth';
 const INITIAL_LICENSE_PAGE_STATE = {
     paymentStatus: 'FREE',
@@ -1196,7 +1689,7 @@ function parseLicenseMessage(data) {
     };
 }
 function useFigmaLicenseBridge(options = {}) {
-    const messageTypes = React.useMemo(() => ({ ...DEFAULT_LICENSE_MESSAGE_TYPES, ...options.messageTypes }), [options.messageTypes]);
+    const messageTypes = React.useMemo(() => ({ ...figmaLicenseCore.DEFAULT_LICENSE_MESSAGE_TYPES, ...options.messageTypes }), [options.messageTypes]);
     const [state, setState] = React.useState({
         ...INITIAL_LICENSE_PAGE_STATE,
         ...options.initialState,
@@ -1277,6 +1770,9 @@ function useFigmaLicenseBridge(options = {}) {
                     applyPatch({ lastMessage: payload.message });
                 }
             }
+            if (type === messageTypes.featureAccessResult || type === messageTypes.usageConsumeResult) {
+                applyPatch(parseLicenseMessage(payload));
+            }
         };
         window.addEventListener('message', handleMessage);
         postPluginMessage({ type: messageTypes.initialize });
@@ -1301,6 +1797,20 @@ function useFigmaLicenseBridge(options = {}) {
         setIsStartingAuth(true);
         postPluginMessage({ type: START_DESIGNBASE_AUTH_MESSAGE });
     }, []);
+    const checkFeatureAccess = React.useCallback((featureKey, amount = 1) => {
+        postPluginMessage({
+            type: messageTypes.checkFeatureAccess,
+            ...(featureKey ? { featureKey } : {}),
+            amount,
+        });
+    }, [messageTypes.checkFeatureAccess]);
+    const consumeUsage = React.useCallback((amount = 1, featureKey) => {
+        postPluginMessage({
+            type: messageTypes.consumeUsage,
+            amount,
+            ...(featureKey ? { featureKey } : {}),
+        });
+    }, [messageTypes.consumeUsage]);
     return {
         state,
         isVerifying,
@@ -1309,6 +1819,8 @@ function useFigmaLicenseBridge(options = {}) {
         verifyLicense,
         deactivateLicense,
         startDesignbaseAuth,
+        checkFeatureAccess,
+        consumeUsage,
         setLicenseKeyInput: (licenseKey) => applyPatch({ licenseKey }),
     };
 }
@@ -1322,17 +1834,23 @@ function formatUsageLabel(state, t) {
     const remaining = remainingUsage ?? Math.max(0, limit - usageUsed);
     if (usageReset === 'daily') {
         const fallback = `오늘 남은 횟수 ${remaining}/${limit}`;
-        const translated = resolveText(t, { key: 'license.usage_daily' }, fallback) ?? fallback;
+        const translated = resolveText(t, { key: 'license.usage_daily', values: { remaining, limit } }, 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) ?? fallback;
+        const translated = resolveText(t, { key: 'license.usage_monthly', values: { remaining, limit } }, fallback) ?? fallback;
+        return translated.includes(String(remaining)) ? translated : fallback;
+    }
+    if (usageReset === 'weekly') {
+        const fallback = `이번 주 남은 횟수 ${remaining}/${limit}`;
+        const translated = resolveText(t, { key: 'license.usage_weekly', values: { remaining, limit } }, fallback) ?? fallback;
         return translated.includes(String(remaining)) ? translated : fallback;
     }
-    return `남은 횟수 ${remaining}/${limit}`;
+    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, 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, locale, className, }) => {
+    const { t: translate } = useFigmaUiI18n(locale, t);
     const links = React.useMemo(() => ({
         purchaseUrl: wordpressLinks?.purchaseUrl ?? paymentPageUrl,
         membershipUrl: membershipUrl ?? wordpressLinks?.membershipUrl,
@@ -1354,7 +1872,7 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
     const [licenseKeyDraft, setLicenseKeyDraft] = React.useState(initialLicenseKey);
     const isPaid = state.isLicenseRegistered && state.paymentStatus === 'PAID';
     const isMembershipMode = mode === 'youtube-membership';
-    const usageLabel = formatUsageLabel(state, t);
+    const usageLabel = formatUsageLabel(state, translate);
     const handleLicenseSubmit = async (submittedLicenseKey) => {
         if (onLicenseSubmit) {
             await onLicenseSubmit(submittedLicenseKey);
@@ -1371,79 +1889,80 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
             React.createElement("div", { className: "designbase-figma-page-license__header" },
                 React.createElement("div", { className: "designbase-figma-page-license__title" },
                     React.createElement("h2", null, isMembershipMode
-                        ? resolveText(t, { key: 'license.youtube_membership' }, 'YouTube 멤버십')
+                        ? resolveText(translate, { key: 'license.youtube_membership' }, 'YouTube 멤버십')
                         : isPaid
-                            ? resolveText(t, { key: 'license.pro_account' }, '프로 계정')
-                            : resolveText(t, { key: 'license.upgrade_to_pro' }, '프로로 업그레이드')),
+                            ? 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))),
                 React.createElement("p", { className: "designbase-figma-page-license__description" }, isPaid
-                    ? resolveText(t, { key: 'license.all_features_available' }, '모든 기능을 사용할 수 있습니다.')
+                    ? resolveText(translate, { key: 'license.all_features_available' }, '모든 기능을 사용할 수 있습니다.')
                     : isMembershipMode
-                        ? resolveText(t, { key: 'license.youtube_membership_description' }, 'YouTube 멤버십에 가입하면 Designbase 플러그인을 무제한으로 사용할 수 있습니다.')
-                        : resolveText(t, { key: 'license.purchase_for_unlimited' }, '디자인베이스 멤버십 또는 라이선스로 무제한 이용이 가능합니다.')),
+                        ? resolveText(translate, { key: 'license.youtube_membership_description' }, 'YouTube 멤버십에 가입하면 Designbase 플러그인을 무제한으로 사용할 수 있습니다.')
+                        : 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: t })),
+            !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(t, { key: 'license.activated' }, '라이선스 활성화됨')),
+                    React.createElement("h3", null, resolveText(translate, { key: 'license.activated' }, '라이선스 활성화됨')),
                     React.createElement(react.Button, { onPress: () => setShowDetails(!showDetails), variant: "tertiary", size: "s", iconOnly: true },
                         React.createElement(icons.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: t }),
+                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" },
                         React.createElement("div", { className: "designbase-figma-page-license__remaining" },
                             Math.max(0, state.activationLimit - state.activationUsage),
                             ' ',
-                            resolveText(t, { key: 'license.activations_remaining' }, '활성'),
+                            resolveText(translate, { key: 'license.activations_remaining' }, '활성'),
                             ' ',
-                            resolveText(t, { key: 'license.spots_remaining' }, '자리 남음')),
+                            resolveText(translate, { key: 'license.spots_remaining' }, '자리 남음')),
                         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(react.Button, { onPress: deactivateLicense, variant: "secondary", size: "s", fullWidth: true, disabled: isDeactivating }, isDeactivating
-                            ? resolveText(t, { key: 'license.deactivating' }, '비활성화 중...')
-                            : resolveText(t, { key: 'license.deactivate' }, '라이선스 비활성화')),
+                            ? 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))))))),
             !isPaid && (React.createElement(React.Fragment, null,
-                isMembershipMode && (React.createElement(LicenseOffer, { joinUrl: links.membershipUrl || links.purchaseUrl, guideUrl: links.helpUrl || links.purchaseUrl, t: t })),
+                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" },
                     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("h3", null, resolveText(translate, { key: 'license.designbase_account' }, '디자인베이스 계정'))),
+                    React.createElement("p", { className: "designbase-figma-page-license__hint" }, resolveText(translate, { key: 'license.designbase_account_hint' }, 'WordPress 계정으로 로그인하거나 멤버십을 구매하면 플러그인이 자동으로 활성화됩니다.')),
                     React.createElement("div", { className: "designbase-figma-page-license__actions" },
                         enableAccountAuth && (React.createElement(react.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' }, '디자인베이스로 로그인'))),
+                            ? resolveText(translate, { key: 'license.authenticating' }, '인증 중...')
+                            : resolveText(translate, { key: 'license.login_with_designbase' }, '디자인베이스로 로그인'))),
                         links.purchaseUrl && (React.createElement(react.Button, { onPress: () => openExternalUrl(links.purchaseUrl), variant: "secondary", size: "m", fullWidth: true },
-                            React.createElement("span", null, resolveText(t, { key: 'license.purchase_membership' }, '멤버십 안내')),
+                            React.createElement("span", null, resolveText(translate, { key: 'license.purchase_membership' }, '멤버십 안내')),
                             React.createElement(icons.ExternalLinkIcon, { size: 16 }))),
                         links.accountUrl && (React.createElement(react.Button, { onPress: () => openExternalUrl(links.accountUrl), variant: "tertiary", size: "s", fullWidth: true },
-                            React.createElement("span", null, resolveText(t, { key: 'license.manage_account' }, '계정·멤버십 관리')),
+                            React.createElement("span", null, resolveText(translate, { key: 'license.manage_account' }, '계정·멤버십 관리')),
                             React.createElement(icons.ExternalLinkIcon, { size: 16 })))))),
                 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: isMembershipMode ? 'license.enter_from_youtube' : 'license.enter_from_email' }, t: t }))))),
+                        React.createElement("h3", null, resolveText(translate, { 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: isMembershipMode ? 'license.enter_from_youtube' : 'license.enter_from_email' }, t: translate }))))),
             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(react.Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", iconOnly: true, "aria-label": "Close" },
+                React.createElement("button", { type: "button", className: "designbase-figma-page-license__link", onClick: () => openExternalUrl(links.helpUrl) }, resolveText(translate, { key: 'license.help_link' }, '라이선스·결제 도움말'))))),
+        React.createElement(react.Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", iconOnly: true, "aria-label": translate('close') },
             React.createElement(icons.CloseIcon, { size: 16 }))));
 };
 PageLicense.displayName = 'PageLicense';
 
-const PaymentBadge = ({ isActive, onClick, isLoading = false, text, t = (key) => key, className, }) => {
+const PaymentBadge = ({ isActive, onClick, isLoading = false, text, t, locale, className, }) => {
+    const { t: translate } = useFigmaUiI18n(locale, t);
     const getBadgeText = () => {
         if (text)
             return text;
         return isActive
-            ? (t('proUser') || '프로 계정')
-            : (t('usingFree') || '무료 사용');
+            ? translate('proUser')
+            : translate('usingFree');
     };
     const getBadgeVariant = () => {
         return isActive ? 'success' : 'secondary';
@@ -1452,7 +1971,8 @@ const PaymentBadge = ({ isActive, onClick, isLoading = false, text, t = (key) =>
 };
 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 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, locale, autoComplete = true, autoCloseOnComplete = false }) => {
+    const { t: translate } = useFigmaUiI18n(locale, t);
     const [isCompleted, setIsCompleted] = React.useState(false);
     const completeFiredRef = React.useRef(false);
     const { processedNodes, totalNodes } = progress;
@@ -1482,11 +2002,11 @@ const ProgressModal = ({ isOpen, onClose, progress, title = { key: 'progress.wor
         onClose();
     };
     const modalClasses = clsx('designbase-figma-progress-modal', className);
-    const displayTitle = resolveText(t, isCompleted ? completedMessage : title, isCompleted ? '완료되었습니다' : '작업 중');
-    const displayMessage = resolveText(t, isCompleted ? completedMessage : processingMessage, isCompleted ? '완료되었습니다' : '처리 중...');
-    const displayStopText = resolveText(t, stopButtonText, '중지');
-    const displayConfirmText = resolveText(t, confirmButtonText, '확인');
-    const displayHelpText = resolveText(t, helpText);
+    const displayTitle = resolveText(translate, isCompleted ? completedMessage : title, isCompleted ? '완료되었습니다' : '작업 중');
+    const displayMessage = resolveText(translate, isCompleted ? completedMessage : processingMessage, isCompleted ? '완료되었습니다' : '처리 중...');
+    const displayStopText = resolveText(translate, stopButtonText, '중지');
+    const displayConfirmText = resolveText(translate, confirmButtonText, '확인');
+    const displayHelpText = resolveText(translate, helpText);
     return (React.createElement(react.Modal, { isOpen: isOpen, onClose: isCompleted ? onClose : undefined, title: displayTitle, size: "s", className: modalClasses, showCloseButton: false },
         React.createElement("div", { className: "designbase-figma-progress-modal__content" },
             React.createElement("div", { className: "designbase-figma-progress-modal__icon", "aria-hidden": "true" }, isCompleted ? (completeIcon || (React.createElement("div", { className: "designbase-figma-progress-modal__icon-success" },
@@ -1540,7 +2060,8 @@ const ResizablePlugin = ({ children, minWidth = 360, maxWidth = 460, minHeight =
 };
 ResizablePlugin.displayName = 'ResizablePlugin';
 
-const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categoryGroups, onSave, onReset, title = { key: 'settings.modal_title' }, description = { key: 'settings.modal_description' }, className, t }) => {
+const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categoryGroups, onSave, onReset, title = { key: 'settings.modal_title' }, description = { key: 'settings.modal_description' }, className, t, locale, }) => {
+    const { t: translate } = useFigmaUiI18n(locale, t);
     const [tempCategories, setTempCategories] = React.useState(initialCategories);
     const [draggedIndex, setDraggedIndex] = React.useState(null);
     React.useEffect(() => {
@@ -1633,8 +2154,8 @@ const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categor
         }
     };
     const modalClasses = clsx('designbase-figma-settings-modal', className);
-    const displayTitle = resolveText(t, title, '목록 변경');
-    const displayDescription = resolveText(t, description, '드래그하여 순서를 변경하거나, 토글하여 카테고리를 숨길 수 있습니다.');
+    const displayTitle = resolveText(translate, title, '목록 변경');
+    const displayDescription = resolveText(translate, description, '드래그하여 순서를 변경하거나, 토글하여 카테고리를 숨길 수 있습니다.');
     return (React.createElement(react.Modal, { isOpen: isOpen, onClose: onClose, title: displayTitle, size: "m", className: modalClasses },
         React.createElement("div", { className: "designbase-figma-settings-modal__content" },
             displayDescription && (React.createElement("p", { className: "designbase-figma-settings-modal__description" }, displayDescription)),
@@ -1646,32 +2167,33 @@ const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categor
                     React.createElement("span", { className: "designbase-figma-settings-modal__drag-handle" },
                         React.createElement(icons.GripVerticalIcon, { size: 16 })),
                     category.icon && (React.createElement("span", { className: "designbase-figma-settings-modal__category-icon" }, category.icon)),
-                    React.createElement("span", { className: "designbase-figma-settings-modal__category-title" }, resolveText(t, category.title))),
+                    React.createElement("span", { className: "designbase-figma-settings-modal__category-title" }, resolveText(translate, category.title))),
                 React.createElement(react.Toggle, { checked: category.enabled, onChange: () => handleToggle(category.id), size: "s" })))))),
         React.createElement("div", { className: "designbase-figma-settings-modal__footer" },
-            onReset && (React.createElement(react.Button, { onPress: handleReset, variant: "tertiary", size: "s" }, resolveText(t, { key: 'settings.reset' }, '초기화'))),
+            onReset && (React.createElement(react.Button, { onPress: handleReset, variant: "tertiary", size: "s" }, resolveText(translate, { key: 'settings.reset' }, '초기화'))),
             React.createElement("div", { className: "designbase-figma-settings-modal__footer-right" },
-                React.createElement(react.Button, { onPress: handleCancel, variant: "tertiary", size: "s" }, resolveText(t, { key: 'settings.cancel' }, '취소')),
-                React.createElement(react.Button, { onPress: handleSave, variant: "primary", size: "s" }, resolveText(t, { key: 'settings.save' }, '저장'))))));
+                React.createElement(react.Button, { onPress: handleCancel, variant: "tertiary", size: "s" }, resolveText(translate, { key: 'settings.cancel' }, '취소')),
+                React.createElement(react.Button, { onPress: handleSave, variant: "primary", size: "s" }, resolveText(translate, { key: 'settings.save' }, '저장'))))));
 };
 SettingsModal.displayName = 'SettingsModal';
 
-const TitleDescription = ({ iconSrc, iconAlt = 'Icon', title, description, button, features, className, t }) => {
+const TitleDescription = ({ iconSrc, iconAlt = 'Icon', title, description, button, features, className, t, locale, }) => {
+    const { t: translate } = useFigmaUiI18n(locale, t);
     const classes = [
         'designbase-figma-title-description',
         className,
     ]
         .filter(Boolean)
         .join(' ');
-    const displayTitle = resolveText(t, title);
-    const displayDescription = resolveText(t, description);
+    const displayTitle = resolveText(translate, title);
+    const displayDescription = resolveText(translate, description);
     return (React.createElement("div", { className: classes },
         iconSrc && (React.createElement("img", { className: "designbase-figma-title-description__icon", src: iconSrc, alt: iconAlt })),
         React.createElement("h5", { className: "designbase-figma-title-description__title" }, displayTitle),
         React.createElement("p", { className: "designbase-figma-title-description__description" }, displayDescription),
         button && React.createElement("div", { className: "designbase-figma-title-description__button" }, button),
         features && features.length > 0 && (React.createElement("ul", { className: "designbase-figma-title-description__features" }, features.map((feature, index) => {
-            const displayFeature = resolveText(t, feature);
+            const displayFeature = resolveText(translate, feature);
             return (React.createElement("li", { key: index, className: "designbase-figma-title-description__feature-item" },
                 React.createElement("span", { className: "designbase-figma-title-description__check-icon" },
                     React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -1682,10 +2204,11 @@ const TitleDescription = ({ iconSrc, iconAlt = 'Icon', title, description, butto
 };
 TitleDescription.displayName = 'TitleDescription';
 
-const UpgradeBanner = ({ onClick, variant = 'button', isLoading = false, title = { key: 'banner.upgrade_title' }, description = { key: 'banner.upgrade_description' }, buttonText = { key: 'banner.upgrade_button' }, useGradient = false, gradientScheme = 'primary', gradientTone = 'light', gradientAnimated = true, className, t }) => {
-    const displayTitle = resolveText(t, title, '프로로 업그레이드하세요');
-    const displayDescription = resolveText(t, description, '무제한 기능을 사용하고 더 많은 혜택을 누리세요.');
-    const displayButtonText = resolveText(t, buttonText, '지금 업그레이드');
+const UpgradeBanner = ({ onClick, variant = 'button', isLoading = false, title = { key: 'banner.upgrade_title' }, description = { key: 'banner.upgrade_description' }, buttonText = { key: 'banner.upgrade_button' }, useGradient = false, gradientScheme = 'primary', gradientTone = 'light', gradientAnimated = true, className, t, locale, }) => {
+    const { t: translate } = useFigmaUiI18n(locale, t);
+    const displayTitle = resolveText(translate, title, '프로로 업그레이드하세요');
+    const displayDescription = resolveText(translate, description, '무제한 기능을 사용하고 더 많은 혜택을 누리세요.');
+    const displayButtonText = resolveText(translate, buttonText, '지금 업그레이드');
     const bannerContent = (React.createElement("div", { className: `designbase-figma-upgrade-banner__content designbase-figma-upgrade-banner__content--${variant}`, onClick: variant === 'clickable' ? onClick : undefined, role: variant === 'clickable' ? 'button' : undefined, tabIndex: variant === 'clickable' ? 0 : undefined, onKeyDown: variant === 'clickable' ? (e) => {
             if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault();
@@ -1701,540 +2224,544 @@ const UpgradeBanner = ({ onClick, variant = 'button', isLoading = false, title =
 };
 UpgradeBanner.displayName = 'UpgradeBanner';
 
-Object.defineProperty(exports, 'Accordion', {
+Object.defineProperty(exports, "Accordion", {
     enumerable: true,
     get: function () { return react.Accordion; }
 });
-Object.defineProperty(exports, 'ActivityHeatmap', {
+Object.defineProperty(exports, "ActivityHeatmap", {
     enumerable: true,
     get: function () { return react.ActivityHeatmap; }
 });
-Object.defineProperty(exports, 'AdBanner', {
+Object.defineProperty(exports, "AdBanner", {
     enumerable: true,
     get: function () { return react.AdBanner; }
 });
-Object.defineProperty(exports, 'AiChat', {
+Object.defineProperty(exports, "AiChat", {
     enumerable: true,
     get: function () { return react.AiChat; }
 });
-Object.defineProperty(exports, 'AiChatList', {
+Object.defineProperty(exports, "AiChatList", {
     enumerable: true,
     get: function () { return react.AiChatList; }
 });
-Object.defineProperty(exports, 'Alert', {
+Object.defineProperty(exports, "Alert", {
     enumerable: true,
     get: function () { return react.Alert; }
 });
-Object.defineProperty(exports, 'AnimationBackground', {
+Object.defineProperty(exports, "AnimationBackground", {
     enumerable: true,
     get: function () { return react.AnimationBackground; }
 });
-Object.defineProperty(exports, 'AnimationText', {
+Object.defineProperty(exports, "AnimationText", {
     enumerable: true,
     get: function () { return react.AnimationText; }
 });
-Object.defineProperty(exports, 'AppBadge', {
+Object.defineProperty(exports, "AppBadge", {
     enumerable: true,
     get: function () { return react.AppBadge; }
 });
-Object.defineProperty(exports, 'AudioPlayer', {
+Object.defineProperty(exports, "AudioPlayer", {
     enumerable: true,
     get: function () { return react.AudioPlayer; }
 });
-Object.defineProperty(exports, 'Avatar', {
+Object.defineProperty(exports, "Avatar", {
     enumerable: true,
     get: function () { return react.Avatar; }
 });
-Object.defineProperty(exports, 'Backdrop', {
+Object.defineProperty(exports, "Backdrop", {
     enumerable: true,
     get: function () { return react.Backdrop; }
 });
-Object.defineProperty(exports, 'Badge', {
+Object.defineProperty(exports, "Badge", {
     enumerable: true,
     get: function () { return react.Badge; }
 });
-Object.defineProperty(exports, 'Banner', {
+Object.defineProperty(exports, "Banner", {
     enumerable: true,
     get: function () { return react.Banner; }
 });
-Object.defineProperty(exports, 'BottomNavigation', {
+Object.defineProperty(exports, "BottomNavigation", {
     enumerable: true,
     get: function () { return react.BottomNavigation; }
 });
-Object.defineProperty(exports, 'BottomSheet', {
+Object.defineProperty(exports, "BottomSheet", {
     enumerable: true,
     get: function () { return react.BottomSheet; }
 });
-Object.defineProperty(exports, 'Breadcrumbs', {
+Object.defineProperty(exports, "Breadcrumbs", {
     enumerable: true,
     get: function () { return react.Breadcrumbs; }
 });
-Object.defineProperty(exports, 'Button', {
+Object.defineProperty(exports, "Button", {
     enumerable: true,
     get: function () { return react.Button; }
 });
-Object.defineProperty(exports, 'Calendar', {
+Object.defineProperty(exports, "Calendar", {
     enumerable: true,
     get: function () { return react.Calendar; }
 });
-Object.defineProperty(exports, 'Card', {
+Object.defineProperty(exports, "Card", {
     enumerable: true,
     get: function () { return react.Card; }
 });
-Object.defineProperty(exports, 'Carousel', {
+Object.defineProperty(exports, "Carousel", {
     enumerable: true,
     get: function () { return react.Carousel; }
 });
-Object.defineProperty(exports, 'ChatComposer', {
+Object.defineProperty(exports, "ChatComposer", {
     enumerable: true,
     get: function () { return react.ChatComposer; }
 });
-Object.defineProperty(exports, 'ChatList', {
+Object.defineProperty(exports, "ChatList", {
     enumerable: true,
     get: function () { return react.ChatList; }
 });
-Object.defineProperty(exports, 'ChatMessage', {
+Object.defineProperty(exports, "ChatMessage", {
     enumerable: true,
     get: function () { return react.ChatMessage; }
 });
-Object.defineProperty(exports, 'ChatOrb', {
+Object.defineProperty(exports, "ChatOrb", {
     enumerable: true,
     get: function () { return react.ChatOrb; }
 });
-Object.defineProperty(exports, 'ChatRoom', {
+Object.defineProperty(exports, "ChatRoom", {
     enumerable: true,
     get: function () { return react.ChatRoom; }
 });
-Object.defineProperty(exports, 'ChatSuggestions', {
+Object.defineProperty(exports, "ChatSuggestions", {
     enumerable: true,
     get: function () { return react.ChatSuggestions; }
 });
-Object.defineProperty(exports, 'ChatTyping', {
+Object.defineProperty(exports, "ChatTyping", {
     enumerable: true,
     get: function () { return react.ChatTyping; }
 });
-Object.defineProperty(exports, 'ChatWelcome', {
+Object.defineProperty(exports, "ChatWelcome", {
     enumerable: true,
     get: function () { return react.ChatWelcome; }
 });
-Object.defineProperty(exports, 'ChatWidget', {
+Object.defineProperty(exports, "ChatWidget", {
     enumerable: true,
     get: function () { return react.ChatWidget; }
 });
-Object.defineProperty(exports, 'Checkbox', {
+Object.defineProperty(exports, "Checkbox", {
     enumerable: true,
     get: function () { return react.Checkbox; }
 });
-Object.defineProperty(exports, 'Chip', {
+Object.defineProperty(exports, "Chip", {
     enumerable: true,
     get: function () { return react.Chip; }
 });
-Object.defineProperty(exports, 'CodeBlock', {
+Object.defineProperty(exports, "CodeBlock", {
     enumerable: true,
     get: function () { return react.CodeBlock; }
 });
-Object.defineProperty(exports, 'ColorPicker', {
+Object.defineProperty(exports, "ColorPicker", {
     enumerable: true,
     get: function () { return react.ColorPicker; }
 });
-Object.defineProperty(exports, 'ColorSwatch', {
+Object.defineProperty(exports, "ColorSwatch", {
     enumerable: true,
     get: function () { return react.ColorSwatch; }
 });
-Object.defineProperty(exports, 'Confirm', {
+Object.defineProperty(exports, "Confirm", {
     enumerable: true,
     get: function () { return react.Confirm; }
 });
-Object.defineProperty(exports, 'Container', {
+Object.defineProperty(exports, "Container", {
     enumerable: true,
     get: function () { return react.Container; }
 });
-Object.defineProperty(exports, 'ContextMenu', {
+Object.defineProperty(exports, "ContextMenu", {
     enumerable: true,
     get: function () { return react.ContextMenu; }
 });
-Object.defineProperty(exports, 'CookieBanner', {
+Object.defineProperty(exports, "CookieBanner", {
     enumerable: true,
     get: function () { return react.CookieBanner; }
 });
-Object.defineProperty(exports, 'Countdown', {
+Object.defineProperty(exports, "Countdown", {
     enumerable: true,
     get: function () { return react.Countdown; }
 });
-Object.defineProperty(exports, 'CursorFollower', {
+Object.defineProperty(exports, "CursorFollower", {
     enumerable: true,
     get: function () { return react.CursorFollower; }
 });
-Object.defineProperty(exports, 'DatePicker', {
+Object.defineProperty(exports, "DatePicker", {
     enumerable: true,
     get: function () { return react.DatePicker; }
 });
-Object.defineProperty(exports, 'Divider', {
+Object.defineProperty(exports, "Divider", {
     enumerable: true,
     get: function () { return react.Divider; }
 });
-Object.defineProperty(exports, 'DownloadProgress', {
+Object.defineProperty(exports, "DownloadProgress", {
     enumerable: true,
     get: function () { return react.DownloadProgress; }
 });
-Object.defineProperty(exports, 'Drawer', {
+Object.defineProperty(exports, "Drawer", {
     enumerable: true,
     get: function () { return react.Drawer; }
 });
-Object.defineProperty(exports, 'Dropdown', {
+Object.defineProperty(exports, "Dropdown", {
     enumerable: true,
     get: function () { return react.Dropdown; }
 });
-Object.defineProperty(exports, 'Dropzone', {
+Object.defineProperty(exports, "Dropzone", {
     enumerable: true,
     get: function () { return react.Dropzone; }
 });
-Object.defineProperty(exports, 'EmailVerify', {
+Object.defineProperty(exports, "EmailVerify", {
     enumerable: true,
     get: function () { return react.EmailVerify; }
 });
-Object.defineProperty(exports, 'EmptyState', {
+Object.defineProperty(exports, "EmptyState", {
     enumerable: true,
     get: function () { return react.EmptyState; }
 });
-Object.defineProperty(exports, 'FileUploader', {
+Object.defineProperty(exports, "FileUploader", {
     enumerable: true,
     get: function () { return react.FileUploader; }
 });
-Object.defineProperty(exports, 'FloatingActionButton', {
+Object.defineProperty(exports, "FloatingActionButton", {
     enumerable: true,
     get: function () { return react.FloatingActionButton; }
 });
-Object.defineProperty(exports, 'Footer', {
+Object.defineProperty(exports, "Footer", {
     enumerable: true,
     get: function () { return react.Footer; }
 });
-Object.defineProperty(exports, 'Form', {
+Object.defineProperty(exports, "Form", {
     enumerable: true,
     get: function () { return react.Form; }
 });
-Object.defineProperty(exports, 'Gantt', {
+Object.defineProperty(exports, "Gantt", {
     enumerable: true,
     get: function () { return react.Gantt; }
 });
-Object.defineProperty(exports, 'Gradient', {
+Object.defineProperty(exports, "Gradient", {
     enumerable: true,
     get: function () { return react.Gradient; }
 });
-Object.defineProperty(exports, 'Grid', {
+Object.defineProperty(exports, "Grid", {
     enumerable: true,
     get: function () { return react.Grid; }
 });
-Object.defineProperty(exports, 'GridBackground', {
+Object.defineProperty(exports, "GridBackground", {
     enumerable: true,
     get: function () { return react.GridBackground; }
 });
-Object.defineProperty(exports, 'GridItem', {
+Object.defineProperty(exports, "GridItem", {
     enumerable: true,
     get: function () { return react.GridItem; }
 });
-Object.defineProperty(exports, 'Image', {
+Object.defineProperty(exports, "Image", {
     enumerable: true,
     get: function () { return react.Image; }
 });
-Object.defineProperty(exports, 'ImageList', {
+Object.defineProperty(exports, "ImageList", {
     enumerable: true,
     get: function () { return react.ImageList; }
 });
-Object.defineProperty(exports, 'ImagePlaceholder', {
+Object.defineProperty(exports, "ImagePlaceholder", {
     enumerable: true,
     get: function () { return react.ImagePlaceholder; }
 });
-Object.defineProperty(exports, 'Indicator', {
+Object.defineProperty(exports, "Indicator", {
     enumerable: true,
     get: function () { return react.Indicator; }
 });
-Object.defineProperty(exports, 'Input', {
+Object.defineProperty(exports, "Input", {
     enumerable: true,
     get: function () { return react.Input; }
 });
-Object.defineProperty(exports, 'Kanban', {
+Object.defineProperty(exports, "Kanban", {
     enumerable: true,
     get: function () { return react.Kanban; }
 });
-Object.defineProperty(exports, 'Label', {
+Object.defineProperty(exports, "Label", {
     enumerable: true,
     get: function () { return react.Label; }
 });
-Object.defineProperty(exports, 'Lightbox', {
+Object.defineProperty(exports, "Lightbox", {
     enumerable: true,
     get: function () { return react.Lightbox; }
 });
-Object.defineProperty(exports, 'List', {
+Object.defineProperty(exports, "List", {
     enumerable: true,
     get: function () { return react.List; }
 });
-Object.defineProperty(exports, 'Logo', {
+Object.defineProperty(exports, "Logo", {
     enumerable: true,
     get: function () { return react.Logo; }
 });
-Object.defineProperty(exports, 'MarkdownEditor', {
+Object.defineProperty(exports, "MarkdownEditor", {
     enumerable: true,
     get: function () { return react.MarkdownEditor; }
 });
-Object.defineProperty(exports, 'Marquee', {
+Object.defineProperty(exports, "Marquee", {
     enumerable: true,
     get: function () { return react.Marquee; }
 });
-Object.defineProperty(exports, 'Masonry', {
+Object.defineProperty(exports, "Masonry", {
     enumerable: true,
     get: function () { return react.Masonry; }
 });
-Object.defineProperty(exports, 'MenuItem', {
+Object.defineProperty(exports, "MenuItem", {
     enumerable: true,
     get: function () { return react.MenuItem; }
 });
-Object.defineProperty(exports, 'Modal', {
+Object.defineProperty(exports, "Modal", {
     enumerable: true,
     get: function () { return react.Modal; }
 });
-Object.defineProperty(exports, 'ModalBody', {
+Object.defineProperty(exports, "ModalBody", {
     enumerable: true,
     get: function () { return react.ModalBody; }
 });
-Object.defineProperty(exports, 'ModalFooter', {
+Object.defineProperty(exports, "ModalFooter", {
     enumerable: true,
     get: function () { return react.ModalFooter; }
 });
-Object.defineProperty(exports, 'ModalHeader', {
+Object.defineProperty(exports, "ModalHeader", {
     enumerable: true,
     get: function () { return react.ModalHeader; }
 });
-Object.defineProperty(exports, 'Navbar', {
+Object.defineProperty(exports, "Navbar", {
     enumerable: true,
     get: function () { return react.Navbar; }
 });
-Object.defineProperty(exports, 'OnboardingModal', {
+Object.defineProperty(exports, "OnboardingModal", {
     enumerable: true,
     get: function () { return react.OnboardingModal; }
 });
-Object.defineProperty(exports, 'OtpInput', {
+Object.defineProperty(exports, "OtpInput", {
     enumerable: true,
     get: function () { return react.OtpInput; }
 });
-Object.defineProperty(exports, 'PageHeader', {
+Object.defineProperty(exports, "PageHeader", {
     enumerable: true,
     get: function () { return react.PageHeader; }
 });
-Object.defineProperty(exports, 'Pagination', {
+Object.defineProperty(exports, "Pagination", {
     enumerable: true,
     get: function () { return react.Pagination; }
 });
-Object.defineProperty(exports, 'PhoneVerify', {
+Object.defineProperty(exports, "PhoneVerify", {
     enumerable: true,
     get: function () { return react.PhoneVerify; }
 });
-Object.defineProperty(exports, 'Popover', {
+Object.defineProperty(exports, "Popover", {
     enumerable: true,
     get: function () { return react.Popover; }
 });
-Object.defineProperty(exports, 'Progress', {
+Object.defineProperty(exports, "Progress", {
     enumerable: true,
     get: function () { return react.Progress; }
 });
-Object.defineProperty(exports, 'ProgressStep', {
+Object.defineProperty(exports, "ProgressStep", {
     enumerable: true,
     get: function () { return react.ProgressStep; }
 });
-Object.defineProperty(exports, 'Progressbar', {
+Object.defineProperty(exports, "Progressbar", {
     enumerable: true,
     get: function () { return react.Progressbar; }
 });
-Object.defineProperty(exports, 'Radio', {
+Object.defineProperty(exports, "Radio", {
     enumerable: true,
     get: function () { return react.Radio; }
 });
-Object.defineProperty(exports, 'RandomGradient', {
+Object.defineProperty(exports, "RandomGradient", {
     enumerable: true,
     get: function () { return react.RandomGradient; }
 });
-Object.defineProperty(exports, 'RangeSlider', {
+Object.defineProperty(exports, "RangeSlider", {
     enumerable: true,
     get: function () { return react.RangeSlider; }
 });
-Object.defineProperty(exports, 'Rating', {
+Object.defineProperty(exports, "Rating", {
     enumerable: true,
     get: function () { return react.Rating; }
 });
-Object.defineProperty(exports, 'Reorder', {
+Object.defineProperty(exports, "Reorder", {
     enumerable: true,
     get: function () { return react.Reorder; }
 });
-Object.defineProperty(exports, 'ResizablePanels', {
+Object.defineProperty(exports, "ResizablePanels", {
     enumerable: true,
     get: function () { return react.ResizablePanels; }
 });
-Object.defineProperty(exports, 'ScrollArea', {
+Object.defineProperty(exports, "ScrollArea", {
     enumerable: true,
     get: function () { return react.ScrollArea; }
 });
-Object.defineProperty(exports, 'SearchBar', {
+Object.defineProperty(exports, "SearchBar", {
     enumerable: true,
     get: function () { return react.SearchBar; }
 });
-Object.defineProperty(exports, 'Section', {
+Object.defineProperty(exports, "Section", {
     enumerable: true,
     get: function () { return react.Section; }
 });
-Object.defineProperty(exports, 'SectionAppDownload', {
+Object.defineProperty(exports, "SectionAppDownload", {
     enumerable: true,
     get: function () { return react.SectionAppDownload; }
 });
-Object.defineProperty(exports, 'SectionContact', {
+Object.defineProperty(exports, "SectionContact", {
     enumerable: true,
     get: function () { return react.SectionContact; }
 });
-Object.defineProperty(exports, 'SectionCta', {
+Object.defineProperty(exports, "SectionCta", {
     enumerable: true,
     get: function () { return react.SectionCta; }
 });
-Object.defineProperty(exports, 'SectionFaq', {
+Object.defineProperty(exports, "SectionFaq", {
     enumerable: true,
     get: function () { return react.SectionFaq; }
 });
-Object.defineProperty(exports, 'SectionFeature', {
+Object.defineProperty(exports, "SectionFeature", {
     enumerable: true,
     get: function () { return react.SectionFeature; }
 });
-Object.defineProperty(exports, 'SectionFeatureGrid', {
+Object.defineProperty(exports, "SectionFeatureGrid", {
     enumerable: true,
     get: function () { return react.SectionFeatureGrid; }
 });
-Object.defineProperty(exports, 'SectionHero', {
+Object.defineProperty(exports, "SectionHero", {
     enumerable: true,
     get: function () { return react.SectionHero; }
 });
-Object.defineProperty(exports, 'SectionLogoCloud', {
+Object.defineProperty(exports, "SectionLogoCloud", {
     enumerable: true,
     get: function () { return react.SectionLogoCloud; }
 });
-Object.defineProperty(exports, 'SectionPricing', {
+Object.defineProperty(exports, "SectionPricing", {
     enumerable: true,
     get: function () { return react.SectionPricing; }
 });
-Object.defineProperty(exports, 'SectionStats', {
+Object.defineProperty(exports, "SectionStats", {
     enumerable: true,
     get: function () { return react.SectionStats; }
 });
-Object.defineProperty(exports, 'SectionTestimonials', {
+Object.defineProperty(exports, "SectionTestimonials", {
     enumerable: true,
     get: function () { return react.SectionTestimonials; }
 });
-Object.defineProperty(exports, 'SegmentControl', {
+Object.defineProperty(exports, "SegmentControl", {
     enumerable: true,
     get: function () { return react.SegmentControl; }
 });
-Object.defineProperty(exports, 'Select', {
+Object.defineProperty(exports, "Select", {
     enumerable: true,
     get: function () { return react.Select; }
 });
-Object.defineProperty(exports, 'Share', {
+Object.defineProperty(exports, "Share", {
     enumerable: true,
     get: function () { return react.Share; }
 });
-Object.defineProperty(exports, 'Sidebar', {
+Object.defineProperty(exports, "Sidebar", {
     enumerable: true,
     get: function () { return react.Sidebar; }
 });
-Object.defineProperty(exports, 'Signature', {
+Object.defineProperty(exports, "Signature", {
     enumerable: true,
     get: function () { return react.Signature; }
 });
-Object.defineProperty(exports, 'Skeleton', {
+Object.defineProperty(exports, "Skeleton", {
     enumerable: true,
     get: function () { return react.Skeleton; }
 });
-Object.defineProperty(exports, 'Spinner', {
+Object.defineProperty(exports, "Spinner", {
     enumerable: true,
     get: function () { return react.Spinner; }
 });
-Object.defineProperty(exports, 'SplitView', {
+Object.defineProperty(exports, "SplitView", {
     enumerable: true,
     get: function () { return react.SplitView; }
 });
-Object.defineProperty(exports, 'Stack', {
+Object.defineProperty(exports, "Stack", {
     enumerable: true,
     get: function () { return react.Stack; }
 });
-Object.defineProperty(exports, 'Stat', {
+Object.defineProperty(exports, "Stat", {
     enumerable: true,
     get: function () { return react.Stat; }
 });
-Object.defineProperty(exports, 'Stepper', {
+Object.defineProperty(exports, "Stepper", {
     enumerable: true,
     get: function () { return react.Stepper; }
 });
-Object.defineProperty(exports, 'Table', {
+Object.defineProperty(exports, "Table", {
     enumerable: true,
     get: function () { return react.Table; }
 });
-Object.defineProperty(exports, 'Tabs', {
+Object.defineProperty(exports, "Tabs", {
     enumerable: true,
     get: function () { return react.Tabs; }
 });
-Object.defineProperty(exports, 'Testimonial', {
+Object.defineProperty(exports, "Testimonial", {
     enumerable: true,
     get: function () { return react.Testimonial; }
 });
-Object.defineProperty(exports, 'Textarea', {
+Object.defineProperty(exports, "Textarea", {
     enumerable: true,
     get: function () { return react.Textarea; }
 });
-Object.defineProperty(exports, 'TimePicker', {
+Object.defineProperty(exports, "TimePicker", {
     enumerable: true,
     get: function () { return react.TimePicker; }
 });
-Object.defineProperty(exports, 'Timeline', {
+Object.defineProperty(exports, "Timeline", {
     enumerable: true,
     get: function () { return react.Timeline; }
 });
-Object.defineProperty(exports, 'Toast', {
+Object.defineProperty(exports, "Toast", {
     enumerable: true,
     get: function () { return react.Toast; }
 });
-Object.defineProperty(exports, 'Toggle', {
+Object.defineProperty(exports, "Toggle", {
     enumerable: true,
     get: function () { return react.Toggle; }
 });
-Object.defineProperty(exports, 'Toolbar', {
+Object.defineProperty(exports, "Toolbar", {
     enumerable: true,
     get: function () { return react.Toolbar; }
 });
-Object.defineProperty(exports, 'Tooltip', {
+Object.defineProperty(exports, "Tooltip", {
     enumerable: true,
     get: function () { return react.Tooltip; }
 });
-Object.defineProperty(exports, 'TopBanner', {
+Object.defineProperty(exports, "TopBanner", {
     enumerable: true,
     get: function () { return react.TopBanner; }
 });
-Object.defineProperty(exports, 'Tutorial', {
+Object.defineProperty(exports, "Tutorial", {
     enumerable: true,
     get: function () { return react.Tutorial; }
 });
-Object.defineProperty(exports, 'TwoFactor', {
+Object.defineProperty(exports, "TwoFactor", {
     enumerable: true,
     get: function () { return react.TwoFactor; }
 });
-Object.defineProperty(exports, 'VideoPlayer', {
+Object.defineProperty(exports, "VideoPlayer", {
     enumerable: true,
     get: function () { return react.VideoPlayer; }
 });
-Object.defineProperty(exports, 'YouTubePlayer', {
+Object.defineProperty(exports, "YouTubePlayer", {
     enumerable: true,
     get: function () { return react.YouTubePlayer; }
 });
-Object.defineProperty(exports, 'useContextMenu', {
+Object.defineProperty(exports, "useContextMenu", {
     enumerable: true,
     get: function () { return react.useContextMenu; }
 });
-exports.DEFAULT_LICENSE_MESSAGE_TYPES = DEFAULT_LICENSE_MESSAGE_TYPES;
+Object.defineProperty(exports, "DEFAULT_LICENSE_MESSAGE_TYPES", {
+    enumerable: true,
+    get: function () { return figmaLicenseCore.DEFAULT_LICENSE_MESSAGE_TYPES; }
+});
 exports.DonationBadge = DonationBadge;
+exports.FIGMA_UI_TRANSLATIONS = FIGMA_UI_TRANSLATIONS;
 exports.FigmaContainer = FigmaContainer;
 exports.FigmaFooter = FigmaFooter;
 exports.FigmaHeader = FigmaHeader;
@@ -2243,6 +2770,7 @@ exports.FigmaSection = FigmaSection;
 exports.FigmaSidebar = FigmaSidebar;
 exports.FigmaToast = FigmaToast;
 exports.FigmaToastProvider = FigmaToastProvider;
+exports.FigmaUiI18nProvider = FigmaUiI18nProvider;
 exports.FormWithSubmit = FormWithSubmit;
 exports.InteractionFeedback = InteractionFeedback;
 exports.LanguageSelector = LanguageSelector;
@@ -2261,13 +2789,16 @@ exports.SettingsModal = SettingsModal;
 exports.TitleDescription = TitleDescription;
 exports.UpgradeBanner = UpgradeBanner;
 exports.UsageStatusPopover = UsageStatusPopover;
+exports.createFigmaUiTranslator = createFigmaUiTranslator;
 exports.getActiveSection = getActiveSection;
 exports.interpolateText = interpolateText;
+exports.normalizeFigmaUiLocale = normalizeFigmaUiLocale;
 exports.resolvePaymentFeedbackVariant = resolvePaymentFeedbackVariant;
 exports.resolveText = resolveText;
 exports.scrollToSection = scrollToSection;
 exports.useFigmaLicenseBridge = useFigmaLicenseBridge;
 exports.useFigmaToast = useFigmaToast;
+exports.useFigmaUiI18n = useFigmaUiI18n;
 exports.useToast = useToast;
 Object.keys(react).forEach(function (k) {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {