@oxy.so/bloom 5.2.0 → 5.4.0

package/src/ai-profile-card/messages.ts

@@ -1,4 +1,4 @@
-import type { MessageCatalog } from '../locale/messages';
+import { defineMessages, type MessageCatalog } from '../locale/messages';
 
 /**
  * Every fixed string `AiProfileCard` draws or announces, in each Bloom
@@ -13,95 +13,9 @@ export interface AiProfileCardMessages {
   periods: { weekly: string; monthly: string; yearly: string };
 }
 
-export const AI_PROFILE_CARD_MESSAGES: MessageCatalog<AiProfileCardMessages> = {
-  en: {
-    contributions: 'Contributions this year',
-    activity: 'Activity',
-    periodGroup: (label) => `${label} period`,
-    periods: { weekly: 'Weekly', monthly: 'Monthly', yearly: 'Yearly' },
-  },
-  es: {
-    contributions: 'Contribuciones este año',
-    activity: 'Actividad',
-    periodGroup: (label) => `Periodo: ${label}`,
-    periods: { weekly: 'Semanal', monthly: 'Mensual', yearly: 'Anual' },
-  },
-  ca: {
-    contributions: 'Contribucions aquest any',
-    activity: 'Activitat',
-    periodGroup: (label) => `Període: ${label}`,
-    periods: { weekly: 'Setmanal', monthly: 'Mensual', yearly: 'Anual' },
-  },
-  de: {
-    contributions: 'Beiträge in diesem Jahr',
-    activity: 'Aktivität',
-    periodGroup: (label) => `Zeitraum: ${label}`,
-    periods: { weekly: 'Wöchentlich', monthly: 'Monatlich', yearly: 'Jährlich' },
-  },
-  fr: {
-    contributions: 'Contributions cette année',
-    activity: 'Activité',
-    periodGroup: (label) => `Période : ${label}`,
-    periods: { weekly: 'Hebdomadaire', monthly: 'Mensuel', yearly: 'Annuel' },
-  },
-  it: {
-    contributions: 'Contributi quest’anno',
-    activity: 'Attività',
-    periodGroup: (label) => `Periodo: ${label}`,
-    periods: { weekly: 'Settimanale', monthly: 'Mensile', yearly: 'Annuale' },
-  },
-  pt: {
-    contributions: 'Contribuições este ano',
-    activity: 'Atividade',
-    periodGroup: (label) => `Período: ${label}`,
-    periods: { weekly: 'Semanal', monthly: 'Mensal', yearly: 'Anual' },
-  },
-  ru: {
-    contributions: 'Вклад за этот год',
-    activity: 'Активность',
-    periodGroup: (label) => `Период: ${label}`,
-    periods: { weekly: 'Неделя', monthly: 'Месяц', yearly: 'Год' },
-  },
-  tr: {
-    contributions: 'Bu yılki katkılar',
-    activity: 'Etkinlik',
-    periodGroup: (label) => `${label} dönemi`,
-    periods: { weekly: 'Haftalık', monthly: 'Aylık', yearly: 'Yıllık' },
-  },
-  ja: {
-    contributions: '今年のコントリビューション',
-    activity: 'アクティビティ',
-    periodGroup: (label) => `${label}の期間`,
-    periods: { weekly: '週間', monthly: '月間', yearly: '年間' },
-  },
-  zh: {
-    contributions: '今年的贡献',
-    activity: '活动',
-    periodGroup: (label) => `${label}周期`,
-    periods: { weekly: '每周', monthly: '每月', yearly: '每年' },
-  },
-  ar: {
-    contributions: 'المساهمات هذا العام',
-    activity: 'النشاط',
-    periodGroup: (label) => `فترة ${label}`,
-    periods: { weekly: 'أسبوعي', monthly: 'شهري', yearly: 'سنوي' },
-  },
-  hi: {
-    contributions: 'इस साल के योगदान',
-    activity: 'गतिविधि',
-    periodGroup: (label) => `${label} की अवधि`,
-    periods: { weekly: 'साप्ताहिक', monthly: 'मासिक', yearly: 'वार्षिक' },
-  },
-  bn: {
-    contributions: 'এ বছরের অবদান',
-    activity: 'কার্যকলাপ',
-    periodGroup: (label) => `${label}-এর সময়কাল`,
-    periods: { weekly: 'সাপ্তাহিক', monthly: 'মাসিক', yearly: 'বার্ষিক' },
-  },
-  id: {
-    contributions: 'Kontribusi tahun ini',
-    activity: 'Aktivitas',
-    periodGroup: (label) => `Periode ${label}`,
-    periods: { weekly: 'Mingguan', monthly: 'Bulanan', yearly: 'Tahunan' },
-  },
-};
+export const AI_PROFILE_CARD_MESSAGES: MessageCatalog<AiProfileCardMessages> = defineMessages<AiProfileCardMessages>('AI_PROFILE_CARD_MESSAGES', {
+  contributions: 'Contributions this year',
+  activity: 'Activity',
+  periodGroup: (label) => `${label} period`,
+  periods: { weekly: 'Weekly', monthly: 'Monthly', yearly: 'Yearly' },
+});

package/src/alert-dialog/messages.ts

@@ -1,4 +1,4 @@
-import type { MessageCatalog } from '../locale/messages';
+import { defineMessages, type MessageCatalog } from '../locale/messages';
 
 /**
  * The alert dialog's default confirm word, in each Bloom language ("Cancel"
@@ -8,50 +8,6 @@ export interface AlertDialogMessages {
   confirm: string;
 }
 
-export const ALERT_DIALOG_MESSAGES: MessageCatalog<AlertDialogMessages> = {
-  en: {
-    confirm: 'Confirm',
-  },
-  es: {
-    confirm: 'Confirmar',
-  },
-  ca: {
-    confirm: 'Confirma',
-  },
-  de: {
-    confirm: 'Bestätigen',
-  },
-  fr: {
-    confirm: 'Confirmer',
-  },
-  it: {
-    confirm: 'Conferma',
-  },
-  pt: {
-    confirm: 'Confirmar',
-  },
-  ru: {
-    confirm: 'Подтвердить',
-  },
-  tr: {
-    confirm: 'Onayla',
-  },
-  ja: {
-    confirm: '確認',
-  },
-  zh: {
-    confirm: '确认',
-  },
-  ar: {
-    confirm: 'تأكيد',
-  },
-  hi: {
-    confirm: 'पुष्टि करें',
-  },
-  bn: {
-    confirm: 'নিশ্চিত করুন',
-  },
-  id: {
-    confirm: 'Konfirmasi',
-  },
-};
+export const ALERT_DIALOG_MESSAGES: MessageCatalog<AlertDialogMessages> = defineMessages<AlertDialogMessages>('ALERT_DIALOG_MESSAGES', {
+  confirm: 'Confirm',
+});

package/src/app-shell/AppShellSplit.tsx

@@ -19,28 +19,13 @@ import { ScrollView, View } from 'react-native';
 
 import { AiChatResizeHandle } from '../ai-chat/AiChatResizeHandle';
 import { Z_INDEX } from '../styles/z-index';
+import { space } from '../styles/tokens';
 import { useTheme } from '../theme/use-theme';
+import { useMessages } from '../locale/messages';
+import { APP_SHELL_MESSAGES } from './messages';
 
-export interface AppShellSplitPanesProps {
-  list?: React.ReactNode;
-  detail?: React.ReactNode;
-  info?: React.ReactNode;
-  /** Which panes have room right now. */
-  showList: boolean;
-  showDetail: boolean;
-  showInfo: boolean;
-  /** The list pane's resting width; a drag moves it within min/max. */
-  listWidth: number;
-  listMinWidth: number;
-  listMaxWidth: number;
-  onListWidthChange?: (width: number) => void;
-  infoWidth: number;
-  resizable: boolean;
-  /** The shell wraps each pane in its own `ScrollView` unless the page owns one. */
-  paneScroll: boolean;
-  resizeLabel: string;
-  testID?: string;
-}
+import type { AppShellSplitPanesProps } from './types';
+import { APP_SHELL_DEFAULTS as D } from './constants';
 
 /** One pane: a bounded column that scrolls its own overflow. */
 function Pane({
@@ -68,23 +53,26 @@ function Pane({
 }
 
 const AppShellSplitPanesComponent: React.FC<AppShellSplitPanesProps> = ({
+  variant = 'joined',
   list,
   detail,
   info,
-  showList,
-  showDetail,
-  showInfo,
-  listWidth,
-  listMinWidth,
-  listMaxWidth,
+  showList = list != null,
+  showDetail = true,
+  showInfo = info != null,
+  listWidth = D.listWidth,
+  listMinWidth = D.listMinWidth,
+  listMaxWidth = D.listMaxWidth,
   onListWidthChange,
-  infoWidth,
-  resizable,
-  paneScroll,
-  resizeLabel,
+  infoWidth = D.infoWidth,
+  resizable = true,
+  paneScroll = true,
+  resizeLabel: resizeLabelProp,
   testID,
 }) => {
   const theme = useTheme();
+  const { messages } = useMessages(APP_SHELL_MESSAGES);
+  const resizeLabel = resizeLabelProp ?? messages.resizePanes;
   const [width, setWidth] = useState(listWidth);
   const widthAtDragStart = useRef(listWidth);
 
@@ -116,11 +104,13 @@ const AppShellSplitPanesComponent: React.FC<AppShellSplitPanesProps> = ({
    * hit test at the divider's centre returned the pane, and the drag never
    * started. Raising the DIVIDER lifts the whole context over both panes.
    */
+  const separated = variant === 'separated';
   const divider = {
-    width: 1,
+    width: separated ? space.md : 1,
+    flexShrink: 0,
     alignSelf: 'stretch' as const,
     zIndex: Z_INDEX.floating,
-    backgroundColor: theme.colors.border,
+    backgroundColor: separated ? 'transparent' : theme.colors.border,
   };
   // Only the panes that are actually drawn count: alone, a pane fills the row.
   const solo = [showList, showDetail, showInfo].filter(Boolean).length === 1;
@@ -137,15 +127,21 @@ const AppShellSplitPanesComponent: React.FC<AppShellSplitPanesProps> = ({
         </Pane>
       ) : null}
       {showList && !solo ? (
-        <View style={divider}>
+        <View style={divider} testID={testID ? `${testID}-list-gap` : undefined}>
           {resizable ? (
-            <AiChatResizeHandle
-              label={resizeLabel}
-              onResizeStart={onResizeStart}
-              onResize={onResize}
-              onNudge={onNudge}
-              testID={testID ? `${testID}-divider` : undefined}
-            />
+            <View
+              pointerEvents="box-none"
+              testID={testID ? `${testID}-resize-anchor` : undefined}
+              style={separated ? { position: 'absolute', top: 0, bottom: 0, left: '50%', right: '50%', width: 0 } : { flex: 1 }}
+            >
+              <AiChatResizeHandle
+                label={resizeLabel}
+                onResizeStart={onResizeStart}
+                onResize={onResize}
+                onNudge={onNudge}
+                testID={testID ? `${testID}-divider` : undefined}
+              />
+            </View>
           ) : null}
         </View>
       ) : null}
@@ -158,7 +154,7 @@ const AppShellSplitPanesComponent: React.FC<AppShellSplitPanesProps> = ({
           {detail}
         </Pane>
       ) : null}
-      {showInfo && !solo ? <View style={divider} /> : null}
+      {showInfo && showDetail && !solo ? <View style={divider} testID={testID ? `${testID}-info-gap` : undefined} /> : null}
       {showInfo ? (
         <Pane
           testID={testID ? `${testID}-pane-info` : undefined}

package/src/app-shell/index.ts

@@ -27,3 +27,6 @@ export type {
   NotificationBellProps,
   ProOfferCardProps,
 } from './types';
+
+export { AppShellSplitPanes } from './AppShellSplit';
+export type { AppShellSplitPanesProps } from './types';

package/src/app-shell/index.web.ts

@@ -32,3 +32,6 @@ export type {
   NotificationBellProps,
   ProOfferCardProps,
 } from './types';
+
+export { AppShellSplitPanes } from './AppShellSplit';
+export type { AppShellSplitPanesProps } from './types';

package/src/app-shell/messages.ts

@@ -1,4 +1,4 @@
-import type { MessageCatalog } from '../locale/messages';
+import { defineMessages, type MessageCatalog } from '../locale/messages';
 
 /**
  * Every fixed string the app-shell family announces, in each Bloom language.
@@ -18,110 +18,10 @@ export interface AppShellMessages {
   proOffer: string;
 }
 
-export const APP_SHELL_MESSAGES: MessageCatalog<AppShellMessages> = {
-  en: {
-    openNavigation: 'Open navigation',
-    closeNavigation: 'Close navigation',
-    resizePanes: 'Resize panes',
-    notifications: 'Notifications',
-    proOffer: 'Pro offer',
-  },
-  es: {
-    openNavigation: 'Abrir navegación',
-    closeNavigation: 'Cerrar navegación',
-    resizePanes: 'Cambiar el tamaño de los paneles',
-    notifications: 'Notificaciones',
-    proOffer: 'Oferta Pro',
-  },
-  ca: {
-    openNavigation: 'Obre la navegació',
-    closeNavigation: 'Tanca la navegació',
-    resizePanes: 'Canvia la mida dels panells',
-    notifications: 'Notificacions',
-    proOffer: 'Oferta Pro',
-  },
-  de: {
-    openNavigation: 'Navigation öffnen',
-    closeNavigation: 'Navigation schließen',
-    resizePanes: 'Bereichsgröße ändern',
-    notifications: 'Benachrichtigungen',
-    proOffer: 'Pro-Angebot',
-  },
-  fr: {
-    openNavigation: 'Ouvrir la navigation',
-    closeNavigation: 'Fermer la navigation',
-    resizePanes: 'Redimensionner les panneaux',
-    notifications: 'Notifications',
-    proOffer: 'Offre Pro',
-  },
-  it: {
-    openNavigation: 'Apri la navigazione',
-    closeNavigation: 'Chiudi la navigazione',
-    resizePanes: 'Ridimensiona i riquadri',
-    notifications: 'Notifiche',
-    proOffer: 'Offerta Pro',
-  },
-  pt: {
-    openNavigation: 'Abrir navegação',
-    closeNavigation: 'Fechar navegação',
-    resizePanes: 'Redimensionar painéis',
-    notifications: 'Notificações',
-    proOffer: 'Oferta Pro',
-  },
-  ru: {
-    openNavigation: 'Открыть навигацию',
-    closeNavigation: 'Закрыть навигацию',
-    resizePanes: 'Изменить размер панелей',
-    notifications: 'Уведомления',
-    proOffer: 'Предложение Pro',
-  },
-  tr: {
-    openNavigation: 'Gezinmeyi aç',
-    closeNavigation: 'Gezinmeyi kapat',
-    resizePanes: 'Bölmeleri yeniden boyutlandır',
-    notifications: 'Bildirimler',
-    proOffer: 'Pro teklifi',
-  },
-  ja: {
-    openNavigation: 'ナビゲーションを開く',
-    closeNavigation: 'ナビゲーションを閉じる',
-    resizePanes: 'ペインのサイズを変更',
-    notifications: '通知',
-    proOffer: 'Pro のご案内',
-  },
-  zh: {
-    openNavigation: '打开导航',
-    closeNavigation: '关闭导航',
-    resizePanes: '调整窗格大小',
-    notifications: '通知',
-    proOffer: 'Pro 优惠',
-  },
-  ar: {
-    openNavigation: 'فتح التنقل',
-    closeNavigation: 'إغلاق التنقل',
-    resizePanes: 'تغيير حجم الأجزاء',
-    notifications: 'الإشعارات',
-    proOffer: 'عرض Pro',
-  },
-  hi: {
-    openNavigation: 'नेविगेशन खोलें',
-    closeNavigation: 'नेविगेशन बंद करें',
-    resizePanes: 'पैन का आकार बदलें',
-    notifications: 'सूचनाएँ',
-    proOffer: 'Pro ऑफ़र',
-  },
-  bn: {
-    openNavigation: 'নেভিগেশন খুলুন',
-    closeNavigation: 'নেভিগেশন বন্ধ করুন',
-    resizePanes: 'প্যানের আকার বদলান',
-    notifications: 'বিজ্ঞপ্তি',
-    proOffer: 'Pro অফার',
-  },
-  id: {
-    openNavigation: 'Buka navigasi',
-    closeNavigation: 'Tutup navigasi',
-    resizePanes: 'Ubah ukuran panel',
-    notifications: 'Notifikasi',
-    proOffer: 'Penawaran Pro',
-  },
-};
+export const APP_SHELL_MESSAGES: MessageCatalog<AppShellMessages> = defineMessages<AppShellMessages>('APP_SHELL_MESSAGES', {
+  openNavigation: 'Open navigation',
+  closeNavigation: 'Close navigation',
+  resizePanes: 'Resize panes',
+  notifications: 'Notifications',
+  proOffer: 'Pro offer',
+});

package/src/app-shell/types.ts

@@ -375,3 +375,33 @@ export interface AppShellNavigationProps {
 export type AppShellProps = Omit<AppShellEngineProps, 'scroll'> & AppShellNavigationProps & {
   scroll?: AppShellScroll | 'auto' | 'external';
 };
+
+
+/** A bounded list/detail/info layout, independent of navigation or surfaces. */
+export interface AppShellSplitPanesProps {
+  /** Joined uses hairline dividers (default); separated leaves a 12px gutter for independent panel surfaces. */
+  variant?: 'joined' | 'separated';
+  list?: ReactNode;
+  detail?: ReactNode;
+  info?: ReactNode;
+  /** Defaults to whether list content was supplied. Hidden panes unmount. */
+  showList?: boolean;
+  /** Defaults to true. Keep true across breakpoints to retain routed detail state. */
+  showDetail?: boolean;
+  /** Defaults to whether info content was supplied. */
+  showInfo?: boolean;
+  /** Initial list width (360), constrained by listMinWidth/listMaxWidth (280/520). */
+  listWidth?: number;
+  listMinWidth?: number;
+  listMaxWidth?: number;
+  onListWidthChange?: (width: number) => void;
+  /** Info column width, defaults to 320. */
+  infoWidth?: number;
+  /** Show the shared draggable/keyboard divider, defaults to true. */
+  resizable?: boolean;
+  /** Wrap each pane in a ScrollView (default true); false for a navigator or virtual list. */
+  paneScroll?: boolean;
+  /** Accessible divider name, defaults to "Resize panes". */
+  resizeLabel?: string;
+  testID?: string;
+}