@agent-native/core 0.77.3 → 0.77.6

package/corpus/templates/calendar/app/components/calendar/EventOptionControls.tsx

@@ -1,4 +1,4 @@
-import { agentNativePath } from "@agent-native/core/client";
+import { agentNativePath, useT } from "@agent-native/core/client";
 import {
   IconCheck,
   IconInfoCircle,
@@ -47,6 +47,7 @@ export function ReminderControls({
   onRemindersChange: (reminders: ReminderDraft[]) => void;
   idPrefix: string;
 }) {
+  const t = useT();
   const activeReminders =
     reminders.length > 0 ? reminders : [createReminderDraft()];
 
@@ -60,9 +61,13 @@ export function ReminderControls({
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
-          <SelectItem value="default">Calendar default</SelectItem>
-          <SelectItem value="none">No alerts</SelectItem>
-          <SelectItem value="custom">Custom alerts</SelectItem>
+          <SelectItem value="default">
+            {t("eventOptions.calendarDefault")}
+          </SelectItem>
+          <SelectItem value="none">{t("eventOptions.noAlerts")}</SelectItem>
+          <SelectItem value="custom">
+            {t("eventOptions.customAlerts")}
+          </SelectItem>
         </SelectContent>
       </Select>
 
@@ -126,7 +131,9 @@ export function ReminderControls({
                     activeReminders.filter((item) => item.id !== reminder.id),
                   )
                 }
-                aria-label={`Remove alert ${index + 1}`}
+                aria-label={t("eventOptions.removeAlert", {
+                  number: String(index + 1),
+                })}
               >
                 <IconTrash className="h-3.5 w-3.5" />
               </Button>
@@ -144,7 +151,7 @@ export function ReminderControls({
             }
           >
             <IconPlus className="mr-1 h-3.5 w-3.5" />
-            Add alert
+            {t("eventOptions.addAlert")}
           </Button>
         </div>
       )}
@@ -161,6 +168,7 @@ export function AttachmentControls({
   onChange: (attachments: AttachmentDraft[]) => void;
   idPrefix: string;
 }) {
+  const t = useT();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [uploading, setUploading] = useState(false);
   const [uploadStatus, setUploadStatus] = useState<{
@@ -214,13 +222,15 @@ export function AttachmentControls({
   async function handleFileUpload(file: File) {
     if (!canAddAttachment) {
       toast.error(
-        `Google Calendar supports up to ${MAX_EVENT_ATTACHMENTS} attachments per event.`,
+        t("eventOptions.maxAttachments", {
+          count: String(MAX_EVENT_ATTACHMENTS),
+        }),
       );
       return;
     }
 
     if (file.size > MAX_ATTACHMENT_UPLOAD_BYTES) {
-      toast.error("Attachment uploads can be up to 25 MB.");
+      toast.error(t("eventOptions.attachmentUploadLimit"));
       return;
     }
 
@@ -243,16 +253,16 @@ export function AttachmentControls({
 
       if (!response.ok) {
         throw new Error(
-          payload.message || payload.error || "Could not upload attachment.",
+          payload.message || payload.error || t("eventOptions.uploadFailed"),
         );
       }
       if (!payload.url) {
-        throw new Error("Upload did not return an attachment URL.");
+        throw new Error(t("eventOptions.uploadMissingUrl"));
       }
 
       const uploadedAttachment = {
         fileUrl: payload.url,
-        title: file.name || "Attachment",
+        title: file.name || t("eventOptions.attachmentFallbackTitle"),
       };
       if (blankAttachmentIndex >= 0) {
         onChange(
@@ -268,14 +278,14 @@ export function AttachmentControls({
           { ...createAttachmentDraft(), ...uploadedAttachment },
         ]);
       }
-      toast.success("Attachment uploaded");
+      toast.success(t("eventOptions.attachmentUploaded"));
     } catch (error) {
       const message =
-        error instanceof Error ? error.message : "Could not upload attachment.";
+        error instanceof Error ? error.message : t("eventOptions.uploadFailed");
       const permissionMessage = /403|permission|forbidden|unauthorized/i.test(
         message,
       )
-        ? "File upload is not available with the current upload provider credentials. Check Builder.io permissions in Settings, or paste a Drive/HTTPS URL instead."
+        ? t("eventOptions.uploadProviderPermissionError")
         : message;
       toast.error(permissionMessage);
     } finally {
@@ -301,7 +311,7 @@ export function AttachmentControls({
               onChange={(event) =>
                 updateAttachment(attachment.id, { title: event.target.value })
               }
-              placeholder="Attachment title"
+              placeholder={t("eventOptions.attachmentTitle")}
               className="h-8 text-sm"
             />
             <Button
@@ -314,7 +324,9 @@ export function AttachmentControls({
                   activeAttachments.filter((item) => item.id !== attachment.id),
                 )
               }
-              aria-label={`Remove attachment ${index + 1}`}
+              aria-label={t("eventOptions.removeAttachment", {
+                number: String(index + 1),
+              })}
             >
               <IconTrash className="h-3.5 w-3.5" />
             </Button>
@@ -336,7 +348,7 @@ export function AttachmentControls({
         type="file"
         className="sr-only"
         onChange={handleUploadInputChange}
-        aria-label="Upload attachment"
+        aria-label={t("eventOptions.uploadAttachment")}
       />
 
       <div className="flex flex-wrap items-center gap-1.5">
@@ -351,7 +363,7 @@ export function AttachmentControls({
           }
         >
           <IconPlus className="mr-1 h-3.5 w-3.5" />
-          Add attachment
+          {t("eventOptions.addAttachment")}
         </Button>
         <Button
           type="button"
@@ -361,9 +373,7 @@ export function AttachmentControls({
           disabled={!canAddAttachment || uploading || uploadUnavailable}
           onClick={() => {
             if (uploadUnavailable) {
-              toast.error(
-                "File uploads are not configured. Paste a Drive or HTTPS URL instead.",
-              );
+              toast.error(t("eventOptions.fileUploadsNotConfigured"));
               return;
             }
             fileInputRef.current?.click();
@@ -374,14 +384,15 @@ export function AttachmentControls({
           ) : (
             <IconUpload className="mr-1 h-3.5 w-3.5" />
           )}
-          {uploading ? "Uploading" : "Upload file"}
+          {uploading
+            ? t("eventOptions.uploading")
+            : t("eventOptions.uploadFile")}
         </Button>
       </div>
       {uploadUnavailable && (
         <p className="flex items-start gap-1.5 text-xs text-muted-foreground">
           <IconInfoCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
-          File uploads need a configured upload provider. Paste a Drive or HTTPS
-          URL for now.
+          {t("eventOptions.fileUploadsNeedProvider")}
         </p>
       )}
     </div>
@@ -397,6 +408,7 @@ export function EventColorSwatches({
   onChange: (colorId: string | undefined) => void;
   includeDefault?: boolean;
 }) {
+  const t = useT();
   const options = includeDefault
     ? GOOGLE_EVENT_COLOR_OPTIONS
     : GOOGLE_EVENT_COLOR_OPTIONS.filter((option) => option.id !== "default");
@@ -417,7 +429,9 @@ export function EventColorSwatches({
               option.id === "default" && "bg-background",
             )}
             style={option.color ? { backgroundColor: option.color } : undefined}
-            aria-label={`Set event color to ${option.label}`}
+            aria-label={t("eventOptions.setEventColorTo", {
+              color: option.label,
+            })}
           >
             {selected && (
               <IconCheck

package/corpus/templates/calendar/app/components/calendar/FindTimePanel.tsx

@@ -1,4 +1,4 @@
-import { useActionQuery } from "@agent-native/core/client";
+import { useActionQuery, useT } from "@agent-native/core/client";
 import type {
   FindTimeBusyBlock,
   FindTimeResult,
@@ -101,6 +101,7 @@ function sameMinute(a?: string, b?: string) {
 }
 
 function attendeeLabel(
+  t: ReturnType<typeof useT>,
   email: string,
   attendees: AttendeeRecipient[],
   role?: string,
@@ -109,7 +110,7 @@ function attendeeLabel(
     (attendee) => attendee.email.toLowerCase() === email.toLowerCase(),
   );
   if (match?.displayName) return match.displayName;
-  if (role === "organizer") return "You";
+  if (role === "organizer") return t("findTime.you");
   return email;
 }
 
@@ -185,6 +186,7 @@ export function FindTimePanel({
   className,
   isTakeover = false,
 }: FindTimePanelProps) {
+  const t = useT();
   const [anchorDate, setAnchorDate] = useState(() => parseDateOnly(date));
 
   useEffect(() => {
@@ -309,7 +311,7 @@ export function FindTimePanel({
             className="h-7 px-2 text-xs"
             onClick={() => setAnchorDate(new Date())}
           >
-            Today
+            {t("calendarView.today")}
           </Button>
           <Button
             type="button"
@@ -327,13 +329,13 @@ export function FindTimePanel({
         <div className="space-y-1.5">
           <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
             <IconUsers className="h-3.5 w-3.5" />
-            Guests
+            {t("eventForm.addGuests")}
           </div>
           <AttendeeAutocomplete
             attendees={attendees}
             onAdd={onAddAttendee}
             onRemove={onRemoveAttendee}
-            placeholder="Search contacts or type an email"
+            placeholder={t("eventForm.attendeesPlaceholder")}
           />
         </div>
       )}
@@ -520,15 +522,20 @@ export function FindTimePanel({
                               borderLeft: `3px solid ${color}`,
                             }}
                             title={`${attendeeLabel(
+                              t,
                               block.participantEmail,
                               attendees,
-                            )}: ${block.title || "Busy"}`}
+                            )}: ${block.title || t("findTime.busy")}`}
                           >
                             <div className="truncate font-medium text-foreground">
-                              {block.title || "Busy"}
+                              {block.title || t("findTime.busy")}
                             </div>
                             <div className="truncate text-muted-foreground">
-                              {attendeeLabel(block.participantEmail, attendees)}
+                              {attendeeLabel(
+                                t,
+                                block.participantEmail,
+                                attendees,
+                              )}
                             </div>
                           </div>
                         );
@@ -543,7 +550,7 @@ export function FindTimePanel({
         <div className="min-w-0 space-y-3">
           <div className="space-y-1.5">
             <div className="text-xs font-medium text-muted-foreground">
-              Suggested Times
+              {t("findTime.suggestedTimes")}
             </div>
             {isWeekLoading ? (
               <div className="space-y-2">
@@ -581,7 +588,7 @@ export function FindTimePanel({
               </div>
             ) : (
               <div className="rounded-md border border-border px-3 py-6 text-center text-xs text-muted-foreground">
-                No matching slots
+                {t("findTime.noMatchingSlots")}
               </div>
             )}
           </div>
@@ -589,7 +596,7 @@ export function FindTimePanel({
           {participants.length > 0 && (
             <div className="space-y-1.5">
               <div className="text-xs font-medium text-muted-foreground">
-                Guests
+                {t("eventForm.addGuests")}
               </div>
               <div className="space-y-1">
                 {participants.map((participant) => (
@@ -608,6 +615,7 @@ export function FindTimePanel({
                     />
                     <span className="truncate">
                       {attendeeLabel(
+                        t,
                         participant.email,
                         attendees,
                         participant.role,
@@ -622,7 +630,7 @@ export function FindTimePanel({
           {findTime.isFetching && !isWeekLoading && (
             <div className="flex items-center gap-2 text-xs text-muted-foreground">
               <IconLoader2 className="h-3.5 w-3.5 animate-spin" />
-              Refreshing
+              {t("findTime.refreshing")}
             </div>
           )}
         </div>
@@ -641,11 +649,14 @@ interface FindTimeTakeoverProps extends FindTimePanelProps {
 export function FindTimeTakeover({
   open,
   onOpenChange,
-  title = "Find a time",
+  title,
   subtitle,
   className,
   ...panelProps
 }: FindTimeTakeoverProps) {
+  const t = useT();
+  const dialogTitle = title ?? t("eventForm.findTime");
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
@@ -654,15 +665,16 @@ export function FindTimeTakeover({
       >
         <header className="flex h-14 shrink-0 items-center border-b border-border px-4 pr-12 md:px-6">
           <div className="min-w-0">
-            <DialogTitle className="truncate text-base">{title}</DialogTitle>
+            <DialogTitle className="truncate text-base">
+              {dialogTitle}
+            </DialogTitle>
             <DialogDescription
               className={cn(
                 "mt-1 truncate text-xs text-muted-foreground",
                 !subtitle && "sr-only",
               )}
             >
-              {subtitle ||
-                "Review shared availability and choose a meeting time."}
+              {subtitle || t("findTime.takeoverDescription")}
             </DialogDescription>
           </div>
         </header>