@agent-native/core 0.98.4 → 0.98.6

package/corpus/templates/forms/app/components/builder/FieldRenderer.tsx

@@ -204,14 +204,14 @@ export function FieldRenderer({
               key={star}
               type="button"
               onClick={() => !disabled && handleChange(star)}
-              className="cursor-pointer p-2 sm:p-1.5 disabled:cursor-not-allowed"
+              className="flex size-11 cursor-pointer items-center justify-center rounded-md p-2 transition-[color,transform] duration-150 ease-out active:scale-[0.96] motion-reduce:active:scale-100 disabled:cursor-not-allowed sm:size-10 sm:p-1.5"
               disabled={disabled}
               aria-label={`${star} star${star !== 1 ? "s" : ""}`}
             >
               {(value as number) >= star ? (
-                <IconStarFilled className="h-7 w-7 sm:h-6 sm:w-6 text-amber-400" />
+                <IconStarFilled className="h-7 w-7 text-amber-400 sm:h-6 sm:w-6" />
               ) : (
-                <IconStar className="h-7 w-7 sm:h-6 sm:w-6 text-muted-foreground/30" />
+                <IconStar className="h-7 w-7 text-muted-foreground/30 sm:h-6 sm:w-6" />
               )}
             </button>
           ))}

package/corpus/templates/forms/app/components/layout/Sidebar.tsx

@@ -131,7 +131,7 @@ export function Sidebar() {
 
   const newFormButton = (
     <PopoverTrigger asChild>
-      <button className="flex min-h-[44px] w-full cursor-pointer items-center gap-2.5 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground">
+      <button className="forms-sidebar-nav-item flex min-h-[44px] w-full cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-muted-foreground active:scale-[0.96] transition-[background-color,box-shadow,color,transform] hover:bg-accent/50 hover:text-foreground">
         <IconPlus className="h-4 w-4 shrink-0" />
         <span>{t("sidebar.newForm")}</span>
       </button>
@@ -143,7 +143,7 @@ export function Sidebar() {
       side="right"
       align="start"
       sideOffset={8}
-      className="w-80 p-0 rounded-xl"
+      className="forms-new-form-popover w-80 rounded-2xl p-0"
     >
       <div className="p-4 pb-3">
         <p className="text-sm font-semibold">{t("sidebar.newForm")}</p>
@@ -168,7 +168,7 @@ export function Sidebar() {
           <Button
             variant="link"
             size="sm"
-            className="h-auto p-0 text-xs text-muted-foreground"
+            className="min-h-10 px-2 text-xs text-muted-foreground active:scale-[0.96] transition-[background-color,color,transform]"
             onClick={handleSkip}
           >
             {t("sidebar.skipPrompt")}
@@ -180,7 +180,7 @@ export function Sidebar() {
           <Button
             variant="secondary"
             size="icon"
-            className="h-7 w-7"
+            className="size-10 rounded-lg transition-[background-color,box-shadow,transform] active:scale-[0.96] motion-reduce:active:scale-100"
             onClick={handleSubmitPrompt}
             disabled={!prompt.trim() || promptRun.isActivePrompt(prompt)}
             aria-label={t("sidebar.sendPrompt")}
@@ -200,7 +200,7 @@ export function Sidebar() {
             <button
               type="button"
               onClick={() => setCollapsed(false)}
-              className="flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground/55 transition-colors hover:bg-accent/50 hover:text-muted-foreground"
+              className="forms-sidebar-nav-item flex size-10 items-center justify-center rounded-lg text-muted-foreground/55 transition-[background-color,box-shadow,color,transform] duration-150 ease-out hover:bg-accent/50 hover:text-muted-foreground active:scale-[0.96] motion-reduce:active:scale-100"
               aria-label={t("sidebar.expandSidebar")}
             >
               <IconLayoutSidebarLeftExpand className="h-4 w-4 rtl:-scale-x-100" />
@@ -219,7 +219,7 @@ export function Sidebar() {
                 onClick={navigateHomeChat}
                 aria-label={t("navigation.askForms")}
                 className={cn(
-                  "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
+                  "forms-sidebar-nav-item flex size-10 items-center justify-center rounded-lg active:scale-[0.96] transition-[background-color,box-shadow,color,transform]",
                   location.pathname === "/ask" || location.pathname === "/"
                     ? "bg-accent text-accent-foreground"
                     : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
@@ -239,7 +239,7 @@ export function Sidebar() {
                 to="/forms"
                 aria-label={t("navigation.allForms")}
                 className={cn(
-                  "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
+                  "forms-sidebar-nav-item flex size-10 items-center justify-center rounded-lg active:scale-[0.96] transition-[background-color,box-shadow,color,transform]",
                   location.pathname.startsWith("/forms")
                     ? "bg-accent text-accent-foreground"
                     : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
@@ -260,7 +260,7 @@ export function Sidebar() {
                   <button
                     type="button"
                     aria-label={t("sidebar.newForm")}
-                    className="flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+                    className="forms-sidebar-nav-item flex size-10 items-center justify-center rounded-lg text-muted-foreground transition-[background-color,box-shadow,color,transform] duration-150 ease-out hover:bg-accent/50 hover:text-foreground active:scale-[0.96] motion-reduce:active:scale-100"
                   >
                     <IconPlus className="h-4 w-4" />
                   </button>
@@ -279,7 +279,7 @@ export function Sidebar() {
                 to="/settings"
                 aria-label={t("navigation.settings")}
                 className={cn(
-                  "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
+                  "forms-sidebar-nav-item flex size-10 items-center justify-center rounded-lg active:scale-[0.96] transition-[background-color,box-shadow,color,transform]",
                   location.pathname === "/settings"
                     ? "bg-accent text-accent-foreground"
                     : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
@@ -310,7 +310,7 @@ export function Sidebar() {
               <button
                 type="button"
                 aria-label={t("sidebar.openAskFullScreen")}
-                className="flex min-w-0 items-center gap-2 rounded-md text-base font-semibold tracking-tight text-muted-foreground/80 transition-colors hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="flex min-h-10 min-w-0 items-center gap-2 rounded-lg px-2 text-base font-semibold tracking-tight text-muted-foreground/80 active:scale-[0.96] transition-[color,transform] hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 onClick={toggleLogoView}
               >
                 <img
@@ -337,7 +337,7 @@ export function Sidebar() {
           <Button
             variant="ghost"
             size="icon"
-            className="h-8 w-8"
+            className="size-10 transition-[background-color,box-shadow,transform] active:scale-[0.96] motion-reduce:active:scale-100"
             onClick={() => setMobileOpen(false)}
           >
             <IconX size={18} />
@@ -349,7 +349,7 @@ export function Sidebar() {
               <Button
                 variant="ghost"
                 size="icon"
-                className="h-8 w-8 text-muted-foreground/55 hover:bg-accent/50 hover:text-muted-foreground"
+                className="size-10 text-muted-foreground/55 transition-[background-color,box-shadow,color,transform] hover:bg-accent/50 hover:text-muted-foreground active:scale-[0.96] motion-reduce:active:scale-100"
                 onClick={() => setCollapsed(true)}
                 aria-label={t("sidebar.collapseSidebar")}
               >
@@ -374,7 +374,7 @@ export function Sidebar() {
             to="/ask"
             onClick={navigateHomeChat}
             className={cn(
-              "flex min-h-[44px] w-full min-w-0 max-w-full items-center gap-2.5 overflow-hidden rounded-md px-3 py-2 text-sm transition-colors hover:text-primary",
+              "forms-sidebar-nav-item flex min-h-[44px] w-full min-w-0 max-w-full items-center gap-2.5 overflow-hidden rounded-lg px-3 py-2 text-sm active:scale-[0.96] transition-[background-color,box-shadow,color,transform] hover:text-primary",
               location.pathname === "/ask" || location.pathname === "/"
                 ? "bg-accent text-accent-foreground"
                 : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
@@ -390,7 +390,7 @@ export function Sidebar() {
             to="/forms"
             onClick={() => isMobile && setMobileOpen(false)}
             className={cn(
-              "flex min-h-[44px] w-full min-w-0 max-w-full items-center gap-2.5 overflow-hidden rounded-md px-3 py-2 text-sm transition-colors hover:text-primary",
+              "forms-sidebar-nav-item flex min-h-[44px] w-full min-w-0 max-w-full items-center gap-2.5 overflow-hidden rounded-lg px-3 py-2 text-sm active:scale-[0.96] transition-[background-color,box-shadow,color,transform] hover:text-primary",
               location.pathname.startsWith("/forms")
                 ? "bg-accent text-accent-foreground"
                 : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
@@ -415,7 +415,7 @@ export function Sidebar() {
           to="/settings"
           onClick={() => isMobile && setMobileOpen(false)}
           className={cn(
-            "flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm min-h-[44px]",
+            "forms-sidebar-nav-item flex min-h-[44px] w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm active:scale-[0.96] transition-[background-color,box-shadow,color,transform]",
             location.pathname === "/settings"
               ? "bg-accent text-accent-foreground"
               : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
@@ -449,7 +449,7 @@ export function Sidebar() {
         <Button
           variant="ghost"
           size="icon"
-          className="fixed top-2 start-2 z-40 h-10 w-10 md:hidden"
+          className="fixed top-2 start-2 z-40 size-10 active:scale-[0.96] transition-[background-color,box-shadow,transform] md:hidden"
           onClick={() => setMobileOpen(true)}
           aria-label={t("sidebar.openSidebar")}
         >

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,13 +115,73 @@
   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%;
 }
 
 .forms-ask-chat-panel [data-agent-empty-state="centered"] {
   justify-content: center;
-  padding-bottom: clamp(4rem, 12vh, 8rem);
+  padding-bottom: clamp(2rem, 6vh, 4rem);
 }
 
 .forms-ask-chat-panel [data-agent-empty-state="centered"] .agent-chat-scroll {
@@ -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 {
@@ -165,12 +269,28 @@
 }
 
 .forms-ask-chat-panel [data-agent-empty-state="centered"] .forms-chat-intro {
-  display: grid;
-  justify-items: center;
-  gap: 0.75rem;
-  margin: 0 auto 1rem;
-  padding-bottom: 1.25rem;
+  display: contents;
+}
+
+.forms-ask-chat-panel [data-agent-empty-state="centered"] .forms-chat-intro h1,
+.forms-ask-chat-panel [data-agent-empty-state="centered"] .forms-chat-intro p {
+  width: 100%;
   text-align: center;
+  order: 1;
+}
+
+.forms-ask-chat-panel [data-agent-empty-state="centered"] .forms-chat-intro h1 {
+  margin: 0 0 0.5rem;
+}
+
+.forms-ask-chat-panel [data-agent-empty-state="centered"] .forms-chat-intro p {
+  margin: 0 auto 1rem;
+}
+
+.forms-ask-chat-panel
+  [data-agent-empty-state="centered"]
+  .agent-composer-stack {
+  order: 2;
 }
 
 .forms-chat-intro h1 {
@@ -193,20 +313,51 @@
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.5rem;
-  padding-top: 0.125rem;
+  order: 3;
+  margin: 0.75rem auto 0;
 }
 
-.forms-chat-pill-row span {
+.forms-chat-pill-row button {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
   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));
+  cursor: pointer;
   font-size: 0.75rem;
   font-weight: 600;
+  transition-property: background-color, border-color, color, scale;
+  transition-duration: 150ms;
+  transition-timing-function: ease-out;
+}
+
+.forms-chat-pill-row button:hover {
+  border-color: hsl(var(--foreground) / 0.2);
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+.forms-chat-pill-row button:focus-visible {
+  outline: none;
+  box-shadow: var(--forms-shadow-focus);
+}
+
+.forms-chat-pill-row button:active {
+  scale: 0.96;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .forms-chat-pill-row button {
+    transition: none;
+  }
+
+  .forms-chat-pill-row button:active {
+    scale: 1;
+  }
 }
 
 @media (min-width: 640px) {

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

@@ -1,6 +1,7 @@
 import {
   AgentChatSurface,
   markAgentChatHomeHandoff,
+  sendToAgentChat,
   useT,
 } from "@agent-native/core/client";
 import { IconChartBar, IconDatabase, IconSettings } from "@tabler/icons-react";
@@ -26,6 +27,28 @@ export function AskPage() {
     };
   }, []);
 
+  function prefillSuggestion(message: string) {
+    sendToAgentChat({ message, submit: false, chatTarget: "local" });
+  }
+
+  const suggestions = [
+    {
+      label: t("home.pillForms"),
+      prompt: "@forms",
+      icon: IconDatabase,
+    },
+    {
+      label: t("home.pillAnalytics"),
+      prompt: "analytics",
+      icon: IconChartBar,
+    },
+    {
+      label: t("home.pillConfiguration"),
+      prompt: "configuration",
+      icon: IconSettings,
+    },
+  ];
+
   return (
     <div className="flex h-full min-h-0 flex-col bg-background">
       <AgentChatSurface
@@ -48,19 +71,18 @@ export function AskPage() {
           <div className="forms-chat-intro">
             <h1>{t("home.heading")}</h1>
             <p>{t("home.description")}</p>
-            <div className="forms-chat-pill-row" aria-hidden="true">
-              <span>
-                <IconDatabase className="size-3.5" />
-                {t("home.pillForms")}
-              </span>
-              <span>
-                <IconChartBar className="size-3.5" />
-                {t("home.pillAnalytics")}
-              </span>
-              <span>
-                <IconSettings className="size-3.5" />
-                {t("home.pillConfiguration")}
-              </span>
+            <div className="forms-chat-pill-row">
+              {suggestions.map(({ icon: Icon, label, prompt }) => (
+                <button
+                  key={prompt}
+                  type="button"
+                  className="forms-chat-pill"
+                  onClick={() => prefillSuggestion(prompt)}
+                >
+                  <Icon className="size-3.5" />
+                  {label}
+                </button>
+              ))}
             </div>
           </div>
         }