@noya-app/noya-designsystem 0.1.64 → 0.1.65

package/src/components/Stepper.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { clamp } from "@noya-app/noya-utils";
+import React, { FocusEventHandler, memo, useCallback, useMemo } from "react";
+import { useLabel } from "../hooks/useLabel";
+import { cx } from "../utils/classNames";
+import { Button } from "./Button";
+import { InputField } from "./InputField";
+
+type ColorScheme = "primary" | "secondary";
+
+interface Props {
+  id?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  value: number;
+  onValueChange: (value: number) => void;
+  min: number;
+  max: number;
+  step?: number;
+  colorScheme?: ColorScheme;
+  onFocus?: FocusEventHandler;
+  onBlur?: FocusEventHandler;
+  readOnly?: boolean;
+}
+
+export const Stepper = memo(function Stepper({
+  style,
+  className,
+  value: valueProp,
+  onValueChange,
+  min,
+  max,
+  step = 1,
+  colorScheme,
+  onFocus,
+  onBlur,
+  readOnly = false,
+  ...props
+}: Props) {
+  const { fieldId: id } = useLabel({
+    fieldId: props.id,
+  });
+
+  const value = useMemo(() => {
+    return clamp(valueProp, min, max);
+  }, [valueProp, min, max]);
+
+  const handleValueChange = useCallback(
+    (value: number) => {
+      const newValue = clamp(value, min, max);
+      onValueChange(newValue);
+    },
+    [onValueChange, min, max]
+  );
+
+  return (
+    <div
+      id={id}
+      className={cx(
+        "n-flex n-relative n-items-center n-select-none n-touch-none n-h-input-height n-rounded n-flex-grow n-max-h-input-height n-gap-1.5",
+        className
+      )}
+      style={style}
+      onFocus={onFocus}
+      onBlur={onBlur}
+    >
+      <Button
+        icon="MinusIcon"
+        disabled={readOnly}
+        onClick={() => handleValueChange(value - step)}
+      />
+      <InputField.Root className="n-flex-1">
+        <InputField.NumberInput
+          value={value}
+          onChange={handleValueChange}
+          onNudge={(amount) => handleValueChange(value + amount)}
+          readOnly={readOnly}
+        />
+      </InputField.Root>
+      <Button
+        icon="PlusIcon"
+        disabled={readOnly}
+        onClick={() => handleValueChange(value + step)}
+      />
+    </div>
+  );
+});

package/src/components/Switch.tsx

@@ -40,15 +40,15 @@ export const Switch = function Switch({
         onChange(newValue);
       }}
       className={cx(
-        "all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer ring-offset-background [-webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary transition-all",
-        colorScheme === "secondary" && "data-[state=checked]:bg-secondary",
-        "focus:z-interactable",
+        "n-all-unset n-w-8 n-h-[19px] n-bg-active-background n-rounded-full n-relative n-cursor-pointer n-ring-offset-background n-[-webkit-tap-highlight-color:rgba(0,0,0,0)] focus:n-ring-2 focus:n-ring-primary focus:n-ring-offset-[1px] n-outline-none data-[state=checked]:n-bg-primary n-transition-all",
+        colorScheme === "secondary" && "data-[state=checked]:n-bg-secondary",
+        "focus:n-z-interactable",
         className
       )}
       onFocus={onFocus}
       onBlur={onBlur}
     >
-      <SwitchPrimitive.Thumb className="block w-[15px] h-[15px] bg-background rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" />
+      <SwitchPrimitive.Thumb className="n-block n-w-[15px] n-h-[15px] n-bg-background n-rounded-full n-transition-transform n-translate-x-[2px] data-[state=checked]:n-translate-x-[15px]" />
     </SwitchPrimitive.Root>
   );
 };

package/src/components/Tabs.tsx

@@ -31,10 +31,10 @@ export function Tabs<T extends string = string>({
   });
 
   return (
-    <div {...props} className={cx("flex flex-col", props.className)}>
-      <div className="flex flex-row px-3">
+    <div {...props} className={cx("n-flex n-flex-col", props.className)}>
+      <div className="n-flex n-flex-row n-px-3">
         <SegmentedControl
-          className="flex-1"
+          className="n-flex-1"
           value={activeTab}
           onValueChange={setActiveTab}
           variant={variant}

package/src/components/Text.tsx

@@ -15,6 +15,7 @@ type Variant =
   | "heading5"
   | "body"
   | "small"
+  | "xs"
   | "button"
   | "code"
   | "label";
@@ -29,24 +30,26 @@ const elements: Record<Variant, React.HTMLElementType> = {
   heading5: "h5",
   body: "p",
   small: "span",
+  xs: "span",
   button: "span",
   code: "code",
   label: "span",
 };
 
 export const textStyles: Record<Variant, string> = {
-  title: "font-sans text-title font-bold",
-  subtitle: "font-sans text-subtitle font-medium",
-  heading1: "font-sans text-heading1 font-semibold",
-  heading2: "font-sans text-heading2 font-medium",
-  heading3: "font-sans text-heading3 font-normal",
-  heading4: "font-sans text-heading4 font-medium",
-  heading5: "font-sans text-heading5 font-medium",
-  body: "font-sans text-base font-normal",
-  small: "font-sans text-heading5 font-normal",
-  button: "font-sans text-button font-medium",
-  code: "font-mono text-code",
-  label: "font-sans text-label font-normal uppercase",
+  title: "n-font-sans n-text-title n-font-bold",
+  subtitle: "n-font-sans n-text-subtitle n-font-medium",
+  heading1: "n-font-sans n-text-heading1 n-font-semibold",
+  heading2: "n-font-sans n-text-heading2 n-font-medium",
+  heading3: "n-font-sans n-text-heading3 n-font-normal",
+  heading4: "n-font-sans n-text-heading4 n-font-medium",
+  heading5: "n-font-sans n-text-heading5 n-font-medium",
+  body: "n-font-sans n-text-body n-font-normal",
+  small: "n-font-sans n-text-heading5 n-font-normal",
+  xs: "n-font-sans n-text-xs n-font-normal",
+  button: "n-font-sans n-text-button n-font-medium",
+  code: "n-font-mono n-text-code",
+  label: "n-font-sans n-text-label n-font-normal n-uppercase",
 } as const;
 
 export type TextProps = {
@@ -86,7 +89,8 @@ export const Text = forwardRef(function Text(
     <Component
       ref={forwardedRef}
       className={cx(
-        `${textStyles[variant]} text-${camelToKebabCase(String(color)) ?? "text"} `,
+        textStyles[variant],
+        `n-text-${camelToKebabCase(String(color)) ?? "text"}`,
         className
       )}
       style={style}
@@ -145,6 +149,12 @@ export const Small = forwardRef(
   )
 );
 
+export const ExtraSmall = forwardRef(
+  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
+    <Text ref={ref} {...props} variant="xs" />
+  )
+);
+
 // export const Label = forwardRef(
 //   (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
 //     <Text ref={ref} {...props} variant="label" />

package/src/components/TextArea.tsx

@@ -68,7 +68,7 @@ export const TextArea = memo(
     return (
       <textarea
         className={cx(
-          `font-sans text-heading5 font-normal text-text bg-input-background flex-1 py-1 px-1.5 border-none outline-none min-h-6 w-full rounded resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable transition-all`,
+          `n-font-sans n-text-heading5 n-font-normal n-text-text n-bg-input-background n-flex-1 n-py-1 n-px-1.5 n-border-none n-outline-none n-min-h-6 n-w-full n-rounded n-resize-none placeholder:n-text-text-disabled focus:n-ring-2 focus:n-ring-primary read-only:n-text-text-disabled focus:n-z-interactable n-transition-[box-shadow]`,
           className
         )}
         {...rest}
@@ -102,10 +102,10 @@ export const TextAreaRow = memo(
     return (
       <div
         ref={forwardedRef}
-        className={cx("relative w-full h-full", className)}
+        className={cx("n-relative n-w-full n-h-full", className)}
       >
         <TextArea className={textAreaClassName} {...rest} ref={textAreaRef} />
-        <div className={cx("absolute right-1 top-4", endClassName)}>{end}</div>
+        <div className={cx("n-absolute n-right-1 n-top-4", endClassName)}>{end}</div>
       </div>
     );
   })

package/src/components/Toast.tsx

@@ -15,18 +15,18 @@ export const Toast = ({
 }) => {
   return (
     <ToastPrimitive.Root
-      className="px-2 py-2.5 grid grid-cols-[auto_max-content] gap-x-2.5 items-center rounded text-sm bg-popover-background shadow-popover text-text-muted"
+      className="n-px-2 n-py-2.5 n-grid n-grid-cols-[auto_max-content] n-gap-x-2.5 n-items-center n-rounded n-text-sm n-bg-popover-background n-shadow-popover n-text-text-muted"
       {...props}
     >
       {title && (
         <ToastPrimitive.Title
-          className={`mb-[5px] ${textStyles.label} font-bold text-text`}
+          className={`n-mb-[5px] ${textStyles.label} n-font-bold n-text-text`}
         >
           {title}
         </ToastPrimitive.Title>
       )}
       <ToastPrimitive.Description
-        className={`${textStyles.small} text-text-muted`}
+        className={`${textStyles.small} n-text-text-muted`}
       >
         {content}
       </ToastPrimitive.Description>
@@ -45,6 +45,6 @@ export const Toast = ({
 export const ToastProvider = ({ children }: { children: React.ReactNode }) => (
   <ToastPrimitive.Provider>
     {children}
-    <ToastPrimitive.Viewport className="fixed bottom-0 right-0 flex flex-col p-5 g-2.5 min-w-[200px] max-w-[100vw] m-0 list-none z-[2147483647] outline-none" />
+    <ToastPrimitive.Viewport className="n-fixed n-bottom-0 n-right-0 n-flex n-flex-col n-p-5 n-gap-2.5 n-min-w-[200px] n-max-w-[100vw] n-m-0 n-list-none n-z-[2147483647] n-outline-none" />
   </ToastPrimitive.Provider>
 );

package/src/components/Toolbar.tsx

@@ -1,7 +1,12 @@
 "use client";
 
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
-import React, { ComponentProps, ReactNode } from "react";
+import React, {
+  ComponentProps,
+  createContext,
+  ReactNode,
+  useContext,
+} from "react";
 
 import { memoGeneric } from "@noya-app/react-utils";
 import { BaseToolbar } from "./BaseToolbar";
@@ -24,6 +29,10 @@ import { Tooltip } from "./Tooltip";
 
 const SIDE_OFFSET = 6;
 
+export const ToolbarMenuContext = createContext<{
+  dividerOverflow?: number;
+}>({});
+
 export const ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown<
   T extends string,
 >({
@@ -66,7 +75,7 @@ export const ToolbarShortcut = ({
   label?: ReactNode;
 }) => {
   return (
-    <div className="flex items-center">
+    <div className="n-flex n-items-center">
       {label}
       <Spacer.Horizontal size={6} />
       <KeyboardShortcut shortcut={shortcut} />
@@ -140,20 +149,23 @@ export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
   as,
   activeValue,
   tooltipSide,
+  displayFilter,
 }: {
   item: SelectableMenuItem<T>;
   onSelectMenuItem?: (value: T) => void;
   as?: ComponentProps<typeof Button>["as"];
   activeValue?: T;
   tooltipSide?: ComponentProps<typeof Tooltip>["side"];
+  displayFilter?: DisplayFilter;
 }) {
   const isActive = item.checked || activeValue === item.value;
+
   const content = (
     <Button
       as={as}
       disabled={item.disabled}
       active={isActive}
-      icon={item.icon}
+      icon={displayFilter === "textOnly" ? undefined : item.icon}
       {...(as === "a" && { href: item.value })}
       onClick={() => {
         if (onSelectMenuItem && item.value) {
@@ -161,14 +173,18 @@ export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
         }
       }}
     >
-      {item.title}
+      {displayFilter === "iconOnly" ? undefined : item.title}
     </Button>
   );
 
+  const tooltip =
+    item.tooltip ??
+    (displayFilter === "iconOnly" && item.title ? item.title : undefined);
+
   return item.drawer && isActive ? (
     <ToolbarDrawer trigger={content}>{item.drawer}</ToolbarDrawer>
-  ) : item.tooltip ? (
-    <Tooltip sideOffset={SIDE_OFFSET} content={item.tooltip} side={tooltipSide}>
+  ) : tooltip ? (
+    <Tooltip sideOffset={SIDE_OFFSET} content={tooltip} side={tooltipSide}>
       {content}
     </Tooltip>
   ) : (
@@ -185,6 +201,8 @@ export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
   activeValue,
   tooltipSide,
   portalContainer,
+  displayFilter,
+  dividerOverflow: dividerOverflowProp,
 }: {
   item: MenuItem<T>;
   onSelectMenuItem?: (value: T) => void;
@@ -192,14 +210,24 @@ export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
   activeValue?: T;
   tooltipSide?: ComponentProps<typeof Tooltip>["side"];
   portalContainer?: HTMLElement | null;
+  displayFilter?: DisplayFilter;
+  dividerOverflow?: number;
 }) {
+  const { dividerOverflow: contextDividerOverflow } =
+    useContext(ToolbarMenuContext);
+
+  const dividerOverflow = dividerOverflowProp ?? contextDividerOverflow ?? 4;
+
   if (item.type === "sectionHeader") return null;
+
   if (item.type === "separator") {
-    return <DividerVertical overflow={4} />;
+    return <DividerVertical overflow={dividerOverflow} />;
   }
+
   if (item.type === "popover") {
     return <ToolbarMenuPopover item={item} portalContainer={portalContainer} />;
   }
+
   if (isSelectableMenuItem(item)) {
     return (
       <ToolbarMenuButton
@@ -208,6 +236,7 @@ export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
         as={buttonAs}
         activeValue={activeValue}
         tooltipSide={tooltipSide}
+        displayFilter={displayFilter}
       />
     );
   }
@@ -217,6 +246,8 @@ export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
   );
 });
 
+type DisplayFilter = "iconOnly" | "iconAndText" | "textOnly";
+
 export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
   items,
   onSelectMenuItem,
@@ -224,6 +255,8 @@ export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
   activeValue,
   tooltipSide,
   portalContainer,
+  displayFilter = "iconAndText",
+  dividerOverflow,
 }: {
   items: MenuItem<T>[];
   onSelectMenuItem?: (value: T) => void;
@@ -231,6 +264,8 @@ export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
   activeValue?: T;
   tooltipSide?: ComponentProps<typeof Tooltip>["side"];
   portalContainer?: HTMLElement | null;
+  displayFilter?: DisplayFilter;
+  dividerOverflow?: number;
 }) {
   return (
     <>
@@ -244,6 +279,8 @@ export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
             activeValue={activeValue}
             tooltipSide={tooltipSide}
             portalContainer={portalContainer}
+            displayFilter={displayFilter}
+            dividerOverflow={dividerOverflow}
           />
         );
       })}
@@ -259,6 +296,7 @@ export interface ToolbarProps<T extends string = string> {
   onSelectMenuItem?: (value: T) => void;
   /** Whether to bind keyboard shortcuts for menu items. @default true */
   shouldBindKeyboardShortcuts?: boolean;
+  dividerOverflow?: number;
 }
 
 export function Toolbar<T extends string = string>({
@@ -268,6 +306,7 @@ export function Toolbar<T extends string = string>({
   rightMenuItems = [],
   onSelectMenuItem,
   shouldBindKeyboardShortcuts = true,
+  dividerOverflow,
 }: ToolbarProps<T>) {
   // Register keyboard shortcuts for all menu items
   const allMenuItems = React.useMemo(
@@ -290,20 +329,22 @@ export function Toolbar<T extends string = string>({
       logo={logo}
       left={
         leftMenuItems.length > 0 && (
-          <div className="flex gap-2">
+          <div className="n-flex n-gap-2">
             <ToolbarMenu
               items={leftMenuItems}
               onSelectMenuItem={onSelectMenuItem}
+              dividerOverflow={dividerOverflow}
             />
           </div>
         )
       }
       right={
         rightMenuItems.length > 0 && (
-          <div className="flex gap-2">
+          <div className="n-flex n-gap-2">
             <ToolbarMenu
               items={rightMenuItems}
               onSelectMenuItem={onSelectMenuItem}
+              dividerOverflow={dividerOverflow}
             />
           </div>
         )

package/src/components/ToolbarDrawer.tsx

@@ -12,9 +12,9 @@ export const ToolbarDrawer = memo(
     ref: ForwardedRef<HTMLDivElement>
   ) {
     return (
-      <div className="relative" ref={ref}>
+      <div className="n-relative" ref={ref}>
         <div
-          className="absolute bottom-full left-1/2 -translate-x-1/2 rounded-t-lg border border-toolbar-drawer-border border-b-transparent bg-toolbar-drawer-background -z-10"
+          className="n-absolute n-bottom-full n-left-1/2 -n-translate-x-1/2 n-rounded-t-lg n-border n-border-toolbar-drawer-border n-border-b-transparent n-bg-toolbar-drawer-background -n-z-10"
           style={{
             marginBottom: `${sideOffset}px`,
             boxShadow: "0px -2px 12px 0px var(--n-toolbar-drawer-shadow)",

package/src/components/Tooltip.tsx

@@ -35,7 +35,7 @@ export const Tooltip = React.memo(function Tooltip({
             align="center"
             sideOffset={sideOffset}
             collisionPadding={8}
-            className={`${textStyles.small} text-text rounded-sm p-2 bg-popover-background shadow-tooltip z-menu`}
+            className={`${textStyles.small} n-text-text n-rounded-sm n-p-2 n-bg-popover-background n-shadow-tooltip n-z-menu`}
           >
             {content}
           </TooltipPrimitive.Content>

package/src/components/TreeView.tsx

@@ -1,11 +1,16 @@
 "use client";
 
-import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
+import {
+  forwardRefGeneric,
+  memoGeneric,
+  useStableCallback,
+} from "@noya-app/react-utils";
 import React, { ForwardedRef, ReactNode, useCallback, useContext } from "react";
 import { IconButton } from "./IconButton";
 import { IconName, renderIcon } from "./Icons";
 import { ListView } from "./ListView";
 import { Spacer } from "./Spacer";
+import { ListViewContext } from "./listView/ListViewContexts";
 
 /* ----------------------------------------------------------------------------
  * Row
@@ -33,14 +38,16 @@ const TreeRow = forwardRefGeneric(function TreeRow<MenuItemType extends string>(
   }: TreeViewRowProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLLIElement>
 ) {
-  const { expandable } = useContext(ListView.RowContext);
+  const { expandable } = useContext(ListViewContext);
+
+  const stableOnClickChevron = useStableCallback(onClickChevron);
 
   const handleClickChevron = useCallback(
     (event: React.MouseEvent) => {
       event.stopPropagation();
-      onClickChevron?.({ altKey: event.altKey });
+      stableOnClickChevron?.({ altKey: event.altKey });
     },
-    [onClickChevron]
+    [stableOnClickChevron]
   );
 
   return (

package/src/components/UserPointer.tsx

@@ -27,8 +27,8 @@ const UserPointerContainer = memo(function UserPointerContainer({
         ...style,
       }}
       className={cx(
-        "pointer-events-none",
-        visible ? "opacity-100" : "opacity-0",
+        "n-pointer-events-none",
+        visible ? "n-opacity-100" : "n-opacity-0",
         className
       )}
     >
@@ -51,7 +51,7 @@ const UserNameTag = memo(function UserNameTag({
   return (
     <span
       className={cx(
-        "relative inline-block rounded-full text-xs font-medium leading-none text-white shadow-sm px-2 py-1.5 border border-background",
+        "n-relative n-inline-block n-rounded-full n-text-xs n-font-medium n-leading-none n-text-white n-shadow-sm n-px-2 n-py-1.5 n-border n-border-background",
         className
       )}
       style={{
@@ -153,7 +153,7 @@ export const UserPointer = memo(function UserPointer({
       style={style}
     >
       {name && (
-        <div className="relative">
+        <div className="n-relative">
           <UserPointerIcon
             size={POINTER_SIZE}
             color={userBackgroundColor}

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

@@ -14,7 +14,7 @@ import { TextAreaRow } from "../TextArea";
 
 export const AIAssistantLoadingIndicator = () => {
   return (
-    <div className="flex gap-2">
+    <div className="n-flex n-gap-2">
       <Avatar
         name="Assistant"
         size={INPUT_HEIGHT}
@@ -22,7 +22,7 @@ export const AIAssistantLoadingIndicator = () => {
       >
         <Logo style={{ width: 15 }} fill={cssVars.colors.primary} />
       </Avatar>
-      <div className="animate-pulse">▋</div>
+      <div className="n-animate-pulse">▋</div>
     </div>
   );
 };
@@ -45,7 +45,7 @@ export const AIAssistantInput = forwardRef<
     value={value}
     onChange={onChange}
     ref={ref}
-    textAreaClassName="py-2 pl-3 !pr-9 w-full mt-3"
+    textAreaClassName="n-py-2 n-pl-3 !n-pr-9 n-w-full n-mt-3"
     placeholder="Tell me what you'd like to do..."
     onKeyDown={onKeyDown}
     disabled={disabled}
@@ -54,7 +54,7 @@ export const AIAssistantInput = forwardRef<
         iconName="ArrowUpIcon"
         onClick={onSubmitClick}
         disabled={!value.trim() || disabled}
-        className="h-8 w-8 z-20 rounded-full"
+        className="n-h-8 n-w-8 n-z-20 n-rounded-full"
         size={20}
         color={cssVars.colors.text}
         style={{
@@ -90,14 +90,14 @@ export const AIAssistantLayout = forwardRef<
     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">
+      <div className={cx("n-flex n-flex-col n-flex-1", className)} style={style}>
+        <div className="n-flex-1 n-min-h-0 n-overflow-auto" ref={ref}>
+          <div className="n-flex n-flex-col n-gap-2 n-pb-4 n-pt-1">
             {renderMessages()}
             {isLoading ? renderLoadingIndicator?.() : null}
           </div>
         </div>
-        <div className="border-t border-divider pt-1 px-1">{renderInput()}</div>
+        <div className="n-border-t n-border-divider n-pt-1 n-px-1">{renderInput()}</div>
       </div>
     );
   }

package/src/components/blocks/ImageBlockComponent.tsx

@@ -5,7 +5,7 @@ import React, { ForwardedRef, forwardRef } from "react";
 type ImageState = "loading" | "error" | "loaded";
 
 const placeholderClassName =
-  "cursor-pointer flex items-center justify-center p-4 border border-dashed border-indigo-100 rounded-md bg-indigo-50";
+  "n-cursor-pointer n-flex n-items-center n-justify-center n-p-4 n-border n-border-dashed n-border-indigo-100 n-rounded-md n-bg-indigo-50";
 
 export function decodeImageSrc(src?: string): string | undefined {
   if (!src) return undefined;
@@ -44,7 +44,7 @@ const ImagePlaceholderComponent = forwardRef(function ImagePlaceholderComponent(
       contentEditable={false}
       className={cx(placeholderClassName, props.className)}
     >
-      <ImageIcon className="w-[30px] h-[30px] text-indigo-900 pointer-events-none" />
+      <ImageIcon className="n-w-[30px] n-h-[30px] n-text-indigo-900 n-pointer-events-none" />
     </span>
   );
 });
@@ -60,7 +60,7 @@ const ImageErrorComponent = forwardRef(function ImageErrorComponent(
       contentEditable={false}
       className={cx(placeholderClassName, props.className)}
     >
-      <span className="text-cm-error font-mono text-sm">
+      <span className="n-text-cm-error n-font-mono n-text-sm">
         Invalid image URL: {src ?? "No URL provided"}
       </span>
     </span>
@@ -86,10 +86,16 @@ const ImageDisplayComponent = forwardRef(function ImageDisplayComponent(
       src={src}
       alt={alt ?? ""}
       title={title ?? undefined}
-      className={cx(
-        "cursor-pointer max-w-full max-h-[720px] object-contain mx-auto my-8",
-        props.className
-      )}
+      // use styles over classname for rendering to static HTML
+      style={{
+        maxWidth: "100%",
+        maxHeight: "720px",
+        height: "auto",
+        objectFit: "contain",
+        margin: "32px auto",
+        ...props.style,
+      }}
+      className={cx("n-cursor-pointer", props.className)}
     />
   );
 });

package/src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 import { INPUT_HEIGHT } from "../../theme";
 import { Avatar, AvatarProps, AvatarStack } from "../Avatar";
-import Button from "../Button";
+import { Button } from "../Button";
 import { Small } from "../Text";
 import { Tooltip } from "../Tooltip";
 
@@ -11,7 +11,7 @@ export const UserAvatar = ({ userId, name, image }: AvatarProps) => (
   <Tooltip
     key={userId}
     content={
-      <div className="flex flex-col">
+      <div className="n-flex n-flex-col">
         <Small>{name}</Small>
       </div>
     }
@@ -32,8 +32,8 @@ export const ConnectedUsersMenuLayout = ({
   isAssistantOpen,
 }: ConnectedUsersMenuLayoutProps) => {
   return (
-    <div className="flex gap-1.5">
-      <AvatarStack size={INPUT_HEIGHT} className="mr-1">
+    <div className="n-flex n-gap-1.5">
+      <AvatarStack size={INPUT_HEIGHT} className="n-mr-1">
         {renderUsers()}
       </AvatarStack>
       {launchAIAssistant && (