@puredesktop/puredesktop-ui-bridge 2.1.7 → 2.1.9

package/src/components/common/documents/index.ts

@@ -0,0 +1,8 @@
+export {
+  DocumentHeaderActions,
+  type DocumentHeaderActionsProps,
+} from './DocumentHeaderActions.js'
+export {
+  DocumentSwitcher,
+  type DocumentSwitcherProps,
+} from './DocumentSwitcher.js'

package/src/components/common/dropdown/MenuDropdownItem.tsx

@@ -83,12 +83,24 @@ export function MenuDropdownItem({
       $hasIcon={Boolean(item.icon)}
       $tone={item.tone}
       onPointerDown={event => {
-        if (event.pointerType === 'mouse' || event.pointerType === 'touch') {
+        // Select on pointerdown for pointing devices (fires before the menu
+        // closes) and preventDefault so the item doesn't steal focus.
+        if (
+          event.pointerType === 'mouse' ||
+          event.pointerType === 'touch' ||
+          event.pointerType === 'pen'
+        ) {
           event.preventDefault()
           selectItem()
         }
       }}
-      onClick={selectItem}
+      onClick={event => {
+        // A pointer interaction already selected on pointerdown above; the
+        // browser still fires a follow-up click, which would run the action a
+        // SECOND time (e.g. inserting two equations). Only handle genuine
+        // keyboard activation here — Enter/Space produce a click with detail 0.
+        if (event.detail === 0) selectItem()
+      }}
     >
       {item.icon ? (
         <span className="menu-item-icon" aria-hidden="true">

package/src/components/common/dropdown/MenuPortal.tsx

@@ -137,9 +137,11 @@ export function MenuPortal({
 
   const surfaceStyle: CSSProperties = layout
     ? {
-        top: layout.top,
         left: layout.left,
         maxHeight: layout.maxHeight,
+        // Above-opening menus are pinned by `bottom` so they grow upward.
+        ...(layout.top !== undefined ? { top: layout.top } : {}),
+        ...(layout.bottom !== undefined ? { bottom: layout.bottom } : {}),
         ...(layout.width !== undefined ? { width: layout.width } : {}),
         ...style,
       }

package/src/components/common/dropdown/menuViewportPosition.test.ts

@@ -71,7 +71,8 @@ describe('resolveMenuViewportLayout', () => {
     expect(layout.width).toBeGreaterThanOrEqual(120)
   })
 
-  it('opens above the anchor when there is more space above', () => {
+  it('bottom-anchors a below-start menu that flips above at the viewport bottom', () => {
+    const viewportHeight = 760
     const layout = resolveMenuViewportLayout({
       anchorRect: {
         top: 720,
@@ -83,16 +84,23 @@ describe('resolveMenuViewportLayout', () => {
       preferredTop: 752,
       preferredLeft: 120,
       placement: 'below-start',
+      // Menu measured collapsed (pre-expansion) — must not drive the height.
       menuWidth: 200,
-      menuHeight: 220,
+      menuHeight: 8,
       viewportWidth: 1000,
-      viewportHeight: 760,
+      viewportHeight,
     })
 
-    expect(layout.top).toBeLessThan(720)
+    // Pinned by bottom (grows upward), not top; its bottom edge sits above the
+    // anchor and it gets the real space above (not the ~0 measured height).
+    expect(layout.top).toBeUndefined()
+    expect(layout.bottom).toBeGreaterThan(0)
+    expect(viewportHeight - (layout.bottom ?? 0)).toBeLessThanOrEqual(720)
+    expect(layout.maxHeight).toBeGreaterThan(100)
   })
 
-  it('opens above-start menus upward from the anchor', () => {
+  it('bottom-anchors above-start menus so they grow upward from the anchor', () => {
+    const viewportHeight = 760
     const layout = resolveMenuViewportLayout({
       anchorRect: {
         top: 720,
@@ -105,13 +113,14 @@ describe('resolveMenuViewportLayout', () => {
       preferredLeft: 120,
       placement: 'above-start',
       menuWidth: 200,
-      menuHeight: 180,
+      menuHeight: 8,
       viewportWidth: 1000,
-      viewportHeight: 760,
+      viewportHeight,
     })
 
-    expect(layout.top).toBeLessThan(720)
-    expect(layout.top + layout.maxHeight).toBeLessThanOrEqual(720)
+    expect(layout.top).toBeUndefined()
+    expect(viewportHeight - (layout.bottom ?? 0)).toBeLessThanOrEqual(720)
+    expect(layout.maxHeight).toBeGreaterThan(100)
   })
 
   it('limits menu height to the remaining viewport space', () => {
@@ -134,6 +143,7 @@ describe('resolveMenuViewportLayout', () => {
     })
 
     expect(layout.maxHeight).toBeLessThanOrEqual(280)
-    expect(layout.top + layout.maxHeight).toBeLessThanOrEqual(300)
+    expect(layout.top).toBeDefined()
+    expect((layout.top ?? 0) + layout.maxHeight).toBeLessThanOrEqual(300)
   })
 })

package/src/components/common/dropdown/menuViewportPosition.ts

@@ -10,7 +10,14 @@ export const MENU_DEFAULT_MAX_HEIGHT_PX = 320
 export type MenuWidthMode = 'intrinsic' | 'anchor'
 
 export interface ResolvedMenuLayout {
-  top: number
+  /**
+   * Exactly one of `top`/`bottom` is set. Above-opening menus pin by `bottom`
+   * so they grow upward — deriving `top`/height from the menu's own measurement
+   * is circular (it's measured collapsed, before the open transition expands
+   * it, which clipped bottom-anchored menus to ~0px).
+   */
+  top?: number
+  bottom?: number
   left: number
   maxHeight: number
   /** Set only for `anchor` width mode. */
@@ -78,45 +85,46 @@ export function resolveMenuViewportLayout({
     Math.max(margin, viewportWidth - layoutWidth - margin),
   )
 
-  let top = preferredTop
+  const spaceAbove = Math.max(0, anchorRect.top - gap - margin)
 
+  let opensAbove: boolean
   if (placement === 'above-start') {
-    top = anchorRect.top - gap - menuHeight
-    const spaceAbove = Math.max(0, anchorRect.top - gap - margin)
     const spaceBelow = Math.max(
       0,
       viewportHeight - anchorRect.bottom - gap - margin,
     )
-    if (menuHeight > spaceAbove && spaceBelow > spaceAbove) {
-      top = anchorRect.bottom + gap
-    }
-  } else if (
-    placement === 'below-start' ||
-    placement === 'below-menubar-start' ||
-    placement === 'at-point'
-  ) {
+    // Prefer above; flip below only if it can't fit above but fits better below.
+    opensAbove = !(menuHeight > spaceAbove && spaceBelow > spaceAbove)
+  } else {
+    // below-start / below-menubar-start / at-point: prefer below, flip above
+    // when there's no room below but more above.
     const opensBelow = preferredTop >= anchorRect.bottom - 0.5
-    if (opensBelow) {
-      const spaceBelow = Math.max(0, viewportHeight - preferredTop - margin)
-      const spaceAbove = Math.max(0, anchorRect.top - gap - margin)
-      if (menuHeight > spaceBelow && spaceAbove > spaceBelow) {
-        top = anchorRect.top - gap - menuHeight
-      }
-    }
+    const spaceBelow = Math.max(0, viewportHeight - preferredTop - margin)
+    opensAbove =
+      opensBelow && menuHeight > spaceBelow && spaceAbove > spaceBelow
   }
 
-  top = clamp(top, margin, Math.max(margin, viewportHeight - margin))
-
-  const opensAboveAnchor = top < anchorRect.top
-  const availableHeight = opensAboveAnchor
-    ? Math.max(0, anchorRect.top - gap - top)
-    : Math.max(0, viewportHeight - top - margin)
-  const resolvedMaxHeight = Math.min(maxHeight, availableHeight)
+  if (opensAbove) {
+    // Pin the panel's bottom just above the anchor so it grows UPWARD; its
+    // pre-expansion measured height can't misplace or clip it.
+    const bottom = Math.max(margin, viewportHeight - (anchorRect.top - gap))
+    return {
+      bottom,
+      left,
+      maxHeight: Math.min(maxHeight, spaceAbove),
+      ...(widthMode === 'anchor' ? { width: layoutWidth } : {}),
+    }
+  }
 
+  const top = clamp(
+    placement === 'above-start' ? anchorRect.bottom + gap : preferredTop,
+    margin,
+    Math.max(margin, viewportHeight - margin),
+  )
   return {
     top,
     left,
-    maxHeight: resolvedMaxHeight,
+    maxHeight: Math.min(maxHeight, Math.max(0, viewportHeight - top - margin)),
     ...(widthMode === 'anchor' ? { width: layoutWidth } : {}),
   }
 }

package/src/components/common/overlays/Modal.tsx

@@ -15,7 +15,7 @@ import { zi } from '../../../theme/themeVars.js'
 import { PlatformIcon } from '../../chrome/PlatformIcon.js'
 import { ModalChromeHeader } from './ModalChromeHeader.js'
 
-export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
+export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
 
 export interface ModalProps {
   open: boolean
@@ -42,6 +42,7 @@ const FOCUSABLE_SELECTOR = [
 ].join(',')
 
 const sizeWidths = {
+  xs: 'min(420px, calc(100vw - var(--platform-spacing-xl)))',
   sm: '42dvw',
   md: '50dvw',
   lg: '68dvw',
@@ -122,6 +123,9 @@ const StyledDialog = styled.div<{ $size: ModalSize; $chrome: boolean }>`
   }};
   min-height: ${({ $size, $chrome }) => {
     if ($size === 'fullscreen') return '100%'
+    // Compact dialogs (confirmations, single-field prompts) hug their content —
+    // no forced aspect-ratio min-height that leaves a tall, empty box.
+    if ($size === 'xs') return 'auto'
     if ($chrome && $size === 'xl') {
       return 'min(460px, calc(100vh - var(--platform-spacing-xl)))'
     }
@@ -314,7 +318,14 @@ export function Modal({
             title={title}
             titleId={titleId}
             onClose={onClose}
-            onMaximize={() => setMaximized(current => !current)}
+            // A modal that opens fullscreen has nothing to maximize — hide the
+            // no-op toggle. (Gate on the requested size, not the computed one,
+            // so a modal maximized via this button keeps its Restore control.)
+            onMaximize={
+              size === 'fullscreen'
+                ? undefined
+                : () => setMaximized(current => !current)
+            }
             maximized={maximized}
             trailing={chromeTrailing}
           />