@puredesktop/puredesktop-ui-bridge 2.1.8 → 2.1.9

package/src/components/common/documents/DocumentSwitcher.tsx

@@ -613,7 +613,7 @@ const Scrim = styled.div`
 
 const SheetHolder = styled.div`
   position: absolute;
-  inset: 28px;
+  inset: 24px;
   display: flex;
 `
 
@@ -626,7 +626,7 @@ const Sheet = styled.div<{ $variant: 'modal' | 'landing' }>`
   overflow: hidden;
   color: ${ink};
   background: ${elevated};
-  border-radius: ${({ $variant }) => ($variant === 'modal' ? '10px' : '0')};
+  border-radius: ${({ $variant }) => ($variant === 'modal' ? '6px' : '0')};
   box-shadow: ${({ $variant }) =>
     $variant === 'modal' ? '0 24px 80px rgba(14, 14, 17, 0.4)' : 'none'};
   font-family: ${sansStack};
@@ -635,7 +635,7 @@ const Sheet = styled.div<{ $variant: 'modal' | 'landing' }>`
 const Rail = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 30px 22px;
+  padding: 24px 18px;
   background: ${surface};
   border-right: 1px solid ${line};
 `
@@ -670,14 +670,16 @@ const RailItem = styled.button<{ $active?: boolean }>`
   gap: 11px;
   width: 100%;
   margin-bottom: 2px;
-  padding: 10px 12px;
+  padding: 8px 10px;
   border: 0;
   border-left: 3px solid
     ${({ $active }) => ($active ? 'var(--app-acc, #1f9d57)' : 'transparent')};
-  border-radius: 7px;
+  border-radius: ${({ $active }) => ($active ? '0 4px 4px 0' : '4px')};
   background: ${({ $active }) =>
-    $active ? 'var(--app-bg, #eef7f1)' : 'transparent'};
-  color: ${({ $active }) => ($active ? 'var(--app-text, #15703f)' : '#4a4a50')};
+    $active
+      ? 'color-mix(in srgb, var(--app-bg, #eef7f1) 42%, transparent)'
+      : 'transparent'};
+  color: ${({ $active }) => ($active ? ink : '#4a4a50')};
   font: inherit;
   font-size: 14px;
   font-weight: ${({ $active }) => ($active ? 600 : 400)};
@@ -686,7 +688,9 @@ const RailItem = styled.button<{ $active?: boolean }>`
 
   &:hover {
     background: ${({ $active }) =>
-      $active ? 'var(--app-bg, #eef7f1)' : 'rgba(20, 18, 22, 0.05)'};
+      $active
+        ? 'color-mix(in srgb, var(--app-bg, #eef7f1) 42%, transparent)'
+        : 'rgba(20, 18, 22, 0.05)'};
   }
 `
 
@@ -732,7 +736,7 @@ const MainHead = styled.div`
   align-items: flex-start;
   justify-content: space-between;
   gap: 24px;
-  padding: 28px 40px 20px;
+  padding: 24px 32px 18px;
   border-bottom: 1px solid ${line};
 `
 
@@ -773,17 +777,17 @@ const FilterWrap = styled.div`
 
 const FilterInput = styled.input`
   width: 260px;
-  padding: 11px 14px 11px 38px;
+  padding: 9px 12px 9px 38px;
   border: 1px solid ${line};
-  border-radius: 8px;
-  background: ${surface};
+  border-radius: 4px;
+  background: ${elevated};
   color: ${ink};
   font: inherit;
   font-size: 14px;
   outline: none;
 
   &:focus {
-    border-color: var(--app-acc, #1f9d57);
+    border-color: ${ink};
   }
 `
 
@@ -791,10 +795,10 @@ const CloseButton = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 38px;
-  height: 38px;
+  width: 34px;
+  height: 34px;
   border: 1px solid ${line};
-  border-radius: 8px;
+  border-radius: 4px;
   background: ${elevated};
   color: #6a6a70;
   cursor: pointer;
@@ -808,25 +812,25 @@ const Body = styled.div`
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: 26px 40px 40px;
+  padding: 22px 32px 32px;
 `
 
 const CardRow = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
-  gap: 16px;
-  margin-bottom: 34px;
+  gap: 12px;
+  margin-bottom: 28px;
 `
 
 const cardBase = `
-  min-height: 190px;
-  border-radius: 10px;
+  min-height: 172px;
+  border-radius: 6px;
   cursor: pointer;
-  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
+  transition: box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
 
   &:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 12px 30px rgba(14, 14, 17, 0.16);
+    border-color: color-mix(in srgb, ${ink} 24%, ${line});
+    box-shadow: 0 8px 18px rgba(14, 14, 17, 0.1);
   }
 `
 
@@ -836,9 +840,9 @@ const NewCard = styled.button`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 12px;
-  border: 1.5px dashed var(--app-acc, #1f9d57);
-  background: var(--app-bg, #eef7f1);
+  gap: 10px;
+  border: 1px solid ${line};
+  background: ${elevated};
   font: inherit;
 `
 
@@ -846,24 +850,23 @@ const NewIcon = styled.span`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 46px;
-  height: 46px;
-  border-radius: 11px;
-  background: var(--app-block, #235240);
-  color: #fff;
+  width: 30px;
+  height: 30px;
+  border-radius: 4px;
+  background: ${elevated};
+  color: var(--app-acc, #1f9d57);
 `
 
 const NewLabel = styled.span`
   font-size: 15px;
   font-weight: 600;
-  color: var(--app-text, #15703f);
+  color: ${ink};
 `
 
 const NewHint = styled.span`
   font-family: ${monoStack};
   font-size: 10.5px;
-  color: var(--app-text, #15703f);
-  opacity: 0.7;
+  color: ${faint};
 `
 
 const PreviewCard = styled.button`
@@ -891,7 +894,7 @@ const PreviewMeta = styled.div`
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 13px 15px;
+  padding: 11px 13px;
 `
 
 const PreviewName = styled.div<{ $serif?: boolean }>`
@@ -946,7 +949,7 @@ const SortButton = styled.button<{ $active?: boolean }>`
 const ListBox = styled.div`
   overflow: hidden;
   border: 1px solid ${line};
-  border-radius: 10px;
+  border-radius: 6px;
 `
 
 const Row = styled.button<{ $selected?: boolean }>`
@@ -955,11 +958,10 @@ const Row = styled.button<{ $selected?: boolean }>`
   align-items: center;
   gap: 14px;
   width: 100%;
-  padding: 13px 18px;
+  padding: 11px 14px;
   border: 0;
   border-bottom: 1px solid ${line};
-  background: ${({ $selected }) =>
-    $selected ? 'var(--app-bg, #eef7f1)' : 'transparent'};
+  background: ${({ $selected }) => ($selected ? surface : 'transparent')};
   font: inherit;
   text-align: left;
   cursor: pointer;
@@ -975,9 +977,9 @@ const RowIcon = styled.span`
   justify-content: center;
   width: 34px;
   height: 34px;
-  border-radius: 8px;
-  background: var(--app-bg, #eef7f1);
-  color: var(--app-acc, #1f9d57);
+  border-radius: 4px;
+  background: ${surface};
+  color: ${faint};
 `
 
 const RowMain = styled.div`
@@ -1008,19 +1010,22 @@ const RowWhen = styled.div`
 
 const RowBadge = styled.span<{ $draft?: boolean }>`
   justify-self: end;
-  padding: 3px 9px;
-  border-radius: 999px;
+  padding: 2px 8px;
+  border: 1px solid ${line};
+  border-radius: 4px;
   font-family: ${monoStack};
   font-size: 10px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: ${({ $draft }) => ($draft ? '#8a5a12' : '#6a6a70')};
-  background: ${({ $draft }) => ($draft ? '#f6ecd6' : 'rgba(20,18,22,0.05)')};
+  color: ${faint};
+  background: ${elevated};
 `
 
 const EmptyNote = styled.p`
-  margin: 0;
-  padding: 34px 20px;
+  margin: 8px;
+  padding: 24px 18px;
+  border: 1px solid ${line};
+  border-radius: 4px;
   text-align: center;
   color: ${faint};
   font-size: 13.5px;
@@ -1030,7 +1035,7 @@ const FooterBar = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 40px;
+  padding: 14px 32px;
   border-top: 1px solid ${line};
   background: ${surface};
 `
@@ -1047,9 +1052,9 @@ const FooterActions = styled.div`
 `
 
 const SecondaryButton = styled.button`
-  padding: 9px 16px;
+  padding: 8px 14px;
   border: 1px solid ${line};
-  border-radius: 8px;
+  border-radius: 4px;
   background: ${elevated};
   color: #4a4a50;
   font: inherit;
@@ -1063,9 +1068,9 @@ const SecondaryButton = styled.button`
 `
 
 const PrimaryButton = styled.button`
-  padding: 9px 18px;
+  padding: 8px 16px;
   border: 0;
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--app-block, #235240);
   color: #fff;
   font: inherit;
@@ -1123,9 +1128,9 @@ const ThumbPills = styled.div`
 
 const ThumbPill = styled.span<{ $accent?: boolean }>`
   height: 5px;
-  border-radius: 999px;
+  border-radius: 2px;
   background: ${({ $accent }) =>
-    $accent ? 'var(--app-acc, #1f9d57)' : 'rgba(20,18,22,0.15)'};
+    $accent ? 'rgba(20,18,22,0.24)' : 'rgba(20,18,22,0.15)'};
 `
 
 const ThumbGrid = styled.div`
@@ -1142,7 +1147,7 @@ const ThumbCell = styled.div<{ $accent?: boolean }>`
   background: ${elevated};
   border: 1px solid ${line};
   border-left: ${({ $accent }) =>
-    $accent ? '2px solid var(--app-acc, #1f9d57)' : `1px solid ${line}`};
+    $accent ? '2px solid rgba(20,18,22,0.24)' : `1px solid ${line}`};
 `
 
 const ThumbCols = styled.div`
@@ -1170,7 +1175,7 @@ const ThumbBlock = styled.div<{ $accent?: boolean }>`
   background: ${elevated};
   border: 1px solid ${line};
   border-left: ${({ $accent }) =>
-    $accent ? '2px solid var(--app-acc, #1f9d57)' : `1px solid ${line}`};
+    $accent ? '2px solid rgba(20,18,22,0.24)' : `1px solid ${line}`};
 `
 
 //#endregion

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}
           />

package/src/components/editor/EditorLinkPromptDialog.tsx

@@ -19,7 +19,7 @@ export function EditorLinkPromptDialog({
   }
 
   return (
-    <Modal open={open} onClose={onCancel} title="Insert link" size="md">
+    <Modal open={open} onClose={onCancel} title="Insert link" size="xs">
       <StyledBody>
         <StyledLinkInput
           autoFocus