feat(ui): unify motion/transition system across interactive components

Add shared easing curves and press/focus transitions for buttons, inputs,
and form controls in app.css. Refine dropdown, modal, tooltip, and
slide-over enter/leave transitions to use consistent easing and durations,
and remove the focus-visible box-shadow ring on inputs/selects in favor of
border-color transitions.

resources/css/app.css

@@ -77,6 +77,47 @@
        command palette. Lighter and consistent, replacing the old scattered
        0.45 / 0.35 / shadow-lg / shadow-sm mix. Modals keep --shadow-modal. */
     --shadow-dropdown: 0 4px 12px rgb(0 0 0 / 0.12), 0 2px 4px rgb(0 0 0 / 0.08);
+
+    /* Shared motion curves (stronger than the built-in CSS easings). Use these
+       for consistency: --ease-out for UI enter/press, --ease-drawer for
+       drawers/sheets, --ease-in-out for on-screen movement. */
+    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+/* Shared press feedback: every button-like control dips slightly on press and
+   eases back, so pressable elements feel responsive and consistent app-wide. */
+.button,
+.icon-button,
+.app-tab,
+.split-action-main,
+.split-action-caret {
+    transition-property: color, background-color, border-color, box-shadow, transform;
+    transition-timing-function: var(--ease-out);
+    transition-duration: 120ms;
+}
+
+.button:not(:disabled):active,
+.icon-button:not(:disabled):active,
+.app-tab:active,
+.split-action-main:not(:disabled):active,
+.split-action-caret:not(:disabled):active {
+    transform: scale(0.97);
+}
+
+/* Focus border/ring on any form control should ease, not snap. The accent
+   focus indicator is a border-color and/or box-shadow (ring) change, which the
+   utilities' `transition-colors` did not fully animate. Target the elements
+   themselves (covers bespoke search fields too) plus the div-based controls. */
+input,
+textarea,
+select,
+.listbox-trigger,
+.chip-input {
+    transition-property: color, background-color, border-color, box-shadow;
+    transition-timing-function: var(--ease-out);
+    transition-duration: 120ms;
 }
 
 /*
@@ -1641,7 +1682,7 @@ html[data-theme="custom"] textarea:disabled {
 .application-settings-form .input:focus-visible,
 .application-settings-form .select:focus-visible {
     border-color: var(--color-accent);
-    box-shadow: 0 0 0 1px var(--color-accent) !important;
+    box-shadow: none !important;
 }
 
 .application-settings-workspace textarea.input,
@@ -1951,6 +1992,61 @@ html[data-theme="custom"] textarea:disabled {
     flex-shrink: 0;
 }
 
+.split-action {
+    display: inline-flex;
+}
+
+.split-action-main,
+.split-action-caret {
+    @apply button-highlighted;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    height: 2rem;
+    font-size: 13px;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.split-action-main {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 0 0.625rem;
+    border-radius: 6px 0 0 6px;
+}
+
+.split-action-caret {
+    flex-shrink: 0;
+    width: 1.75rem;
+    border-left: 1px solid rgba(255, 255, 255, 0.25);
+    border-radius: 0 6px 6px 0;
+}
+
+.split-action > .split-action-main:only-of-type {
+    border-radius: 6px;
+}
+
+.split-action-main:disabled,
+.split-action-caret:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+}
+
+.split-action-main:focus-visible,
+.split-action-caret:focus-visible {
+    outline: none;
+    position: relative;
+    z-index: 1;
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 40%, transparent);
+}
+
+.application-heading-actions .split-action-main,
+.application-heading-actions .split-action-caret {
+    height: 1.75rem;
+}
+
 /* Custom listbox (replaces native <select>) */
 .listbox-trigger {
     display: flex;
@@ -2000,7 +2096,7 @@ html[data-theme="custom"] textarea:disabled {
 .listbox-trigger:focus-visible {
     outline: none;
     border-color: var(--color-accent);
-    box-shadow: 0 0 0 1px var(--color-accent);
+    box-shadow: none;
 }
 
 .listbox-panel {
@@ -2121,7 +2217,7 @@ html[data-theme="custom"] textarea:disabled {
 .searchable-listbox-search-input:focus {
     outline: none;
     border-color: var(--color-accent);
-    box-shadow: 0 0 0 1px var(--color-accent);
+    box-shadow: none;
 }
 
 /* Hide native WebKit search clear so custom clear buttons are not doubled */
@@ -3687,7 +3783,7 @@ html[data-theme="custom"] .logs-viewer-timestamp {
 
 .chip-input:focus-within {
     border-color: var(--color-accent);
-    box-shadow: 0 0 0 1px var(--color-accent);
+    box-shadow: none;
 }
 
 .chip-input input {

resources/css/utilities.css

@@ -83,12 +83,12 @@
 
     &:focus-visible {
         border-color: var(--color-accent);
-        box-shadow: 0 0 0 1px var(--color-accent);
+        box-shadow: none;
     }
 
     &:where(.dark, .dark *):focus-visible {
         border-color: var(--color-accent);
-        box-shadow: 0 0 0 1px var(--color-accent);
+        box-shadow: none;
     }
 
     &:read-only {
@@ -116,12 +116,12 @@
 
     &:focus-visible {
         border-color: var(--color-accent);
-        box-shadow: 0 0 0 1px var(--color-accent);
+        box-shadow: none;
     }
 
     &:where(.dark, .dark *):focus-visible {
         border-color: var(--color-accent);
-        box-shadow: 0 0 0 1px var(--color-accent);
+        box-shadow: none;
     }
 }
 

resources/views/components/application/configuration-sidebar.blade.php

@@ -315,7 +315,7 @@
                                         </svg>
                                     </button>
                                     <div>
-                                        <div x-show="open" x-collapse x-cloak
+                                        <div x-show="open" x-collapse.duration.200ms x-cloak
                                             class="nav-children flex flex-col gap-0.5 py-1">
                                             @foreach ($sections as $section)
                                                 <a class="menu-subitem"

resources/views/components/dropdown.blade.php

@@ -60,9 +60,15 @@
         </svg>
     </button>
 
-    <div x-ref="panel" x-show="dropdownOpen" @click.away="if (! {{ $inline ? 'true' : 'false' }}) close()" x-transition:enter="ease-out duration-200"
-        x-transition:enter-start="-translate-y-2" x-transition:enter-end="translate-y-0"
+    <div x-ref="panel" x-show="dropdownOpen" @click.away="if (! {{ $inline ? 'true' : 'false' }}) close()"
+        x-transition:enter="transition ease-out duration-150"
+        x-transition:enter-start="opacity-0 -translate-y-1 scale-[0.98]"
+        x-transition:enter-end="opacity-100 translate-y-0 scale-100"
+        x-transition:leave="transition ease-in duration-100"
+        x-transition:leave-start="opacity-100 translate-y-0 scale-100"
+        x-transition:leave-end="opacity-0 -translate-y-1 scale-[0.98]"
         :style="panelStyles" @class([
+            'origin-top' => true,
             'mt-1 w-full' => $inline,
             'absolute top-full z-50 mt-1 min-w-max max-w-[calc(100vw-1rem)] md:top-0 md:mt-6' => ! $inline,
         ]) x-cloak>

resources/views/components/forms/button.blade.php

@@ -80,6 +80,10 @@
 </button>
 @if ($authDisabled || filled($tooltip))
     <div x-ref="tip" x-show="visible" x-cloak :id="$id('button-tooltip')" role="tooltip"
+        x-transition:enter="transition-opacity ease-out duration-100"
+        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
+        x-transition:leave="transition-opacity ease-in duration-75"
+        x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
         class="auth-tooltip">
         {{ $tooltip ?: 'You do not have permission to perform this action.' }}
     </div>

resources/views/components/forms/checkbox.blade.php

@@ -49,7 +49,7 @@
             @endif
 
             <span
-                class="pointer-events-none absolute inset-0 rounded-[5px] border border-neutral-300 bg-white shadow-[inset_0_1px_1px_rgb(0_0_0/0.04)] transition-colors group-hover:border-neutral-400 peer-checked:border-coollabs peer-checked:bg-coollabs peer-focus-visible:ring-2 peer-focus-visible:ring-coollabs/25 peer-focus-visible:ring-offset-2 peer-disabled:opacity-50 dark:border-white/[0.14] dark:bg-white/[0.045] dark:shadow-none dark:group-hover:border-white/[0.22] dark:peer-checked:border-warning dark:peer-checked:bg-warning dark:peer-focus-visible:ring-warning/30 dark:peer-focus-visible:ring-offset-base"></span>
+                class="pointer-events-none absolute inset-0 rounded-[5px] border border-neutral-300 bg-white shadow-[inset_0_1px_1px_rgb(0_0_0/0.04)] transition-[color,background-color,border-color,box-shadow] duration-150 ease-out group-hover:border-neutral-400 peer-checked:border-coollabs peer-checked:bg-coollabs peer-focus-visible:ring-2 peer-focus-visible:ring-coollabs/25 peer-focus-visible:ring-offset-2 peer-disabled:opacity-50 dark:border-white/[0.14] dark:bg-white/[0.045] dark:shadow-none dark:group-hover:border-white/[0.22] dark:peer-checked:border-warning dark:peer-checked:bg-warning dark:peer-focus-visible:ring-warning/30 dark:peer-focus-visible:ring-offset-base"></span>
             <svg class="pointer-events-none absolute inset-0 m-auto size-3 scale-75 text-white opacity-0 transition-[opacity,transform] peer-checked:scale-100 peer-checked:opacity-100 dark:text-black"
                 viewBox="0 0 12 12" fill="none" aria-hidden="true">
                 <path d="m2.25 6.15 2.35 2.3 5.15-5" stroke="currentColor" stroke-width="1.8"

resources/views/components/icon-tooltip.blade.php

@@ -69,6 +69,10 @@
     },
 }" class="contents">
     <div x-ref="tooltip" x-show="visible" x-cloak role="tooltip" x-text="text"
+        x-transition:enter="transition-opacity ease-out duration-100"
+        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
+        x-transition:leave="transition-opacity ease-in duration-75"
+        x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
         :style="`left: ${x}px; top: ${y}px;`"
         :class="[below ? '' : '-translate-y-full', positioned ? 'visible' : 'invisible']"
         class="pointer-events-none fixed z-[10000] whitespace-nowrap rounded-lg border border-neutral-700 bg-neutral-900 px-2 py-1 text-xs font-medium text-white shadow-lg dark:border-white/10 dark:bg-raised">

resources/views/components/modal-confirmation.blade.php

@@ -211,14 +211,19 @@
     <template x-teleport="body">
         <div x-show="modalOpen"
             class="fixed inset-0 z-99 flex min-h-full items-center justify-center overflow-y-auto p-4" x-cloak>
-            <div x-show="modalOpen" class="absolute inset-0 bg-black/50 backdrop-blur-[2px]">
+            <div x-show="modalOpen" class="absolute inset-0 bg-black/50 backdrop-blur-[2px]"
+                x-transition:enter="transition-opacity ease-out duration-200"
+                x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
+                x-transition:leave="transition-opacity ease-in duration-150"
+                x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
             </div>
-            <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100"
-                x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
-                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
-                x-transition:leave="ease-in duration-100"
-                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
-                x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
+            <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen"
+                x-transition:enter="transition ease-out duration-200"
+                x-transition:enter-start="opacity-0 scale-95"
+                x-transition:enter-end="opacity-100 scale-100"
+                x-transition:leave="transition ease-in duration-150"
+                x-transition:leave-start="opacity-100 scale-100"
+                x-transition:leave-end="opacity-0 scale-95"
                 class="application-settings-form application-settings-section relative flex max-h-[calc(100dvh-2rem)] w-full flex-col lg:min-w-[36rem] lg:max-w-2xl"
                 style="box-shadow: 0 0 0 1px var(--coollabs-hairline), var(--shadow-modal)">
                 <header class="flex-nowrap!">

resources/views/components/modal-input.blade.php

@@ -39,18 +39,18 @@
         <div x-show="modalOpen"
             x-init="$watch('modalOpen', value => { if(value) { $nextTick(() => { const firstInput = $el.querySelector('input, textarea, select'); firstInput?.focus(); }) } })"
             class="fixed inset-0 z-99 overflow-y-auto">
-            <div x-show="modalOpen" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0"
-                x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-100"
+            <div x-show="modalOpen" x-transition:enter="transition-opacity ease-out duration-200" x-transition:enter-start="opacity-0"
+                x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-in duration-150"
                 x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
                 class="absolute inset-0 w-full h-full bg-black/50 backdrop-blur-[2px]"></div>
             <div @if ($closeOutside) @click.self="modalOpen=false" @endif class="relative flex min-h-full items-start justify-center p-2 sm:items-center sm:p-4">
-                <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen"
-                    x-transition:enter="ease-out duration-100"
-                    x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
-                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
-                    x-transition:leave="ease-in duration-100"
-                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
-                    x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
+                <div id="{{ $modalId }}" x-show="modalOpen" x-trap.inert.noscroll="modalOpen"
+                    x-transition:enter="transition ease-out duration-200"
+                    x-transition:enter-start="opacity-0 scale-95"
+                    x-transition:enter-end="opacity-100 scale-100"
+                    x-transition:leave="transition ease-in duration-150"
+                    x-transition:leave-start="opacity-100 scale-100"
+                    x-transition:leave-end="opacity-0 scale-95"
                     @class([
                         'application-settings-form application-settings-section relative flex max-h-[calc(100dvh-2rem)] w-full flex-col overflow-hidden',
                         'lg:w-[95vw]! lg:max-w-7xl!' => $isLarge,

resources/views/components/slide-over.blade.php

@@ -16,15 +16,19 @@ x-init="$watch('slideOverOpen', value => {
         <div x-show="slideOverOpen" @if (!$closeWithX) @keydown.window.escape="slideOverOpen=false" @endif
             class="relative z-99 ">
             <div x-show="slideOverOpen" @if (!$closeWithX) @click="slideOverOpen = false" @endif
+                x-transition:enter="transition-opacity ease-out duration-300"
+                x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
+                x-transition:leave="transition-opacity ease-in duration-200"
+                x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
                 class="fixed inset-0 dark:bg-black/60 backdrop-blur-xs"></div>
             <div class="fixed inset-0 overflow-hidden">
                 <div class="absolute inset-0 overflow-hidden ">
                     <div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
                         <div x-show="slideOverOpen"
                             @if (!$closeWithX) @click.away="slideOverOpen = false" @endif
-                            x-transition:enter="transform transition ease-in-out duration-100 sm:duration-300"
+                            x-transition:enter="transform transition ease-[cubic-bezier(0.32,0.72,0,1)] duration-200 sm:duration-300"
                             x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
-                            x-transition:leave="transform transition ease-in-out duration-100 sm:duration-300"
+                            x-transition:leave="transform transition ease-in duration-200"
                             x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
                             @class([
                                 'max-w-xl w-screen' => !$fullScreen,

resources/views/components/table/dropdown.blade.php

@@ -36,7 +36,13 @@
     </div>
 
     <div x-ref="panel" x-show="open" x-cloak :style="panelStyle"
-        class="listbox-panel fixed! right-auto! bottom-auto! z-[90]! mt-0! {{ $panelClass }}" role="{{ $role }}"
+        x-transition:enter="transition ease-out duration-150"
+        x-transition:enter-start="opacity-0 -translate-y-1 scale-[0.98]"
+        x-transition:enter-end="opacity-100 translate-y-0 scale-100"
+        x-transition:leave="transition ease-in duration-100"
+        x-transition:leave-start="opacity-100 translate-y-0 scale-100"
+        x-transition:leave-end="opacity-0 -translate-y-1 scale-[0.98]"
+        class="listbox-panel origin-top fixed! right-auto! bottom-auto! z-[90]! mt-0! {{ $panelClass }}" role="{{ $role }}"
         @if ($multiselectable) aria-multiselectable="true" @endif>
         {{ $slot }}
     </div>

resources/views/components/toast.blade.php

@@ -101,7 +101,7 @@
                     x-transition:enter-end="translate-y-0 opacity-100"
                     x-transition:leave="transition ease-in duration-150"
                     x-transition:leave-start="translate-y-0 opacity-100"
-                    x-transition:leave-end="-translate-y-1 opacity-0"
+                    x-transition:leave-end="translate-y-1 opacity-0"
                     @mouseenter="pauseToast(toast)" @mouseleave="resumeToast(toast)"
                     class="relative flex w-full items-start rounded-lg group"
                     style="background: var(--coollabs-elevated); box-shadow: 0 0 0 1px var(--coollabs-line), var(--shadow-modal);"

resources/views/components/top-user-menu.blade.php

@@ -93,8 +93,13 @@
         </svg>
     </button>
 
-    <div x-show="open" x-cloak @class([
-            'top-user-menu-panel listbox-panel z-[90]! max-h-none! w-52! min-w-0! overflow-visible! animate-in fade-in zoom-in-95 duration-150',
+    <div x-show="open" x-cloak
+        x-transition:enter="transition ease-out duration-150"
+        x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
+        x-transition:leave="transition ease-in duration-100"
+        x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
+        @class([
+            'top-user-menu-panel listbox-panel z-[90]! max-h-none! w-52! min-w-0! overflow-visible!',
             'right-0! left-auto!' => ! $sidebar,
             'bottom-full! left-0! right-auto! top-auto! mb-1!' => $sidebar,
             'origin-bottom-left' => $sidebar,
@@ -124,7 +129,7 @@
                     stroke-linejoin="round" />
             </svg>
         </button>
-        <div x-show="appearanceOpen" x-collapse class="mx-1 grid gap-0.5 pb-1 pl-6">
+        <div x-show="appearanceOpen" x-collapse.duration.200ms class="mx-1 grid gap-0.5 pb-1 pl-6">
             @foreach ([
                 ['value' => 'light', 'label' => 'Light'],
                 ['value' => 'system', 'label' => 'System'],

resources/views/livewire/project/shared/get-logs.blade.php

@@ -295,7 +295,7 @@
         @if ($streamLogs)
             <div class="sr-only" wire:poll.2000ms="getLogs(true)" aria-hidden="true"></div>
         @endif
-        <div x-show="expanded" {{ $collapsible ? 'x-collapse' : '' }}
+        <div x-show="expanded" {{ $collapsible ? 'x-collapse.duration.200ms' : '' }}
             :class="fullscreen ? 'fullscreen flex flex-col !overflow-visible' : 'relative w-full mx-auto'"
             :style="fullscreen ? 'max-height: none !important; height: 100% !important;' : ''">
             <div class="runtime-log-panel"

resources/views/livewire/source/github/create.blade.php

@@ -36,7 +36,7 @@
                     <polyline points="6 9 12 15 18 9"></polyline>
                 </svg>
             </button>
-            <div x-cloak x-show="open" x-collapse class="border-t border-neutral-200 px-3 py-3 dark:border-white/[0.08]">
+            <div x-cloak x-show="open" x-collapse.duration.200ms class="border-t border-neutral-200 px-3 py-3 dark:border-white/[0.08]">
                 <div class="grid gap-4 sm:grid-cols-2">
                     <x-forms.input id="html_url" label="HTML URL" required
                         helper="For GitHub Enterprise, enter your instance URL (e.g. https://github.example.com)." />

resources/views/livewire/source/gitlab/change.blade.php

@@ -275,7 +275,7 @@
                                 <polyline points="6 9 12 15 18 9"></polyline>
                             </svg>
                         </button>
-                        <div x-cloak x-show="open" x-collapse
+                        <div x-cloak x-show="open" x-collapse.duration.200ms
                             class="mt-3 grid gap-4 rounded-lg border border-neutral-200 p-3 lg:grid-cols-2 dark:border-white/[0.08]">
                             <x-forms.input id="htmlUrl" label="GitLab URL"
                                 helper="Only change this for self-hosted GitLab (e.g. https://gitlab.example.com)." />

resources/views/livewire/source/gitlab/create.blade.php

@@ -36,7 +36,7 @@
                     <polyline points="6 9 12 15 18 9"></polyline>
                 </svg>
             </button>
-            <div x-cloak x-show="open" x-collapse class="border-t border-neutral-200 px-3 py-3 dark:border-white/[0.08]">
+            <div x-cloak x-show="open" x-collapse.duration.200ms class="border-t border-neutral-200 px-3 py-3 dark:border-white/[0.08]">
                 <div class="grid gap-4 sm:grid-cols-2">
                     <x-forms.input id="html_url" label="GitLab URL" required
                         helper="For self-hosted GitLab, enter your instance URL (e.g. https://gitlab.example.com)." />