@noya-app/noya-designsystem 0.1.63 → 0.1.65

package/src/components/Toolbar.tsx

@@ -1,5 +1,12 @@
+"use client";
+
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
-import React, { ComponentProps, ReactNode } from "react";
+import React, {
+  ComponentProps,
+  createContext,
+  ReactNode,
+  useContext,
+} from "react";
 
 import { memoGeneric } from "@noya-app/react-utils";
 import { BaseToolbar } from "./BaseToolbar";
@@ -17,10 +24,15 @@ import {
 } from "./internal/Menu";
 import { Popover } from "./Popover";
 import { Spacer } from "./Spacer";
+import { ToolbarDrawer } from "./ToolbarDrawer";
 import { Tooltip } from "./Tooltip";
 
 const SIDE_OFFSET = 6;
 
+export const ToolbarMenuContext = createContext<{
+  dividerOverflow?: number;
+}>({});
+
 export const ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown<
   T extends string,
 >({
@@ -63,7 +75,7 @@ export const ToolbarShortcut = ({
   label?: ReactNode;
 }) => {
   return (
-    <div className="flex items-center">
+    <div className="n-flex n-items-center">
       {label}
       <Spacer.Horizontal size={6} />
       <KeyboardShortcut shortcut={shortcut} />
@@ -137,19 +149,23 @@ export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
   as,
   activeValue,
   tooltipSide,
+  displayFilter,
 }: {
   item: SelectableMenuItem<T>;
   onSelectMenuItem?: (value: T) => void;
   as?: ComponentProps<typeof Button>["as"];
   activeValue?: T;
   tooltipSide?: ComponentProps<typeof Tooltip>["side"];
+  displayFilter?: DisplayFilter;
 }) {
+  const isActive = item.checked || activeValue === item.value;
+
   const content = (
     <Button
       as={as}
       disabled={item.disabled}
-      active={item.checked || activeValue === item.value}
-      icon={item.icon}
+      active={isActive}
+      icon={displayFilter === "textOnly" ? undefined : item.icon}
       {...(as === "a" && { href: item.value })}
       onClick={() => {
         if (onSelectMenuItem && item.value) {
@@ -157,12 +173,18 @@ export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
         }
       }}
     >
-      {item.title}
+      {displayFilter === "iconOnly" ? undefined : item.title}
     </Button>
   );
 
-  return item.tooltip ? (
-    <Tooltip sideOffset={SIDE_OFFSET} content={item.tooltip} side={tooltipSide}>
+  const tooltip =
+    item.tooltip ??
+    (displayFilter === "iconOnly" && item.title ? item.title : undefined);
+
+  return item.drawer && isActive ? (
+    <ToolbarDrawer trigger={content}>{item.drawer}</ToolbarDrawer>
+  ) : tooltip ? (
+    <Tooltip sideOffset={SIDE_OFFSET} content={tooltip} side={tooltipSide}>
       {content}
     </Tooltip>
   ) : (
@@ -179,6 +201,8 @@ export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
   activeValue,
   tooltipSide,
   portalContainer,
+  displayFilter,
+  dividerOverflow: dividerOverflowProp,
 }: {
   item: MenuItem<T>;
   onSelectMenuItem?: (value: T) => void;
@@ -186,14 +210,24 @@ export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
   activeValue?: T;
   tooltipSide?: ComponentProps<typeof Tooltip>["side"];
   portalContainer?: HTMLElement | null;
+  displayFilter?: DisplayFilter;
+  dividerOverflow?: number;
 }) {
+  const { dividerOverflow: contextDividerOverflow } =
+    useContext(ToolbarMenuContext);
+
+  const dividerOverflow = dividerOverflowProp ?? contextDividerOverflow ?? 4;
+
   if (item.type === "sectionHeader") return null;
+
   if (item.type === "separator") {
-    return <DividerVertical overflow={4} />;
+    return <DividerVertical overflow={dividerOverflow} />;
   }
+
   if (item.type === "popover") {
     return <ToolbarMenuPopover item={item} portalContainer={portalContainer} />;
   }
+
   if (isSelectableMenuItem(item)) {
     return (
       <ToolbarMenuButton
@@ -202,6 +236,7 @@ export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
         as={buttonAs}
         activeValue={activeValue}
         tooltipSide={tooltipSide}
+        displayFilter={displayFilter}
       />
     );
   }
@@ -211,6 +246,8 @@ export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
   );
 });
 
+type DisplayFilter = "iconOnly" | "iconAndText" | "textOnly";
+
 export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
   items,
   onSelectMenuItem,
@@ -218,6 +255,8 @@ export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
   activeValue,
   tooltipSide,
   portalContainer,
+  displayFilter = "iconAndText",
+  dividerOverflow,
 }: {
   items: MenuItem<T>[];
   onSelectMenuItem?: (value: T) => void;
@@ -225,6 +264,8 @@ export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
   activeValue?: T;
   tooltipSide?: ComponentProps<typeof Tooltip>["side"];
   portalContainer?: HTMLElement | null;
+  displayFilter?: DisplayFilter;
+  dividerOverflow?: number;
 }) {
   return (
     <>
@@ -238,6 +279,8 @@ export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
             activeValue={activeValue}
             tooltipSide={tooltipSide}
             portalContainer={portalContainer}
+            displayFilter={displayFilter}
+            dividerOverflow={dividerOverflow}
           />
         );
       })}
@@ -253,6 +296,7 @@ export interface ToolbarProps<T extends string = string> {
   onSelectMenuItem?: (value: T) => void;
   /** Whether to bind keyboard shortcuts for menu items. @default true */
   shouldBindKeyboardShortcuts?: boolean;
+  dividerOverflow?: number;
 }
 
 export function Toolbar<T extends string = string>({
@@ -262,6 +306,7 @@ export function Toolbar<T extends string = string>({
   rightMenuItems = [],
   onSelectMenuItem,
   shouldBindKeyboardShortcuts = true,
+  dividerOverflow,
 }: ToolbarProps<T>) {
   // Register keyboard shortcuts for all menu items
   const allMenuItems = React.useMemo(
@@ -284,20 +329,22 @@ export function Toolbar<T extends string = string>({
       logo={logo}
       left={
         leftMenuItems.length > 0 && (
-          <div className="flex gap-2">
+          <div className="n-flex n-gap-2">
             <ToolbarMenu
               items={leftMenuItems}
               onSelectMenuItem={onSelectMenuItem}
+              dividerOverflow={dividerOverflow}
             />
           </div>
         )
       }
       right={
         rightMenuItems.length > 0 && (
-          <div className="flex gap-2">
+          <div className="n-flex n-gap-2">
             <ToolbarMenu
               items={rightMenuItems}
               onSelectMenuItem={onSelectMenuItem}
+              dividerOverflow={dividerOverflow}
             />
           </div>
         )

package/src/components/ToolbarDrawer.tsx

@@ -0,0 +1,29 @@
+import React, { ForwardedRef, forwardRef, memo, ReactNode } from "react";
+
+type ToolbarDrawerProps = {
+  children: ReactNode;
+  trigger: ReactNode;
+  sideOffset?: number;
+};
+
+export const ToolbarDrawer = memo(
+  forwardRef(function ToolbarDrawer(
+    { children, trigger, sideOffset = 8 }: ToolbarDrawerProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) {
+    return (
+      <div className="n-relative" ref={ref}>
+        <div
+          className="n-absolute n-bottom-full n-left-1/2 -n-translate-x-1/2 n-rounded-t-lg n-border n-border-toolbar-drawer-border n-border-b-transparent n-bg-toolbar-drawer-background -n-z-10"
+          style={{
+            marginBottom: `${sideOffset}px`,
+            boxShadow: "0px -2px 12px 0px var(--n-toolbar-drawer-shadow)",
+          }}
+        >
+          {children}
+        </div>
+        {trigger}
+      </div>
+    );
+  })
+);

package/src/components/Tooltip.tsx

@@ -1,4 +1,4 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
 import * as React from "react";
 import { ComponentProps } from "react";
 import {
@@ -35,7 +35,7 @@ export const Tooltip = React.memo(function Tooltip({
             align="center"
             sideOffset={sideOffset}
             collisionPadding={8}
-            className={`${textStyles.small} text-text rounded-sm p-2 bg-popover-background shadow-tooltip z-menu`}
+            className={`${textStyles.small} n-text-text n-rounded-sm n-p-2 n-bg-popover-background n-shadow-tooltip n-z-menu`}
           >
             {content}
           </TooltipPrimitive.Content>

package/src/components/TreeView.tsx

@@ -1,9 +1,16 @@
-import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
+"use client";
+
+import {
+  forwardRefGeneric,
+  memoGeneric,
+  useStableCallback,
+} from "@noya-app/react-utils";
 import React, { ForwardedRef, ReactNode, useCallback, useContext } from "react";
 import { IconButton } from "./IconButton";
 import { IconName, renderIcon } from "./Icons";
 import { ListView } from "./ListView";
 import { Spacer } from "./Spacer";
+import { ListViewContext } from "./listView/ListViewContexts";
 
 /* ----------------------------------------------------------------------------
  * Row
@@ -31,14 +38,16 @@ const TreeRow = forwardRefGeneric(function TreeRow<MenuItemType extends string>(
   }: TreeViewRowProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLLIElement>
 ) {
-  const { expandable } = useContext(ListView.RowContext);
+  const { expandable } = useContext(ListViewContext);
+
+  const stableOnClickChevron = useStableCallback(onClickChevron);
 
   const handleClickChevron = useCallback(
     (event: React.MouseEvent) => {
       event.stopPropagation();
-      onClickChevron?.({ altKey: event.altKey });
+      stableOnClickChevron?.({ altKey: event.altKey });
     },
-    [onClickChevron]
+    [stableOnClickChevron]
   );
 
   return (

package/src/components/UserPointer.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { memo, useMemo } from "react";
 import { cx } from "../utils/classNames";
 import { colorFromString } from "../utils/colorFromString";
@@ -25,8 +27,8 @@ const UserPointerContainer = memo(function UserPointerContainer({
         ...style,
       }}
       className={cx(
-        "pointer-events-none",
-        visible ? "opacity-100" : "opacity-0",
+        "n-pointer-events-none",
+        visible ? "n-opacity-100" : "n-opacity-0",
         className
       )}
     >
@@ -49,7 +51,7 @@ const UserNameTag = memo(function UserNameTag({
   return (
     <span
       className={cx(
-        "relative inline-block rounded-full text-xs font-medium leading-none text-white shadow-sm px-2 py-1.5 border border-background",
+        "n-relative n-inline-block n-rounded-full n-text-xs n-font-medium n-leading-none n-text-white n-shadow-sm n-px-2 n-py-1.5 n-border n-border-background",
         className
       )}
       style={{
@@ -151,7 +153,7 @@ export const UserPointer = memo(function UserPointer({
       style={style}
     >
       {name && (
-        <div className="relative">
+        <div className="n-relative">
           <UserPointerIcon
             size={POINTER_SIZE}
             color={userBackgroundColor}

package/src/components/ai-assistant/AIAssistantLayout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { IconButton } from "../IconButton";
 
 import { cssVars } from "../../theme";
@@ -12,7 +14,7 @@ import { TextAreaRow } from "../TextArea";
 
 export const AIAssistantLoadingIndicator = () => {
   return (
-    <div className="flex gap-2">
+    <div className="n-flex n-gap-2">
       <Avatar
         name="Assistant"
         size={INPUT_HEIGHT}
@@ -20,7 +22,7 @@ export const AIAssistantLoadingIndicator = () => {
       >
         <Logo style={{ width: 15 }} fill={cssVars.colors.primary} />
       </Avatar>
-      <div className="animate-pulse">▋</div>
+      <div className="n-animate-pulse">▋</div>
     </div>
   );
 };
@@ -43,7 +45,7 @@ export const AIAssistantInput = forwardRef<
     value={value}
     onChange={onChange}
     ref={ref}
-    textAreaClassName="py-2 pl-3 !pr-9 w-full mt-3"
+    textAreaClassName="n-py-2 n-pl-3 !n-pr-9 n-w-full n-mt-3"
     placeholder="Tell me what you'd like to do..."
     onKeyDown={onKeyDown}
     disabled={disabled}
@@ -52,7 +54,7 @@ export const AIAssistantInput = forwardRef<
         iconName="ArrowUpIcon"
         onClick={onSubmitClick}
         disabled={!value.trim() || disabled}
-        className="h-8 w-8 z-20 rounded-full"
+        className="n-h-8 n-w-8 n-z-20 n-rounded-full"
         size={20}
         color={cssVars.colors.text}
         style={{
@@ -88,14 +90,14 @@ export const AIAssistantLayout = forwardRef<
     ref
   ) => {
     return (
-      <div className={cx("flex flex-col flex-1", className)} style={style}>
-        <div className="flex-1 min-h-0 overflow-auto" ref={ref}>
-          <div className="flex flex-col gap-2 pb-4 pt-1">
+      <div className={cx("n-flex n-flex-col n-flex-1", className)} style={style}>
+        <div className="n-flex-1 n-min-h-0 n-overflow-auto" ref={ref}>
+          <div className="n-flex n-flex-col n-gap-2 n-pb-4 n-pt-1">
             {renderMessages()}
             {isLoading ? renderLoadingIndicator?.() : null}
           </div>
         </div>
-        <div className="border-t border-divider pt-1 px-1">{renderInput()}</div>
+        <div className="n-border-t n-border-divider n-pt-1 n-px-1">{renderInput()}</div>
       </div>
     );
   }

package/src/components/blocks/ImageBlockComponent.tsx

@@ -0,0 +1,162 @@
+import { ActivityIndicator, cx } from "@noya-app/noya-designsystem";
+import { ImageIcon } from "@noya-app/noya-icons";
+import React, { ForwardedRef, forwardRef } from "react";
+
+type ImageState = "loading" | "error" | "loaded";
+
+const placeholderClassName =
+  "n-cursor-pointer n-flex n-items-center n-justify-center n-p-4 n-border n-border-dashed n-border-indigo-100 n-rounded-md n-bg-indigo-50";
+
+export function decodeImageSrc(src?: string): string | undefined {
+  if (!src) return undefined;
+
+  try {
+    return decodeURIComponent(src);
+  } catch (error) {
+    return undefined;
+  }
+}
+
+const ImageLoadingComponent = forwardRef(function ImageLoadingComponent(
+  props: React.HTMLAttributes<HTMLSpanElement>,
+  forwardedRef: ForwardedRef<HTMLSpanElement>
+) {
+  return (
+    <span
+      {...props}
+      ref={forwardedRef}
+      contentEditable={false}
+      className={cx(placeholderClassName, props.className)}
+    >
+      <ActivityIndicator />
+    </span>
+  );
+});
+
+const ImagePlaceholderComponent = forwardRef(function ImagePlaceholderComponent(
+  props: React.HTMLAttributes<HTMLSpanElement>,
+  forwardedRef: ForwardedRef<HTMLSpanElement>
+) {
+  return (
+    <span
+      {...props}
+      ref={forwardedRef}
+      contentEditable={false}
+      className={cx(placeholderClassName, props.className)}
+    >
+      <ImageIcon className="n-w-[30px] n-h-[30px] n-text-indigo-900 n-pointer-events-none" />
+    </span>
+  );
+});
+
+const ImageErrorComponent = forwardRef(function ImageErrorComponent(
+  { src, ...props }: React.HTMLAttributes<HTMLSpanElement> & { src?: string },
+  forwardedRef: ForwardedRef<HTMLSpanElement>
+) {
+  return (
+    <span
+      {...props}
+      ref={forwardedRef}
+      contentEditable={false}
+      className={cx(placeholderClassName, props.className)}
+    >
+      <span className="n-text-cm-error n-font-mono n-text-sm">
+        Invalid image URL: {src ?? "No URL provided"}
+      </span>
+    </span>
+  );
+});
+
+const ImageDisplayComponent = forwardRef(function ImageDisplayComponent(
+  {
+    src,
+    alt,
+    title,
+    ...props
+  }: React.DetailedHTMLProps<
+    React.ImgHTMLAttributes<HTMLImageElement>,
+    HTMLImageElement
+  >,
+  forwardedRef: ForwardedRef<HTMLImageElement>
+) {
+  return (
+    <img
+      {...props}
+      ref={forwardedRef}
+      src={src}
+      alt={alt ?? ""}
+      title={title ?? undefined}
+      // use styles over classname for rendering to static HTML
+      style={{
+        maxWidth: "100%",
+        maxHeight: "720px",
+        height: "auto",
+        objectFit: "contain",
+        margin: "32px auto",
+        ...props.style,
+      }}
+      className={cx("n-cursor-pointer", props.className)}
+    />
+  );
+});
+
+const ImageBlockComponent_ = forwardRef(function ImageBlockComponent(
+  {
+    src,
+    alt,
+    title,
+    imageState,
+    ...props
+  }: React.DetailedHTMLProps<
+    React.ImgHTMLAttributes<HTMLImageElement>,
+    HTMLImageElement
+  > & { imageState?: ImageState },
+  forwardedRef: ForwardedRef<HTMLImageElement>
+) {
+  if (imageState === "loading") {
+    return (
+      <ImageLoadingComponent
+        {...props}
+        ref={forwardedRef as ForwardedRef<HTMLSpanElement>}
+      />
+    );
+  }
+
+  if (!src) {
+    return (
+      <ImagePlaceholderComponent
+        {...props}
+        ref={forwardedRef as ForwardedRef<HTMLSpanElement>}
+      />
+    );
+  }
+
+  const decodedSrc = decodeImageSrc(src.toString());
+
+  if (!decodedSrc || imageState === "error") {
+    return (
+      <ImageErrorComponent
+        {...props}
+        src={src.toString()}
+        ref={forwardedRef as ForwardedRef<HTMLSpanElement>}
+      />
+    );
+  }
+
+  return (
+    <ImageDisplayComponent
+      {...props}
+      ref={forwardedRef}
+      src={src}
+      alt={alt}
+      title={title}
+    />
+  );
+});
+
+export const ImageBlockComponent = Object.assign(ImageBlockComponent_, {
+  Loading: ImageLoadingComponent,
+  Placeholder: ImagePlaceholderComponent,
+  Error: ImageErrorComponent,
+  Display: ImageDisplayComponent,
+});

package/src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx

@@ -1,7 +1,9 @@
+"use client";
+
 import React from "react";
 import { INPUT_HEIGHT } from "../../theme";
 import { Avatar, AvatarProps, AvatarStack } from "../Avatar";
-import Button from "../Button";
+import { Button } from "../Button";
 import { Small } from "../Text";
 import { Tooltip } from "../Tooltip";
 
@@ -9,7 +11,7 @@ export const UserAvatar = ({ userId, name, image }: AvatarProps) => (
   <Tooltip
     key={userId}
     content={
-      <div className="flex flex-col">
+      <div className="n-flex n-flex-col">
         <Small>{name}</Small>
       </div>
     }
@@ -30,8 +32,8 @@ export const ConnectedUsersMenuLayout = ({
   isAssistantOpen,
 }: ConnectedUsersMenuLayoutProps) => {
   return (
-    <div className="flex gap-1.5">
-      <AvatarStack size={INPUT_HEIGHT} className="mr-1">
+    <div className="n-flex n-gap-1.5">
+      <AvatarStack size={INPUT_HEIGHT} className="n-mr-1">
         {renderUsers()}
       </AvatarStack>
       {launchAIAssistant && (

package/src/components/file-explorer/FileExplorerLayout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   ActivityIndicator,
   Banner,
@@ -7,7 +9,7 @@ import {
   SectionProps,
 } from "@noya-app/noya-designsystem";
 import { forwardRefGeneric } from "@noya-app/react-utils";
-import React from "react";
+import React, { CSSProperties } from "react";
 import { cx } from "../../utils/classNames";
 import {
   Collection,
@@ -21,7 +23,7 @@ export const FileExplorerLayout = ({
   className,
   ...props
 }: SectionProps) => (
-  <Section className={cx(className, "px-3 flex-1")} {...props}>
+  <Section className={cx(className, "n-px-3 n-flex-1")} {...props}>
     {children}
   </Section>
 );
@@ -37,7 +39,7 @@ export const FileExplorerUploadButton = ({
   isUploading?: boolean;
   children?: React.ReactNode;
 }) => (
-  <div className="flex items-center gap-2">
+  <div className="n-flex n-items-center n-gap-2">
     {showUploadButton && (
       <Button
         icon={isUploading ? <ActivityIndicator size={15} /> : "UploadIcon"}
@@ -58,7 +60,9 @@ export const FileExplorerCollection = forwardRefGeneric(
     { ...props }: CollectionProps<T, M>,
     ref: React.ForwardedRef<CollectionRef>
   ) {
-    return <Collection<T, M> ref={ref} className="-mx-3 flex-1" {...props} />;
+    return (
+      <Collection<T, M> ref={ref} className="-n-mx-3 n-flex-1" {...props} />
+    );
   }
 );
 
@@ -66,22 +70,32 @@ export const FileExplorerDetail = ({
   selected,
   size,
   children,
+  className,
+  style,
 }: {
   selected: boolean;
   children: React.ReactNode;
   size?: CollectionItemSize;
+  className?: string;
+  style?: CSSProperties;
 }) => (
   <span
     className={cx(
-      size === "small" ? "text-list-small" : "text-sm",
-      selected ? "text-primary" : "text-text-muted"
+      size === "small" ? "n-text-list-small" : "n-text-sm",
+      selected ? "n-text-primary" : "n-text-text-muted",
+      className
     )}
+    style={style}
   >
     {children}
   </span>
 );
 
 export const FileExplorerEmptyState = ({
-  label = "No files",
+  children: label = "No files",
   ...props
-}: BannerProps) => <Banner label={label} className="mx-3" {...props} />;
+}: BannerProps) => (
+  <Banner className="n-mx-3" {...props}>
+    {label}
+  </Banner>
+);

package/src/components/internal/Checkmark.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+export function Checkmark(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      width={15}
+      height={15}
+      {...props}
+    >
+      <path
+        className="n-scale-90 n-origin-center"
+        d="M3 8L6 11L12 5"
+        strokeWidth="1.1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        stroke="currentColor"
+      />
+    </svg>
+  );
+}