sea-dev 1.0.0

package/libs/ui/src/components/ui/shimmer.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { motion } from "motion/react";
+import { type CSSProperties, type ElementType, type JSX, memo, useMemo } from "react";
+
+export interface TextShimmerProps {
+  children: string;
+  as?: ElementType;
+  className?: string;
+  duration?: number;
+  spread?: number;
+}
+
+const ShimmerComponent = ({
+  children,
+  as: Component = "p",
+  className,
+  duration = 2,
+  spread = 2,
+}: TextShimmerProps) => {
+  const MotionComponent = motion.create(Component as keyof JSX.IntrinsicElements);
+
+  const dynamicSpread = useMemo(() => (children?.length ?? 0) * spread, [children, spread]);
+
+  return (
+    <MotionComponent
+      animate={{ backgroundPosition: "0% center" }}
+      className={cn(
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+        "[background-repeat:no-repeat,padding-box] [--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))]",
+        className,
+      )}
+      initial={{ backgroundPosition: "100% center" }}
+      style={
+        {
+          "--spread": `${dynamicSpread}px`,
+          backgroundImage:
+            "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))",
+        } as CSSProperties
+      }
+      transition={{
+        repeat: Number.POSITIVE_INFINITY,
+        duration,
+        ease: "linear",
+      }}
+    >
+      {children}
+    </MotionComponent>
+  );
+};
+
+export const Shimmer = memo(ShimmerComponent);

package/libs/ui/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "../../lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/libs/ui/src/components/ui/sonner.tsx

@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

package/libs/ui/src/components/ui/switch.tsx

@@ -0,0 +1,26 @@
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

package/libs/ui/src/components/ui/table.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div data-slot="table-container" className="relative h-full w-full overflow-x-auto">
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("bg-muted [&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/libs/ui/src/components/ui/tabs.tsx

@@ -0,0 +1,52 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/libs/ui/src/components/ui/textarea.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ChatTextarea({
+  className,
+  isLoading = false,
+  ...props
+}: React.ComponentProps<"textarea"> & { isLoading?: boolean }) {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if ((e.key === "Enter" || e.key === "NumpadEnter") && !e.shiftKey) {
+      e.preventDefault();
+      if (!isLoading) {
+        e.currentTarget.form?.requestSubmit();
+      }
+    }
+  };
+  return (
+    <textarea
+      className={cn(
+        "bg-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-base focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className,
+      )}
+      onKeyDown={handleKeyDown}
+      {...props}
+    />
+  );
+}

package/libs/ui/src/components/ui/tool.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import type { DynamicToolUIPart, ToolUIPart } from "ai";
+import { CheckCircleIcon, ChevronDownIcon, CircleIcon, ClockIcon, XCircleIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { isValidElement } from "react";
+
+export type ToolProps = ComponentProps<typeof Collapsible>;
+
+export const Tool = ({ className, ...props }: ToolProps) => (
+  <Collapsible
+    className={cn("group not-prose relative mb-0.5 w-full pl-3", className)}
+    {...props}
+  />
+);
+
+// Vertical line connector for individual tools
+export const ToolConnector = ({
+  isLast = false,
+  state,
+}: {
+  isLast?: boolean;
+  state: ToolPart["state"];
+}) => (
+  <>
+    {/* Status icon as connector */}
+    <div className="absolute top-[5px] left-0">{getStatusIcon(state)}</div>
+    {/* Connecting line to next item - extends beyond current tool to reach next icon */}
+    {!isLast && (
+      <div className="bg-border absolute top-[17px] left-[5.5px] h-[calc(100%-10px)] w-px" />
+    )}
+  </>
+);
+
+// Group wrapper for multiple tools
+export type ToolGroupProps = ComponentProps<typeof Collapsible> & {
+  toolCount: number;
+};
+
+export const ToolGroup = ({ className, toolCount, ...props }: ToolGroupProps) => (
+  <Collapsible className={cn("group not-prose relative mb-2 w-full", className)} {...props} />
+);
+
+export const ToolGroupHeader = ({
+  className,
+  toolCount,
+  ...props
+}: ComponentProps<typeof CollapsibleTrigger> & { toolCount: number }) => (
+  <CollapsibleTrigger
+    className={cn(
+      "hover:bg-muted/30 group/trigger flex w-full items-center gap-1.5 rounded px-2 py-1",
+      className,
+    )}
+    {...props}
+  >
+    <span className="text-muted-foreground text-xs">
+      Ran {toolCount} command{toolCount !== 1 ? "s" : ""}
+    </span>
+    <ChevronDownIcon className="text-muted-foreground ml-auto size-3 opacity-0 transition-all group-hover/trigger:opacity-100 group-data-[state=open]:rotate-180 group-data-[state=open]:opacity-100" />
+  </CollapsibleTrigger>
+);
+
+export const ToolGroupContent = ({
+  className,
+  ...props
+}: ComponentProps<typeof CollapsibleContent>) => (
+  <CollapsibleContent
+    className={cn(
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in relative mt-1 outline-none",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type ToolPart = ToolUIPart | DynamicToolUIPart;
+
+export type ToolHeaderProps = {
+  title?: string;
+  className?: string;
+} & (
+  | { type: ToolUIPart["type"]; state: ToolUIPart["state"]; toolName?: never }
+  | {
+      type: DynamicToolUIPart["type"];
+      state: DynamicToolUIPart["state"];
+      toolName: string;
+    }
+);
+
+export const getStatusIcon = (status: ToolPart["state"]) => {
+  const icons: Record<ToolPart["state"], ReactNode> = {
+    "input-streaming": (
+      <CircleIcon className="text-muted-foreground size-3 fill-current opacity-30" />
+    ),
+    "input-available": (
+      <CircleIcon className="text-muted-foreground size-3 animate-pulse fill-current" />
+    ),
+    "approval-requested": <ClockIcon className="size-3 text-yellow-600" />,
+    "approval-responded": <CheckCircleIcon className="size-3 text-blue-600" />,
+    "output-available": <CheckCircleIcon className="size-3 text-green-600 dark:text-green-500" />,
+    "output-error": <XCircleIcon className="size-3 text-red-600" />,
+    "output-denied": <XCircleIcon className="size-3 text-orange-600" />,
+  };
+
+  return icons[status];
+};
+
+export const ToolHeader = ({
+  className,
+  title,
+  type,
+  state,
+  toolName,
+  ...props
+}: ToolHeaderProps) => {
+  const derivedName = type === "dynamic-tool" ? toolName : type.split("-").slice(1).join("-");
+
+  return (
+    <CollapsibleTrigger
+      className={cn(
+        "hover:bg-muted/30 group/trigger flex w-full items-center gap-1.5 rounded px-2 py-1 pl-5",
+        className,
+      )}
+      {...props}
+    >
+      <span className="text-muted-foreground text-xs">{title ?? derivedName}</span>
+      <ChevronDownIcon className="text-muted-foreground ml-auto size-3 opacity-0 transition-all group-hover/trigger:opacity-100 group-data-[state=open]:rotate-180 group-data-[state=open]:opacity-100" />
+    </CollapsibleTrigger>
+  );
+};
+
+export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const ToolContent = ({ className, ...props }: ToolContentProps) => (
+  <CollapsibleContent
+    className={cn(
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in ml-4 max-h-[300px] overflow-y-auto outline-none",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type ToolInputProps = ComponentProps<"div"> & {
+  input: ToolPart["input"];
+};
+
+export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (
+  <div className={cn("overflow-hidden pl-4", className)} {...props}>
+    <div className="mb-1 flex items-center gap-1.5">
+      <span className="font-mono text-[9px] font-medium text-blue-600 dark:text-blue-400">
+        [In]
+      </span>
+    </div>
+    <pre className="text-muted-foreground text-[10px] leading-relaxed whitespace-pre-wrap">
+      {JSON.stringify(input, null, 2)}
+    </pre>
+  </div>
+);
+
+export type ToolOutputProps = ComponentProps<"div"> & {
+  output: ToolPart["output"];
+  errorText: ToolPart["errorText"];
+};
+
+export const ToolOutput = ({ className, output, errorText, ...props }: ToolOutputProps) => {
+  if (!(output || errorText)) {
+    return null;
+  }
+
+  let outputContent = output;
+  if (typeof output === "object" && !isValidElement(output)) {
+    outputContent = JSON.stringify(output, null, 2);
+  } else if (typeof output !== "string") {
+    outputContent = String(output);
+  }
+
+  return (
+    <div className={cn("overflow-hidden pl-4", className)} {...props}>
+      <div className="mb-1 flex items-center gap-1.5">
+        <span
+          className={cn(
+            "font-mono text-[9px] font-medium",
+            errorText ? "text-destructive/60" : "text-amber-600 dark:text-amber-400",
+          )}
+        >
+          [Out]
+        </span>
+      </div>
+      {errorText && (
+        <pre className="text-destructive text-[10px] leading-relaxed whitespace-pre-wrap">
+          {errorText}
+        </pre>
+      )}
+      {outputContent !== undefined && (
+        <pre
+          className={cn(
+            "text-[10px] leading-relaxed whitespace-pre-wrap",
+            errorText ? "text-destructive" : "text-muted-foreground",
+          )}
+        >
+          {String(outputContent)}
+        </pre>
+      )}
+    </div>
+  );
+};

package/libs/ui/src/components/ui/tooltip.tsx

@@ -0,0 +1,58 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  container,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+  container?: React.ComponentProps<typeof TooltipPrimitive.Portal>["container"];
+}) {
+  return (
+    <TooltipPrimitive.Portal container={container}>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-secondary-50 text-secondary-950 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit max-w-[25ch] origin-(--radix-tooltip-content-transform-origin) rounded-md border px-3 py-1.5 text-xs text-balance shadow",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-secondary-50 fill-secondary-50 z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/libs/ui/src/components/ui/typography.tsx

@@ -0,0 +1,113 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import React, { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+
+// Reusable helper to create components with consistent structure
+const createComponent = <T extends HTMLElement>(
+  tag: string,
+  defaultClassName: string,
+  displayName: string,
+) => {
+  const Component = forwardRef<T, React.HTMLAttributes<T>>((props, ref) => {
+    return React.createElement(
+      tag,
+      { ...props, ref, className: cn(defaultClassName, props.className) },
+      props.children,
+    );
+  });
+  Component.displayName = displayName;
+  return Component;
+};
+
+export const _H1 = createComponent<HTMLHeadingElement>(
+  "h1",
+  "scroll-m-20 text-3xl font-head font-light tracking-tight first:mt-0",
+  "H1",
+);
+
+export const H1 = ({
+  children,
+  ref,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement> & { ref?: React.Ref<HTMLHeadingElement> }) => {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <_H1
+            ref={ref}
+            className={cn(
+              "max-w-[25ch] overflow-x-clip text-ellipsis whitespace-nowrap",
+              className,
+            )}
+            {...props}
+          >
+            {children}
+          </_H1>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{children}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+export const H2 = createComponent<HTMLHeadingElement>(
+  "h2",
+  "scroll-m-20 text-xl font-head font-light tracking-tight",
+  "H2",
+);
+
+export const H3 = createComponent<HTMLHeadingElement>(
+  "h3",
+  "scroll-m-20 text-lg font-head font-light tracking-tight",
+  "H3",
+);
+
+export const Lead = createComponent<HTMLParagraphElement>(
+  "p",
+  "text-md text-muted-foreground",
+  "Lead",
+);
+
+export const P = createComponent<HTMLParagraphElement>("p", "leading-7", "P");
+
+export const Large = createComponent<HTMLDivElement>("div", "text-lg font-semibold", "Large");
+
+export const Small = createComponent<HTMLParagraphElement>(
+  "p",
+  "text-sm font-medium leading-none",
+  "Small",
+);
+
+export const Muted = createComponent<HTMLSpanElement>(
+  "span",
+  "text-sm text-muted-foreground",
+  "Muted",
+);
+
+export const InlineCode = createComponent<HTMLSpanElement>(
+  "code",
+  "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+  "InlineCode",
+);
+
+export const MultilineCode = createComponent<HTMLPreElement>(
+  "pre",
+  "relative rounded bg-muted p-4 font-mono text-sm font-semibold overflow-x-auto",
+  "MultilineCode",
+);
+
+export const List = createComponent<HTMLUListElement>(
+  "ul",
+  "my-6 ml-6 list-disc [&>li]:mt-2",
+  "List",
+);
+
+export const Quote = createComponent<HTMLQuoteElement>(
+  "blockquote",
+  "mt-6 border-l-2 pl-6 italic text-muted-foreground",
+  "Quote",
+);