@noya-app/noya-designsystem 0.1.66 → 0.1.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.66",
+  "version": "0.1.68",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -20,12 +20,13 @@
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
+    "@base-ui-components/react": "1.0.0-beta.4",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@noya-app/noya-colorpicker": "0.1.29",
     "@noya-app/noya-utils": "0.1.8",
     "@noya-app/noya-geometry": "0.1.15",
-    "@noya-app/noya-icons": "0.1.13",
+    "@noya-app/noya-icons": "0.1.14",
     "@noya-app/noya-keymap": "0.1.4",
     "@noya-app/noya-tailwind-config": "0.1.7",
     "radix-ui": "1.4.2",
@@ -43,6 +44,7 @@
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/typography": "^0.5.19",
     "@types/react": "*",
     "@types/react-dom": "*",
     "@types/react-virtualized": "^9.21.30",

package/src/components/Anchor.tsx

@@ -0,0 +1,30 @@
+import React, { ComponentProps, ForwardedRef, forwardRef } from "react";
+import { cx } from "../utils/classNames";
+
+interface AnchorProps extends ComponentProps<"a"> {
+  active?: boolean;
+  as?: React.ElementType;
+}
+
+export const Anchor = forwardRef(function Anchor(
+  { className, active, children, as, ...props }: AnchorProps,
+  ref: ForwardedRef<HTMLAnchorElement>
+) {
+  const Component = as ?? "a";
+
+  return (
+    <Component
+      ref={ref}
+      className={cx(
+        "n-font-sans n-text-heading5 n-text-breadcrumb-text n-font-normal hover:n-text-breadcrumb-text-hover n-leading-[19px] n-rounded n-no-underline n-inline-flex n-items-center n-justify-center n-gap-2 hover:n-opacity-80 active:n-opacity-90 n-select-none",
+        active
+          ? "n-text-text !n-underline n-decoration-text-decorative-light"
+          : "n-text-text-muted",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+});

package/src/components/BaseToolbar.tsx

@@ -82,18 +82,21 @@ export function BaseToolbar({
           <Spacer.Horizontal size={10} />
         </>
       )}
-      <div
-        className={
-          "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none @2xl/toolbar:n-absolute n-inset-0"
-        }
-      >
-        <div className="n-flex n-items-center n-justify-center n-pointer-events-auto">
-          {children}
+      {children && (
+        <div
+          className={
+            "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none @2xl/toolbar:n-absolute n-inset-0"
+          }
+        >
+          <div className="n-flex n-items-center n-justify-center n-pointer-events-auto">
+            {children}
+          </div>
         </div>
-      </div>
+      )}
       <Spacer.Horizontal />
       <Spacer.Horizontal size={10} />
       <div className="n-flex n-gap-toolbar-separator">{right}</div>
+      <Spacer.Horizontal size={10} />
     </BaseToolbarContainer>
   );
 }

package/src/components/Chip.tsx

@@ -29,6 +29,15 @@ const SHADOW_STYLES = {
   default: "n-shadow-[0_0_0_1px_var(--n-chip-default-shadow)_inset]",
 } as const;
 
+const HOVER_SHADOW_STYLES = {
+  primary: "hover:n-shadow-[0_0_0_1px_var(--n-chip-primary-shadow-hover)_inset]",
+  secondary:
+    "hover:n-shadow-[0_0_0_1px_var(--n-chip-secondary-shadow-hover)_inset]",
+  info: "hover:n-shadow-[0_0_0_1px_var(--n-chip-default-shadow-hover)_inset]",
+  error: "hover:n-shadow-[0_0_0_1px_var(--n-chip-error-shadow-hover)_inset]",
+  default: "hover:n-shadow-[0_0_0_1px_var(--n-chip-default-shadow-hover)_inset]",
+} as const;
+
 const COLOR_STYLES = {
   primary: {
     text: "n-text-primary",
@@ -133,9 +142,14 @@ export const Chip = memo(
     const colors = COLOR_STYLES[colorScheme ?? "default"];
     const variantClasses =
       variant === "solid"
-        ? `${colors.text} ${colors.bg}`
+        ? cx(colors.text, colors.bg)
         : variant === "outlined"
-          ? `${colors.text} n-bg-transparent ${SHADOW_STYLES[colorScheme ?? "default"]} hover:${colors.subtle} hover:n-shadow-none`
+          ? cx(
+              colors.text,
+              "n-bg-transparent",
+              SHADOW_STYLES[colorScheme ?? "default"],
+              HOVER_SHADOW_STYLES[colorScheme ?? "default"]
+            )
           : "";
 
     const chipClasses = cx(

package/src/components/Collection.tsx

@@ -40,6 +40,11 @@ export interface CollectionProps<T, M extends string = string> {
   getHref?: (item: T) => string;
   getExpanded?: (item: T) => boolean | undefined;
   getPlaceholder?: (item: T) => string;
+  /**
+   * When starting a rename, select only the portion before
+   * the last '.' (keeping the extension unselected). Defaults to false.
+   */
+  renameSelectsBeforeDot?: boolean;
   /**
    * Whether directories should be expandable.
    * @default true
@@ -64,6 +69,11 @@ export interface CollectionProps<T, M extends string = string> {
   renderDetail?: (item: T, selected: boolean) => React.ReactNode;
   /** Optional right-side content renderer for each item */
   renderRight?: (item: T, selected: boolean) => React.ReactNode;
+  /**
+   * Number of lines to display for detail text when rendered below grid items.
+   * @default 1
+   */
+  detailLineClamp?: number;
   /** Callback when selection changes. If not provided, selection will be disabled. */
   onSelectionChange?: (
     selectedItemIds: string[],

package/src/components/Combobox.tsx

@@ -17,12 +17,13 @@ import { cx } from "../utils/classNames";
 import { ComboboxState, useComboboxState } from "../utils/combobox";
 import { ActivityIndicator } from "./ActivityIndicator";
 import { ComboboxMenu } from "./ComboboxMenu";
+import { renderIcon } from "./Icons";
 import { InputField, InputFieldSize } from "./InputField";
 import {
   MenuItem,
+  MenuItemIcon,
   ScoredMenuItem,
   SelectableMenuItem,
-  isMenuItemSectionHeader,
   isNonSelectableMenuItem,
   isSelectableMenuItem,
 } from "./internal/Menu";
@@ -34,6 +35,7 @@ export type BaseComboboxProps<T extends string> = {
   loading?: boolean;
   placeholder?: string;
   items: MenuItem<T>[];
+  icon?: MenuItemIcon;
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
   onDeleteWhenEmpty?: () => void;
   size?: InputFieldSize;
@@ -90,6 +92,7 @@ export const Combobox = memoGeneric(
       placeholder,
       items,
       size,
+      icon,
       style,
       className,
       label: labelProp,
@@ -431,15 +434,8 @@ export const Combobox = memoGeneric(
       handleBlur();
     }, [shouldBlur, handleBlur]);
 
-    const { sectionHeaderCount, menuItemsCount } = useMemo(
-      () => ({
-        sectionHeaderCount: filteredItems.filter((item) =>
-          isMenuItemSectionHeader(item)
-        ).length,
-        menuItemsCount: filteredItems.filter((item) =>
-          isSelectableMenuItem(item)
-        ).length,
-      }),
+    const { sectionHeaderCount, menuItemsCount, tallMenuItemsCount } = useMemo(
+      () => ListView.getMenuMetrics(filteredItems),
       [filteredItems]
     );
 
@@ -452,6 +448,7 @@ export const Combobox = memoGeneric(
         id={id}
         size={size}
         sideOffset={6}
+        start={icon ? renderIcon(icon) : undefined}
         end={
           <>
             {loading && (
@@ -475,15 +472,18 @@ export const Combobox = memoGeneric(
           </>
         }
         renderPopoverContent={({ width }) => {
-          const height = Math.min(
-            ListView.calculateHeight({
-              menuItemsCount,
-              sectionHeaderCount,
-            }),
-            ListView.rowHeight * 10.5
-          );
+          const hasTooltips = tallMenuItemsCount > 0;
+
+          const baseRowHeight = ListView.rowHeight; // 31
+
+          const computedHeight = ListView.calculateHeightWithTallRows({
+            menuItemsCount,
+            sectionHeaderCount,
+            tallMenuItemsCount,
+            maxBaseRows: 10.5,
+          });
 
-          const listSize = { width, height };
+          const adjustedListSize = { width, height: computedHeight };
 
           return (
             <div
@@ -493,17 +493,26 @@ export const Combobox = memoGeneric(
               )}
             >
               {filteredItems.length > 0 && !loading ? (
-                <ComboboxMenu
+                <ComboboxMenu<T>
                   ref={listRef}
                   items={filteredItems}
                   selectedIndex={selectedIndex}
                   onSelectItem={handleUpdateSelection}
                   onHoverIndex={handleIndexChange}
-                  listSize={listSize}
+                  listSize={adjustedListSize}
                   style={{
-                    flex: `0 0 ${height}px`,
+                    flex: `0 0 ${computedHeight}px`,
                   }}
                   indented={hasCheckedItems}
+                  // Use per-item height if any tooltips exist
+                  {...(hasTooltips
+                    ? {
+                        getRowHeightForItem: (item) =>
+                          isSelectableMenuItem(item) && item.tooltip
+                            ? ListView.tallRowHeight
+                            : baseRowHeight,
+                      }
+                    : { itemHeight: baseRowHeight })}
                 />
               ) : (
                 <div className="n-flex n-flex-col n-h-[50px] n-p-5 n-items-center n-justify-center">

package/src/components/ComboboxMenu.tsx

@@ -1,15 +1,16 @@
 import { Size } from "@noya-app/noya-geometry";
 import { CheckIcon } from "@noya-app/noya-icons";
 import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
-import React, { ForwardedRef } from "react";
+import React, { ForwardedRef, memo } from "react";
 import { cx } from "../utils/classNames";
 
 import { fuzzyTokenize } from "../utils/fuzzyScorer";
-import { renderIcon } from "./Icons";
+import { IconProp, renderIcon } from "./Icons";
 import {
   CHECKBOX_INDENT_WIDTH,
   CHECKBOX_RIGHT_INSET,
   CHECKBOX_WIDTH,
+  isSelectableMenuItem,
   KeyboardShortcut,
   ScoredMenuItem,
   styles,
@@ -17,6 +18,7 @@ import {
 import { IVirtualizedList } from "./IVirtualizedList";
 import { ListView } from "./ListView";
 import { Spacer } from "./Spacer";
+import { Small } from "./Text";
 
 interface ComboboxMenuProps<T extends string> {
   items: ScoredMenuItem<T>[];
@@ -28,6 +30,10 @@ interface ComboboxMenuProps<T extends string> {
   indented?: boolean;
   /** @default right */
   iconPosition?: "left" | "right";
+  /** Optional fixed row height for items (e.g., to accommodate descriptions) */
+  itemHeight?: number;
+  /** Optional per-item height resolver */
+  getRowHeightForItem?: (item: ScoredMenuItem<T>, index: number) => number;
 }
 
 export const ComboboxMenu = memoGeneric(
@@ -41,6 +47,8 @@ export const ComboboxMenu = memoGeneric(
       style,
       indented,
       iconPosition = "right",
+      itemHeight,
+      getRowHeightForItem,
     }: ComboboxMenuProps<T>,
     forwardedRef: ForwardedRef<IVirtualizedList>
   ) {
@@ -55,6 +63,10 @@ export const ComboboxMenu = memoGeneric(
         }}
         data={items}
         virtualized={listSize}
+        {...(itemHeight ? { itemHeight } : {})}
+        {...(getRowHeightForItem
+          ? { getItemHeightForItem: getRowHeightForItem as any }
+          : {})}
         pressEventName="onPointerDown"
         sectionHeaderVariant="label"
         style={style}
@@ -81,6 +93,10 @@ export const ComboboxMenu = memoGeneric(
             itemScore: item,
           });
 
+          const tooltip: React.ReactNode | undefined =
+            // Only selectable items can have tooltips in this menu
+            isSelectableMenuItem(item) ? item.tooltip : undefined;
+
           return (
             <ListView.Row
               key={item.value}
@@ -93,7 +109,7 @@ export const ComboboxMenu = memoGeneric(
                 }
               }}
             >
-              <div className="n-flex n-flex-1 n-min-w-0 n-items-center">
+              <div className="n-flex n-flex-1 n-min-w-0 n-items-start">
                 {indented && <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />}
                 {item.checked ? (
                   <div {...styles.itemIndicator}>
@@ -106,30 +122,41 @@ export const ComboboxMenu = memoGeneric(
                 ) : null}
                 {iconPosition === "left" && item.icon && (
                   <>
-                    {renderIcon(item.icon)}
+                    <MenuIcon icon={item.icon} />
                     <Spacer.Horizontal size={8} />
                   </>
                 )}
-                {tokens.map((token, j) => (
-                  <span
-                    key={`${item.value}-token-${j}`}
-                    className={cx(
-                      token.type === "match" ? "n-font-bold" : "n-font-normal",
-                      "n-whitespace-pre n-truncate"
-                    )}
-                  >
-                    {token.text}
-                  </span>
-                ))}
+                <div className="n-flex n-flex-col n-min-w-0 n-flex-1">
+                  <div className="n-min-w-0 n-truncate">
+                    {tokens.map((token, j) => (
+                      <span
+                        key={`${item.value}-token-${j}`}
+                        className={cx(
+                          token.type === "match"
+                            ? "n-font-bold"
+                            : "n-font-normal",
+                          "n-whitespace-pre n-truncate"
+                        )}
+                      >
+                        {token.text}
+                      </span>
+                    ))}
+                  </div>
+                  {tooltip && (
+                    <Small color="textSubtle" className="n-truncate">
+                      {tooltip}
+                    </Small>
+                  )}
+                </div>
               </div>
               {(item.shortcut || (item.icon && iconPosition === "right")) && (
-                <>
+                <div className="n-flex n-items-center n-min-w-0 n-ml-2">
                   {item.shortcut ? (
                     <KeyboardShortcut shortcut={item.shortcut} />
                   ) : (
-                    item.icon && renderIcon(item.icon)
+                    item.icon && <MenuIcon icon={item.icon} />
                   )}
-                </>
+                </div>
               )}
             </ListView.Row>
           );
@@ -138,3 +165,7 @@ export const ComboboxMenu = memoGeneric(
     );
   })
 );
+
+const MenuIcon = memo(function MenuIcon({ icon }: { icon: IconProp }) {
+  return <div className="n-relative n-top-[2px]">{renderIcon(icon)}</div>;
+});

package/src/components/Dialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Dialog as DialogPrimitive } from "radix-ui";
+import { Dialog as DialogPrimitive, VisuallyHidden } from "radix-ui";
 import React, {
   ComponentProps,
   ForwardedRef,
@@ -121,6 +121,7 @@ export const Dialog = forwardRef(function Dialog(
         onOpenAutoFocus={onOpenAutoFocus}
         style={style}
         className={className}
+        aria-describedby={typeof description === "string" ? description : ""}
         {...(closeOnInteractOutside === false && {
           onPointerDownOutside: (event) => event.preventDefault(),
           onInteractOutside: (event) => event.preventDefault(),
@@ -145,6 +146,11 @@ export const Dialog = forwardRef(function Dialog(
             <Spacer.Vertical size={description ? 10 : 20} />
           </>
         )}
+        {!title && (
+          <VisuallyHidden.Root>
+            <StyledTitle>Dialog</StyledTitle>
+          </VisuallyHidden.Root>
+        )}
         {description && (
           <>
             <StyledDescription>{description}</StyledDescription>

package/src/components/EditableText.tsx

@@ -138,20 +138,24 @@ export const EditableText = memo(
 
     const preview = children({
       children: displayValue,
-      onClick: () => setFocused(true),
+      onClick: () => {
+        if (readOnly) return;
+        setFocused(true);
+      },
       ref: previewRef,
       tabIndex,
       onKeyDown: (e: React.KeyboardEvent) => {
+        if (readOnly) return;
         if (e.key === "Enter" || e.key === " ") {
           setFocused(true);
         }
       },
       style: textStyle,
-      className: textClassName,
+      className: cx(focused && "n-invisible", textClassName),
     });
 
     const input = (
-      <div className="n-flex n-absolute n-inset-0 -mx-1.5 -n-my-1">
+      <div className="n-flex n-absolute n-inset-0 -n-mx-1.5 -n-my-1">
         <InputField.Root onFocusChange={setFocused}>
           <InputField.Input
             ref={inputRef}

package/src/components/Grid.tsx

@@ -85,6 +85,7 @@ export const Grid = memoGeneric(
       renderAction,
       renderDetail,
       renderRight,
+      detailLineClamp,
       onSelectionChange,
       selectedIds = emptyArray,
       //   itemRoleDescription = "clickable item",
@@ -162,6 +163,7 @@ export const Grid = memoGeneric(
         scrollable={items.length > 0 && scrollable}
         contentClassName={cx(items.length === 0 && "n-flex n-flex-1")}
         gap={gap}
+        descriptionLineClamp={detailLineClamp}
         className={cx(
           isDropTargetActive && "n-bg-selected-list-item-background",
           className

package/src/components/GridView.tsx

@@ -16,6 +16,10 @@ import React, {
 import { useLinkComponent } from "../contexts/LinkComponentContext";
 import { useHover } from "../hooks/useHover";
 import { cx, mergeConflictingClassNames } from "../utils/classNames";
+import {
+  DETAIL_LINE_CLAMP_CLASSES,
+  normalizeDetailLineClamp,
+} from "../utils/detailLineClamp";
 import withSeparatorElements from "../utils/withSeparatorElements";
 import { ActivityIndicator } from "./ActivityIndicator";
 import { ContextMenu } from "./ContextMenu";
@@ -47,14 +51,21 @@ const ItemTitle = ({
 const ItemDescription = ({
   showBackground,
   children,
+  lineClamp,
 }: {
   showBackground?: boolean;
   children?: React.ReactNode;
+  lineClamp?: number;
 }) => {
+  const normalizedLineClamp = normalizeDetailLineClamp(lineClamp) ?? 1;
+
+  const clampClassName = DETAIL_LINE_CLAMP_CLASSES[normalizedLineClamp];
+
   return (
     <span
       className={cx(
-        "n-font-sans n-text-sm n-text-text-muted n-select-none n-truncate",
+        "n-font-sans n-text-sm n-text-text-muted n-select-none",
+        clampClassName,
         showBackground &&
           "n-bg-sidebar-background n-n-border n-border-divider-subtle n-rounded-[2px] n-backdrop-blur-[4px] n-p-[2px_4px]"
       )}
@@ -139,8 +150,13 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     onHoverChange,
   });
 
-  const { textPosition, bordered, disabled, alwaysShowSubtitles } =
-    useContext(GridViewContext);
+  const {
+    textPosition,
+    bordered,
+    disabled,
+    alwaysShowSubtitles,
+    descriptionLineClamp,
+  } = useContext(GridViewContext);
 
   const handleClick = useCallback(
     (event: React.MouseEvent) => {
@@ -215,16 +231,25 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
           {(alwaysShowSubtitles || subtitle) && (
             <>
               <Spacer.Vertical size={2} />
-              <ItemDescription>{subtitle || " "}</ItemDescription>
+              <ItemDescription lineClamp={descriptionLineClamp}>
+                {subtitle || " "}
+              </ItemDescription>
             </>
           )}
         </>
       )}
       {textPosition === "overlay" && hovered && (title || subtitle) && (
-        <div className="n-absolute n-inset-0 n-flex n-flex-col n-justify-end n-items-start n-p-1 n-pointer-events-none n-truncate n-gap-0.5">
+        <div
+          className={cx(
+            "n-absolute n-inset-0 n-flex n-flex-col n-justify-end n-items-start n-p-1 n-pointer-events-none n-gap-0.5",
+            descriptionLineClamp === 1 && "n-truncate"
+          )}
+        >
           {title && <ItemTitle showBackground>{title}</ItemTitle>}
           {subtitle && (
-            <ItemDescription showBackground>{subtitle}</ItemDescription>
+            <ItemDescription showBackground lineClamp={descriptionLineClamp}>
+              {subtitle}
+            </ItemDescription>
           )}
         </div>
       )}
@@ -259,7 +284,9 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
         content={
           <div className="n-flex n-flex-col gap-0.5">
             <ItemTitle>{title}</ItemTitle>
-            <ItemDescription>{subtitle}</ItemDescription>
+            <ItemDescription lineClamp={descriptionLineClamp}>
+              {subtitle}
+            </ItemDescription>
           </div>
         }
       >
@@ -278,6 +305,7 @@ type GridViewContextValue = {
   disabled: boolean;
   gap: number;
   alwaysShowSubtitles: boolean;
+  descriptionLineClamp: number;
 };
 
 const GridViewContext = createContext<GridViewContextValue>({
@@ -287,6 +315,7 @@ const GridViewContext = createContext<GridViewContextValue>({
   disabled: false,
   gap: 0,
   alwaysShowSubtitles: false,
+  descriptionLineClamp: 1,
 });
 
 interface GridViewRootProps extends Partial<GridViewContextValue> {
@@ -302,6 +331,7 @@ interface GridViewRootProps extends Partial<GridViewContextValue> {
   renderEmptyState?: () => ReactNode;
   contentClassName?: string;
   alwaysShowSubtitles?: boolean;
+  descriptionLineClamp?: number;
 }
 
 const GridViewRoot = forwardRef(function GridViewRoot(
@@ -317,6 +347,7 @@ const GridViewRoot = forwardRef(function GridViewRoot(
     className,
     contentClassName,
     alwaysShowSubtitles = false,
+    descriptionLineClamp = 1,
     ...props
   }: GridViewRootProps,
   forwardedRef: ForwardedRef<HTMLDivElement>
@@ -331,6 +362,9 @@ const GridViewRoot = forwardRef(function GridViewRoot(
     [onClick]
   );
 
+  const normalizedDescriptionLineClamp =
+    normalizeDetailLineClamp(descriptionLineClamp) ?? 1;
+
   const contextValue = useMemo(
     (): GridViewContextValue => ({
       minColumnWidth,
@@ -339,13 +373,22 @@ const GridViewRoot = forwardRef(function GridViewRoot(
       disabled,
       gap,
       alwaysShowSubtitles,
+      descriptionLineClamp: normalizedDescriptionLineClamp,
     }),
-    [bordered, disabled, gap, minColumnWidth, textPosition, alwaysShowSubtitles]
+    [
+      bordered,
+      disabled,
+      gap,
+      minColumnWidth,
+      textPosition,
+      alwaysShowSubtitles,
+      normalizedDescriptionLineClamp,
+    ]
   );
 
   const mergedClassName = useMemo(() => {
     const baseClassName = cx(
-      "n-flex n-flex-col n--mx-3",
+      "n-flex n-flex-col -n-mx-3",
       scrollable ? "n-basis-0 n-min-h-0" : "n-flex-none",
       className
     );