@tuturuuu/ui 0.14.0 → 0.16.0

package/src/components/ui/finance/invoices/subscription-invoice.tsx

@@ -37,6 +37,7 @@ import {
 } from './components/invoice-products-permission-warning';
 import { SubscriptionAttendanceSummary } from './components/subscription-attendance-summary';
 import { SubscriptionGroupSelector } from './components/subscription-group-selector';
+import { SubscriptionInvoiceProposal } from './components/subscription-invoice-proposal';
 import { SubscriptionPrepaidControls } from './components/subscription-prepaid-controls';
 import { CreatePromotionDialog } from './create-promotion-dialog';
 import type { AvailablePromotion } from './hooks';
@@ -71,23 +72,27 @@ import {
   getBillableAttendanceRecordsInRange,
   getBillableSessionsForGroupsInRange,
   getCoverageValidUntilMonthValue,
+  getCurrentBillingDate,
+  getCurrentMonthValue,
   getGroupsDateRange,
-  getLinkedFinanceCategorySelection,
   getMonthStartDate,
   getSubscriptionAttendanceDisplayData,
   isSubscriptionRangeFullyPaidForGroups,
   PREPAID_MONTH_OPTION_HORIZON,
+  resolveSubscriptionInvoiceCategoryId,
 } from './utils';
 
 interface Props {
   wsId: string;
-  prefillAmount?: number | null; // Total attendance days to prefill product quantities
+  prefillQuantity?: number | null;
+  suggestedTotal?: number | null;
   createMultipleInvoices: boolean;
   printAfterCreate?: boolean;
   downloadImageAfterCreate?: boolean;
   defaultWalletId?: string;
   defaultCategoryId?: string;
   defaultCurrency?: string;
+  workspaceTimezone?: string | null;
   canChangeFinanceWallets?: boolean;
   canSetFinanceWalletsOnCreate?: boolean;
   canReadInvoiceProducts?: boolean;
@@ -98,13 +103,15 @@ interface Props {
 
 export function SubscriptionInvoice({
   wsId,
-  prefillAmount,
+  prefillQuantity,
+  suggestedTotal,
   createMultipleInvoices,
   printAfterCreate = false,
   downloadImageAfterCreate = false,
   defaultWalletId,
   defaultCategoryId,
   defaultCurrency: rawDefaultCurrency = 'USD',
+  workspaceTimezone,
   canChangeFinanceWallets = true,
   canSetFinanceWalletsOnCreate = true,
   canReadInvoiceProducts = true,
@@ -133,7 +140,7 @@ export function SubscriptionInvoice({
     })
   );
   const [selectedMonth, setSelectedMonth] = useQueryState('month', {
-    defaultValue: formatMonthValue(new Date()),
+    defaultValue: getCurrentMonthValue(workspaceTimezone),
     shallow: true,
   });
   const [prepaidMonthCount, setPrepaidMonthCount] = useState(1);
@@ -144,6 +151,8 @@ export function SubscriptionInvoice({
     useState<SelectedProductItem[]>([]);
   const hasSelectedGroups = selectedGroupIds.length > 0;
   const hasSelectedProducts = subscriptionSelectedProducts.length > 0;
+  const shouldPreloadPaymentSettings =
+    hasSelectedProducts || Boolean(defaultWalletId || defaultCategoryId);
 
   const updateSearchParam = useCallback(
     (key: string, value: string) => {
@@ -197,10 +206,10 @@ export function SubscriptionInvoice({
     { enabled: hasSelectedProducts }
   );
   const { data: wallets = [] } = useWallets(wsId, {
-    enabled: hasSelectedProducts,
+    enabled: shouldPreloadPaymentSettings,
   });
   const { data: categories = [] } = useCategories(wsId, {
-    enabled: hasSelectedProducts,
+    enabled: shouldPreloadPaymentSettings,
   });
 
   // Blocked groups check
@@ -236,9 +245,7 @@ export function SubscriptionInvoice({
     ) : null;
 
   useEffect(() => {
-    if (defaultWalletId) {
-      setSelectedWalletId(defaultWalletId);
-    }
+    setSelectedWalletId(defaultWalletId || '');
   }, [defaultWalletId]);
 
   const [selectedPromotionId, setSelectedPromotionId] =
@@ -286,9 +293,10 @@ export function SubscriptionInvoice({
         [],
         locale,
         selectedMonth,
-        PREPAID_MONTH_OPTION_HORIZON
+        PREPAID_MONTH_OPTION_HORIZON,
+        { workspaceTimezone }
       ),
-    [locale, selectedGroupIds, selectedMonth, userGroups]
+    [locale, selectedGroupIds, selectedMonth, userGroups, workspaceTimezone]
   );
 
   const effectiveSelectedMonth = useMemo(() => {
@@ -309,7 +317,7 @@ export function SubscriptionInvoice({
       return selectedMonth;
     }
 
-    const now = new Date();
+    const now = getCurrentBillingDate(workspaceTimezone);
     let defaultMonth: Date;
 
     if (!latestEnd || (now >= earliestStart && now <= latestEnd)) {
@@ -321,7 +329,13 @@ export function SubscriptionInvoice({
     }
 
     return formatMonthValue(defaultMonth);
-  }, [availableMonthOptions, selectedGroupIds, selectedMonth, userGroups]);
+  }, [
+    availableMonthOptions,
+    selectedGroupIds,
+    selectedMonth,
+    userGroups,
+    workspaceTimezone,
+  ]);
 
   const {
     data: subscriptionInvoiceContext,
@@ -538,7 +552,7 @@ export function SubscriptionInvoice({
     enabled: true,
     selectedGroupIds,
     selectedMonth: effectiveSelectedMonth,
-    prefillAmount,
+    prefillAmount: prefillQuantity,
     groupProducts,
     products,
     userGroups,
@@ -547,6 +561,7 @@ export function SubscriptionInvoice({
     latestSubscriptionInvoices,
     onSelectedProductsChange: setSubscriptionSelectedProducts,
     prepaidMonthCount,
+    workspaceTimezone,
   });
 
   useSubscriptionInvoiceContent({
@@ -566,21 +581,18 @@ export function SubscriptionInvoice({
   });
 
   const subtotal = useInvoiceSubtotal(subscriptionSelectedProducts);
-  const linkedFinanceCategorySelection = useMemo(
-    () => getLinkedFinanceCategorySelection(subscriptionSelectedProducts),
-    [subscriptionSelectedProducts]
+  const resolvedSubscriptionCategoryId = useMemo(
+    () =>
+      resolveSubscriptionInvoiceCategoryId({
+        defaultCategoryId,
+        items: subscriptionSelectedProducts,
+      }),
+    [defaultCategoryId, subscriptionSelectedProducts]
   );
 
   useEffect(() => {
-    if (linkedFinanceCategorySelection.categoryId) {
-      setSelectedCategoryId(linkedFinanceCategorySelection.categoryId);
-      return;
-    }
-
-    if (linkedFinanceCategorySelection.hasMixedCategories) {
-      setSelectedCategoryId('');
-    }
-  }, [linkedFinanceCategorySelection]);
+    setSelectedCategoryId(resolvedSubscriptionCategoryId);
+  }, [resolvedSubscriptionCategoryId]);
 
   useBestPromotionSelection({
     enabled: true,
@@ -677,7 +689,8 @@ export function SubscriptionInvoice({
         latestSubscriptionInvoices,
         locale,
         effectiveSelectedMonth,
-        PREPAID_MONTH_OPTION_HORIZON
+        PREPAID_MONTH_OPTION_HORIZON,
+        { workspaceTimezone }
       ),
     [
       effectiveSelectedMonth,
@@ -685,6 +698,7 @@ export function SubscriptionInvoice({
       selectedGroupIds,
       latestSubscriptionInvoices,
       locale,
+      workspaceTimezone,
     ]
   );
 
@@ -732,7 +746,7 @@ export function SubscriptionInvoice({
       if (lastValidatedKeyRef.current === monthValidationKey) return;
       lastValidatedKeyRef.current = monthValidationKey;
 
-      const now = new Date();
+      const now = getCurrentBillingDate(workspaceTimezone);
       let defaultMonth: Date;
 
       if (now >= earliestStart && now <= latestEnd) defaultMonth = now;
@@ -754,6 +768,7 @@ export function SubscriptionInvoice({
     selectedMonth,
     updateSearchParam,
     userGroups,
+    workspaceTimezone,
   ]);
 
   const navigateMonth = (direction: 'prev' | 'next') => {
@@ -1020,6 +1035,16 @@ export function SubscriptionInvoice({
           <InvoiceBlockedState type="subscription" />
         ) : (
           <>
+            {suggestedTotal != null && (
+              <SubscriptionInvoiceProposal
+                billableQuantity={prefillQuantity}
+                currency={defaultCurrency}
+                currentTotal={subscriptionRoundedTotal}
+                hasSelectedProducts={hasSelectedProducts}
+                suggestedTotal={suggestedTotal}
+              />
+            )}
+
             {selectedGroupIds.length > 0 && effectiveSelectedMonth && (
               <SubscriptionAttendanceSummary
                 selectedGroupIds={selectedGroupIds}

package/src/components/ui/finance/invoices/utils.test.ts

@@ -6,11 +6,14 @@ import {
   getBillableQuantityMapForGroupsRange,
   getBillableSessionsForGroups,
   getCoverageMonths,
+  getCurrentMonthValue,
   getLinkedFinanceCategorySelection,
   getSubscriptionAttendanceDisplayData,
   getSubscriptionCoverageInvoiceForGroup,
   isSubscriptionMonthPaidForGroup,
   isSubscriptionRangeFullyPaidForGroups,
+  resolveBillingTimezone,
+  resolveSubscriptionInvoiceCategoryId,
   type UserGroup,
 } from './utils';
 
@@ -169,6 +172,19 @@ describe('subscription invoice coverage', () => {
     ).toBe(false);
   });
 
+  it('treats timestamp valid_until values as civil invoice months', () => {
+    const latestInvoices = [
+      { group_id: groupId, valid_until: '2026-07-01T00:00:00.000Z' },
+    ];
+
+    expect(
+      isSubscriptionMonthPaidForGroup(groupId, '2026-06', latestInvoices)
+    ).toBe(true);
+    expect(
+      isSubscriptionMonthPaidForGroup(groupId, '2026-07', latestInvoices)
+    ).toBe(false);
+  });
+
   it('treats null and invalid valid_until values as unpaid', () => {
     expect(
       isSubscriptionMonthPaidForGroup(groupId, '2026-05', [
@@ -265,6 +281,50 @@ describe('subscription invoice coverage', () => {
       })
     ).toEqual({ [groupId]: 2 });
   });
+
+  it('uses workspace timezone, not browser timezone, for current-month recommendations', () => {
+    const groups = [
+      {
+        workspace_user_groups: {
+          id: groupId,
+          name: 'Math 7',
+          sessions: ['2026-07-05'],
+          starting_date: '2026-07-01',
+          ending_date: null,
+        } as NonNullable<UserGroup['workspace_user_groups']>,
+      },
+    ] satisfies UserGroup[];
+    const now = new Date('2026-06-30T18:00:00.000Z');
+
+    expect(getCurrentMonthValue('UTC', now)).toBe('2026-06');
+    expect(getCurrentMonthValue('Asia/Ho_Chi_Minh', now)).toBe('2026-07');
+    expect(getCurrentMonthValue('America/Los_Angeles', now)).toBe('2026-06');
+    expect(resolveBillingTimezone('auto')).toBe('UTC');
+    expect(resolveBillingTimezone('Not/A_Timezone')).toBe('UTC');
+
+    expect(
+      getBillableQuantityMapForGroupsRange({
+        groupIds: [groupId],
+        now,
+        selectedMonth: '2026-07',
+        useAttendanceBased: true,
+        userAttendance: [],
+        userGroups: groups,
+        workspaceTimezone: 'Asia/Ho_Chi_Minh',
+      })
+    ).toEqual({ [groupId]: 0 });
+    expect(
+      getBillableQuantityMapForGroupsRange({
+        groupIds: [groupId],
+        now,
+        selectedMonth: '2026-07',
+        useAttendanceBased: true,
+        userAttendance: [],
+        userGroups: groups,
+        workspaceTimezone: 'America/Los_Angeles',
+      })
+    ).toEqual({ [groupId]: 1 });
+  });
 });
 
 describe('linked finance category selection', () => {
@@ -294,4 +354,28 @@ describe('linked finance category selection', () => {
       hasSingleCategory: false,
     });
   });
+
+  it('resolves subscription checkout category precedence', () => {
+    expect(
+      resolveSubscriptionInvoiceCategoryId({
+        defaultCategoryId: 'category-default',
+        items: [{ product: { finance_category_id: 'category-linked' } }],
+      })
+    ).toBe('category-linked');
+    expect(
+      resolveSubscriptionInvoiceCategoryId({
+        defaultCategoryId: 'category-default',
+        items: [
+          { product: { finance_category_id: 'category-a' } },
+          { product: { finance_category_id: 'category-b' } },
+        ],
+      })
+    ).toBe('');
+    expect(
+      resolveSubscriptionInvoiceCategoryId({
+        defaultCategoryId: 'category-default',
+        items: [{ product: { finance_category_id: null } }],
+      })
+    ).toBe('category-default');
+  });
 });

package/src/components/ui/finance/invoices/utils.ts

@@ -1,4 +1,30 @@
 import type { Database } from '@tuturuuu/types';
+import {
+  formatMonthLabel,
+  formatMonthValue,
+  getCoverageMonths,
+  getCurrentMonthStartDate,
+  getMonthStartDate,
+  parseLocalCalendarDate,
+} from './civil-month';
+
+export {
+  addMonthsToMonthValue,
+  formatCoverageRangeLabel,
+  formatMonthLabel,
+  formatMonthValue,
+  getCoverageEndMonthValue,
+  getCoverageMonths,
+  getCoverageValidUntilMonthValue,
+  getCurrentBillingDate,
+  getCurrentMonthStartDate,
+  getCurrentMonthValue,
+  getMonthStartDate,
+  MAX_PREPAID_MONTH_COUNT,
+  PREPAID_MONTH_OPTION_HORIZON,
+  parseLocalCalendarDate,
+  resolveBillingTimezone,
+} from './civil-month';
 
 type AttendanceRecord = {
   status: string;
@@ -67,134 +93,25 @@ export const getLinkedFinanceCategorySelection = (
   };
 };
 
-const MONTH_VALUE_PATTERN = /^(\d{4})-(\d{2})$/;
-const DATE_VALUE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/;
-export const MAX_PREPAID_MONTH_COUNT = 12;
-export const PREPAID_MONTH_OPTION_HORIZON = 12;
-
-export const parseLocalCalendarDate = (
-  value: string | Date | null | undefined
-): Date => {
-  if (!value) {
-    return new Date(Number.NaN);
-  }
-
-  if (value instanceof Date) {
-    return new Date(value.getTime());
-  }
-
-  const monthMatch = MONTH_VALUE_PATTERN.exec(value);
-  if (monthMatch) {
-    const [, year, month] = monthMatch;
-    return new Date(Number(year), Number(month) - 1, 1);
-  }
-
-  const dateMatch = DATE_VALUE_PATTERN.exec(value);
-  if (dateMatch) {
-    const [, year, month, day] = dateMatch;
-    return new Date(Number(year), Number(month) - 1, Number(day));
-  }
-
-  return new Date(value);
-};
-
-export const getMonthStartDate = (
-  value: string | Date | null | undefined
-): Date => {
-  const date = parseLocalCalendarDate(value);
-  if (Number.isNaN(date.getTime())) {
-    return date;
-  }
-
-  return new Date(date.getFullYear(), date.getMonth(), 1);
-};
-
-export const formatMonthValue = (date: Date): string =>
-  `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
-
-export const formatMonthLabel = (month: string, locale: string): string => {
-  const date = getMonthStartDate(month);
-  if (Number.isNaN(date.getTime())) {
-    return month;
-  }
-
-  return date.toLocaleDateString(locale, {
-    year: 'numeric',
-    month: 'long',
-  });
-};
-
-export const addMonthsToMonthValue = (
-  month: string,
-  monthOffset: number
-): string => {
-  const date = getMonthStartDate(month);
-  if (Number.isNaN(date.getTime())) return month;
-
-  date.setMonth(date.getMonth() + monthOffset);
-  return formatMonthValue(date);
-};
-
-export const normalizePrepaidMonthCount = (
-  value: number | null | undefined
-): number => {
-  if (!Number.isFinite(value) || !value) return 1;
-
-  return Math.min(MAX_PREPAID_MONTH_COUNT, Math.max(1, Math.trunc(value)));
-};
-
-export const getCoverageMonths = (
-  selectedMonth: string,
-  prepaidMonthCount = 1
-): string[] => {
-  const monthCount = normalizePrepaidMonthCount(prepaidMonthCount);
-  const startMonth = getMonthStartDate(selectedMonth);
-  if (Number.isNaN(startMonth.getTime())) return [];
-
-  return Array.from({ length: monthCount }, (_, index) => {
-    const date = new Date(startMonth);
-    date.setMonth(date.getMonth() + index);
-    return formatMonthValue(date);
-  });
-};
-
-export const getCoverageEndMonthValue = (
-  selectedMonth: string,
-  prepaidMonthCount = 1
-): string => {
-  const coverageMonths = getCoverageMonths(selectedMonth, prepaidMonthCount);
-  return coverageMonths[coverageMonths.length - 1] ?? selectedMonth;
-};
-
-export const getCoverageValidUntilMonthValue = (
-  selectedMonth: string,
-  prepaidMonthCount = 1
-): string => addMonthsToMonthValue(selectedMonth, prepaidMonthCount);
-
-export const formatCoverageRangeLabel = ({
-  locale,
-  prepaidMonthCount,
-  selectedMonth,
+export const resolveSubscriptionInvoiceCategoryId = ({
+  defaultCategoryId,
+  items,
 }: {
-  locale: string;
-  prepaidMonthCount?: number | null;
-  selectedMonth: string;
-}): string => {
-  const coverageMonths = getCoverageMonths(
-    selectedMonth,
-    prepaidMonthCount ?? 1
-  );
-  const firstMonth = coverageMonths[0];
-  const lastMonth = coverageMonths[coverageMonths.length - 1];
+  defaultCategoryId?: string | null;
+  items: FinanceCategoryLinkedItem[];
+}) => {
+  const linkedFinanceCategorySelection =
+    getLinkedFinanceCategorySelection(items);
+
+  if (linkedFinanceCategorySelection.hasSingleCategory) {
+    return linkedFinanceCategorySelection.categoryId ?? '';
+  }
 
-  if (!firstMonth || !lastMonth || firstMonth === lastMonth) {
-    return formatMonthLabel(selectedMonth, locale);
+  if (linkedFinanceCategorySelection.hasMixedCategories) {
+    return '';
   }
 
-  return `${formatMonthLabel(firstMonth, locale)} - ${formatMonthLabel(
-    lastMonth,
-    locale
-  )}`;
+  return defaultCategoryId ?? '';
 };
 
 const getComparableTimestamp = (value: string | null | undefined): number => {
@@ -532,7 +449,6 @@ export const getSessionsUntilMonth = (
   }
 };
 
-/** Date range (earliest start, latest end) for selected groups. */
 export type GroupsDateRange = {
   earliestStart: Date | null;
   latestEnd: Date | null;
@@ -583,17 +499,20 @@ export const getAvailableMonths = (
   latestInvoices: SubscriptionCoverageInvoice[],
   locale: string,
   selectedMonthFallback: string | null = null,
-  futureMonthHorizon = 0
+  futureMonthHorizon = 0,
+  options: {
+    now?: Date;
+    workspaceTimezone?: string | null;
+  } = {}
 ): AvailableMonthOption[] => {
   if (groupIds.length === 0) return [];
   const { earliestStart, latestEnd } = getGroupsDateRange(userGroups, groupIds);
   if (!earliestStart) return [];
 
-  const currentMonthStart = (() => {
-    const date = new Date();
-    date.setDate(1);
-    return date;
-  })();
+  const currentMonthStart = getCurrentMonthStartDate(
+    options.workspaceTimezone,
+    options.now
+  );
   const futureHorizonEnd = new Date(currentMonthStart);
   futureHorizonEnd.setMonth(
     futureHorizonEnd.getMonth() + Math.max(0, futureMonthHorizon)
@@ -648,6 +567,7 @@ export const getBillableQuantityForGroupRange = ({
   now = new Date(),
   prepaidMonthCount = 1,
   selectedMonth,
+  workspaceTimezone,
   useAttendanceBased,
   userAttendance,
   userGroups,
@@ -657,11 +577,12 @@ export const getBillableQuantityForGroupRange = ({
   now?: Date;
   prepaidMonthCount?: number;
   selectedMonth: string;
+  workspaceTimezone?: string | null;
   useAttendanceBased: boolean;
   userAttendance: AttendanceRecord[];
   userGroups: UserGroup[];
 }): number => {
-  const currentMonthStart = getMonthStartDate(now);
+  const currentMonthStart = getCurrentMonthStartDate(workspaceTimezone, now);
   const coverageMonths = getCoverageMonths(selectedMonth, prepaidMonthCount);
 
   return coverageMonths.reduce((total, month) => {
@@ -708,6 +629,7 @@ export const getBillableQuantityMapForGroupsRange = ({
   now,
   prepaidMonthCount = 1,
   selectedMonth,
+  workspaceTimezone,
   useAttendanceBased,
   userAttendance,
   userGroups,
@@ -717,6 +639,7 @@ export const getBillableQuantityMapForGroupsRange = ({
   now?: Date;
   prepaidMonthCount?: number;
   selectedMonth: string;
+  workspaceTimezone?: string | null;
   useAttendanceBased: boolean;
   userAttendance: AttendanceRecord[];
   userGroups: UserGroup[];
@@ -730,6 +653,7 @@ export const getBillableQuantityMapForGroupsRange = ({
         now,
         prepaidMonthCount,
         selectedMonth,
+        workspaceTimezone,
         useAttendanceBased,
         userAttendance,
         userGroups,
@@ -737,11 +661,9 @@ export const getBillableQuantityMapForGroupsRange = ({
     ])
   );
 
-/** Days before valid_until to consider "expiring soon" */
 const EXPIRING_SOON_DAYS = 14;
 
 export type GroupPaymentStatus = 'active' | 'expiringSoon' | 'expired';
-
 export function getGroupPaymentStatus(
   group: WorkspaceUserGroup | null,
   latestInvoice:

package/src/components/ui/resizable.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest';
+import { normalizeLegacyPanelSize } from './resizable';
+
+describe('normalizeLegacyPanelSize', () => {
+  it('preserves the shared wrapper numeric percentage contract', () => {
+    expect(normalizeLegacyPanelSize(38)).toBe('38%');
+    expect(normalizeLegacyPanelSize(0)).toBe('0%');
+  });
+
+  it('leaves explicitly unitized sizes unchanged', () => {
+    expect(normalizeLegacyPanelSize('20rem')).toBe('20rem');
+    expect(normalizeLegacyPanelSize('38%')).toBe('38%');
+    expect(normalizeLegacyPanelSize(undefined)).toBeUndefined();
+  });
+});

package/src/components/ui/resizable.tsx

@@ -16,6 +16,13 @@ interface ResizablePanelGroupProps
   onLayout?: (sizes: number[]) => void;
 }
 
+export function normalizeLegacyPanelSize(size: number | string | undefined) {
+  // react-resizable-panels v3 and the shadcn wrapper treated numeric values as
+  // percentages. v4 treats them as pixels, so preserve the shared wrapper's
+  // established contract while still allowing explicit CSS units.
+  return typeof size === 'number' ? `${size}%` : size;
+}
+
 function ResizablePanelGroup({
   className,
   direction,
@@ -26,11 +33,11 @@ function ResizablePanelGroup({
     <Group
       data-slot="resizable-panel-group"
       orientation={direction}
-      onLayoutChange={
+      onLayoutChanged={
         onLayout
           ? (layout) => {
-              // Convert Layout (Record<string, number>) to number[] for backward compatibility
-              // Layout values are already percentages (0-100)
+              // Layout values are flex percentages (0-100). Preserve the
+              // wrapper's array callback for existing consumers.
               const sizes = Object.values(layout);
               onLayout(sizes);
             }
@@ -45,8 +52,23 @@ function ResizablePanelGroup({
   );
 }
 
-function ResizablePanel({ ...props }: React.ComponentProps<typeof Panel>) {
-  return <Panel data-slot="resizable-panel" {...props} />;
+function ResizablePanel({
+  collapsedSize,
+  defaultSize,
+  maxSize,
+  minSize,
+  ...props
+}: React.ComponentProps<typeof Panel>) {
+  return (
+    <Panel
+      collapsedSize={normalizeLegacyPanelSize(collapsedSize)}
+      data-slot="resizable-panel"
+      defaultSize={normalizeLegacyPanelSize(defaultSize)}
+      maxSize={normalizeLegacyPanelSize(maxSize)}
+      minSize={normalizeLegacyPanelSize(minSize)}
+      {...props}
+    />
+  );
 }
 
 function ResizableHandle({
@@ -60,7 +82,7 @@ function ResizableHandle({
     <Separator
       data-slot="resizable-handle"
       className={cn(
-        'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+        'relative flex w-px cursor-col-resize items-center justify-center bg-border transition-colors after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2 hover:bg-primary/60 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:cursor-row-resize data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-3 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
         className
       )}
       {...props}