@noya-app/noya-designsystem 0.1.68 → 0.1.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -23,12 +23,12 @@
     "@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.14",
+    "@noya-app/noya-colorpicker": "0.1.30",
+    "@noya-app/noya-utils": "0.1.9",
+    "@noya-app/noya-geometry": "0.1.16",
+    "@noya-app/noya-icons": "0.1.15",
     "@noya-app/noya-keymap": "0.1.4",
-    "@noya-app/noya-tailwind-config": "0.1.7",
+    "@noya-app/noya-tailwind-config": "0.1.8",
     "radix-ui": "1.4.2",
     "@radix-ui/react-compose-refs": "^1.0.0",
     "@radix-ui/primitive": "^1.0.1",

package/src/components/Button.tsx

@@ -14,7 +14,7 @@ import { Spacer } from "./Spacer";
 import { Tooltip } from "./Tooltip";
 import type { MenuItemIcon } from "./internal/Menu";
 
-type ButtonVariant = "normal" | "thin" | "floating" | "none" | "ghost";
+type ButtonVariant = "normal" | "thin" | "floating" | "none" | "ghost" | "link";
 
 type ButtonSize = "small" | "normal" | "large" | "floating";
 
@@ -36,6 +36,7 @@ const variantStyles: Record<ButtonVariant, string> = {
   thin: "n-bg-transparent n-text-text hover:n-bg-input-background-light",
   none: "n-bg-transparent n-text-text hover:n-bg-input-background-light",
   ghost: "n-bg-transparent n-text-text hover:n-bg-input-background-light",
+  link: "n-bg-transparent n-text-text hover:n-bg-input-background-light",
 };
 
 const sizeStyles: Record<ButtonSize | "thin" | "none", string> = {

package/src/components/Collection.tsx

@@ -82,6 +82,10 @@ export interface CollectionProps<T, M extends string = string> {
   scrollable?: boolean;
   itemStyle?: CSSProperties;
   itemClassName?: string;
+  /** Optional per-item style */
+  getItemStyle?: (item: T, selected: boolean) => CSSProperties | undefined;
+  /** Optional per-item className */
+  getItemClassName?: (item: T, selected: boolean) => string | undefined;
   itemRoleDescription?: string;
   /** Position of the detail content. Defaults to 'end'. */
   detailPosition?: "end" | "below";
@@ -89,6 +93,11 @@ export interface CollectionProps<T, M extends string = string> {
   size?: CollectionItemSize;
   /** Size of the thumbnail. Defaults to 'auto', which will be based on the size prop. */
   thumbnailSize?: CollectionThumbnailSize;
+  /**
+   * Position of the disclosure chevron for expandable lists.
+   * @default 'start'
+   */
+  chevronPosition?: "start" | "end";
   /** For testing: Override the hover state with a specific item ID */
   testHoveredId?: string;
   /** For testing: Override the renaming state with a specific item ID */

package/src/components/DraggableMenuButton.tsx

@@ -70,6 +70,11 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
     (event: React.PointerEvent) => {
       if (open || !downPosition) {
         setDownPosition(null);
+
+        // if the button was clicked directly, close the menu
+        if (open && event.target === event.currentTarget) {
+          setOpen(false);
+        }
         return;
       }
 

package/src/components/InputField.tsx

@@ -552,8 +552,8 @@ function InputFieldRoot({
     [onFocusChange]
   );
 
-  const startWidth = measuredStartSize?.width ?? startWidthProp;
-  const endWidth = measuredEndSize?.width ?? endWidthProp;
+  const startWidth = startWidthProp ?? measuredStartSize?.width;
+  const endWidth = endWidthProp ?? measuredEndSize?.width;
 
   const contextValue = useMemo(
     (): InputFieldContextValue => ({

package/src/components/List.tsx

@@ -88,6 +88,9 @@ export const List = memoGeneric(
       sharedDragProps,
       virtualized,
       renameSelectsBeforeDot,
+      chevronPosition = "start",
+      getItemStyle,
+      getItemClassName,
     } = props;
 
     const [internalHoveredId, setHoveredId] = useState<string>();
@@ -249,6 +252,9 @@ export const List = memoGeneric(
               </div>
             );
           }
+          const perItemStyle = getItemStyle?.(item, isSelected);
+          const perItemClassName = getItemClassName?.(item, isSelected);
+
           return (
             <ViewComponent.Row
               as={typeof href === "string" ? LinkComponent : undefined}
@@ -260,13 +266,18 @@ export const List = memoGeneric(
               aria-roledescription={itemRoleDescription}
               aria-label={getName(item)}
               aria-selected={isSelected}
-              className={itemClassName}
+              className={cx(itemClassName, perItemClassName)}
               testRelativeDropPosition={
                 testShowDropIndicatorId === id ? "inside" : undefined
               }
-              chevronClassName={cx(expandable && "n-relative n-left-2")}
+              chevronClassName={cx(
+                expandable && chevronPosition !== "end" && "n-relative n-left-2"
+              )}
               chevronAs={href ? "div" : undefined}
-              style={itemStyle}
+              {...(expandable ? { chevronPosition } : {})}
+              style={
+                perItemStyle ? { ...itemStyle, ...perItemStyle } : itemStyle
+              }
               hovered={isHovered}
               selected={isSelected}
               expanded={expanded}

package/src/components/Stepper.tsx

@@ -3,8 +3,9 @@
 import { clamp } from "@noya-app/noya-utils";
 import React, { FocusEventHandler, memo, useCallback, useMemo } from "react";
 import { useLabel } from "../hooks/useLabel";
+import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
-import { Button } from "./Button";
+import { IconButton } from "./IconButton";
 import { InputField } from "./InputField";
 
 type ColorScheme = "primary" | "secondary";
@@ -65,12 +66,39 @@ export const Stepper = memo(function Stepper({
       onFocus={onFocus}
       onBlur={onBlur}
     >
-      <Button
-        icon="MinusIcon"
-        disabled={readOnly}
-        onClick={() => handleValueChange(value - step)}
-      />
-      <InputField.Root className="n-flex-1">
+      <InputField.Root
+        className="n-flex-1"
+        startWidth={17}
+        startClassName="-n-ml-[3px]"
+        endWidth={17}
+        endClassName="-n-mr-[3px]"
+        start={
+          <IconButton
+            iconName="MinusIcon"
+            disabled={readOnly}
+            onClick={() => handleValueChange(value - step)}
+            className="n-w-[21px] n-h-[21px]"
+            style={{
+              outline: `1px solid ${cssVars.colors.dividerStrong}`,
+              outlineOffset: "-1px",
+              background: cssVars.colors.background,
+            }}
+          />
+        }
+        end={
+          <IconButton
+            iconName="PlusIcon"
+            disabled={readOnly}
+            onClick={() => handleValueChange(value + step)}
+            className="n-w-[21px] n-h-[21px]"
+            style={{
+              outline: `1px solid ${cssVars.colors.dividerStrong}`,
+              outlineOffset: "-1px",
+              background: cssVars.colors.background,
+            }}
+          />
+        }
+      >
         <InputField.NumberInput
           value={value}
           onChange={handleValueChange}
@@ -78,11 +106,6 @@ export const Stepper = memo(function Stepper({
           readOnly={readOnly}
         />
       </InputField.Root>
-      <Button
-        icon="PlusIcon"
-        disabled={readOnly}
-        onClick={() => handleValueChange(value + step)}
-      />
     </div>
   );
 });

package/src/components/TreeView.tsx

@@ -21,6 +21,7 @@ type TreeRowBaseProps = {
   expanded?: boolean;
   chevronClassName?: string;
   chevronAs?: React.ElementType;
+  chevronPosition?: "start" | "end";
   onClickChevron?: ({ altKey }: { altKey: boolean }) => void;
   onDoubleClick?: () => void;
 };
@@ -35,6 +36,7 @@ const TreeRow = forwardRefGeneric(function TreeRow<MenuItemType extends string>(
     onClickChevron,
     chevronClassName,
     chevronAs,
+    chevronPosition = "start",
     children,
     ...rest
   }: TreeViewRowProps<MenuItemType>,
@@ -55,7 +57,7 @@ const TreeRow = forwardRefGeneric(function TreeRow<MenuItemType extends string>(
 
   return (
     <ListView.Row ref={forwardedRef} {...rest}>
-      {expandable && (
+      {expandable && chevronPosition !== "end" && (
         <>
           {expanded === undefined ? (
             <Spacer.Horizontal size={19} />
@@ -78,6 +80,28 @@ const TreeRow = forwardRefGeneric(function TreeRow<MenuItemType extends string>(
         </>
       )}
       {children}
+      {expandable && chevronPosition === "end" && (
+        <>
+          <Spacer.Horizontal size={6} />
+          {expanded === undefined ? (
+            <>
+              {/* Right-side padding not needed for end chevron since no text needs to be aligned */}
+            </>
+          ) : (
+            <>
+              <IconButton
+                as={chevronAs}
+                className={chevronClassName}
+                iconName={expanded ? "ChevronDownIcon2" : "ChevronRightIcon2"}
+                onClick={handleClickChevron}
+                selected={rest.selected}
+              />
+              {/* Right-side padding for end chevron */}
+              <Spacer.Horizontal size={8} />
+            </>
+          )}
+        </>
+      )}
     </ListView.Row>
   );
 });

package/src/components/workspace/DrawerWorkspaceLayout.tsx

@@ -6,8 +6,9 @@ import { DividerVertical } from "../Divider";
 import { Drawer } from "../Drawer";
 import { isSelectableMenuItem, MenuItem } from "../internal/Menu";
 import { EDITOR_PANEL_GROUP_ID, RIGHT_SIDEBAR_ID } from "./constants";
-import { LayoutProps, PanelLayoutState } from "./types";
+import { LayoutProps, PanelLayoutState, SidebarRef } from "./types";
 import { VerticalTabMenu } from "./VerticalTabMenu";
+import { Button } from "../Button";
 
 export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
   LeftTab extends string = string,
@@ -24,6 +25,7 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
   rightTabValue,
   onChangeRightTab,
   onChangeLeftTab,
+  compactDrawerMenu,
 }: LayoutProps<LeftTab, RightTab>) {
   const portalContainer = useRef<HTMLDivElement>(null);
 
@@ -44,6 +46,14 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
 
   const hasTabs = allTabItems.length > 0;
 
+  // Determine if we should use the compact top-row menu variant.
+  const allSelectableTabItems = useMemo(
+    () => allTabItems.filter(isSelectableMenuItem),
+    [allTabItems]
+  );
+  const useCompactInToolbar =
+    !!compactDrawerMenu && allSelectableTabItems.length <= 1;
+
   const leftSelectableTabItems = useMemo(
     () => (leftTabItems ?? []).filter(isSelectableMenuItem),
     [leftTabItems]
@@ -54,6 +64,39 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
     [rightTabItems]
   );
 
+  // Shared helpers for expanding/collapsing drawers
+  const toggleSidebar = (ref: React.RefObject<SidebarRef | null>) => {
+    if (ref.current?.isExpanded()) {
+      ref.current?.collapse();
+    } else {
+      ref.current?.expand();
+    }
+  };
+
+  const ensureExpanded = (ref: React.RefObject<SidebarRef | null>) => {
+    if (!ref.current?.isExpanded()) {
+      ref.current?.expand();
+    }
+  };
+
+  const handleSelectTab = (value: LeftTab | RightTab) => {
+    if (leftSelectableTabItems.some((item) => item.value === value)) {
+      if (value === leftTabValue) {
+        toggleSidebar(leftSidebarRef);
+      } else {
+        ensureExpanded(leftSidebarRef);
+        onChangeLeftTab?.(value as LeftTab);
+      }
+    } else if (rightSelectableTabItems.some((item) => item.value === value)) {
+      if (value === rightTabValue) {
+        toggleSidebar(rightSidebarRef);
+      } else {
+        ensureExpanded(rightSidebarRef);
+        onChangeRightTab?.(value as RightTab);
+      }
+    }
+  };
+
   const { activeValue, isSidebarCollapsed } =
     leftSelectableTabItems.length > 0 && !leftSidebarCollapsed
       ? { activeValue: leftTabValue, isSidebarCollapsed: leftSidebarCollapsed }
@@ -70,60 +113,60 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
       id={EDITOR_PANEL_GROUP_ID}
       className="n-flex n-flex-1 n-relative focus:n-outline-none"
     >
-      {hasTabs && (
-        <VerticalTabMenu
-          tooltipSide="right"
-          items={allTabItems}
-          activeValue={activeValue}
-          isSidebarCollapsed={isSidebarCollapsed}
-          onChange={(value) => {
-            if (leftSelectableTabItems.some((item) => item.value === value)) {
-              if (value === leftTabValue) {
-                if (leftSidebarRef.current?.isExpanded()) {
-                  leftSidebarRef.current?.collapse();
-                } else {
-                  leftSidebarRef.current?.expand();
-                }
-              } else {
-                if (!leftSidebarRef.current?.isExpanded()) {
-                  leftSidebarRef.current?.expand();
-                }
-
-                onChangeLeftTab?.(value as LeftTab);
-              }
-            } else if (
-              rightSelectableTabItems.some((item) => item.value === value)
-            ) {
-              if (value === rightTabValue) {
-                if (rightSidebarRef.current?.isExpanded()) {
-                  rightSidebarRef.current?.collapse();
-                } else {
-                  rightSidebarRef.current?.expand();
-                }
-              } else {
-                if (!rightSidebarRef.current?.isExpanded()) {
-                  rightSidebarRef.current?.expand();
-                }
-
-                onChangeRightTab?.(value as RightTab);
+      {hasTabs && !useCompactInToolbar && (
+        <>
+          <VerticalTabMenu
+            tooltipSide="right"
+            items={allTabItems}
+            activeValue={activeValue}
+            isSidebarCollapsed={isSidebarCollapsed}
+            onChange={(value) => handleSelectTab(value as LeftTab | RightTab)}
+          />
+          <DividerVertical className="n-h-full" />
+        </>
+      )}
+
+      {useCompactInToolbar && (
+        <div className="n-absolute n-top-0 n-left-0 n-h-[calc(var(--n-toolbar-height)+1px)] n-w-[calc(var(--n-toolbar-height)+1px)] n-bg-sidebar-background n-border-r n-border-b n-border-divider-strong n-z-10 n-flex n-items-center n-justify-center">
+          {allSelectableTabItems[0] && (
+            <Button
+              variant="none"
+              className="n-rounded"
+              style={{
+                width: "var(--n-input-height)",
+                height: "var(--n-input-height)",
+              }}
+              icon={allSelectableTabItems[0].icon}
+              tooltip={
+                allSelectableTabItems[0].tooltip ?? allSelectableTabItems[0].title
               }
-            }
-          }}
-        />
+              active={(() => {
+                const value = allSelectableTabItems[0].value as LeftTab | RightTab;
+                const isLeftItem = leftSelectableTabItems.some((i) => i.value === value);
+                const isRightItem = rightSelectableTabItems.some((i) => i.value === value);
+                return isLeftItem ? !leftSidebarCollapsed : isRightItem ? !rightSidebarCollapsed : false;
+              })()}
+              onClick={() => {
+                const value = allSelectableTabItems[0].value as LeftTab | RightTab;
+                handleSelectTab(value);
+              }}
+            />
+          )}
+        </div>
       )}
-      {hasTabs && <DividerVertical className="n-h-full" />}
+
       <div className="n-flex-1 n-flex n-relative">{centerPanel}</div>
+
       {leftPanel && (
         <Drawer
           ref={leftSidebarRef}
           className="n-flex-1"
-          style={{
-            left: 48,
-            maxWidth: "calc(100% - 48px)",
-          }}
-          overlayStyle={{
-            left: 48,
-          }}
+          style={
+            useCompactInToolbar
+              ? undefined
+              : { left: 48, maxWidth: "calc(100% - 48px)" }
+          }
+          overlayStyle={useCompactInToolbar ? undefined : { left: 48 }}
           open={!leftSidebarCollapsed}
           positioning="absolute"
           side="left"
@@ -144,13 +187,12 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
           id={RIGHT_SIDEBAR_ID}
           ref={rightSidebarRef}
           className="n-flex-1"
-          style={{
-            left: 48,
-            maxWidth: "calc(100% - 48px)",
-          }}
-          overlayStyle={{
-            left: 48,
-          }}
+          style={
+            useCompactInToolbar
+              ? undefined
+              : { left: 48, maxWidth: "calc(100% - 48px)" }
+          }
+          overlayStyle={useCompactInToolbar ? undefined : { left: 48 }}
           open={!rightSidebarCollapsed}
           positioning="absolute"
           side="left"

package/src/components/workspace/PanelWorkspaceLayout.tsx

@@ -52,6 +52,7 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
   rightTabValue,
   onChangeLeftTab,
   onChangeRightTab,
+  compactDrawerMenu,
 }: LayoutProps<LeftTab, RightTab>) {
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
 
@@ -159,6 +160,13 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
     [setData, propertyKey]
   );
 
+  const showLeftTabs =
+    !!leftSidebarOptions.showTabs &&
+    !!leftTabItems &&
+    // When compact drawer UI is enabled, only show the rail when the
+    // sidebar is collapsed (for large screens/panel layout).
+    (!compactDrawerMenu || leftSidebarCollapsed);
+
   return (
     <PanelGroup
       ref={panelGroupRef}
@@ -171,7 +179,7 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
     >
       {leftPanel && (
         <>
-          {leftSidebarOptions.showTabs && leftTabItems && (
+          {showLeftTabs && (
             <VerticalTabMenu
               tooltipSide="right"
               items={leftTabItems}
@@ -180,9 +188,9 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
               onChange={handleLeftTabChange}
             />
           )}
-          {leftSidebarOptions.showTabs &&
-            leftTabItems &&
-            !leftSidebarCollapsed && <DividerVertical className="n-h-full" />}
+          {showLeftTabs && !leftSidebarCollapsed && (
+            <DividerVertical className="n-h-full" />
+          )}
           <Panel
             id={LEFT_SIDEBAR_ID}
             className="n-relative"

package/src/components/workspace/VerticalTabMenu.tsx

@@ -31,7 +31,7 @@ export const VerticalTabMenu = memoGeneric(function VerticalTabMenu<
 
   return (
     <div
-      className="n-w-[47px] n-h-full n-bg-sidebar-background n-flex n-flex-col n-items-center n-py-3 n-gap-3"
+      className="n-w-[calc(var(--n-toolbar-height)+1px)] n-h-full n-bg-sidebar-background n-flex n-flex-col n-items-center n-py-3 n-gap-3"
       style={style}
     >
       <ToolbarMenu

package/src/components/workspace/WorkspaceLayout.tsx

@@ -57,6 +57,11 @@ export interface WorkspaceLayoutProps<
   sideType?: SideType;
   sideTypeBreakpoint?: number;
   detectSize?: DetectSizeType;
+  /**
+   * Use a compact top-row menu in Drawer (mobile) layout instead of a
+   * full-height left menu. Useful when there is only a single icon.
+   */
+  compactDrawerMenu?: boolean;
 }
 
 export type WorkspaceLayoutRef = {
@@ -147,6 +152,7 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
       showTabs: rightShowTabs = true,
     } = {},
     theme,
+    compactDrawerMenu,
   }: WorkspaceLayoutProps<LeftTab, RightTab>,
   forwardedRef: React.ForwardedRef<WorkspaceLayoutRef>
 ) {
@@ -446,6 +452,7 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
             autoSavePrefix={autoSavePrefix}
             leftSidebarRef={leftSidebarRef}
             rightSidebarRef={rightSidebarRef}
+            compactDrawerMenu={compactDrawerMenu}
           />
         )}
       </div>

package/src/components/workspace/types.ts

@@ -51,6 +51,13 @@ export type LayoutProps<
   autoSavePrefix?: string;
   leftSidebarRef: React.RefObject<SidebarRef | null>;
   rightSidebarRef: React.RefObject<SidebarRef | null>;
+  /**
+   * When using the Drawer (mobile) layout, render the vertical tab menu
+   * in a compact top row whose height equals the toolbar height.
+   * Intended for scenarios with a single icon to avoid reserving
+   * full-height left-side space.
+   */
+  compactDrawerMenu?: boolean;
 };
 
 export type WorkspaceLayoutGroup = {

package/src/index.css

@@ -91,7 +91,7 @@
   --n-active-background: var(--n-indigo-150);
   --n-thumbnail-background: #f0efff;
   --n-thumbnail-shadow: #d3ceed66;
-  --n-banner-info-background: var(--n-indigo-50);
+  --n-banner-info-background: var(--n-indigo-25);
   --n-banner-info-border: var(--n-divider-strong);
   --n-banner-info-text: #6579aa;
   --n-banner-error-background: #ffe2e2;