@noya-app/noya-designsystem 0.1.63 → 0.1.64

package/src/components/GridView.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { KeyModifiers } from "@noya-app/noya-keymap";
 import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
 import React, {
@@ -11,6 +13,7 @@ import React, {
   useContext,
   useMemo,
 } from "react";
+import { useLinkComponent } from "../contexts/LinkComponentContext";
 import { useHover } from "../hooks/useHover";
 import { cx, mergeConflictingClassNames } from "../utils/classNames";
 import withSeparatorElements from "../utils/withSeparatorElements";
@@ -79,6 +82,7 @@ const SectionTitle = ({
 
 interface ItemProps<MenuItemType extends string = string> {
   id: string;
+  href?: string;
   title?: ReactNode;
   subtitle?: ReactNode;
   loading?: boolean;
@@ -105,6 +109,7 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
 >(
   {
     id,
+    href,
     title,
     subtitle,
     loading,
@@ -125,23 +130,27 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     testShowInsideDropIndicator: showInsideDropIndicator = false,
     ...props
   }: ItemProps<MenuItemType>,
-  forwardedRef: ForwardedRef<HTMLDivElement>
+  forwardedRef: ForwardedRef<HTMLElement>
 ) {
   const { hoverProps } = useHover({
     onHoverChange,
   });
 
-  const { textPosition, bordered, disabled } = useContext(GridViewContext);
+  const { textPosition, bordered, disabled, alwaysShowSubtitles } =
+    useContext(GridViewContext);
 
   const handleClick = useCallback(
     (event: React.MouseEvent) => {
       event.stopPropagation();
-      event.preventDefault();
+
+      if (!href) {
+        event.preventDefault();
+      }
 
       onClick?.(event);
       onSelect?.(event);
     },
-    [onClick, onSelect]
+    [href, onClick, onSelect]
   );
 
   const handleKeyDown = useCallback(
@@ -159,8 +168,11 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     [onSelect, onKeyDown]
   );
 
+  const LinkComponent = useLinkComponent();
+  const Component = typeof href === "string" ? LinkComponent : "div";
+
   let element = (
-    <div
+    <Component
       {...props}
       className={cx(
         "flex flex-col relative rounded p-2 -m-2 text-text",
@@ -173,7 +185,8 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
         "focus:ring-2 focus:ring-primary focus:ring-inset focus:outline-none"
       )}
       id={id}
-      ref={forwardedRef}
+      href={href}
+      ref={forwardedRef as ForwardedRef<HTMLAnchorElement & HTMLDivElement>}
       {...hoverProps}
       tabIndex={disabled ? undefined : 0}
       onKeyDown={handleKeyDown}
@@ -194,8 +207,12 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
         <>
           <Spacer.Vertical size={8} />
           <ItemTitle>{title || " "}</ItemTitle>
-          <Spacer.Vertical size={2} />
-          <ItemDescription>{subtitle || " "}</ItemDescription>
+          {(alwaysShowSubtitles || subtitle) && (
+            <>
+              <Spacer.Vertical size={2} />
+              <ItemDescription>{subtitle || " "}</ItemDescription>
+            </>
+          )}
         </>
       )}
       {textPosition === "overlay" && hovered && (title || subtitle) && (
@@ -216,7 +233,7 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
           <ActivityIndicator opacity={0.5} size={13} />
         </div>
       )}
-    </div>
+    </Component>
   );
 
   if (menuItems && onSelectMenuItem) {
@@ -255,6 +272,7 @@ type GridViewContextValue = {
   bordered: boolean;
   disabled: boolean;
   gap: number;
+  alwaysShowSubtitles: boolean;
 };
 
 const GridViewContext = createContext<GridViewContextValue>({
@@ -263,6 +281,7 @@ const GridViewContext = createContext<GridViewContextValue>({
   bordered: false,
   disabled: false,
   gap: 0,
+  alwaysShowSubtitles: false,
 });
 
 interface GridViewRootProps extends Partial<GridViewContextValue> {
@@ -277,6 +296,7 @@ interface GridViewRootProps extends Partial<GridViewContextValue> {
   role?: string;
   renderEmptyState?: () => ReactNode;
   contentClassName?: string;
+  alwaysShowSubtitles?: boolean;
 }
 
 const GridViewRoot = forwardRef(function GridViewRoot(
@@ -291,6 +311,7 @@ const GridViewRoot = forwardRef(function GridViewRoot(
     disabled = false,
     className,
     contentClassName,
+    alwaysShowSubtitles = false,
     ...props
   }: GridViewRootProps,
   forwardedRef: ForwardedRef<HTMLDivElement>
@@ -306,14 +327,15 @@ const GridViewRoot = forwardRef(function GridViewRoot(
   );
 
   const contextValue = useMemo(
-    () => ({
+    (): GridViewContextValue => ({
       minColumnWidth,
       textPosition,
       bordered,
       disabled,
       gap,
+      alwaysShowSubtitles,
     }),
-    [bordered, disabled, gap, minColumnWidth, textPosition]
+    [bordered, disabled, gap, minColumnWidth, textPosition, alwaysShowSubtitles]
   );
 
   const mergedClassName = useMemo(() => {

package/src/components/IconButton.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { cssVars } from "../theme";
 import { Button, ButtonProps } from "./Button";

package/src/components/Icons.tsx

@@ -11,7 +11,7 @@ export function renderIcon(
   if (typeof iconName === "string") {
     const Icon = Icons[iconName as IconName];
 
-    return <Icon />;
+    return <Icon className="min-h-[15px]" />;
   }
 
   return iconName;

package/src/components/InputField.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import { memoGeneric, useMergeRefs, useSize } from "@noya-app/react-utils";
 import { Property } from "csstype";

package/src/components/Label.tsx

@@ -5,7 +5,7 @@ export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {}
 
 const labelStyles = "flex items-center select-none z-label relative";
 const labelTextStyles =
-  "font-sans text-label uppercase leading-3 font-bold text-text-muted";
+  "font-sans text-label uppercase leading-none font-bold text-text-muted";
 
 export const Label = memo(
   forwardRef<HTMLLabelElement, LabelProps>(function Label(

package/src/components/LabeledElementView.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as kiwi from "kiwi.js";
 import * as React from "react";
 
@@ -13,11 +15,13 @@ export const LabeledElementView = React.memo(function LabeledElementView({
   const elementIds: string[] = React.Children.toArray(children)
     .flatMap((child) =>
       React.isValidElement(child) && child.type === React.Fragment
-        ? (child.props.children as React.ReactNode[])
+        ? ((child as any).props.children as React.ReactNode[])
         : [child]
     )
     .map((child) =>
-      React.isValidElement(child) && "id" in child.props ? child.props.id : null
+      React.isValidElement(child) && "id" in (child as any).props
+        ? (child as any).props.id
+        : null
     )
     .filter((id) => !!id);
   const serializedIds = elementIds.join(",");

package/src/components/LabeledField.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { memo, useMemo } from "react";
 import { useIndent } from "../hooks/useIndent";
 import {

package/src/components/List.tsx

@@ -1,9 +1,12 @@
+"use client";
+
 import {
   forwardRefGeneric,
   memoGeneric,
   useFileDropTarget,
 } from "@noya-app/react-utils";
 import React, { memo, useImperativeHandle, useRef, useState } from "react";
+import { useLinkComponent } from "../contexts/LinkComponentContext";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { updateSelection } from "../utils/selection";
@@ -32,6 +35,7 @@ export const List = memoGeneric(
       items,
       getId,
       getName,
+      getHref,
       expandable,
       getExpanded,
       getRenamable,
@@ -101,8 +105,9 @@ export const List = memoGeneric(
     };
 
     const ViewComponent = expandable ? TreeView : ListView;
+    const LinkComponent = useLinkComponent();
 
-    const fileDropTargetRef = useRef<HTMLDivElement>(null);
+    const fileDropTargetRef = useRef<HTMLDivElement | null>(null);
     const { isDropTargetActive, dropTargetProps } = useFileDropTarget(
       fileDropTargetRef,
       onFilesDrop
@@ -144,6 +149,7 @@ export const List = memoGeneric(
           { isDragOverlay }: ListViewItemInfo
         ) => {
           const id = getId(item);
+          const href = getHref?.(item);
           const isDropdownOpen = dropdownOpenId === id;
           const isHovered =
             (hoveredId === id || isDropdownOpen) && !isDragOverlay;
@@ -197,6 +203,8 @@ export const List = memoGeneric(
 
           return (
             <ViewComponent.Row
+              as={typeof href === "string" ? LinkComponent : undefined}
+              href={href}
               id={id}
               key={id}
               role="option"
@@ -355,7 +363,7 @@ const rowGapMap: Record<CollectionItemSize, string> = {
   xxs: "gap-2",
   xs: "gap-2",
   small: "gap-2",
-  medium: "gap-3",
+  medium: "gap-2",
   mediumLarge: "gap-3",
   large: "gap-3",
   xl: "gap-4",

package/src/components/ListView.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Size } from "@noya-app/noya-geometry";
 import { range } from "@noya-app/noya-utils";
 import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
@@ -192,10 +194,14 @@ const RowContainer = forwardRef<
     $gap: number;
     $backgroundColor?: CSSProperties["backgroundColor"];
     $clickable?: boolean;
+    href?: string;
+    as?: React.ElementType;
   }
 >(
   (
     {
+      as: Component = "div",
+      href,
       className,
       $marginType,
       $selected,
@@ -222,8 +228,9 @@ const RowContainer = forwardRef<
     ref
   ) => {
     return (
-      <div
+      <Component
         ref={ref}
+        href={href}
         role={role}
         aria-label={ariaLabel}
         aria-roledescription={ariaRoleDescription}
@@ -363,7 +370,7 @@ const ListViewDragIndicatorElement = forwardRef<
                 backgroundColor:
                   $colorScheme === "secondary"
                     ? cssVars.colors.secondary
-                    : cssVars.colors.selectedListItemBackground,
+                    : cssVars.colors.dragOutline,
                 border: `2px solid white`,
                 boxShadow: "0 0 2px rgba(0,0,0,0.5)",
               }),
@@ -410,6 +417,8 @@ export interface ListViewRowProps<MenuItemType extends string = string> {
     | CSSProperties
     | ((props: DragIndicatorStyleProps) => CSSProperties);
   testRelativeDropPosition?: RelativeDropPosition;
+  href?: string;
+  as?: React.ElementType;
 }
 
 export type DragIndicatorStyleProps = {
@@ -446,6 +455,8 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
     dragIndicatorStyle,
     className,
     testRelativeDropPosition,
+    href,
+    as,
   }: ListViewRowProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
@@ -472,7 +483,7 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
       // We use preventDefault as a hack to mark this event as handled. We check for
       // this in the ListView.Root. We can't stopPropagation here or existing ContextMenus
       // won't close (onPointerDownOutside won't fire).
-      event.preventDefault();
+      // event.preventDefault();
 
       // We only want to handle left clicks
       if (event.button !== 0) return;
@@ -517,6 +528,8 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
 
     const element = (
       <Component
+        as={as}
+        href={href}
         ref={ref as any}
         $colorScheme={colorScheme}
         onContextMenu={onContextMenu}
@@ -787,7 +800,7 @@ export type ListViewRootProps = {
   divider?: boolean;
   gap?: number;
   colorScheme?: ListColorScheme;
-  containerRef?: React.RefObject<HTMLDivElement>;
+  containerRef?: React.RefObject<HTMLDivElement | null>;
   onDragOver?: React.DragEventHandler<HTMLDivElement>;
   onDragEnter?: React.DragEventHandler<HTMLDivElement>;
   onDragLeave?: React.DragEventHandler<HTMLDivElement>;
@@ -897,18 +910,18 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
       const prevChild = i - 1 >= 0 && renderChild(i - 1);
       const nextChild = i + 1 < data.length && renderChild(i + 1);
 
-      const next: ReactElement | undefined = isValidElement(nextChild)
+      const next: ReactElement<any> | undefined = isValidElement(nextChild)
         ? nextChild
         : undefined;
-      const prev: ReactElement | undefined = isValidElement(prevChild)
+      const prev: ReactElement<any> | undefined = isValidElement(prevChild)
         ? prevChild
         : undefined;
 
       const hasMarginTop = !prev;
       const hasMarginBottom =
         !next ||
-        current.props.isSectionHeader ||
-        (next && next.props.isSectionHeader);
+        (current as any).props.isSectionHeader ||
+        (next && (next as any).props.isSectionHeader);
 
       let marginType: ListRowMarginType;
 
@@ -924,11 +937,11 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
 
       let selectedPosition: ListRowPosition = "only";
 
-      if (current.props.selected) {
+      if ((current as any).props.selected) {
         const nextSelected =
-          next && !next.props.isSectionHeader && next.props.selected;
+          next && !next.props.isSectionHeader && (next as any).props.selected;
         const prevSelected =
-          prev && !prev.props.isSectionHeader && prev.props.selected;
+          prev && !prev.props.isSectionHeader && (prev as any).props.selected;
 
         if (nextSelected && prevSelected) {
           selectedPosition = "middle";
@@ -949,7 +962,7 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
         pressEventName,
         variant,
         sectionHeaderVariant,
-        isSectionHeader: current.props.isSectionHeader,
+        isSectionHeader: (current as any).props.isSectionHeader,
         gap,
       };
     },
@@ -1100,7 +1113,7 @@ const ChildrenListViewInner = forwardRef(function ChildrenListViewInner(
   { children, ...rest }: ChildrenProps & ListViewRootProps,
   forwardedRef: ForwardedRef<IVirtualizedList>
 ) {
-  const items: ReactElement[] = useMemo(
+  const items: ReactElement<any>[] = useMemo(
     () =>
       Children.toArray(children).flatMap((child) =>
         isValidElement(child) ? [child] : []
@@ -1118,7 +1131,7 @@ const ChildrenListViewInner = forwardRef(function ChildrenListViewInner(
           typeof key === "string" ? key : (key ?? index).toString(),
         []
       )}
-      renderItem={useCallback((item: ReactElement) => item, [])}
+      renderItem={useCallback((item: ReactElement<any>) => item, [])}
     />
   );
 });

package/src/components/MediaThumbnail.tsx

@@ -1,6 +1,9 @@
+"use client";
+
 import {
   FileIcon,
   ImageIcon,
+  NoyaIcon,
   SpeakerLoudIcon,
   VideoIcon,
 } from "@noya-app/noya-icons";
@@ -23,7 +26,12 @@ const getAssetType = (contentType?: string): AssetType | undefined => {
   return undefined;
 };
 
-type MediaThumbnailProps = {
+export type RenderThumbnailIconProps = {
+  fileName?: string;
+  contentType?: string;
+};
+
+export type MediaThumbnailProps = {
   contentType?: string;
   url?: string;
   selected?: boolean;
@@ -39,6 +47,7 @@ type MediaThumbnailProps = {
   size?: CollectionItemSize;
 
   fileName?: string;
+  renderThumbnailIcon?: (props: RenderThumbnailIconProps) => React.ReactNode;
 };
 
 export const getThumbnailColors = (
@@ -86,6 +95,7 @@ export const MediaThumbnail = memo(function MediaThumbnail({
   iconName,
   size = "medium",
   fileName,
+  renderThumbnailIcon,
 }: MediaThumbnailProps) {
   const { icon: iconColor, background: backgroundColor } = getThumbnailColors(
     colorScheme,
@@ -101,6 +111,12 @@ export const MediaThumbnail = memo(function MediaThumbnail({
   );
 
   const content = useMemo(() => {
+    if (renderThumbnailIcon) {
+      const rendered = renderThumbnailIcon({ fileName, contentType });
+
+      if (rendered) return rendered;
+    }
+
     switch (contentType) {
       case "image":
         if (!url) return <ImageIcon color={iconColor} style={iconStyles} />;
@@ -124,7 +140,12 @@ export const MediaThumbnail = memo(function MediaThumbnail({
         }
 
         if (fileName) {
+          if (fileName.endsWith(".noya")) {
+            return <NoyaIcon color={iconColor} style={iconStyles} />;
+          }
+
           const fileIcon = findFileIcon(fileName);
+
           if (fileIcon) {
             return (
               <img
@@ -138,7 +159,15 @@ export const MediaThumbnail = memo(function MediaThumbnail({
 
         return <FileIcon color={iconColor} style={iconStyles} />;
     }
-  }, [contentType, url, iconColor, iconStyles, iconName, fileName]);
+  }, [
+    contentType,
+    url,
+    iconColor,
+    iconStyles,
+    iconName,
+    renderThumbnailIcon,
+    fileName,
+  ]);
 
   return (
     <div

package/src/components/Message.tsx

@@ -1,11 +1,13 @@
+"use client";
+
 import { MultiplayerUser } from "@noya-app/noya-multiplayer-react";
+import { uuid } from "@noya-app/noya-utils";
 import React, { forwardRef, memo, useMemo } from "react";
 import { cssVars, INPUT_HEIGHT } from "../theme";
 import { cx } from "../utils/classNames";
 import { colorFromString } from "../utils/colorFromString";
 import { Avatar } from "./Avatar";
 import { Logo } from "./NoyaLogo";
-import { Text } from "./Text";
 
 export type MessageProps = {
   role: "user" | "assistant" | "system" | "data";
@@ -20,7 +22,7 @@ export const Message = memo(
     { role, children, user, avatarSize = INPUT_HEIGHT }: MessageProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) {
-    const randomId = crypto.randomUUID();
+    const randomId = uuid();
     const userMessageBackgroundColor = colorFromString(user?.id ?? randomId);
     const styles = useMemo(
       () =>
@@ -56,18 +58,15 @@ export const Message = memo(
         )}
         <div
           className={cx(
-            "flex flex-row gap-2 rounded-lg py-2 px-3 transition-all duration-200 min-w-6 max-w-[70%] items-start",
+            "markdown-message",
+            "flex flex-row gap-2 rounded-lg py-2 px-3 transition-all duration-200 max-w-[70%] text-sm",
+            role === "user" ? "text-white" : "text-text",
             role === "user" ? "ml-auto" : "bg-input-background"
           )}
           style={styles}
           ref={ref}
         >
-          <Text
-            variant="small"
-            className={role === "user" ? "text-white" : "text-text"}
-          >
-            {children}
-          </Text>
+          {children}
         </div>
       </div>
     );

package/src/components/Popover.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import { useControlledOrUncontrolled } from "@noya-app/react-utils";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Popover as PopoverPrimitive } from "radix-ui";
 import React, {
   ComponentProps,
   useCallback,

package/src/components/Progress.tsx

@@ -1,18 +1,22 @@
+"use client";
+
 import { clamp } from "@noya-app/noya-utils";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { Progress as ProgressPrimitive } from "radix-ui";
 import * as React from "react";
 import { cx } from "../utils/classNames";
 
-type ProgressVariant = "normal" | "warning" | "primary" | "secondary";
+type ColorScheme = "normal" | "warning" | "primary" | "secondary";
 
 export function Progress({
   value,
-  variant = "normal",
+  colorScheme = "normal",
   className,
+  style,
 }: {
   value: number;
-  variant?: ProgressVariant;
+  colorScheme?: ColorScheme;
   className?: string;
+  style?: React.CSSProperties;
 }) {
   const clampedValue = clamp(value, 0, 100);
   const transformStyles = React.useMemo(
@@ -24,12 +28,21 @@ export function Progress({
 
   return (
     <ProgressPrimitive.Root
-      className={cx(`relative hidden bg-input-background h-[5px] `, className)}
-      style={{ transform: "translateZ(0)" }}
+      className={cx(
+        `relative overflow-hidden bg-input-background h-[5px]`,
+        className
+      )}
+      style={{ transform: "translateZ(0)", ...style }}
       value={clampedValue}
     >
       <ProgressPrimitive.Indicator
-        className={`${variant === "primary" ? "bg-primary" : variant === "secondary" ? "bg-secondary" : variant === "warning" ? "bg-warning" : "bg-text"} transition-[transform_660ms_cubic-bezier(0.65,0,0.35,1) w-full h-full`}
+        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"
+        )}
         style={transformStyles}
       />
     </ProgressPrimitive.Root>

package/src/components/ScrollArea.tsx

@@ -1,4 +1,6 @@
-import * as RadixScrollArea from "@radix-ui/react-scroll-area";
+"use client";
+
+import { ScrollArea as RadixScrollArea } from "radix-ui";
 import * as React from "react";
 
 interface Props {

package/src/components/SearchCompletionMenu.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { getCurrentPlatform, handleKeyboardEvent } from "@noya-app/noya-keymap";
 import React, {
   forwardRef,

package/src/components/Section.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Button,
   IconButton,