@noya-app/noya-designsystem 0.1.94 → 0.1.95

package/src/components/Popover.tsx

@@ -31,6 +31,8 @@ interface Props {
   style?: React.CSSProperties;
   portalContainer?: HTMLElement | null;
   side?: "top" | "bottom" | "left" | "right";
+  /** Cross-axis alignment against the anchor. @default "center" */
+  align?: "start" | "center" | "end";
   initialFocus?: React.ComponentProps<
     typeof PopoverPrimitive.Popup
   >["initialFocus"];
@@ -39,6 +41,13 @@ interface Props {
    * Return false to prevent the popover from closing.
    */
   shouldCloseOnInteractOutside?: (event: PointerEvent) => boolean;
+  /**
+   * Whether the trigger ultimately renders a native `<button>`. Pass false
+   * for non-button triggers (e.g. an input container) so Base UI doesn't log
+   * a nativeButton mismatch console error.
+   * @default true
+   */
+  nativeButtonTrigger?: boolean;
 }
 
 export const popoverStyle = {
@@ -54,6 +63,7 @@ export function Popover({
   closable,
   open,
   side,
+  align = "center",
   sideOffset = 4,
   showArrow = true,
   onOpenChange,
@@ -63,6 +73,7 @@ export function Popover({
   style,
   initialFocus,
   shouldCloseOnInteractOutside,
+  nativeButtonTrigger = true,
 }: Props) {
   const defaultId = useId();
   const portalScopeId = usePortalScopeId();
@@ -91,6 +102,7 @@ export function Popover({
   return (
     <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange}>
       <PopoverPrimitive.Trigger
+        nativeButton={nativeButtonTrigger}
         render={(triggerProps) => {
           const element = React.isValidElement(trigger) ? (
             trigger
@@ -122,7 +134,7 @@ export function Popover({
           {...portalScopeProps(portalScopeId)}
           anchor={anchorElement}
           side={side}
-          align="center"
+          align={align}
           sideOffset={sideOffset}
           collisionPadding={8}
           arrowPadding={2}

package/src/components/Section.tsx

@@ -6,7 +6,6 @@ import {
   IconName,
   IndentContext,
   INPUT_HEIGHT,
-  InspectorPrimitives,
   renderIcon,
   Spacer,
   Text,
@@ -14,6 +13,37 @@ import {
 } from "@noya-app/noya-designsystem";
 import { clientStorage, usePersistentStateString } from "@noya-app/react-utils";
 import React, { CSSProperties, memo, useMemo } from "react";
+import { cx } from "../utils/classNames";
+
+// Local copies of the bare section-header shells (the shared set moved to
+// @noya-app/inspector as `FieldLayout`, which this package cannot depend on
+// without a cycle). Keep the class lists in sync with FieldLayout.
+const SectionHeaderShell = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cx(`n-flex n-items-center`, className)} {...props} />
+);
+
+const TitleShell = ({
+  className,
+  $textStyle,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  $textStyle?: "small" | "heading5" | "heading4" | "heading3";
+}) => (
+  <div
+    className={cx(
+      `n-flex n-select-none ${
+        $textStyle
+          ? `${textStyles[$textStyle]} n-text-text`
+          : "n-font-sans n-text-label n-text-text-muted n-font-semibold"
+      } `,
+      className
+    )}
+    {...props}
+  />
+);
 
 const titleIconStyle: CSSProperties = {
   marginRight: "6px",
@@ -57,19 +87,13 @@ export function SectionHeader({
   );
 
   const titleElement = title ? (
-    <InspectorPrimitives.Title
-      $textStyle={titleTextStyle}
-      className={titleClassName}
-    >
+    <TitleShell $textStyle={titleTextStyle} className={titleClassName}>
       {title}
-    </InspectorPrimitives.Title>
+    </TitleShell>
   ) : null;
 
   return (
-    <InspectorPrimitives.SectionHeader
-      style={headerStyle}
-      className={className}
-    >
+    <SectionHeaderShell style={headerStyle} className={className}>
       {titleIcon && (
         <div style={titleIconStyle} className={textStyles[titleTextStyle]}>
           {"\u200B"}
@@ -98,7 +122,7 @@ export function SectionHeader({
         </Text>
       )}
       {right}
-    </InspectorPrimitives.SectionHeader>
+    </SectionHeaderShell>
   );
 }
 

package/src/components/SegmentedControl.tsx

@@ -30,7 +30,11 @@ const EXPANSION_THRESHOLD_PX = 20;
 // Debounce delay (ms) before re-enabling indicator transition after resize stops
 const RESIZE_SETTLE_MS = 150;
 
-type SegmentedControlColorScheme = "primary" | "secondary";
+/**
+ * "primaryTint" is Figma-UI3-style: a light primary-tinted active segment
+ * with a primary-colored glyph, instead of the solid primary fill.
+ */
+type SegmentedControlColorScheme = "primary" | "secondary" | "primaryTint";
 type SegmentedControlVariant = "default" | "tabs" | "buttons";
 
 type SegmentedControlContextValue = {
@@ -187,12 +191,16 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
               ? // default variant: only text color, background handled by sliding indicator
                 colorScheme === "secondary" || colorScheme === "primary"
                 ? "data-[pressed]:n-text-white"
-                : "data-[pressed]:n-text-segmented-control-item-active-text"
+                : colorScheme === "primaryTint"
+                  ? "data-[pressed]:n-text-primary"
+                  : "data-[pressed]:n-text-segmented-control-item-active-text"
               : colorScheme === "secondary"
                 ? "data-[pressed]:n-bg-secondary data-[pressed]:n-text-white"
                 : colorScheme === "primary"
                   ? "data-[pressed]:n-bg-primary data-[pressed]:n-text-white"
-                  : "data-[pressed]:n-bg-segmented-control-item-active-background data-[pressed]:n-text-segmented-control-item-active-text",
+                  : colorScheme === "primaryTint"
+                    ? "data-[pressed]:n-bg-primary-pastel data-[pressed]:n-text-primary"
+                    : "data-[pressed]:n-bg-segmented-control-item-active-background data-[pressed]:n-text-segmented-control-item-active-text",
         "focus-visible:n-z-interactable",
         // checked default (all colorSchemes) - hide separators near selected
         variant === "default" &&
@@ -485,7 +493,9 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
       ? "n-bg-secondary"
       : colorScheme === "primary"
         ? "n-bg-primary"
-        : "n-bg-segmented-control-item-active-background";
+        : colorScheme === "primaryTint"
+          ? "n-bg-primary-pastel"
+          : "n-bg-segmented-control-item-active-background";
 
   return (
     <SegmentedControlContext.Provider value={contextValue}>

package/src/components/Toolbar.tsx

@@ -3,6 +3,16 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import { cx } from "../utils/classNames";
 import { toolbarTransparentStyle } from "./BaseToolbar";
+import { ToolbarItems } from "./ToolbarItems";
+
+export type {
+  ToolbarGroupItem,
+  ToolbarItem,
+  ToolbarItemsProps,
+  ToolbarPopoverItem,
+  ToolbarSeparatorItem,
+} from "./ToolbarItems";
+export { ToolbarItems } from "./ToolbarItems";
 
 export type ToolbarSize = "small" | "medium";
 
@@ -14,7 +24,7 @@ export interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
   size?: ToolbarSize;
 }
 
-export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
+const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarProps>(
   function Toolbar(
     { children, className, role = "toolbar", size = "medium", style, ...props },
     ref
@@ -36,3 +46,8 @@ export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
     );
   }
 );
+
+/** The floating toolbar surface. `Toolbar.Items` renders a declarative
+ * `ToolbarItem[]` (icon buttons, separators, split-button groups, popovers)
+ * inside it. */
+export const Toolbar = Object.assign(ToolbarRoot, { Items: ToolbarItems });

package/src/components/ToolbarItems.tsx

@@ -0,0 +1,322 @@
+"use client";
+
+import React, { ReactNode, useEffect, useState } from "react";
+import { cx } from "../utils/classNames";
+import { ToolbarShortcut } from "./AppToolbar";
+import { DividerVertical } from "./Divider";
+import { DropdownMenu } from "./DropdownMenu";
+import { renderIcon } from "./Icons";
+import { MenuItemIcon, SelectableMenuItem } from "./internal/Menu";
+import { Popover } from "./Popover";
+import { Tooltip } from "./Tooltip";
+
+export type ToolbarSeparatorItem = { type: "separator" };
+
+/** A split-button slot: the primary button activates the group's
+ * representative tool and the adjacent chevron opens a flyout menu listing
+ * every item in the group. */
+export type ToolbarGroupItem<T extends string> = {
+  type: "group";
+  id: string;
+  items: SelectableMenuItem<T>[];
+};
+
+/** A button (icon or text) that opens a Popover with arbitrary content. */
+export type ToolbarPopoverItem = {
+  type: "popover";
+  id: string;
+  title: ReactNode;
+  icon?: MenuItemIcon;
+  content: ReactNode | ((close: () => void) => ReactNode);
+};
+
+/**
+ * A declarative item for `ToolbarItems` (`Toolbar.Items`). Selectable items
+ * reuse the menu system's `SelectableMenuItem`, so the same definitions can
+ * feed a toolbar, a dropdown, or a context menu.
+ */
+export type ToolbarItem<T extends string> =
+  | SelectableMenuItem<T>
+  | ToolbarSeparatorItem
+  | ToolbarGroupItem<T>
+  | ToolbarPopoverItem;
+
+type PopupSide = "top" | "bottom" | "left" | "right";
+
+export interface ToolbarItemsProps<T extends string> {
+  items: ToolbarItem<T>[];
+  onSelect: (value: T) => void;
+  /**
+   * Side the group flyouts and popovers open on. Bottom-of-screen toolbars
+   * want "top".
+   * @default "top"
+   */
+  side?: PopupSide;
+  /** @default "top" */
+  tooltipSide?: PopupSide;
+}
+
+const POPUP_OFFSET = 10;
+
+function labelForTitle(title: ReactNode): string | undefined {
+  return typeof title === "string" ? title : undefined;
+}
+
+/** Square icon button styled by the standard light tokens: transparent on the
+ * toolbar surface, `input-background-light` on hover, and the solid primary
+ * square with a white glyph when checked (the design system's active-tool
+ * treatment). */
+function ToolbarItemButton<T extends string>({
+  item,
+  tooltipSide,
+  onClick,
+}: {
+  item: SelectableMenuItem<T>;
+  tooltipSide: PopupSide;
+  onClick: () => void;
+}) {
+  const label = labelForTitle(item.title);
+
+  const button = (
+    <button
+      type="button"
+      aria-label={label}
+      aria-pressed={item.checked ?? false}
+      disabled={item.disabled}
+      onClick={onClick}
+      className={cx(
+        "n-flex n-h-input-height n-flex-none n-cursor-default n-items-center n-justify-center n-rounded n-border-0 n-outline-none n-transition-colors focus-visible:n-ring-2 focus-visible:n-ring-primary",
+        // Icon items are square at the design system's floating-toolbar
+        // control size (27px, see Button variant="floating" and
+        // INPUT_HEIGHT); text titles get auto width with the same padding
+        // and type style as the popover text trigger.
+        item.icon
+          ? "n-w-input-height n-p-0"
+          : "n-px-2 n-py-0 n-font-sans n-text-[12px] n-font-medium",
+        item.checked
+          ? "n-bg-primary n-text-white"
+          : "n-bg-transparent n-text-text hover:n-bg-input-background-light",
+        item.disabled && "n-pointer-events-none n-opacity-30"
+      )}
+    >
+      {item.icon ? renderIcon(item.icon) : item.title}
+    </button>
+  );
+
+  if (item.disabled) return button;
+
+  return (
+    <Tooltip
+      side={tooltipSide}
+      sideOffset={POPUP_OFFSET}
+      content={
+        item.tooltip ??
+        (item.shortcut ? (
+          <ToolbarShortcut shortcut={item.shortcut} label={item.title} />
+        ) : (
+          item.title
+        ))
+      }
+    >
+      {button}
+    </Tooltip>
+  );
+}
+
+/** Returns a plain <button> element (not a component) so DropdownMenu's
+ * native-button trigger detection works. */
+function renderGroupChevron({
+  label,
+  open,
+  disabled,
+}: {
+  label: string;
+  open: boolean;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      disabled={disabled}
+      className={cx(
+        "n--ml-0.5 n-flex n-h-input-height n-w-3.5 n-flex-none n-cursor-default n-items-center n-justify-center n-rounded n-border-0 n-p-0 n-outline-none n-transition-colors focus-visible:n-ring-2 focus-visible:n-ring-primary",
+        open
+          ? "n-bg-input-background-light n-text-text"
+          : "n-bg-transparent n-text-text-muted hover:n-bg-input-background-light hover:n-text-text",
+        disabled && "n-pointer-events-none n-opacity-30"
+      )}
+    >
+      {renderIcon("DropdownChevronIcon")}
+    </button>
+  );
+}
+
+/** The split-button group: primary button shows the representative item
+ * (checked child > last-used child > first child) and the narrow chevron
+ * opens the group's items in a dropdown flyout. */
+function ToolbarItemGroup<T extends string>({
+  group,
+  onSelect,
+  side,
+  tooltipSide,
+}: {
+  group: ToolbarGroupItem<T>;
+  onSelect: (value: T) => void;
+  side: PopupSide;
+  tooltipSide: PopupSide;
+}) {
+  const { items } = group;
+  const checkedItem = items.find((item) => item.checked);
+  const [lastUsed, setLastUsed] = useState<T | undefined>(undefined);
+
+  const checkedValue = checkedItem?.value;
+  useEffect(() => {
+    if (checkedValue !== undefined) setLastUsed(checkedValue);
+  }, [checkedValue]);
+
+  const representative =
+    checkedItem ?? items.find((item) => item.value === lastUsed) ?? items[0];
+
+  if (!representative) return null;
+
+  const allDisabled = items.every((item) => item.disabled);
+  const label = labelForTitle(representative.title);
+  const chevronLabel = `${label ?? "More"} tools`;
+
+  return (
+    <div className="n-flex n-items-center">
+      <ToolbarItemButton
+        item={{ ...representative, checked: checkedItem !== undefined }}
+        tooltipSide={tooltipSide}
+        onClick={() => {
+          setLastUsed(representative.value);
+          onSelect(representative.value);
+        }}
+      />
+      {allDisabled ? (
+        // Not wrapped in DropdownMenu (whose trigger would re-enable the
+        // native button) — a fully disabled group has nothing to open.
+        renderGroupChevron({
+          label: chevronLabel,
+          open: false,
+          disabled: true,
+        })
+      ) : (
+        <DropdownMenu
+          items={items}
+          side={side}
+          sideOffset={POPUP_OFFSET + 4}
+          // Pin the flyout's left edge to the group instead of letting it
+          // float centered under the narrow chevron (27px button + 2px gap).
+          align="start"
+          alignOffset={-29}
+          shouldBindKeyboardShortcuts={false}
+          onSelect={(value) => {
+            setLastUsed(value);
+            onSelect(value);
+          }}
+        >
+          {({ open }) =>
+            renderGroupChevron({
+              label: chevronLabel,
+              open,
+            })
+          }
+        </DropdownMenu>
+      )}
+    </div>
+  );
+}
+
+function ToolbarItemPopover({
+  item,
+  side,
+}: {
+  item: ToolbarPopoverItem;
+  side: PopupSide;
+}) {
+  const [open, setOpen] = useState(false);
+  const label = labelForTitle(item.title);
+
+  const trigger = (
+    <button
+      type="button"
+      aria-label={label}
+      className={cx(
+        "n-flex n-h-input-height n-flex-none n-cursor-default n-items-center n-justify-center n-rounded n-border-0 n-outline-none n-transition-colors focus-visible:n-ring-2 focus-visible:n-ring-primary",
+        item.icon
+          ? "n-w-input-height n-p-0"
+          : "n-px-2 n-font-sans n-text-[12px] n-font-medium",
+        open
+          ? "n-bg-input-background-light n-text-text"
+          : "n-bg-transparent n-text-text hover:n-bg-input-background-light"
+      )}
+    >
+      {item.icon ? renderIcon(item.icon) : item.title}
+    </button>
+  );
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={setOpen}
+      side={side}
+      showArrow={false}
+      sideOffset={POPUP_OFFSET}
+      trigger={trigger}
+    >
+      {typeof item.content === "function"
+        ? item.content(() => setOpen(false))
+        : item.content}
+    </Popover>
+  );
+}
+
+/**
+ * Renders a flat list of `ToolbarItem`s inside a `Toolbar`, styled entirely
+ * by the standard (light) theme tokens. Also available as `Toolbar.Items`.
+ */
+export function ToolbarItems<T extends string>({
+  items,
+  onSelect,
+  side = "top",
+  tooltipSide = "top",
+}: ToolbarItemsProps<T>) {
+  return (
+    <>
+      {items.map((item, index) => {
+        if (item.type === "separator") {
+          return <DividerVertical key={`separator-${index}`} />;
+        }
+
+        if (item.type === "group") {
+          return (
+            <ToolbarItemGroup
+              key={item.id}
+              group={item}
+              onSelect={onSelect}
+              side={side}
+              tooltipSide={tooltipSide}
+            />
+          );
+        }
+
+        if (item.type === "popover") {
+          return (
+            <ToolbarItemPopover key={item.id} item={item} side={side} />
+          );
+        }
+
+        return (
+          <ToolbarItemButton
+            key={item.value}
+            item={item}
+            tooltipSide={tooltipSide}
+            onClick={() => onSelect(item.value)}
+          />
+        );
+      })}
+    </>
+  );
+}

package/src/components/Tooltip.tsx

@@ -15,6 +15,9 @@ interface Props {
   sideOffset?: number;
   side?: "top" | "bottom" | "left" | "right";
   portalContainer?: HTMLElement | null;
+  /** Overrides the popup chrome entirely (e.g. a dark chip over a dark
+   * toolbar). The default light surface is used when omitted. */
+  contentClassName?: string;
 }
 
 export const Tooltip = React.memo(function Tooltip({
@@ -23,6 +26,7 @@ export const Tooltip = React.memo(function Tooltip({
   sideOffset = 2,
   side = "bottom",
   portalContainer,
+  contentClassName,
 }: Props) {
   const portalScopeId = usePortalScopeId();
 
@@ -44,7 +48,10 @@ export const Tooltip = React.memo(function Tooltip({
             className="n-z-menu"
           >
             <TooltipPrimitive.Popup
-              className={`${textStyles.small} n-text-text n-rounded-sm n-p-2 n-bg-popover-background n-shadow-tooltip n-z-menu`}
+              className={
+                contentClassName ??
+                `${textStyles.small} n-text-text n-rounded-sm n-p-2 n-bg-popover-background n-shadow-tooltip n-z-menu`
+              }
             >
               {content}
             </TooltipPrimitive.Popup>