@eifi1/ui-kit 0.31.1 → 0.32.1

package/src/i18n/locales/it.ts

@@ -23,6 +23,10 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
     !seconds || seconds <= 0
       ? "Troppi tentativi. Attenda un momento e riprovi."
       : `Troppi tentativi. Riprovi tra ${wait(seconds)}.`;
+  // 0.32.0 — when a trial or a grant ends, as `inDays` in src/billing/billing-labels.ts:
+  // 0 (or less) is today, 1 tomorrow.
+  const inDays = (days: number) =>
+    days <= 0 ? "oggi" : days === 1 ? "domani" : `tra ${n(days)} ${plural(days, "giorno", "giorni")}`;
 
   return {
     feedbackAttachment: {
@@ -801,6 +805,10 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
           disclaimer: {
             title: "Responsabilità per contenuti e link",
             body: "Questo è un progetto privato e non commerciale, offerto nell’ambito di una beta chiusa, senza garanzia. I siti esterni a cui rimandiamo sono di responsabilità dei rispettivi gestori; non abbiamo alcun controllo sui loro contenuti.",
+            // 0.32.0 — the commercial variant (docs/billing-harmonization.md §8). "Piano"
+            // and "abbonamento" as the `billing` namespace.
+            commercial:
+              "Questo è un servizio commerciale. I piani a pagamento sono venduti dal nostro rivenditore, che agisce in qualità di Merchant of Record: vende l’abbonamento in nome proprio, incassa il pagamento, emette la fattura e gestisce l’IVA, e all’acquisto si applicano le sue condizioni di vendita. Ci impegniamo affinché i contenuti di questo servizio siano corretti, ma non possiamo garantire che siano completi o aggiornati. I siti esterni a cui rimandiamo sono di responsabilità dei rispettivi gestori; non abbiamo alcun controllo sui loro contenuti.",
           },
         },
         privacy: {
@@ -1176,6 +1184,7 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
         deletion_request: "Eliminazione richiesta",
         deletion_cancel: "Eliminazione annullata",
         erase: "Account cancellato",
+        plan: "Piano modificato",
       },
     },
     transferOwnership: {
@@ -1253,6 +1262,7 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       inflow: "Entrata",
       // "premere per…": an instruction without a tu imperative, as the kit's Italian is formal.
       direction: (current, next) => `Direzione: ${current} – premere per passare a ${next}`,
+      switchTo: (next) => `Passa a ${next}`,
     },
     columnMapper: {
       paste: "Incolla una tabella",
@@ -1426,6 +1436,99 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
         "I dati di esempio vengono reimpostati regolarmente; quello che ha creato nella demo viene eliminato.",
       restart: "Avvia una nuova demo",
     },
+    // 0.32.0 — docs/billing-harmonization.md §7, §10 and §12.24: "piano" is what is bought
+    // (Free, Pro), "abbonamento" the standing arrangement and the settings group;
+    // "disdire", the word for ending a contract. "Lei" in sentences, the imperative on
+    // buttons, as everywhere in this catalogue.
+    billing: {
+      group: "Abbonamento",
+      plans: "Piani",
+      interval: "Periodo di fatturazione",
+      yearly: "Annuale",
+      monthly: "Mensile",
+      // As `currency.currency`.
+      currency: "Valuta",
+      perYear: "all’anno",
+      perMonth: "al mese",
+      vatIncluded: "IVA inclusa",
+      free: "Gratuito",
+      notOffered: "Non disponibile per questo periodo di fatturazione",
+      // As `progressBar.unlimited`.
+      unlimited: "Illimitato",
+      limits: "Limiti",
+      features: "Incluso",
+      current: "Piano attuale",
+      choose: (plan) => `Scegli ${plan}`,
+      upgrade: (plan) => `Passa a ${plan}`,
+      // "Passare a" either way: Italian has no plain verb for a downgrade.
+      downgrade: (plan) => `Passa a ${plan}`,
+      isCurrent: "Questo è il Suo piano attuale.",
+      pickFirst: "Scelga prima un piano.",
+      // Agreeing with "abbonamento"; "scaduto", as `invitations.status.expired`.
+      status: {
+        trialing: "In prova",
+        active: "Attivo",
+        past_due: "Pagamento in ritardo",
+        canceled: "Disdetto",
+        expired: "Scaduto",
+        comped: "In omaggio",
+      },
+      trialEnding: (days) =>
+        `Il Suo periodo di prova termina ${inDays(days)}. In seguito potrà ancora vedere tutto, ma per apportare modifiche servirà un piano.`,
+      grantEnding: (days) =>
+        `Il Suo accesso gratuito termina ${inDays(days)}. In seguito potrà ancora vedere tutto, ma per apportare modifiche servirà un piano.`,
+      paymentFailed:
+        "Il Suo ultimo pagamento non è andato a buon fine. Aggiorni il metodo di pagamento per mantenere il Suo piano.",
+      planEnded:
+        "Il Suo piano è terminato. Può ancora vedere ed esportare tutto; scelga un piano per apportare di nuovo modifiche.",
+      // Never why: the owner's payment status is the owner's personal data (§12.6).
+      guestReadOnly: (item) =>
+        item
+          ? `«${item}» per ora è in sola lettura; il proprietario può rimuovere questa limitazione.`
+          : "Per ora è in sola lettura; il proprietario può rimuovere questa limitazione.",
+      processing:
+        "Il Suo pagamento è in elaborazione. Il Suo piano inizia non appena viene confermato; questa pagina si aggiorna da sola.",
+      choosePlan: "Scegli un piano",
+      updatePayment: "Aggiorna il metodo di pagamento",
+      checkAgain: "Verifica di nuovo",
+      lockReason: "Il Suo piano è terminato. Scelga un piano per apportare di nuovo modifiche.",
+      // As `characterCount.limitReached` ("Limite di caratteri raggiunto").
+      limitReached: "Limite del piano raggiunto",
+      limitUpgrade: "Per aggiungerne altri, scelga un piano con un limite più alto.",
+      limitContact: "Per aggiungerne altri, ci chieda un limite più alto.",
+      askForMore: "Chiedi di più",
+      // Both figures arrive formatted; "di", as `characterCount.count`.
+      usage: (used, limit) => `${used} di ${limit}`,
+      contactSubject: (dimension) => `Limite del piano: ${dimension}`,
+      manage: "Pagamento e fatture",
+      cancel: "Disdici l’abbonamento",
+      waitingChanges: (count) =>
+        `${n(count)} ${plural(count, "modifica in attesa", "modifiche in attesa")} di un piano`,
+      // "Scarta", as `wizard.cancelConfirmLabel`.
+      discardWaiting: "Scarta le modifiche in attesa",
+      notConfigured: "I pagamenti non sono ancora configurati. Riprovi più tardi.",
+      disabled: "Gli abbonamenti non sono disponibili qui.",
+    },
+    // 0.32.0 — docs/text-size-harmonization.md §6: the text-size and contrast settings in
+    // the "Aspetto" group.
+    appearance: {
+      textSize: "Dimensione del testo",
+      textSizeHelp: "Lettere più grandi e un layout che fa loro spazio.",
+      textSizes: { normal: "Normale", large: "Grande", xlarge: "Molto grande" },
+      contrast: "Contrasto",
+      contrastHelp:
+        "Il contrasto aumentato scurisce i testi tenui e le linee e ispessisce i riquadri di focus. «Sistema» segue l’impostazione di questo dispositivo.",
+      contrastModes: { system: "Sistema", standard: "Standard", more: "Aumentato" },
+      saveFailed: "Non è stato possibile salvarlo nel Suo account. Su questo dispositivo vale comunque.",
+    },
+    rowActions: {
+      actions: "Azioni",
+      actionsFor: (name) => `Azioni per ${name}`,
+    },
+    appShellMore: {
+      more: "Altro",
+      moreTitle: "Altre pagine",
+    },
   };
 }
 

package/src/i18n/locales/zh.ts

@@ -20,6 +20,9 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
     seconds < 60 ? `${n(Math.ceil(seconds))} 秒` : `${n(Math.ceil(seconds / 60))} 分钟`;
   const rateLimited = (seconds?: number) =>
     !seconds || seconds <= 0 ? "尝试次数过多，请稍候再试。" : `尝试次数过多，请 ${wait(seconds)}后重试。`;
+  // 0.32.0 — when a trial or a grant ends, as `inDays` in src/billing/billing-labels.ts:
+  // 0 (or less) is today, 1 tomorrow. A numeral brings its own leading space.
+  const inDays = (days: number) => (days <= 0 ? "今天" : days === 1 ? "明天" : ` ${n(days)} 天后`);
 
   return {
     feedbackAttachment: {
@@ -777,6 +780,10 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
           disclaimer: {
             title: "内容与链接的责任",
             body: "这是一个私人的非商业项目，在封闭测试期间提供，不作任何保证。我们所链接的外部网站由其各自的运营者负责；我们无法控制其内容。",
+            // 0.32.0 — the commercial variant (docs/billing-harmonization.md §8). "套餐"
+            // and "订阅" as the `billing` namespace.
+            commercial:
+              "这是一项商业服务。付费套餐由我们的经销商销售，该经销商作为记录商户（Merchant of Record）行事：它以自己的名义销售订阅、收取款项、开具发票并处理增值税，且该笔购买适用其销售条款。我们尽力确保本服务的内容准确，但无法保证其完整或最新。我们所链接的外部网站由其各自的运营者负责；我们无法控制其内容。",
           },
         },
         privacy: {
@@ -1124,6 +1131,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
         deletion_request: "已申请删除",
         deletion_cancel: "已取消删除",
         erase: "账户已永久删除",
+        plan: "套餐已更改",
       },
     },
     transferOwnership: {
@@ -1196,6 +1204,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       outflow: "支出",
       inflow: "收入",
       direction: (current, next) => `方向：${current}，切换为${next}`,
+      switchTo: (next) => `切换为${next}`,
     },
     columnMapper: {
       paste: "粘贴表格",
@@ -1358,6 +1367,91 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       endedSandbox: "示例数据会定期重置；您在演示中创建的内容会被删除。",
       restart: "开始新的演示",
     },
+    // 0.32.0 — docs/billing-harmonization.md §7, §10 and §12.24: "套餐" is what is bought
+    // (Free, Pro), "订阅" the standing arrangement and the settings group. "您".
+    billing: {
+      group: "订阅",
+      plans: "套餐",
+      interval: "计费周期",
+      yearly: "按年",
+      monthly: "按月",
+      // As `currency.currency`.
+      currency: "货币",
+      perYear: "每年",
+      perMonth: "每月",
+      vatIncluded: "含增值税",
+      free: "免费",
+      notOffered: "此计费周期不提供",
+      // As `progressBar.unlimited`.
+      unlimited: "无限制",
+      limits: "限额",
+      features: "包含内容",
+      current: "当前套餐",
+      choose: (plan) => `选择 ${plan}`,
+      upgrade: (plan) => `升级到 ${plan}`,
+      downgrade: (plan) => `切换到 ${plan}`,
+      isCurrent: "这是您当前的套餐。",
+      pickFirst: "请先选择一个套餐。",
+      status: {
+        trialing: "试用中",
+        active: "有效",
+        past_due: "付款逾期",
+        canceled: "已取消",
+        // As `invitations.status.expired`.
+        expired: "已过期",
+        comped: "免费赠送",
+      },
+      trialEnding: (days) =>
+        `您的试用期将于${inDays(days)}结束。之后您仍可查看所有内容，但需要套餐才能进行修改。`,
+      grantEnding: (days) =>
+        `您的免费使用权将于${inDays(days)}结束。之后您仍可查看所有内容，但需要套餐才能进行修改。`,
+      paymentFailed: "您的上一笔付款未成功。请更新付款方式，以保留您的套餐。",
+      planEnded: "您的套餐已结束。您仍可查看和导出所有内容；选择套餐后即可再次进行修改。",
+      // Never why: the owner's payment status is the owner's personal data (§12.6).
+      guestReadOnly: (item) =>
+        item
+          ? `“${item}”目前为只读；其所有者可以解除此限制。`
+          : "此内容目前为只读；其所有者可以解除此限制。",
+      processing: "您的付款正在处理中。确认后您的套餐即会生效；此页面会自动更新。",
+      choosePlan: "选择套餐",
+      updatePayment: "更新付款方式",
+      checkAgain: "再次检查",
+      lockReason: "您的套餐已结束。选择套餐后即可再次进行修改。",
+      // As `characterCount.limitReached` ("已达到字符数上限").
+      limitReached: "已达到套餐上限",
+      limitUpgrade: "如需添加更多，请选择上限更高的套餐。",
+      limitContact: "如需添加更多，请向我们申请更高的上限。",
+      askForMore: "申请提高上限",
+      // Both figures arrive formatted; written as `characterCount.count` writes them.
+      usage: (used, limit) => `${used}/${limit}`,
+      contactSubject: (dimension) => `套餐上限：${dimension}`,
+      manage: "付款与发票",
+      cancel: "取消订阅",
+      waitingChanges: (count) => `${n(count)} 项修改正在等待套餐`,
+      // "放弃", as `wizard.cancelConfirmLabel`.
+      discardWaiting: "放弃等待中的修改",
+      notConfigured: "付款尚未设置，请稍后再试。",
+      disabled: "此处不提供订阅。",
+    },
+    // 0.32.0 — docs/text-size-harmonization.md §6: the text-size and contrast settings in
+    // the "外观" group.
+    appearance: {
+      textSize: "文字大小",
+      textSizeHelp: "更大的文字，以及为其留出空间的布局。",
+      textSizes: { normal: "标准", large: "大", xlarge: "特大" },
+      contrast: "对比度",
+      contrastHelp: "增强对比度会加深浅色文字和线条，并加粗焦点框。“跟随系统”沿用此设备的设置。",
+      contrastModes: { system: "跟随系统", standard: "标准", more: "增强" },
+      saveFailed: "无法保存到您的账户。此设备上仍然生效。",
+    },
+    rowActions: {
+      actions: "操作",
+      actionsFor: (name) => `${name} 的操作`,
+    },
+    appShellMore: {
+      more: "更多",
+      moreTitle: "更多页面",
+    },
   };
 }
 

package/src/i18n/review.ts

@@ -267,6 +267,8 @@ export const KIT_LABEL_SAMPLES: Readonly<Record<string, readonly (readonly unkno
   "ibanInput.country": [["{{code}}"]],
   "ibanInput.length": [[20, 21]],
   "signChip.direction": [["{{current}}", "{{next}}"]],
+  "signChip.switchTo": [["{{next}}"]],
+  "rowActions.actionsFor": [["{{name}}"]],
   "columnMapper.readError": [["{{name}}"]],
   "columnMapper.summary": [
     [1, 1],
@@ -352,4 +354,16 @@ export const KIT_LABEL_SAMPLES: Readonly<Record<string, readonly (readonly unkno
     [3, 12],
   ],
   "demo.minutesLeft": one,
+  // 0.32.0: the subscription parts (docs/billing-harmonization.md §7). A trial or a grant
+  // ending today, tomorrow and in five days; the guest's notice with and without the
+  // item's name.
+  "billing.choose": [["{{plan}}"]],
+  "billing.upgrade": [["{{plan}}"]],
+  "billing.downgrade": [["{{plan}}"]],
+  "billing.trialEnding": [[0], [1], [5]],
+  "billing.grantEnding": [[0], [1], [5]],
+  "billing.guestReadOnly": [["{{item}}"], [undefined]],
+  "billing.usage": [["{{used}}", "{{limit}}"]],
+  "billing.contactSubject": [["{{dimension}}"]],
+  "billing.waitingChanges": one,
 };

package/src/index.ts

@@ -19,11 +19,17 @@ export { useMediaQuery } from "./hooks/use-media-query";
 export { useBodyScrollLock } from "./hooks/use-body-scroll-lock";
 export { useAnchoredRect } from "./hooks/use-anchored-rect";
 export type { AnchorRect } from "./hooks/use-anchored-rect";
-export { useAnchoredPanel, anchoredPanelPlacement, useVisualViewport } from "./hooks/use-anchored-panel";
+export {
+  useAnchoredPanel,
+  anchoredPanelPlacement,
+  useVisualViewport,
+  readKeyboardInset,
+} from "./hooks/use-anchored-panel";
 export type {
   AnchoredPanel,
   AnchoredPanelOptions,
   ViewportBox,
+  KeyboardInsetOptions,
 } from "./hooks/use-anchored-panel";
 export { useEscapeKey, useOutsideClick } from "./hooks/use-dismiss";
 // Focus containment for an overlay, and a live region for a change that moves no focus.
@@ -151,7 +157,7 @@ export * from "./components/icon-picker";
 export * from "./components/choice-card";
 export * from "./components/autocomplete";
 export * from "./components/measured-grid";
-export { useWindowedRows } from "./hooks/use-windowed-rows";
+export { useWindowedRows, WINDOWED_ROW_INDEX } from "./hooks/use-windowed-rows";
 export type { WindowedRows } from "./hooks/use-windowed-rows";
 // Named, not `export *`: file-button.tsx also holds the screening helpers the
 // dropzone shares, which are internal.
@@ -167,6 +173,8 @@ export type {
 } from "./components/file-button";
 export * from "./components/treemap";
 export * from "./components/series-chart";
+// 0.32.1 (keksdose's 0.32 report): the height every chart takes, for an app's wrappers.
+export type { ChartHeight } from "./components/chart-height";
 export * from "./components/chart-zoom";
 export * from "./components/toggle-legend";
 export * from "./components/facing-pair";
@@ -260,7 +268,14 @@ export type {
 // The toast layer over sonner (an OPTIONAL peer, loaded lazily): `toast` mirrors sonner's
 // API so apps migrate by swapping the import; `<Toaster>` carries the placement, theme,
 // tones and z-index both apps had wired by hand.
-export { toast, Toaster, DEFAULT_TOAST_LABELS, TOAST_ACTION_DURATION } from "./components/toast";
+export {
+  toast,
+  Toaster,
+  DEFAULT_TOAST_LABELS,
+  TOAST_ACTION_DURATION,
+  TOASTER_OFFSET_TOP,
+  TOASTER_OFFSET_BOTTOM,
+} from "./components/toast";
 export type {
   ToastId,
   ToastAction,
@@ -485,6 +500,7 @@ export type {
   LegalTextSectionLabels,
   LegalOperatorSectionLabels,
   LegalFramedSectionLabels,
+  LegalDisclaimerSectionLabels,
 } from "./components/legal";
 export { LegalPage, LegalKitSection, LegalAcceptCheckbox, LEGAL_SKELETON } from "./components/legal-page";
 
@@ -507,7 +523,7 @@ export type { RegisterFormProps, RegisterLabels, RegisterValues } from "./auth/r
 export { CompleteNameDialog, DEFAULT_COMPLETE_NAME_LABELS } from "./auth/complete-name-dialog";
 export type { CompleteNameDialogProps, CompleteNameLabels, CompleteNameValues } from "./auth/complete-name-dialog";
 export { taggedEmail } from "./auth/email-tag";
-export { isAuthError, authErrorCode } from "./auth/auth-errors";
+export { isAuthError, authErrorCode, isBillingError } from "./auth/auth-errors";
 export type { AuthErrorCode } from "./auth/auth-errors";
 export { ForgotPasswordForm, DEFAULT_FORGOT_PASSWORD_LABELS } from "./auth/forgot-password-form";
 export type { ForgotPasswordFormProps, ForgotPasswordLabels } from "./auth/forgot-password-form";
@@ -545,7 +561,7 @@ export type { CompanySwitcherProps, CompanySwitcherLabels, CompanySwitcherCompan
 // invitations panel, and the account's own settings — email change, sessions, deletion,
 // export. Callbacks only; the confirmation level is the server's.
 export { isRateLimited, retryAfterSeconds } from "./auth/auth-errors";
-export type { AccountErrorCode, DemoErrorCode, KitErrorCode } from "./auth/auth-errors";
+export type { AccountErrorCode, BillingErrorCode, DemoErrorCode, KitErrorCode } from "./auth/auth-errors";
 export { EmailChangeSetting, DEFAULT_EMAIL_CHANGE_LABELS } from "./account/email-change-setting";
 export type {
   EmailChangeSettingProps,
@@ -669,7 +685,8 @@ export {
 export type { SettingsGroup, SettingsEntry, SettingsSearchEntriesOptions } from "./settings/settings-catalogue";
 export { DEFAULT_SETTINGS_LABELS, useSettingsLabels } from "./settings/settings-labels";
 export type { SettingsLabels, SettingsGroupLabels, SettingsCoreGroup } from "./settings/settings-labels";
-// Only the language follows the account (§6.2).
+// The language follows the account (§6.2); since 0.32 so do the text size and the
+// contrast (useAccountAppearance below, docs/text-size-harmonization.md §6).
 export { useAccountLanguage, resolveAccountLanguage, matchOfferedLanguage } from "./settings/use-account-language";
 export type {
   UseAccountLanguageOptions,
@@ -738,8 +755,61 @@ export type {
   LegalSkeletonEntry,
   LegalSkeletonPage,
   LegalSectionOwner,
+  LegalDisclaimerVariant,
 } from "./components/legal-page";
 
+// ── 0.32.0: text size and contrast (docs/text-size-harmonization.md) ──
+export * from "./theme/text-size";
+export * from "./theme/contrast";
+export { useBreakpoint, usePhoneLayout, breakpointQuery, BREAKPOINT_REM, remPx, useRemPx } from "./hooks/use-breakpoint";
+export type { Breakpoint, BreakpointVariant, RemLength } from "./hooks/use-breakpoint";
+export { useAccountAppearance, resolveAccountAppearance } from "./settings/use-account-appearance";
+export type {
+  AppearanceSource,
+  AccountAppearanceFields,
+  DeviceAppearance,
+  AccountAppearancePatch,
+  ResolvedAccountAppearance,
+  UseAccountAppearanceOptions,
+  AccountAppearance,
+} from "./settings/use-account-appearance";
+export { DEFAULT_APPEARANCE_LABELS, useAppearanceLabels } from "./components/appearance-labels";
+// The behaviours at Large (§4, §10.7–10.9): a row's actions, the hooks components read.
+export { RowActions, rowActionsColumn, DEFAULT_ROW_ACTIONS_LABELS } from "./components/row-actions";
+export type {
+  RowAction,
+  RowActionList,
+  RowActionsLabels,
+  RowActionsProps,
+  RowActionsCollapse,
+  RowActionsSize,
+  RowActionsColumnOptions,
+} from "./components/row-actions";
+export { useLargeText, useCoarsePointer, useInlineFacts } from "./hooks/use-large-text";
+export type { AppearanceLabels } from "./components/appearance-labels";
+
+// ── 0.32.0: billing — plans, standing, banners, the limit notice (docs/billing-harmonization.md §7) ──
+export { DEFAULT_BILLING_LABELS, useBillingLabels, SUBSCRIPTION_STATUSES } from "./billing/billing-labels";
+export type { BillingLabels, SubscriptionStatus } from "./billing/billing-labels";
+export { BILLING_INTERVALS, planPrice, minorToMajor, formatPlanPrice, billingCurrencyFor } from "./billing/plan-price";
+export type { BillingInterval, BillingCurrency, PlanIntervalPrices, PlanPrices, PlanPriceAnswer } from "./billing/plan-price";
+export { PlanCard, PlanPicker, planRelation } from "./billing/plan-card";
+export type { BillingPlan, PlanRelation, PlanCardProps, PlanPickerProps, PlanChoice } from "./billing/plan-card";
+export { SubscriptionStatusChip, SUBSCRIPTION_STATUS_TONES } from "./billing/subscription-status-chip";
+export type { SubscriptionStatusChipProps } from "./billing/subscription-status-chip";
+export { BillingBanner } from "./billing/billing-banner";
+export type { BillingBannerProps, BillingBannerKind } from "./billing/billing-banner";
+export { PlanLimitNotice, planLimitMailto } from "./billing/plan-limit-notice";
+export type { PlanLimitNoticeProps } from "./billing/plan-limit-notice";
+export { isPlanLimit } from "./billing/plan-limit";
+export type { PlanLimitRefusal } from "./billing/plan-limit";
+export { combineWriteLocks, useBillingLockReason } from "./billing/billing-lock";
+export type { WriteLockSource, CombinedWriteLock, BillingLockReasonOptions } from "./billing/billing-lock";
+export { billingLockAt, isBillingReadOnly, billingDaysLeft } from "./billing/billing-standing";
+export type { BillingStanding } from "./billing/billing-standing";
+export { SubscriptionActions } from "./billing/subscription-actions";
+export type { SubscriptionActionsProps } from "./billing/subscription-actions";
+
 // ── 0.22.0: the inputs round (kastlan's, keksdose's and Kurvenschmiede's audits) ──
 export * from "./components/checkbox-group";
 export * from "./components/one-time-code-input";

package/src/landing/landing-sections.tsx

@@ -97,7 +97,11 @@ export function Hero({
       {...rest}
       data-slot="landing-hero"
       className={cn(
-        "mx-auto grid max-w-6xl items-center gap-12 px-4 py-16 sm:py-24",
+        // `grid-cols-1` below `lg` (0.32.1, Kurvenschmiede's 0.32 report): without a
+        // template the one column is `auto` and grows to the visual's longest unwrapped
+        // line — 80 px past a 360 px phone at Extra large. `minmax(0, 1fr)` holds it to
+        // the page. The same in FeatureRow and TrustStrip.
+        "mx-auto grid max-w-6xl grid-cols-1 items-center gap-12 px-4 py-16 sm:py-24",
         visual != null && "lg:grid-cols-2",
         className,
       )}
@@ -186,7 +190,7 @@ export function FeatureRow({
     <div
       {...rest}
       data-slot="landing-feature-row"
-      className={cn("group/feature grid items-center gap-8 py-10", visual != null && "lg:grid-cols-2 lg:gap-16", className)}
+      className={cn("group/feature grid grid-cols-1 items-center gap-8 py-10", visual != null && "lg:grid-cols-2 lg:gap-16", className)}
     >
       <div className="lg:group-even/feature:order-last">
         {(icon != null || eyebrow != null) && (
@@ -245,7 +249,7 @@ export interface TrustStripProps extends Omit<ComponentPropsWithoutRef<"section"
 export function TrustStrip({ items, headingAs: Heading = "h3", className, ...rest }: TrustStripProps) {
   return (
     <section {...rest} data-slot="landing-trust" className={cn("mx-auto max-w-6xl px-4 py-12 sm:py-16", className)}>
-      <ul className={cn("grid gap-8 sm:grid-cols-2", items.length === 3 ? "lg:grid-cols-3" : "lg:grid-cols-4")}>
+      <ul className={cn("grid grid-cols-1 gap-8 sm:grid-cols-2", items.length === 3 ? "lg:grid-cols-3" : "lg:grid-cols-4")}>
         {items.map((item, i) => (
           <li key={i}>
             {item.icon != null && (

package/src/landing/public-header.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 
-import { Button, PHONE_QUERY } from "../components/ui";
-import { useMediaQuery } from "../hooks/use-media-query";
+import { Button } from "../components/ui";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { TopBar } from "../shell/top-bar";
 import type { TopBarProps } from "../shell/top-bar";
 import { TopBarBrand } from "../shell/top-bar-brand";
@@ -55,7 +55,7 @@ export interface PublicHeaderProps extends Omit<TopBarProps, "brand" | "actions"
  * | user | **Open app** (primary) |
  *
  * A demo session is not "signed in" here: it is still offered access, which is the point
- * of the demo (§5.6). On a phone (`PHONE_QUERY`) the actions take the kit's `sm` size, so
+ * of the demo (§5.6). In the phone layout (`usePhoneLayout()`) the actions take the kit's `sm` size, so
  * the brand mark, the two controls and two actions fit 390px; "Sign in" gives way below
  * `sm` as in keksdose — the sign-in page is one tap away from "Request access" anyway.
  */
@@ -75,7 +75,7 @@ export function PublicHeader({
 }: PublicHeaderProps) {
   const labels = useLandingLabels(labelsProp);
   const accessLink = useAccessAction(access, labelsProp);
-  const phone = useMediaQuery(PHONE_QUERY, false);
+  const phone = usePhoneLayout();
   const size = phone ? "sm" : "md";
   const home = homeHref ?? (session === "none" ? "/" : "/welcome");
 

package/src/lib/cn.ts

@@ -1,5 +1,16 @@
 import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
+
+/**
+ * tailwind-merge, told about the kit's own font sizes (docs/text-size-harmonization.md
+ * §3.2): `text-micro` and `text-caption` are `@theme` sizes in tokens.css, which
+ * tailwind-merge cannot see. Unknown, a `text-<word>` is taken for a COLOUR, so
+ * `cn("text-caption text-[var(--text-muted)]")` dropped the size — the later colour
+ * "won" over it — and `cn("text-xs", "text-caption")` kept both sizes. Registered as
+ * sizes, they merge like `text-xs`: a later size replaces an earlier one, a colour sits
+ * beside them.
+ */
+const merge = extendTailwindMerge({ extend: { theme: { text: ["micro", "caption"] } } });
 
 /** Merge class lists with Tailwind conflict resolution (later wins). */
-export const cn = (...inputs: Parameters<typeof clsx>) => twMerge(clsx(inputs));
+export const cn = (...inputs: Parameters<typeof clsx>) => merge(clsx(inputs));

package/src/rhf/fields.tsx

@@ -1003,7 +1003,7 @@ function RangeBody({
           key={message}
           id={messageIds[i]}
           data-slot="form-message"
-          className="text-[11px] leading-tight text-[var(--danger)]"
+          className="text-caption leading-tight text-[var(--danger)]"
         >
           {message}
         </p>

package/src/rhf/form.tsx

@@ -287,7 +287,7 @@ export function FormDescription({ className, ...rest }: FormDescriptionProps) {
       data-slot="form-description"
       {...rest}
       id={formDescriptionId}
-      className={cn("text-[11px] leading-tight text-[var(--text-muted)]", className)}
+      className={cn("text-caption leading-tight text-[var(--text-muted)]", className)}
     />
   );
 }
@@ -315,7 +315,7 @@ export function FormMessage({ className, children, ...rest }: FormMessageProps)
       data-slot="form-message"
       {...rest}
       id={formMessageId}
-      className={cn("text-[11px] leading-tight text-[var(--danger)]", className)}
+      className={cn("text-caption leading-tight text-[var(--danger)]", className)}
     >
       {body}
     </p>

package/src/search/command-palette.tsx

@@ -3,8 +3,8 @@ import type { ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { CornerDownLeft, Search, X } from "lucide-react";
 import { cn } from "../lib/cn";
-import { PHONE_QUERY } from "../components/ui";
-import { useMediaQuery } from "../hooks/use-media-query";
+import { FIELD_TOUCH_TEXT } from "../components/ui";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { useOverlayHistory } from "../hooks/use-overlay-history";
 import { useFocusTrap } from "../hooks/use-focus-trap";
 import { useBodyScrollLock } from "../hooks/use-body-scroll-lock";
@@ -191,7 +191,7 @@ interface CommandPaletteProps {
    *  which overrides it per row). Off by default. */
   redactLabels?: boolean;
   /**
-   * Below the phone breakpoint ({@link PHONE_QUERY}) the palette fills the screen:
+   * In the phone layout (`usePhoneLayout()`) the palette fills the screen:
    * no inset, no rounded panel, the field pinned at the top inside the safe areas and
    * the list scrolling under it, with a close button since there is no backdrop to tap.
    * On by default — a top-centred card at 70vh leaves little room once the keyboard is
@@ -267,7 +267,7 @@ export function CommandPalette({
     setQuery(next);
   };
   const dirty = submitMode && draft !== query;
-  const isPhone = useMediaQuery(PHONE_QUERY, false) && fullScreenOnPhone;
+  const isPhone = usePhoneLayout() && fullScreenOnPhone;
   const [results, setResults] = useState<CommandItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [failed, setFailed] = useState(false);
@@ -471,11 +471,12 @@ export function CommandPalette({
             enterKeyHint={submitMode ? "search" : undefined}
             className={cn(
               "w-full bg-transparent py-3 outline-none placeholder:text-[var(--text-placeholder)] text-[var(--text-primary)]",
-              // 16px on a phone, or iOS zooms the page in on focus.
-              isPhone ? "text-base" : "text-sm",
+              // 16px on a phone, or iOS zooms the page in on focus — and on any other
+              // touch screen too (a tablet's popover), FIELD_TOUCH_TEXT (§10.1).
+              isPhone ? "text-base" : cn("text-sm", FIELD_TOUCH_TEXT),
             )}
           />
-          {loading && <span className="shrink-0 text-[11px] text-[var(--text-placeholder)]">{l.loading}</span>}
+          {loading && <span className="shrink-0 text-caption text-[var(--text-placeholder)]">{l.loading}</span>}
           {fieldText !== "" && (
             <button
               type="button"
@@ -536,7 +537,7 @@ export function CommandPalette({
               <div
                 id={groupId(groupIndex)}
                 role="presentation"
-                className="px-3 pb-0.5 pt-2 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]"
+                className="px-3 pb-0.5 pt-2 text-micro font-semibold uppercase tracking-wide text-[var(--text-placeholder)]"
               >
                 {group}
               </div>
@@ -635,7 +636,7 @@ export function CommandPalette({
         </ul>
 
         {l.hint && (
-          <div className="border-t border-[var(--border)] px-3 py-1.5 text-[11px] text-[var(--text-placeholder)]">
+          <div className="border-t border-[var(--border)] px-3 py-1.5 text-caption text-[var(--text-placeholder)]">
             {l.hint}
           </div>
         )}

package/src/settings/settings-layout.tsx

@@ -3,6 +3,7 @@ import type { ReactElement, ReactNode } from "react";
 import { Link, useHref, useLocation } from "react-router";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Button, Card, EmptyState, Tabs } from "../components/ui";
+import { FOCUS_RING } from "../components/focus-ring";
 import { Chip } from "../components/chip";
 import { List, ListItem } from "../components/list";
 import type { ListItemLinkProps } from "../components/list";
@@ -266,7 +267,7 @@ export function SettingsLayout<G extends string>({
                 e.preventDefault();
                 route.back();
               }}
-              className="-ms-1 inline-flex items-center gap-0.5 self-start rounded-md pe-1 text-sm font-medium text-[var(--text-muted)] hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+              className={cn("-ms-1 inline-flex items-center gap-0.5 self-start rounded-md pe-1 text-sm font-medium text-[var(--text-muted)] hover:text-[var(--text-primary)]", FOCUS_RING)}
             >
               <ChevronLeft aria-hidden className="size-4 rtl:-scale-x-100" />
               {pageTitle}