fix: stabilize kumo ui components

app/(app)/app/template.tsx

@@ -0,0 +1,7 @@
+type AppTemplateProps = {
+  children: React.ReactNode;
+};
+
+export default function AppTemplate({ children }: AppTemplateProps): React.ReactElement {
+  return <div className="route-transition min-h-full">{children}</div>;
+}

app/globals.css

@@ -101,6 +101,17 @@ a,
   }
 }
 
+@keyframes route-transition {
+  from {
+    opacity: 0;
+    transform: translateY(0.375rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @keyframes loading-progress {
   0% {
     transform: translateX(-100%);
@@ -128,6 +139,10 @@ a,
   animation: page-enter 180ms ease-out both;
 }
 
+.route-transition {
+  animation: route-transition 180ms ease-out both;
+}
+
 .table-row-enter {
   animation: page-enter 160ms ease-out both;
 }
@@ -141,9 +156,15 @@ a,
 }
 
 .teatea-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
   min-height: 2.5rem;
   border-radius: var(--radius-md);
   font-weight: 600;
+  line-height: 1.25;
+  white-space: nowrap;
   transition:
     background-color 140ms ease,
     border-color 140ms ease,
@@ -152,8 +173,13 @@ a,
     opacity 140ms ease;
 }
 
+.teatea-button :where(svg) {
+  flex-shrink: 0;
+}
+
 .teatea-button:focus-visible,
 .teatea-control:focus-visible,
+.teatea-select-trigger:focus-visible,
 :where([data-kumo-component="Select"][data-kumo-part="trigger"]):focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 24%, transparent);
@@ -198,6 +224,7 @@ a,
 }
 
 .teatea-control,
+.teatea-select-trigger,
 :where([data-kumo-component="Select"][data-kumo-part="trigger"]) {
   min-height: 2.5rem;
   width: 100%;
@@ -207,6 +234,7 @@ a,
   color: var(--foreground);
   font-size: 0.875rem;
   font-weight: 500;
+  line-height: 1.35;
   box-shadow: 0 1px 2px color-mix(in oklch, var(--foreground) 7%, transparent);
   transition:
     background-color 140ms ease,
@@ -218,7 +246,12 @@ a,
   padding: 0.5rem 0.75rem;
 }
 
+.teatea-select-trigger,
 :where([data-kumo-component="Select"][data-kumo-part="trigger"]) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
   appearance: none;
   outline: none;
   padding: 0.5rem 0.75rem;
@@ -226,27 +259,89 @@ a,
 }
 
 .teatea-control:hover,
+.teatea-select-trigger:hover,
 :where([data-kumo-component="Select"][data-kumo-part="trigger"]):hover {
   border-color: color-mix(in oklch, var(--primary) 45%, var(--input));
   background: color-mix(in oklch, var(--secondary) 34%, white);
 }
 
+.teatea-select-trigger[data-open="true"] {
+  border-color: color-mix(in oklch, var(--primary) 58%, var(--input));
+  background: var(--card);
+}
+
 .teatea-control::placeholder {
   color: var(--muted-foreground);
 }
 
 .teatea-control:disabled,
 .teatea-button:disabled,
+.teatea-select-trigger:disabled,
 :where([data-kumo-component="Select"][data-kumo-part="trigger"][data-disabled]) {
   cursor: not-allowed;
   opacity: 0.55;
 }
 
+.teatea-select-trigger :where(svg),
 .teatea-select :where(svg),
 :where([data-kumo-component="Select"][data-kumo-part="trigger"]) :where(svg) {
   color: var(--primary);
 }
 
+.teatea-select-panel {
+  position: fixed;
+  z-index: 60;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--card);
+  color: var(--foreground);
+  padding: 0.375rem;
+  box-shadow:
+    0 18px 44px color-mix(in oklch, var(--foreground) 14%, transparent),
+    0 0 0 1px color-mix(in oklch, var(--primary) 10%, transparent);
+  animation: page-enter 120ms ease-out both;
+}
+
+.teatea-select-option {
+  display: flex;
+  min-height: 2.25rem;
+  width: 100%;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.625rem;
+  border: 0;
+  border-radius: calc(var(--radius-md) - 2px);
+  background: transparent;
+  color: var(--foreground);
+  padding: 0.5rem 0.625rem;
+  text-align: left;
+  font-size: 0.875rem;
+  outline: none;
+}
+
+.teatea-select-option[data-highlighted="true"],
+.teatea-select-option:hover {
+  background: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.teatea-select-option:focus-visible {
+  box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--ring) 36%, transparent);
+}
+
+.teatea-select-option[data-selected="true"] {
+  color: var(--primary);
+  font-weight: 600;
+}
+
+.teatea-select-option:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 :where([role="listbox"]:has([data-kumo-component="Select"][data-kumo-part="option"])) {
   z-index: 60;
   outline: none;
@@ -332,6 +427,14 @@ a,
 }
 
 .teatea-dialog {
+  inset: 0 !important;
+  height: fit-content;
+  margin: auto !important;
+  max-width: calc(100vw - 1.5rem);
+  min-width: min(calc(100vw - 1.5rem), 48rem) !important;
+  transform: none !important;
+  translate: 0 0 !important;
+  width: min(calc(100vw - 1.5rem), 48rem) !important;
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   background: var(--card);
@@ -348,8 +451,10 @@ a,
 
 @media (prefers-reduced-motion: reduce) {
   .page-enter,
+  .route-transition,
   .table-row-enter,
   .dialog-panel-enter,
+  .teatea-select-panel,
   .loading-progress {
     animation: none;
   }