@invopop/popui 0.1.100 → 0.1.102

package/dist/sidebar/constants.d.ts

@@ -3,8 +3,9 @@ export declare const SIDEBAR_WIDTH_STORAGE_KEY = "sidebar_width";
 export declare const SIDEBAR_COOKIE_MAX_AGE: number;
 export declare const SIDEBAR_WIDTH = "16rem";
 export declare const SIDEBAR_WIDTH_MOBILE = "18rem";
-export declare const SIDEBAR_WIDTH_ICON = "3rem";
+export declare const SIDEBAR_WIDTH_ICON = "3.5rem";
+export declare const SIDEBAR_WIDTH_ICON_PX = 56;
 export declare const SIDEBAR_KEYBOARD_SHORTCUT = ".";
-export declare const SIDEBAR_MIN_WIDTH_PX = 240;
+export declare const SIDEBAR_MIN_WIDTH_PX = 180;
 export declare const SIDEBAR_MAX_WIDTH_PX = 384;
 export declare const SIDEBAR_DRAG_THRESHOLD_PX = 4;

package/dist/sidebar/constants.js

@@ -3,8 +3,9 @@ export const SIDEBAR_WIDTH_STORAGE_KEY = 'sidebar_width';
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 export const SIDEBAR_WIDTH = '16rem';
 export const SIDEBAR_WIDTH_MOBILE = '18rem';
-export const SIDEBAR_WIDTH_ICON = '3rem';
+export const SIDEBAR_WIDTH_ICON = '3.5rem';
+export const SIDEBAR_WIDTH_ICON_PX = 56;
 export const SIDEBAR_KEYBOARD_SHORTCUT = '.';
-export const SIDEBAR_MIN_WIDTH_PX = 240;
+export const SIDEBAR_MIN_WIDTH_PX = 180;
 export const SIDEBAR_MAX_WIDTH_PX = 384;
 export const SIDEBAR_DRAG_THRESHOLD_PX = 4;

package/dist/sidebar/sidebar-rail.svelte

@@ -4,7 +4,7 @@
   import ShortcutWrapper from '../ShortcutWrapper.svelte'
   import TooltipContent from '../tooltip/tooltip-content.svelte'
   import { cn, type WithElementRef } from '../utils.js'
-  import { SIDEBAR_DRAG_THRESHOLD_PX, SIDEBAR_MIN_WIDTH_PX } from './constants.js'
+  import { SIDEBAR_DRAG_THRESHOLD_PX, SIDEBAR_WIDTH_ICON_PX } from './constants.js'
   import { useSidebar } from './context.svelte.js'
 
   let {
@@ -20,8 +20,11 @@
   let dragStartWidthPx = 0
   let dragMoved = false
   let dragDirection: 1 | -1 = 1
+  let activePointerId: number | null = null
+  let resizeCommitted = false
 
   let isDragging = $state(false)
+  let isPointerDown = $state(false)
   let tooltipOpen = $state(false)
   let cursorX = $state(0)
   let cursorY = $state(0)
@@ -37,6 +40,30 @@
     }
   })
 
+  $effect(() => {
+    if ((isDragging || isPointerDown) && tooltipOpen) {
+      tooltipOpen = false
+    }
+  })
+
+  let globalDragStyleEl: HTMLStyleElement | null = null
+
+  function setGlobalDragStyles() {
+    if (globalDragStyleEl) return
+    globalDragStyleEl = document.createElement('style')
+    globalDragStyleEl.textContent =
+      '*, *::before, *::after { cursor: col-resize !important; user-select: none !important; }'
+    document.head.appendChild(globalDragStyleEl)
+  }
+
+  function clearGlobalDragStyles() {
+    globalDragStyleEl?.remove()
+    globalDragStyleEl = null
+  }
+
+  const POST_DRAG_CLICK_GUARD_MS = 250
+  let dragEndTime = 0
+
   function onPointerEnter(e: PointerEvent) {
     const sidebarRoot = (e.currentTarget as HTMLElement).closest('[data-slot="sidebar"]')
     dragDirection = sidebarRoot?.getAttribute('data-side') === 'right' ? -1 : 1
@@ -44,15 +71,35 @@
     cursorY = e.clientY
   }
 
-  const COLLAPSE_DRAG_OVERSHOOT_PX = 100
-  const POST_DRAG_CLICK_GUARD_MS = 250
-  let dragEndTime = 0
+  function onPointerMoveOnTrigger(e: PointerEvent) {
+    if (activePointerId !== null) return
+    cursorX = e.clientX
+    cursorY = e.clientY
+  }
+
+  function endDrag() {
+    if (activePointerId !== null) {
+      window.removeEventListener('pointermove', onWindowPointerMove)
+      window.removeEventListener('pointerup', onWindowPointerUp)
+      window.removeEventListener('pointercancel', onWindowPointerUp)
+      activePointerId = null
+    }
+    clearGlobalDragStyles()
+    isDragging = false
+    isPointerDown = false
+    sidebar.isResizing = false
+    resizeCommitted = false
+    if (dragMoved) {
+      dragEndTime = Date.now()
+      dragMoved = false
+    }
+  }
 
-  function onPointerMove(e: PointerEvent) {
+  function onWindowPointerMove(e: PointerEvent) {
+    if (e.pointerId !== activePointerId) return
     cursorX = e.clientX
     cursorY = e.clientY
-    const button = e.currentTarget as HTMLButtonElement
-    if (!button.hasPointerCapture(e.pointerId)) return
+    if (resizeCommitted) return
     const delta = (e.clientX - dragStartX) * dragDirection
     if (Math.abs(delta) > SIDEBAR_DRAG_THRESHOLD_PX) {
       dragMoved = true
@@ -63,26 +110,14 @@
     if (!dragMoved) return
     if (sidebar.state === 'collapsed') {
       if (delta > 0) {
-        button.releasePointerCapture(e.pointerId)
-        document.body.style.cursor = ''
-        document.body.style.userSelect = ''
-        isDragging = false
-        sidebar.isResizing = false
-        dragMoved = false
-        dragEndTime = Date.now()
+        resizeCommitted = true
         sidebar.setOpen(true)
       }
       return
     }
     const targetWidth = dragStartWidthPx + delta
-    if (targetWidth < SIDEBAR_MIN_WIDTH_PX - COLLAPSE_DRAG_OVERSHOOT_PX) {
-      button.releasePointerCapture(e.pointerId)
-      document.body.style.cursor = ''
-      document.body.style.userSelect = ''
-      isDragging = false
-      sidebar.isResizing = false
-      dragMoved = false
-      dragEndTime = Date.now()
+    if (targetWidth < SIDEBAR_WIDTH_ICON_PX) {
+      resizeCommitted = true
       sidebar.resetWidth()
       sidebar.setOpen(false)
       return
@@ -90,35 +125,32 @@
     sidebar.setWidth(targetWidth)
   }
 
+  function onWindowPointerUp(e: PointerEvent) {
+    if (e.pointerId !== activePointerId) return
+    endDrag()
+  }
+
   function onPointerDown(e: PointerEvent) {
     if (sidebar.isMobile) return
-    const button = e.currentTarget as HTMLButtonElement
-    const sidebarRoot = button.closest('[data-slot="sidebar"]')
+    if (e.button !== 0) return
+    const target = e.currentTarget as HTMLElement
+    const sidebarRoot = target.closest('[data-slot="sidebar"]')
     dragDirection = sidebarRoot?.getAttribute('data-side') === 'right' ? -1 : 1
 
     const container = sidebarRoot?.querySelector('[data-slot="sidebar-container"]')
     dragStartWidthPx = container instanceof HTMLElement ? container.offsetWidth : 256
     dragStartX = e.clientX
     dragMoved = false
-    button.setPointerCapture(e.pointerId)
-    document.body.style.cursor = 'col-resize'
-    document.body.style.userSelect = 'none'
+    activePointerId = e.pointerId
+    isPointerDown = true
+    tooltipOpen = false
+    setGlobalDragStyles()
+    window.addEventListener('pointermove', onWindowPointerMove)
+    window.addEventListener('pointerup', onWindowPointerUp)
+    window.addEventListener('pointercancel', onWindowPointerUp)
   }
 
-  function onPointerUp(e: PointerEvent) {
-    const button = e.currentTarget as HTMLButtonElement
-    if (button.hasPointerCapture(e.pointerId)) button.releasePointerCapture(e.pointerId)
-    document.body.style.cursor = ''
-    document.body.style.userSelect = ''
-    isDragging = false
-    sidebar.isResizing = false
-    if (dragMoved) {
-      dragEndTime = Date.now()
-      dragMoved = false
-    }
-  }
-
-  const DOUBLE_CLICK_DELAY_MS = 300
+  const DOUBLE_CLICK_DELAY_MS = 150
   let pendingClickTimer: ReturnType<typeof setTimeout> | undefined
 
   function onClick(e: MouseEvent) {
@@ -148,7 +180,7 @@
   delayDuration={TOOLTIP_HOVER_DELAY_MS}
   disableHoverableContent
 >
-  <TooltipPrimitive.Trigger disabled={isDragging}>
+  <TooltipPrimitive.Trigger>
     {#snippet child({ props })}
       {@const buttonProps = props as HTMLButtonAttributes}
       <button
@@ -160,17 +192,12 @@
         }}
         onpointermove={(e) => {
           buttonProps.onpointermove?.(e)
-          onPointerMove(e)
+          onPointerMoveOnTrigger(e)
         }}
         onpointerdown={(e) => {
           buttonProps.onpointerdown?.(e)
           onPointerDown(e)
         }}
-        onpointerup={(e) => {
-          buttonProps.onpointerup?.(e)
-          onPointerUp(e)
-        }}
-        onpointercancel={onPointerUp}
         onclick={(e) => {
           buttonProps.onclick?.(e)
           onClick(e)
@@ -203,19 +230,24 @@
     side="bottom"
     align="center"
     sideOffset={TOOLTIP_CURSOR_OFFSET}
-    class="px-3 py-2"
   >
-    <div class="flex flex-col gap-1.5">
+    <div class="flex flex-col gap-1">
       {#if sidebar.state === 'expanded'}
-        <div>Drag to resize</div>
+        <div class="flex w-full items-center justify-between gap-3">
+          <span>Drag to resize</span>
+          <div class="flex items-center gap-0.5 opacity-0">
+            <ShortcutWrapper size="sm" theme="navigation">⌘</ShortcutWrapper>
+            <ShortcutWrapper size="sm" theme="navigation">.</ShortcutWrapper>
+          </div>
+        </div>
       {/if}
-      <div class="flex items-center justify-between gap-3">
+      <div class="flex w-full items-center justify-between gap-3">
         <span>
           {sidebar.state === 'expanded' ? 'Click to collapse' : 'Click to expand'}
         </span>
-        <div class="flex items-center gap-1">
-          <ShortcutWrapper size="md" theme="navigation">⌘</ShortcutWrapper>
-          <ShortcutWrapper size="md" theme="navigation">.</ShortcutWrapper>
+        <div class="flex items-center gap-0.5">
+          <ShortcutWrapper size="sm" theme="navigation">⌘</ShortcutWrapper>
+          <ShortcutWrapper size="sm" theme="navigation">.</ShortcutWrapper>
         </div>
       </div>
     </div>

package/dist/sidebar/sidebar.svelte

@@ -73,7 +73,7 @@
     <div
       data-slot="sidebar-gap"
       class={cn(
-        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear group-data-[resizing=true]:transition-none',
+        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-150 ease-linear group-data-[resizing=true]:transition-none',
         'group-data-[collapsible=offcanvas]:w-0',
         'group-data-[side=right]:rotate-180',
         variant === 'floating' || variant === 'inset'
@@ -84,7 +84,7 @@
     <div
       data-slot="sidebar-container"
       class={cn(
-        'fixed inset-y-0 z-50 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear group-data-[resizing=true]:transition-none md:flex',
+        'fixed inset-y-0 z-50 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-150 ease-linear group-data-[resizing=true]:transition-none md:flex',
         side === 'left'
           ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
           : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',

package/dist/tooltip/tooltip-content.svelte

@@ -24,7 +24,7 @@
     {side}
     {...rest}
     class={cn(
-      'bg-background-default-negative border border-border-inverse z-[1002] rounded-md px-2 py-1 text-sm font-medium text-foreground-inverse leading-5 tracking-tight shadow-md',
+      'bg-background-default-negative border border-border-inverse z-1002 rounded-md px-2 py-1 text-base font-medium text-foreground-inverse shadow-md',
       className
     )}
   >
@@ -34,11 +34,11 @@
         {#snippet child({ props })}
           <div
             class={cn(
-              'bg-background-default-negative z-[1002] size-2.5 rotate-45 rounded-[2px]',
-              'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
-              'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
-              'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',
-              'data-[side=left]:-translate-y-[calc(50%_-_3px)]',
+              'bg-background-default-negative z-1002 size-2.5 rotate-45 rounded-xs',
+              'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]',
+              'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]',
+              'data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2',
+              'data-[side=left]:-translate-y-[calc(50%-3px)]',
               arrowClasses
             )}
             {...props}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.100",
+  "version": "0.1.102",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },