@noya-app/noya-designsystem 0.1.50 → 0.1.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.50",
+  "version": "0.1.51",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -27,6 +27,7 @@
     "@noya-app/noya-geometry": "0.1.10",
     "@noya-app/noya-icons": "0.1.7",
     "@noya-app/noya-keymap": "0.1.3",
+    "@noya-app/noya-tailwind-config": "0.1.2",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.1",
     "@radix-ui/react-compose-refs": "^1.0.0",
@@ -47,17 +48,16 @@
     "kiwi.js": "^1.1.3",
     "react-resizable-panels": "2.0.22",
     "react-window": "^1.8.8",
-    "vscode-fuzzy-scorer": "^0.0.4"
+    "vscode-fuzzy-scorer": "^0.0.4",
+    "react-virtualized": "9.22.6"
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@types/react-virtualized": "^9.21.21",
+    "@types/react-virtualized": "^9.21.30",
     "@types/react-window": "^1.8.5",
-    "esbuild-plugin-react-virtualized": "1.0.4",
     "esbuild-plugin-tailwindcss": "^1.2.1",
-    "react-virtualized": "9.22.5",
     "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.14"
   },

package/src/components/ActionMenu.tsx

@@ -12,6 +12,7 @@ type ActionMenuProps<TMenu extends string> = {
   onOpenChange: (open: boolean) => void;
   className?: string;
   style?: React.CSSProperties;
+  variant?: "normal" | "bare";
 };
 
 export const ActionMenu = memoGeneric(function ActionMenu<
@@ -23,16 +24,17 @@ export const ActionMenu = memoGeneric(function ActionMenu<
   onOpenChange,
   className,
   style,
+  variant = "normal",
 }: ActionMenuProps<TMenu>) {
   const internalStyle = useMemo(() => {
     return {
       backgroundColor: selected
         ? cssVars.colors.primaryPastel
         : cssVars.colors.inputBackground,
-      padding: "4px",
+      padding: variant === "bare" ? 0 : 4,
       ...style,
     };
-  }, [selected, style]);
+  }, [selected, style, variant]);
 
   return (
     <DropdownMenu

package/src/components/Collection.tsx

@@ -1,6 +1,6 @@
+import { forwardRefGeneric } from "@noya-app/react-utils";
 import React from "react";
-import { forwardRefGeneric } from "../../../noya-react-utils/src/utils/reactGenerics";
-import { Grid, GridViewSize } from "../components/Grid";
+import { Grid } from "../components/Grid";
 import { MenuItem } from "../components/internal/Menu";
 import {
   ListView,
@@ -20,6 +20,7 @@ export type CollectionRef = {
 export type CollectionThumbnailProps<T> = {
   item: T;
   selected: boolean;
+  size?: CollectionItemSize;
 };
 
 export type CollectionRenderActionProps<T> = {
@@ -51,6 +52,7 @@ export interface CollectionProps<T, M extends string = string> {
   renderThumbnail?: ({
     item,
     selected,
+    size,
   }: CollectionThumbnailProps<T>) => React.ReactNode;
   renderAction?:
     | "menu"
@@ -66,7 +68,7 @@ export interface CollectionProps<T, M extends string = string> {
   /** Position of the detail content. Defaults to 'end'. */
   detailPosition?: "end" | "below";
   /** Size of the list items. Defaults to 'medium'. */
-  size?: GridViewSize;
+  size?: CollectionItemSize;
   /** Size of the thumbnail. Defaults to 'auto', which will be based on the size prop. */
   thumbnailSize?: CollectionThumbnailSize;
   /** For testing: Override the hover state with a specific item ID */
@@ -105,3 +107,10 @@ export const Collection = forwardRefGeneric(function Collection<
     <List ref={ref} {...rest} />
   );
 });
+export type CollectionItemSize =
+  | "xxs"
+  | "xs"
+  | "small"
+  | "medium"
+  | "large"
+  | "xl";

package/src/components/ComboboxMenu.tsx

@@ -25,6 +25,8 @@ interface ComboboxMenuProps<T extends string> {
   listSize: Size;
   style?: React.CSSProperties;
   indented?: boolean;
+  /** @default right */
+  iconPosition?: "left" | "right";
 }
 
 export const ComboboxMenu = memoGeneric(
@@ -37,6 +39,7 @@ export const ComboboxMenu = memoGeneric(
       listSize,
       style,
       indented,
+      iconPosition = "right",
     }: ComboboxMenuProps<T>,
     forwardedRef: ForwardedRef<IVirtualizedList>
   ) {
@@ -100,6 +103,12 @@ export const ComboboxMenu = memoGeneric(
                     size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET}
                   />
                 ) : null}
+                {iconPosition === "left" && item.icon && (
+                  <>
+                    {renderIcon(item.icon)}
+                    <Spacer.Horizontal size={8} />
+                  </>
+                )}
                 {tokens.map((token, j) => (
                   <span
                     key={`${item.value}-token-${j}`}
@@ -112,7 +121,7 @@ export const ComboboxMenu = memoGeneric(
                   </span>
                 ))}
               </div>
-              {(item.shortcut || item.icon) && (
+              {(item.shortcut || (item.icon && iconPosition === "right")) && (
                 <>
                   {item.shortcut ? (
                     <KeyboardShortcut shortcut={item.shortcut} />

package/src/components/Grid.tsx

@@ -1,23 +1,25 @@
-import { useFileDropTarget } from "@noya-app/react-utils";
-import React, { useImperativeHandle, useRef, useState } from "react";
 import {
   forwardRefGeneric,
   memoGeneric,
-} from "../../../noya-react-utils/src/utils/reactGenerics";
+  useFileDropTarget,
+} from "@noya-app/react-utils";
+import React, { useImperativeHandle, useRef, useState } from "react";
 import { cx } from "../utils/classNames";
 import { updateSelection } from "../utils/selection";
 import { ActionMenu } from "./ActionMenu";
-import { CollectionProps, CollectionRef } from "./Collection";
+import {
+  CollectionItemSize,
+  CollectionProps,
+  CollectionRef,
+} from "./Collection";
 import { EditableText } from "./EditableText";
 import { GridView } from "./GridView";
 import { ListView } from "./ListView";
 
-export type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
-
-export const getGridSize = (size: GridViewSize) => {
+export const getGridSize = (size: CollectionItemSize) => {
   // Define size ranges that allow items to grow/shrink within bounds
   const sizes: Record<
-    Exclude<GridViewSize, number>,
+    Exclude<CollectionItemSize, number>,
     {
       minColumnWidth: string;
       gap: number;
@@ -173,6 +175,7 @@ export const Grid = memoGeneric(
               const thumbnail = renderThumbnail?.({
                 item,
                 selected: isSelected,
+                size,
               });
               const onOpenChange = (open: boolean) => {
                 setDropdownOpenId(open ? id : undefined);

package/src/components/List.tsx

@@ -8,8 +8,11 @@ import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { updateSelection } from "../utils/selection";
 import { ActionMenu } from "./ActionMenu";
-import { CollectionProps, CollectionRef } from "./Collection";
-import { GridViewSize } from "./Grid";
+import {
+  CollectionItemSize,
+  CollectionProps,
+  CollectionRef,
+} from "./Collection";
 import { ListView, ListViewItemInfo } from "./ListView";
 import { TreeView } from "./TreeView";
 
@@ -149,6 +152,7 @@ export const List = memoGeneric(
           const thumbnail = renderThumbnail?.({
             item,
             selected: isSelected,
+            size,
           });
           const onOpenChange = (open: boolean) => {
             setDropdownOpenId(open ? id : undefined);
@@ -169,6 +173,7 @@ export const List = memoGeneric(
                     onSelect={(action) => handleMenuAction(action, item)}
                     selected={isSelected}
                     onOpenChange={onOpenChange}
+                    variant="bare"
                   />
                 ));
 
@@ -238,9 +243,10 @@ export const List = memoGeneric(
                 {thumbnail && (
                   <div
                     className={cx(
-                      "rounded overflow-hidden flex-none flex items-center justify-center",
+                      "overflow-hidden flex-none flex items-center justify-center",
                       thumbnailSize === "auto" && thumbnailSizeMap[size],
-                      isSelected && "text-primary"
+                      isSelected && "text-primary",
+                      size === "small" ? "rounded-sm" : "rounded"
                     )}
                     tabIndex={-1}
                   >
@@ -316,37 +322,37 @@ const DetailContainer = memo(function DetailContainer({
   );
 });
 
-const pyMap: Record<GridViewSize, string> = {
-  xxs: "py-1",
-  xs: "py-1",
-  small: "py-1",
+const pyMap: Record<CollectionItemSize, string> = {
+  xxs: "py-0.5",
+  xs: "py-0.5",
+  small: "py-0.5",
   medium: "py-1",
   large: "py-2",
   xl: "py-3",
 };
 
-const thumbnailSizeMap: Record<GridViewSize, string> = {
-  xxs: "w-4 h-4",
-  xs: "w-4 h-4",
-  small: "w-6 h-6",
+const thumbnailSizeMap: Record<CollectionItemSize, string> = {
+  xxs: "w-5 h-5",
+  xs: "w-5 h-5",
+  small: "w-5 h-5",
   medium: "w-8 h-8",
   large: "w-16 h-16",
   xl: "w-24 h-24",
 };
 
-const rowGapMap: Record<GridViewSize, string> = {
-  xxs: "gap-3",
-  xs: "gap-3",
-  small: "gap-3",
+const rowGapMap: Record<CollectionItemSize, string> = {
+  xxs: "gap-2",
+  xs: "gap-2",
+  small: "gap-2",
   medium: "gap-3",
   large: "gap-3",
   xl: "gap-4",
 };
 
-const fontStyleMap: Record<GridViewSize, string> = {
-  xxs: "font-medium",
-  xs: "font-medium",
-  small: "font-medium",
+const fontStyleMap: Record<CollectionItemSize, string> = {
+  xxs: "font-medium text-list-small",
+  xs: "font-medium text-list-small",
+  small: "font-medium text-list-small",
   medium: "font-medium",
   large: "font-medium",
   xl: "font-medium text-heading4 text-text",

package/src/components/MediaThumbnail.tsx

@@ -2,6 +2,7 @@ import { ImageIcon, SpeakerLoudIcon, VideoIcon } from "@noya-app/noya-icons";
 import React, { memo, useMemo } from "react";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
+import { CollectionItemSize } from "./Collection";
 import { IconName, Icons } from "./Icons";
 
 type ColorScheme = "primary" | "secondary" | "icon" | "warning";
@@ -29,6 +30,7 @@ type MediaThumbnailProps = {
    * If provided, use this icon instead of the default one for the asset type
    */
   iconName?: IconName;
+  size?: CollectionItemSize;
 };
 
 export const getThumbnailColors = (
@@ -67,11 +69,6 @@ export const getThumbnailColors = (
   }
 };
 
-const iconStyles = {
-  width: "max(15px, 20%)",
-  height: "max(15px, 20%)",
-};
-
 export const MediaThumbnail = memo(function MediaThumbnail({
   contentType: contentTypeProp,
   selected = false,
@@ -79,12 +76,20 @@ export const MediaThumbnail = memo(function MediaThumbnail({
   colorScheme = "icon",
   url,
   iconName = "FileIcon",
+  size = "medium",
 }: MediaThumbnailProps) {
   const { icon: iconColor, background: backgroundColor } = getThumbnailColors(
     colorScheme,
     selected
   );
   const contentType = getAssetType(contentTypeProp);
+  const iconStyles = useMemo(
+    () => ({
+      width: iconSizeMap[size],
+      height: iconSizeMap[size],
+    }),
+    [size]
+  );
 
   const content = useMemo(() => {
     switch (contentType) {
@@ -109,7 +114,7 @@ export const MediaThumbnail = memo(function MediaThumbnail({
         const Icon = Icons[iconName];
         return <Icon color={iconColor} style={iconStyles} />;
     }
-  }, [contentType, url, iconColor, iconName]);
+  }, [contentType, url, iconColor, iconStyles, iconName]);
 
   return (
     <div
@@ -123,3 +128,12 @@ export const MediaThumbnail = memo(function MediaThumbnail({
     </div>
   );
 });
+
+const iconSizeMap: Record<CollectionItemSize, number | string> = {
+  xxs: 12,
+  xs: 12,
+  small: 12,
+  medium: "max(15px, 20%)",
+  large: "max(15px, 20%)",
+  xl: "max(15px, 20%)",
+};

package/src/components/SearchCompletionMenu.tsx

@@ -119,21 +119,21 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
       handleKeyboardEvent(event.nativeEvent, getCurrentPlatform(navigator), {
         ArrowUp: () => {
-          const nextIndex = getNextIndex(
-            results,
-            index,
-            "previous",
-            (item) => item.disabled ?? false
-          );
+          const nextIndex = getNextIndex({
+            items: results,
+            currentIndex: index,
+            direction: "previous",
+            isDisabled: (item) => item.disabled ?? false,
+          });
           setIndex(nextIndex);
         },
         ArrowDown: () => {
-          const nextIndex = getNextIndex(
-            results,
-            index,
-            "next",
-            (item) => item.disabled ?? false
-          );
+          const nextIndex = getNextIndex({
+            items: results,
+            currentIndex: index,
+            direction: "next",
+            isDisabled: (item) => item.disabled ?? false,
+          });
           setIndex(nextIndex);
         },
         Tab: () => selectAndClose(results[index]!),

package/src/components/SegmentedControl.tsx

@@ -1,3 +1,4 @@
+import { memoGeneric } from "@noya-app/react-utils";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import React, {
   createContext,
@@ -7,7 +8,6 @@ import React, {
   useContext,
   useMemo,
 } from "react";
-import { memoGeneric } from "../../../noya-react-utils/src/utils/reactGenerics";
 import { useLabel } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
 import { renderIcon } from "./Icons";

package/src/components/Toolbar.tsx

@@ -2,8 +2,11 @@ import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import React from "react";
 
+import { memoGeneric } from "@noya-app/react-utils";
+import { cssVars } from "../theme";
 import { BaseToolbar } from "./BaseToolbar";
 import { Button } from "./Button";
+import { DividerVertical } from "./Divider";
 import { DropdownMenu } from "./DropdownMenu";
 import { renderIcon } from "./Icons";
 import {
@@ -76,7 +79,11 @@ export function Toolbar<T extends string = string>({
   );
 }
 
-export function ToolbarMenu<T extends string>({
+const activeButtonStyle = {
+  backgroundColor: cssVars.colors.primaryPastel,
+};
+
+export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
   items,
   onSelectMenuItem,
 }: {
@@ -86,14 +93,18 @@ export function ToolbarMenu<T extends string>({
   return (
     <>
       {items.map((item, i) => {
-        if (item.type === "separator") return null;
         if (item.type === "sectionHeader") return null;
 
+        if (item.type === "separator") {
+          return <DividerVertical key={i} overflow={4} />;
+        }
+
         if (isSelectableMenuItem(item)) {
           return (
             <Button
               key={i}
               disabled={item.disabled}
+              style={item.checked ? activeButtonStyle : undefined}
               onClick={() => {
                 if (onSelectMenuItem && item.value) {
                   onSelectMenuItem(item.value);
@@ -101,12 +112,8 @@ export function ToolbarMenu<T extends string>({
               }}
             >
               {item.title}
-              {item.icon && (
-                <>
-                  <Spacer.Horizontal inline size={6} />
-                  {renderIcon(item.icon)}
-                </>
-              )}
+              {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
+              {item.icon && renderIcon(item.icon)}
             </Button>
           );
         }
@@ -121,8 +128,13 @@ export function ToolbarMenu<T extends string>({
               }
             }}
           >
-            <Button disabled={item.disabled}>
+            <Button
+              disabled={item.disabled}
+              style={item.checked ? activeButtonStyle : undefined}
+            >
               {item.title}
+              {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
+              {item.icon && renderIcon(item.icon)}
               <Spacer.Horizontal size={6} />
               <DropdownChevronIcon />
             </Button>
@@ -131,4 +143,4 @@ export function ToolbarMenu<T extends string>({
       })}
     </>
   );
-}
+});

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

@@ -8,7 +8,12 @@ import {
 import { forwardRefGeneric } from "@noya-app/react-utils";
 import React from "react";
 import { cx } from "../../utils/classNames";
-import { Collection, CollectionProps, CollectionRef } from "../Collection";
+import {
+  Collection,
+  CollectionItemSize,
+  CollectionProps,
+  CollectionRef,
+} from "../Collection";
 
 export const FileExplorerLayout = ({
   children,
@@ -53,13 +58,18 @@ export const FileExplorerCollection = forwardRefGeneric(
 
 export const FileExplorerDetail = ({
   selected,
+  size,
   children,
 }: {
   selected: boolean;
   children: React.ReactNode;
+  size?: CollectionItemSize;
 }) => (
   <span
-    className={cx("text-sm", selected ? "text-primary" : "text-text-muted")}
+    className={cx(
+      size === "small" ? "text-list-small" : "text-sm",
+      selected ? "text-primary" : "text-text-muted"
+    )}
   >
     {children}
   </span>

package/src/components/internal/TextInput.tsx

@@ -126,6 +126,8 @@ type SubmittableProps = Props & {
   onSubmit: (value: string) => void;
   allowSubmittingWithSameValue?: boolean;
   submitAutomaticallyAfterDelay?: number;
+  /** @default true */
+  submitOnBlur?: boolean;
 };
 
 const SubmittableTextInput = forwardRef(function SubmittableTextInput(
@@ -138,6 +140,7 @@ const SubmittableTextInput = forwardRef(function SubmittableTextInput(
     onFocusCapture,
     allowSubmittingWithSameValue = false,
     submitAutomaticallyAfterDelay,
+    submitOnBlur = true,
     ...rest
   }: SubmittableProps,
   forwardedRef: ForwardedRef<HTMLInputElement>
@@ -218,9 +221,11 @@ const SubmittableTextInput = forwardRef(function SubmittableTextInput(
 
       onFocusChange?.(false);
 
-      handleSubmit();
+      if (submitOnBlur) {
+        handleSubmit();
+      }
     },
-    [onBlur, onFocusChange, handleSubmit]
+    [onBlur, onFocusChange, handleSubmit, submitOnBlur]
   );
 
   const handleFocusCapture = useCallback(

package/src/index.css

@@ -82,6 +82,7 @@
   --n-floating-button: rgb(248, 248, 250);
   --n-block-border: rgb(184, 201, 218);
   --n-block-highlight: rgb(255, 165, 0);
+  --n-visual-editor-line-placeholder-content: "Write or press / for commands";
 }
 
 [data-theme="dark"] {
@@ -125,3 +126,9 @@
   --n-table-row-background: var(--n-sidebar-background);
   --n-floating-button: #333333;
 }
+
+.visual-editor-line-placeholder::after {
+  content: var(--n-visual-editor-line-placeholder-content);
+  color: var(--n-text-disabled);
+  pointer-events: none;
+}

package/src/theme/index.ts

@@ -1,4 +1,4 @@
-import tailwindConfig from "../../tailwind.config";
+import tailwindConfig from "@noya-app/noya-tailwind-config";
 import { convertKebabToCamelCase } from "./themeUtils";
 
 export type Theme = (typeof tailwindConfig.theme)["extend"];

package/src/utils/classNames.ts

@@ -1,4 +1,4 @@
-import tailwindConfig from "../../tailwind.config";
+import tailwindConfig from "@noya-app/noya-tailwind-config";
 
 type ClassNameItem = string | number | BigInt | boolean | null | undefined;
 type Category = "text" | "color" | "font" | "flex";

package/src/utils/combobox.ts

@@ -168,12 +168,12 @@ export class ComboboxState<T extends string> {
 
   moveSelection(direction: "up" | "down") {
     const filteredItems = this.getFilteredItems();
-    this.selectedIndex = getNextIndex(
-      filteredItems,
-      this.selectedIndex,
-      direction === "down" ? "next" : "previous",
-      (item) => isNonSelectableMenuItem(item)
-    );
+    this.selectedIndex = getNextIndex({
+      items: filteredItems,
+      currentIndex: this.selectedIndex,
+      direction: direction === "down" ? "next" : "previous",
+      isDisabled: (item) => isNonSelectableMenuItem(item),
+    });
     this.notifyChange();
   }
 
@@ -257,7 +257,7 @@ export class ComboboxState<T extends string> {
   }
 }
 
-function filterWithGroupedSections<T extends string>(
+export function filterWithGroupedSections<T extends string>(
   items: MenuItem<T>[],
   query: string
 ): ScoredMenuItem<T>[] {
@@ -341,12 +341,17 @@ function filterWithGroupedSections<T extends string>(
   return result;
 }
 
-export function getNextIndex<T>(
-  items: T[],
-  currentIndex: number,
-  direction: "next" | "previous",
-  isDisabled: (item: T) => boolean
-): number {
+export function getNextIndex<T>({
+  items,
+  currentIndex,
+  direction,
+  isDisabled,
+}: {
+  items: T[];
+  currentIndex: number;
+  direction: "next" | "previous";
+  isDisabled: (item: T) => boolean;
+}): number {
   // Make sure the current index is within bounds
   currentIndex =
     currentIndex < 0