@env-hopper/frontend-core 2.0.1-alpha → 2.0.1-alpha.4

package/src/ui/layout/LoadingScreen.tsx

@@ -1,17 +1,67 @@
+import { ThemeProvider } from '~/components/theme-provider'
+import {
+    Empty,
+    EmptyDescription,
+    EmptyHeader,
+    EmptyMedia,
+    EmptyTitle,
+} from '~/ui/empty'
+import { Spinner } from '~/ui/spinner'
+import { MainLayout } from './MainLayout'
+
 export interface LoadingFallbackProps {
+  label?: string
   failureCount?: number
+  failureReason?: string
 }
 
-export function LoadingScreen({ failureCount }: LoadingFallbackProps) {
+function Explanation({ failureCount, failureReason }: LoadingFallbackProps) {
+  if (!failureCount) {
+    return null
+  }
   return (
     <>
-      <div className="flex flex-col items-center w-full h-full">
-        {/* <span className="loading loading-bars loading-lg"></span> */}
-        <div>Loading...</div>
-        {failureCount && failureCount > 1 ? (
-          <div className={'mt-2 text-xs'}>Attempt {failureCount}</div>
-        ) : null}
-      </div>
+      <div className={'mt-2 text-xs'}>Attempt {failureCount}</div>
+      {failureReason && (
+        <div className={'mt-2 text-xs text-secondary-foreground'}>
+          {failureReason}
+        </div>
+      )}
     </>
   )
 }
+
+export function LoadingScreen({
+  failureCount,
+  label,
+  failureReason,
+}: LoadingFallbackProps) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      <MainLayout>
+        <div className="flex flex-col items-center w-full  gap-4 ">
+          {/* <span className="loading loading-bars loading-lg"></span> */}
+          <Empty>
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <Spinner />
+              </EmptyMedia>
+              <EmptyTitle>Loading {label}...</EmptyTitle>
+              <EmptyDescription>
+                <Explanation
+                  failureCount={failureCount}
+                  failureReason={failureReason}
+                ></Explanation>{' '}
+              </EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        </div>
+      </MainLayout>
+    </ThemeProvider>
+  )
+}

package/src/ui/layout/MainLayout.tsx

@@ -1,26 +1,26 @@
 import React from 'react'
-import { PlaygroundHeader } from '../components/header/PlaygroundHeader'
+import { Header } from '../components/header/Header'
 
-import ContextDebug from '../components/contextDebug'
 import { Footer } from '../components/footer/Footer'
 
 export interface MainLayoutProps {
   children: React.ReactNode
+  headerMiddle?: React.ReactNode
+  breadcrumbs?: React.ReactNode
 }
 
-export function MainLayout({ children }: MainLayoutProps) {
+export function MainLayout({ children, headerMiddle, breadcrumbs }: MainLayoutProps) {
   return (
     <div className="min-h-screen flex flex-col">
       <div className="flex-1 flex">
-        {/* <LeftPanel className="h-screen" /> */}
         <main className="flex-1 w-full flex justify-center font-sans p-6">
-          <div className="w-full max-w-4xl lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl space-y-6">
-            <PlaygroundHeader />
+          <div className="w-full space-y-6">
+            <Header middle={headerMiddle} />
+            {breadcrumbs}
             {children}
           </div>
         </main>
       </div>
-      <ContextDebug />
       <Footer />
     </div>
   )

package/src/ui/layout/TopLevelProviders.tsx

@@ -1,30 +1,39 @@
 import React, { Suspense, useMemo, useState } from 'react'
 
-import { LoadingScreen } from './LoadingScreen'
-import { useQueryBootstrapConfig } from '~/api/data/useQueryBootstrapConfig'
+import type { TRPCRouter } from '@env-hopper/backend-core'
+import type { QueryClient } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import type { TRPCClient } from '@trpc/client'
 import { ThemeProvider } from '~/components/theme-provider'
-import { PluginManagerContextProvider } from '~/modules/pluginCore/PluginManagerContext'
-import { PageUrlPluginContextProvider } from '~/plugins/builtin/pageUrl/PageUrlPluginContext'
-import { PageUrlJumpPlugin } from '~/plugins/builtin/pageUrl/pageUrlJumpPlugin'
+import { AuthProvider } from '~/modules/auth'
+import { AuthModalProvider } from '~/modules/auth/AuthModalContext'
+import { LoginModal } from '~/modules/auth/ui/LoginModal'
 import { BootstrapConfigProvider } from '~/modules/config/BootstrapConfigContext'
 import { GlobalConfigProvider } from '~/modules/config/GlobalConfigContext'
 import { makePluginInterfaceForCore } from '~/modules/pluginCore/makePluginManagerContext'
+import { PluginManagerContextProvider } from '~/modules/pluginCore/PluginManagerContext'
+import { LoadingScreen } from './LoadingScreen'
 
 export interface MainLayoutProps {
   children: React.ReactNode
+  queryClient: QueryClient
+  trpcClient: TRPCClient<TRPCRouter>
 }
 
 export function TopLevelProviders({ children }: MainLayoutProps) {
-  const { data, isPending } = useQueryBootstrapConfig()
-  const [plugins] = useState(() => [new PageUrlJumpPlugin()])
+  // const { data, failureCount, failureReason } = useQueryBootstrapConfig()
+  const [plugins] = useState(() => [
+    // Future plugins can be added here
+  ])
 
   const pluginInterfaceForCore = useMemo(() => {
-    return data ? makePluginInterfaceForCore(plugins) : null
-  }, [plugins, data])
+    return makePluginInterfaceForCore(plugins)
+  }, [plugins])
 
-  if (isPending || !data || !pluginInterfaceForCore) {
-    return <LoadingScreen />
-  }
+  // if (!data) {
+  //   return <LoadingScreen label='configuration' failureCount={failureCount} failureReason={failureReason?.message} />
+  // }
 
   return (
     <ThemeProvider
@@ -33,20 +42,37 @@ export function TopLevelProviders({ children }: MainLayoutProps) {
       enableSystem
       disableTransitionOnChange
     >
-      <Suspense fallback={<LoadingScreen />}>
-        <BootstrapConfigProvider bootstrapConfig={data}>
-          <GlobalConfigProvider>
-            <PluginManagerContextProvider
-              plugins={plugins}
-              pluginInterfaceForCore={pluginInterfaceForCore}
+      <AuthModalProvider>
+        <AuthProvider>
+          <Suspense fallback={<LoadingScreen />}>
+            <BootstrapConfigProvider
+              bootstrapConfig={{
+                apps: {},
+                appsMeta: {
+                  tags: {
+                    descriptions: [],
+                  },
+                },
+                envs: {},
+                contexts: [],
+                defaults: { envSlug: '', resourceJumpSlug: '' },
+              }}
             >
-              <PageUrlPluginContextProvider>
-                {children}
-              </PageUrlPluginContextProvider>
-            </PluginManagerContextProvider>
-          </GlobalConfigProvider>
-        </BootstrapConfigProvider>
-      </Suspense>
+              <GlobalConfigProvider>
+                <PluginManagerContextProvider
+                  plugins={plugins}
+                  pluginInterfaceForCore={pluginInterfaceForCore}
+                >
+                  {children}
+                  <LoginModal />
+                  <TanStackRouterDevtools />
+                  <ReactQueryDevtools initialIsOpen={false} />
+                </PluginManagerContextProvider>
+              </GlobalConfigProvider>
+            </BootstrapConfigProvider>
+          </Suspense>
+        </AuthProvider>
+      </AuthModalProvider>
     </ThemeProvider>
   )
 }

package/src/ui/layout/TopLevelProvidersForErrors.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { ThemeProvider } from '~/components/theme-provider'
+import { AuthProvider } from '~/modules/auth'
+import { AuthModalProvider } from '~/modules/auth/AuthModalContext'
+import { LoginModal } from '~/modules/auth/ui/LoginModal'
+
+export interface TopLevelProvidersForErrorsProps {
+  children: React.ReactNode
+}
+
+/**
+ * Minimal providers needed for error boundaries and fallback UI
+ * Includes authentication and theme providers to avoid "useAuth must be used within AuthProvider" errors
+ * when error components try to render Header or other auth-dependent components
+ */
+export function TopLevelProvidersForErrors({ children }: TopLevelProvidersForErrorsProps) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      <AuthModalProvider>
+        <AuthProvider>
+          <>
+            {children}
+            <LoginModal />
+          </>
+        </AuthProvider>
+      </AuthModalProvider>
+    </ThemeProvider>
+  )
+}

package/src/ui/link.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+import { LinkComponent, createLink } from '@tanstack/react-router'
+import * as React from 'react'
+import { cn } from '~/lib/utils'
+
+interface BasicLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  className?: string
+}
+
+const BasicLinkComponent = ({
+  ref,
+  className,
+  ...props
+}: BasicLinkProps & { ref?: React.RefObject<HTMLAnchorElement | null> }) => {
+  return (
+    <a
+      ref={ref}
+      {...props}
+      className={cn(
+        'text-primary hover:text-primary/80 transition-colors font-medium',
+        className,
+      )}
+    />
+  )
+}
+
+const CreatedLinkComponent = createLink(BasicLinkComponent)
+
+export const Link: LinkComponent<typeof BasicLinkComponent> = (props) => {
+  return <CreatedLinkComponent preload={'intent'} {...props} />
+}

package/src/ui/linkExternal.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import { cn } from '~/lib/utils'
+
+interface BasicLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  className?: string
+}
+
+export const LinkExternal = ({
+  ref,
+  href,
+  className,
+  ...props
+}: BasicLinkProps & { ref?: React.RefObject<HTMLAnchorElement | null> }) => {
+  return (
+    <a
+      ref={ref}
+      href={href}
+      target="_blank"
+      {...props}
+      className={cn(
+        'text-primary hover:text-primary/80 transition-colors font-medium',
+        className,
+      )}
+    />
+  )
+}

package/src/ui/main/JumpTabContent.tsx

@@ -1,4 +1,4 @@
-import { Button } from '~/components/ui/button'
+import { Button } from '~/ui/button'
 
 export function JumpTabContent() {
   return (

package/src/ui/radio-group.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { CircleIcon } from 'lucide-react'
+
+import { cn } from '~/lib/utils'
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn('grid gap-3', className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        'border-input text-primary 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 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }

package/src/ui/search-input-with-shortcut.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { Button } from './button'
+import type { ButtonProps } from './button'
+import { cn } from '~/lib/utils'
+
+export interface ShortcutButtonProps extends ButtonProps {
+  /**
+   * The text to display on the button.
+   */
+  text: string
+  /**
+   * The keyboard key to display (e.g., 'K'). Will be formatted as ⌘K on Mac or Ctrl+K on other platforms.
+   * If not provided, defaults to 'K'.
+   */
+  shortcutKey?: string
+  /**
+   * Custom shortcut text to display. If provided, this takes precedence over shortcutKey.
+   * Useful for custom shortcuts like '⌘⇧K' or 'Ctrl+Shift+K'.
+   */
+  shortcut?: string
+}
+
+const ShortcutButton = ({
+  ref,
+  text,
+  shortcutKey = 'K',
+  shortcut,
+  className,
+  ...props
+}: ShortcutButtonProps & {
+  ref?: React.RefObject<HTMLButtonElement | null>
+}) => {
+  const displayShortcut = React.useMemo(() => {
+    if (shortcut) return shortcut
+
+    // Auto-format the shortcut key based on platform
+    const isMac =
+      typeof navigator !== 'undefined' && navigator.platform.includes('Mac')
+    return isMac ? `⌘${shortcutKey}` : `Ctrl+${shortcutKey}`
+  }, [shortcut, shortcutKey])
+
+  return (
+    <Button ref={ref} className={cn('relative pr-10', className)} {...props}>
+      {text}
+      <div className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground pointer-events-none bg-secondary px-2 py-1 rounded-lg transition-colors duration-200">
+        {displayShortcut}
+      </div>
+    </Button>
+  )
+}
+
+ShortcutButton.displayName = 'ShortcutButton'
+
+export { ShortcutButton }

package/src/ui/select.tsx

@@ -0,0 +1,185 @@
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from '~/lib/utils'
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = 'default',
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: 'sm' | 'default'
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]: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 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  align = 'center',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          'bg-popover text-popover-foreground 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-[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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className,
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

package/src/ui/shortcut-button.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react'
+import { cn } from '~/lib/utils'
+
+export interface ShortcutButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * The text to display on the button.
+   */
+  text: string
+  /**
+   * The keyboard key to display (e.g., 'K'). Will be formatted as ⌘K on Mac or Ctrl+K on other platforms.
+   * If not provided, defaults to 'K'.
+   */
+  shortcutKey?: string
+  /**
+   * Custom shortcut text to display. If provided, this takes precedence over shortcutKey.
+   * Useful for custom shortcuts like '⌘⇧K' or 'Ctrl+Shift+K'.
+   */
+  shortcut?: string
+}
+
+const ShortcutButton = ({
+  ref,
+  text,
+  shortcutKey,
+  shortcut,
+  className,
+  ...props
+}: ShortcutButtonProps & {
+  ref?: React.RefObject<HTMLButtonElement | null>
+}) => {
+  const displayShortcut = React.useMemo(() => {
+    if (shortcut) return shortcut
+
+    // Auto-format the shortcut key based on platform (it's not actually deprecated)
+    const isMac =
+      typeof navigator !== 'undefined' && navigator.platform.includes('Mac')
+    return isMac ? `⌘${shortcutKey}` : `Ctrl+${shortcutKey}`
+  }, [shortcut, shortcutKey])
+
+  const { onClick, ...buttonProps } = props
+
+  return (
+    <div
+      className={cn(
+        'flex items-center h-10 w-full rounded-md border border-input bg-background text-sm',
+        'hover:bg-accent hover:border-accent/50 cursor-default',
+        'focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:border-accent/50 focus-within:bg-accent',
+        'transition-colors duration-200',
+        className,
+      )}
+      onClick={
+        onClick
+          ? (e) => onClick(e as unknown as React.MouseEvent<HTMLButtonElement>)
+          : undefined
+      }
+    >
+      <button
+        ref={ref}
+        type="button"
+        className={cn(
+          'flex-1 h-full px-3 py-2 text-left transition-colors duration-200',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          'focus-visible:outline-none',
+        )}
+        onClick={(e) => {
+          e.stopPropagation()
+          onClick?.(e)
+        }}
+        {...buttonProps}
+      >
+        <span className="text-muted-foreground">{text}</span>
+      </button>
+      {shortcutKey && (
+        <span className="text-xs text-muted-foreground bg-secondary px-2 py-1 rounded-lg mr-3 shrink-0">
+          {displayShortcut}
+        </span>
+      )}
+    </div>
+  )
+}
+
+ShortcutButton.displayName = 'ShortcutButton'
+
+export { ShortcutButton }