@agent-native/core 0.98.4 → 0.98.5

package/corpus/templates/forms/app/global.css

@@ -28,6 +28,21 @@
   --input: 0 0% 90%;
   --ring: 0 0% 40%;
   --radius: 0.5rem;
+  --forms-radius-control: 0.625rem;
+  --forms-radius-surface: 0.75rem;
+  --forms-radius-floating: 1rem;
+  --forms-shadow-surface:
+    0 0 0 1px hsl(var(--foreground) / 0.04),
+    0 1px 2px -1px hsl(var(--foreground) / 0.08);
+  --forms-shadow-surface-hover:
+    0 0 0 1px hsl(var(--foreground) / 0.08),
+    0 2px 6px -3px hsl(var(--foreground) / 0.1);
+  --forms-shadow-control: 0 0 0 1px hsl(var(--foreground) / 0.035);
+  --forms-shadow-floating:
+    0 0 0 1px hsl(var(--foreground) / 0.06),
+    0 6px 16px -10px hsl(var(--foreground) / 0.12);
+  --forms-shadow-focus:
+    0 0 0 3px hsl(var(--ring) / 0.18), 0 0 0 1px hsl(var(--ring) / 0.55);
 
   --sidebar-background: 0 0% 97%;
   --sidebar-foreground: 0 0% 45%;
@@ -59,6 +74,12 @@
   --border: 0 0% 24%;
   --input: 0 0% 24%;
   --ring: 0 0% 60%;
+  --forms-shadow-surface: 0 0 0 1px hsl(var(--foreground) / 0.08);
+  --forms-shadow-surface-hover: 0 0 0 1px hsl(var(--foreground) / 0.14);
+  --forms-shadow-control: 0 0 0 1px hsl(var(--foreground) / 0.07);
+  --forms-shadow-floating: 0 0 0 1px hsl(var(--foreground) / 0.1);
+  --forms-shadow-focus:
+    0 0 0 3px hsl(var(--ring) / 0.2), 0 0 0 1px hsl(var(--ring) / 0.65);
 
   --sidebar-background: 0 0% 10%;
   --sidebar-foreground: 0 0% 60%;
@@ -94,6 +115,66 @@
   background: hsl(var(--muted-foreground) / 0.4);
 }
 
+.forms-list-shell,
+.forms-selection-toolbar,
+.forms-settings-card {
+  border-radius: var(--forms-radius-surface);
+  box-shadow: var(--forms-shadow-surface);
+}
+
+.forms-settings-card {
+  border: 0;
+}
+
+.forms-list-shell {
+  transition-property: box-shadow;
+  transition-duration: 180ms;
+  transition-timing-function: ease-out;
+}
+
+.forms-list-shell:hover,
+.forms-settings-card:hover {
+  box-shadow: var(--forms-shadow-surface-hover);
+}
+
+.forms-selection-toolbar {
+  transition-property: box-shadow;
+  transition-duration: 150ms;
+  transition-timing-function: ease-out;
+}
+
+.forms-list-row {
+  transition-property: background-color, box-shadow, opacity;
+  transition-duration: 150ms;
+  transition-timing-function: ease-out;
+}
+
+.forms-list-row:hover {
+  box-shadow: var(--forms-shadow-control);
+}
+
+.forms-list-row:focus-visible {
+  outline: none;
+  box-shadow: var(--forms-shadow-focus);
+}
+
+.forms-empty-state {
+  box-shadow: var(--forms-shadow-control);
+}
+
+.forms-sidebar-nav-item {
+  border-radius: var(--forms-radius-control);
+}
+
+.forms-sidebar-nav-item:hover {
+  box-shadow: var(--forms-shadow-control);
+}
+
+.forms-new-form-popover {
+  border: 0;
+  box-shadow: var(--forms-shadow-floating);
+}
+
 .forms-ask-chat-panel {
   width: 100%;
 }
@@ -122,11 +203,12 @@
 
 @container agent-native-main (min-width: 720px) {
   .forms-list-skeleton-row {
-    grid-template-columns: minmax(0, 1fr) 120px 120px 80px;
+    grid-template-columns: minmax(0, 1fr) 100px 110px 140px 88px 40px;
+    align-items: center;
   }
 
   .forms-list-row {
-    grid-template-columns: minmax(0, 1fr) 110px 140px 88px 40px;
+    grid-template-columns: minmax(0, 1fr) 100px 110px 140px 88px 40px;
     align-items: center;
   }
 }
@@ -150,14 +232,36 @@
 }
 
 .forms-ask-chat-panel .agent-composer-root--hero {
-  border-radius: 1.25rem;
+  border-radius: var(--forms-radius-floating);
   background: hsl(var(--background));
-  box-shadow: none;
+  box-shadow: var(--forms-shadow-floating);
+  transition-property: border-color, box-shadow, transform;
+  transition-duration: 180ms;
+  transition-timing-function: ease-out;
+}
+
+.forms-ask-chat-panel .agent-composer-root--hero:hover {
+  box-shadow: var(--forms-shadow-surface-hover);
+  transform: translateY(-1px);
 }
 
 .forms-ask-chat-panel .agent-composer-root--hero:focus-within {
   border-color: hsl(var(--ring) / 0.9);
-  box-shadow: none;
+  box-shadow: var(--forms-shadow-focus), var(--forms-shadow-floating);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .forms-list-shell,
+  .forms-selection-toolbar,
+  .forms-list-row,
+  .forms-sidebar-nav-item,
+  .forms-ask-chat-panel .agent-composer-root--hero {
+    transition: none;
+  }
+
+  .forms-ask-chat-panel .agent-composer-root--hero:hover {
+    transform: none;
+  }
 }
 
 .forms-chat-intro {
@@ -203,6 +307,7 @@
   border: 1px solid hsl(var(--border));
   border-radius: 999px;
   background: hsl(var(--background) / 0.78);
+  box-shadow: var(--forms-shadow-control);
   padding: 0.375rem 0.625rem;
   color: hsl(var(--muted-foreground));
   font-size: 0.75rem;

package/corpus/templates/forms/app/pages/AskPage.tsx

@@ -49,15 +49,15 @@ export function AskPage() {
             <h1>{t("home.heading")}</h1>
             <p>{t("home.description")}</p>
             <div className="forms-chat-pill-row" aria-hidden="true">
-              <span>
+              <span className="forms-chat-pill">
                 <IconDatabase className="size-3.5" />
                 {t("home.pillForms")}
               </span>
-              <span>
+              <span className="forms-chat-pill">
                 <IconChartBar className="size-3.5" />
                 {t("home.pillAnalytics")}
               </span>
-              <span>
+              <span className="forms-chat-pill">
                 <IconSettings className="size-3.5" />
                 {t("home.pillConfiguration")}
               </span>

package/corpus/templates/forms/app/pages/FormBuilderPage.tsx

@@ -21,6 +21,7 @@ import {
   IconPlus,
   IconChevronDown,
   IconCopy,
+  IconArrowLeft,
   IconArrowUp,
   IconArrowDown,
   IconArrowsSort,
@@ -333,7 +334,21 @@ export function FormBuilderPage() {
       <div className="flex flex-col h-full">
         {/* Top bar */}
         <div className="flex items-center justify-between border-b border-border ps-12 pe-2 sm:px-4 md:ps-4 h-14 shrink-0 min-w-0">
-          <div className="flex items-center gap-3 min-w-0 flex-1">
+          <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-10 shrink-0 active:scale-[0.96]"
+                  onClick={() => navigate("/forms")}
+                  aria-label={t("builder.backToForms")}
+                >
+                  <IconArrowLeft className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{t("builder.backToForms")}</TooltipContent>
+            </Tooltip>
             <Skeleton className="h-5 w-48" />
             <Skeleton className="h-4 w-14 rounded-full" />
           </div>
@@ -538,7 +553,21 @@ export function FormBuilderPage() {
       {codeRequiredDialog}
       {/* Top bar */}
       <div className="flex items-center justify-between border-b border-border ps-12 pe-2 sm:px-4 md:ps-4 h-14 shrink-0 min-w-0">
-        <div className="flex items-center gap-2 sm:gap-3 relative min-w-0 flex-1 me-2">
+        <div className="flex items-center gap-1 sm:gap-2 relative min-w-0 flex-1 me-2">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-10 shrink-0 active:scale-[0.96]"
+                onClick={() => navigate("/forms")}
+                aria-label={t("builder.backToForms")}
+              >
+                <IconArrowLeft className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("builder.backToForms")}</TooltipContent>
+          </Tooltip>
           <span
             ref={titleMeasureRef}
             aria-hidden
@@ -574,7 +603,12 @@ export function FormBuilderPage() {
           {form.status === "published" && (
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon" className="h-8 w-8" asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-10 w-10 active:scale-[0.96] motion-reduce:active:scale-100"
+                  asChild
+                >
                   <a
                     href={appPath(`/f/${form.slug}`)}
                     target="_blank"
@@ -596,7 +630,7 @@ export function FormBuilderPage() {
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="h-8 w-8"
+                  className="h-10 w-10 active:scale-[0.96] motion-reduce:active:scale-100"
                   onClick={copyShareLink}
                   disabled={form.status !== "published"}
                   aria-label={
@@ -605,11 +639,24 @@ export function FormBuilderPage() {
                       : t("builder.publishBeforeCopyPublicFormLink")
                   }
                 >
-                  {copied ? (
-                    <IconCheck className="h-4 w-4" />
-                  ) : (
-                    <IconCopy className="h-4 w-4" />
-                  )}
+                  <span className="relative inline-flex h-4 w-4 items-center justify-center">
+                    <IconCopy
+                      className={cn(
+                        "absolute h-4 w-4 transition-[opacity,scale] duration-200 ease-out",
+                        copied
+                          ? "scale-[0.25] opacity-0"
+                          : "scale-100 opacity-100",
+                      )}
+                    />
+                    <IconCheck
+                      className={cn(
+                        "absolute h-4 w-4 transition-[opacity,scale] duration-200 ease-out",
+                        copied
+                          ? "scale-100 opacity-100"
+                          : "scale-[0.25] opacity-0",
+                      )}
+                    />
+                  </span>
                 </Button>
               </span>
             </TooltipTrigger>
@@ -629,7 +676,7 @@ export function FormBuilderPage() {
                   resourceType="form"
                   resourceId={form.id}
                   resourceTitle={form.title}
-                  triggerClassName="h-9 border-input bg-transparent px-3 text-xs hover:bg-accent hover:text-accent-foreground"
+                  triggerClassName="h-10 border-input bg-transparent px-3 text-xs active:scale-[0.96] hover:bg-accent hover:text-accent-foreground"
                   shareUrl={publishedFormUrl}
                   shareUrlLabel={t("builder.publicResponseLink")}
                   shareUrlDescription={t(
@@ -662,7 +709,7 @@ export function FormBuilderPage() {
           {canEdit && form.status !== "published" && (
             <Button
               size="sm"
-              className="text-xs"
+              className="relative text-xs before:absolute before:-inset-y-0.5 before:content-[''] active:scale-[0.96] motion-reduce:active:scale-100"
               onClick={handleTogglePublish}
               disabled={pendingStatus !== null}
             >
@@ -684,7 +731,7 @@ export function FormBuilderPage() {
                     <Button
                       variant="outline"
                       size="icon"
-                      className="h-9 w-9 bg-transparent"
+                      className="h-10 w-10 bg-transparent active:scale-[0.96] motion-reduce:active:scale-100"
                       aria-label={t("forms.formActions")}
                     >
                       <IconDots className="h-4 w-4" />
@@ -728,13 +775,19 @@ export function FormBuilderPage() {
           value={activeBuilderTab}
           onValueChange={canEdit ? setBuilderTab : undefined}
         >
-          <TabsList className="w-max sm:w-auto">
-            <TabsTrigger value="edit" className="text-xs">
+          <TabsList className="w-max rounded-lg shadow-[inset_0_1px_0_hsl(var(--foreground)/0.04)] sm:w-auto">
+            <TabsTrigger
+              value="edit"
+              className="rounded-md text-xs transition-[color,background-color,box-shadow,transform] active:scale-[0.96]"
+            >
               {canEdit ? t("builder.editTab") : t("builder.previewTab")}
             </TabsTrigger>
             {canEdit && (
               <>
-                <TabsTrigger value="responses" className="text-xs">
+                <TabsTrigger
+                  value="responses"
+                  className="rounded-md text-xs transition-[color,background-color,box-shadow,transform] active:scale-[0.96]"
+                >
                   {t("builder.resultsTab")}
                   {(form.responseCount ?? 0) > 0 && (
                     <Badge
@@ -745,10 +798,16 @@ export function FormBuilderPage() {
                     </Badge>
                   )}
                 </TabsTrigger>
-                <TabsTrigger value="settings" className="text-xs">
+                <TabsTrigger
+                  value="settings"
+                  className="rounded-md text-xs transition-[color,background-color,box-shadow,transform] active:scale-[0.96]"
+                >
                   {t("header.settings")}
                 </TabsTrigger>
-                <TabsTrigger value="integrations" className="text-xs">
+                <TabsTrigger
+                  value="integrations"
+                  className="rounded-md text-xs transition-[color,background-color,box-shadow,transform] active:scale-[0.96]"
+                >
                   {t("builder.integrationsTab")}
                 </TabsTrigger>
               </>
@@ -972,18 +1031,18 @@ function BuilderContent({
                         )
                       }
                       className={cn(
-                        "group relative rounded-lg border p-4 cursor-pointer",
+                        "group relative cursor-pointer rounded-lg border p-4 transition-[background-color,border-color,box-shadow,opacity] duration-150 ease-out",
                         selectedFieldId === field.id
-                          ? "border-primary ring-1 ring-primary/20 bg-card"
-                          : "border-border bg-card hover:border-primary/30",
+                          ? "border-primary bg-card shadow-[0_1px_3px_-2px_hsl(var(--foreground)/0.16)] ring-1 ring-primary/20"
+                          : "border-transparent bg-transparent shadow-none hover:border-border/80 hover:bg-card/70 hover:shadow-[0_1px_3px_-2px_hsl(var(--foreground)/0.12)]",
                         dragIdx === idx && "opacity-50",
                       )}
                     >
                       <div
-                        className="absolute -start-3 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 cursor-grab hidden sm:block"
+                        className="absolute -start-5 top-1/2 hidden size-10 -translate-y-1/2 items-center justify-center cursor-grab text-muted-foreground opacity-0 transition-[color,opacity,transform] duration-150 ease-out group-hover:opacity-100 group-focus-within:opacity-100 hover:text-foreground sm:flex"
                         aria-label={t("builder.dragToReorder")}
                       >
-                        <IconGripVertical className="h-4 w-4 text-muted-foreground" />
+                        <IconGripVertical className="h-4 w-4 translate-x-px" />
                       </div>
                       <FieldRenderer field={field} preview />
                     </div>
@@ -992,7 +1051,7 @@ function BuilderContent({
                     side="right"
                     align="start"
                     sideOffset={12}
-                    className="w-[calc(100vw-2rem)] sm:w-72 max-h-[70vh] sm:max-h-[520px] overflow-auto p-0"
+                    className="w-[calc(100vw-2rem)] max-h-[70vh] overflow-auto rounded-lg p-0 shadow-md sm:w-72 sm:max-h-[520px]"
                     onOpenAutoFocus={(e) => e.preventDefault()}
                     onInteractOutside={(e) => {
                       // Don't close when interacting with dropdowns portaled to body
@@ -1016,7 +1075,7 @@ function BuilderContent({
               ) : (
                 <div
                   key={field.id}
-                  className="relative rounded-lg border border-border bg-card p-4"
+                  className="relative rounded-lg border border-transparent bg-transparent p-4 transition-[background-color,border-color] duration-150 hover:border-border/70 hover:bg-card/70"
                 >
                   <FieldRenderer field={field} preview />
                 </div>
@@ -1030,10 +1089,13 @@ function BuilderContent({
             <div className="mt-4 flex items-center gap-2">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="outline" className="gap-2">
-                    <IconPlus className="h-4 w-4" />
+                  <Button
+                    variant="outline"
+                    className="gap-2 active:scale-[0.96]"
+                  >
+                    <IconPlus className="h-4 w-4 shrink-0" />
                     {t("builder.addField")}
-                    <IconChevronDown className="h-3 w-3" />
+                    <IconChevronDown className="h-3.5 w-3.5 translate-y-px" />
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="start" className="w-48">
@@ -1056,6 +1118,7 @@ function BuilderContent({
                   <Button
                     variant="outline"
                     size="icon"
+                    className="active:scale-[0.96]"
                     aria-label={t("builder.editFormWithAi")}
                   >
                     <IconMessage className="h-4 w-4" />
@@ -1065,7 +1128,7 @@ function BuilderContent({
                   side="top"
                   align="end"
                   sideOffset={8}
-                  className="w-[calc(100vw-2rem)] sm:w-80 p-0 rounded-xl"
+                  className="w-[calc(100vw-2rem)] rounded-lg p-0 shadow-md sm:w-80"
                   onOpenAutoFocus={(e) => {
                     e.preventDefault();
                     agentPromptRef.current?.focus();
@@ -1100,7 +1163,7 @@ function BuilderContent({
                     <Button
                       variant="secondary"
                       size="icon"
-                      className="h-7 w-7"
+                      className="h-10 w-10 active:scale-[0.96] motion-reduce:active:scale-100"
                       onClick={onSubmitAgent}
                       disabled={
                         !agentPrompt.trim() ||
@@ -1272,7 +1335,7 @@ function ResultsContent({ formId, form }: { formId: string; form: any }) {
           variant="outline"
           size="sm"
           onClick={() => refetch()}
-          className="gap-2"
+          className="gap-2 active:scale-[0.96]"
         >
           <IconRefresh className="h-3.5 w-3.5" />
           {t("common.retry")}
@@ -1460,18 +1523,33 @@ function ResultsSortableHeader({
     <button
       type="button"
       onClick={onClick}
-      className="inline-flex items-center gap-1 hover:text-foreground transition-colors cursor-pointer"
+      className="relative inline-flex cursor-pointer items-center gap-1 transition-[color,transform] duration-150 ease-out hover:text-foreground active:scale-[0.96] motion-reduce:active:scale-100 before:absolute before:-inset-3 before:content-['']"
     >
       <span>{label}</span>
-      {active ? (
-        dir === "asc" ? (
-          <IconArrowUp className="h-3 w-3" />
-        ) : (
-          <IconArrowDown className="h-3 w-3" />
-        )
-      ) : (
-        <IconArrowsSort className="h-3 w-3 opacity-40" />
-      )}
+      <span className="relative inline-flex h-3 w-3 items-center justify-center">
+        <IconArrowUp
+          className={cn(
+            "absolute h-3 w-3 transition-[opacity,scale] duration-200 ease-out",
+            active && dir === "asc"
+              ? "scale-100 opacity-100"
+              : "scale-[0.25] opacity-0",
+          )}
+        />
+        <IconArrowDown
+          className={cn(
+            "absolute h-3 w-3 transition-[opacity,scale] duration-200 ease-out",
+            active && dir === "desc"
+              ? "scale-100 opacity-100"
+              : "scale-[0.25] opacity-0",
+          )}
+        />
+        <IconArrowsSort
+          className={cn(
+            "absolute h-3 w-3 transition-[opacity,scale] duration-200 ease-out",
+            active ? "scale-[0.25] opacity-0" : "scale-100 opacity-40",
+          )}
+        />
+      </span>
     </button>
   );
 }
@@ -1532,7 +1610,7 @@ function SettingsEditor({
         />
       </div>
 
-      <div className="flex items-start justify-between gap-4 rounded-lg border p-3">
+      <div className="flex items-start justify-between gap-4 rounded-lg border border-border/60 bg-card p-3">
         <div className="space-y-1">
           <Label htmlFor="anonymous-responses" className="text-xs">
             {t("builder.settings.anonymousResponses")}
@@ -1549,7 +1627,11 @@ function SettingsEditor({
         />
       </div>
 
-      <Button onClick={() => onSave(settings)} className="w-full" size="sm">
+      <Button
+        onClick={() => onSave(settings)}
+        className="w-full active:scale-[0.96]"
+        size="sm"
+      >
         {t("builder.settings.saveSettings")}
       </Button>
     </div>
@@ -1620,12 +1702,12 @@ function IntegrationBrandMark({
     return (
       <div
         className={cn(
-          "flex h-10 w-10 items-center justify-center rounded-xl border border-border/70 bg-background shadow-sm",
+          "flex h-10 w-10 items-center justify-center rounded-lg border border-border/70 bg-background",
           className,
         )}
       >
         <img
-          src={meta.logoSrc}
+          src={appPath(meta.logoSrc)}
           alt={t("builder.integrations.logoAlt", { label })}
           className="h-5 w-5 object-contain"
         />
@@ -1636,7 +1718,7 @@ function IntegrationBrandMark({
   return (
     <div
       className={cn(
-        "flex h-10 w-10 items-center justify-center rounded-xl border border-border/70 bg-foreground text-background shadow-sm",
+        "flex h-10 w-10 items-center justify-center rounded-lg border border-border/70 bg-foreground text-background",
         className,
       )}
     >
@@ -1713,7 +1795,7 @@ function IntegrationsEditor({
       </div>
 
       {!hasIntegrations && (
-        <div className="rounded-xl border border-dashed border-border bg-muted/20 p-5">
+        <div className="rounded-lg border border-border/60 bg-muted/20 p-5">
           <div className="space-y-4">
             <div className="space-y-2">
               <h3 className="text-sm font-medium">
@@ -1735,7 +1817,7 @@ function IntegrationsEditor({
                   key={type}
                   type="button"
                   onClick={() => addIntegration(type)}
-                  className="cursor-pointer rounded-lg border bg-background p-3 text-start hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring min-h-[44px]"
+                  className="min-h-[44px] cursor-pointer rounded-lg border border-border/60 bg-background p-3 text-start transition-[background-color,border-color,box-shadow] duration-150 ease-out hover:border-primary/30 hover:bg-muted/40 hover:shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring active:scale-[0.96] motion-reduce:active:scale-100"
                 >
                   <div className="flex items-center gap-3">
                     <IntegrationBrandMark type={type} className="h-9 w-9" />
@@ -1767,7 +1849,7 @@ function IntegrationsEditor({
         return (
           <div
             key={integration.id}
-            className="rounded-xl border bg-card p-4 space-y-3"
+            className="space-y-3 rounded-lg border border-border/60 bg-card p-4"
           >
             <div className="flex items-start gap-3">
               <IntegrationBrandMark type={integration.type} />
@@ -1801,7 +1883,7 @@ function IntegrationsEditor({
               <Button
                 variant="ghost"
                 size="icon"
-                className="h-8 w-8 shrink-0 text-muted-foreground hover:text-destructive"
+                className="h-10 w-10 shrink-0 text-muted-foreground hover:text-destructive active:scale-[0.96] motion-reduce:active:scale-100"
                 onClick={() => removeIntegration(integration.id)}
               >
                 <IconTrash className="h-4 w-4" />
@@ -1849,7 +1931,7 @@ function IntegrationsEditor({
           <Button
             variant="outline"
             size="sm"
-            className="h-11 w-full rounded-xl"
+            className="h-11 w-full rounded-lg active:scale-[0.96]"
           >
             <IconPlus className="h-3.5 w-3.5 me-1.5" />
             {hasIntegrations
@@ -1869,7 +1951,7 @@ function IntegrationsEditor({
                 key={type}
                 onClick={() => addIntegration(type)}
                 disabled={selectedTypes.has(type)}
-                className="rounded-md px-3 py-3"
+                className="px-3 py-3"
               >
                 <div className="flex items-center gap-3">
                   <IntegrationBrandMark type={type} />
@@ -1900,7 +1982,7 @@ function IntegrationsEditor({
         <div className="space-y-2">
           <Button
             onClick={() => onSave(settings)}
-            className="h-10 w-full"
+            className="h-10 w-full active:scale-[0.96]"
             size="sm"
           >
             {saveLabel}