@noya-app/noya-designsystem 0.1.94 → 0.1.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.94",
+  "version": "0.1.95",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -29,11 +29,11 @@
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@floating-ui/react": "^0.27.0",
-    "@noya-app/noya-colorpicker": "0.1.36",
+    "@noya-app/noya-colorpicker": "0.1.37",
     "@noya-app/noya-utils": "0.1.10",
     "@noya-app/noya-geometry": "0.1.19",
-    "@noya-app/noya-icons": "0.1.20",
-    "@noya-app/noya-keymap": "0.1.4",
+    "@noya-app/noya-icons": "0.1.21",
+    "@noya-app/noya-keymap": "0.1.5",
     "@noya-app/noya-tailwind-config": "0.1.10",
     "@radix-ui/react-compose-refs": "^1.0.0",
     "@radix-ui/primitive": "^1.0.1",

package/src/__tests__/SharedDragProvider.test.ts

@@ -2,38 +2,81 @@ import type { PointerSensorProps } from "@dnd-kit/core";
 import { describe, expect, test } from "bun:test";
 import { ContinuousPointerSensor } from "../components/sorting/SharedDragProvider";
 
-describe("ContinuousPointerSensor", () => {
-  test("forwards the movement that activates a distance-constrained drag", () => {
-    const target = document.createElement("div");
-    document.body.appendChild(target);
-    const pointerDown = new PointerEvent("pointerdown", {
-      clientX: 10,
-      clientY: 20,
-    });
-    target.dispatchEvent(pointerDown);
+/**
+ * When a dnd-kit pointer sensor activates, it adds a document-level CAPTURE
+ * listener that calls stopPropagation on every "click", and detach() only
+ * removes it on a 50ms setTimeout. Waiting that window out keeps the
+ * suppression from leaking into whatever test dispatches clicks next (it
+ * silently breaks fireEvent.click across suite boundaries otherwise).
+ */
+function waitForDndKitDocumentListenerCleanup() {
+  return new Promise((resolve) => setTimeout(resolve, 60));
+}
+
+function simulateDrag(events: string[]) {
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const pointerDown = new PointerEvent("pointerdown", {
+    clientX: 10,
+    clientY: 20,
+  });
+  target.dispatchEvent(pointerDown);
 
+  const props = {
+    active: "item",
+    activeNode: {},
+    context: { current: {} },
+    event: pointerDown,
+    options: { activationConstraint: { distance: 4 } },
+    onAbort: () => {},
+    onPending: () => {},
+    onStart: () => {
+      events.push("start");
+    },
+    onMove: ({ x, y }: { x: number; y: number }) => {
+      events.push(`move:${x},${y}`);
+    },
+    onEnd: () => {
+      events.push("end");
+    },
+    onCancel: () => {},
+  } as unknown as PointerSensorProps;
+
+  new ContinuousPointerSensor(props);
+  document.dispatchEvent(
+    new PointerEvent("pointermove", { clientX: 30, clientY: 40 })
+  );
+  document.dispatchEvent(new PointerEvent("pointerup"));
+  target.remove();
+}
+
+describe("ContinuousPointerSensor", () => {
+  test("forwards the movement that activates a distance-constrained drag", async () => {
     const events: string[] = [];
-    const props = {
-      active: "item",
-      activeNode: {},
-      context: { current: {} },
-      event: pointerDown,
-      options: { activationConstraint: { distance: 4 } },
-      onAbort: () => {},
-      onPending: () => {},
-      onStart: () => events.push("start"),
-      onMove: ({ x, y }) => events.push(`move:${x},${y}`),
-      onEnd: () => events.push("end"),
-      onCancel: () => {},
-    } as PointerSensorProps;
-
-    new ContinuousPointerSensor(props);
-    document.dispatchEvent(
-      new PointerEvent("pointermove", { clientX: 30, clientY: 40 })
-    );
-    document.dispatchEvent(new PointerEvent("pointerup"));
+    simulateDrag(events);
 
     expect(events).toEqual(["start", "move:30,40", "end"]);
-    target.remove();
+
+    await waitForDndKitDocumentListenerCleanup();
+  });
+
+  test("clicks propagate again after the drag's deferred cleanup", async () => {
+    simulateDrag([]);
+    await waitForDndKitDocumentListenerCleanup();
+
+    // Regression guard: an activated drag suppresses click propagation at the
+    // document level; after the deferred cleanup, clicks must bubble again.
+    const parent = document.createElement("div");
+    const button = document.createElement("button");
+    parent.appendChild(button);
+    document.body.appendChild(parent);
+    let bubbled = 0;
+    parent.addEventListener("click", () => {
+      bubbled++;
+    });
+    button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    parent.remove();
+
+    expect(bubbled).toBe(1);
   });
 });

package/src/__tests__/fuzzyScorer.test.ts

@@ -1,5 +1,10 @@
 import { expect, test } from "bun:test";
-import { fuzzyFilter, fuzzyScore, fuzzyTokenize } from "../utils/fuzzyScorer";
+import {
+  fuzzyFilter,
+  fuzzyScore,
+  fuzzyTokenize,
+  wordPrefixFilter,
+} from "../utils/fuzzyScorer";
 
 test("prefix match", () => {
   const result = fuzzyScore({ item: "font-bold", query: "font" });
@@ -83,3 +88,46 @@ test("tokenizes non-contiguous match", () => {
     { type: "text", text: "old" },
   ]);
 });
+
+test("wordPrefixFilter ranks exact > prefix > word-start and drops mid-word substrings", () => {
+  const families = [
+    "Almendra Display",
+    "Big Shoulders Display",
+    "DM Serif Display",
+    "Gilda Display",
+    "Play",
+    "Playball",
+    "Playfair Display",
+  ];
+
+  const result = wordPrefixFilter({ items: families, query: "Play" });
+  const names = result.map(({ index }) => families[index]);
+
+  // Mid-word substring matches ("* Display") are excluded entirely because
+  // word-boundary matches exist.
+  expect(names).toEqual(["Play", "Playball", "Playfair Display"]);
+});
+
+test("wordPrefixFilter matches at interior word starts with highlight ranges", () => {
+  const families = ["DM Serif Display", "Sans Serif", "Monoserif"];
+
+  const result = wordPrefixFilter({ items: families, query: "serif" });
+  const names = result.map(({ index }) => families[index]);
+
+  expect(names).toEqual(["DM Serif Display", "Sans Serif"]);
+  expect(result[0].labelMatch).toEqual([{ start: 3, end: 8 }]);
+});
+
+test("wordPrefixFilter falls back to substrings only when nothing matches a word boundary", () => {
+  const families = ["Almendra Display", "Gilda Display", "Play"];
+
+  const result = wordPrefixFilter({ items: families, query: "lay" });
+  const names = result.map(({ index }) => families[index]);
+
+  expect(names).toEqual(["Almendra Display", "Gilda Display", "Play"]);
+});
+
+test("wordPrefixFilter with empty query returns all items unscored", () => {
+  const result = wordPrefixFilter({ items: ["A", "B"], query: "  " });
+  expect(result.map(({ index }) => index)).toEqual([0, 1]);
+});

package/src/components/Button.tsx

@@ -103,7 +103,7 @@ export const Button = forwardRef(function Button(
   const colorScheme = colorSchemeProp ?? "default";
 
   const baseClassName = cx(
-    "n-no-underline n-leading-[1] n-relative n-outline-none n-select-none n-text-left n-rounded n-flex n-items-center n-justify-center [&>*]:n-pointer-events-none n-[-webkit-app-region:no-drag] focus:n-ring-2 focus:n-ring-primary focus:n-shadow-[0_0_0_1px_var(--n-popover-background)_inset] n-transition-all",
+    "n-no-underline n-leading-[1] n-relative n-outline-none n-select-none n-text-left n-rounded n-flex n-items-center n-justify-center [&>*]:n-pointer-events-none n-[-webkit-app-region:no-drag] focus-visible:n-ring-2 focus-visible:n-ring-primary focus-visible:n-shadow-[0_0_0_1px_var(--n-popover-background)_inset] n-transition-all",
     variant === "ghost" ? "n-border" : "n-border-0",
     disabled ? "n-opacity-25" : "",
     !className?.includes("flex") ? "n-flex-none" : "",

package/src/components/Combobox.tsx

@@ -14,7 +14,11 @@ import React, {
 } from "react";
 import { useLabel } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
-import { ComboboxState, useComboboxState } from "../utils/combobox";
+import {
+  ComboboxFilterStrategy,
+  ComboboxState,
+  useComboboxState,
+} from "../utils/combobox";
 import { ActivityIndicator } from "./ActivityIndicator";
 import { ComboboxMenu } from "./ComboboxMenu";
 import { renderIcon } from "./Icons";
@@ -48,6 +52,16 @@ export type BaseComboboxProps<T extends string> = {
   tabBehavior?: "autocomplete" | "select";
   openMenuBehavior?: "showAllItems" | "showFilteredItems";
   iconPosition?: "left" | "right";
+  /** Wraps each menu item's label (receives the default highlighted content) */
+  renderItemContent?: (
+    item: ScoredMenuItem<T>,
+    defaultContent: React.ReactNode
+  ) => React.ReactNode;
+  /**
+   * How filter text matches item titles ("fuzzy" default; "wordPrefix" for
+   * name lists). Fixed at mount.
+   */
+  filterStrategy?: ComboboxFilterStrategy;
 };
 
 export type StringModeOnlyProps = {
@@ -105,6 +119,8 @@ export const Combobox = memoGeneric(
       onFocus,
       onDeleteWhenEmpty,
       iconPosition = "right",
+      renderItemContent,
+      filterStrategy = "fuzzy",
       ...rest
     }: ComboboxProps<T>,
     forwardedRef: ForwardedRef<ComboboxRef<T>>
@@ -170,7 +186,8 @@ export const Combobox = memoGeneric(
         new ComboboxState(
           items,
           initialValueString,
-          props.mode === "string" && (props.allowArbitraryValues ?? false)
+          props.mode === "string" && (props.allowArbitraryValues ?? false),
+          filterStrategy
         )
     );
     const state = useComboboxState(comboboxState);
@@ -525,7 +542,9 @@ export const Combobox = memoGeneric(
             menuItemsCount,
             sectionHeaderCount,
             tallMenuItemsCount,
-            maxBaseRows: 10.5,
+            // Whole rows only: a half-cut last row reads as a rendering bug
+            // rather than a scrollable list.
+            maxBaseRows: 10,
           });
 
           const adjustedListSize = { width, height: computedHeight };
@@ -546,6 +565,7 @@ export const Combobox = memoGeneric(
                   onHoverIndex={handleIndexChange}
                   listSize={adjustedListSize}
                   iconPosition={iconPosition}
+                  renderItemContent={renderItemContent}
                   style={{
                     flex: `0 0 ${computedHeight}px`,
                   }}

package/src/components/ComboboxMenu.tsx

@@ -34,6 +34,15 @@ interface ComboboxMenuProps<T extends string> {
   itemHeight?: number;
   /** Optional per-item height resolver */
   getRowHeightForItem?: (item: ScoredMenuItem<T>, index: number) => number;
+  /**
+   * Wraps an item's rendered label (e.g. to style a font family's row in its
+   * own typeface). Receives the default label content, which includes the
+   * fuzzy-match highlighting.
+   */
+  renderItemContent?: (
+    item: ScoredMenuItem<T>,
+    defaultContent: React.ReactNode
+  ) => React.ReactNode;
 }
 
 export const ComboboxMenu = memoGeneric(
@@ -49,6 +58,7 @@ export const ComboboxMenu = memoGeneric(
       iconPosition = "right",
       itemHeight,
       getRowHeightForItem,
+      renderItemContent,
     }: ComboboxMenuProps<T>,
     forwardedRef: ForwardedRef<IVirtualizedList>
   ) {
@@ -127,21 +137,28 @@ export const ComboboxMenu = memoGeneric(
                   </>
                 )}
                 <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>
+                  {(() => {
+                    const defaultContent = (
+                      <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>
+                    );
+                    return renderItemContent
+                      ? renderItemContent(item, defaultContent)
+                      : defaultContent;
+                  })()}
                   {tooltip && (
                     <Small color="textSubtle" className="n-truncate">
                       {tooltip}

package/src/components/ContextMenu.tsx

@@ -26,6 +26,11 @@ import {
 import { Spacer } from "./Spacer";
 import { cloneElementWithMergedProps } from "../utils/mergeProps";
 
+/** Carries the root menu's contentStyle into submenu popups (separate portals). */
+const ContextMenuContentStyleContext = React.createContext<
+  React.CSSProperties | undefined
+>(undefined);
+
 export interface MenuItemProps<T extends string> {
   value?: T;
   children: ReactNode;
@@ -114,6 +119,9 @@ function SubmenuItem<T extends string>({
   portalScopeId: string | undefined;
 }) {
   const [open, setOpen] = useState(false);
+  const inheritedContentStyle = React.useContext(
+    ContextMenuContentStyleContext
+  );
 
   const submenuHasCheckedItem = item.items.some(
     (subItem) => isSelectableMenuItem(subItem) && subItem.checked
@@ -151,7 +159,10 @@ function SubmenuItem<T extends string>({
           alignOffset={-5}
           className="n-z-menu n-outline-none"
         >
-          <BaseContextMenu.Popup className={styles.contentStyle}>
+          <BaseContextMenu.Popup
+            className={styles.contentStyle}
+            style={inheritedContentStyle}
+          >
             <ContextMenuViewport
               items={item.items}
               onSelect={onSelect}
@@ -253,6 +264,8 @@ export interface MenuProps<T extends string> {
   onSelect: (value: T) => void;
   shouldBindKeyboardShortcuts?: boolean;
   onOpenChange?: (open: boolean) => void;
+  /** Extra styles (e.g. CSS variable overrides) for the menu surface. */
+  contentStyle?: React.CSSProperties;
 }
 
 function ContextMenuRoot<T extends string>({
@@ -261,6 +274,7 @@ function ContextMenuRoot<T extends string>({
   onSelect,
   shouldBindKeyboardShortcuts,
   onOpenChange,
+  contentStyle,
 }: MenuProps<T>) {
   const keymap = useMemo(
     () =>
@@ -305,12 +319,17 @@ function ContextMenuRoot<T extends string>({
           {...portalScopeProps(portalScopeId)}
           className="n-z-menu n-outline-none"
         >
-          <BaseContextMenu.Popup className={styles.contentStyle}>
-            <ContextMenuViewport
-              items={items}
-              onSelect={handleSelectItem}
-              hasCheckedItem={hasCheckedItem}
-            />
+          <BaseContextMenu.Popup
+            className={styles.contentStyle}
+            style={contentStyle}
+          >
+            <ContextMenuContentStyleContext.Provider value={contentStyle}>
+              <ContextMenuViewport
+                items={items}
+                onSelect={handleSelectItem}
+                hasCheckedItem={hasCheckedItem}
+              />
+            </ContextMenuContentStyleContext.Provider>
           </BaseContextMenu.Popup>
         </BaseContextMenu.Positioner>
       </BaseContextMenu.Portal>

package/src/components/DimensionInput.tsx

@@ -3,6 +3,7 @@
 import { round } from "@noya-app/noya-utils";
 import * as React from "react";
 import { InputField } from "./InputField";
+import { Label } from "./Label";
 import { LabeledField } from "./LabeledField";
 
 export type SetNumberMode = "replace" | "adjust";
@@ -30,6 +31,8 @@ interface Props {
   placeholder?: string;
   disabled?: boolean;
   trigger?: "change" | "submit";
+  /** Unit suffix rendered inside the field's right edge (e.g. "px", "%"). */
+  suffix?: string;
 }
 
 export const DimensionInput = React.memo(function DimensionInput({
@@ -38,9 +41,11 @@ export const DimensionInput = React.memo(function DimensionInput({
   onSetValue,
   label,
   size,
-  placeholder = "multi",
+  // Figma shows "Mixed" in numeric fields with differing values
+  placeholder = "Mixed",
   disabled,
   trigger = "submit",
+  suffix,
 }: Props) {
   const handleNudgeValue = React.useCallback(
     (value: number) => onSetValue(value, "adjust"),
@@ -54,12 +59,17 @@ export const DimensionInput = React.memo(function DimensionInput({
 
   return (
     <LabeledField label={label} labelType="inset">
-      <InputField.Root id={id} width={size}>
+      <InputField.Root
+        id={id}
+        width={size}
+        end={suffix ? <Label>{suffix}</Label> : undefined}
+      >
         <InputField.NumberInput
           value={value === undefined ? value : round(value, 2)}
           placeholder={value === undefined ? placeholder : undefined}
           onNudge={handleNudgeValue}
           disabled={disabled}
+          style={suffix ? { paddingRight: 4 } : undefined}
           {...(trigger === "change"
             ? { onChange: handleSetValue }
             : { onSubmit: handleSetValue })}

package/src/components/DropdownMenu.tsx

@@ -21,6 +21,7 @@ import {
 } from "../contexts/PortalScopeContext";
 import { cx } from "../utils/classNames";
 import { Button, ButtonProps } from "./Button";
+import { IconButton } from "./IconButton";
 import { MenuProps } from "./ContextMenu";
 import { Icon, IconName } from "./Icons";
 import {
@@ -37,6 +38,14 @@ import {
 } from "./internal/Menu";
 import { Spacer } from "./Spacer";
 
+/**
+ * Carries the root menu's contentStyle into submenu popups (they render in
+ * separate portals, so CSS variable overrides don't cascade to them).
+ */
+const MenuContentStyleContext = React.createContext<
+  React.CSSProperties | undefined
+>(undefined);
+
 /* ----------------------------------------------------------------------------
  * Root
  * ------------------------------------------------------------------------- */
@@ -134,6 +143,7 @@ function SubmenuItem<T extends string>({
   portalScopeId: string | undefined;
 }) {
   const [open, setOpen] = useState(false);
+  const inheritedContentStyle = React.useContext(MenuContentStyleContext);
 
   const submenuHasCheckedItem = item.items.some(
     (subItem) => isSelectableMenuItem(subItem) && subItem.checked
@@ -176,7 +186,10 @@ function SubmenuItem<T extends string>({
           alignOffset={-5}
           className="n-z-menu n-outline-none"
         >
-          <Menu.Popup className={styles.contentStyle}>
+          <Menu.Popup
+            className={styles.contentStyle}
+            style={inheritedContentStyle}
+          >
             <MenuViewport
               items={item.items}
               onSelect={onSelect}
@@ -347,7 +360,7 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
   const isNativeButton =
     React.isValidElement(childContent) &&
     (childContent.type === "button" ||
-      (childContent.type === Button &&
+      ((childContent.type === Button || childContent.type === IconButton) &&
         (childContent.props as ButtonProps).as !== "a"));
 
   return (
@@ -403,12 +416,14 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
           className="n-z-menu n-outline-none"
         >
           <Menu.Popup className={styles.contentStyle} style={contentStyles}>
-            {items.length === 0 ? emptyState : null}
-            <MenuViewport
-              items={items}
-              onSelect={onSelect}
-              hasCheckedItem={hasCheckedItem}
-            />
+            <MenuContentStyleContext.Provider value={contentStyle}>
+              {items.length === 0 ? emptyState : null}
+              <MenuViewport
+                items={items}
+                onSelect={onSelect}
+                hasCheckedItem={hasCheckedItem}
+              />
+            </MenuContentStyleContext.Provider>
           </Menu.Popup>
         </Menu.Positioner>
       </Menu.Portal>

package/src/components/InputField.tsx

@@ -666,6 +666,7 @@ function InputFieldRoot({
           initialFocus={false}
           sideOffset={sideOffset}
           showArrow={false}
+          nativeButtonTrigger={false}
         >
           {measuredWidthObject && (
             <div

package/src/components/InspectorContainer.tsx

@@ -12,6 +12,7 @@ export const InspectorContainer = memo(
       header,
       children,
       fallback,
+      footer,
       showDividers,
       id,
       className,
@@ -20,6 +21,9 @@ export const InspectorContainer = memo(
       header?: React.ReactNode;
       children?: React.ReactNode;
       fallback?: React.ReactNode;
+      /** Pinned to the bottom edge when content is short; scrolls after the
+       * content when it overflows (pushed, not sticky). */
+      footer?: React.ReactNode;
       showDividers?: boolean;
       id?: string;
       className?: string;
@@ -43,10 +47,21 @@ export const InspectorContainer = memo(
         {header}
         {children ? (
           <ScrollArea className="n-flex-1 n-min-h-0">
-            <div className="n-flex n-flex-col n-relative">
+            <div
+              className="n-flex n-flex-col n-relative"
+              // Fill the viewport so a footer can be pushed to the bottom
+              // edge when the content is short.
+              style={footer != null ? { minHeight: "100%" } : undefined}
+            >
               {showDividers
                 ? withSeparatorElements(children, <Divider />)
                 : children}
+              {footer != null && (
+                <>
+                  <div className="n-flex-1" />
+                  {footer}
+                </>
+              )}
             </div>
           </ScrollArea>
         ) : fallback ? (

package/src/components/List.tsx

@@ -295,9 +295,24 @@ export const List = memoGeneric(
               }}
               onKeyDown={(e: React.KeyboardEvent) => {
                 if (e.key !== "Enter" && e.key !== " ") return;
+                // A key already claimed by a global shortcut (e.g. a
+                // capture-phase keymap handler) must never fall through to
+                // row selection/rename.
+                if (e.nativeEvent.defaultPrevented) return;
                 e.preventDefault();
+                // Fully consume the key so global shortcut handlers never
+                // double-handle the same press.
+                e.stopPropagation();
                 handleSelect(id, e);
-                if (e.key === "Enter") {
+                // Rename is strictly the plain Enter press — chorded Enter
+                // (or any other shortcut) must never open the row editor.
+                if (
+                  e.key === "Enter" &&
+                  !e.metaKey &&
+                  !e.ctrlKey &&
+                  !e.altKey &&
+                  !e.shiftKey
+                ) {
                   setRenamingId(id);
                 }
               }}
@@ -324,7 +339,9 @@ export const List = memoGeneric(
                 {thumbnail && (
                   <div
                     className={cx(
-                      "n-overflow-hidden n-flex-none n-flex n-items-center n-justify-center",
+                      // outline-none: focusable-by-click (tabIndex -1)
+                      // wrapper must never show the UA focus outline.
+                      "n-overflow-hidden n-flex-none n-flex n-items-center n-justify-center n-outline-none",
                       thumbnailSize === "auto" && thumbnailSizeMap[size],
                       isSelected && "n-text-selected-list-item-text",
                       roundedMap[size]
@@ -337,7 +354,12 @@ export const List = memoGeneric(
                 <div className="n-flex n-flex-col n-flex-1 n-w-0">
                   <div className="n-flex n-items-center n-min-h-input-height n-flex-1 n-gap-2">
                     <div
-                      className="n-flex-1 n-w-0 n-flex n-items-center"
+                      // outline-none: clicking the title focuses this
+                      // tabIndex -1 wrapper, and a later keydown can promote
+                      // it to :focus-visible — without this, that painted the
+                      // UA's black outline around the row title (reading as a
+                      // stuck rename editor). Focus styling lives on the row.
+                      className="n-flex-1 n-w-0 n-flex n-items-center n-outline-none"
                       tabIndex={-1}
                     >
                       {isRenaming ? (