@agent-native/core 0.99.0 → 0.99.2

package/corpus/templates/assets/app/routes/library.tsx

@@ -1339,13 +1339,12 @@ function AllAssetsBrowser() {
                   </div>
                 </button>
                 {(asset as any).libraryTitle ? (
-                  <button
-                    type="button"
-                    onClick={() => navigate(`/library/${asset.libraryId}`)}
+                  <Link
+                    to={`/library/${asset.libraryId}`}
                     className="absolute bottom-2 left-2 z-10 max-w-[calc(100%-1rem)] truncate rounded-full bg-background/95 px-2.5 py-1 text-[11px] font-medium shadow-sm transition hover:bg-background"
                   >
                     {(asset as any).libraryTitle}
-                  </button>
+                  </Link>
                 ) : null}
                 <TooltipProvider>
                   <Tooltip>

package/corpus/templates/assets/changelog/2026-07-13-internal-library-links-open-in-new-tabs.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-13
+---
+
+Internal library links now support opening in a new tab.

package/corpus/templates/calendar/app/pages/BookingLinksPage.tsx

@@ -48,7 +48,7 @@ import {
 } from "date-fns";
 import { nanoid } from "nanoid";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useNavigate, useSearchParams } from "react-router";
+import { Link, useNavigate, useSearchParams } from "react-router";
 import { toast } from "sonner";
 
 import { CloudUpgrade } from "@/components/CloudUpgrade";
@@ -915,12 +915,10 @@ export default function BookingLinksPage({
     toast.error(t("common.clipboardUnavailable"));
   }
 
-  function openPreview(slug: string) {
-    // For local preview, use the local path
-    const localPath = bookingUsername
+  function bookingPreviewPath(slug: string) {
+    return bookingUsername
       ? `/book/${bookingUsername}/${slug}`
       : `/book/${slug}`;
-    window.open(localPath, "_blank", "noopener,noreferrer");
   }
 
   const handleSaveRef = useRef(handleSave);
@@ -952,14 +950,13 @@ export default function BookingLinksPage({
     }
     return {
       left: (
-        <button
-          type="button"
-          onClick={() => navigate("/booking-links")}
+        <Link
+          to="/booking-links"
           className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
         >
           <IconChevronLeft className="h-4 w-4" />
           {t("bookingLinks.back")}
-        </button>
+        </Link>
       ),
       right: selectedLink ? (
         <div className="flex items-center gap-1.5">
@@ -1008,14 +1005,19 @@ export default function BookingLinksPage({
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
-                  type="button"
+                  asChild
                   variant="ghost"
                   size="icon"
-                  onClick={() => openPreview(draft.slug)}
                   className={cn("h-8 w-8", BRAND_ICON_LINK_CLASS)}
                   aria-label={t("bookingLinks.openBookingLink")}
                 >
-                  <IconExternalLink className="h-4 w-4" />
+                  <a
+                    href={bookingPreviewPath(draft.slug)}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <IconExternalLink className="h-4 w-4" />
+                  </a>
                 </Button>
               </TooltipTrigger>
               <TooltipContent>{t("bookingLinks.openLink")}</TooltipContent>
@@ -1300,14 +1302,19 @@ export default function BookingLinksPage({
                     <Tooltip>
                       <TooltipTrigger asChild>
                         <Button
-                          type="button"
+                          asChild
                           variant="ghost"
                           size="icon"
-                          onClick={() => openPreview(draft.slug)}
                           className={cn("h-8 w-8", BRAND_ICON_LINK_CLASS)}
                           aria-label={t("bookingLinks.openBookingPageNewTab")}
                         >
-                          <IconExternalLink className="h-4 w-4" />
+                          <a
+                            href={bookingPreviewPath(draft.slug)}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            <IconExternalLink className="h-4 w-4" />
+                          </a>
                         </Button>
                       </TooltipTrigger>
                       <TooltipContent>
@@ -1499,7 +1506,7 @@ export default function BookingLinksPage({
                   availability={availability ?? undefined}
                   bookingUrl={previewUrl}
                   onCopy={() => void copyPreviewUrl(draft.slug)}
-                  onOpen={() => openPreview(draft.slug)}
+                  openHref={bookingPreviewPath(draft.slug)}
                   onCollapse={() => setIsPreviewCollapsed(true)}
                 />
               )}
@@ -1597,9 +1604,8 @@ export default function BookingLinksPage({
                     >
                       <div className="flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:gap-4 sm:px-5">
                         {/* Info — clickable to edit */}
-                        <button
-                          type="button"
-                          onClick={() => navigate(`/booking-links/${link.id}`)}
+                        <Link
+                          to={`/booking-links/${link.id}`}
                           className="min-w-0 flex-1 text-left"
                         >
                           <div className="flex items-center gap-2">
@@ -1622,7 +1628,7 @@ export default function BookingLinksPage({
                               {availability.timezone}
                             </p>
                           )}
-                        </button>
+                        </Link>
 
                         {/* Actions */}
                         <div className="flex shrink-0 items-center gap-2">
@@ -1642,19 +1648,17 @@ export default function BookingLinksPage({
                                 <IconLink className="h-3.5 w-3.5" />
                                 {t("bookingLinks.copyLink")}
                               </button>
-                              <button
-                                type="button"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  openPreview(link.slug);
-                                }}
+                              <a
+                                href={bookingPreviewPath(link.slug)}
+                                target="_blank"
+                                rel="noopener noreferrer"
                                 className={cn(
                                   "flex h-9 w-9 items-center justify-center rounded-full border",
                                   BRAND_PILL_LINK_CLASS,
                                 )}
                               >
                                 <IconExternalLink className="h-4 w-4" />
-                              </button>
+                              </a>
                             </>
                           )}
 
@@ -1669,12 +1673,10 @@ export default function BookingLinksPage({
                               </button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
-                              <DropdownMenuItem
-                                onClick={() =>
-                                  navigate(`/booking-links/${link.id}`)
-                                }
-                              >
-                                {t("eventForm.edit")}
+                              <DropdownMenuItem asChild>
+                                <Link to={`/booking-links/${link.id}`}>
+                                  {t("eventForm.edit")}
+                                </Link>
                               </DropdownMenuItem>
                               <DropdownMenuItem
                                 onClick={() => {
@@ -1949,7 +1951,7 @@ function BookingPreview({
   availability,
   bookingUrl,
   onCopy,
-  onOpen,
+  openHref,
   onCollapse,
 }: {
   title: string;
@@ -1961,7 +1963,7 @@ function BookingPreview({
   availability?: AvailabilityConfig;
   bookingUrl?: string;
   onCopy?: () => void;
-  onOpen?: () => void;
+  openHref?: string;
   onCollapse?: () => void;
 }) {
   const t = useT();
@@ -2138,19 +2140,20 @@ function BookingPreview({
                 <TooltipContent>{t("bookingLinks.copyLink")}</TooltipContent>
               </Tooltip>
             )}
-            {onOpen && (
+            {openHref && (
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    onClick={onOpen}
+                  <a
+                    href={openHref}
+                    target="_blank"
+                    rel="noopener noreferrer"
                     className={cn(
                       "flex h-6 w-6 items-center justify-center rounded",
                       BRAND_ICON_LINK_CLASS,
                     )}
                   >
                     <IconExternalLink className="h-3.5 w-3.5" />
-                  </button>
+                  </a>
                 </TooltipTrigger>
                 <TooltipContent>
                   {t("bookingLinks.openInteractiveBookingLink")}

package/corpus/templates/calendar/app/pages/ManageBookingPage.tsx

@@ -9,7 +9,7 @@ import {
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { format, parseISO } from "date-fns";
 import { useState } from "react";
-import { useParams, useNavigate } from "react-router";
+import { Link, useParams, useNavigate } from "react-router";
 import { toast } from "sonner";
 
 import {
@@ -118,13 +118,11 @@ export function ManageBookingPage() {
           {t("manageBooking.cancelledSuffix")}
         </p>
         {booking.slug && (
-          <Button
-            variant="outline"
-            className="mt-6 gap-2"
-            onClick={() => navigate(`/book/${booking.slug}`)}
-          >
-            <IconCalendarPlus className="h-4 w-4" />
-            {t("manageBooking.reschedule")}
+          <Button asChild variant="outline" className="mt-6 gap-2">
+            <Link to={`/book/${booking.slug}`}>
+              <IconCalendarPlus className="h-4 w-4" />
+              {t("manageBooking.reschedule")}
+            </Link>
           </Button>
         )}
       </div>

package/corpus/templates/calendar/changelog/2026-07-13-booking-links-and-previews-open-in-new-tabs.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-13
+---
+
+Booking links and previews now support opening in a new tab.

package/corpus/templates/clips/app/components/library/recording-card.tsx

@@ -13,7 +13,7 @@ import {
   IconAlertTriangle,
 } from "@tabler/icons-react";
 import { useCallback, useMemo, useState } from "react";
-import { useNavigate } from "react-router";
+import { Link } from "react-router";
 
 import { ViewedByPopover } from "@/components/sharing/viewed-by-popover";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -85,7 +85,6 @@ export function RecordingCard({
   onTrash,
   readOnly = false,
 }: RecordingCardProps) {
-  const navigate = useNavigate();
   const t = useT();
   const { formatDate, formatRelativeTime } = useFormatters();
   const [hovered, setHovered] = useState(false);
@@ -141,26 +140,23 @@ export function RecordingCard({
 
   const recordingPath = `/r/${recording.id}`;
 
-  const handleOpen = useCallback(
-    (event: React.MouseEvent<HTMLElement>) => {
-      const shouldOpenNewTab =
-        event.button === 1 ||
-        (event.button === 0 && (event.metaKey || event.ctrlKey));
-
-      if (shouldOpenNewTab) {
-        event.preventDefault();
-        event.stopPropagation();
-        window.open(recordingPath, "_blank", "noopener,noreferrer");
+  const handleLinkClick = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      if (
+        !selectionMode ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey
+      ) {
         return;
       }
 
-      if (selectionMode) {
-        onToggleSelect?.(recording.id);
-      } else {
-        navigate(recordingPath);
-      }
+      event.preventDefault();
+      onToggleSelect?.(recording.id);
     },
-    [navigate, onToggleSelect, recording.id, recordingPath, selectionMode],
+    [onToggleSelect, recording.id, selectionMode],
   );
 
   const handleCheckbox = useCallback(
@@ -182,8 +178,6 @@ export function RecordingCard({
   return (
     <div
       role="article"
-      onClick={handleOpen}
-      onAuxClick={handleOpen}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
       className={cn(
@@ -193,8 +187,15 @@ export function RecordingCard({
         selected && "ring-2 ring-primary border-primary",
       )}
     >
+      <Link
+        to={recordingPath}
+        aria-label={displayTitle}
+        onClick={handleLinkClick}
+        className="absolute inset-0 z-0 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset"
+      />
+
       {/* Thumbnail */}
-      <div className="relative aspect-video bg-muted overflow-hidden">
+      <div className="relative z-10 aspect-video overflow-hidden bg-muted pointer-events-none">
         {displayThumbnail ? (
           // eslint-disable-next-line jsx-a11y/alt-text
           <img
@@ -229,7 +230,7 @@ export function RecordingCard({
         {canSelect && (selectionMode || hovered || selected) && (
           <div
             onClick={handleCheckbox}
-            className="absolute top-2 start-2 flex h-5 w-5 items-center justify-center rounded bg-background/90 border border-border"
+            className="pointer-events-auto absolute top-2 start-2 flex h-5 w-5 items-center justify-center rounded border border-border bg-background/90"
           >
             <Checkbox
               checked={selected}
@@ -285,7 +286,7 @@ export function RecordingCard({
                 <button
                   type="button"
                   onClick={handleRemoveFailed}
-                  className="rounded border border-border px-1.5 py-0.5 text-[10px] text-foreground hover:bg-accent"
+                  className="pointer-events-auto rounded border border-border px-1.5 py-0.5 text-[10px] text-foreground hover:bg-accent"
                 >
                   {t("clipsFinalRaw.remove")}
                 </button>
@@ -296,7 +297,7 @@ export function RecordingCard({
       </div>
 
       {/* Body */}
-      <div className="flex-1 p-3 space-y-2">
+      <div className="relative z-10 flex-1 space-y-2 p-3 pointer-events-none">
         <div className="flex items-start gap-2">
           <div className="min-w-0 flex-1">
             {hasDefaultTitle ? (
@@ -319,7 +320,7 @@ export function RecordingCard({
               {recording.viewCount > 0 && !readOnly ? (
                 <ViewedByPopover
                   recordingId={recording.id}
-                  className="underline-offset-2 hover:underline hover:text-foreground"
+                  className="pointer-events-auto underline-offset-2 hover:underline hover:text-foreground"
                 >
                   {t("clipsFinalRaw.viewsCount", {
                     count: recording.viewCount,
@@ -341,7 +342,7 @@ export function RecordingCard({
             <DropdownMenu>
               <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
                 <button
-                  className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+                  className="pointer-events-auto rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
                   aria-label={t("clipsFinalRaw.recordingMenu")}
                 >
                   <IconDots className="h-4 w-4" />

package/corpus/templates/clips/app/components/library/space-card.tsx

@@ -1,5 +1,5 @@
 import { IconUsersGroup, IconVideo } from "@tabler/icons-react";
-import { useNavigate } from "react-router";
+import { Link } from "react-router";
 
 import { cn } from "@/lib/utils";
 
@@ -19,15 +19,13 @@ interface SpaceCardProps {
 }
 
 export function SpaceCard({ space, className }: SpaceCardProps) {
-  const navigate = useNavigate();
   const color = space.color || "hsl(var(--primary))";
   const members = space.memberEmails ?? [];
   const initial = (space.name.trim().slice(0, 1) || "S").toUpperCase();
 
   return (
-    <button
-      type="button"
-      onClick={() => navigate(`/spaces/${space.id}`)}
+    <Link
+      to={`/spaces/${space.id}`}
       className={cn(
         "group flex flex-col overflow-hidden rounded-lg border border-border bg-card text-start",
         "hover:border-primary/40",
@@ -92,6 +90,6 @@ export function SpaceCard({ space, className }: SpaceCardProps) {
           </div>
         )}
       </div>
-    </button>
+    </Link>
   );
 }

package/corpus/templates/clips/app/components/player/sign-in-prompt-dialog.tsx

@@ -58,13 +58,10 @@ export function SignInPromptDialog({
           <Button variant="ghost" onClick={() => onOpenChange(false)}>
             {t("signInPrompt.notNow")}
           </Button>
-          <Button
-            onClick={() => {
-              onSignIn?.();
-              window.location.href = buildSignInHref(returnTo);
-            }}
-          >
-            {t("signInPrompt.signIn")}
+          <Button asChild>
+            <a href={buildSignInHref(returnTo)} onClick={() => onSignIn?.()}>
+              {t("signInPrompt.signIn")}
+            </a>
           </Button>
         </DialogFooter>
       </DialogContent>

package/corpus/templates/clips/app/routes/r.$recordingId.tsx

@@ -35,7 +35,13 @@ import {
 } from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useParams, useNavigate, NavLink, useSearchParams } from "react-router";
+import {
+  Link,
+  useParams,
+  useNavigate,
+  NavLink,
+  useSearchParams,
+} from "react-router";
 import { toast } from "sonner";
 
 import { EditableRecordingTitle } from "@/components/editable-recording-title";
@@ -712,8 +718,8 @@ export default function RecordingPage() {
           {(playerDataQ.error as Error | undefined)?.message ??
             t("recordingPage.noAccess")}
         </p>
-        <Button onClick={() => navigate("/")} variant="outline">
-          {t("recordingPage.backToLibrary")}
+        <Button asChild variant="outline">
+          <Link to="/">{t("recordingPage.backToLibrary")}</Link>
         </Button>
       </div>
     );
@@ -772,13 +778,15 @@ export default function RecordingPage() {
         <div className="flex min-h-screen w-full flex-col bg-background">
           <header className="flex min-w-0 shrink-0 items-center gap-3 border-b border-border px-3 py-2 sm:px-4 sm:py-3">
             <Button
+              asChild
               variant="ghost"
               size="icon"
               className="shrink-0"
-              onClick={() => navigate("/")}
               aria-label={t("recordingPage.back")}
             >
-              <IconArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
+              <Link to="/">
+                <IconArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
+              </Link>
             </Button>
             <div className="min-w-0 flex-1">
               <p className="truncate text-sm font-medium">{visibleTitle}</p>
@@ -947,8 +955,8 @@ export default function RecordingPage() {
                 : t("recordingPage.retryUpload")
               : t("recordingPage.checkAgain")}
           </Button>
-          <Button onClick={() => navigate("/")} variant="ghost" size="sm">
-            {t("recordingPage.backToLibrary")}
+          <Button asChild variant="ghost" size="sm">
+            <Link to="/">{t("recordingPage.backToLibrary")}</Link>
           </Button>
         </div>
       </div>
@@ -1122,13 +1130,15 @@ export default function RecordingPage() {
       <div className="flex w-full min-w-0 flex-col xl:flex-1">
         <header className="flex min-w-0 shrink-0 items-center gap-2 border-b border-border px-3 py-2 sm:gap-3 sm:px-4 sm:py-3">
           <Button
+            asChild
             variant="ghost"
             size="icon"
             className="shrink-0"
-            onClick={() => navigate("/")}
             aria-label={t("recordingPage.back")}
           >
-            <IconArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
+            <Link to="/">
+              <IconArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
+            </Link>
           </Button>
           <div className="flex-1 min-w-0">
             <EditableRecordingTitle

package/corpus/templates/clips/app/routes/share.$shareId.tsx

@@ -32,7 +32,7 @@ import {
   type LoaderFunctionArgs,
   type MetaFunction,
 } from "react-router";
-import { useLoaderData, useNavigate, useParams } from "react-router";
+import { Link, useLoaderData, useNavigate, useParams } from "react-router";
 import { toast } from "sonner";
 
 import { CaptureInstallButton } from "@/components/capture-install-options";
@@ -817,12 +817,14 @@ export default function ShareRoute() {
         <header className="flex min-w-0 shrink-0 flex-wrap items-center gap-2 border-b border-border px-3 py-2 sm:gap-3 sm:px-4 sm:py-3 lg:flex-nowrap">
           {session ? (
             <Button
+              asChild
               variant="ghost"
               size="icon"
-              onClick={() => navigate("/")}
               aria-label={t("sharePage.backToHome")}
             >
-              <IconArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
+              <Link to="/">
+                <IconArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
+              </Link>
             </Button>
           ) : null}
           <div className="min-w-0 flex-1">

package/corpus/templates/clips/changelog/2026-07-13-recording-links-open-in-new-tabs.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-13
+---
+
+Recording cards and player back links now support opening in a new tab.

package/corpus/templates/content/app/components/editor/ContentReferencePreview.tsx

@@ -1,7 +1,7 @@
 import { useT } from "@agent-native/core/client";
 import { IconExternalLink, IconFileText } from "@tabler/icons-react";
 import { lazy, Suspense, useMemo } from "react";
-import { useNavigate } from "react-router";
+import { Link } from "react-router";
 
 import { Button } from "@/components/ui/button";
 import { useDocument, useDocuments } from "@/hooks/use-documents";
@@ -66,7 +66,6 @@ export function ContentReferencePreview({
   referenceDepth?: number;
 }) {
   const t = useT();
-  const navigate = useNavigate();
   const documentsQuery = useDocuments();
   const resolvedPath = useMemo(
     () => resolveContentReferencePath(sourcePath, currentPath),
@@ -113,16 +112,15 @@ export function ContentReferencePreview({
         </div>
         {document ? (
           <Button
-            type="button"
+            asChild
             size="sm"
             variant="ghost"
             className="h-8 gap-1.5 px-2 text-xs"
-            onClick={() =>
-              navigate(`/page/${document.id}`, { flushSync: true })
-            }
           >
-            <IconExternalLink className="size-3.5" />
-            {t("editor.reference.open")}
+            <Link to={`/page/${document.id}`}>
+              <IconExternalLink className="size-3.5" />
+              {t("editor.reference.open")}
+            </Link>
           </Button>
         ) : null}
       </div>

package/corpus/templates/content/app/components/editor/database/DatabaseView.tsx

@@ -139,7 +139,7 @@ import {
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
 } from "react";
-import { useLocation, useNavigate } from "react-router";
+import { Link, useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
 
 import {
@@ -1670,14 +1670,16 @@ function DatabaseTable({
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
+                  asChild
                   type="button"
                   variant="ghost"
                   size="sm"
                   aria-label={dbText("openAsFullPage")}
                   className={databaseToolbarIconButtonClass()}
-                  onClick={() => navigate(`/page/${databaseDocumentId}`)}
                 >
-                  <IconArrowsDiagonal className="size-3.5" />
+                  <Link to={`/page/${databaseDocumentId}`}>
+                    <IconArrowsDiagonal className="size-3.5" />
+                  </Link>
                 </Button>
               </TooltipTrigger>
               <TooltipContent>{dbText("openAsFullPage")}</TooltipContent>

package/corpus/templates/content/app/components/editor/database/FormView.tsx

@@ -12,7 +12,7 @@ import {
   IconExternalLink,
 } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
-import { useNavigate } from "react-router";
+import { Link, useNavigate } from "react-router";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -362,14 +362,11 @@ export function DatabaseFormView({
               {t("database.formSubmittedDescription")}
             </div>
           </div>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={() => navigate(`/page/${createdDocumentId}`)}
-          >
-            <IconExternalLink className="size-4" />
-            {t("database.openPage")}
+          <Button asChild type="button" variant="outline" size="sm">
+            <Link to={`/page/${createdDocumentId}`}>
+              <IconExternalLink className="size-4" />
+              {t("database.openPage")}
+            </Link>
           </Button>
         </div>
       ) : null}