@agent-native/core 0.97.0 → 0.98.0

package/corpus/templates/clips/app/components/library/folder-tree.tsx

@@ -21,6 +21,11 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 import {
   ContextMenu,
   ContextMenuContent,
@@ -137,202 +142,219 @@ function FolderItem({
   const createFolder = useCreateFolder();
 
   return (
-    <li>
-      <ContextMenu>
-        <ContextMenuTrigger asChild>
-          <div
-            className={cn(
-              "group flex items-center gap-1 rounded px-1.5 py-1 text-xs",
-              isActive
-                ? "bg-primary/10 text-primary"
-                : "text-foreground hover:bg-accent/60",
-            )}
-            style={{ paddingInlineStart: 6 + depth * 12 }}
-          >
-            <button
-              type="button"
+    <Collapsible open={open} onOpenChange={setOpen} asChild>
+      <li>
+        <ContextMenu>
+          <ContextMenuTrigger asChild>
+            <div
               className={cn(
-                "rounded p-0.5 text-muted-foreground",
-                !hasChildren && "invisible",
+                "group flex items-center gap-1 rounded px-1.5 py-1 text-xs",
+                isActive
+                  ? "bg-primary/10 text-primary"
+                  : "text-foreground hover:bg-accent/60",
               )}
-              onClick={(e) => {
-                e.stopPropagation();
-                setOpen((o) => !o);
-              }}
+              style={{ paddingInlineStart: 6 + depth * 12 }}
             >
-              <IconChevronRight
-                className={cn(
-                  "h-3 w-3 transition-transform rtl:-scale-x-100",
-                  open && "rotate-90",
+              <CollapsibleTrigger asChild disabled={!hasChildren}>
+                <button
+                  type="button"
+                  className={cn(
+                    "rounded p-0.5 text-muted-foreground",
+                    !hasChildren && "invisible",
+                  )}
+                  onClick={(e) => e.stopPropagation()}
+                  aria-label={`${t(open ? "settings.collapse" : "settings.expand")}: ${node.name}`}
+                >
+                  <IconChevronRight
+                    className={cn(
+                      "h-3 w-3 transition-transform motion-reduce:transition-none rtl:-scale-x-100",
+                      open && "rotate-90",
+                    )}
+                  />
+                </button>
+              </CollapsibleTrigger>
+              <NavLink
+                to={buildPath(node.id)}
+                className="flex min-w-0 flex-1 items-center gap-1.5"
+              >
+                {open && hasChildren ? (
+                  <IconFolderOpen className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                ) : (
+                  <IconFolder className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                 )}
-              />
-            </button>
-            <NavLink
-              to={buildPath(node.id)}
-              className="flex min-w-0 flex-1 items-center gap-1.5"
-            >
-              {open && hasChildren ? (
-                <IconFolderOpen className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-              ) : (
-                <IconFolder className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-              )}
-              <span className="truncate">{node.name}</span>
-            </NavLink>
-          </div>
-        </ContextMenuTrigger>
-        <ContextMenuContent>
-          <ContextMenuItem
-            onSelect={() => {
-              setRenameValue(node.name);
-              setRenameOpen(true);
-            }}
-          >
-            <IconEdit className="h-3.5 w-3.5 me-2" /> {t("folderTree.rename")}
-          </ContextMenuItem>
-          <ContextMenuItem
-            onSelect={() => {
-              setNewValue("");
-              setNewOpen(true);
-            }}
-          >
-            <IconFolderPlus className="h-3.5 w-3.5 me-2" />{" "}
-            {t("folderTree.newSubfolder")}
-          </ContextMenuItem>
-          <ContextMenuSeparator />
-          <ContextMenuItem
-            onSelect={() => setConfirmDelete(true)}
-            className="text-destructive"
-          >
-            <IconTrash className="h-3.5 w-3.5 me-2" /> {t("folderTree.delete")}
-          </ContextMenuItem>
-        </ContextMenuContent>
-      </ContextMenu>
-
-      {open && hasChildren && (
-        <ul className="space-y-0.5">
-          {node.children!.map((child) => (
-            <FolderItem
-              key={child.id}
-              node={child}
-              depth={depth + 1}
-              buildPath={buildPath}
-              activeFolderId={activeFolderId}
-              organizationId={organizationId}
-              spaceId={spaceId}
-            />
-          ))}
-        </ul>
-      )}
-
-      {/* Rename dialog */}
-      <AlertDialog open={renameOpen} onOpenChange={setRenameOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{t("folderTree.renameFolder")}</AlertDialogTitle>
-          </AlertDialogHeader>
-          <input
-            autoFocus
-            value={renameValue}
-            onChange={(e) => setRenameValue(e.target.value)}
-            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30"
-          />
-          <AlertDialogFooter>
-            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={() => {
-                const name = renameValue.trim();
-                if (!name) return;
-                renameFolder.mutate(
-                  { id: node.id, name },
-                  {
-                    onSuccess: () => toast.success(t("folderTree.renamed")),
-                    onError: (err: any) =>
-                      toast.error(err?.message ?? t("folderTree.renameFailed")),
-                  },
-                );
-                setRenameOpen(false);
+                <span className="truncate">{node.name}</span>
+              </NavLink>
+            </div>
+          </ContextMenuTrigger>
+          <ContextMenuContent>
+            <ContextMenuItem
+              onSelect={() => {
+                setRenameValue(node.name);
+                setRenameOpen(true);
               }}
             >
-              {t("common.save")}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-
-      {/* New subfolder dialog */}
-      <AlertDialog open={newOpen} onOpenChange={setNewOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{t("folderTree.newSubfolder")}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {t("folderTree.createInside", { name: node.name })}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <input
-            autoFocus
-            value={newValue}
-            onChange={(e) => setNewValue(e.target.value)}
-            placeholder={t("folderTree.folderName")}
-            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30"
-          />
-          <AlertDialogFooter>
-            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={() => {
-                const name = newValue.trim();
-                if (!name) return;
-                createFolder.mutate(
-                  {
-                    name,
-                    ...(organizationId ? { organizationId } : {}),
-                    spaceId: spaceId ?? undefined,
-                    parentId: node.id,
-                  },
-                  {
-                    onSuccess: () => toast.success(t("folderTree.created")),
-                    onError: (err: any) =>
-                      toast.error(err?.message ?? t("folderTree.createFailed")),
-                  },
-                );
-                setNewOpen(false);
+              <IconEdit className="h-3.5 w-3.5 me-2" /> {t("folderTree.rename")}
+            </ContextMenuItem>
+            <ContextMenuItem
+              onSelect={() => {
+                setNewValue("");
+                setNewOpen(true);
               }}
             >
-              {t("common.create")}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-
-      {/* Delete confirm */}
-      <AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{t("folderTree.deleteFolder")}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {t("folderTree.deleteDescription")}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
-            <AlertDialogAction
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              onClick={() => {
-                deleteFolder.mutate(
-                  { id: node.id },
-                  {
-                    onSuccess: () => toast.success(t("folderTree.deleted")),
-                    onError: (err: any) =>
-                      toast.error(err?.message ?? t("folderTree.deleteFailed")),
-                  },
-                );
-                setConfirmDelete(false);
-              }}
+              <IconFolderPlus className="h-3.5 w-3.5 me-2" />{" "}
+              {t("folderTree.newSubfolder")}
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem
+              onSelect={() => setConfirmDelete(true)}
+              className="text-destructive"
             >
+              <IconTrash className="h-3.5 w-3.5 me-2" />{" "}
               {t("folderTree.delete")}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </li>
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenu>
+
+        {hasChildren ? (
+          <CollapsibleContent className="clips-collapsible-content">
+            <ul className="space-y-0.5">
+              {node.children!.map((child) => (
+                <FolderItem
+                  key={child.id}
+                  node={child}
+                  depth={depth + 1}
+                  buildPath={buildPath}
+                  activeFolderId={activeFolderId}
+                  organizationId={organizationId}
+                  spaceId={spaceId}
+                />
+              ))}
+            </ul>
+          </CollapsibleContent>
+        ) : null}
+
+        {/* Rename dialog */}
+        <AlertDialog open={renameOpen} onOpenChange={setRenameOpen}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>
+                {t("folderTree.renameFolder")}
+              </AlertDialogTitle>
+            </AlertDialogHeader>
+            <input
+              autoFocus
+              value={renameValue}
+              onChange={(e) => setRenameValue(e.target.value)}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30"
+            />
+            <AlertDialogFooter>
+              <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+              <AlertDialogAction
+                onClick={() => {
+                  const name = renameValue.trim();
+                  if (!name) return;
+                  renameFolder.mutate(
+                    { id: node.id, name },
+                    {
+                      onSuccess: () => toast.success(t("folderTree.renamed")),
+                      onError: (err: any) =>
+                        toast.error(
+                          err?.message ?? t("folderTree.renameFailed"),
+                        ),
+                    },
+                  );
+                  setRenameOpen(false);
+                }}
+              >
+                {t("common.save")}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+
+        {/* New subfolder dialog */}
+        <AlertDialog open={newOpen} onOpenChange={setNewOpen}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>
+                {t("folderTree.newSubfolder")}
+              </AlertDialogTitle>
+              <AlertDialogDescription>
+                {t("folderTree.createInside", { name: node.name })}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <input
+              autoFocus
+              value={newValue}
+              onChange={(e) => setNewValue(e.target.value)}
+              placeholder={t("folderTree.folderName")}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30"
+            />
+            <AlertDialogFooter>
+              <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+              <AlertDialogAction
+                onClick={() => {
+                  const name = newValue.trim();
+                  if (!name) return;
+                  createFolder.mutate(
+                    {
+                      name,
+                      ...(organizationId ? { organizationId } : {}),
+                      spaceId: spaceId ?? undefined,
+                      parentId: node.id,
+                    },
+                    {
+                      onSuccess: () => toast.success(t("folderTree.created")),
+                      onError: (err: any) =>
+                        toast.error(
+                          err?.message ?? t("folderTree.createFailed"),
+                        ),
+                    },
+                  );
+                  setNewOpen(false);
+                }}
+              >
+                {t("common.create")}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+
+        {/* Delete confirm */}
+        <AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>
+                {t("folderTree.deleteFolder")}
+              </AlertDialogTitle>
+              <AlertDialogDescription>
+                {t("folderTree.deleteDescription")}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+              <AlertDialogAction
+                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                onClick={() => {
+                  deleteFolder.mutate(
+                    { id: node.id },
+                    {
+                      onSuccess: () => toast.success(t("folderTree.deleted")),
+                      onError: (err: any) =>
+                        toast.error(
+                          err?.message ?? t("folderTree.deleteFailed"),
+                        ),
+                    },
+                  );
+                  setConfirmDelete(false);
+                }}
+              >
+                {t("folderTree.delete")}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </li>
+    </Collapsible>
   );
 }

package/corpus/templates/clips/app/components/meetings/meeting-card.tsx

@@ -95,7 +95,7 @@ export function MeetingCard({ meeting }: { meeting: MeetingCardData }) {
     >
       <Card
         className={cn(
-          "cursor-pointer transition-all duration-150",
+          "cursor-pointer transition-[transform,box-shadow,border-color] duration-150",
           "hover:border-foreground/20 hover:shadow-sm hover:-translate-y-px",
           "bg-background",
         )}
@@ -228,7 +228,7 @@ export function UpcomingMeetingCard({
   return (
     <Card
       className={cn(
-        "transition-all duration-150 hover:border-foreground/20 hover:shadow-sm",
+        "transition-[transform,box-shadow,border-color] duration-150 hover:border-foreground/20 hover:shadow-sm",
         joinable && "border-foreground/25",
       )}
     >

package/corpus/templates/clips/app/components/player/reactions-tray.tsx

@@ -61,11 +61,8 @@ export function ReactionsTray({ onReact, disabled }: ReactionsTrayProps) {
         {floats.map((f) => (
           <span
             key={f.id}
-            className="absolute bottom-1 text-2xl"
-            style={{
-              left: f.left + "%",
-              animation: "float-up 2.5s ease-out forwards",
-            }}
+            className="floating-reaction absolute bottom-1 text-2xl"
+            style={{ left: f.left + "%" }}
           >
             {f.emoji}
           </span>
@@ -73,10 +70,25 @@ export function ReactionsTray({ onReact, disabled }: ReactionsTrayProps) {
       </div>
 
       <style>{`
+        .floating-reaction {
+          animation: float-up 2.5s ease-out forwards;
+        }
+
         @keyframes float-up {
           0% { transform: translateY(0); opacity: 1; }
           100% { transform: translateY(-200px); opacity: 0; }
         }
+
+        @keyframes float-fade {
+          0% { opacity: 1; }
+          100% { opacity: 0; }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .floating-reaction {
+            animation: float-fade 600ms ease-out forwards;
+          }
+        }
       `}</style>
     </div>
   );

package/corpus/templates/clips/app/components/player/scrubber.tsx

@@ -200,7 +200,7 @@ export function Scrubber(props: ScrubberProps) {
               e.stopPropagation();
               onSeek(ch.startMs);
             }}
-            className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 h-3 w-0.5 bg-white/80 hover:h-4 hover:w-1 transition-all"
+            className="absolute top-1/2 h-3 w-0.5 -translate-x-1/2 -translate-y-1/2 bg-white/80 transition-[transform,opacity] duration-150 ease-out hover:scale-x-[2] hover:scale-y-125 motion-reduce:transition-none motion-reduce:hover:scale-100"
             style={{
               left: (ch.startMs / Math.max(1, durationMs)) * 100 + "%",
             }}
@@ -247,8 +247,10 @@ export function Scrubber(props: ScrubberProps) {
         {/* Thumb */}
         <div
           className={cn(
-            "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 h-3 w-3 rounded-full bg-white shadow transition-transform",
-            dragging ? "scale-125" : "scale-0 group-hover/bar:scale-100",
+            "absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white opacity-0 shadow transition-[transform,opacity] duration-150 ease-out motion-reduce:scale-100 motion-reduce:transition-none",
+            dragging
+              ? "scale-125 opacity-100"
+              : "scale-95 group-hover/bar:scale-100 group-hover/bar:opacity-100",
           )}
           style={{ left: pct + "%" }}
         />

package/corpus/templates/clips/app/components/recorder/pre-record-panel.tsx

@@ -705,7 +705,7 @@ export function PreRecordPanel({
               />
             </button>
           </CollapsibleTrigger>
-          <CollapsibleContent>
+          <CollapsibleContent className="clips-collapsible-content">
             <div
               className={cn(
                 "grid gap-2 px-6 pb-5",
@@ -781,7 +781,7 @@ export function PreRecordPanel({
             />
           </button>
         </CollapsibleTrigger>
-        <CollapsibleContent>
+        <CollapsibleContent className="clips-collapsible-content">
           <div className="px-6 pb-5">
             <div className="overflow-visible rounded-xl border border-border bg-background">
               <div className="space-y-2 p-2.5">