@noya-app/noya-designsystem 0.1.64 → 0.1.65

package/src/components/Progress.tsx

@@ -10,11 +10,15 @@ type ColorScheme = "normal" | "warning" | "primary" | "secondary";
 export function Progress({
   value,
   colorScheme = "normal",
+  color,
   className,
-  style,
+  style: styleProp,
 }: {
+  /** A value between 0 and 100. */
   value: number;
+
   colorScheme?: ColorScheme;
+  color?: string;
   className?: string;
   style?: React.CSSProperties;
 }) {
@@ -22,26 +26,32 @@ export function Progress({
   const transformStyles = React.useMemo(
     () => ({
       transform: `translateX(-${100 - clampedValue}%)`,
+      backgroundColor: color,
     }),
-    [clampedValue]
+    [color, clampedValue]
+  );
+
+  const style = React.useMemo(
+    () => ({ transform: "translateZ(0)", ...styleProp }),
+    [styleProp]
   );
 
   return (
     <ProgressPrimitive.Root
       className={cx(
-        `relative overflow-hidden bg-input-background h-[5px]`,
+        `n-relative n-overflow-hidden n-bg-input-background n-h-[5px]`,
         className
       )}
-      style={{ transform: "translateZ(0)", ...style }}
+      style={style}
       value={clampedValue}
     >
       <ProgressPrimitive.Indicator
         className={cx(
-          "transition-[transform_660ms_cubic-bezier(0.65,0,0.35,1) w-full h-full",
-          colorScheme === "primary" && "bg-primary",
-          colorScheme === "secondary" && "bg-secondary",
-          colorScheme === "warning" && "bg-warning",
-          colorScheme === "normal" && "bg-text"
+          "n-transition-[transform_660ms_cubic-bezier(0.65,0,0.35,1)] n-w-full n-h-full",
+          colorScheme === "primary" && "n-bg-primary",
+          colorScheme === "secondary" && "n-bg-secondary",
+          colorScheme === "warning" && "n-bg-warning",
+          colorScheme === "normal" && "n-bg-text"
         )}
         style={transformStyles}
       />

package/src/components/ResizableContainer.tsx

@@ -0,0 +1,187 @@
+"use client";
+import { createClickCounter } from "@noya-app/react-utils";
+import React, { ReactNode, useCallback, useRef, useState } from "react";
+
+interface ResizableContainerProps {
+  children: ReactNode | ((children: { width?: number }) => ReactNode);
+  minWidth: number;
+  maxWidth?: number;
+  style?: React.CSSProperties;
+  innerStyle?: React.CSSProperties;
+  handleContainerStyle?: React.CSSProperties;
+  handleStyle?: React.CSSProperties;
+  className?: string;
+  onChangeWidth?: (width: number) => void;
+  shouldResetWidthOnGestureEnd?: boolean;
+}
+
+export const ResizableContainer: React.FC<ResizableContainerProps> = ({
+  children,
+  minWidth,
+  maxWidth,
+  style,
+  innerStyle,
+  handleContainerStyle,
+  handleStyle,
+  className,
+  onChangeWidth,
+  shouldResetWidthOnGestureEnd: shouldResetWidth,
+}) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const resizeableRef = useRef<HTMLDivElement | null>(null);
+  const handleRef = useRef<HTMLDivElement | null>(null);
+  const clickCounter = useRef(createClickCounter({ delay: 250 }));
+
+  const [width, setWidth] = useState<number>();
+  const [drag, setDrag] = useState<{
+    startX: number;
+    initialWidth: number;
+    minWidth: number;
+    maxWidth: number;
+  }>();
+
+  const handlePointerDown = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const containerWidth =
+        containerRef.current?.getBoundingClientRect().width;
+      const resizeableWidth =
+        resizeableRef.current?.getBoundingClientRect().width;
+
+      if (containerWidth === undefined) return;
+      if (resizeableWidth === undefined) return;
+
+      // start pointer capture
+      handleRef.current?.setPointerCapture(event.pointerId);
+
+      setDrag({
+        startX: event.clientX,
+        initialWidth: resizeableWidth,
+        minWidth: minWidth,
+        maxWidth: maxWidth ?? containerWidth,
+      });
+
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [maxWidth, minWidth]
+  );
+
+  const handlePointerMove = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      if (!drag) return;
+
+      const delta = event.clientX - drag.startX;
+
+      let newWidth = clamp(
+        drag.initialWidth + delta,
+        drag.minWidth,
+        drag.maxWidth
+      );
+
+      setWidth(newWidth);
+      onChangeWidth?.(newWidth);
+
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [drag, onChangeWidth]
+  );
+
+  const handlePointerUp = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      setDrag(undefined);
+
+      // Release pointer
+      handleRef.current?.releasePointerCapture(event.pointerId);
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      const clickCount = clickCounter.current.handleClick({
+        x: event.clientX,
+        y: event.clientY,
+      });
+
+      if (clickCount >= 2 || shouldResetWidth) {
+        setWidth(undefined);
+      }
+    },
+    [shouldResetWidth]
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      id={"resize"}
+      style={{ position: "relative", ...style }}
+      className={className}
+    >
+      <div
+        ref={resizeableRef}
+        style={{
+          position: "relative",
+          width: width !== undefined ? `${width}px` : "auto",
+          ...innerStyle,
+        }}
+      >
+        {typeof children === "function" ? children({ width }) : children}
+        <div
+          ref={handleRef}
+          style={{
+            position: "absolute",
+            right: "-1.25rem",
+            bottom: 0,
+            top: 0,
+            display: "flex",
+            width: "1rem",
+            cursor: "ew-resize",
+            touchAction: "none",
+            flexDirection: "column",
+            justifyContent: "center",
+            paddingLeft: "5px",
+            paddingRight: "5px",
+            opacity: 1,
+            ...handleContainerStyle,
+          }}
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerCancel={handlePointerUp}
+        >
+          <div
+            style={{
+              position: "relative",
+              display: "flex",
+              height: "2.5rem",
+              width: "100%",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "9999px",
+              backgroundColor: "rgba(17, 24, 39, 0.5)",
+              ...handleStyle,
+            }}
+          ></div>
+        </div>
+        {/* Prevent iframe from capturing pointer events */}
+        {drag && (
+          <div
+            style={{
+              position: "fixed",
+              inset: 0,
+              zIndex: 50,
+              cursor: "ew-resize",
+            }}
+            onPointerMove={handlePointerMove}
+            onPointerUp={handlePointerUp}
+            onPointerCancel={handlePointerUp}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}

package/src/components/RingProgress.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { clamp } from "@noya-app/noya-utils";
+import * as React from "react";
+import { cx } from "../utils/classNames";
+
+type ColorScheme = "normal" | "warning" | "primary" | "secondary";
+
+export function RingProgress({
+  value,
+  dividedBy = 100,
+  size = 24,
+  thickness = 3,
+  colorScheme = "normal",
+  color,
+  trackColor,
+  className,
+  style,
+  ariaLabel,
+}: {
+  /** Current value (numerator). */
+  value: number;
+  /** Total value representing 100%. Defaults to 100. */
+  dividedBy?: number;
+  /** Diameter in pixels of the ring (outer size). */
+  size?: number;
+  /** Stroke width of the ring in pixels. */
+  thickness?: number;
+  /** Ring color scheme, aligned with Progress component. */
+  colorScheme?: ColorScheme;
+  /** Optional custom color overrides. */
+  color?: string;
+  trackColor?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  /** Optional aria-label when no visible label is adjacent. */
+  ariaLabel?: string;
+}) {
+  const safeDivisor = dividedBy > 0 ? dividedBy : 1;
+  const clampedRaw = clamp(value, 0, safeDivisor);
+  const clampedPercent = (clampedRaw / safeDivisor) * 100;
+
+  // Geometry
+  const radius = React.useMemo(() => (size - thickness) / 2, [size, thickness]);
+  const circumference = React.useMemo(() => 2 * Math.PI * radius, [radius]);
+  const dashOffset = React.useMemo(
+    () => ((100 - clampedPercent) / 100) * circumference,
+    [circumference, clampedPercent]
+  );
+
+  // Colors: prefer explicit color props, fall back to colorScheme tokens (with safe fallbacks)
+  const trackStroke =
+    trackColor ?? "var(--n-input-background, rgba(0,0,0,0.08))";
+  const colorClass = React.useMemo(() => {
+    switch (colorScheme) {
+      case "primary":
+        return "n-stroke-primary";
+      case "secondary":
+        return "n-stroke-secondary";
+      case "warning":
+        return "n-stroke-warning";
+      case "normal":
+      default:
+        return "n-stroke-text";
+    }
+  }, [colorScheme]);
+
+  const computedStroke = React.useMemo(() => {
+    if (color) return color;
+    switch (colorScheme) {
+      case "primary":
+        return "var(--n-primary, currentColor)";
+      case "secondary":
+        return "var(--n-secondary, currentColor)";
+      case "warning":
+        return "var(--n-warning, currentColor)";
+      case "normal":
+      default:
+        return "var(--n-text, currentColor)";
+    }
+  }, [color, colorScheme]);
+
+  return (
+    <span
+      className={cx("n-inline-flex n-items-center n-justify-center", className)}
+      style={style}
+      role="progressbar"
+      aria-valuenow={clampedRaw}
+      aria-valuemin={0}
+      aria-valuemax={safeDivisor}
+      aria-label={ariaLabel}
+    >
+      <svg
+        width={size}
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
+        style={{ display: "block" }}
+      >
+        {/* Track */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke={trackStroke}
+          strokeWidth={thickness}
+        />
+        {/* Indicator */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          className={cx(
+            "n-transition-[stroke-dashoffset] n-duration-500 n-ease-[cubic-bezier(0.65,0,0.35,1)]",
+            !color && colorClass
+          )}
+          style={{ stroke: computedStroke }}
+          strokeWidth={thickness}
+          strokeLinecap="round"
+          strokeDasharray={`${circumference} ${circumference}`}
+          strokeDashoffset={dashOffset}
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+        />
+      </svg>
+    </span>
+  );
+}

package/src/components/ScrollArea.tsx

@@ -14,10 +14,10 @@ export const ScrollArea = React.memo(function ScrollArea({ children }: Props) {
     React.useState<HTMLDivElement | null>(null);
 
   return (
-    <div className="flex-1 min-h-0">
+    <div className="n-flex-1 n-min-h-0">
       <RadixScrollArea.Root style={{ width: "100%", height: "100%" }}>
         <RadixScrollArea.Viewport
-          className="w-full h-full [&>div]:block"
+          className="n-w-full n-h-full [&>div]:n-block"
           ref={React.useCallback(
             (ref: HTMLDivElement | null) => setScrollElementRef(ref),
             []
@@ -31,9 +31,9 @@ export const ScrollArea = React.memo(function ScrollArea({ children }: Props) {
         </RadixScrollArea.Viewport>
         <RadixScrollArea.Scrollbar
           orientation="vertical"
-          className="scroll-component flex p-[3px] data-[orientation=vertical]:w-[10px]"
+          className="n-scroll-component n-flex n-p-[3px] data-[orientation=vertical]:n-w-[10px]"
         >
-          <RadixScrollArea.Thumb className="scroll-component flex-1 rounded-[10px] bg-scrollbar" />
+          <RadixScrollArea.Thumb className="n-scroll-component n-flex-1 n-rounded-[10px] n-bg-scrollbar" />
         </RadixScrollArea.Scrollbar>
       </RadixScrollArea.Root>
     </div>

package/src/components/ScrollableSidebar.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { ScrollArea } from "./ScrollArea";
+
+export function ScrollableSidebar({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="n-relative n-flex n-flex-col n-flex-1 n-max-h-full">
+      <ScrollArea>{children}</ScrollArea>
+    </div>
+  );
+}

package/src/components/SearchCompletionMenu.tsx

@@ -155,8 +155,8 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
   }));
 
   return (
-    <div {...elementSize} className="flex flex-col overflow-hidden">
-      <InputField.Root className="flex flex-0">
+    <div {...elementSize} className="n-flex n-flex-col n-overflow-hidden">
+      <InputField.Root className="n-flex n-flex-0">
         <InputField.Input
           ref={inputRef}
           value={search}
@@ -196,7 +196,7 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
       ) : (
         <div
           {...listSize}
-          className="flex flex-col p-20 items-center justify-center"
+          className="n-flex n-flex-col n-p-20 n-items-center n-justify-center"
         >
           <Small color="textDisabled">No results</Small>
         </div>

package/src/components/Section.tsx

@@ -3,57 +3,127 @@
 import {
   Button,
   IconButton,
+  IconName,
   IndentContext,
   INPUT_HEIGHT,
   InspectorPrimitives,
+  renderIcon,
   Spacer,
+  Text,
   textStyles,
 } from "@noya-app/noya-designsystem";
 import { clientStorage, usePersistentStateString } from "@noya-app/react-utils";
 import React, { CSSProperties, memo, useMemo } from "react";
 
-type TitleIconOptions = {
-  inlineBlockWrapper?: boolean;
+const titleIconStyle: CSSProperties = {
+  marginRight: "6px",
+  alignSelf: "flex-start",
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  minHeight: "27px",
+  flex: "none",
 };
 
-export type SectionProps = {
-  children: React.ReactNode;
+type SectionHeaderProps = {
+  style?: CSSProperties;
+  className?: string;
   title?: React.ReactNode;
-  onClickTitle?: () => void;
   titleTextStyle?: "small" | "heading5" | "heading4" | "heading3";
+  titleClassName?: string;
+  titleIcon?: Exclude<React.ReactNode, string> | IconName;
+  onClickTitle?: () => void;
   right?: React.ReactNode;
+  headerSeparator?: "space" | "dot";
+};
+
+export function SectionHeader({
+  style,
+  className,
+  title,
+  titleIcon,
+  right,
+  headerSeparator = "space",
+  titleTextStyle = "heading4",
+  titleClassName,
+  onClickTitle,
+}: SectionHeaderProps) {
+  const headerStyle: CSSProperties = useMemo(
+    () => ({
+      minHeight: INPUT_HEIGHT,
+      ...style,
+    }),
+    [style]
+  );
+
+  const titleElement = title ? (
+    <InspectorPrimitives.Title
+      $textStyle={titleTextStyle}
+      className={titleClassName}
+    >
+      {title}
+    </InspectorPrimitives.Title>
+  ) : null;
+
+  return (
+    <InspectorPrimitives.SectionHeader
+      style={headerStyle}
+      className={className}
+    >
+      {titleIcon && (
+        <div style={titleIconStyle} className={textStyles[titleTextStyle]}>
+          {"\u200B"}
+          {renderIcon(titleIcon)}
+        </div>
+      )}
+      {titleElement && (
+        <>
+          {onClickTitle ? (
+            <Button variant="none" onClick={onClickTitle}>
+              {titleElement}
+            </Button>
+          ) : (
+            titleElement
+          )}
+        </>
+      )}
+      {headerSeparator === "space" && <Spacer.Horizontal />}
+      {headerSeparator === "dot" && (
+        <Text
+          variant={titleTextStyle}
+          color="textDisabled"
+          style={{ padding: "0 4px" }}
+        >
+          •
+        </Text>
+      )}
+      {right}
+    </InspectorPrimitives.SectionHeader>
+  );
+}
+
+export type SectionProps = {
+  children: React.ReactNode;
   hideRightWhenCollapsed?: boolean;
   extraPadding?: boolean;
   className?: string;
   style?: CSSProperties;
-  titleIcon?: React.ReactNode;
-  titleIconOptions?: TitleIconOptions;
-};
-
-const titleIconStyle: CSSProperties = {
-  marginRight: "8px",
-  alignSelf: "flex-start",
-  position: "relative",
-  top: "2px",
-};
-
-const titleIconWrapperStyle: CSSProperties = {
-  display: "inline-block",
-};
+  headerStyle?: CSSProperties;
+} & Omit<SectionHeaderProps, "style" | "className">;
 
 const SectionInternal = ({
   children,
   title,
   onClickTitle,
-  titleTextStyle = "heading4",
+  titleTextStyle,
   right,
   extraPadding,
   className,
   style: styleProp,
   titleIcon,
-  titleIconOptions = {
-    inlineBlockWrapper: true,
-  },
+  headerSeparator,
+  titleClassName,
+  headerStyle: headerStyleProp,
 }: SectionProps) => {
   const style: CSSProperties = useMemo(
     () => ({
@@ -82,46 +152,26 @@ const SectionInternal = ({
   const headerStyle: CSSProperties = useMemo(
     () => ({
       marginBottom: hasChildren ? "4px" : undefined,
-      minHeight: INPUT_HEIGHT,
+      ...headerStyleProp,
     }),
-    [hasChildren]
+    [hasChildren, headerStyleProp]
   );
 
   return (
     <div style={style} className={className}>
       {(title || titleIcon || right) && (
-        <InspectorPrimitives.SectionHeader style={headerStyle}>
-          {titleIcon && (
-            <div style={titleIconStyle} className={textStyles[titleTextStyle]}>
-              {titleIconOptions.inlineBlockWrapper ? (
-                <div style={titleIconWrapperStyle}>{titleIcon}</div>
-              ) : (
-                titleIcon
-              )}
-            </div>
-          )}
-          {title && (
-            <>
-              {onClickTitle ? (
-                <Button variant="none" onClick={onClickTitle}>
-                  <InspectorPrimitives.Title $textStyle={titleTextStyle}>
-                    {title}
-                  </InspectorPrimitives.Title>
-                </Button>
-              ) : (
-                <InspectorPrimitives.Title $textStyle={titleTextStyle}>
-                  {title}
-                </InspectorPrimitives.Title>
-              )}
-            </>
-          )}
-          <Spacer.Horizontal />
-          {right}
-        </InspectorPrimitives.SectionHeader>
+        <SectionHeader
+          style={headerStyle}
+          title={title}
+          titleIcon={titleIcon}
+          titleTextStyle={titleTextStyle}
+          titleClassName={titleClassName}
+          onClickTitle={onClickTitle}
+          right={right}
+          headerSeparator={headerSeparator}
+        />
       )}
-      <IndentContext.Provider value={{ indentLevel: 1 }}>
-        {children}
-      </IndentContext.Provider>
+      <IndentContext.Provider value={0}>{children}</IndentContext.Provider>
     </div>
   );
 };
@@ -148,7 +198,7 @@ const ExpandableSection = ({
       {...props}
       right={!props.hideRightWhenCollapsed || expanded ? props.right : null}
       title={
-        <div className="flex gap-1 items-center">
+        <div className="n-flex n-gap-1 n-items-center">
           {props.title}
           <IconButton
             iconName={expanded ? "ChevronDownIcon2" : "ChevronRightIcon2"}