@brimveyn/aimux 1.12.6 → 1.13.2

package/src/ui/components/overlays/toast/toast-item.tsx

@@ -0,0 +1,88 @@
+import { useTerminalDimensions } from '@opentui/react'
+import { useEffect } from 'react'
+
+import {
+  type Toast,
+  TOAST_CONFIG,
+  toastStore,
+  type ToastVariant,
+} from '../../../../state/toast-store'
+import { type ResolvedTuiTheme, useTheme } from '../../../theme'
+import { slideOffsetStyle, type ToastAnchor } from './toast-position'
+import { useToastAnimation } from './use-toast-animation'
+
+// Cells the toast travels vertically for center anchors (compact, since the card
+// is only a few rows tall); horizontal anchors travel the full card width.
+const VERTICAL_SLIDE = 4
+
+function variantStyle(variant: ToastVariant, t: ResolvedTuiTheme): { color: string; icon: string } {
+  switch (variant) {
+    case 'success':
+      return { color: t.success, icon: '✓' }
+    case 'warning':
+      return { color: t.warning, icon: '⚠' }
+    case 'error':
+      return { color: t.error, icon: '✗' }
+    case 'info':
+      return { color: t.primary, icon: '●' }
+  }
+}
+
+interface ToastItemProps {
+  toast: Toast
+  anchor: ToastAnchor
+}
+
+export function ToastItem({ anchor, toast }: ToastItemProps) {
+  const t = useTheme()
+  const dimensions = useTerminalDimensions()
+  const { away, requestExit } = useToastAnimation({
+    onExited: () => toastStore.getState().dismiss(toast.id),
+    reduceMotion: TOAST_CONFIG.reduceMotion,
+  })
+
+  useEffect(() => {
+    if (toast.durationMs <= 0) return
+    const timer = setTimeout(() => requestExit(), toast.durationMs)
+    return () => clearTimeout(timer)
+  }, [toast.durationMs, requestExit])
+
+  const width = Math.max(16, Math.min(TOAST_CONFIG.width, dimensions.width - 4))
+  const distance = anchor.horizontal === 'center' ? VERTICAL_SLIDE : width + 4
+  const margins = slideOffsetStyle(anchor, Math.round(away * distance))
+  const { color, icon } = variantStyle(toast.variant, t)
+  const hasTitle = toast.title != null && toast.title !== ''
+  const hasMessage = toast.message != null && toast.message !== ''
+
+  return (
+    <box flexShrink={0} {...margins}>
+      <box
+        border
+        borderColor={color}
+        backgroundColor={t.backgroundElement}
+        padding={1}
+        width={width}
+      >
+        {toast.content ?? (
+          <box flexDirection="row" gap={1}>
+            <text fg={color} selectable={false}>
+              {icon}
+            </text>
+            <box flexDirection="column" flexGrow={1}>
+              {hasTitle ? (
+                <text fg={t.text} selectable={false} wrapMode="word">
+                  <strong>{toast.title}</strong>
+                </text>
+              ) : null}
+              {hasMessage ? (
+                <text fg={t.textMuted} selectable={false} wrapMode="word">
+                  {toast.message}
+                </text>
+              ) : null}
+            </box>
+          </box>
+        )}
+      </box>
+    </box>
+  )
+}

package/src/ui/components/overlays/toast/toast-position.ts

@@ -0,0 +1,45 @@
+import type { ToastPosition } from '../../../../state/toast-store'
+
+export interface ToastAnchor {
+  vertical: 'top' | 'bottom'
+  horizontal: 'left' | 'center' | 'right'
+}
+
+export function parseToastPosition(position: ToastPosition): ToastAnchor {
+  const [vertical, horizontal] = position.split('-') as [
+    ToastAnchor['vertical'],
+    ToastAnchor['horizontal'],
+  ]
+  return { horizontal, vertical }
+}
+
+// Absolute box props that pin a stack to its corner. Center spans the width and
+// centers its children; left/right hug their edge. Margin keeps it off the edge.
+export function stackContainerProps(anchor: ToastAnchor, margin: number) {
+  const vertical = anchor.vertical === 'top' ? { top: margin } : { bottom: margin }
+  if (anchor.horizontal === 'left') {
+    return { ...vertical, alignItems: 'flex-start' as const, left: margin }
+  }
+  if (anchor.horizontal === 'right') {
+    return { ...vertical, alignItems: 'flex-end' as const, right: margin }
+  }
+  return { ...vertical, alignItems: 'center' as const, left: margin, right: margin }
+}
+
+interface SlideMargins {
+  marginLeft?: number
+  marginRight?: number
+  marginTop?: number
+  marginBottom?: number
+}
+
+// A negative margin on the entering edge pushes the toast that many cells off the
+// nearest screen edge (the overflow is clipped by the screen buffer); animating it
+// back to 0 slides the toast in. `offset` is cells off-screen (0 = resting). Used
+// instead of opacity/transform, which terminals don't have.
+export function slideOffsetStyle(anchor: ToastAnchor, offset: number): SlideMargins {
+  const off = -offset
+  if (anchor.horizontal === 'right') return { marginRight: off }
+  if (anchor.horizontal === 'left') return { marginLeft: off }
+  return anchor.vertical === 'top' ? { marginTop: off } : { marginBottom: off }
+}

package/src/ui/components/overlays/toast/toast-stack.tsx

@@ -0,0 +1,30 @@
+import { type Toast, TOAST_CONFIG, type ToastPosition } from '../../../../state/toast-store'
+import { ToastItem } from './toast-item'
+import { parseToastPosition, stackContainerProps } from './toast-position'
+
+const EDGE_MARGIN = 1
+
+interface ToastStackProps {
+  position: ToastPosition
+  toasts: Toast[]
+}
+
+// One corner's column of toasts. Newest sits nearest the anchored edge; the stack
+// is capped at maxVisible (older toasts drop off, though they usually auto-dismiss).
+export function ToastStack({ position, toasts }: ToastStackProps) {
+  const anchor = parseToastPosition(position)
+  const recent = toasts.slice(-TOAST_CONFIG.maxVisible)
+  const ordered = anchor.vertical === 'top' ? [...recent].reverse() : recent
+  return (
+    <box
+      position="absolute"
+      flexDirection="column"
+      gap={TOAST_CONFIG.gap}
+      {...stackContainerProps(anchor, EDGE_MARGIN)}
+    >
+      {ordered.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} anchor={anchor} />
+      ))}
+    </box>
+  )
+}

package/src/ui/components/overlays/toast/toast-viewport.tsx

@@ -0,0 +1,24 @@
+import { type Toast, type ToastPosition, useToastStore } from '../../../../state/toast-store'
+import { ToastStack } from './toast-stack'
+
+// Mounted once at the root. Groups active toasts by position and renders one
+// absolutely-positioned stack per occupied corner, on top of everything else.
+export function ToastViewport() {
+  const toasts = useToastStore((state) => state.toasts)
+  if (toasts.length === 0) return null
+
+  const byPosition = new Map<ToastPosition, Toast[]>()
+  for (const entry of toasts) {
+    const group = byPosition.get(entry.position) ?? []
+    group.push(entry)
+    byPosition.set(entry.position, group)
+  }
+
+  return (
+    <>
+      {[...byPosition].map(([position, group]) => (
+        <ToastStack key={position} position={position} toasts={group} />
+      ))}
+    </>
+  )
+}

package/src/ui/components/overlays/toast/use-toast-animation.ts

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+const STEP_MS = 28
+// Normalized distance off-screen: 1 = fully hidden, 0 = resting. Eased so the
+// toast decelerates in and accelerates out.
+const ENTER_FRAMES = [1, 0.55, 0.3, 0.15, 0.05, 0]
+const EXIT_FRAMES = [0.2, 0.45, 0.72, 1]
+
+interface ToastAnimationOptions {
+  reduceMotion: boolean
+  onExited: () => void
+}
+
+/**
+ * Drives a toast's slide via a frame loop (terminals have no opacity/transform,
+ * so motion is a stepped integer offset). Returns `away` in [0,1] — multiply by a
+ * pixel distance to get the cell offset — and `requestExit` to slide back out.
+ */
+export function useToastAnimation({ onExited, reduceMotion }: ToastAnimationOptions): {
+  away: number
+  requestExit: () => void
+} {
+  const [away, setAway] = useState(reduceMotion ? 0 : 1)
+  const exitingRef = useRef(false)
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const onExitedRef = useRef(onExited)
+  onExitedRef.current = onExited
+
+  const runFrames = useCallback((frames: number[], done?: () => void) => {
+    if (timerRef.current != null) clearInterval(timerRef.current)
+    let index = 0
+    setAway(frames[0] ?? 0)
+    timerRef.current = setInterval(() => {
+      index += 1
+      if (index >= frames.length) {
+        if (timerRef.current != null) clearInterval(timerRef.current)
+        timerRef.current = null
+        done?.()
+        return
+      }
+      setAway(frames[index] ?? 0)
+    }, STEP_MS)
+  }, [])
+
+  useEffect(() => {
+    if (reduceMotion) return
+    runFrames(ENTER_FRAMES)
+    return () => {
+      if (timerRef.current != null) clearInterval(timerRef.current)
+    }
+  }, [reduceMotion, runFrames])
+
+  const requestExit = useCallback(() => {
+    if (exitingRef.current) return
+    exitingRef.current = true
+    if (reduceMotion) {
+      onExitedRef.current()
+      return
+    }
+    runFrames(EXIT_FRAMES, () => onExitedRef.current())
+  }, [reduceMotion, runFrames])
+
+  return { away, requestExit }
+}

package/src/ui/components/primitives/input-field.tsx

@@ -12,7 +12,7 @@ export function InputField({ active, cursorPos, placeholder, value }: InputField
   const t = useTheme()
   const fg = active ? t.text : t.textMuted
   if (!active) {
-    const showPlaceholder = !value && !!placeholder
+    const showPlaceholder = !value && !!(placeholder != null && placeholder !== '')
     return (
       <Surface tone="input" padding={1}>
         <text fg={showPlaceholder ? t.textMuted : fg}>{showPlaceholder ? placeholder : value}</text>

package/src/ui/components/primitives/list-item.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import { memo, type ReactNode, useMemo } from 'react'
 
 import { useTheme } from '../../theme'
 import { Surface } from './surface'
@@ -9,27 +9,43 @@ interface ListItemProps {
   active: boolean
   direction?: ListItemDirection
   id?: string
+  index?: number
   leading?: ReactNode
   subtitle?: ReactNode
   title: ReactNode
   trailing?: ReactNode
   onHover?: () => void
   onClick?: () => void
+  onHoverIndex?: (index: number) => void
+  onClickIndex?: (index: number) => void
 }
 
-export function ListItem({
+export const ListItem = memo(function ListItem({
   active,
   direction = 'column',
   id,
+  index,
   leading,
   onClick,
+  onClickIndex,
   onHover,
+  onHoverIndex,
   subtitle,
   title,
   trailing,
 }: ListItemProps) {
   const t = useTheme()
   const isRow = direction === 'row'
+  // Build per-item handlers from the stable index-based callbacks so callers can
+  // avoid creating fresh closures inside their list `.map()`.
+  const handleHover = useMemo<(() => void) | undefined>(() => {
+    if (onHoverIndex && index !== undefined) return () => onHoverIndex(index)
+    return onHover
+  }, [index, onHover, onHoverIndex])
+  const handleClick = useMemo<(() => void) | undefined>(() => {
+    if (onClickIndex && index !== undefined) return () => onClickIndex(index)
+    return onClick
+  }, [index, onClick, onClickIndex])
   const inner = (
     <box flexDirection="column">
       <box flexDirection="row">
@@ -40,15 +56,15 @@ export function ListItem({
           </>
         )}
         {leading}
-        {leading ? <text> </text> : null}
+        {leading != null ? <text> </text> : null}
         <box flexGrow={isRow ? 0 : 1}>{title}</box>
-        {trailing ? <box>{trailing}</box> : null}
+        {trailing != null ? <box>{trailing}</box> : null}
       </box>
-      {subtitle ? <box paddingLeft={2}>{subtitle}</box> : null}
+      {subtitle != null ? <box paddingLeft={2}>{subtitle}</box> : null}
     </box>
   )
   return (
-    <box id={id} onMouseOver={onHover} onMouseDown={onClick}>
+    <box id={id} onMouseOver={handleHover} onMouseDown={handleClick}>
       {active ? (
         <Surface tone="selected" paddingLeft={isRow ? 2 : 1} paddingRight={isRow ? 2 : 1}>
           {inner}
@@ -60,4 +76,4 @@ export function ListItem({
       )}
     </box>
   )
-}
+})

package/src/ui/filter-themes.ts

@@ -8,7 +8,7 @@ export function themeDisplayName(id: ThemeId): string {
 }
 
 export function filterThemeIds(filter: string | null): ThemeId[] {
-  if (!filter) return THEME_IDS
+  if (!(filter != null && filter !== '')) return THEME_IDS
   const needle = filter.toLowerCase()
   return THEME_IDS.filter((id) => {
     return id.toLowerCase().includes(needle) || themeDisplayName(id).toLowerCase().includes(needle)

package/src/ui/root.tsx

@@ -1,8 +1,16 @@
 import type { MouseEvent } from '@opentui/core'
 
+import { useCallback, useMemo } from 'react'
+
 import type { MeasuredPaneRect } from '../app-runtime/use-pane-size-report'
 import type { TerminalContentOrigin } from '../input/raw-input-handler'
-import type { FocusMode, ModalState, SessionRecord, SnippetRecord } from '../state/types'
+import type {
+  FocusMode,
+  ModalState,
+  SessionRecord,
+  SnippetRecord,
+  WorktreeRecord,
+} from '../state/types'
 import type { ThemeId } from './themes'
 
 import { useAppStore } from '../state/app-store'
@@ -28,11 +36,15 @@ import { SnippetEditorModal } from './components/modals/snippets/snippet-editor-
 import { SnippetPickerModal } from './components/modals/snippets/snippet-picker-modal'
 import { NewTabModal } from './components/modals/tabs/new-tab-modal'
 import { ThemePickerModal } from './components/modals/themes/theme-picker-modal'
+import { WorktreeMoveModal } from './components/modals/worktree/worktree-move-modal'
 import { ContextMenuBox } from './components/overlays/context-menu/context-menu-box'
 import { ContextMenuOverlay } from './components/overlays/context-menu/context-menu-overlay'
 import { PendingChordOverlay } from './components/overlays/pending-chord-overlay'
+import { ToastViewport } from './components/overlays/toast/toast-viewport'
 import { useTheme } from './theme'
 
+const EMPTY_WORKTREES: WorktreeRecord[] = []
+
 function getCreateSessionFields(modal: ModalState) {
   if (modal.type !== 'create-session') {
     return { directoryQuery: '', sessionName: '' }
@@ -78,6 +90,7 @@ function renderModal(
     focusMode: FocusMode
     activeAssistant?: string
     autoCommitModel?: string
+    worktreeDivergence: Record<string, { ahead: number; behind: number }>
   }
 ) {
   switch (modal.type) {
@@ -89,8 +102,24 @@ function renderModal(
           customCommands={options.customCommands}
           filter={modal.editBuffer}
           cursorPos={modal.cursorPos}
+          currentSessionId={options.currentSessionId}
           editingCommand={modal.type === 'new-tab' ? modal.editingCommand : null}
           editBuffer={modal.editBuffer ?? ''}
+          activeField={modal.type === 'new-tab' ? modal.activeField : 'assistant'}
+          branchError={modal.type === 'new-tab' ? modal.branchError : null}
+          branchName={modal.type === 'new-tab' ? modal.branchName : ''}
+          createWorktree={modal.type === 'new-tab' ? modal.createWorktree : false}
+          selectedAssistantId={modal.type === 'new-tab' ? modal.selectedAssistantId : null}
+          step={modal.type === 'new-tab' ? modal.step : 'assistant'}
+          worktreeDeleteConfirmId={modal.type === 'new-tab' ? modal.worktreeDeleteConfirmId : null}
+          worktreeDeleteMessage={modal.type === 'new-tab' ? modal.worktreeDeleteMessage : null}
+          worktrees={
+            options.currentSessionId != null && options.currentSessionId !== ''
+              ? (options.sessions.find((session) => session.id === options.currentSessionId)
+                  ?.worktrees ?? EMPTY_WORKTREES)
+              : EMPTY_WORKTREES
+          }
+          worktreeName={modal.type === 'new-tab' ? modal.worktreeName : ''}
         />
       )
     case 'session-picker':
@@ -107,7 +136,11 @@ function renderModal(
     case 'session-name':
       return (
         <SessionNameModal
-          title={modal.sessionTargetId ? 'Rename workspace' : 'Create workspace'}
+          title={
+            modal.sessionTargetId != null && modal.sessionTargetId !== ''
+              ? 'Rename workspace'
+              : 'Create workspace'
+          }
           value={modal.editBuffer ?? ''}
         />
       )
@@ -161,6 +194,21 @@ function renderModal(
           latestVersion={modal.latestVersion}
         />
       )
+    case 'worktree-move': {
+      const session =
+        options.currentSessionId != null && options.currentSessionId !== ''
+          ? options.sessions.find((entry) => entry.id === options.currentSessionId)
+          : undefined
+      return (
+        <WorktreeMoveModal
+          deleteSource={modal.type === 'worktree-move' ? modal.deleteSource : false}
+          divergence={options.worktreeDivergence}
+          selectedIndex={modal.selectedIndex}
+          sourceWorktreeId={modal.sourceWorktreeId}
+          worktrees={session?.worktrees ?? EMPTY_WORKTREES}
+        />
+      )
+    }
     case 'help':
       return (
         <HelpModal
@@ -266,6 +314,7 @@ export function RootView({
   const customCommands = useAppStore((s) => s.customCommands)
   const sessions = useAppStore((s) => s.sessions)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
+  const worktreeDivergence = useAppStore((s) => s.worktreeDivergence)
   const sessionBarPosition = useAppStore((s) => s.sessionBar.position)
   const gitPaneMode = useAppStore((s) => s.gitPane.mode)
   const gitPaneVisible = useAppStore((s) => s.gitPane.visible)
@@ -275,19 +324,66 @@ export function RootView({
   const sidebarVisible = useAppStore((s) => s.sidebar.visible)
 
   const gitPaneInPaneOnLeft = gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'left'
+  const splitChrome = PANE_BORDER * 2
+
+  const handleSidebarEdgeResize = useCallback(
+    (event: MouseEvent): boolean => {
+      onSidebarResizeStart?.({ initialWidth: sidebarWidth, screenStart: event.x })
+      return true
+    },
+    [onSidebarResizeStart, sidebarWidth]
+  )
   const handleTerminalLeftEdgeMouseDown =
     sidebarVisible && !gitPaneInPaneOnLeft && onSidebarResizeStart
-      ? (event: MouseEvent) => {
-          onSidebarResizeStart({ initialWidth: sidebarWidth, screenStart: event.x })
-          return true
-        }
+      ? handleSidebarEdgeResize
       : undefined
 
+  const handleRootMouseDrag = useCallback(
+    (event: MouseEvent) => {
+      if (onSeparatorDrag?.(event) === true) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    },
+    [onSeparatorDrag]
+  )
+  const handleRootMouseUp = useCallback(
+    (event: MouseEvent) => {
+      // Catch releases that land outside any TerminalPane (sidebar, gap,
+      // status bar, …) so an in-flight multi-click drag — and its
+      // auto-scroll interval — is always finalised.
+      onTerminalMouseUp?.(event)
+      onSeparatorDragEnd?.()
+    },
+    [onSeparatorDragEnd, onTerminalMouseUp]
+  )
+
+  const splitContentOrigin = useMemo(
+    () => ({
+      cols: terminalCols + splitChrome,
+      rows: terminalRows + splitChrome,
+      x: contentOrigin.x - PANE_BORDER,
+      y: contentOrigin.y - PANE_BORDER,
+    }),
+    [contentOrigin, splitChrome, terminalCols, terminalRows]
+  )
+  const splitBounds = useMemo(
+    () => ({
+      cols: terminalCols + splitChrome,
+      rows: terminalRows + splitChrome,
+      x: 0,
+      y: 0,
+    }),
+    [splitChrome, terminalCols, terminalRows]
+  )
+
   const activeTab = tabs.find((tab) => tab.id === activeTabId)
-  const activeTree = activeTabId ? getTreeForTab(layoutTrees, tabGroupMap, activeTabId) : null
+  const activeTree =
+    activeTabId != null && activeTabId !== ''
+      ? getTreeForTab(layoutTrees, tabGroupMap, activeTabId)
+      : null
   const createSessionFields = getCreateSessionFields(modal)
   const snippetEditorFields = getSnippetEditorFields(modal)
-  const splitChrome = PANE_BORDER * 2
 
   const inGitMode = focusMode === 'git' || modal.type === 'git-commit'
   if (inGitMode) {
@@ -310,7 +406,9 @@ export function RootView({
           snippetEditorFields,
           snippets,
           themeId,
+          worktreeDivergence,
         })}
+        <ToastViewport />
       </box>
     )
   }
@@ -321,19 +419,8 @@ export function RootView({
       width="100%"
       height="100%"
       backgroundColor={editorBg}
-      onMouseDrag={(event) => {
-        if (onSeparatorDrag?.(event)) {
-          event.preventDefault()
-          event.stopPropagation()
-        }
-      }}
-      onMouseUp={(event) => {
-        // Catch releases that land outside any TerminalPane (sidebar, gap,
-        // status bar, …) so an in-flight multi-click drag — and its
-        // auto-scroll interval — is always finalised.
-        onTerminalMouseUp?.(event)
-        onSeparatorDragEnd?.()
-      }}
+      onMouseDrag={handleRootMouseDrag}
+      onMouseUp={handleRootMouseUp}
     >
       {sessionBarPosition === 'top' && <SessionBar />}
       <box flexDirection="row" gap={0} padding={0} flexGrow={1}>
@@ -356,12 +443,7 @@ export function RootView({
             tabs={tabs}
             activeTabId={activeTabId}
             focusMode={focusMode}
-            contentOrigin={{
-              cols: terminalCols + splitChrome,
-              rows: terminalRows + splitChrome,
-              x: contentOrigin.x - PANE_BORDER,
-              y: contentOrigin.y - PANE_BORDER,
-            }}
+            contentOrigin={splitContentOrigin}
             mouseForwardingEnabled={mouseForwardingEnabled}
             localScrollbackEnabled={localScrollbackEnabled}
             onTerminalMouseEvent={onTerminalMouseEvent}
@@ -376,12 +458,7 @@ export function RootView({
             onSeparatorDragEnd={onSeparatorDragEnd}
             onLeftEdgeMouseDown={handleTerminalLeftEdgeMouseDown}
             onMeasure={onMeasure}
-            bounds={{
-              cols: terminalCols + splitChrome,
-              rows: terminalRows + splitChrome,
-              x: 0,
-              y: 0,
-            }}
+            bounds={splitBounds}
           />
         ) : (
           <TerminalPane
@@ -424,7 +501,9 @@ export function RootView({
         snippetEditorFields,
         snippets,
         themeId,
+        worktreeDivergence,
       })}
+      <ToastViewport />
     </box>
   )
 }
@@ -455,16 +534,20 @@ function GitPaneInPaneMode({
       dispatchGlobal({ position: nextPosition, type: 'set-git-pane-position' })
     }
   )
+  const handleResizeMouseDown = useCallback(
+    (event: MouseEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+      onGitPaneResizeStart?.({ initialWidth: width, screenStart: event.x, side: position })
+    },
+    [onGitPaneResizeStart, position, width]
+  )
   const handle = (
     <box
       width={1}
       flexShrink={0}
       backgroundColor={tokens.border}
-      onMouseDown={(event) => {
-        event.preventDefault()
-        event.stopPropagation()
-        onGitPaneResizeStart?.({ initialWidth: width, screenStart: event.x, side: position })
-      }}
+      onMouseDown={handleResizeMouseDown}
     />
   )
   return (

package/src/ui/session-ordering.ts

@@ -5,7 +5,7 @@ import type { SessionRecord } from '../state/types'
  * with any missing `order` falling back to `createdAt` ascending.
  */
 export function orderSessionsForDisplay(sessions: SessionRecord[]): SessionRecord[] {
-  return sessions.slice().sort((a, b) => {
+  return [...sessions].sort((a, b) => {
     const ao = a.order ?? Number.MAX_SAFE_INTEGER
     const bo = b.order ?? Number.MAX_SAFE_INTEGER
     if (ao !== bo) return ao - bo
@@ -27,7 +27,7 @@ export function moveIdToIdPosition(
   const from = ids.indexOf(moveId)
   const to = ids.indexOf(intoPositionOfId)
   if (from < 0 || to < 0) return ids
-  const next = ids.slice()
+  const next = [...ids]
   next.splice(from, 1)
   next.splice(to, 0, moveId)
   return next