@scripso-homepad/ui 0.4.27 → 0.4.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.27",
+  "version": "0.4.29",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/web/components/ConfirmModal.tsx

@@ -57,7 +57,10 @@ export function ConfirmModal({
     return null;
   }
 
-  const sharedButtonClassName = cn('btn h-10 min-w-0 flex-1 justify-center!', buttonClassName);
+  const sharedButtonClassName = cn(
+    'btn h-10! w-full! min-w-0! justify-center!',
+    buttonClassName,
+  );
 
   return (
     <div
@@ -71,7 +74,7 @@ export function ConfirmModal({
         aria-labelledby="homepad-confirm-modal-title"
         aria-describedby="homepad-confirm-modal-description"
         className={cn(
-          'flex w-full max-w-md flex-col gap-8 rounded-2xl bg-white p-4 opacity-100 md:p-6',
+          'flex w-full max-w-md flex-col gap-8 rounded-3xl bg-white p-6 opacity-100 md:p-8',
           containerClassName,
         )}
         onClick={(event) => {
@@ -98,7 +101,7 @@ export function ConfirmModal({
           </div>
         </header>
 
-        <footer className="flex w-full gap-4">
+        <footer className="grid w-full grid-cols-2 gap-4">
           <Button
             title={cancelText}
             onPress={onCancel}

package/src/web/components/Drawer.tsx

@@ -71,10 +71,12 @@ export function Drawer({
 }: DrawerProps) {
   const [isPresent, setIsPresent] = useState(open);
   const [isAnimatedIn, setIsAnimatedIn] = useState(false);
+  const [isTransformSettled, setIsTransformSettled] = useState(open);
 
   useEffect(() => {
     if (open) {
       setIsPresent(true);
+      setIsTransformSettled(false);
 
       const frame = window.requestAnimationFrame(() => {
         window.requestAnimationFrame(() => {
@@ -82,18 +84,32 @@ export function Drawer({
         });
       });
 
+      const settleTimeout = window.setTimeout(() => {
+        setIsTransformSettled(true);
+      }, DRAWER_TRANSITION_MS);
+
       return () => {
         window.cancelAnimationFrame(frame);
+        window.clearTimeout(settleTimeout);
       };
     }
 
-    setIsAnimatedIn(false);
+    // Re-enable transform at the open position, then slide out.
+    setIsTransformSettled(false);
+    setIsAnimatedIn(true);
+
+    const frame = window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        setIsAnimatedIn(false);
+      });
+    });
 
     const timeout = window.setTimeout(() => {
       setIsPresent(false);
     }, DRAWER_TRANSITION_MS);
 
     return () => {
+      window.cancelAnimationFrame(frame);
       window.clearTimeout(timeout);
     };
   }, [open]);
@@ -144,8 +160,14 @@ export function Drawer({
         aria-labelledby="homepad-drawer-title"
         {...(subtitle ? { 'aria-describedby': 'homepad-drawer-subtitle' } : {})}
         className={cn(
-          'relative z-10 flex h-[calc(100dvh-16px)] min-h-0 flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out will-change-transform max-md:h-dvh max-md:rounded-none',
-          isAnimatedIn ? 'translate-x-0' : 'translate-x-full',
+          'relative z-10 flex h-[calc(100dvh-16px)] min-h-0 flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out max-md:h-dvh max-md:rounded-none',
+          // Keep GPU transform only while animating — settled translate-x-0 blurs text.
+          !isTransformSettled && 'will-change-transform',
+          isAnimatedIn
+            ? isTransformSettled
+              ? 'transform-none'
+              : 'translate-x-0'
+            : 'translate-x-full',
           widthClassName,
           className,
         )}

package/src/web/components/Modal.tsx

@@ -14,6 +14,8 @@ export type ModalProps = {
   subtitle?: string;
   icon?: ReactNode;
   iconContainerClassName?: string;
+  titleClassName?: string;
+  subtitleClassName?: string;
   children: ReactNode;
   cancelText: string;
   confirmText: string;
@@ -42,6 +44,8 @@ export function Modal({
   subtitle,
   icon,
   iconContainerClassName,
+  titleClassName,
+  subtitleClassName,
   children,
   cancelText,
   confirmText,
@@ -84,9 +88,8 @@ export function Modal({
   }
 
   const sharedButtonClassName = cn(
-    'btn h-13 w-full justify-center!',
-    footerLayout === 'split' && 'min-w-0',
-    footerLayout !== 'split' && buttonClassName,
+    'btn h-13 w-full! min-w-0! justify-center!',
+    buttonClassName,
   );
 
   const modal = (
@@ -132,14 +135,17 @@ export function Modal({
           <div className="flex min-w-0 flex-col gap-2">
             <h2
               id="homepad-modal-title"
-              className="typography-title-sm tracking-normal text-black"
+              className={cn('typography-title-sm tracking-normal text-black', titleClassName)}
             >
               {title}
             </h2>
             {subtitle ? (
               <p
                 id="homepad-modal-subtitle"
-                className="typography-caption tracking-normal text-storm-gray-400"
+                className={cn(
+                  'typography-caption tracking-normal text-storm-gray-400',
+                  subtitleClassName,
+                )}
               >
                 {subtitle}
               </p>

package/src/web/layout/AppHeader.tsx

@@ -25,6 +25,8 @@ export type AppHeaderProps = {
   notificationsIcon?: ReactNode;
   searchIcon?: ReactNode;
   buildingChevronIcon?: ReactNode;
+  /** Rendered before the building select (e.g. month period control). */
+  actions?: ReactNode;
   buildingSelectDisabled?: boolean;
   searchDisabled?: boolean;
   notificationsDisabled?: boolean;
@@ -60,6 +62,7 @@ export function AppHeader({
   notificationsIcon,
   searchIcon,
   buildingChevronIcon,
+  actions,
   buildingSelectDisabled = false,
   searchDisabled = false,
   notificationsDisabled = false,
@@ -77,6 +80,8 @@ export function AppHeader({
       <h1 className="truncate typography-title text-slate-blue">{title}</h1>
 
       <div className="flex shrink-0 items-center gap-3">
+        {actions}
+
         {hasBuildingSelect ? (
           <BuildingSelect
             options={buildingOptions}