@agent-native/core 0.98.3 → 0.98.5

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

@@ -187,8 +187,8 @@ export function FormFillPage() {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-background py-10 px-4">
-        <div className="max-w-xl mx-auto space-y-6">
+      <div className="min-h-screen bg-muted/30 px-4 py-10">
+        <div className="mx-auto max-w-xl space-y-6 rounded-2xl border border-border/80 bg-background p-5 shadow-sm sm:p-8">
           <div className="space-y-3">
             <Skeleton className="h-8 w-2/3" />
             <Skeleton className="h-4 w-full" />
@@ -210,8 +210,19 @@ export function FormFillPage() {
 
   if (error || !form) {
     return (
-      <div className="min-h-screen bg-background flex items-center justify-center p-4">
-        <div className="text-center">
+      <div
+        className={cn(
+          "flex min-h-screen items-center justify-center p-4",
+          embedded ? "bg-background" : "bg-muted/30",
+        )}
+      >
+        <div
+          className={cn(
+            "text-center",
+            !embedded &&
+              "max-w-md rounded-2xl border border-border/80 bg-background p-8 shadow-sm sm:p-10",
+          )}
+        >
           <h1 className="text-2xl font-semibold mb-2">
             {t("publicForm.formNotFound")}
           </h1>
@@ -222,7 +233,7 @@ export function FormFillPage() {
             variant="outline"
             size="sm"
             onClick={() => window.location.reload()}
-            className="gap-2"
+            className="min-h-10 gap-2 transition-[scale,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none"
           >
             <IconRefresh className="h-3.5 w-3.5" />
             {t("publicForm.tryAgain")}
@@ -235,8 +246,19 @@ export function FormFillPage() {
 
   if (submitted) {
     return (
-      <div className="min-h-screen bg-background flex items-center justify-center p-4">
-        <div className="text-center max-w-md">
+      <div
+        className={cn(
+          "flex min-h-screen items-center justify-center p-4",
+          embedded ? "bg-background" : "bg-muted/30",
+        )}
+      >
+        <div
+          className={cn(
+            "max-w-md text-center",
+            !embedded &&
+              "rounded-2xl border border-border/80 bg-background p-8 shadow-sm sm:p-10",
+          )}
+        >
           <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-600/10">
             <IconCircleCheck className="h-7 w-7 text-emerald-600 dark:text-emerald-400" />
           </div>
@@ -254,11 +276,22 @@ export function FormFillPage() {
   }
 
   return (
-    <div className="min-h-screen bg-background flex items-center justify-center p-3 sm:p-4 py-8 sm:py-12">
-      <div className="w-full max-w-2xl">
+    <div
+      className={cn(
+        "flex min-h-screen items-center justify-center p-3 sm:p-4 py-8 sm:py-12",
+        embedded ? "bg-background" : "bg-muted/30",
+      )}
+    >
+      <div
+        className={cn(
+          "w-full max-w-2xl",
+          !embedded &&
+            "rounded-2xl border border-border/80 bg-background p-5 shadow-sm sm:p-8",
+        )}
+      >
         {!embedded && (
           <div className="mb-3 flex justify-end">
-            <ThemeToggle className="h-8 w-8" />
+            <ThemeToggle className="h-10 w-10 transition-[scale,background-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none" />
           </div>
         )}
         {/* Form header */}
@@ -320,7 +353,7 @@ export function FormFillPage() {
 
           <Button
             type="submit"
-            className="mt-4 w-full sm:w-auto"
+            className="mt-4 min-h-11 w-full transition-[scale,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none sm:w-auto"
             size="lg"
             disabled={submitForm.isPending}
           >

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

@@ -118,7 +118,7 @@ export function FormsListPage() {
       <Button
         onClick={handleCreate}
         size="sm"
-        className="shrink-0 cursor-pointer"
+        className="min-h-10 shrink-0 cursor-pointer active:scale-[0.96] transition-[background-color,box-shadow,transform]"
       >
         <IconPlus className="h-3.5 w-3.5" />
         <span className="hidden sm:inline">{t("forms.newForm")}</span>
@@ -269,7 +269,7 @@ export function FormsListPage() {
   if (isLoading) {
     return (
       <div className="p-3 sm:p-6 max-w-5xl mx-auto">
-        <div className="overflow-hidden rounded-lg border border-border bg-card">
+        <div className="forms-list-shell overflow-hidden bg-card">
           {Array.from({ length: 6 }).map((_, i) => (
             <div
               key={i}
@@ -280,8 +280,10 @@ export function FormsListPage() {
                 <Skeleton className="h-3 w-1/2" />
               </div>
               <Skeleton className="h-5 w-20 rounded-full" />
+              <Skeleton className="h-5 w-20 rounded-full" />
+              <Skeleton className="h-4 w-24" />
               <Skeleton className="h-4 w-24" />
-              <Skeleton className="h-8 w-8 rounded-md md:ms-auto" />
+              <Skeleton className="h-10 w-10 rounded-lg md:ms-auto" />
             </div>
           ))}
         </div>
@@ -300,6 +302,7 @@ export function FormsListPage() {
           <Button
             variant="outline"
             size="sm"
+            className="min-h-10 active:scale-[0.96] transition-[background-color,box-shadow,transform]"
             onClick={() => {
               const next = encodeURIComponent(
                 window.location.pathname + window.location.search,
@@ -322,8 +325,8 @@ export function FormsListPage() {
         <Button
           variant="outline"
           size="sm"
+          className="min-h-10 gap-2 active:scale-[0.96] transition-[background-color,box-shadow,transform]"
           onClick={() => refetch()}
-          className="gap-2"
         >
           <IconRefresh className="h-3.5 w-3.5" />
           {t("common.retry")}
@@ -344,11 +347,17 @@ export function FormsListPage() {
           value={view}
           onValueChange={(v) => setView(v as "active" | "archive")}
         >
-          <TabsList>
-            <TabsTrigger value="active" className="text-xs gap-1.5">
+          <TabsList className="h-12">
+            <TabsTrigger
+              value="active"
+              className="min-h-10 gap-1.5 text-xs active:scale-[0.96] transition-[background-color,box-shadow,color,transform]"
+            >
               {t("header.forms")}
             </TabsTrigger>
-            <TabsTrigger value="archive" className="text-xs gap-1.5">
+            <TabsTrigger
+              value="archive"
+              className="min-h-10 gap-1.5 text-xs active:scale-[0.96] transition-[background-color,box-shadow,color,transform]"
+            >
               <IconArchive className="h-3.5 w-3.5" />
               {t("forms.archive")}
             </TabsTrigger>
@@ -359,7 +368,7 @@ export function FormsListPage() {
           <Button
             variant={selectionMode ? "secondary" : "ghost"}
             size="sm"
-            className="h-8 gap-1.5 text-xs"
+            className="min-h-10 gap-1.5 text-xs active:scale-[0.96] transition-[background-color,box-shadow,transform]"
             onClick={() => {
               setSelectionMode((current) => {
                 if (current) setSelectedIds(new Set());
@@ -374,7 +383,7 @@ export function FormsListPage() {
       </div>
 
       {selectionMode && forms.length > 0 && (
-        <div className="mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-border bg-muted/30 px-3 py-2">
+        <div className="forms-selection-toolbar mb-4 flex flex-wrap items-center gap-2 rounded-xl bg-muted/30 px-3 py-2">
           <span className="text-xs font-medium text-foreground">
             {t("forms.selectedCount", {
               count: selectedCount,
@@ -385,7 +394,7 @@ export function FormsListPage() {
           <Button
             variant="ghost"
             size="sm"
-            className="h-8 text-xs"
+            className="min-h-10 text-xs active:scale-[0.96] transition-[background-color,box-shadow,transform]"
             onClick={toggleSelectAll}
           >
             {allFormsSelected ? t("common.clearAll") : t("common.selectAll")}
@@ -393,7 +402,7 @@ export function FormsListPage() {
           <Button
             variant="ghost"
             size="sm"
-            className="h-8 gap-1.5 text-xs text-destructive hover:text-destructive"
+            className="min-h-10 gap-1.5 text-xs text-destructive hover:text-destructive active:scale-[0.96] transition-[background-color,box-shadow,transform]"
             onClick={() =>
               isArchive ? setBulkPurgeOpen(true) : handleBulkDelete(false)
             }
@@ -405,7 +414,7 @@ export function FormsListPage() {
           <Button
             variant="ghost"
             size="icon"
-            className="ms-auto h-8 w-8"
+            className="relative ms-auto size-10 transition-[background-color,box-shadow,transform] active:scale-[0.96] sm:size-8 sm:before:absolute sm:before:-inset-1 sm:before:content-['']"
             onClick={clearSelection}
             aria-label={t("forms.exitSelectionMode")}
           >
@@ -415,7 +424,7 @@ export function FormsListPage() {
       )}
 
       {forms.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-20 border border-dashed border-border rounded-xl">
+        <div className="forms-empty-state flex flex-col items-center justify-center rounded-xl border border-dashed border-border bg-card py-20">
           {isArchive ? (
             <>
               <h3 className="font-medium mb-1">
@@ -431,7 +440,11 @@ export function FormsListPage() {
               <p className="text-sm text-muted-foreground mb-4">
                 {t("forms.emptyDescription")}
               </p>
-              <Button onClick={handleCreate} size="sm" className="gap-2">
+              <Button
+                onClick={handleCreate}
+                size="sm"
+                className="min-h-10 gap-2 active:scale-[0.96] transition-[background-color,box-shadow,transform]"
+              >
                 <IconPlus className="h-4 w-4" />
                 {t("forms.createForm")}
               </Button>
@@ -439,7 +452,7 @@ export function FormsListPage() {
           )}
         </div>
       ) : (
-        <div className="overflow-hidden rounded-lg border border-border bg-card">
+        <div className="forms-list-shell overflow-hidden bg-card">
           {forms.map((form: any) => {
             const selected = selectedIds.has(form.id);
             const dateLabel =
@@ -515,10 +528,6 @@ export function FormsListPage() {
                       <h3 className="min-w-0 flex-1 truncate text-sm font-medium">
                         {form.title}
                       </h3>
-                      <VisibilityBadge
-                        visibility={(form as any).visibility}
-                        className="shrink-0"
-                      />
                     </div>
                     {form.description && (
                       <p className="mt-0.5 truncate text-xs text-muted-foreground">
@@ -528,6 +537,10 @@ export function FormsListPage() {
                   </div>
                 </div>
 
+                <div className="flex min-w-0 items-center">
+                  <VisibilityBadge visibility={(form as any).visibility} />
+                </div>
+
                 <div className="flex items-center md:justify-start">
                   <Badge
                     variant="outline"
@@ -558,7 +571,7 @@ export function FormsListPage() {
                         <Button
                           variant="ghost"
                           size="sm"
-                          className="h-10 w-10 sm:h-8 sm:w-8 p-0 sm:opacity-0 sm:group-hover:opacity-100 focus:opacity-100"
+                          className="relative size-10 rounded-lg p-0 transition-[background-color,opacity,transform] duration-150 ease-out active:scale-[0.96] focus:opacity-100 sm:size-8 sm:opacity-0 sm:before:absolute sm:before:-inset-1 sm:before:content-[''] sm:group-hover:opacity-100"
                           aria-label={t("forms.formActions")}
                         >
                           <IconDots className="h-4 w-4" />
@@ -695,10 +708,12 @@ export function FormsListPage() {
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+            <AlertDialogCancel className="min-h-10 active:scale-[0.96] transition-[background-color,box-shadow,transform]">
+              {t("common.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction
               onClick={handlePurge}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              className="min-h-10 bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.96] transition-[background-color,box-shadow,transform]"
             >
               {t("forms.deleteForever")}
             </AlertDialogAction>
@@ -718,13 +733,16 @@ export function FormsListPage() {
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={bulkDeletePending}>
+            <AlertDialogCancel
+              disabled={bulkDeletePending}
+              className="min-h-10 active:scale-[0.96] transition-[background-color,box-shadow,transform]"
+            >
               {t("common.cancel")}
             </AlertDialogCancel>
             <AlertDialogAction
               onClick={() => handleBulkDelete(true)}
               disabled={bulkDeletePending}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              className="min-h-10 bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.96] transition-[background-color,box-shadow,transform]"
             >
               {t("forms.deleteForever")}
             </AlertDialogAction>

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

@@ -52,7 +52,7 @@ function Metric({
   detail?: string;
 }) {
   return (
-    <div className="min-w-0 rounded-md border border-border bg-background px-3 py-2">
+    <div className="min-w-0 rounded-xl border border-border/80 bg-background px-3 py-3 shadow-sm">
       <div className="text-[11px] font-medium uppercase tracking-normal text-muted-foreground">
         {label}
       </div>
@@ -97,7 +97,7 @@ function SubmissionBars({
               <div className="flex h-40 w-full items-end rounded-sm bg-muted/40 px-0.5">
                 <div
                   className={cn(
-                    "w-full rounded-sm bg-primary/80 transition-colors",
+                    "w-full rounded-sm bg-primary/80 shadow-sm transition-[height,background-color,box-shadow] duration-300 ease-out hover:bg-primary hover:shadow-md motion-reduce:transition-none",
                     point.submissions === 0 && "bg-muted-foreground/30",
                   )}
                   style={{ height }}
@@ -121,11 +121,11 @@ function LoadingState() {
       <Skeleton className="h-10 w-72" />
       <div className="forms-response-metrics-grid grid gap-3">
         {Array.from({ length: 4 }).map((_, index) => (
-          <Skeleton key={index} className="h-20 rounded-md" />
+          <Skeleton key={index} className="h-20 rounded-xl" />
         ))}
       </div>
-      <Skeleton className="h-64 rounded-md" />
-      <Skeleton className="h-72 rounded-md" />
+      <Skeleton className="h-64 rounded-xl" />
+      <Skeleton className="h-72 rounded-xl" />
     </div>
   );
 }
@@ -160,7 +160,7 @@ export function ResponseInsightsPage() {
           type="button"
           variant="outline"
           size="sm"
-          className="gap-1.5"
+          className="min-h-10 gap-1.5 transition-[scale,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none"
           onClick={() => refetch()}
         >
           <IconRefresh className="size-3.5" />
@@ -176,7 +176,12 @@ export function ResponseInsightsPage() {
     <div className="flex min-h-full flex-col bg-background">
       <header className="flex min-h-14 shrink-0 items-center justify-between gap-3 border-b border-border pl-12 pr-3 sm:px-4 md:pl-4">
         <div className="flex min-w-0 items-center gap-2">
-          <Button variant="ghost" size="sm" asChild className="gap-1.5">
+          <Button
+            variant="ghost"
+            size="sm"
+            asChild
+            className="min-h-10 gap-1.5 transition-[scale,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none"
+          >
             <Link to="/forms">
               <IconArrowLeft className="size-3.5" />
               Forms
@@ -196,7 +201,12 @@ export function ResponseInsightsPage() {
             </div>
           </div>
         </div>
-        <Button variant="outline" size="sm" asChild className="gap-1.5">
+        <Button
+          variant="outline"
+          size="sm"
+          asChild
+          className="min-h-10 gap-1.5 transition-[scale,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none"
+        >
           <Link to={display.primaryAction.href}>
             {display.primaryAction.label}
             <IconExternalLink className="size-3.5" />
@@ -204,7 +214,7 @@ export function ResponseInsightsPage() {
         </Button>
       </header>
 
-      <main className="forms-response-insights-grid grid gap-4 p-4">
+      <main className="forms-response-insights-grid grid gap-4 bg-muted/20 p-4">
         <section className="space-y-4">
           <div className="forms-response-metrics-grid grid gap-3">
             <Metric
@@ -233,7 +243,7 @@ export function ResponseInsightsPage() {
             />
           </div>
 
-          <div className="rounded-md border border-border bg-background p-4">
+          <div className="rounded-xl border border-border/80 bg-background p-4 shadow-sm">
             <div className="mb-3 flex items-center justify-between gap-3">
               <div>
                 <h2 className="text-sm font-semibold">{chartSeries.title}</h2>
@@ -249,7 +259,7 @@ export function ResponseInsightsPage() {
           </div>
         </section>
 
-        <section className="min-w-0 rounded-md border border-border bg-background">
+        <section className="min-w-0 overflow-hidden rounded-xl border border-border/80 bg-background shadow-sm">
           <div className="flex min-h-12 items-center justify-between gap-3 border-b border-border px-3">
             <div className="min-w-0">
               <h2 className="truncate text-sm font-semibold">{table.title}</h2>
@@ -268,13 +278,13 @@ export function ResponseInsightsPage() {
           ) : (
             <div className="max-h-[calc(100vh-15rem)] overflow-auto">
               <Table>
-                <TableHeader className="sticky top-0 z-10 bg-background">
+                <TableHeader className="sticky top-0 z-10 bg-background shadow-sm">
                   <TableRow>
                     {table.columns.map((column) => (
                       <TableHead
                         key={column.key}
                         className={cn(
-                          "h-9 whitespace-nowrap px-3 text-xs",
+                          "h-11 whitespace-nowrap px-3 text-xs",
                           column.align === "right" && "text-right",
                         )}
                       >
@@ -285,12 +295,15 @@ export function ResponseInsightsPage() {
                 </TableHeader>
                 <TableBody>
                   {table.rows.map((row) => (
-                    <TableRow key={String(row.id)}>
+                    <TableRow
+                      key={String(row.id)}
+                      className="transition-[background-color] duration-150 hover:bg-muted/30 motion-reduce:transition-none"
+                    >
                       {table.columns.map((column) => (
                         <TableCell
                           key={column.key}
                           className={cn(
-                            "max-w-56 truncate px-3 py-2 text-xs",
+                            "max-w-56 truncate px-3 py-3 text-xs",
                             column.align === "right" && "text-right",
                           )}
                           title={formatCell(row[column.key])}

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

@@ -254,7 +254,7 @@ export function ResponsesPage() {
           variant="outline"
           size="sm"
           onClick={() => refetch()}
-          className="gap-2"
+          className="min-h-10 gap-2 transition-[scale,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none"
         >
           <IconRefresh className="h-3.5 w-3.5" />
           {t("common.retry")}
@@ -272,7 +272,7 @@ export function ResponsesPage() {
             variant="ghost"
             size="sm"
             asChild
-            className="gap-1.5 shrink-0"
+            className="min-h-10 shrink-0 gap-1.5 transition-[scale,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none"
           >
             <Link to={`/forms/${id}`}>
               <IconArrowLeft className="h-3.5 w-3.5" />
@@ -305,14 +305,14 @@ export function ResponsesPage() {
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
                 placeholder={t("responses.filterPlaceholder")}
-                className="h-8 pl-7 w-48 text-xs"
+                className="h-10 w-48 pl-7 text-xs transition-[background-color,border-color,box-shadow] duration-150 motion-reduce:transition-none"
               />
             </div>
           ) : null}
           <Button
             variant="outline"
             size="sm"
-            className="gap-1.5 text-xs shrink-0"
+            className="min-h-10 shrink-0 gap-1.5 text-xs transition-[scale,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none"
             onClick={exportCsv}
             disabled={filteredSorted.length === 0}
           >
@@ -332,7 +332,7 @@ export function ResponsesPage() {
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               placeholder={t("responses.filterPlaceholder")}
-              className="h-8 pl-7 text-xs"
+              className="h-10 pl-7 text-xs transition-[background-color,border-color,box-shadow] duration-150 motion-reduce:transition-none"
             />
           </div>
         </div>
@@ -371,10 +371,10 @@ export function ResponsesPage() {
                 ))}
               </colgroup>
               <thead>
-                <tr className="border-b border-border bg-muted/30">
+                <tr className="border-b border-border bg-muted/40">
                   <th
                     scope="col"
-                    className="min-w-16 px-4 py-2.5 text-left text-xs font-medium text-muted-foreground whitespace-nowrap"
+                    className="min-w-16 px-4 py-3 text-left text-xs font-medium text-muted-foreground whitespace-nowrap"
                   >
                     #
                   </th>
@@ -423,7 +423,7 @@ export function ResponsesPage() {
                 {filteredSorted.map((response, idx) => (
                   <tr
                     key={response.id}
-                    className="border-b border-border hover:bg-muted/20"
+                    className="border-b border-border transition-[background-color] duration-150 hover:bg-muted/20 motion-reduce:transition-none"
                   >
                     <td className="px-4 py-2.5 text-xs text-muted-foreground">
                       {filteredSorted.length - idx}
@@ -525,27 +525,50 @@ function SortableHeader(props: {
 }) {
   const t = useT();
   const { label, active, dir, onClick } = props;
-  const Icon = !active
-    ? IconArrowsSort
+  const sortState: "neutral" | "asc" | "desc" = !active
+    ? "neutral"
     : dir === "asc"
-      ? IconArrowUp
-      : IconArrowDown;
+      ? "asc"
+      : "desc";
+  const iconBase =
+    "absolute inset-0 transition-[opacity,scale,filter] duration-200 ease-[cubic-bezier(0.2,0,0,1)]";
+  const iconVisible = "scale-100 opacity-60 blur-none";
+  const iconHidden = "scale-[0.25] opacity-0 blur-[4px]";
   return (
     <th
       scope="col"
-      className="min-w-40 px-4 py-2.5 text-left text-xs font-medium text-muted-foreground whitespace-nowrap"
+      className="min-w-40 px-4 py-1 text-left text-xs font-medium text-muted-foreground whitespace-nowrap"
     >
       <button
         type="button"
         onClick={onClick}
         className={cn(
-          "inline-flex items-center gap-1 cursor-pointer hover:text-foreground",
+          "relative -mx-2 inline-flex min-h-10 cursor-pointer items-center gap-1 rounded-md px-2 transition-[scale,background-color,color,box-shadow] duration-150 ease-out hover:bg-accent hover:text-foreground active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none motion-reduce:active:scale-100 sm:min-h-0 sm:before:absolute sm:before:-inset-2.5 sm:before:content-['']",
           active && "text-foreground",
         )}
         aria-label={t("responses.sortBy", { label })}
       >
         {label}
-        <Icon className="h-3 w-3 opacity-60" />
+        <span className="relative inline-block h-3 w-3 shrink-0">
+          <IconArrowsSort
+            className={cn(
+              iconBase,
+              sortState === "neutral" ? iconVisible : iconHidden,
+            )}
+          />
+          <IconArrowUp
+            className={cn(
+              iconBase,
+              sortState === "asc" ? iconVisible : iconHidden,
+            )}
+          />
+          <IconArrowDown
+            className={cn(
+              iconBase,
+              sortState === "desc" ? iconVisible : iconHidden,
+            )}
+          />
+        </span>
       </button>
     </th>
   );

package/corpus/templates/forms/app/routes/_app.settings.tsx

@@ -54,7 +54,7 @@ export default function SettingsRoute() {
             {t("settings.description")}
           </p>
 
-          <Card id="language" className="scroll-mt-16">
+          <Card id="language" className="forms-settings-card scroll-mt-16">
             <CardHeader>
               <CardTitle className="text-base">
                 {t("settings.languageTitle")}

package/corpus/templates/forms/changelog/2026-07-12-form-builder-surfaces-are-calmer-fields-stay-stable-on-hover.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-12
+---
+
+Form builder surfaces are calmer, fields stay stable on hover, and integration icons load correctly

package/corpus/templates/forms/changelog/2026-07-12-smoother-more-tactile-controls-throughout-animated-icon-and-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-12
+---
+
+Smoother, more tactile controls throughout: animated icon and sort toggles, press feedback on buttons and cards, and larger click targets