@toolpath/ui 0.1.0

package/src/menu/item.tsx

@@ -0,0 +1,149 @@
+import React, { Ref, useCallback, useEffect, useRef } from 'react'
+import { Menu as BaseMenu, MenuItemProps as BaseMenuItemProps, ContextMenu } from '@base-ui/react'
+import { cn } from '../helpers'
+import { useMenu } from './menu-context'
+
+type BaseUIEvent<E extends React.SyntheticEvent> = E & {
+  preventBaseUIHandler: () => void
+  readonly baseUIHandlerPrevented?: boolean
+}
+
+export type MenuItemProps = BaseMenuItemProps & {
+  variant?: 'default' | 'danger'
+  ref?: Ref<HTMLElement>
+}
+
+export const Item = ({
+  children,
+  className,
+  disabled,
+  variant = 'default',
+  ref,
+  onClick,
+  ...props
+}: MenuItemProps) => {
+  const { context } = useMenu()
+
+  // Wrap onClick to stop propagation, preventing parent click handlers from firing
+  const handleClick = (event: BaseUIEvent<React.MouseEvent<HTMLDivElement>>) => {
+    event.stopPropagation()
+    onClick?.(event)
+  }
+  const internalRef = useRef<HTMLElement>(null)
+  // Track if we should block the next click (due to right-click mouseup)
+  const blockNextClickRef = useRef(false)
+
+  // Merge passed ref with internal ref (only needed for context menus)
+  const setRefs = useCallback(
+    (element: HTMLDivElement | null) => {
+      internalRef.current = element
+      if (typeof ref === 'function') {
+        ref(element)
+      } else if (ref && 'current' in ref) {
+        ref.current = element
+      }
+    },
+    [ref],
+  )
+
+  // Attach native DOM event listeners during capture phase to intercept
+  // right-click mouseup before @base-ui/react's handlers can trigger selection.
+  // The library calls element.click() directly on mouseup for right-clicks,
+  // so we need to block both the mouseup and the resulting synthetic click.
+  // Only needed for context menus since they're opened via right-click.
+  useEffect(() => {
+    if (!context) {
+      return
+    }
+
+    const element = internalRef.current
+    if (!element) {
+      return
+    }
+
+    let resetTimeoutId: ReturnType<typeof setTimeout> | undefined
+
+    const handleMouseUpCapture = (event: MouseEvent) => {
+      // Block right-click (button === 2) mouseup events
+      if (event.button === 2) {
+        // Use stopImmediatePropagation to prevent ALL other listeners on this
+        // element from firing, not just listeners on parent elements
+        event.stopImmediatePropagation()
+        event.preventDefault()
+        // Mark that we should also block the next click event
+        // (which @base-ui/react triggers via element.click())
+        blockNextClickRef.current = true
+        // Reset the flag after a short delay in case click doesn't fire
+        resetTimeoutId = setTimeout(() => {
+          blockNextClickRef.current = false
+        }, 100)
+      }
+    }
+
+    const handleClickCapture = (event: MouseEvent) => {
+      // Block clicks that were triggered by right-click mouseup
+      if (blockNextClickRef.current) {
+        event.stopImmediatePropagation()
+        event.preventDefault()
+        blockNextClickRef.current = false
+        if (resetTimeoutId) {
+          clearTimeout(resetTimeoutId)
+          resetTimeoutId = undefined
+        }
+      }
+    }
+
+    // Use capture phase to intercept before @base-ui/react's handlers
+    element.addEventListener('mouseup', handleMouseUpCapture, true)
+    element.addEventListener('click', handleClickCapture, true)
+
+    return () => {
+      element.removeEventListener('mouseup', handleMouseUpCapture, true)
+      element.removeEventListener('click', handleClickCapture, true)
+      if (resetTimeoutId) {
+        clearTimeout(resetTimeoutId)
+      }
+    }
+  }, [context])
+
+  const itemClassName = cn(
+    'group flex w-full items-center p-2 py-1 text-left whitespace-nowrap',
+    'text-xs font-medium outline-none cursor-pointer',
+    {
+      'cursor-not-allowed border-gray-200 dark:border-zinc-800 text-gray-100 dark:text-zinc-500':
+        disabled,
+      'text-gray data-[highlighted]:bg-gray-50 text-gray-500 dark:text-zinc-100 dark:data-[highlighted]:bg-zinc-800':
+        !disabled && variant === 'default',
+      'text-danger dark:text-red-300 data-[highlighted]:bg-red-100 dark:data-[highlighted]:bg-danger-darken dark:data-[highlighted]:text-red-100':
+        !disabled && variant === 'danger',
+    },
+    'font-body',
+    className,
+  )
+
+  if (context) {
+    return (
+      <ContextMenu.Item
+        {...props}
+        onClick={handleClick}
+        disabled={disabled}
+        ref={setRefs}
+        className={itemClassName}
+      >
+        {children}
+      </ContextMenu.Item>
+    )
+  }
+
+  return (
+    <BaseMenu.Item
+      {...props}
+      onClick={handleClick}
+      disabled={disabled}
+      ref={ref}
+      className={itemClassName}
+    >
+      {children}
+    </BaseMenu.Item>
+  )
+}

package/src/menu/menu-context.tsx

@@ -0,0 +1,24 @@
+import React, { FC, ReactNode, createContext, useContext, useMemo } from 'react'
+
+export interface MenuContextInterface {
+  context: boolean
+  submenu: boolean
+}
+
+const MenuContext = createContext<Partial<MenuContextInterface>>({} as MenuContextInterface)
+
+interface ProviderProps {
+  context: boolean
+  submenu?: boolean
+  children: ReactNode
+}
+
+const MenuProvider: FC<ProviderProps> = ({ context = false, submenu = false, children }) => {
+  const value = useMemo(() => ({ context, submenu }), [context, submenu])
+
+  return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>
+}
+
+const useMenu = () => useContext(MenuContext)
+const MenuConsumer = MenuContext.Consumer
+export { useMenu, MenuProvider, MenuContext, MenuConsumer }

package/src/menu/menu.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Menu as BaseMenu, ContextMenu, MenuRoot } from '@base-ui/react'
+import { MenuProvider } from './menu-context'
+
+export type MenuProps =
+  | (MenuRoot.Props & { context?: false })
+  | (ContextMenu.Root.Props & { context: true })
+
+export const Menu = ({ context = false, ...props }: MenuProps) => (
+  <MenuProvider context={context}>
+    {!context && <BaseMenu.Root {...(props as MenuRoot.Props)} />}
+    {context && <ContextMenu.Root {...(props as ContextMenu.Root.Props)} />}
+  </MenuProvider>
+)

package/src/menu/popover.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { Menu as BaseMenu, ContextMenu, MenuPopupProps, MenuPositionerProps } from '@base-ui/react'
+import { cn } from '../helpers'
+import { useMenu } from './menu-context'
+
+export type MenuPopoverProps = MenuPopupProps & Omit<MenuPositionerProps, 'children'>
+
+export const Popover = ({
+  className,
+  anchor,
+  positionMethod,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  collisionBoundary,
+  collisionPadding,
+  sticky,
+  arrowPadding,
+  disableAnchorTracking,
+  collisionAvoidance,
+  children,
+  ...props
+}: MenuPopoverProps) => {
+  const { context, submenu } = useMenu()
+
+  const positionerProps = {
+    className: 'outline-none z-50',
+    side: side || (context || submenu ? 'right' : 'bottom'),
+    align: align || (context || submenu ? 'start' : 'end'),
+    anchor,
+    positionMethod,
+    sideOffset,
+    alignOffset,
+    collisionBoundary,
+    collisionPadding,
+    sticky,
+    arrowPadding,
+    disableAnchorTracking,
+    collisionAvoidance,
+  } as const
+
+  const popupClassName = cn(
+    'outline-none border border-gray-100 dark:border-zinc-800 rounded bg-white dark:bg-zinc-900 overflow-hidden font-body',
+    className,
+  )
+
+  if (context) {
+    return (
+      <ContextMenu.Portal>
+        <ContextMenu.Positioner {...positionerProps}>
+          <ContextMenu.Popup className={popupClassName} {...props}>
+            {children}
+          </ContextMenu.Popup>
+        </ContextMenu.Positioner>
+      </ContextMenu.Portal>
+    )
+  }
+
+  return (
+    <BaseMenu.Portal>
+      <BaseMenu.Positioner {...positionerProps}>
+        <BaseMenu.Popup className={popupClassName} {...props}>
+          {children}
+        </BaseMenu.Popup>
+      </BaseMenu.Positioner>
+    </BaseMenu.Portal>
+  )
+}

package/src/menu/submenu-trigger.tsx

@@ -0,0 +1,48 @@
+import React, { RefAttributes } from 'react'
+import {
+  Menu as BaseMenu,
+  MenuSubmenuTriggerProps as BaseMenuSubmenuTriggerProps,
+  ContextMenu,
+} from '@base-ui/react'
+import { cn } from '../helpers'
+import { CaretRightIcon } from '@phosphor-icons/react'
+import { useMenu } from './menu-context'
+
+export type MenuSubmenuTriggerProps = BaseMenuSubmenuTriggerProps & RefAttributes<HTMLElement>
+
+export const SubmenuTrigger = ({ className, children, ...props }: MenuSubmenuTriggerProps) => {
+  const { context } = useMenu()
+  const submenuTriggerClass = cn(
+    'group flex w-full items-center p-2 py-1 text-left whitespace-nowrap',
+    'text-xs font-medium outline-none text-gray dark:text-zinc-200 data-[highlighted]:bg-gray-50 dark:data-[highlighted]:bg-zinc-800',
+    'font-body',
+    className,
+  )
+
+  if (context) {
+    return (
+      <ContextMenu.SubmenuTrigger
+        className={submenuTriggerClass}
+        {...(props as MenuSubmenuTriggerProps)}
+      >
+        <div className="flex-1">{children}</div>
+        <CaretRightIcon className="size-4" />
+      </ContextMenu.SubmenuTrigger>
+    )
+  }
+
+  return (
+    <BaseMenu.SubmenuTrigger
+      nativeButton={false}
+      render={(renderProps) => (
+        <div {...renderProps} tabIndex={-1} className={submenuTriggerClass}>
+          <div className="flex-1">{renderProps.children}</div>
+          <CaretRightIcon className="size-4" />
+        </div>
+      )}
+      {...(props as MenuSubmenuTriggerProps)}
+    >
+      {children}
+    </BaseMenu.SubmenuTrigger>
+  )
+}

package/src/menu/submenu.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import {
+  Menu as BaseMenu,
+  MenuSubmenuRootProps as BaseMenuSubmenuRootProps,
+  ContextMenu,
+} from '@base-ui/react'
+import { MenuProvider, useMenu } from './menu-context'
+
+export type MenuSubmenuRootProps = BaseMenuSubmenuRootProps
+
+export const Submenu = ({ ...props }: MenuSubmenuRootProps) => {
+  const { context } = useMenu()
+
+  return (
+    <MenuProvider context={context ?? false} submenu={true}>
+      {!context && <ContextMenu.SubmenuRoot {...props} />}
+      {context && <BaseMenu.SubmenuRoot {...props} />}
+    </MenuProvider>
+  )
+}

package/src/menu/trigger.tsx

@@ -0,0 +1,43 @@
+import React, { RefAttributes } from 'react'
+import {
+  Menu as BaseMenu,
+  MenuTriggerProps as BaseMenuTriggerProps,
+  ContextMenu,
+  ContextMenuTriggerProps,
+} from '@base-ui/react'
+import { cn } from '../helpers'
+import { useMenu } from './menu-context'
+
+export type MenuTriggerProps =
+  | (BaseMenuTriggerProps & RefAttributes<HTMLElement>)
+  | (ContextMenuTriggerProps & RefAttributes<HTMLDivElement>)
+
+export const Trigger = ({ className, children, ...props }: MenuTriggerProps) => {
+  const { context } = useMenu()
+
+  if (context) {
+    return (
+      <ContextMenu.Trigger
+        className={cn('inline-block outline-none', className)}
+        {...(props as ContextMenuTriggerProps)}
+      >
+        {children}
+      </ContextMenu.Trigger>
+    )
+  }
+
+  return (
+    <BaseMenu.Trigger
+      nativeButton={false}
+      onClick={(e) => e.stopPropagation()}
+      render={(renderProps) => (
+        <div {...renderProps} tabIndex={-1} className={cn('inline-block outline-none', className)}>
+          {renderProps.children}
+        </div>
+      )}
+      {...(props as BaseMenuTriggerProps)}
+    >
+      {children}
+    </BaseMenu.Trigger>
+  )
+}

package/src/notification/index.ts

@@ -0,0 +1,16 @@
+import { List } from './list'
+import { NotificationManager, Provider, useNotificationManager } from './provider'
+
+type NotificationCompoundType = {
+  List: typeof List
+  Provider: typeof Provider
+  useNotificationManager: typeof useNotificationManager
+}
+
+export const Notification: NotificationCompoundType = Object.assign({
+  List,
+  Provider,
+  useNotificationManager,
+})
+
+export type { NotificationManager }

package/src/notification/list.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import { Toast, ToastObject } from '@base-ui/react'
+import { cn } from '../helpers'
+import { IconButton } from '../icon-button'
+import { XIcon } from '@phosphor-icons/react'
+import { useNotificationToastManager } from './provider'
+
+export type NotificationVariant = 'info' | 'warning' | 'danger' | 'success'
+
+interface NotificationData {
+  type: 'notification'
+  variant?: NotificationVariant
+}
+
+export const List = () => {
+  // Use the separate notification context - all toasts here are notifications
+  const { toasts: notifications } = useNotificationToastManager()
+
+  const getVariant = (toast: ToastObject<any>): NotificationVariant => {
+    const data = toast.data as NotificationData | undefined
+    return data?.variant ?? 'info'
+  }
+
+  return (
+    <Toast.Portal>
+      <Toast.Viewport
+        className={cn(
+          'font-body text-base font-medium tracking-normal fixed left-1/2 top-5 z-[1100] -translate-x-1/2 transform',
+          {
+            'flex w-full flex-col px-4 pb-8 sm:w-[512px] sm:px-0': notifications.length,
+            'pointer-events-none': !notifications.length,
+          },
+        )}
+      >
+        {notifications.map((toast) => {
+          const variant = getVariant(toast)
+
+          return (
+            <Toast.Root
+              key={toast.id}
+              toast={toast}
+              swipeDirection={['up', 'left', 'right']}
+              tabIndex={-1}
+              className={cn(
+                // Base styles
+                'hide-scrollbar outline-none relative flex max-h-[140px] w-full max-w-lg items-start gap-2 self-center overflow-y-scroll rounded-lg p-2 pl-3 shadow-md',
+                // Animation: transition properties
+                'transition-all duration-300 ease-out',
+                // Stacking: absolute positioning to overlap
+                'absolute top-0 left-0 right-0',
+                // Stacking: z-index based on --toast-index (lower index = front, above dialog z-[1001])
+                '[z-index:calc(1100-var(--toast-index))]',
+                // Stacking: scale down and offset each toast behind the front one
+                '[transform:scale(calc(1-0.05*var(--toast-index)))_translateY(calc(var(--toast-index)*12px))_translateX(var(--toast-swipe-movement-x,0px))]',
+                // Stacking: reduce brightness for toasts behind
+                '[filter:brightness(calc(1-0.08*var(--toast-index)))]',
+                // Expanded state: spread out when hovering the viewport (with 8px gap between each)
+                'data-[expanded]:[transform:translateY(calc(var(--toast-offset-y)+var(--toast-index)*8px))_translateX(var(--toast-swipe-movement-x,0px))]',
+                'data-[expanded]:[filter:brightness(1)]',
+                // Entry animation (starting style)
+                'data-[starting-style]:[transform:scale(calc(1-0.05*var(--toast-index)))_translateY(-150%)]',
+                'data-[starting-style]:opacity-0',
+                // Exit animation (ending style)
+                'data-[ending-style]:opacity-0',
+                'data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y,0px)-150%))]',
+                'data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y,0px)+150%))]',
+                'data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x,0px)-150%))]',
+                'data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x,0px)+150%))]',
+                // Variant colors
+                {
+                  'bg-gray-500 text-white dark:bg-zinc-900 dark:text-zinc-100 dark:ring-1 dark:ring-zinc-800':
+                    variant === 'info',
+                  'bg-warning text-gray dark:text-zinc-950': variant === 'warning',
+                  'bg-danger text-white dark:text-zinc-50': variant === 'danger',
+                  'bg-success text-white dark:text-zinc-50': variant === 'success',
+                },
+              )}
+            >
+              <Toast.Content className="mr-8 flex flex-1 flex-col whitespace-pre-line break-words overflow-hidden transition-opacity duration-300 data-[behind]:opacity-0 data-[expanded]:opacity-100">
+                <Toast.Description />
+                <Toast.Action
+                  className={cn(
+                    'mt-1 inline-block w-fit rounded-md px-0 py-0 text-sm font-semibold underline underline-offset-2 transition-all duration-200 text-left',
+                    'hover:no-underline focus-visible:no-underline outline-none',
+                    {
+                      'text-gray hover:text-black focus-visible:text-black dark:text-zinc-950 dark:hover:text-black dark:focus-visible:text-black':
+                        variant === 'warning',
+                      'text-white/80 hover:text-white focus-visible:text-white dark:text-zinc-50/80 dark:hover:text-zinc-50 dark:focus-visible:text-zinc-50':
+                        variant === 'danger' || variant === 'success' || variant === 'info',
+                    },
+                  )}
+                />
+              </Toast.Content>
+              <Toast.Close
+                aria-label="Close"
+                nativeButton={true}
+                render={(renderProps) => {
+                  return (
+                    <div className="absolute right-2 top-2">
+                      <IconButton
+                        size="lg"
+                        className="[&_svg]:size-5 rounded active:bg-black/10 hover:bg-black/10 focus-visible:bg-black/10 focus-visible:ring-0 dark:active:bg-black/20 dark:hover:bg-black/20 dark:focus-visible:bg-black/20"
+                        {...renderProps}
+                      >
+                        <XIcon
+                          className={cn({
+                            'text-gray dark:text-zinc-950': variant === 'warning',
+                            'text-white dark:text-zinc-50':
+                              variant === 'danger' || variant === 'success' || variant === 'info',
+                          })}
+                        />
+                      </IconButton>
+                    </div>
+                  )
+                }}
+              />
+            </Toast.Root>
+          )
+        })}
+      </Toast.Viewport>
+    </Toast.Portal>
+  )
+}

package/src/notification/provider.tsx

@@ -0,0 +1,75 @@
+import React, { ReactNode, createContext, useContext, useMemo } from 'react'
+import {
+  Toast as BaseToast,
+  ToastProviderProps as BaseToastProviderProps,
+  UseToastManagerReturnValue,
+} from '@base-ui/react'
+import { NotificationVariant } from './list'
+
+// Create a separate context for the notification manager
+// This allows notifications to have their own independent toast stack
+const NotificationContext = createContext<UseToastManagerReturnValue | null>(null)
+
+export type NotificationProviderProps = Omit<BaseToastProviderProps, 'children'> & {
+  children?: ReactNode
+}
+
+export const Provider = ({ children, ...props }: NotificationProviderProps) => (
+  <BaseToast.Provider {...props}>
+    <NotificationContextProvider>{children}</NotificationContextProvider>
+  </BaseToast.Provider>
+)
+
+// Internal component that captures and provides the toast manager
+const NotificationContextProvider = ({ children }: { children?: ReactNode }) => {
+  const toastManager = BaseToast.useToastManager()
+  return (
+    <NotificationContext.Provider value={toastManager}>{children}</NotificationContext.Provider>
+  )
+}
+
+export type NotificationManager = {
+  toasts: UseToastManagerReturnValue['toasts']
+  add: <Data extends object>(
+    options: Parameters<UseToastManagerReturnValue['add']>[0] & {
+      variant: NotificationVariant
+    } & { data?: Data },
+  ) => string
+  close: UseToastManagerReturnValue['close']
+  update: UseToastManagerReturnValue['update']
+  promise: UseToastManagerReturnValue['promise']
+}
+
+export const useNotificationManager = (): NotificationManager => {
+  const toastManager = useContext(NotificationContext)
+
+  if (!toastManager) {
+    throw new Error('useNotificationManager must be used within a Notification.Provider')
+  }
+
+  return useMemo(
+    () => ({
+      toasts: toastManager.toasts,
+      close: toastManager.close,
+      update: toastManager.update,
+      promise: toastManager.promise,
+      add: ({ variant = 'info', ...props }) => {
+        return toastManager.add({
+          ...props,
+          data: { ...props.data, variant, type: 'notification' },
+        })
+      },
+    }),
+    [toastManager],
+  )
+}
+
+export const useNotificationToastManager = (): UseToastManagerReturnValue => {
+  const toastManager = useContext(NotificationContext)
+
+  if (!toastManager) {
+    throw new Error('useNotificationToastManager must be used within a Notification.Provider')
+  }
+
+  return toastManager
+}

package/src/page-header/index.ts

@@ -0,0 +1,2 @@
+export { PageHeader } from './page-header'
+export type { PageHeaderProps } from './page-header'

package/src/page-header/page-header.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react'
+
+export interface PageHeaderProps {
+  title: string
+  children?: ReactNode
+}
+
+/** The standard heading row for a Toolpath application page. */
+export const PageHeader = ({ title, children }: PageHeaderProps) => (
+  <div className="mb-4 flex items-center justify-between">
+    <h1 className="text-base font-bold text-gray-900 dark:text-white">{title}</h1>
+    {children}
+  </div>
+)

package/src/pagination/index.ts

@@ -0,0 +1 @@
+export * from './pagination'