@noya-app/noya-designsystem 0.1.76 → 0.1.78

package/src/components/IVirtualizedList.tsx

@@ -1,5 +1,25 @@
 "use client";
 
+export type ScrollToIndexAlign = "auto" | "start" | "center" | "end";
+
+export type ScrollToIndexPadding =
+  | number
+  | {
+      top?: number;
+      bottom?: number;
+    };
+
+export interface ScrollToIndexOptions {
+  align?: ScrollToIndexAlign;
+  /**
+   * Extra padding to include when scrolling. When scrolling to "start",
+   * this adds space above the item. When scrolling to "end", this adds
+   * space below. For "auto", it applies the appropriate padding based
+   * on scroll direction. A number applies to both directions.
+   */
+  padding?: ScrollToIndexPadding;
+}
+
 export interface IVirtualizedList {
-  scrollToIndex(index: number): void;
+  scrollToIndex(index: number, options?: ScrollToIndexOptions): void;
 }

package/src/components/InputField.tsx

@@ -61,8 +61,8 @@ export const getFieldSpacing = ({
   startWidth?: number;
   variant?: InputFieldVariant;
 }) => ({
-  paddingLeft: `${variant === "bare" ? startWidth : startWidth ? startWidth + 12 : 6}px`,
-  paddingRight: `${variant === "bare" ? endWidth : endWidth ? endWidth + 12 : 6}px`,
+  paddingLeft: `${variant === "bare" ? startWidth : startWidth ? startWidth + 12 : 8}px`,
+  paddingRight: `${variant === "bare" ? endWidth : endWidth ? endWidth + 12 : 8}px`,
 });
 
 /* ----------------------------------------------------------------------------
@@ -663,14 +663,6 @@ function InputFieldRoot({
           trigger={rootElement}
           sideOffset={sideOffset}
           showArrow={false}
-          onOpenAutoFocus={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-          }}
-          onCloseAutoFocus={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-          }}
         >
           {measuredWidthObject && (
             <div

package/src/components/InspectorContainer.tsx

@@ -42,7 +42,7 @@ export const InspectorContainer = memo(
       >
         {header}
         {children ? (
-          <ScrollArea>
+          <ScrollArea className="n-flex-1 n-min-h-0">
             <div className="n-flex n-flex-col n-relative">
               {showDividers
                 ? withSeparatorElements(children, <Divider />)
@@ -50,7 +50,9 @@ export const InspectorContainer = memo(
             </div>
           </ScrollArea>
         ) : fallback ? (
-          <div className="n-flex n-flex-col n-relative n-h-full">{fallback}</div>
+          <div className="n-flex n-flex-col n-relative n-h-full">
+            {fallback}
+          </div>
         ) : null}
       </div>
     );

package/src/components/Message.tsx

@@ -5,7 +5,6 @@ import { uuid } from "@noya-app/noya-utils";
 import React, { forwardRef, memo, useMemo } from "react";
 import { cssVars, INPUT_HEIGHT } from "../theme";
 import { cx } from "../utils/classNames";
-import { colorFromString } from "../utils/colorFromString";
 import { Avatar } from "./Avatar";
 import { Logo } from "./NoyaLogo";
 
@@ -22,18 +21,8 @@ export const Message = memo(
     { role, children, user, avatarSize = INPUT_HEIGHT }: MessageProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) {
-    const randomId = uuid();
+    const randomId = useMemo(() => uuid(), []);
     const resolvedUserId = user?.authId ?? user?.connectionId ?? randomId;
-    const userMessageBackgroundColor = colorFromString(resolvedUserId);
-    const styles = useMemo(
-      () =>
-        role === "user"
-          ? {
-              backgroundColor: userMessageBackgroundColor,
-            }
-          : undefined,
-      [userMessageBackgroundColor, role]
-    );
     return (
       <div
         className={cx(
@@ -60,11 +49,11 @@ export const Message = memo(
         <div
           className={cx(
             "markdown-message",
-            "n-flex n-flex-row n-gap-2 n-rounded-lg n-py-2 n-px-3 n-transition-all n-duration-200 n-max-w-[70%] n-text-sm",
-            role === "user" ? "n-text-white" : "n-text-text",
-            role === "user" ? "n-ml-auto" : "n-bg-input-background"
+            "n-rounded-lg n-py-2 n-px-3 n-transition-all n-duration-200 n-max-w-[70%] n-min-w-0 n-text-sm [&_pre]:n-whitespace-pre-wrap [&_code]:n-whitespace-pre-wrap",
+            role === "user"
+              ? "n-text-white n-ml-auto n-bg-primary"
+              : "n-text-text n-bg-input-background"
           )}
-          style={styles}
           ref={ref}
         >
           {children}

package/src/components/OverlayToolbar.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { cx } from "../utils/classNames";
+import { toolbarTransparentStyle } from "./BaseToolbar";
+
+export type OverlayLayout = "bottomCenterTopRight" | "topLeftTopRight";
+
+export interface OverlayToolbarProps {
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  overlayLayout?: OverlayLayout;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const panelClassName =
+  "n-pointer-events-auto n-inline-flex n-items-center n-gap-toolbar-separator n-rounded-3xl n-border n-border-divider n-bg-sidebar-background n-px-3 n-py-2.5 n-shadow-2xl";
+
+export function OverlayToolbar({
+  left,
+  right,
+  overlayLayout = "bottomCenterTopRight",
+  className,
+  style,
+}: OverlayToolbarProps) {
+  const resolvedLayout =
+    overlayLayout === "topLeftTopRight"
+      ? "topLeftTopRight"
+      : "bottomCenterTopRight";
+
+  // Merge transparent backgrounds with custom style
+  const panelStyle = useMemo(
+    () => ({
+      ...toolbarTransparentStyle,
+      ...style,
+    }),
+    [style]
+  );
+
+  const renderLeftPanel = (overlayId: string) => {
+    if (!left) return null;
+
+    return (
+      <div
+        className={panelClassName}
+        data-embedded-overlay-id={overlayId}
+        style={panelStyle}
+      >
+        {left}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {/* Left items panel */}
+      {resolvedLayout === "bottomCenterTopRight" ? (
+        <div
+          className={cx(
+            "n-pointer-events-none n-absolute n-bottom-0 n-left-0 n-right-0 n-flex n-justify-center n-px-6 n-pb-6",
+            className
+          )}
+        >
+          {renderLeftPanel("noya-toolbar-bottom-center")}
+        </div>
+      ) : (
+        <div
+          className={cx(
+            "n-pointer-events-none n-absolute n-top-0 n-left-0 n-px-4 sm:!n-px-6 n-pt-4 sm:!n-pt-6",
+            className
+          )}
+        >
+          {renderLeftPanel("noya-toolbar-top-left")}
+        </div>
+      )}
+
+      {/* Right items panel */}
+      {right && (
+        <div
+          className={cx(
+            "n-pointer-events-none n-absolute n-top-0 n-right-0 n-px-4 sm:!n-px-6 n-pt-4 sm:!n-pt-6",
+            className
+          )}
+        >
+          <div
+            className={panelClassName}
+            data-embedded-overlay-id="noya-toolbar-top-right"
+            style={panelStyle}
+          >
+            {right}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/Popover.tsx

@@ -1,39 +1,21 @@
 "use client";
 
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
 import { useControlledOrUncontrolled } from "@noya-app/react-utils";
-import { Popover as PopoverPrimitive } from "radix-ui";
-import React, {
-  ComponentProps,
-  useCallback,
-  useEffect,
-  useId,
-  useRef,
-} from "react";
+import React, { useCallback, useEffect, useId } from "react";
 import { useOpenPortalsControls } from "../contexts/OpenPortalsContext";
 import {
   portalScopeProps,
   usePortalScopeId,
 } from "../contexts/PortalScopeContext";
+import { useTriggerToggle } from "../hooks/useTriggerToggle";
 import { cx } from "../utils/classNames";
+import { mergePropsWithEventComposition } from "../utils/mergeProps";
 import { IconButton } from "./IconButton";
 
-const closeStyles: React.CSSProperties = {
-  all: "unset",
-  fontFamily: "inherit",
-};
-
 type PopoverVariant = "normal" | "large";
 
-interface Props
-  extends Pick<
-    ComponentProps<(typeof PopoverPrimitive)["Content"]>,
-    | "onOpenAutoFocus"
-    | "onCloseAutoFocus"
-    | "onPointerDownOutside"
-    | "onInteractOutside"
-    | "onFocusOutside"
-    | "side"
-  > {
+interface Props {
   children:
     | React.ReactNode
     | ((props: { close: () => void }) => React.ReactNode);
@@ -48,11 +30,16 @@ interface Props
   className?: string;
   style?: React.CSSProperties;
   portalContainer?: HTMLElement | null;
+  side?: "top" | "bottom" | "left" | "right";
+  /**
+   * Called when an interaction outside the popover occurs.
+   * Return false to prevent the popover from closing.
+   */
+  shouldCloseOnInteractOutside?: (event: PointerEvent) => boolean;
 }
 
 export const popoverStyle = {
-  base:
-    "n-rounded n-font-[14px] n-bg-popover-background n-shadow-popover n-max-h-[600px] n-overflow-y-auto n-text-text-muted n-z-[1000]",
+  base: "n-rounded n-font-[14px] n-bg-popover-background n-shadow-popover n-max-h-[600px] n-overflow-y-auto n-text-text-muted n-z-[1000]",
   large: "n-w-[680px]",
   normal: "n-w-[240px]",
 };
@@ -67,19 +54,14 @@ export function Popover({
   sideOffset = 4,
   showArrow = true,
   onOpenChange,
-  onOpenAutoFocus,
-  onCloseAutoFocus,
-  onPointerDownOutside,
-  onInteractOutside,
-  onFocusOutside,
   onClickClose,
   className,
   portalContainer,
   style,
+  shouldCloseOnInteractOutside,
 }: Props) {
   const defaultId = useId();
   const portalScopeId = usePortalScopeId();
-  const contentRef = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useControlledOrUncontrolled({
     value: open,
     onChange: onOpenChange,
@@ -87,6 +69,9 @@ export function Popover({
   });
   const close = useCallback(() => setIsOpen(false), [setIsOpen]);
 
+  const { anchorElement, setAnchorElement, popupRef, handleOpenChange } =
+    useTriggerToggle(isOpen, setIsOpen, { shouldCloseOnInteractOutside });
+
   const { addOpenPortal, removeOpenPortal } = useOpenPortalsControls();
 
   useEffect(() => {
@@ -100,91 +85,72 @@ export function Popover({
   }, [addOpenPortal, isOpen, portalScopeId, removeOpenPortal, defaultId]);
 
   return (
-    <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
+    <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange}>
+      <PopoverPrimitive.Trigger
+        render={(triggerProps) => {
+          const element = React.isValidElement(trigger) ? (
+            trigger
+          ) : (
+            <span>{trigger}</span>
+          );
+          const childProps = element.props as Record<string, unknown>;
+          const mergedProps = mergePropsWithEventComposition(
+            triggerProps as Record<string, unknown>,
+            childProps
+          );
+
+          // Custom ref handling for anchor tracking
+          mergedProps.ref = (node: Element | null) => {
+            // Only update state when we get a valid node to prevent anchor loss during rerenders
+            if (node) setAnchorElement(node);
+          };
+
+          return React.cloneElement(
+            element as React.ReactElement<any>,
+            mergedProps
+          );
+        }}
+      />
       <PopoverPrimitive.Portal container={portalContainer}>
-        <PopoverPrimitive.Content
+        <PopoverPrimitive.Positioner
           {...portalScopeProps(portalScopeId)}
-          ref={contentRef}
-          style={style}
-          className={cx(
-            popoverStyle.base,
-            variant === "large" && popoverStyle.large,
-            variant === "normal" && popoverStyle.normal,
-            className
-          )}
+          anchor={anchorElement}
           side={side}
           align="center"
           sideOffset={sideOffset}
-          onOpenAutoFocus={onOpenAutoFocus}
-          onCloseAutoFocus={onCloseAutoFocus}
-          onInteractOutside={onInteractOutside}
-          onFocusOutside={onFocusOutside}
-          onPointerDownOutside={(event) => {
-            if (
-              isEventInsideElement(
-                event.detail.originalEvent,
-                contentRef.current
-              )
-            ) {
-              event.preventDefault();
-            }
-
-            onPointerDownOutside?.(event);
-          }}
           collisionPadding={8}
           arrowPadding={2}
-          // Don't propagate pointer down events to the canvas
-          // onPointerDown={(event) => {
-          //   event.stopPropagation();
-          // }}
-          // onWheel={(event) => {
-          //   event.stopPropagation();
-          // }}
+          className="n-z-menu"
         >
-          {typeof children === "function" ? children({ close }) : children}
-          {showArrow && (
-            <PopoverPrimitive.Arrow className="n-fill-popover-background" />
-          )}
-          {closable && (
-            <PopoverPrimitive.Close
-              className="n-rounded-full n-h-[25px] n-w-[25px] n-inline-flex n-items-center n-justify-center n-absolute n-top-[5px] n-right-[5px]"
-              style={closeStyles}
-            >
-              <IconButton iconName="Cross2Icon" onClick={onClickClose} />
-            </PopoverPrimitive.Close>
-          )}
-        </PopoverPrimitive.Content>
+          <PopoverPrimitive.Popup
+            ref={popupRef}
+            style={style}
+            className={cx(
+              popoverStyle.base,
+              variant === "large" && popoverStyle.large,
+              variant === "normal" && popoverStyle.normal,
+              className
+            )}
+          >
+            {typeof children === "function" ? children({ close }) : children}
+            {showArrow && (
+              <PopoverPrimitive.Arrow className="n-fill-popover-background" />
+            )}
+            {closable && (
+              <PopoverPrimitive.Close
+                className="n-rounded-full n-h-[25px] n-w-[25px] n-inline-flex n-items-center n-justify-center n-absolute n-top-[5px] n-right-[5px]"
+                render={
+                  <IconButton
+                    iconName="Cross2Icon"
+                    onClick={onClickClose}
+                    style={{ all: "unset", fontFamily: "inherit" }}
+                  />
+                }
+              />
+            )}
+          </PopoverPrimitive.Popup>
+        </PopoverPrimitive.Positioner>
       </PopoverPrimitive.Portal>
     </PopoverPrimitive.Root>
   );
 }
-
-/**
- * Radix ignores pointer-events on the body when a popover is open.
- * This function checks if an event is inside an element by temporarily
- * setting pointer-events to auto and then restoring it afterward.
- */
-function isEventInsideElement(
-  event: PointerEvent,
-  element: HTMLElement | null
-) {
-  if (!element) return false;
-
-  const body = document.body;
-  const originalPointerEvents = body.style.pointerEvents;
-  body.style.pointerEvents = "auto";
-
-  // Get all elements at the point
-  const elementsAtPoint = document.elementsFromPoint(
-    event.clientX,
-    event.clientY
-  );
-
-  // Restore original pointer-events
-  body.style.pointerEvents = originalPointerEvents;
-
-  const target = elementsAtPoint.at(0);
-
-  return target && element.contains(target);
-}

package/src/components/Progress.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { clamp } from "@noya-app/noya-utils";
-import { Progress as ProgressPrimitive } from "radix-ui";
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
 import * as React from "react";
 import { cx } from "../utils/classNames";
 
@@ -23,19 +23,17 @@ export function Progress({
   style?: React.CSSProperties;
 }) {
   const clampedValue = clamp(value, 0, 100);
-  const transformStyles = React.useMemo(
-    () => ({
-      transform: `translateX(-${100 - clampedValue}%)`,
-      backgroundColor: color,
-    }),
-    [color, clampedValue]
-  );
 
   const style = React.useMemo(
     () => ({ transform: "translateZ(0)", ...styleProp }),
     [styleProp]
   );
 
+  const indicatorStyle = React.useMemo(
+    () => ({ backgroundColor: color }),
+    [color]
+  );
+
   return (
     <ProgressPrimitive.Root
       className={cx(
@@ -45,16 +43,18 @@ export function Progress({
       style={style}
       value={clampedValue}
     >
-      <ProgressPrimitive.Indicator
-        className={cx(
-          "n-transition-[transform_660ms_cubic-bezier(0.65,0,0.35,1)] n-w-full n-h-full",
-          colorScheme === "primary" && "n-bg-primary",
-          colorScheme === "secondary" && "n-bg-secondary",
-          colorScheme === "warning" && "n-bg-warning",
-          colorScheme === "normal" && "n-bg-text"
-        )}
-        style={transformStyles}
-      />
+      <ProgressPrimitive.Track className="n-w-full n-h-full">
+        <ProgressPrimitive.Indicator
+          className={cx(
+            "n-transition-[width_660ms_cubic-bezier(0.65,0,0.35,1)] n-h-full",
+            colorScheme === "primary" && "n-bg-primary",
+            colorScheme === "secondary" && "n-bg-secondary",
+            colorScheme === "warning" && "n-bg-warning",
+            colorScheme === "normal" && "n-bg-text"
+          )}
+          style={indicatorStyle}
+        />
+      </ProgressPrimitive.Track>
     </ProgressPrimitive.Root>
   );
 }

package/src/components/ScrollArea.tsx

@@ -1,41 +1,76 @@
 "use client";
 
-import { ScrollArea as RadixScrollArea } from "radix-ui";
+import { ScrollArea as BScrollArea } from "@base-ui/react/scroll-area";
 import * as React from "react";
+import { cx } from "../utils/classNames";
 
-interface Props {
-  children?:
-    | React.ReactNode
-    | ((scrollElementRef: HTMLDivElement) => React.ReactNode);
-}
+const SCROLLBAR_STATE_CLASSES =
+  "scroll-component n-opacity-0 n-transition-opacity n-delay-300 n-pointer-events-none data-[hovering]:n-opacity-100 data-[hovering]:n-delay-0 data-[hovering]:n-duration-75 data-[hovering]:n-pointer-events-auto data-[scrolling]:n-opacity-100 data-[scrolling]:n-delay-0 data-[scrolling]:n-duration-75 data-[scrolling]:n-pointer-events-auto";
+
+const SCROLLBAR_TRACK_VERTICAL =
+  "n-m-1 n-w-1 flex n-justify-center n-rounded-md n-bg-divider-subtle";
+const SCROLLBAR_TRACK_HORIZONTAL =
+  "n-m-1 n-h-1 flex n-justify-center n-rounded-md n-bg-divider-subtle";
+
+const SCROLLBAR_THUMB_VERTICAL =
+  "scroll-component n-w-full n-rounded n-bg-scrollbar";
+const SCROLLBAR_THUMB_HORIZONTAL =
+  "scroll-component n-h-full n-rounded n-bg-scrollbar";
 
-export const ScrollArea = React.memo(function ScrollArea({ children }: Props) {
-  const [scrollElementRef, setScrollElementRef] =
-    React.useState<HTMLDivElement | null>(null);
+type ScrollAreaViewportProps = React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.Ref<HTMLDivElement>;
+};
+
+export function ScrollArea({
+  children,
+  className,
+  viewportClassName,
+  orientation = "vertical",
+  style,
+  viewportProps,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  viewportClassName?: string;
+  orientation?: "vertical" | "horizontal" | "both";
+  style?: React.CSSProperties;
+  viewportProps?: ScrollAreaViewportProps;
+}) {
+  const {
+    className: viewportPropsClassName,
+    ref: viewportRef,
+    ...viewportRest
+  } = viewportProps ?? {};
 
   return (
-    <div className="n-flex-1 n-min-h-0">
-      <RadixScrollArea.Root style={{ width: "100%", height: "100%" }}>
-        <RadixScrollArea.Viewport
-          className="n-w-full n-h-full [&>div]:n-block"
-          ref={React.useCallback(
-            (ref: HTMLDivElement | null) => setScrollElementRef(ref),
-            []
-          )}
+    <BScrollArea.Root className={cx("n-relative", className)} style={style}>
+      <BScrollArea.Viewport
+        ref={viewportRef}
+        className={cx(
+          "n-h-full n-overscroll-contain",
+          viewportClassName,
+          viewportPropsClassName
+        )}
+        {...viewportRest}
+      >
+        {children}
+      </BScrollArea.Viewport>
+      {(orientation === "vertical" || orientation === "both") && (
+        <BScrollArea.Scrollbar
+          className={cx(SCROLLBAR_STATE_CLASSES, SCROLLBAR_TRACK_VERTICAL)}
         >
-          {typeof children === "function"
-            ? scrollElementRef
-              ? children(scrollElementRef)
-              : null
-            : children}
-        </RadixScrollArea.Viewport>
-        <RadixScrollArea.Scrollbar
-          orientation="vertical"
-          className="n-scroll-component n-flex n-p-[3px] data-[orientation=vertical]:n-w-[10px]"
+          <BScrollArea.Thumb className={SCROLLBAR_THUMB_VERTICAL} />
+        </BScrollArea.Scrollbar>
+      )}
+      {(orientation === "horizontal" || orientation === "both") && (
+        <BScrollArea.Scrollbar
+          orientation="horizontal"
+          className={cx(SCROLLBAR_STATE_CLASSES, SCROLLBAR_TRACK_HORIZONTAL)}
         >
-          <RadixScrollArea.Thumb className="n-scroll-component n-flex-1 n-rounded-[10px] n-bg-scrollbar" />
-        </RadixScrollArea.Scrollbar>
-      </RadixScrollArea.Root>
-    </div>
+          <BScrollArea.Thumb className={SCROLLBAR_THUMB_HORIZONTAL} />
+        </BScrollArea.Scrollbar>
+      )}
+      {orientation === "both" && <BScrollArea.Corner />}
+    </BScrollArea.Root>
   );
-});
+}

package/src/components/ScrollableSidebar.tsx

@@ -4,7 +4,7 @@ import { ScrollArea } from "./ScrollArea";
 export function ScrollableSidebar({ children }: { children: React.ReactNode }) {
   return (
     <div className="n-relative n-flex n-flex-col n-flex-1 n-max-h-full">
-      <ScrollArea>{children}</ScrollArea>
+      <ScrollArea className="n-flex-1 n-min-h-0">{children}</ScrollArea>
     </div>
   );
 }