@chatsdk-dev/elements 0.0.1

package/dist/components/ai-elements/mic-selector.js

@@ -0,0 +1,252 @@
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandItem } from '@chatsdk-dev/ui/components/command';
+import { Popover, PopoverTrigger, PopoverContent } from '@chatsdk-dev/ui/components/popover';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { ChevronsUpDownIcon } from 'lucide-react';
+import { createContext, useState, useCallback, useEffect, useMemo, useContext, useRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var deviceIdRegex = /\(([\da-fA-F]{4}:[\da-fA-F]{4})\)$/;
+var MicSelectorContext = createContext({
+  data: [],
+  onOpenChange: void 0,
+  onValueChange: void 0,
+  open: false,
+  setWidth: void 0,
+  value: void 0,
+  width: 200
+});
+var useAudioDevices = () => {
+  const [devices, setDevices] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [hasPermission, setHasPermission] = useState(false);
+  const loadDevicesWithoutPermission = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const deviceList = await navigator.mediaDevices.enumerateDevices();
+      const audioInputs = deviceList.filter(
+        (device) => device.kind === "audioinput"
+      );
+      setDevices(audioInputs);
+    } catch (caughtError) {
+      const message = caughtError instanceof Error ? caughtError.message : "Failed to get audio devices";
+      setError(message);
+      console.error("Error getting audio devices:", message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const loadDevicesWithPermission = useCallback(async () => {
+    if (loading) {
+      return;
+    }
+    try {
+      setLoading(true);
+      setError(null);
+      const tempStream = await navigator.mediaDevices.getUserMedia({
+        audio: true
+      });
+      for (const track of tempStream.getTracks()) {
+        track.stop();
+      }
+      const deviceList = await navigator.mediaDevices.enumerateDevices();
+      const audioInputs = deviceList.filter(
+        (device) => device.kind === "audioinput"
+      );
+      setDevices(audioInputs);
+      setHasPermission(true);
+    } catch (caughtError) {
+      const message = caughtError instanceof Error ? caughtError.message : "Failed to get audio devices";
+      setError(message);
+      console.error("Error getting audio devices:", message);
+    } finally {
+      setLoading(false);
+    }
+  }, [loading]);
+  useEffect(() => {
+    loadDevicesWithoutPermission();
+  }, [loadDevicesWithoutPermission]);
+  useEffect(() => {
+    const handleDeviceChange = () => {
+      if (hasPermission) {
+        loadDevicesWithPermission();
+      } else {
+        loadDevicesWithoutPermission();
+      }
+    };
+    navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange);
+    return () => {
+      navigator.mediaDevices.removeEventListener(
+        "devicechange",
+        handleDeviceChange
+      );
+    };
+  }, [hasPermission, loadDevicesWithPermission, loadDevicesWithoutPermission]);
+  return {
+    devices,
+    error,
+    hasPermission,
+    loadDevices: loadDevicesWithPermission,
+    loading
+  };
+};
+var MicSelector = ({
+  defaultValue,
+  value: controlledValue,
+  onValueChange: controlledOnValueChange,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  ...props
+}) => {
+  const [value, onValueChange] = useControllableState({
+    defaultProp: defaultValue,
+    onChange: controlledOnValueChange,
+    prop: controlledValue
+  });
+  const [open, onOpenChange] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: controlledOnOpenChange,
+    prop: controlledOpen
+  });
+  const [width, setWidth] = useState(200);
+  const { devices, loading, hasPermission, loadDevices } = useAudioDevices();
+  useEffect(() => {
+    if (open && !hasPermission && !loading) {
+      loadDevices();
+    }
+  }, [open, hasPermission, loading, loadDevices]);
+  const contextValue = useMemo(
+    () => ({
+      data: devices,
+      onOpenChange,
+      onValueChange,
+      open,
+      setWidth,
+      value,
+      width
+    }),
+    [devices, onOpenChange, onValueChange, open, setWidth, value, width]
+  );
+  return /* @__PURE__ */ jsx(MicSelectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Popover, { ...props, onOpenChange, open }) });
+};
+var MicSelectorTrigger = ({
+  children,
+  ...props
+}) => {
+  const { setWidth } = useContext(MicSelectorContext);
+  const ref = useRef(null);
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newWidth = entry.target.offsetWidth;
+        if (newWidth) {
+          setWidth?.(newWidth);
+        }
+      }
+    });
+    if (ref.current) {
+      resizeObserver.observe(ref.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [setWidth]);
+  return /* @__PURE__ */ jsx(
+    PopoverTrigger,
+    {
+      render: () => /* @__PURE__ */ jsxs(Button, { variant: "outline", ...props, ref, children: [
+        children,
+        /* @__PURE__ */ jsx(
+          ChevronsUpDownIcon,
+          {
+            className: "shrink-0 text-muted-foreground",
+            size: 16
+          }
+        )
+      ] })
+    }
+  );
+};
+var MicSelectorContent = ({
+  className,
+  popoverOptions,
+  ...props
+}) => {
+  const { width, onValueChange, value } = useContext(MicSelectorContext);
+  return /* @__PURE__ */ jsx(
+    PopoverContent,
+    {
+      className: cn("p-0", className),
+      style: { width },
+      ...popoverOptions,
+      children: /* @__PURE__ */ jsx(Command, { onValueChange, value, ...props })
+    }
+  );
+};
+var MicSelectorInput = ({ ...props }) => /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search microphones...", ...props });
+var MicSelectorList = ({
+  children,
+  ...props
+}) => {
+  const { data } = useContext(MicSelectorContext);
+  return /* @__PURE__ */ jsx(CommandList, { ...props, children: children(data) });
+};
+var MicSelectorEmpty = ({
+  children = "No microphone found.",
+  ...props
+}) => /* @__PURE__ */ jsx(CommandEmpty, { ...props, children });
+var MicSelectorItem = (props) => {
+  const { onValueChange, onOpenChange } = useContext(MicSelectorContext);
+  const handleSelect = useCallback(
+    (currentValue) => {
+      onValueChange?.(currentValue);
+      onOpenChange?.(false);
+    },
+    [onValueChange, onOpenChange]
+  );
+  return /* @__PURE__ */ jsx(CommandItem, { onSelect: handleSelect, ...props });
+};
+var MicSelectorLabel = ({
+  device,
+  className,
+  ...props
+}) => {
+  const matches = device.label.match(deviceIdRegex);
+  if (!matches) {
+    return /* @__PURE__ */ jsx("span", { className, ...props, children: device.label });
+  }
+  const [, deviceId] = matches;
+  const name = device.label.replace(deviceIdRegex, "");
+  return /* @__PURE__ */ jsxs("span", { className, ...props, children: [
+    /* @__PURE__ */ jsx("span", { children: name }),
+    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+      " (",
+      deviceId,
+      ")"
+    ] })
+  ] });
+};
+var MicSelectorValue = ({
+  className,
+  ...props
+}) => {
+  const { data, value } = useContext(MicSelectorContext);
+  const currentDevice = data.find((d) => d.deviceId === value);
+  if (!currentDevice) {
+    return /* @__PURE__ */ jsx("span", { className: cn("flex-1 text-left", className), ...props, children: "Select microphone..." });
+  }
+  return /* @__PURE__ */ jsx(
+    MicSelectorLabel,
+    {
+      className: cn("flex-1 text-left", className),
+      device: currentDevice,
+      ...props
+    }
+  );
+};
+
+export { MicSelector, MicSelectorContent, MicSelectorEmpty, MicSelectorInput, MicSelectorItem, MicSelectorLabel, MicSelectorList, MicSelectorTrigger, MicSelectorValue, useAudioDevices };

package/dist/components/ai-elements/model-selector.d.ts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '@chatsdk-dev/ui/components/command';
+import { Dialog, DialogContent, DialogTrigger } from '@chatsdk-dev/ui/components/dialog';
+import { ComponentProps, ReactNode } from 'react';
+
+type ModelSelectorProps = ComponentProps<typeof Dialog>;
+declare const ModelSelector: (props: ModelSelectorProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorTriggerProps = ComponentProps<typeof DialogTrigger>;
+declare const ModelSelectorTrigger: (props: ModelSelectorTriggerProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorContentProps = ComponentProps<typeof DialogContent> & {
+    title?: ReactNode;
+};
+declare const ModelSelectorContent: ({ className, children, title, ...props }: ModelSelectorContentProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorDialogProps = ComponentProps<typeof CommandDialog>;
+declare const ModelSelectorDialog: (props: ModelSelectorDialogProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorInputProps = ComponentProps<typeof CommandInput>;
+declare const ModelSelectorInput: ({ className, ...props }: ModelSelectorInputProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorListProps = ComponentProps<typeof CommandList>;
+declare const ModelSelectorList: (props: ModelSelectorListProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
+declare const ModelSelectorEmpty: (props: ModelSelectorEmptyProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorGroupProps = ComponentProps<typeof CommandGroup>;
+declare const ModelSelectorGroup: (props: ModelSelectorGroupProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorItemProps = ComponentProps<typeof CommandItem>;
+declare const ModelSelectorItem: (props: ModelSelectorItemProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorShortcutProps = ComponentProps<typeof CommandShortcut>;
+declare const ModelSelectorShortcut: (props: ModelSelectorShortcutProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorSeparatorProps = ComponentProps<typeof CommandSeparator>;
+declare const ModelSelectorSeparator: (props: ModelSelectorSeparatorProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorLogoProps = Omit<ComponentProps<"img">, "src" | "alt"> & {
+    provider: "moonshotai-cn" | "lucidquery" | "moonshotai" | "zai-coding-plan" | "alibaba" | "xai" | "vultr" | "nvidia" | "upstage" | "groq" | "github-copilot" | "mistral" | "vercel" | "nebius" | "deepseek" | "alibaba-cn" | "google-vertex-anthropic" | "venice" | "chutes" | "cortecs" | "github-models" | "togetherai" | "azure" | "baseten" | "huggingface" | "opencode" | "fastrouter" | "google" | "google-vertex" | "cloudflare-workers-ai" | "inception" | "wandb" | "openai" | "zhipuai-coding-plan" | "perplexity" | "openrouter" | "zenmux" | "v0" | "iflowcn" | "synthetic" | "deepinfra" | "zhipuai" | "submodel" | "zai" | "inference" | "requesty" | "morph" | "lmstudio" | "anthropic" | "aihubmix" | "fireworks-ai" | "modelscope" | "llama" | "scaleway" | "amazon-bedrock" | "cerebras" | (string & {});
+};
+declare const ModelSelectorLogo: ({ provider, className, ...props }: ModelSelectorLogoProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorLogoGroupProps = ComponentProps<"div">;
+declare const ModelSelectorLogoGroup: ({ className, ...props }: ModelSelectorLogoGroupProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorNameProps = ComponentProps<"span">;
+declare const ModelSelectorName: ({ className, ...props }: ModelSelectorNameProps) => react_jsx_runtime.JSX.Element;
+
+export { ModelSelector, ModelSelectorContent, type ModelSelectorContentProps, ModelSelectorDialog, type ModelSelectorDialogProps, ModelSelectorEmpty, type ModelSelectorEmptyProps, ModelSelectorGroup, type ModelSelectorGroupProps, ModelSelectorInput, type ModelSelectorInputProps, ModelSelectorItem, type ModelSelectorItemProps, ModelSelectorList, type ModelSelectorListProps, ModelSelectorLogo, ModelSelectorLogoGroup, type ModelSelectorLogoGroupProps, type ModelSelectorLogoProps, ModelSelectorName, type ModelSelectorNameProps, type ModelSelectorProps, ModelSelectorSeparator, type ModelSelectorSeparatorProps, ModelSelectorShortcut, type ModelSelectorShortcutProps, ModelSelectorTrigger, type ModelSelectorTriggerProps };

package/dist/components/ai-elements/model-selector.js

@@ -0,0 +1,73 @@
+import { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from '@chatsdk-dev/ui/components/command';
+import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@chatsdk-dev/ui/components/dialog';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/ai-elements/model-selector.tsx
+var ModelSelector = (props) => /* @__PURE__ */ jsx(Dialog, { ...props });
+var ModelSelectorTrigger = (props) => /* @__PURE__ */ jsx(DialogTrigger, { ...props });
+var ModelSelectorContent = ({
+  className,
+  children,
+  title = "Model Selector",
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  DialogContent,
+  {
+    "aria-describedby": void 0,
+    className: cn(
+      "outline! border-none! p-0 outline-border! outline-solid!",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: title }),
+      /* @__PURE__ */ jsx(Command, { className: "**:data-[slot=command-input-wrapper]:h-auto", children })
+    ]
+  }
+);
+var ModelSelectorDialog = (props) => /* @__PURE__ */ jsx(CommandDialog, { ...props });
+var ModelSelectorInput = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandInput, { className: cn("h-auto py-3.5", className), ...props });
+var ModelSelectorList = (props) => /* @__PURE__ */ jsx(CommandList, { ...props });
+var ModelSelectorEmpty = (props) => /* @__PURE__ */ jsx(CommandEmpty, { ...props });
+var ModelSelectorGroup = (props) => /* @__PURE__ */ jsx(CommandGroup, { ...props });
+var ModelSelectorItem = (props) => /* @__PURE__ */ jsx(CommandItem, { ...props });
+var ModelSelectorShortcut = (props) => /* @__PURE__ */ jsx(CommandShortcut, { ...props });
+var ModelSelectorSeparator = (props) => /* @__PURE__ */ jsx(CommandSeparator, { ...props });
+var ModelSelectorLogo = ({
+  provider,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    ...props,
+    alt: `${provider} logo`,
+    className: cn("size-3 dark:invert", className),
+    height: 12,
+    src: `https://models.dev/logos/${provider}.svg`,
+    width: 12
+  }
+);
+var ModelSelectorLogoGroup = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex shrink-0 items-center -space-x-1 [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground",
+      className
+    ),
+    ...props
+  }
+);
+var ModelSelectorName = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("span", { className: cn("flex-1 truncate text-left", className), ...props });
+
+export { ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorShortcut, ModelSelectorTrigger };

package/dist/components/ai-elements/node.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@chatsdk-dev/ui/components/card';
+import { ComponentProps } from 'react';
+
+type NodeProps = ComponentProps<typeof Card> & {
+    handles: {
+        target: boolean;
+        source: boolean;
+    };
+};
+declare const Node: ({ handles, className, ...props }: NodeProps) => react_jsx_runtime.JSX.Element;
+type NodeHeaderProps = ComponentProps<typeof CardHeader>;
+declare const NodeHeader: ({ className, ...props }: NodeHeaderProps) => react_jsx_runtime.JSX.Element;
+type NodeTitleProps = ComponentProps<typeof CardTitle>;
+declare const NodeTitle: (props: NodeTitleProps) => react_jsx_runtime.JSX.Element;
+type NodeDescriptionProps = ComponentProps<typeof CardDescription>;
+declare const NodeDescription: (props: NodeDescriptionProps) => react_jsx_runtime.JSX.Element;
+type NodeActionProps = ComponentProps<typeof CardAction>;
+declare const NodeAction: (props: NodeActionProps) => react_jsx_runtime.JSX.Element;
+type NodeContentProps = ComponentProps<typeof CardContent>;
+declare const NodeContent: ({ className, ...props }: NodeContentProps) => react_jsx_runtime.JSX.Element;
+type NodeFooterProps = ComponentProps<typeof CardFooter>;
+declare const NodeFooter: ({ className, ...props }: NodeFooterProps) => react_jsx_runtime.JSX.Element;
+
+export { Node, NodeAction, type NodeActionProps, NodeContent, type NodeContentProps, NodeDescription, type NodeDescriptionProps, NodeFooter, type NodeFooterProps, NodeHeader, type NodeHeaderProps, type NodeProps, NodeTitle, type NodeTitleProps };

package/dist/components/ai-elements/node.js

@@ -0,0 +1,41 @@
+import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from '@chatsdk-dev/ui/components/card';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { Handle, Position } from '@xyflow/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/ai-elements/node.tsx
+var Node = ({ handles, className, ...props }) => /* @__PURE__ */ jsxs(
+  Card,
+  {
+    className: cn(
+      "node-container relative size-full h-auto w-sm gap-0 rounded-md p-0",
+      className
+    ),
+    ...props,
+    children: [
+      handles.target && /* @__PURE__ */ jsx(Handle, { position: Position.Left, type: "target" }),
+      handles.source && /* @__PURE__ */ jsx(Handle, { position: Position.Right, type: "source" }),
+      props.children
+    ]
+  }
+);
+var NodeHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  CardHeader,
+  {
+    className: cn("gap-0.5 rounded-t-md border-b bg-secondary p-3!", className),
+    ...props
+  }
+);
+var NodeTitle = (props) => /* @__PURE__ */ jsx(CardTitle, { ...props });
+var NodeDescription = (props) => /* @__PURE__ */ jsx(CardDescription, { ...props });
+var NodeAction = (props) => /* @__PURE__ */ jsx(CardAction, { ...props });
+var NodeContent = ({ className, ...props }) => /* @__PURE__ */ jsx(CardContent, { className: cn("p-3", className), ...props });
+var NodeFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  CardFooter,
+  {
+    className: cn("rounded-b-md border-t bg-secondary p-3!", className),
+    ...props
+  }
+);
+
+export { Node, NodeAction, NodeContent, NodeDescription, NodeFooter, NodeHeader, NodeTitle };

package/dist/components/ai-elements/open-in-chat.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DropdownMenu, DropdownMenuItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@chatsdk-dev/ui/components/dropdown-menu';
+import { ComponentProps } from 'react';
+
+type OpenInProps = ComponentProps<typeof DropdownMenu> & {
+    query: string;
+};
+declare const OpenIn: ({ query, ...props }: OpenInProps) => react_jsx_runtime.JSX.Element;
+type OpenInContentProps = ComponentProps<typeof DropdownMenuContent>;
+declare const OpenInContent: ({ className, ...props }: OpenInContentProps) => react_jsx_runtime.JSX.Element;
+type OpenInItemProps = ComponentProps<typeof DropdownMenuItem>;
+declare const OpenInItem: (props: OpenInItemProps) => react_jsx_runtime.JSX.Element;
+type OpenInLabelProps = ComponentProps<typeof DropdownMenuLabel>;
+declare const OpenInLabel: (props: OpenInLabelProps) => react_jsx_runtime.JSX.Element;
+type OpenInSeparatorProps = ComponentProps<typeof DropdownMenuSeparator>;
+declare const OpenInSeparator: (props: OpenInSeparatorProps) => react_jsx_runtime.JSX.Element;
+type OpenInTriggerProps = ComponentProps<typeof DropdownMenuTrigger>;
+declare const OpenInTrigger: ({ children, ...props }: OpenInTriggerProps) => react_jsx_runtime.JSX.Element;
+type OpenInChatGPTProps = ComponentProps<typeof DropdownMenuItem>;
+declare const OpenInChatGPT: (props: OpenInChatGPTProps) => react_jsx_runtime.JSX.Element;
+type OpenInClaudeProps = ComponentProps<typeof DropdownMenuItem>;
+declare const OpenInClaude: (props: OpenInClaudeProps) => react_jsx_runtime.JSX.Element;
+type OpenInT3Props = ComponentProps<typeof DropdownMenuItem>;
+declare const OpenInT3: (props: OpenInT3Props) => react_jsx_runtime.JSX.Element;
+type OpenInSciraProps = ComponentProps<typeof DropdownMenuItem>;
+declare const OpenInScira: (props: OpenInSciraProps) => react_jsx_runtime.JSX.Element;
+type OpenInv0Props = ComponentProps<typeof DropdownMenuItem>;
+declare const OpenInv0: (props: OpenInv0Props) => react_jsx_runtime.JSX.Element;
+type OpenInCursorProps = ComponentProps<typeof DropdownMenuItem>;
+declare const OpenInCursor: (props: OpenInCursorProps) => react_jsx_runtime.JSX.Element;
+
+export { OpenIn, OpenInChatGPT, type OpenInChatGPTProps, OpenInClaude, type OpenInClaudeProps, OpenInContent, type OpenInContentProps, OpenInCursor, type OpenInCursorProps, OpenInItem, type OpenInItemProps, OpenInLabel, type OpenInLabelProps, type OpenInProps, OpenInScira, type OpenInSciraProps, OpenInSeparator, type OpenInSeparatorProps, OpenInT3, type OpenInT3Props, OpenInTrigger, type OpenInTriggerProps, OpenInv0, type OpenInv0Props };