@noya-app/noya-designsystem 0.1.82 → 0.1.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.82",
+  "version": "0.1.83",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -32,7 +32,7 @@
     "@noya-app/noya-colorpicker": "0.1.34",
     "@noya-app/noya-utils": "0.1.9",
     "@noya-app/noya-geometry": "0.1.17",
-    "@noya-app/noya-icons": "0.1.18",
+    "@noya-app/noya-icons": "0.1.19",
     "@noya-app/noya-keymap": "0.1.4",
     "@noya-app/noya-tailwind-config": "0.1.10",
     "@radix-ui/react-compose-refs": "^1.0.0",

package/src/components/SegmentedControl.tsx

@@ -2,7 +2,7 @@
 
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
-import { memoGeneric } from "@noya-app/react-utils";
+import { memoGeneric, useSize } from "@noya-app/react-utils";
 import React, {
   createContext,
   forwardRef,
@@ -20,6 +20,16 @@ import { renderIcon } from "./Icons";
 import { SelectableMenuItem } from "./internal/Menu";
 import { Tooltip } from "./Tooltip";
 
+// Layout constants — the Tailwind classes and px values must stay in sync.
+const CONTAINER_PADDING_X = "n-px-0.5";
+const CONTAINER_PADDING_X_PX = 4; // 0.5 * 4px = 2px each side = 4px total
+const ITEM_PADDING = "n-px-input-padding-x";
+const ITEM_PADDING_PX = 16; // n-px-input-padding-x * 2
+// Extra width required before switching from compact back to expanded mode
+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";
 type SegmentedControlVariant = "default" | "tabs" | "buttons";
 
@@ -28,6 +38,8 @@ type SegmentedControlContextValue = {
   colorScheme?: SegmentedControlColorScheme;
   onSelect?: (value: string) => void;
   itemWidth?: SegmentedControlItemWidth;
+  /** When true, items with icons hide their titles */
+  isCompact?: boolean;
 };
 
 const SegmentedControlContext = createContext<SegmentedControlContextValue>({
@@ -55,6 +67,13 @@ export interface SegmentedControlProps<T extends string> {
    * @default "auto"
    */
   itemWidth?: SegmentedControlItemWidth;
+  /**
+   * When enabled, automatically hides item titles and shows only icons
+   * when the control doesn't fit in its parent container.
+   * Requires all items to have icons.
+   * @default false
+   */
+  enableCompactMode?: boolean;
 }
 
 export type SegmentedControlItemProps<T extends string> = {
@@ -83,8 +102,17 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
   }: SegmentedControlItemProps<T>,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>
 ) {
-  const { colorScheme, onSelect, itemWidth = "auto" } =
-    useContext(SegmentedControlContext);
+  const {
+    colorScheme,
+    onSelect,
+    itemWidth = "auto",
+    isCompact,
+  } = useContext(SegmentedControlContext);
+
+  // In compact mode, hide title if we have an icon
+  const showTitle = !(isCompact && icon);
+  // Use title as tooltip when hidden (if no explicit tooltip)
+  const effectiveTooltip = !showTitle && !tooltip ? title : tooltip;
 
   const handlePointerDown = useCallback(
     (event: React.PointerEvent) => {
@@ -133,11 +161,9 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
             ? "active:n-text-button-text-active active:n-bg-button-background-active data-[pressed]:n-text-button-text-active data-[pressed]:n-bg-button-background-active"
             : variant === "default"
               ? // default variant: only text color, background handled by sliding indicator
-                colorScheme === "secondary"
+                colorScheme === "secondary" || colorScheme === "primary"
                 ? "data-[pressed]:n-text-white"
-                : colorScheme === "primary"
-                  ? "data-[pressed]:n-text-white"
-                  : "data-[pressed]:n-text-segmented-control-item-active-text"
+                : "data-[pressed]:n-text-segmented-control-item-active-text"
               : colorScheme === "secondary"
                 ? "data-[pressed]:n-bg-secondary data-[pressed]:n-text-white"
                 : colorScheme === "primary"
@@ -150,14 +176,16 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
         // hover
         variant === "buttons" && "hover:n-bg-button-background-hover",
         // spacing and borders
-        "n-px-input-padding-x",
+        ITEM_PADDING,
         variant === "default"
           ? "n-rounded after:n-content-[''] after:n-absolute after:n-right-0 after:n-top-0.5 after:n-bottom-0.5 after:n-w-px after:n-bg-divider last:after:n-hidden"
           : variant === "buttons"
             ? "n-rounded-sm n-max-w-fit"
             : "n-border-y-2 n-border-y-transparent data-[pressed]:n-border-b-primary",
-        // icon only buttons
+        // icon only buttons (explicit or due to compact mode)
         variant === "buttons" && title === "" && icon && "n-min-w-input-height",
+        // icon only in compact mode
+        isCompact && icon && "n-min-w-input-height",
         className
       )}
       {...props}
@@ -170,54 +198,48 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
         )}
       >
         {icon && renderIcon(icon)}
-        {title}
+        {showTitle && title}
       </span>
     </Toggle>
   );
 
-  return tooltip ? (
-    <Tooltip content={tooltip}>{itemElement}</Tooltip>
+  return effectiveTooltip ? (
+    <Tooltip content={effectiveTooltip}>{itemElement}</Tooltip>
   ) : (
     itemElement
   );
 });
 
-export const SegmentedControl = memoGeneric(function SegmentedControl<
-  T extends string,
->({
-  id: idProp,
-  value,
-  onValueChange,
-  colorScheme,
-  allowEmpty,
-  items,
-  variant = "default",
-  className,
-  style,
-  itemWidth = "auto",
-}: SegmentedControlProps<T>) {
-  const { fieldId: id } = useLabel({ fieldId: idProp });
-
-  // Track if we should animate (skip initial mount)
+function useIndicatorPosition({
+  containerRef,
+  itemRefs,
+  selectedIndex,
+  variant,
+  itemCount,
+  isCompact,
+}: {
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  itemRefs: React.RefObject<(HTMLButtonElement | null)[]>;
+  selectedIndex: number;
+  variant: SegmentedControlVariant;
+  itemCount: number;
+  /** Triggers re-measurement when compact mode changes item widths */
+  isCompact: boolean;
+}) {
   const hasInitialized = useRef(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const isResizingRef = useRef(false);
+  const resizeTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
-  // Indicator position based on measured item dimensions
   const [indicatorStyle, setIndicatorStyle] = useState<{
     left: number;
     width: number;
   } | null>(null);
 
-  // Trigger recalculation when container resizes
-  const [resizeTrigger, setResizeTrigger] = useState(0);
-
-  const selectedIndex = useMemo(() => {
-    if (!value) return -1;
-    return items.findIndex((item) => item.value === value);
-  }, [value, items]);
+  const measureIndicator = useCallback(() => {
+    // Reference these to trigger re-measurement when items change size
+    void itemCount;
+    void isCompact;
 
-  useLayoutEffect(() => {
     if (variant !== "default" || selectedIndex < 0) {
       setIndicatorStyle(null);
       return;
@@ -239,9 +261,10 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
       width: itemRect.width,
     });
 
-    // Enable animation after first measurement
     hasInitialized.current = true;
-  }, [selectedIndex, variant, items.length, resizeTrigger]);
+  }, [containerRef, itemRefs, selectedIndex, variant, itemCount, isCompact]);
+
+  useLayoutEffect(measureIndicator, [measureIndicator]);
 
   // Watch for container resize to recalculate indicator position
   useLayoutEffect(() => {
@@ -249,12 +272,167 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
     if (!container || variant !== "default") return;
 
     const observer = new ResizeObserver(() => {
-      setResizeTrigger((prev) => prev + 1);
+      isResizingRef.current = true;
+      clearTimeout(resizeTimeoutRef.current);
+      resizeTimeoutRef.current = setTimeout(() => {
+        isResizingRef.current = false;
+      }, RESIZE_SETTLE_MS);
+      measureIndicator();
     });
     observer.observe(container);
 
-    return () => observer.disconnect();
-  }, [variant]);
+    return () => {
+      observer.disconnect();
+      clearTimeout(resizeTimeoutRef.current);
+    };
+  }, [containerRef, variant, measureIndicator]);
+
+  return { indicatorStyle, hasInitialized, isResizingRef };
+}
+
+function useCompactMode({
+  containerRef,
+  itemRefs,
+  variant,
+  items,
+  enabled,
+}: {
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  itemRefs: React.RefObject<(HTMLButtonElement | null)[]>;
+  variant: SegmentedControlVariant;
+  items: SegmentedControlItemProps<string>[];
+  enabled: boolean;
+}) {
+  const containerSize = useSize(containerRef, "width");
+  const expandedWidthRef = useRef<number | null>(null);
+  const isCompactRef = useRef(false);
+  const [isCompact, setIsCompact] = useState(false);
+
+  const allItemsHaveIcons = useMemo(
+    () => items.every((item) => item.icon),
+    [items]
+  );
+
+  const itemsKey = useMemo(
+    () =>
+      items.map((item) => `${item.value}-${item.icon}-${item.title}`).join("|"),
+    [items]
+  );
+
+  // Reset expanded width measurement when items change
+  useLayoutEffect(() => {
+    expandedWidthRef.current = null;
+    isCompactRef.current = false;
+    setIsCompact(false);
+  }, [itemsKey]);
+
+  // Calculate compact mode based on whether items fit in parent
+  useLayoutEffect(() => {
+    if (!enabled) return;
+
+    const container = containerRef.current;
+    if (!container || variant !== "default" || !allItemsHaveIcons) {
+      return;
+    }
+
+    const validItems = itemRefs.current.filter(Boolean);
+    if (validItems.length !== items.length) return;
+
+    const availableWidth =
+      (containerSize?.width ?? container.clientWidth) - CONTAINER_PADDING_X_PX;
+
+    // Use ref to check current compact state to avoid re-triggering on state change
+    if (!isCompactRef.current) {
+      // Check if any item's content is being truncated
+      // Compare inner span width (content) to button clientWidth (available space)
+      // Note: Grid with minmax(min-content, 1fr) prevents container overflow,
+      // so we must check individual items for truncation instead
+      const isOverflowing = validItems.some((item) => {
+        const span = item!.querySelector("span");
+        if (!span) return false;
+        const contentWidth = span.scrollWidth;
+        const availableInButton = item!.clientWidth - ITEM_PADDING_PX;
+        return contentWidth >= availableInButton - 1; // -1 for rounding tolerance
+      });
+
+      if (isOverflowing) {
+        // Store the width needed for expanded mode (for hysteresis calculation)
+        const totalItemsWidth = validItems.reduce((sum, item) => {
+          const span = item!.querySelector("span");
+          const contentWidth = span ? span.scrollWidth : 0;
+          return sum + contentWidth + ITEM_PADDING_PX;
+        }, 0);
+        expandedWidthRef.current = totalItemsWidth;
+        isCompactRef.current = true;
+        setIsCompact(true);
+      }
+    } else {
+      // Currently compact - check if we can go back to expanded
+      const expandedWidth = expandedWidthRef.current;
+      if (!expandedWidth) return;
+
+      if (availableWidth >= expandedWidth + EXPANSION_THRESHOLD_PX) {
+        isCompactRef.current = false;
+        expandedWidthRef.current = null; // Reset to re-measure next time
+        setIsCompact(false);
+      }
+    }
+  }, [
+    enabled,
+    containerRef,
+    itemRefs,
+    variant,
+    allItemsHaveIcons,
+    containerSize?.width,
+    itemsKey,
+    items.length,
+  ]);
+
+  return isCompact;
+}
+
+export const SegmentedControl = memoGeneric(function SegmentedControl<
+  T extends string,
+>({
+  id: idProp,
+  value,
+  onValueChange,
+  colorScheme,
+  allowEmpty,
+  items,
+  variant = "default",
+  className,
+  style,
+  itemWidth = "auto",
+  enableCompactMode = false,
+}: SegmentedControlProps<T>) {
+  const { fieldId: id } = useLabel({ fieldId: idProp });
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const selectedIndex = useMemo(() => {
+    if (!value) return -1;
+    return items.findIndex((item) => item.value === value);
+  }, [value, items]);
+
+  const isCompact = useCompactMode({
+    containerRef,
+    itemRefs,
+    variant,
+    items,
+    enabled: enableCompactMode,
+  });
+
+  const { indicatorStyle, hasInitialized, isResizingRef } =
+    useIndicatorPosition({
+      containerRef,
+      itemRefs,
+      selectedIndex,
+      variant,
+      itemCount: items.length,
+      isCompact,
+    });
 
   const handleSelect = useCallback(
     (newValue: string) => {
@@ -270,8 +448,8 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
   );
 
   const contextValue = useMemo(
-    () => ({ colorScheme, onSelect: handleSelect, itemWidth }),
-    [colorScheme, handleSelect, itemWidth]
+    () => ({ colorScheme, onSelect: handleSelect, itemWidth, isCompact }),
+    [colorScheme, handleSelect, itemWidth, isCompact]
   );
 
   const indicatorBgClass =
@@ -293,7 +471,7 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
           variant === "default" &&
             (itemWidth === "fit" ? "n-flex n-w-fit" : "n-grid"),
           variant === "default" &&
-            "n-min-h-input-height n-bg-input-background n-rounded n-py-0.5 n-px-0.5",
+            `n-min-h-input-height n-bg-input-background n-rounded n-py-0.5 ${CONTAINER_PADDING_X}`,
           variant !== "default" && "n-flex",
           variant === "tabs" && "n-gap-1.5 n-min-h-[33px]",
           variant === "buttons" && "n-gap-1.5 n-min-h-input-height",
@@ -317,6 +495,7 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
               "n-absolute n-top-0.5 n-bottom-0.5 n-rounded n-shadow-segment n-pointer-events-none",
               indicatorBgClass,
               hasInitialized.current &&
+                !isResizingRef.current &&
                 "n-transition-[left,width] n-duration-200 n-ease-out"
             )}
             style={{

package/src/components/resizablePanels/Panel.tsx

@@ -25,7 +25,17 @@ interface PanelProps {
 
 export const Panel = forwardRef<ImperativePanelHandle, PanelProps>(
   function Panel(
-    { id: propId, order, className, defaultSize, minSize, maxSize, collapsible, defaultCollapsed, children },
+    {
+      id: propId,
+      order,
+      className,
+      defaultSize,
+      minSize,
+      maxSize,
+      collapsible,
+      defaultCollapsed,
+      children,
+    },
     ref
   ) {
     const generatedId = useId();
@@ -56,7 +66,17 @@ export const Panel = forwardRef<ImperativePanelHandle, PanelProps>(
       return () => {
         unregisterPanel(id);
       };
-    }, [id, order, defaultSize, minSize, maxSize, collapsible, defaultCollapsed, registerPanel, unregisterPanel]);
+    }, [
+      id,
+      order,
+      defaultSize,
+      minSize,
+      maxSize,
+      collapsible,
+      defaultCollapsed,
+      registerPanel,
+      unregisterPanel,
+    ]);
 
     const size = getPanelSize(id);
     const isFlexPanel = defaultSize === undefined;

package/src/components/resizablePanels/PanelGroup.tsx

@@ -144,17 +144,24 @@ export const PanelGroup = forwardRef<ImperativePanelGroupHandle, PanelGroupProps
     const registerPanel = useCallback(
       (panel: PanelRegistration) => {
         setPanels((prev) => {
+          // Check saved sizes first, then use defaultCollapsed
           const savedSizes = loadSavedSizes(autoSaveId);
           const savedSize = savedSizes?.[panel.id];
-          // Use saved size if available, otherwise check defaultCollapsed, then use defaultSize
           const hasSavedSize = savedSize !== undefined;
-          const collapsed = hasSavedSize
-            ? savedSize === 0 && !!panel.collapsible
-            : !!panel.defaultCollapsed && !!panel.collapsible;
-          const initialSize = hasSavedSize
-            ? savedSize
-            : collapsed
-              ? 0
+
+          let collapsed: boolean;
+          if (hasSavedSize) {
+            // Use saved state
+            collapsed = savedSize === 0 && !!panel.collapsible;
+          } else {
+            // Use defaultCollapsed
+            collapsed = !!panel.defaultCollapsed && !!panel.collapsible;
+          }
+
+          const initialSize = collapsed
+            ? 0
+            : hasSavedSize
+              ? savedSize
               : panel.defaultSize ?? 0;
 
           const newPanels = new Map(prev);