@solidrt/components 0.0.54 → 0.0.56

package/src/checkbox.tsx

@@ -6,7 +6,8 @@ import { policy } from "./policy"
 import { densityScale } from "./density"
 import { Icon } from "./icon"
 import type { StyleProps, TransitionProps } from "./types"
-import { splitTransition, transitionEndFor } from "./types"
+import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { colorFade, markMotion, pressScale, scaleFeedback } from "./motion"
 
 export interface CheckboxProps extends TransitionProps {
   // Controlled checked state. If omitted, the checkbox is uncontrolled.
@@ -21,8 +22,10 @@ export interface CheckboxProps extends TransitionProps {
 const SIZE = 20
 
 // A checkbox. When checked, fills with primary and draws a checkmark; otherwise
-// shows an empty bordered box. Controlled via checked/onChange, or uncontrolled
-// via defaultChecked. When disabled, it takes no pointer events at all.
+// shows an empty bordered box. The fill fades, the mark pops in/out
+// (markMotion), and a press shrinks the box slightly (pressScale). Controlled
+// via checked/onChange, or uncontrolled via defaultChecked. When disabled, it
+// takes no pointer events at all.
 export function Checkbox(props: CheckboxProps) {
   let [internal, setInternal] = createSignal(props.defaultChecked ?? false)
   let checked = () => (props.checked !== undefined ? props.checked : internal())
@@ -51,9 +54,11 @@ export function Checkbox(props: CheckboxProps) {
     ...(press.focused() && policy.focusRing ? { borderWidth: theme.borderWidth.focus, borderColor: theme.color.ring } : {}),
   })
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
-      transition={splitTransition(props.transition).root}
+      transition={withTransitionDefaults(split().root, scaleFeedback())}
       onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={press.ref}
       repaintBoundary
@@ -63,36 +68,55 @@ export function Checkbox(props: CheckboxProps) {
       {...props.layout}
       x={style().x}
       y={style().y}
-      scale={style().scale}
+      scale={(style().scale ?? 1) * pressScale(press.pressed())}
       rotate={style().rotate}
       opacity={style().opacity}
       {...press.handlers}
       focusable={!props.disabled}
       pointerEvents={props.disabled ? "none" : undefined}
     >
-      <d-rect color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />
+      <d-rect
+        transition={withTransitionDefaults(split().background, colorFade())}
+        onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
+        color={style().backgroundColor ?? "transparent"}
+        radius={style().borderRadius}
+      />
       <Show when={checked()}>
-        <Show
-          when={theme.icons.check}
-          fallback={
-            <d-path
-              d={check()}
-              drawStyle="stroke"
-              color={theme.color.onPrimary}
-              strokeWidth={2}
-              strokeCap="round"
-              strokeJoin="round"
-            />
-          }
+        <view
+          position="absolute"
+          top={0}
+          bottom={0}
+          left={0}
+          right={0}
+          alignItems="center"
+          justifyContent="center"
+          opacity={1}
+          scale={1}
+          transition={markMotion()}
         >
-          <view position="absolute" top={0} bottom={0} left={0} right={0} alignItems="center" justifyContent="center">
+          <Show
+            when={theme.icons.check}
+            fallback={
+              <d-path
+                d={check()}
+                drawStyle="stroke"
+                transition={colorFade()}
+                color={theme.color.onPrimary}
+                strokeWidth={2}
+                strokeCap="round"
+                strokeJoin="round"
+              />
+            }
+          >
             <Icon src={theme.icons.check!} size={Math.round(size() * 0.75)} color={theme.color.onPrimary} />
-          </view>
-        </Show>
+          </Show>
+        </view>
       </Show>
       <Show when={(style().borderWidth ?? 0) > 0}>
         <d-rect
           drawStyle="stroke"
+          transition={withTransitionDefaults(split().border, colorFade())}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={style().borderColor ?? "transparent"}
           strokeWidth={style().borderWidth}
           radius={style().borderRadius}

package/src/context-menu.tsx

@@ -7,6 +7,7 @@ import { space } from "./spacing"
 import { typeStyle } from "./typography"
 import type { TransitionProps } from "./types"
 import { splitTransition, transitionEndFor } from "./types"
+import { colorFade, popupFade, popupFadeOut, PressFeedback } from "./motion"
 
 export interface ContextMenuItem {
   label: string
@@ -90,16 +91,11 @@ export function ContextMenu(props: ContextMenuProps) {
         {...press.handlers}
         pointerEvents={p.item.disabled ? "none" : undefined}
       >
-        <d-rect
-          color={
-            press.pressed()
-              ? theme.color.overlayPressed
-              : press.hovered() && policy.interaction !== "touch"
-                ? theme.color.overlayHover
-                : "transparent"
-          }
+        <PressFeedback
+          pressed={press.pressed()}
+          hovered={press.hovered() && policy.interaction !== "touch"}
         />
-        <text {...bodyText(p.item.disabled ? theme.color.textMuted : theme.color.text)}>{p.item.label}</text>
+        <text transition={colorFade()} {...bodyText(p.item.disabled ? theme.color.textMuted : theme.color.text)}>{p.item.label}</text>
       </view>
     )
   }
@@ -121,8 +117,19 @@ export function ContextMenu(props: ContextMenuProps) {
       let cur = pos()
       if (!cur || cur.x !== x || cur.y !== y) setPos({ x, y })
     })
+    // The fade is driven by the position write, not a mount-time `from`: the
+    // menu parks offscreen until measured, so a `from` would play unseen.
+    // The exit fade lives on this root (the node the close unmounts).
     return createPortal(
-      <view position="absolute" top={0} left={0} right={0} bottom={0}>
+      <view
+        position="absolute"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        opacity={pos() ? 1 : 0}
+        transition={popupFadeOut()}
+      >
         <view position="absolute" top={0} left={0} right={0} bottom={0} onPointerDown={() => setOpen(false)} />
         <view
           ref={(n: { id: number }) => (menu = n)}
@@ -136,12 +143,13 @@ export function ContextMenu(props: ContextMenuProps) {
           paddingTop={theme.spacing.sm}
           paddingBottom={theme.spacing.sm}
         >
-          <d-rect color={theme.color.surface} radius={theme.radius.sm} />
+          <d-rect transition={colorFade()} color={theme.color.surface} radius={theme.radius.sm} />
           <For each={props.items}>
             {(item: ContextMenuItem) => <ItemRow item={item} padY={space("sm")} />}
           </For>
           <d-rect
             drawStyle="stroke"
+            transition={colorFade()}
             color={theme.color.border}
             strokeWidth={theme.borderWidth.sm}
             radius={theme.radius.sm}
@@ -155,9 +163,9 @@ export function ContextMenu(props: ContextMenuProps) {
   // trick) so a row press never has the scrim on its hit path.
   let Sheet = () =>
     createPortal(
-      <view position="absolute" top={0} left={0} right={0} bottom={0}>
+      <view position="absolute" top={0} left={0} right={0} bottom={0} opacity={1} transition={popupFade()}>
         <view position="absolute" top={0} left={0} right={0} bottom={0} onPointerDown={() => setOpen(false)}>
-          <d-rect color={theme.color.scrim} />
+          <d-rect transition={colorFade()} color={theme.color.scrim} />
         </view>
         <view
           position="absolute"
@@ -168,7 +176,7 @@ export function ContextMenu(props: ContextMenuProps) {
           paddingTop={theme.spacing.md}
           paddingBottom={theme.spacing.md + env.safeArea.bottom}
         >
-          <d-rect color={theme.color.surface} radius={theme.radius.sm} />
+          <d-rect transition={colorFade()} color={theme.color.surface} radius={theme.radius.sm} />
           <For each={props.items}>
             {(item: ContextMenuItem) => <ItemRow item={item} padY={Math.round(theme.spacing.md * 1.5)} />}
           </For>

package/src/divider.tsx

@@ -1,7 +1,8 @@
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
 import type { StyleProps, TransitionProps } from "./types"
-import { splitTransition, transitionEndFor } from "./types"
+import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { colorFade } from "./motion"
 
 export interface DividerProps extends TransitionProps {
   // Line direction. Horizontal (default) is a full-width rule; vertical is a
@@ -34,7 +35,7 @@ export function Divider(props: DividerProps) {
       alignSelf="stretch"
       {...props.layout}
     >
-      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={color()} />
+      <d-rect transition={withTransitionDefaults(split().background, colorFade())} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={color()} />
     </view>
   )
 }

package/src/editor-field.tsx

@@ -6,6 +6,7 @@
 // package.
 import {
   For,
+  arena,
   createEffect,
   createMemo,
   createSignal,
@@ -23,7 +24,8 @@ import type { Element } from "solid-js"
 import type { MeasureTextOptions, TextRunRange } from "flux:rendertree"
 import { registerNavAction } from "./focus-nav"
 import type { StyleProps, TransitionProps } from "./types"
-import { splitTransition, transitionEndFor } from "./types"
+import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { colorFade } from "./motion"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
@@ -77,9 +79,13 @@ export interface EditorFieldProps extends TransitionProps {
 // and stops those keys from bubbling further. Focused and editing are
 // distinct (see activateField): navigation focuses, select begins editing,
 // Enter while editing submits (single-line) or inserts a newline
-// (multiline). A tap puts the caret at the nearest position. Range selection
-// (shift-movement, highlight) is not wired yet. Outside-click-to-blur is the
-// caller's job.
+// (multiline). A tap puts the caret at the nearest position. Range selection:
+// Shift+movement (and Shift+tap) extends from the anchor, a mouse/pen drag
+// selects (stealing the gesture arena on its first move), Ctrl/Cmd+A selects
+// all; the highlight draws behind the lines while focused, and edits on a
+// range replace it (the buffer's own behavior). Ctrl/Cmd+C/X/V go through
+// navigator.clipboard (copy and cut need a range; single-line paste flattens
+// line breaks). Outside-click-to-blur is the caller's job.
 export function EditorField(props: EditorFieldProps) {
   let [caretOn, setCaretOn] = createSignal(true)
 
@@ -104,6 +110,12 @@ export function EditorField(props: EditorFieldProps) {
   let buffer = untrack(() => props.buffer)((_text, offset, direction) => editor.step(offset, direction))
   let value = buffer.value
 
+  // The selection's text, for copy/cut.
+  let selectedText = (): string => {
+    let { anchor, focus } = buffer.selection()
+    return value().slice(Math.min(anchor, focus), Math.max(anchor, focus))
+  }
+
   // autoFocus runs in an effect, not the ref: setFocus fires onFocus and reads
   // the node's onTextInput handler to toggle the keyboard, and those handlers
   // are only registered after the element's props are applied. The ref can fire
@@ -120,17 +132,59 @@ export function EditorField(props: EditorFieldProps) {
     if (node) setFocus(node.id)
   }
 
-  // Tap-to-position: the viewport's local point plus its scroll is a content
-  // point; the nearest caret stop on the line under it takes the caret. Runs
-  // before the field's own handler above (bubbling), which focuses.
+  // The viewport's local point plus its scroll is a content point; the
+  // nearest caret stop on the line under it. Locals are exact even on the
+  // frozen down path, so a drag keeps mapping after the pointer leaves the
+  // field.
+  let offsetAt = (e: PointerEvent) => {
+    let line = editor.lineAtY(e.localY + editor.scrollY())
+    return editor.offsetAtX(line, e.localX + editor.scrollX())
+  }
+
+  // Drag-select: a mouse/pen down on the viewport arms the pointer, and its
+  // first move steals the gesture arena - precise pointers select text over
+  // an enclosing scroller's pan, as desktop editors do. Touch never arms, so
+  // a finger drag still scrolls (touch range selection is a later,
+  // handle-based interaction); Shift+tap extends everywhere.
+  let dragArmed: number | null = null
+  let dragActive: number | null = null
+  let dragOwner = {
+    cancel: () => {
+      dragActive = null
+    },
+  }
+
+  // Tap-to-position: the offset under the tap takes the caret (Shift keeps
+  // the anchor to extend). Runs before the field's own handler above
+  // (bubbling), which focuses.
   let handleViewportPointerDown = (e: PointerEvent) => {
     if (props.disabled) return
-    let line = editor.lineAtY(e.localY + editor.scrollY())
-    let offset = editor.offsetAtX(line, e.localX + editor.scrollX())
-    buffer.setSelection(offset, offset)
+    let offset = offsetAt(e)
+    buffer.setSelection(e.shiftKey ? buffer.selection().anchor : offset, offset)
+    if (e.pointerType !== "touch" && (e.button == null || e.button === 0)) dragArmed = e.pointerId
     setCaretOn(true)
   }
 
+  let handleViewportPointerMove = (e: PointerEvent) => {
+    if (props.disabled) return
+    if (dragArmed === e.pointerId) {
+      dragArmed = null
+      if (arena.steal(e.pointerId, dragOwner)) dragActive = e.pointerId
+    }
+    if (dragActive === e.pointerId) {
+      buffer.setSelection(buffer.selection().anchor, offsetAt(e))
+      setCaretOn(true)
+    }
+  }
+
+  let handleViewportPointerUp = (e: PointerEvent) => {
+    if (dragArmed === e.pointerId) dragArmed = null
+    if (dragActive === e.pointerId) {
+      arena.release(e.pointerId, dragOwner)
+      dragActive = null
+    }
+  }
+
   let handleFocus = () => {
     setCaretOn(true)
     if (blinkId == null) {
@@ -160,24 +214,53 @@ export function EditorField(props: EditorFieldProps) {
       buffer.deleteForward()
       setCaretOn(true)
     } else if (e.key === "ArrowLeft") {
-      buffer.move("left")
+      buffer.move("left", { extend: e.shiftKey })
       setCaretOn(true)
     } else if (e.key === "ArrowRight") {
-      buffer.move("right")
+      buffer.move("right", { extend: e.shiftKey })
       setCaretOn(true)
     } else if (e.key === "Home" || e.key === "End") {
       // Multiline: the current line's ends (offsetAtX at 0 / far right, so a
       // wrap boundary resolves to the position that shows on this line).
       if (props.multiline) {
         let offset = editor.offsetAtX(editor.caretLine(), e.key === "Home" ? 0 : 1e9)
-        buffer.setSelection(offset, offset)
+        buffer.setSelection(e.shiftKey ? buffer.selection().anchor : offset, offset)
       } else {
-        buffer.move(e.key === "Home" ? "start" : "end")
+        buffer.move(e.key === "Home" ? "start" : "end", { extend: e.shiftKey })
       }
       setCaretOn(true)
     } else if (props.multiline && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
-      moveLine(e.key === "ArrowUp" ? -1 : 1)
+      moveLine(e.key === "ArrowUp" ? -1 : 1, e.shiftKey)
+      setCaretOn(true)
+    } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
+      buffer.setSelection(0, value().length)
       setCaretOn(true)
+    } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "c") {
+      // Copy acts only on a range; an empty selection leaves the key (and the
+      // clipboard) alone and lets it bubble to app shortcuts.
+      let text = selectedText()
+      if (text.length === 0) consumed = false
+      else navigator.clipboard.writeText(text).catch((err) => console.warn("Clipboard copy failed: " + err))
+    } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "x") {
+      let text = selectedText()
+      if (text.length === 0) consumed = false
+      else {
+        // The range deletes immediately, as native editors cut; a failed
+        // clipboard write is reported, not undone.
+        navigator.clipboard.writeText(text).catch((err) => console.warn("Clipboard cut failed: " + err))
+        buffer.insertText("")
+        setCaretOn(true)
+      }
+    } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "v") {
+      navigator.clipboard.readText().then(
+        (text) => {
+          if (text.length === 0) return
+          if (!props.multiline) text = text.replace(/\r?\n/g, " ")
+          buffer.insertText(text)
+          setCaretOn(true)
+        },
+        (err) => console.warn("Clipboard paste failed: " + err),
+      )
     } else if (props.multiline && e.key === "Enter" && textInputActive()) {
       buffer.insertText("\n")
       setCaretOn(true)
@@ -200,12 +283,13 @@ export function EditorField(props: EditorFieldProps) {
 
   // Up/Down: the offset on the neighbouring line nearest the caret's x; on
   // the first/last line they go to the text's start/end, as editors do.
-  let moveLine = (delta: number) => {
+  // `extend` (Shift held) keeps the anchor to grow a selection.
+  let moveLine = (delta: number, extend: boolean) => {
     let target = editor.caretLine() + delta
     let count = editor.lines().length
     let offset =
       target < 0 ? 0 : target >= count ? value().length : editor.offsetAtX(target, editor.caret().x)
-    buffer.setSelection(offset, offset)
+    buffer.setSelection(extend ? buffer.selection().anchor : offset, offset)
   }
 
   // Select on the focused field: focused and editing are distinct states. A
@@ -232,6 +316,8 @@ export function EditorField(props: EditorFieldProps) {
   onCleanup(() => {
     if (blinkId != null) clearInterval(blinkId)
     unregisterNav?.()
+    // An unmount mid-drag must not leave a resolved arena claim behind.
+    if (dragActive != null) arena.release(dragActive, dragOwner)
   })
 
   // Style overrides fall back to theme defaults. The border doubles as the
@@ -323,10 +409,10 @@ export function EditorField(props: EditorFieldProps) {
       onKeyDown={handleKeyDown}
       onTextInput={handleTextInput}
     >
-      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={surfaceColor()} radius={borderRadius()} />
+      <d-rect transition={withTransitionDefaults(split().background, colorFade())} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={surfaceColor()} radius={borderRadius()} />
       <d-rect
         drawStyle="stroke"
-        transition={split().border}
+        transition={withTransitionDefaults(split().border, colorFade())}
         onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
         color={borderColor()}
         strokeWidth={borderWidth()}
@@ -341,6 +427,8 @@ export function EditorField(props: EditorFieldProps) {
         scrollX={editor.scrollX()}
         scrollY={editor.scrollY()}
         onPointerDown={handleViewportPointerDown}
+        onPointerMove={handleViewportPointerMove}
+        onPointerUp={handleViewportPointerUp}
       >
         {showPlaceholder() ? (
           <d-text w={PLACEHOLDER_SHAPE_WIDTH} {...font()} color={theme.color.textMuted} maxLines={1}>
@@ -348,6 +436,11 @@ export function EditorField(props: EditorFieldProps) {
           </d-text>
         ) : (
           <>
+            {focused() ? (
+              <For each={editor.selectionRects(buffer.selection().anchor, buffer.selection().focus)} keyed={false}>
+                {(r) => <d-rect color={theme.color.selection} x={r().x} y={r().y} w={r().width} h={r().height} />}
+              </For>
+            ) : null}
             <For each={editor.lines()} keyed={false}>
               {(line) => props.renderLine({ line, font, color: textColor })}
             </For>

package/src/field.tsx

@@ -5,6 +5,7 @@ import { space } from "./spacing"
 import { typeStyle } from "./typography"
 import type { TransitionProps } from "./types"
 import { splitTransition, transitionEndFor } from "./types"
+import { colorFade } from "./motion"
 
 export interface FieldProps extends TransitionProps {
   // Label above the control.
@@ -29,13 +30,14 @@ export function Field(props: FieldProps) {
   return (
     <view flexDirection="column" gap={space("sm")} transition={splitTransition(props.transition).root} onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)} {...props.layout}>
       <Show when={props.label != null}>
-        <text color={theme.color.text} {...typeStyle("label")}>
+        <text transition={colorFade()} color={theme.color.text} {...typeStyle("label")}>
           {props.label}
         </text>
       </Show>
       {props.children}
       <Show when={props.error != null || props.description != null}>
         <text
+          transition={colorFade()}
           color={props.error != null ? theme.color.danger : theme.color.textMuted}
           {...typeStyle("caption")}
         >

package/src/item.tsx

@@ -1,12 +1,13 @@
 import { Show, children } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
-import { createPress, type PressState } from "./press"
+import { createPress } from "./press"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
 import type { StyleProps, TransitionProps } from "./types"
-import { splitTransition, transitionEndFor } from "./types"
+import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { colorFade, PressFeedback } from "./motion"
 
 export interface ItemProps extends TransitionProps {
   // Leading content: an icon, avatar, checkbox, ...
@@ -47,14 +48,6 @@ export function Item(props: ItemProps) {
   let press = createPress(props)
 
   let bg = () => styled().backgroundColor ?? (props.selected ? theme.color.surfaceAlt : "transparent")
-  let overlay = (s: PressState) =>
-    !interactive()
-      ? "transparent"
-      : s.pressed
-        ? theme.color.overlayPressed
-        : s.hovered && policy.interaction !== "touch"
-          ? theme.color.overlayHover
-          : "transparent"
   let radius = () => styled().borderRadius ?? theme.radius.sm
 
   // Resolved once via children(): the typeof probe and the mount site must
@@ -95,18 +88,22 @@ export function Item(props: ItemProps) {
       focusable={(props.focusable ?? true) && interactive()}
       pointerEvents={props.disabled ? "none" : undefined}
     >
-      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={bg()} radius={radius()} />
-      <d-rect color={overlay(press.state())} radius={radius()} />
+      <d-rect transition={withTransitionDefaults(split().background, colorFade())} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={bg()} radius={radius()} />
+      <PressFeedback
+        pressed={interactive() && press.pressed()}
+        hovered={interactive() && press.hovered() && policy.interaction !== "touch"}
+        radius={radius()}
+      />
       {props.startContent}
       <view flexDirection="column" flexGrow={1} flexShrink={1} gap={Math.round(space("sm") / 2)}>
         <Show when={labelIsText()} fallback={label()}>
-          <text color={theme.color.text} {...typeStyle("body")} maxLines={1}>
+          <text transition={colorFade()} color={theme.color.text} {...typeStyle("body")} maxLines={1}>
             {label()}
           </text>
         </Show>
         <Show when={props.description != null}>
           <Show when={descriptionIsText()} fallback={description()}>
-            <text color={theme.color.textMuted} {...typeStyle("body")} maxLines={1}>
+            <text transition={colorFade()} color={theme.color.textMuted} {...typeStyle("body")} maxLines={1}>
               {description()}
             </text>
           </Show>

package/src/modal.tsx

@@ -2,6 +2,7 @@ import { createPortal, onCleanup } from "@solidrt/core"
 import type { Color, PointerEvent } from "@solidrt/core"
 import { theme } from "./theme"
 import { pushNavScope } from "./focus-nav"
+import { colorFade, popupFade } from "./motion"
 
 export interface ModalProps {
   // Called when the backdrop (the area around the content) is pressed, unless
@@ -40,6 +41,9 @@ export function Modal(props: ModalProps) {
   let popNavScope: (() => void) | null = null
   onCleanup(() => popNavScope?.())
 
+  // The whole overlay (scrim and content together) fades in at mount and
+  // out on removal via popupFade; an exiting modal is hit-test invisible,
+  // so a press during the fade-out reaches what is behind it.
   return createPortal(
     <view
       ref={(n: { id: number }) => {
@@ -52,6 +56,8 @@ export function Modal(props: ModalProps) {
       bottom={0}
       alignItems="center"
       justifyContent="center"
+      opacity={1}
+      transition={popupFade()}
     >
       <view
         position="absolute"
@@ -61,7 +67,7 @@ export function Modal(props: ModalProps) {
         bottom={0}
         onPointerDown={dismiss}
       >
-        <d-rect color={props.backdropColor ?? theme.color.scrim} />
+        <d-rect transition={colorFade()} color={props.backdropColor ?? theme.color.scrim} />
       </view>
       {props.children}
     </view>