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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shellui/core",
-  "version": "0.2.0-beta.3",
+  "version": "0.2.0-beta.5",
   "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.5"
   },
   "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,58 @@
-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) => {
+      const ev = e as PointerEvent;
+      // Only trigger programmatic click for touch/pen (iPad etc.); mouse gets native click.
+      if (ev.pointerType !== 'touch' && ev.pointerType !== 'pen') return;
+      // When a modal is open (e.g. Radix), body has pointer-events: none so the toaster
+      // may never receive the event on iPad. Use document capture + elementFromPoint so we
+      // still detect touches over the toaster and trigger the button.
+      const toaster = document.querySelector('[data-sonner-toaster]');
+      if (!toaster) return;
+      const elementUnderPoint = document.elementFromPoint(ev.clientX, ev.clientY);
+      if (!elementUnderPoint?.isConnected) return;
+      const button = (elementUnderPoint as HTMLElement).closest?.(TOAST_BUTTON_SELECTOR);
+      if (!button || !toaster.contains(button) || button.getAttribute('data-disabled') === 'true')
+        return;
+      ev.preventDefault();
+      ev.stopImmediatePropagation();
+      const clickEvent = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        view: ev.view ?? window,
+        detail: 1,
+        clientX: ev.clientX,
+        clientY: ev.clientY,
+        screenX: ev.screenX,
+        screenY: ev.screenY,
+      });
+      button.dispatchEvent(clickEvent);
+    };
+
+    document.addEventListener('pointerdown', onPointerDown, true);
+    return () => document.removeEventListener('pointerdown', onPointerDown, true);
+  }, []);
+}
+
 const Toaster = ({ ...props }: ToasterProps) => {
   const { settings } = useSettings();
 
+  useToastButtonPointerFix();
+
   return (
     <Sonner
       position="top-center"
@@ -24,8 +69,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}

package/src/index.css

@@ -235,6 +235,12 @@
     outline-color: hsl(var(--ring) / 0.5);
   }
 
+  /* Toaster must receive pointer events when a modal has body pointer-events: none (e.g. Radix).
+   * Without this, pointerdown never fires on iPad when a modal is open. */
+  [data-sonner-toaster] {
+    pointer-events: auto !important;
+  }
+
   /* Ensure Sonner toasts use theme variables - override Sonner defaults */
   [data-sonner-toast] {
     background-color: hsl(var(--background)) !important;