@agent-native/core 0.79.18 → 0.79.20

package/corpus/templates/clips/app/components/player/delete-recording-menu.tsx

@@ -1,5 +1,5 @@
 import { useActionMutation, useT } from "@agent-native/core/client";
-import { IconDots, IconTrash } from "@tabler/icons-react";
+import { IconDots, IconDownload, IconTrash } from "@tabler/icons-react";
 import { useCallback, useState } from "react";
 import { toast } from "sonner";
 
@@ -18,6 +18,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 
@@ -26,12 +27,29 @@ interface DeleteRecordingMenuProps {
   onDeleted?: () => void;
 }
 
-export function DeleteRecordingMenu({
+interface RecordingOptionsMenuProps extends DeleteRecordingMenuProps {
+  canDelete?: boolean;
+  canDownload?: boolean;
+  downloadPending?: boolean;
+  downloadLabel?: string;
+  downloadingLabel?: string;
+  onDownload?: () => void;
+}
+
+export function RecordingOptionsMenu({
   recordingId,
   onDeleted,
-}: DeleteRecordingMenuProps) {
+  canDelete = true,
+  canDownload = false,
+  downloadPending = false,
+  downloadLabel,
+  downloadingLabel,
+  onDownload,
+}: RecordingOptionsMenuProps) {
   const t = useT();
   const [open, setOpen] = useState(false);
+  const showDownload = canDownload && Boolean(onDownload);
+  const showDelete = canDelete;
   const trashRecording = useActionMutation<any, { id: string }>(
     "trash-recording",
     {
@@ -50,6 +68,8 @@ export function DeleteRecordingMenu({
     trashRecording.mutate({ id: recordingId });
   }, [recordingId, trashRecording]);
 
+  if (!showDownload && !showDelete) return null;
+
   return (
     <AlertDialog
       open={open}
@@ -69,45 +89,65 @@ export function DeleteRecordingMenu({
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-44">
-          <DropdownMenuItem
-            onSelect={(event) => {
-              event.preventDefault();
-              setOpen(true);
-            }}
-            className="text-destructive focus:text-destructive"
-          >
-            <IconTrash className="mr-2 h-4 w-4" />
-            {t("deleteRecordingMenu.delete")}
-          </DropdownMenuItem>
+          {showDownload ? (
+            <DropdownMenuItem
+              onSelect={() => onDownload?.()}
+              disabled={downloadPending}
+            >
+              <IconDownload className="me-2 h-4 w-4" />
+              {downloadPending
+                ? (downloadingLabel ?? t("sharePage.downloading"))
+                : (downloadLabel ?? t("sharePage.downloadMp4"))}
+            </DropdownMenuItem>
+          ) : null}
+          {showDownload && showDelete ? <DropdownMenuSeparator /> : null}
+          {showDelete ? (
+            <DropdownMenuItem
+              onSelect={(event) => {
+                event.preventDefault();
+                setOpen(true);
+              }}
+              className="text-destructive focus:text-destructive"
+            >
+              <IconTrash className="me-2 h-4 w-4" />
+              {t("deleteRecordingMenu.delete")}
+            </DropdownMenuItem>
+          ) : null}
         </DropdownMenuContent>
       </DropdownMenu>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>
-            {t("deleteRecordingMenu.moveTitle")}
-          </AlertDialogTitle>
-          <AlertDialogDescription>
-            {t("deleteRecordingMenu.moveDescription")}
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel disabled={trashRecording.isPending}>
-            {t("common.cancel")}
-          </AlertDialogCancel>
-          <AlertDialogAction
-            disabled={trashRecording.isPending}
-            onClick={(event) => {
-              event.preventDefault();
-              handleTrashRecording();
-            }}
-            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-          >
-            {trashRecording.isPending
-              ? t("deleteRecordingMenu.deleting")
-              : t("deleteRecordingMenu.moveToTrash")}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
+      {showDelete ? (
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("deleteRecordingMenu.moveTitle")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("deleteRecordingMenu.moveDescription")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={trashRecording.isPending}>
+              {t("common.cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              disabled={trashRecording.isPending}
+              onClick={(event) => {
+                event.preventDefault();
+                handleTrashRecording();
+              }}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {trashRecording.isPending
+                ? t("deleteRecordingMenu.deleting")
+                : t("deleteRecordingMenu.moveToTrash")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      ) : null}
     </AlertDialog>
   );
 }
+
+export function DeleteRecordingMenu(props: DeleteRecordingMenuProps) {
+  return <RecordingOptionsMenu {...props} canDelete />;
+}

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

@@ -34,7 +34,7 @@ import { toast } from "sonner";
 import { EditableRecordingTitle } from "@/components/editable-recording-title";
 import { EditorLayout } from "@/components/editor/editor-layout";
 import { CommentsPanel } from "@/components/player/comments-panel";
-import { DeleteRecordingMenu } from "@/components/player/delete-recording-menu";
+import { RecordingOptionsMenu } from "@/components/player/delete-recording-menu";
 import { InsightsPanel } from "@/components/player/insights-panel";
 import { ReactionsTray } from "@/components/player/reactions-tray";
 import { SettingsPanel } from "@/components/player/settings-panel";
@@ -212,6 +212,7 @@ export default function RecordingPage() {
   // can retry or report the issue instead of staring at a spinner.
   const [processingTimeout, setProcessingTimeout] = useState(false);
   const [retryingFinalize, setRetryingFinalize] = useState(false);
+  const [downloading, setDownloading] = useState(false);
 
   useEffect(() => {
     if (
@@ -306,6 +307,30 @@ export default function RecordingPage() {
   const isLoomRecording = isLoomRecordingSource(recording);
   const canUseNativeEditor = canEdit && !isLoomEmbedBacked;
   const canDelete = role === "owner";
+  const canDownloadRecording = Boolean(
+    recording?.enableDownloads && recording.videoUrl && !isLoomEmbedBacked,
+  );
+  const downloadRecording = useCallback(async () => {
+    if (!recording?.videoUrl) return;
+    setDownloading(true);
+    try {
+      const res = await fetch(recording.videoUrl);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${sanitizeFilename(recording.title || "clip")}.mp4`;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    } catch {
+      window.open(recording.videoUrl, "_blank", "noopener,noreferrer");
+    } finally {
+      setDownloading(false);
+    }
+  }, [recording?.title, recording?.videoUrl]);
   const retryFinalizeAfterStorage = useCallback(async () => {
     if (!recordingId) return;
     setRetryingFinalize(true);
@@ -1011,9 +1036,15 @@ export default function RecordingPage() {
             </Button>
           </ShareRecordingPopover>
 
-          {canDelete ? (
-            <DeleteRecordingMenu
+          {canDelete || canDownloadRecording ? (
+            <RecordingOptionsMenu
               recordingId={recording.id}
+              canDelete={canDelete}
+              canDownload={canDownloadRecording}
+              downloadPending={downloading}
+              onDownload={() => {
+                void downloadRecording();
+              }}
               onDeleted={() => navigate("/library", { replace: true })}
             />
           ) : null}
@@ -1284,6 +1315,16 @@ function displayRecordingTitle(title: string | null | undefined): string {
   return isDefaultTitle(title) ? "Untitled Clip" : (title ?? "").trim();
 }
 
+function sanitizeFilename(name: string): string {
+  return (
+    name
+      .trim()
+      .replace(/[^\w.-]+/g, "-")
+      .replace(/^-+|-+$/g, "")
+      .slice(0, 80) || "clip"
+  );
+}
+
 function shouldShowGeneratedTitleSkeleton(
   recording: { title: string | null | undefined; createdAt?: string | null },
   transcriptStatus?: string,

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

@@ -38,7 +38,7 @@ import { useLoaderData, useNavigate, useParams } from "react-router";
 import { CaptureInstallButton } from "@/components/capture-install-options";
 import { AccessPasswordPrompt } from "@/components/player/access-password-prompt";
 import { CommentsPanel } from "@/components/player/comments-panel";
-import { DeleteRecordingMenu } from "@/components/player/delete-recording-menu";
+import { RecordingOptionsMenu } from "@/components/player/delete-recording-menu";
 import { ReactionsTray } from "@/components/player/reactions-tray";
 import { ShareRecordingPopover } from "@/components/player/share-dialog";
 import { SignInPromptDialog } from "@/components/player/sign-in-prompt-dialog";
@@ -797,8 +797,16 @@ export default function ShareRoute() {
               </DropdownMenu>
             ) : null}
             {viewerIsOwner ? (
-              <DeleteRecordingMenu
+              <RecordingOptionsMenu
                 recordingId={recording.id}
+                canDelete
+                canDownload={canDownloadRecording}
+                downloadPending={downloading}
+                downloadLabel={t("sharePage.downloadMp4")}
+                downloadingLabel={t("sharePage.downloading")}
+                onDownload={() => {
+                  void downloadRecording();
+                }}
                 onDeleted={() => navigate("/library", { replace: true })}
               />
             ) : null}

package/corpus/templates/clips/changelog/2026-06-26-recording-details-button-stays-at-the-far-right-on-small-screen.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-26
+---
+
+The recording details button stays at the far right on small screens.

package/corpus/templates/clips/changelog/2026-06-26-the-agent-sidebar-now-slides-in-smoothly-without-duplicate-e.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-26
+---
+
+The agent sidebar now slides in smoothly without duplicate edge borders.

package/corpus/templates/plan/app/components/plan/CanvasArea.tsx

@@ -43,6 +43,8 @@ const WHEEL_ZOOM_STEP = 0.16;
 const PINCH_ZOOM_SENSITIVITY = 0.01;
 /** Base CSS grid cell, scaled by zoom. */
 const GRID_CELL = 28;
+/** Extra world-space grid on each side so the grid still fills overscrolled pans. */
+const GRID_PADDING = 5000;
 
 type CanvasView = typeof DEFAULT_VIEW;
 export type CanvasViewport = CanvasView;
@@ -156,6 +158,9 @@ export function CanvasArea({
   );
   const latestViewportChangeRef = useRef<CanvasViewport>(initialView);
   const viewportChangeFrameRef = useRef<number | null>(null);
+  // Kept current each render so the central pan clamp (in updateView) can read
+  // the live board size without widening updateView's dependencies.
+  const boardRef = useRef({ width: 0, height: 0 });
   const queueViewportChange = useCallback(
     (nextView: CanvasViewport) => {
       latestViewportChangeRef.current = nextView;
@@ -171,7 +176,11 @@ export function CanvasArea({
   const updateView = useCallback(
     (resolve: (current: CanvasView) => CanvasView) => {
       setView((current) => {
-        const next = resolve(current);
+        const next = clampPanToGrid(
+          resolve(current),
+          boardRef.current,
+          viewportRef.current?.getBoundingClientRect() ?? null,
+        );
         if (sameCanvasView(current, next)) return current;
         queueViewportChange(next);
         return next;
@@ -332,6 +341,7 @@ export function CanvasArea({
     );
     return { width: maxX + 360, height: maxY + 280 };
   }, [frames, annotations, legacyNotes]);
+  boardRef.current = board;
 
   const lastAutoFitKeyRef = useRef<string | null>(null);
   useEffect(() => {
@@ -385,6 +395,7 @@ export function CanvasArea({
   }, [frameLayoutKey, frames, hasSavedViewport, updateView]);
 
   const { zoom, pan } = view;
+  const worldTransform = `translate3d(${pan.x}px, ${pan.y}px, 0) scale(${zoom})`;
   useEffect(() => {
     queueViewportChange(view);
   }, [queueViewportChange, view]);
@@ -656,8 +667,6 @@ export function CanvasArea({
         tabIndex={0}
         style={
           {
-            backgroundPosition: `${pan.x}px ${pan.y}px`,
-            backgroundSize: `${GRID_CELL * zoom}px ${GRID_CELL * zoom}px`,
             overscrollBehavior: "contain",
             touchAction: "none",
           } as CSSProperties
@@ -724,11 +733,25 @@ export function CanvasArea({
           style={{
             width: board.width,
             height: board.height,
-            transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+            transform: worldTransform,
             transformOrigin: "0 0",
             willChange: "transform",
+            backfaceVisibility: "hidden",
           }}
         >
+          <div
+            aria-hidden="true"
+            className="plan-canvas-grid absolute"
+            data-plan-canvas-grid
+            style={{
+              left: -GRID_PADDING,
+              top: -GRID_PADDING,
+              width: board.width + GRID_PADDING * 2,
+              height: board.height + GRID_PADDING * 2,
+              backgroundSize: `${GRID_CELL}px ${GRID_CELL}px`,
+            }}
+          />
+
           {/* Section containers sit BEHIND the frames (lowest layer) so each
               group reads as one bounded region the artboards rest inside. */}
           {sectionRects.map(({ section, rect }) => (
@@ -2293,3 +2316,32 @@ function resolveMarkupComposerPosition(input: {
 function clamp(value: number, min: number, max: number) {
   return Math.max(min, Math.min(max, value));
 }
+
+/**
+ * Keep the visible viewport inside the rendered grid. The grid is a fixed-size
+ * child of the transformed world (board + GRID_PADDING on every side), so it is
+ * large but finite; without this clamp a far-enough pan scrolls past the grid
+ * edge into a blank void. Screen = pan + world * zoom, and the grid spans world
+ * [-GRID_PADDING, board + GRID_PADDING], so bounding pan to the range below
+ * guarantees the grid always fills the viewport while still allowing the full
+ * GRID_PADDING of overscroll. A no-op until the viewport has been measured.
+ */
+function clampPanToGrid(
+  view: CanvasView,
+  board: { width: number; height: number },
+  rect: DOMRect | null,
+): CanvasView {
+  if (!rect) return view;
+  const { zoom } = view;
+  const minPanX = rect.width - (board.width + GRID_PADDING) * zoom;
+  const maxPanX = GRID_PADDING * zoom;
+  const minPanY = rect.height - (board.height + GRID_PADDING) * zoom;
+  const maxPanY = GRID_PADDING * zoom;
+  return {
+    zoom,
+    pan: {
+      x: minPanX <= maxPanX ? clamp(view.pan.x, minPanX, maxPanX) : view.pan.x,
+      y: minPanY <= maxPanY ? clamp(view.pan.y, minPanY, maxPanY) : view.pan.y,
+    },
+  };
+}

package/corpus/templates/plan/app/global.css

@@ -255,13 +255,18 @@
   touch-action: none;
 }
 
-/* Infinite low-contrast grid (slightly darker than the document bg) that
- * moves on pan via background-position and scales with zoom — both driven
- * inline by CanvasArea. */
+/* Infinite low-contrast grid. The live grid is rendered inside the transformed
+ * canvas world so Chrome can composite grid + artboards together while panning. */
 .plan-canvas-viewport {
+  isolation: isolate;
+}
+
+.plan-canvas-grid {
+  pointer-events: none;
   background-image:
     linear-gradient(var(--plan-grid-line) 1px, transparent 1px),
     linear-gradient(90deg, var(--plan-grid-line) 1px, transparent 1px);
+  backface-visibility: hidden;
 }
 
 /* Fixed-size static artboard frame. No border / shadow / box around the

package/corpus/templates/plan/app/pages/PlansPage.tsx

@@ -7113,7 +7113,7 @@ function PlanCanvasSkeleton() {
       aria-hidden="true"
     >
       <div
-        className="plan-canvas-viewport absolute inset-0"
+        className="plan-canvas-grid absolute inset-0"
         style={{
           backgroundPosition: "96px 64px",
           backgroundSize: "20px 20px",

package/corpus/templates/plan/changelog/2026-06-26-canvas-grid-panning-now-stays-smooth-and-fills-the-workspace.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-26
+---
+
+Canvas grid panning now stays smooth and fills the workspace while navigating large plans.

package/dist/client/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/client/i18n.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/client/i18n.tsx"],"names":[],"mappings":"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"}

package/dist/client/i18n.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as SelectPrimitive from "@radix-ui/react-select";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { IconCheck, IconChevronDown, IconLanguage } from "@tabler/icons-react";
 import i18next from "i18next";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
@@ -8,6 +8,7 @@ import defaultEnglishMessages from "../localization/default-messages.js";
 import { DEFAULT_LOCALE, LOCALE_HYDRATION_GLOBAL, LOCALE_METADATA, LOCALE_STORAGE_KEY, SUPPORTED_LOCALES, localeDirection, normalizeLocalizationPreference, resolveLocaleFromCandidates, resolveLocaleFromPreference, } from "../localization/shared.js";
 import { setClientAppState } from "./application-state.js";
 import { callAction } from "./use-action.js";
+import { cn } from "./utils.js";
 export { DEFAULT_LOCALE, LOCALE_HYDRATION_GLOBAL, LOCALE_METADATA, LOCALE_STORAGE_KEY, SUPPORTED_LOCALES, localeDirection, normalizeLocaleCode, normalizeLocalePreference, normalizeLocalizationPreference, resolveLocaleFromCandidates, resolveLocaleFromPreference, } from "../localization/shared.js";
 export { getLocaleInitScript } from "../localization/server.js";
 const LocaleContext = createContext(null);
@@ -464,6 +465,7 @@ export function useFormatters() {
 }
 export function LanguagePicker({ className, includeSystem = true, label, variant = "select", }) {
     const { locale, preference, setPreference } = useLocale();
+    const [open, setOpen] = useState(false);
     const copy = LANGUAGE_PICKER_COPY[locale] ?? LANGUAGE_PICKER_COPY[DEFAULT_LOCALE];
     const resolvedLabel = label ?? copy.label;
     const options = [
@@ -478,17 +480,26 @@ export function LanguagePicker({ className, includeSystem = true, label, variant
             : []),
         ...SUPPORTED_LOCALES.map((code) => ({
             value: code,
-            label: LOCALE_METADATA[code].nativeName === LOCALE_METADATA[code].englishName
-                ? LOCALE_METADATA[code].nativeName
-                : `${LOCALE_METADATA[code].nativeName} (${LOCALE_METADATA[code].englishName})`,
+            label: `${LOCALE_METADATA[code].nativeName} (${code})`,
             description: code,
         })),
     ];
     const selected = options.find((option) => option.value === preference);
-    return (_jsx("div", { className: className, children: _jsxs(SelectPrimitive.Root, { value: preference, onValueChange: (value) => void setPreference(normalizeLocalizationPreference(value).locale), children: [_jsxs(SelectPrimitive.Trigger, { className: variant === "icon"
-                        ? "flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background text-foreground outline-none transition-colors hover:bg-accent/40 data-[placeholder]:text-muted-foreground"
-                        : "flex h-9 w-full items-center justify-between rounded-md border border-border bg-background px-3 text-start text-[12px] text-foreground outline-none transition-colors hover:bg-accent/40 data-[placeholder]:text-muted-foreground", "aria-label": resolvedLabel, title: selected?.label ?? resolvedLabel, children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(IconLanguage, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), variant === "select" ? (_jsx(SelectPrimitive.Value, { children: _jsx("span", { className: "truncate", children: selected?.label ?? preference }) })) : null] }), variant === "select" ? (_jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(IconChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) })) : null] }), _jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { position: "popper", sideOffset: 6, className: variant === "icon"
-                            ? "z-[9999] min-w-56 overflow-hidden rounded-lg border border-border bg-popover shadow-lg"
-                            : "z-[9999] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-lg border border-border bg-popover shadow-lg", children: _jsx(SelectPrimitive.Viewport, { className: "p-1", children: options.map((option) => (_jsxs(SelectPrimitive.Item, { value: option.value, className: "relative flex w-full cursor-pointer select-none items-start gap-2 rounded-md px-8 py-2.5 text-[12px] outline-none data-[highlighted]:bg-accent/60 data-[state=checked]:bg-accent/40", children: [_jsx("span", { className: "absolute start-2 top-2.5 flex h-4 w-4 items-center justify-center text-muted-foreground", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(IconCheck, { className: "h-3.5 w-3.5" }) }) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx(SelectPrimitive.ItemText, { children: _jsx("span", { className: "text-foreground", children: option.label }) }), _jsx("span", { className: "mt-0.5 text-[11px] leading-relaxed text-muted-foreground", children: option.description })] })] }, option.value))) }) }) })] }) }));
+    const selectedLabel = selected?.label ?? preference;
+    const triggerLabel = `${resolvedLabel}: ${selectedLabel}`;
+    function handleOptionClick(value) {
+        setOpen(false);
+        void setPreference(normalizeLocalizationPreference(value).locale);
+    }
+    return (_jsx("div", { className: className, children: _jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": triggerLabel, title: triggerLabel, "data-language-picker-trigger": true, className: cn("shrink-0 rounded-md border border-border bg-background text-foreground outline-none transition-colors hover:border-foreground/30 hover:bg-accent/40 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[state=open]:border-foreground/30 data-[state=open]:bg-accent/40", variant === "icon"
+                            ? "flex h-8 w-8 items-center justify-center"
+                            : "flex h-9 w-full items-center justify-between gap-2 px-3 text-start text-sm"), children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(IconLanguage, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), variant === "select" ? (_jsx("span", { className: "truncate", children: selectedLabel })) : (_jsx("span", { className: "sr-only", children: triggerLabel }))] }), variant === "select" ? (_jsx(IconChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground", "aria-hidden": "true" })) : null] }) }), _jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { align: variant === "icon" ? "end" : "start", sideOffset: 6, role: "menu", className: cn("z-[9999] max-h-[min(20rem,var(--radix-popover-content-available-height))] overflow-y-auto rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-lg outline-none will-change-[transform,opacity] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:duration-100 data-[state=open]:duration-150 data-[state=closed]:ease-in data-[state=open]:ease-out data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1", variant === "icon"
+                            ? "min-w-56"
+                            : "w-[min(20rem,calc(100vw-2rem))] min-w-[var(--radix-popover-trigger-width)]"), children: options.map((option) => {
+                            const optionSelected = option.value === preference;
+                            return (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": optionSelected, title: option.description, onClick: () => handleOptionClick(option.value), className: cn("flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-start text-sm outline-none transition-colors hover:bg-accent/60 hover:text-foreground focus-visible:bg-accent/60 focus-visible:text-foreground", optionSelected
+                                    ? "bg-accent/40 text-foreground"
+                                    : "text-muted-foreground"), children: [_jsx(IconCheck, { className: cn("h-3.5 w-3.5 shrink-0", optionSelected ? "opacity-100" : "opacity-0"), "aria-hidden": "true" }), _jsx("span", { className: "truncate", children: option.label })] }, option.value));
+                        }) }) })] }) }));
 }
 //# sourceMappingURL=i18n.js.map