@agent-native/core-corpus 0.213.1 → 0.216.0

package/corpus/templates/slides-2/app/components/templates/DeckTemplateLibrary.tsx

@@ -0,0 +1,314 @@
+import {
+  actionErrorMessage,
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  TemplateLibraryGrid,
+  TemplatePreviewDialog,
+} from "@agent-native/toolkit/app-shell";
+import { LazyChunkErrorBoundary } from "@agent-native/toolkit/app/shared";
+import { LazyChunkRetryFallback } from "@agent-native/toolkit/app/shared";
+import { IconDots } from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { nanoid } from "nanoid";
+import { lazy, Suspense, useRef, useState, type RefObject } from "react";
+import { useNavigate, useSearchParams } from "react-router";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useDecks } from "@/context/DeckContext";
+
+import { DeckTemplatePreview } from "./DeckTemplatePreview";
+import { DeckTemplateStage } from "./DeckTemplateStage";
+
+const LazySlideRenderer = lazy(() => import("@/components/deck/SlideRenderer"));
+
+export function DeckTemplateLibrary({
+  search = "",
+  enabled = true,
+}: {
+  search?: string;
+  enabled?: boolean;
+}) {
+  const t = useT();
+  const navigate = useNavigate();
+  const { reloadDecksWithStatus } = useDecks();
+  const queryClient = useQueryClient();
+  const [params, setParams] = useSearchParams();
+  const selectedId = params.get("templateId");
+  const previewTriggerRef = useRef<HTMLElement | null>(null);
+  const query = useActionQuery(
+    "list-deck-templates",
+    {
+      page: 1,
+      pageSize: 24,
+      includePreview: "true",
+      search: search.trim() || undefined,
+    },
+    { enabled },
+  );
+  const create = useActionMutation("create-deck-from-template");
+  const retryIds = useRef(new Map<string, string>());
+  const pending = useRef(false);
+  const [pendingId, setPendingId] = useState<string | null>(null);
+  const [copyError, setCopyError] = useState<{
+    id: string;
+    message: string;
+  } | null>(null);
+  const select = (id: string | null) => {
+    const next = new URLSearchParams(params);
+    if (id) next.set("templateId", id);
+    else next.delete("templateId");
+    setParams(next, { replace: true });
+  };
+
+  const copyTemplate = async (id: string) => {
+    if (pending.current) return;
+    pending.current = true;
+    setPendingId(id);
+    setCopyError(null);
+    const newId = retryIds.current.get(id) ?? nanoid();
+    retryIds.current.set(id, newId);
+    try {
+      const result = await create.mutateAsync({ templateId: id, newId });
+      if (!result.id) throw new Error(t("templatesPage.createFailed"));
+      const reloadStatus = await reloadDecksWithStatus();
+      if (reloadStatus === "failed") {
+        void queryClient.invalidateQueries({
+          queryKey: ["action", "list-decks"],
+        });
+      }
+      retryIds.current.delete(id);
+      void queryClient.invalidateQueries({
+        queryKey: ["action", "list-decks"],
+      });
+      await navigate(`/deck/${encodeURIComponent(result.id)}`);
+    } catch (cause) {
+      setCopyError({
+        id,
+        message: actionErrorMessage(cause) ?? t("templatesPage.createFailed"),
+      });
+    } finally {
+      pending.current = false;
+      setPendingId(null);
+    }
+  };
+
+  return (
+    <>
+      <TemplateLibraryGrid
+        items={query.data?.templates ?? []}
+        selectedId={selectedId}
+        pendingId={pendingId}
+        disabled={pendingId !== null}
+        loading={query.isLoading}
+        pendingLabel={t("templatesPage.opening")}
+        error={
+          copyError?.message ??
+          (query.isError
+            ? (actionErrorMessage(query.error) ?? t("templatesPage.loadFailed"))
+            : null)
+        }
+        onRetry={() => {
+          if (copyError) void copyTemplate(copyError.id);
+          else void query.refetch();
+        }}
+        labels={{
+          loading: t("templatesPage.loading"),
+          empty: t("templatesPage.empty"),
+          retry: t("home.retry"),
+        }}
+        onSelect={(template) => void copyTemplate(template.id)}
+        renderPreview={(template) =>
+          template.previewHtml ? (
+            <DeckTemplatePreview
+              html={template.previewHtml}
+              title={template.title}
+            />
+          ) : null
+        }
+        renderMetadata={(template) =>
+          search.trim() &&
+          template.category.toLowerCase().includes(search.trim().toLowerCase())
+            ? template.category
+            : null
+        }
+        renderActions={(template) => (
+          <TemplateActions
+            title={template.title}
+            disabled={pendingId !== null}
+            onPreview={(trigger) => {
+              previewTriggerRef.current = trigger;
+              select(template.id);
+            }}
+          />
+        )}
+      />
+      {selectedId ? (
+        <DeckTemplateDialog
+          key={selectedId}
+          id={selectedId}
+          onClose={() => select(null)}
+          restoreFocusRef={previewTriggerRef}
+          onUseTemplate={() => void copyTemplate(selectedId)}
+          useTemplatePending={pendingId === selectedId}
+          useTemplateDisabled={pendingId !== null}
+          copyError={copyError?.id === selectedId ? copyError.message : null}
+          onRetryCopy={() => void copyTemplate(selectedId)}
+        />
+      ) : null}
+    </>
+  );
+}
+
+function TemplateActions({
+  title,
+  disabled,
+  onPreview,
+}: {
+  title: string;
+  disabled: boolean;
+  onPreview: (trigger: HTMLElement | null) => void;
+}) {
+  const t = useT();
+  const trigger = useRef<HTMLButtonElement>(null);
+  const openingPreview = useRef(false);
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          ref={trigger}
+          variant="ghost"
+          size="icon"
+          disabled={disabled}
+          aria-label={t("templatesPage.actions", { title })}
+        >
+          <IconDots />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        onCloseAutoFocus={(event) => {
+          if (openingPreview.current) {
+            event.preventDefault();
+            openingPreview.current = false;
+          }
+        }}
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            onSelect={() => {
+              openingPreview.current = true;
+              onPreview(trigger.current);
+            }}
+          >
+            {t("templatesPage.previewAction")}
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function DeckTemplateDialog({
+  id,
+  onClose,
+  restoreFocusRef,
+  onUseTemplate,
+  useTemplatePending,
+  useTemplateDisabled,
+  copyError,
+  onRetryCopy,
+}: {
+  id: string;
+  onClose: () => void;
+  restoreFocusRef: RefObject<HTMLElement | null>;
+  onUseTemplate: () => void;
+  useTemplatePending: boolean;
+  useTemplateDisabled: boolean;
+  copyError: string | null;
+  onRetryCopy: () => void;
+}) {
+  const t = useT();
+  const query = useActionQuery("get-deck-template", { id });
+  const [selectedSlideId, setSelectedSlideId] = useState<string | null>(null);
+  const slides = Array.isArray(query.data?.slides) ? query.data.slides : [];
+  const slide = slides.find((item) => item.id === selectedSlideId) ?? slides[0];
+  const validTemplate =
+    slides.length > 0 &&
+    slides.every(
+      (item) =>
+        typeof item.content === "string" && item.content.trim().length > 0,
+    );
+  return (
+    <TemplatePreviewDialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+      title={query.data?.title ?? t("templatesPage.preview")}
+      restoreFocusRef={restoreFocusRef}
+      onUseTemplate={onUseTemplate}
+      useTemplatePending={useTemplatePending}
+      useTemplateDisabled={useTemplateDisabled}
+      loading={query.isLoading}
+      error={
+        copyError ??
+        (!query.isLoading && (query.isError || !validTemplate)
+          ? (actionErrorMessage(query.error) ?? t("templatesPage.loadFailed"))
+          : null)
+      }
+      onRetry={copyError ? onRetryCopy : () => void query.refetch()}
+      labels={{
+        close: t("comments.close"),
+        useTemplate: t("templatesPage.useTemplate"),
+        loading: t("templatesPage.loading"),
+        empty: t("templatesPage.empty"),
+        retry: t("home.retry"),
+        thumbnails: t("header.slides"),
+      }}
+      thumbnails={
+        validTemplate
+          ? slides.map((item, index) => ({
+              id: item.id,
+              title: t("templatesPage.slidePosition", {
+                current: index + 1,
+                total: slides.length,
+              }),
+              preview: (
+                <DeckTemplatePreview
+                  html={item.content}
+                  title={query.data!.title}
+                />
+              ),
+            }))
+          : []
+      }
+      selectedId={slide?.id ?? ""}
+      onSelectedIdChange={setSelectedSlideId}
+    >
+      {slide ? (
+        <LazyChunkErrorBoundary fallback={<LazyChunkRetryFallback />}>
+          <Suspense fallback={<Skeleton className="h-full w-full" />}>
+            <DeckTemplateStage>
+              <LazySlideRenderer
+                slide={slide}
+                aspectRatio="16:9"
+                thumbnail={false}
+              />
+            </DeckTemplateStage>
+          </Suspense>
+        </LazyChunkErrorBoundary>
+      ) : null}
+    </TemplatePreviewDialog>
+  );
+}

package/corpus/templates/slides-2/app/components/templates/DeckTemplatePreview.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useRef, useState, type CSSProperties } from "react";
+
+import { prepareImportedFonts } from "@/components/deck/SlideRenderer";
+
+export function DeckTemplatePreview({
+  html,
+  title,
+}: {
+  html: string;
+  title: string;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState(0.25);
+  const { html: previewHtml, hrefs: fontHrefs } = prepareImportedFonts(html);
+  const fontLinks = fontHrefs
+    .map(
+      (href) =>
+        `<link rel="stylesheet" href="${href.replaceAll("&", "&amp;")}">`,
+    )
+    .join("");
+  const fontPreconnects = fontHrefs.length
+    ? '<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>'
+    : "";
+  const srcDoc = `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    ${fontPreconnects}${fontLinks}
+    <style>html,body{margin:0;overflow:hidden;width:960px;height:540px}</style>
+  </head>
+  <body>${previewHtml}</body>
+</html>`;
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    const update = () => setScale(element.clientWidth / 960);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative aspect-video overflow-hidden bg-background"
+    >
+      <iframe
+        title={title}
+        srcDoc={srcDoc}
+        sandbox=""
+        loading="lazy"
+        tabIndex={-1}
+        aria-hidden
+        className="deck-template-preview-frame"
+        style={{ "--deck-template-scale": scale } as CSSProperties}
+      />
+    </div>
+  );
+}

package/corpus/templates/slides-2/app/components/templates/DeckTemplateStage.tsx

@@ -0,0 +1,45 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+
+export function fitTemplateStage(width: number, height: number) {
+  if (width <= 0 || height <= 0) return null;
+  const scale = Math.min(width / 960, height / 540);
+  return { width: 960 * scale, height: 540 * scale };
+}
+
+export function DeckTemplateStage({ children }: { children: ReactNode }) {
+  const stage = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState<ReturnType<typeof fitTemplateStage>>(null);
+  useEffect(() => {
+    const element = stage.current;
+    if (!element) return;
+    const update = () =>
+      setSize(fitTemplateStage(element.clientWidth, element.clientHeight));
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return (
+    <div ref={stage} className="deck-template-stage">
+      <div
+        className="deck-template-stage-canvas"
+        style={
+          size
+            ? ({
+                "--deck-template-stage-width": `${size.width}px`,
+                "--deck-template-stage-height": `${size.height}px`,
+              } as CSSProperties)
+            : undefined
+        }
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/corpus/templates/slides-2/app/components/ui/alert-dialog.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/alert-dialog";

package/corpus/templates/slides-2/app/components/ui/avatar.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/avatar";

package/corpus/templates/slides-2/app/components/ui/button-group.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/button-group";

package/corpus/templates/slides-2/app/components/ui/button.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/button";

package/corpus/templates/slides-2/app/components/ui/card.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/card";

package/corpus/templates/slides-2/app/components/ui/command.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/command";

package/corpus/templates/slides-2/app/components/ui/context-menu.tsx

@@ -0,0 +1,32 @@
+import * as ContextMenuParts from "@agent-native/toolkit/ui/context-menu";
+import * as React from "react";
+
+export * from "@agent-native/toolkit/ui/context-menu";
+
+function instantMenuStyle(style: React.CSSProperties | undefined) {
+  return { ...style, animation: "none", transition: "none" };
+}
+
+export const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuParts.ContextMenuContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuParts.ContextMenuContent>
+>(({ style, ...props }, ref) => (
+  <ContextMenuParts.ContextMenuContent
+    {...props}
+    ref={ref}
+    style={instantMenuStyle(style)}
+  />
+));
+ContextMenuContent.displayName = "ContextMenuContent";
+
+export const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuParts.ContextMenuSubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuParts.ContextMenuSubContent>
+>(({ style, ...props }, ref) => (
+  <ContextMenuParts.ContextMenuSubContent
+    {...props}
+    ref={ref}
+    style={instantMenuStyle(style)}
+  />
+));
+ContextMenuSubContent.displayName = "ContextMenuSubContent";

package/corpus/templates/slides-2/app/components/ui/dialog.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/dialog";

package/corpus/templates/slides-2/app/components/ui/dropdown-menu.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/dropdown-menu";

package/corpus/templates/slides-2/app/components/ui/filter-trigger.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/filter-trigger";

package/corpus/templates/slides-2/app/components/ui/input.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/input";

package/corpus/templates/slides-2/app/components/ui/label.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/label";

package/corpus/templates/slides-2/app/components/ui/popover.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/popover";

package/corpus/templates/slides-2/app/components/ui/progress.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/progress";

package/corpus/templates/slides-2/app/components/ui/scroll-area.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/scroll-area";

package/corpus/templates/slides-2/app/components/ui/select.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/select";

package/corpus/templates/slides-2/app/components/ui/separator.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/separator";

package/corpus/templates/slides-2/app/components/ui/sheet.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/sheet";

package/corpus/templates/slides-2/app/components/ui/skeleton.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/skeleton";

package/corpus/templates/slides-2/app/components/ui/slider.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/slider";

package/corpus/templates/slides-2/app/components/ui/spinner.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/spinner";

package/corpus/templates/slides-2/app/components/ui/switch.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/switch";

package/corpus/templates/slides-2/app/components/ui/tabs.tsx

@@ -0,0 +1,59 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    variant?: "default" | "line";
+  }
+>(({ className, variant = "default", ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    data-variant={variant}
+    className={cn(
+      variant === "line"
+        ? "group/tabs-list inline-flex w-fit items-center justify-start gap-1 border-b border-border bg-transparent p-0 text-muted-foreground"
+        : "inline-flex h-9 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1 text-sm font-medium ring-offset-background transition-[color,background-color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      "group-data-[variant=line]/tabs-list:relative group-data-[variant=line]/tabs-list:h-9 group-data-[variant=line]/tabs-list:flex-none group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:border-b-2 group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:font-medium group-data-[variant=line]/tabs-list:text-muted-foreground group-data-[variant=line]/tabs-list:data-[state=active]:border-foreground group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:text-foreground group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/corpus/templates/slides-2/app/components/ui/textarea.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/textarea";

package/corpus/templates/slides-2/app/components/ui/toggle-group.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/toggle-group";

package/corpus/templates/slides-2/app/components/ui/toolkit-provider.tsx

@@ -0,0 +1,17 @@
+import { ToolkitProvider, type ToolkitComponents } from "@agent-native/toolkit";
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { designSystem } from "@/design-system";
+
+const components: ToolkitComponents = {
+  Button: Button as ToolkitComponents["Button"],
+};
+
+export function AppToolkitProvider({ children }: { children: ReactNode }) {
+  return (
+    <ToolkitProvider components={components} designSystem={designSystem}>
+      {children}
+    </ToolkitProvider>
+  );
+}

package/corpus/templates/slides-2/app/components/ui/tooltip.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/tooltip";

package/corpus/templates/slides-2/app/components/visual-editor/CanvasCommentPins.tsx

@@ -0,0 +1,46 @@
+import { sendToAgentChatAndConfirm } from "@agent-native/core/client/agent-chat";
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  CanvasCommentPins as ToolkitCanvasCommentPins,
+  type CanvasCommentPinsProps as ToolkitCanvasCommentPinsProps,
+} from "@agent-native/toolkit/canvas-annotations";
+import { toast } from "sonner";
+
+export type { CanvasPin } from "@agent-native/toolkit/canvas-annotations";
+
+export type CanvasCommentPinsProps = Omit<
+  ToolkitCanvasCommentPinsProps,
+  "translate" | "sendToAgent" | "onSendError"
+>;
+
+export function CanvasCommentPins(props: CanvasCommentPinsProps) {
+  const t = useT();
+  const keyMap: Record<string, string> = {
+    "visualEditor.clickToDropCommentPin": "raw.pinDropHint",
+    "visualEditor.escToExit": "raw.escExit",
+    "visualEditor.editDesign": "raw.editSlide",
+    "visualEditor.tellAgentWhatToChange": "raw.tellAgentChange",
+    "visualEditor.send": "raw.sendToAgent",
+    "visualEditor.comment": "comments.comment",
+    "visualEditor.commentSent": "raw.sentToAgent",
+  };
+  const translate: ToolkitCanvasCommentPinsProps["translate"] = (
+    key,
+    options,
+  ) => t(keyMap[key] ?? key, options);
+  return (
+    <ToolkitCanvasCommentPins
+      {...props}
+      translate={translate}
+      allowQueue={false}
+      showAnchorDetails={false}
+      showSubmitShortcut={false}
+      sendToAgent={async (input) =>
+        (await sendToAgentChatAndConfirm(input)).delivered
+      }
+      onSendError={() =>
+        toast.error(translate("deckEditor.failedToSubmitPrompt"))
+      }
+    />
+  );
+}