@noya-app/noya-designsystem 0.1.49 → 0.1.51

package/src/components/Popover.tsx

@@ -32,6 +32,12 @@ interface Props
   className?: string;
 }
 
+export const popoverStyle = {
+  base: "rounded font-[14px] bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] max-h-[600px] overflow-y-auto text-text-muted z-[1000]",
+  large: "w-[680px]",
+  normal: "w-[240px]",
+};
+
 export function Popover({
   children,
   trigger,
@@ -56,12 +62,9 @@ export function Popover({
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
           className={cx(
-            "rounded font-[14px] bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] max-h-[600px] overflow-y-auto text-text-muted z-[1000]",
-            variant === "large"
-              ? "w-[680px]"
-              : variant === "normal"
-                ? "w-[240px]"
-                : "",
+            popoverStyle.base,
+            variant === "large" && popoverStyle.large,
+            variant === "normal" && popoverStyle.normal,
             className
           )}
           side={side}

package/src/components/SearchCompletionMenu.tsx

@@ -119,21 +119,21 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
       handleKeyboardEvent(event.nativeEvent, getCurrentPlatform(navigator), {
         ArrowUp: () => {
-          const nextIndex = getNextIndex(
-            results,
-            index,
-            "previous",
-            (item) => item.disabled ?? false
-          );
+          const nextIndex = getNextIndex({
+            items: results,
+            currentIndex: index,
+            direction: "previous",
+            isDisabled: (item) => item.disabled ?? false,
+          });
           setIndex(nextIndex);
         },
         ArrowDown: () => {
-          const nextIndex = getNextIndex(
-            results,
-            index,
-            "next",
-            (item) => item.disabled ?? false
-          );
+          const nextIndex = getNextIndex({
+            items: results,
+            currentIndex: index,
+            direction: "next",
+            isDisabled: (item) => item.disabled ?? false,
+          });
           setIndex(nextIndex);
         },
         Tab: () => selectAndClose(results[index]!),

package/src/components/Section.tsx

@@ -0,0 +1,172 @@
+import {
+  Button,
+  IconButton,
+  IndentContext,
+  INPUT_HEIGHT,
+  InspectorPrimitives,
+  Spacer,
+  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;
+};
+
+export type SectionProps = {
+  children: React.ReactNode;
+  title?: React.ReactNode;
+  onClickTitle?: () => void;
+  titleTextStyle?: "small" | "heading5" | "heading4" | "heading3";
+  right?: 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",
+};
+
+const SectionInternal = ({
+  children,
+  title,
+  onClickTitle,
+  titleTextStyle = "heading4",
+  right,
+  extraPadding,
+  className,
+  style: styleProp,
+  titleIcon,
+  titleIconOptions = {
+    inlineBlockWrapper: true,
+  },
+}: SectionProps) => {
+  const style: CSSProperties = useMemo(
+    () => ({
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      paddingTop:
+        titleTextStyle === "heading3"
+          ? "12px"
+          : title && extraPadding
+            ? "24px"
+            : "12px",
+      paddingBottom:
+        titleTextStyle === "heading3"
+          ? "12px"
+          : title && extraPadding
+            ? "12px"
+            : "12px",
+      ...styleProp,
+    }),
+    [titleTextStyle, title, extraPadding, styleProp]
+  );
+
+  const hasChildren = React.Children.toArray(children).some((child) => !!child);
+
+  const headerStyle: CSSProperties = useMemo(
+    () => ({
+      marginBottom: hasChildren ? "4px" : undefined,
+      minHeight: INPUT_HEIGHT,
+    }),
+    [hasChildren]
+  );
+
+  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>
+      )}
+      <IndentContext.Provider value={{ indentLevel: 1 }}>
+        {children}
+      </IndentContext.Provider>
+    </div>
+  );
+};
+
+type ExpandableSectionProps = {
+  storageKey: string;
+  initialVisibility?: "show" | "hide";
+};
+
+const ExpandableSection = ({
+  storageKey,
+  initialVisibility = "show",
+  ...props
+}: SectionProps & ExpandableSectionProps) => {
+  const [visibility, setVisibility] = usePersistentStateString<"show" | "hide">(
+    clientStorage,
+    storageKey,
+    initialVisibility
+  );
+  const expanded = visibility === "show";
+
+  return (
+    <SectionInternal
+      {...props}
+      right={!props.hideRightWhenCollapsed || expanded ? props.right : null}
+      title={
+        <div className="flex gap-1 items-center">
+          {props.title}
+          <IconButton
+            iconName={expanded ? "ChevronDownIcon2" : "ChevronRightIcon2"}
+            onClick={() => setVisibility(expanded ? "hide" : "show")}
+          />
+        </div>
+      }
+    >
+      {expanded && props.children}
+    </SectionInternal>
+  );
+};
+
+export const Section = memo(function InspectorSection({
+  storageKey,
+  ...props
+}: SectionProps & Partial<ExpandableSectionProps>) {
+  return storageKey ? (
+    <ExpandableSection {...props} storageKey={storageKey} />
+  ) : (
+    <SectionInternal {...props} />
+  );
+});

package/src/components/SegmentedControl.tsx

@@ -1,3 +1,4 @@
+import { memoGeneric } from "@noya-app/react-utils";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import React, {
   createContext,
@@ -7,7 +8,6 @@ import React, {
   useContext,
   useMemo,
 } from "react";
-import { memoGeneric } from "../../../noya-react-utils/src/utils/reactGenerics";
 import { useLabel } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
 import { renderIcon } from "./Icons";

package/src/components/SelectMenu.tsx

@@ -105,7 +105,7 @@ const SelectMenuTrigger = memoGeneric(function SelectMenuTrigger({
         {icon && <span className="pr-1.5">{renderIcon(icon)}</span>}
         {label && labelPosition === "inset" && (
           <div className={insetEndStyles}>
-            <Label className="pr-4 !text-text-disabled" htmlFor={id}>
+            <Label className="pr-4 text-text-disabled" htmlFor={id}>
               {label}
             </Label>
           </div>

package/src/components/Slider.tsx

@@ -109,7 +109,7 @@ export const Slider = memo(function Slider({
       <RadixSlider.Track className="flex-grow h-full rounded overflow-hidden bg-input-background">
         {label && labelPosition === "inset" && (
           <div className={insetEndStyles}>
-            <Label htmlFor={id} className="!text-text-disabled">
+            <Label htmlFor={id} className="text-text-disabled">
               {label}
             </Label>
           </div>

package/src/components/Sortable.tsx

@@ -19,6 +19,7 @@ import {
 } from "@dnd-kit/sortable";
 import { memoGeneric } from "@noya-app/react-utils";
 import * as React from "react";
+import { memo } from "react";
 import { createPortal } from "react-dom";
 
 export type RelativeDropPosition = "above" | "below" | "inside";
@@ -96,42 +97,67 @@ export function validateDropIndicator({
 
   const acceptsDropInside = acceptsDrop(activeIndex, overIndex, "inside");
 
-  // If cursor is in the middle third of the element (between 1/3 and 2/3)
-  // and dropping inside is allowed, show "inside" indicator
+  // Drop into the middle third if possible
   if (
-    offsetStart >= elementStart + elementSize / 3 &&
-    offsetStart <= elementStart + (elementSize * 2) / 3 &&
+    isContainedInMiddleThird(elementStart, elementSize, offsetStart) &&
     acceptsDropInside
-  )
+  ) {
     return "inside";
+  }
+
+  const containingHalf = getContainingHalf(
+    elementStart,
+    elementSize,
+    offsetStart
+  );
 
-  // Are we over the top or bottom half of the element?
-  const indicator =
-    offsetStart < elementStart + elementSize / 2 ? "above" : "below";
-  // Drop above or below if possible, falling back to inside
-  return acceptsDrop(activeIndex, overIndex, indicator)
-    ? indicator
-    : acceptsDropInside
+  // Drop above or below if possible
+  const acceptedHalf = acceptsDrop(activeIndex, overIndex, containingHalf);
+
+  return acceptedHalf
+    ? containingHalf
+    : // Lastly, check if inside but not middle third
+      acceptsDropInside
       ? "inside"
       : undefined;
 }
 
+function isContainedInMiddleThird(
+  elementStart: number,
+  elementSize: number,
+  offsetStart: number
+): boolean {
+  return (
+    offsetStart >= elementStart + elementSize / 3 &&
+    offsetStart <= elementStart + (elementSize * 2) / 3
+  );
+}
+
+function getContainingHalf(
+  elementStart: number,
+  elementSize: number,
+  offsetStart: number
+): "above" | "below" {
+  if (offsetStart < elementStart + elementSize / 2) return "above";
+  return "below";
+}
+
 /* ----------------------------------------------------------------------------
  * Item
  * ------------------------------------------------------------------------- */
 
 type UseSortableReturnType = ReturnType<typeof useSortable>;
 
+type ItemChildrenProps<T> = {
+  ref: React.Ref<T>;
+  relativeDropPosition?: RelativeDropPosition;
+  style?: React.CSSProperties;
+} & UseSortableReturnType["attributes"];
+
 interface ItemProps<T> {
   id: UniqueIdentifier;
   disabled?: boolean;
-  children: (
-    props: {
-      ref: React.Ref<T>;
-      relativeDropPosition?: RelativeDropPosition;
-      style?: React.CSSProperties;
-    } & UseSortableReturnType["attributes"]
-  ) => JSX.Element;
+  children: (props: ItemChildrenProps<T>) => JSX.Element;
 }
 
 function SortableItem<T extends HTMLElement>({
@@ -360,7 +386,83 @@ function SortableRoot({
   );
 }
 
-export namespace Sortable {
-  export const Item = memoGeneric(SortableItem);
-  export const Root = memoGeneric(SortableRoot);
+// Create a map of all subcomponents
+const SortableSubcomponents = {
+  Root: memo(SortableRoot),
+  Item: memoGeneric(SortableItem),
+} as const;
+
+interface SortableProps<T, TElement extends HTMLElement>
+  extends Omit<RootProps, "children" | "keys" | "renderOverlay"> {
+  items: T[];
+  keyExtractor: (item: T) => UniqueIdentifier;
+  shouldRenderOverlay?: boolean;
+  renderItem: (
+    item: T,
+    props: ItemChildrenProps<TElement>,
+    { isOverlay }: { isOverlay: boolean }
+  ) => JSX.Element;
 }
+
+const SortableComponent = memoGeneric(function Sortable<
+  TItem,
+  TElement extends HTMLElement,
+>(props: SortableProps<TItem, TElement>) {
+  const {
+    renderItem,
+    items,
+    keyExtractor,
+    shouldRenderOverlay = true,
+    ...rest
+  } = props;
+
+  const keys = React.useMemo(
+    () => items.map(keyExtractor),
+    [items, keyExtractor]
+  );
+
+  const renderOverlay = React.useCallback(
+    (index: number) => {
+      return renderItem(
+        items[index],
+        {
+          ref: () => {},
+          style: {},
+          tabIndex: -1,
+          "aria-disabled": true,
+          "aria-pressed": false,
+          "aria-roledescription": "Item being dragged",
+          "aria-describedby": "Item being dragged",
+          role: "button",
+        },
+        { isOverlay: true }
+      );
+    },
+    [renderItem, items]
+  );
+
+  return (
+    <SortableSubcomponents.Root
+      {...rest}
+      keys={keys}
+      renderOverlay={shouldRenderOverlay ? renderOverlay : undefined}
+    >
+      {keys.map((key, index) => (
+        <SortableSubcomponents.Item key={key} id={key}>
+          {(props) => {
+            return renderItem(
+              items[index],
+              props as ItemChildrenProps<TElement>,
+              { isOverlay: false }
+            );
+          }}
+        </SortableSubcomponents.Item>
+      ))}
+    </SortableSubcomponents.Root>
+  );
+});
+
+// Export both the namespace and the component
+const Sortable = Object.assign(SortableComponent, SortableSubcomponents);
+
+export { Sortable };

package/src/components/Toolbar.tsx

@@ -2,8 +2,11 @@ import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import React from "react";
 
+import { memoGeneric } from "@noya-app/react-utils";
+import { cssVars } from "../theme";
 import { BaseToolbar } from "./BaseToolbar";
 import { Button } from "./Button";
+import { DividerVertical } from "./Divider";
 import { DropdownMenu } from "./DropdownMenu";
 import { renderIcon } from "./Icons";
 import {
@@ -76,7 +79,11 @@ export function Toolbar<T extends string = string>({
   );
 }
 
-export function ToolbarMenu<T extends string>({
+const activeButtonStyle = {
+  backgroundColor: cssVars.colors.primaryPastel,
+};
+
+export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
   items,
   onSelectMenuItem,
 }: {
@@ -86,14 +93,18 @@ export function ToolbarMenu<T extends string>({
   return (
     <>
       {items.map((item, i) => {
-        if (item.type === "separator") return null;
         if (item.type === "sectionHeader") return null;
 
+        if (item.type === "separator") {
+          return <DividerVertical key={i} overflow={4} />;
+        }
+
         if (isSelectableMenuItem(item)) {
           return (
             <Button
               key={i}
               disabled={item.disabled}
+              style={item.checked ? activeButtonStyle : undefined}
               onClick={() => {
                 if (onSelectMenuItem && item.value) {
                   onSelectMenuItem(item.value);
@@ -101,12 +112,8 @@ export function ToolbarMenu<T extends string>({
               }}
             >
               {item.title}
-              {item.icon && (
-                <>
-                  <Spacer.Horizontal inline size={6} />
-                  {renderIcon(item.icon)}
-                </>
-              )}
+              {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
+              {item.icon && renderIcon(item.icon)}
             </Button>
           );
         }
@@ -121,8 +128,13 @@ export function ToolbarMenu<T extends string>({
               }
             }}
           >
-            <Button disabled={item.disabled}>
+            <Button
+              disabled={item.disabled}
+              style={item.checked ? activeButtonStyle : undefined}
+            >
               {item.title}
+              {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
+              {item.icon && renderIcon(item.icon)}
               <Spacer.Horizontal size={6} />
               <DropdownChevronIcon />
             </Button>
@@ -131,4 +143,4 @@ export function ToolbarMenu<T extends string>({
       })}
     </>
   );
-}
+});

package/src/components/UserPointer.tsx

@@ -94,7 +94,7 @@ const UserPointerIcon = memo(function PointerIcon({
       <polygon
         points={points}
         fill={color}
-        stroke="var(--background)"
+        stroke="var(--n-background)"
         strokeWidth="0.5"
       />
     </svg>

package/src/components/ai-assistant/AIAssistantLayout.tsx

@@ -0,0 +1,102 @@
+import { IconButton } from "../IconButton";
+
+import { cssVars } from "../../theme";
+
+import { Avatar } from "../Avatar";
+import { Logo } from "../NoyaLogo";
+
+import React, { forwardRef } from "react";
+import { INPUT_HEIGHT } from "../../theme";
+import { cx } from "../../utils/classNames";
+import { TextAreaRow } from "../TextArea";
+
+export const AIAssistantLoadingIndicator = () => {
+  return (
+    <div className="flex gap-2">
+      <Avatar
+        name="Assistant"
+        size={INPUT_HEIGHT}
+        backgroundColor={cssVars.colors.primaryPastel}
+      >
+        <Logo style={{ width: 15 }} fill={cssVars.colors.primary} />
+      </Avatar>
+      <div className="animate-pulse">▋</div>
+    </div>
+  );
+};
+
+type AIAssistantInputProps = {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onSubmitClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  disabled: boolean;
+};
+
+export const AIAssistantInput = forwardRef<
+  HTMLDivElement,
+  AIAssistantInputProps
+>(({ value, onChange, onSubmitClick, onKeyDown, disabled }, ref) => (
+  <TextAreaRow
+    autoResize
+    autoFocus
+    value={value}
+    onChange={onChange}
+    ref={ref}
+    textAreaClassName="py-2 pl-3 !pr-9 w-full mt-3"
+    placeholder="Tell me what you'd like to do..."
+    onKeyDown={onKeyDown}
+    disabled={disabled}
+    end={
+      <IconButton
+        iconName="ArrowUpIcon"
+        onClick={onSubmitClick}
+        disabled={!value.trim() || disabled}
+        className="h-8 w-8 z-20 rounded-full"
+        size={20}
+        color={cssVars.colors.text}
+        style={{
+          backgroundColor: cssVars.colors.chipDefaultBg,
+        }}
+      />
+    }
+  />
+));
+
+type AIAssistantLayoutProps = {
+  renderMessages: () => React.ReactNode;
+  renderInput: () => React.ReactNode;
+  isLoading: boolean;
+  renderLoadingIndicator?: () => React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export const AIAssistantLayout = forwardRef<
+  HTMLDivElement,
+  AIAssistantLayoutProps
+>(
+  (
+    {
+      renderMessages,
+      renderInput,
+      isLoading,
+      renderLoadingIndicator,
+      className,
+      style,
+    }: AIAssistantLayoutProps,
+    ref
+  ) => {
+    return (
+      <div className={cx("flex flex-col flex-1", className)} style={style}>
+        <div className="flex-1 min-h-0 overflow-auto" ref={ref}>
+          <div className="flex flex-col gap-2 pb-4 pt-1">
+            {renderMessages()}
+            {isLoading ? renderLoadingIndicator?.() : null}
+          </div>
+        </div>
+        <div className="border-t border-divider pt-1 px-1">{renderInput()}</div>
+      </div>
+    );
+  }
+);