@shellui/core 0.2.0-beta.3 → 0.2.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shellui/core",
-  "version": "0.2.0-beta.3",
+  "version": "0.2.0-beta.4",
   "description": "ShellUI Core - Core React application runtime",
   "main": "src/index.ts",
   "type": "module",
@@ -36,29 +36,29 @@
   "author": "ShellUI",
   "license": "MIT",
   "dependencies": {
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@sentry/react": "^8.0.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.1.6",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@sentry/react": "^10.39.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "i18next": "^23.15.0",
-    "react-i18next": "^15.1.0",
-    "react-router": "^7.12.0",
-    "roarr": "^7.21.2",
+    "i18next": "^25.8.11",
+    "react-i18next": "^16.5.4",
+    "react-router": "^7.13.0",
+    "roarr": "^7.21.4",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0",
+    "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
-    "workbox-window": "^7.1.0",
-    "workbox-precaching": "^7.1.0",
-    "workbox-routing": "^7.1.0",
-    "workbox-strategies": "^7.1.0",
-    "workbox-cacheable-response": "^7.1.0",
-    "workbox-expiration": "^7.1.0",
-    "@shellui/sdk": "0.2.0-beta.3"
+    "workbox-cacheable-response": "^7.4.0",
+    "workbox-expiration": "^7.4.0",
+    "workbox-precaching": "^7.4.0",
+    "workbox-routing": "^7.4.0",
+    "workbox-strategies": "^7.4.0",
+    "workbox-window": "^7.4.0",
+    "@shellui/sdk": "0.2.0-beta.4"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -69,12 +69,12 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.19",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.0.0"
+    "typescript": "^5.9.3"
   },
   "scripts": {
     "test": "echo \"No tests specified for @shellui/core\""

package/src/components/ui/alert-dialog.tsx

@@ -142,6 +142,7 @@ const AlertDialogAction = forwardRef<
       variant={variant}
       size={size}
       className={className}
+      onPointerDown={(e) => e.currentTarget.click()}
       {...props}
     />
   </AlertDialogPrimitive.Action>
@@ -159,6 +160,7 @@ const AlertDialogCancel = forwardRef<
       variant={variant}
       size={size}
       className={className}
+      onPointerDown={(e) => e.currentTarget.click()}
       {...props}
     />
   </AlertDialogPrimitive.Cancel>

package/src/components/ui/dialog.tsx

@@ -75,7 +75,10 @@ const DialogContent = forwardRef<ElementRef<typeof DialogPrimitive.Content>, Dia
         >
           {children}
           {!hideCloseButton && (
-            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground cursor-pointer">
+            <DialogPrimitive.Close
+              onPointerDown={(e) => e.currentTarget.click()}
+              className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground cursor-pointer"
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="24"

package/src/components/ui/drawer.tsx

@@ -102,6 +102,7 @@ const DrawerContent = forwardRef<ComponentRef<typeof VaulDrawer.Content>, Drawer
           <VaulDrawer.Close
             className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground cursor-pointer"
             aria-label="Close"
+            onPointerDown={(e) => e.currentTarget.click()}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"

package/src/components/ui/sonner.tsx

@@ -1,13 +1,59 @@
-import type { ComponentProps } from 'react';
+import { useEffect, type ComponentProps } from 'react';
 import { useSettings } from '../../features/settings/hooks/useSettings';
 import { Toaster as Sonner } from 'sonner';
 import { Z_INDEX } from '../../lib/z-index';
 
 type ToasterProps = ComponentProps<typeof Sonner>;
 
+const TOAST_BUTTON_SELECTOR = '[data-close-button], [data-cancel], [data-action]';
+
+/**
+ * Ensures toast action, cancel, and close buttons respond to pointer/touch on iPad
+ * and Apple Pencil by triggering click on pointerdown when the browser doesn't
+ * fire a subsequent click (e.g. pen/touch).
+ */
+function useToastButtonPointerFix() {
+  useEffect(() => {
+    const onPointerDown: (e: Event) => void = (e) => {
+      const ev = e as PointerEvent;
+      const target = ev.target as HTMLElement;
+      const button = target.closest?.(TOAST_BUTTON_SELECTOR);
+      if (!button || button.getAttribute('data-disabled') === 'true') return;
+      // Only programmatically click for touch/pen to avoid double-firing on mouse
+      if (ev.pointerType === 'touch' || ev.pointerType === 'pen') {
+        (button as HTMLButtonElement).click();
+      }
+    };
+
+    function attach(toaster: Element) {
+      toaster.addEventListener('pointerdown', onPointerDown, true);
+      return () => toaster.removeEventListener('pointerdown', onPointerDown, true);
+    }
+
+    let toaster = document.querySelector('[data-sonner-toaster]');
+    if (!toaster) {
+      let cancelled = false;
+      let cleanup: (() => void) | undefined;
+      const id = requestAnimationFrame(() => {
+        if (cancelled) return;
+        toaster = document.querySelector('[data-sonner-toaster]');
+        if (toaster) cleanup = attach(toaster);
+      });
+      return () => {
+        cancelled = true;
+        cancelAnimationFrame(id);
+        cleanup?.();
+      };
+    }
+    return attach(toaster);
+  }, []);
+}
+
 const Toaster = ({ ...props }: ToasterProps) => {
   const { settings } = useSettings();
 
+  useToastButtonPointerFix();
+
   return (
     <Sonner
       position="top-center"
@@ -24,8 +70,11 @@ const Toaster = ({ ...props }: ToasterProps) => {
           toast:
             'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
           description: 'group-[.toast]:text-muted-foreground',
-          actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
-          cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+          actionButton:
+            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground [touch-action:manipulation]',
+          cancelButton:
+            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground [touch-action:manipulation]',
+          closeButton: '[touch-action:manipulation]',
         },
       }}
       {...props}