@noya-app/noya-designsystem 0.1.77 → 0.1.79

package/src/components/resizablePanels/types.ts

@@ -0,0 +1,65 @@
+import { ReactNode, RefObject } from "react";
+
+export interface PanelGroupProps {
+  id?: string;
+  className?: string;
+  direction: "horizontal";
+  autoSaveId?: string;
+  onLayout?: (sizes: number[]) => void;
+  children: ReactNode;
+  ref?: RefObject<ImperativePanelGroupHandle | null>;
+}
+
+export interface PanelProps {
+  id?: string;
+  order: number;
+  className?: string;
+  defaultSize?: number;
+  minSize?: number;
+  maxSize?: number;
+  collapsible?: boolean;
+  defaultCollapsed?: boolean;
+  children?: ReactNode;
+}
+
+export interface ImperativePanelHandle {
+  expand: () => void;
+  collapse: () => void;
+  isExpanded: () => boolean;
+  getSize: () => number;
+}
+
+export interface ImperativePanelGroupHandle {
+  getLayout: () => number[];
+  setLayout: (sizes: number[]) => void;
+}
+
+export interface PanelResizeHandleProps {
+  className?: string;
+  disabled?: boolean;
+  /** The index of this handle (0 = between panels 0 and 1, 1 = between panels 1 and 2, etc.) */
+  index: number;
+}
+
+export interface PanelRegistration {
+  id: string;
+  order: number;
+  defaultSize?: number;
+  minSize?: number;
+  maxSize?: number;
+  collapsible?: boolean;
+  defaultCollapsed?: boolean;
+}
+
+export interface PanelGroupContextValue {
+  registerPanel: (panel: PanelRegistration) => void;
+  unregisterPanel: (id: string) => void;
+  getPanelSize: (id: string) => number;
+  setPanelSize: (id: string, size: number) => void;
+  getPanelIndex: (id: string) => number;
+  expandPanel: (id: string) => void;
+  collapsePanel: (id: string) => void;
+  isPanelExpanded: (id: string) => boolean;
+  startResize: (handleIndex: number, startX: number) => void;
+  containerWidth: number;
+}

package/src/components/workspace/DrawerWorkspaceLayout.tsx

@@ -2,13 +2,13 @@
 
 import { memoGeneric } from "@noya-app/react-utils";
 import React, { useMemo, useRef, useState } from "react";
+import { Button } from "../Button";
 import { DividerVertical } from "../Divider";
 import { Drawer } from "../Drawer";
 import { isSelectableMenuItem, MenuItem } from "../internal/Menu";
 import { EDITOR_PANEL_GROUP_ID, RIGHT_SIDEBAR_ID } from "./constants";
 import { LayoutProps, PanelLayoutState, SidebarRef } from "./types";
 import { VerticalTabMenu } from "./VerticalTabMenu";
-import { Button } from "../Button";
 
 export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
   LeftTab extends string = string,
@@ -138,16 +138,29 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
               }}
               icon={allSelectableTabItems[0].icon}
               tooltip={
-                allSelectableTabItems[0].tooltip ?? allSelectableTabItems[0].title
+                allSelectableTabItems[0].tooltip ??
+                allSelectableTabItems[0].title
               }
               active={(() => {
-                const value = allSelectableTabItems[0].value as LeftTab | RightTab;
-                const isLeftItem = leftSelectableTabItems.some((i) => i.value === value);
-                const isRightItem = rightSelectableTabItems.some((i) => i.value === value);
-                return isLeftItem ? !leftSidebarCollapsed : isRightItem ? !rightSidebarCollapsed : false;
+                const value = allSelectableTabItems[0].value as
+                  | LeftTab
+                  | RightTab;
+                const isLeftItem = leftSelectableTabItems.some(
+                  (i) => i.value === value
+                );
+                const isRightItem = rightSelectableTabItems.some(
+                  (i) => i.value === value
+                );
+                return isLeftItem
+                  ? !leftSidebarCollapsed
+                  : isRightItem
+                    ? !rightSidebarCollapsed
+                    : false;
               })()}
               onClick={() => {
-                const value = allSelectableTabItems[0].value as LeftTab | RightTab;
+                const value = allSelectableTabItems[0].value as
+                  | LeftTab
+                  | RightTab;
                 handleSelectTab(value);
               }}
             />
@@ -159,6 +172,7 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
 
       {leftPanel && (
         <Drawer
+          modal={false}
           ref={leftSidebarRef}
           className="n-flex-1"
           style={
@@ -185,6 +199,7 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
       {rightPanel && (
         <Drawer
           id={RIGHT_SIDEBAR_ID}
+          modal={false}
           ref={rightSidebarRef}
           className="n-flex-1"
           style={

package/src/components/workspace/PanelWorkspaceLayout.tsx

@@ -1,18 +1,14 @@
 "use client";
 
-import {
-  clientStorage,
-  memoGeneric,
-  usePersistentStateObject,
-} from "@noya-app/react-utils";
-import React, { useCallback, useMemo, useRef } from "react";
+import { memoGeneric } from "@noya-app/react-utils";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import {
   ImperativePanelGroupHandle,
   ImperativePanelHandle,
   Panel,
   PanelGroup,
   PanelResizeHandle,
-} from "react-resizable-panels";
+} from "../resizablePanels";
 import { DividerVertical } from "../Divider";
 import {
   CONTENT_AREA_ID,
@@ -20,17 +16,7 @@ import {
   LEFT_SIDEBAR_ID,
   RIGHT_SIDEBAR_ID,
 } from "./constants";
-import {
-  getInitialLayout,
-  getLayoutCollapsedState,
-  getLayoutIds,
-  getPropertyKey,
-  getStorageKey,
-  panelStorage,
-  setInitialLayout,
-  toPixelSize,
-} from "./panelStorage";
-import { LayoutProps, WorkspaceLayoutState } from "./types";
+import { LayoutProps } from "./types";
 import { VerticalTabMenu } from "./VerticalTabMenu";
 
 export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
@@ -42,7 +28,6 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
   centerPanel,
   leftSidebarOptions,
   rightSidebarOptions,
-  centerPanelPercentage,
   autoSavePrefix,
   leftSidebarRef,
   rightSidebarRef,
@@ -56,56 +41,35 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
 }: LayoutProps<LeftTab, RightTab>) {
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
 
-  const hasLeftPanel = !!leftPanel;
-  const hasRightPanel = !!rightPanel;
-  const hasCenterPanel = !!centerPanel;
-
   const autoSaveId = useMemo(() => {
     return autoSavePrefix
-      ? `${autoSavePrefix}--v2--${EDITOR_PANEL_GROUP_ID}`
+      ? `${autoSavePrefix}--v3--${EDITOR_PANEL_GROUP_ID}`
       : Math.random().toString(36).substring(2, 15);
   }, [autoSavePrefix]);
 
-  const layoutIds = getLayoutIds({
-    hasLeftPanel,
-    hasRightPanel,
-    hasCenterPanel,
-  });
-  const storageKey = getStorageKey(autoSaveId);
-  const propertyKey = getPropertyKey(layoutIds);
-
-  setInitialLayout({
-    storageKey,
-    propertyKey,
-    calculateLayout: () => {
-      return getInitialLayout({
-        layoutIds,
-        leftSidebarOptions,
-        rightSidebarOptions,
-        centerPanelPercentage,
-        hasLeftPanel,
-        hasRightPanel,
-        hasCenterPanel,
-      });
-    },
-  });
-
-  const [data, setData] = usePersistentStateObject<
-    WorkspaceLayoutState,
-    string
-  >(clientStorage, storageKey, {});
+  // Track collapsed state based on layout changes
+  const [leftSidebarCollapsed, setLeftSidebarCollapsed] = useState(
+    leftSidebarOptions.defaultCollapsed ?? false
+  );
+  const [rightSidebarCollapsed, setRightSidebarCollapsed] = useState(
+    rightSidebarOptions.defaultCollapsed ?? false
+  );
 
-  const layoutGroup = data?.[propertyKey];
+  const handleLayoutChange = useCallback(
+    (sizes: number[]) => {
+      // Update collapsed state based on sizes
+      const leftIndex = leftPanel ? 0 : -1;
+      const rightIndex = rightPanel ? (leftPanel ? 2 : 1) : -1;
 
-  const { leftSidebarCollapsed, rightSidebarCollapsed } = useMemo(() => {
-    return getLayoutCollapsedState({
-      layoutGroup,
-      propertyKey,
-      layoutIds,
-      hasLeftPanel,
-      hasRightPanel,
-    });
-  }, [layoutGroup, propertyKey, layoutIds, hasLeftPanel, hasRightPanel]);
+      if (leftIndex >= 0) {
+        setLeftSidebarCollapsed(sizes[leftIndex] === 0);
+      }
+      if (rightIndex >= 0) {
+        setRightSidebarCollapsed(sizes[rightIndex] === 0);
+      }
+    },
+    [leftPanel, rightPanel]
+  );
 
   const handleLeftTabChange = useCallback(
     (value: LeftTab) => {
@@ -143,23 +107,6 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
     [onChangeRightTab, rightSidebarRef, rightTabValue]
   );
 
-  const handleLayoutChange = useCallback(
-    (layout: number[]) => {
-      setData((prev) => {
-        const newData = {
-          ...prev,
-          [propertyKey]: {
-            layout: layout.map((size) => toPixelSize(size)),
-            expandToSizes: prev?.[propertyKey]?.expandToSizes ?? {},
-          },
-        };
-
-        return newData;
-      });
-    },
-    [setData, propertyKey]
-  );
-
   const showLeftTabs =
     !!leftSidebarOptions.showTabs &&
     !!leftTabItems &&
@@ -173,7 +120,6 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
       id={EDITOR_PANEL_GROUP_ID}
       className="n-flex-1"
       direction="horizontal"
-      storage={panelStorage}
       autoSaveId={autoSaveId}
       onLayout={handleLayoutChange}
     >
@@ -205,24 +151,23 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
                 : undefined)
             }
             collapsible
+            defaultCollapsed={leftSidebarOptions.defaultCollapsed}
           >
             {leftSidebarCollapsed ? null : leftPanel}
           </Panel>
-          <PanelResizeHandle className="n-cursor-col-resize n-w-px n-h-full n-bg-divider" />
+          <PanelResizeHandle index={0} className="n-cursor-col-resize n-w-px n-h-full n-bg-divider" />
         </>
       )}
       <Panel
         id={CONTENT_AREA_ID}
         order={2}
-        defaultSize={centerPanelPercentage}
-        minSize={10}
         className="n-flex n-relative"
       >
         {centerPanel}
       </Panel>
       {rightPanel && (
         <>
-          <PanelResizeHandle className="n-cursor-col-resize n-w-px n-h-full n-bg-divider" />
+          <PanelResizeHandle index={1} className="n-cursor-col-resize n-w-px n-h-full n-bg-divider" />
           <Panel
             id={RIGHT_SIDEBAR_ID}
             className="n-relative"
@@ -237,6 +182,7 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
                 : undefined)
             }
             collapsible
+            defaultCollapsed={rightSidebarOptions.defaultCollapsed}
           >
             {rightSidebarCollapsed ? null : rightPanel}
           </Panel>

package/src/components/workspace/WorkspaceLayout.tsx

@@ -22,8 +22,8 @@ import { PanelWorkspaceLayout } from "./PanelWorkspaceLayout";
 import { renderPanelChildren } from "./renderPanelChildren";
 import {
   LayoutProps,
-  PercentageSidebarOptions,
   RenderPanel,
+  SidebarOptions,
   SidebarRef,
 } from "./types";
 import { WorkspaceSideProvider } from "./WorkspaceSideContext";
@@ -194,46 +194,22 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
         ? containerSize
         : windowSize;
 
-  function getPercentage(size: number | string) {
-    return typeof size === "string"
-      ? parseFloat(size)
-      : (size / parentSize.width) * 100;
+  // Convert size to pixels (handles both number and percentage string)
+  function toPixels(size: number | string | undefined): number | undefined {
+    if (size === undefined) return undefined;
+    if (typeof size === "number") return size;
+    // Parse percentage string like "20%"
+    const percentage = parseFloat(size);
+    return Math.round((percentage / 100) * parentSize.width);
   }
 
-  function clampPercentage(
-    value: number,
-    min: number | undefined,
-    max: number | undefined
-  ) {
-    let result = value;
-    if (min !== undefined) {
-      result = Math.max(result, min);
-    }
-    if (max !== undefined) {
-      result = Math.min(result, max);
-    }
-    return result;
-  }
+  const leftSidebarMinPixels = toPixels(leftMinSize);
+  const leftSidebarMaxPixels = toPixels(leftMaxSize);
+  const leftSidebarInitialPixels = toPixels(leftInitialSize) ?? 280;
 
-  const leftSidebarMinPercentage =
-    leftMinSize !== undefined ? getPercentage(leftMinSize) : undefined;
-  const rightSidebarMinPercentage =
-    rightMinSize !== undefined ? getPercentage(rightMinSize) : undefined;
-  const leftSidebarMaxPercentage =
-    leftMaxSize !== undefined ? getPercentage(leftMaxSize) : undefined;
-  const rightSidebarMaxPercentage =
-    rightMaxSize !== undefined ? getPercentage(rightMaxSize) : undefined;
-
-  const leftSidebarPercentage = clampPercentage(
-    getPercentage(leftInitialSize),
-    leftSidebarMinPercentage,
-    leftSidebarMaxPercentage
-  );
-  const rightSidebarPercentage = clampPercentage(
-    getPercentage(rightInitialSize),
-    rightSidebarMinPercentage,
-    rightSidebarMaxPercentage
-  );
+  const rightSidebarMinPixels = toPixels(rightMinSize);
+  const rightSidebarMaxPixels = toPixels(rightMaxSize);
+  const rightSidebarInitialPixels = toPixels(rightInitialSize) ?? 280;
 
   const leftSidebarRef = useRef<SidebarRef>(null);
   const rightSidebarRef = useRef<SidebarRef>(null);
@@ -313,11 +289,6 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     },
   });
 
-  const centerPanelPercentage =
-    100 -
-    (left ? leftSidebarPercentage : 0) -
-    (right ? rightSidebarPercentage : 0);
-
   const isDrawerActive =
     sideType === "drawer" ||
     (sideType === "auto" && parentSize.width <= sideTypeBreakpoint);
@@ -390,38 +361,38 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     <PanelInner className="n-bg-canvas-background">{children}</PanelInner>
   );
 
-  const leftSidebarOptions: PercentageSidebarOptions = useMemo(
+  const leftSidebarOptions: SidebarOptions = useMemo(
     () => ({
-      minSize: leftSidebarMinPercentage,
-      maxSize: leftSidebarMaxPercentage,
-      initialSize: leftSidebarPercentage,
+      minSize: leftSidebarMinPixels,
+      maxSize: leftSidebarMaxPixels,
+      initialSize: leftSidebarInitialPixels,
       resizable: leftResizable,
       defaultCollapsed: leftDefaultCollapsed,
       showTabs: leftShowTabs,
     }),
     [
-      leftSidebarMinPercentage,
-      leftSidebarMaxPercentage,
-      leftSidebarPercentage,
+      leftSidebarMinPixels,
+      leftSidebarMaxPixels,
+      leftSidebarInitialPixels,
       leftResizable,
       leftDefaultCollapsed,
       leftShowTabs,
     ]
   );
 
-  const rightSidebarOptions: PercentageSidebarOptions = useMemo(
+  const rightSidebarOptions: SidebarOptions = useMemo(
     () => ({
-      minSize: rightSidebarMinPercentage,
-      maxSize: rightSidebarMaxPercentage,
-      initialSize: rightSidebarPercentage,
+      minSize: rightSidebarMinPixels,
+      maxSize: rightSidebarMaxPixels,
+      initialSize: rightSidebarInitialPixels,
       resizable: rightResizable,
       defaultCollapsed: rightDefaultCollapsed,
       showTabs: rightShowTabs,
     }),
     [
-      rightSidebarMinPercentage,
-      rightSidebarMaxPercentage,
-      rightSidebarPercentage,
+      rightSidebarMinPixels,
+      rightSidebarMaxPixels,
+      rightSidebarInitialPixels,
       rightResizable,
       rightDefaultCollapsed,
       rightShowTabs,
@@ -476,7 +447,6 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
               onChangeRightTab={setRightTabValue}
               leftSidebarOptions={leftSidebarOptions}
               rightSidebarOptions={rightSidebarOptions}
-              centerPanelPercentage={centerPanelPercentage}
               autoSavePrefix={autoSavePrefix}
               leftSidebarRef={leftSidebarRef}
               rightSidebarRef={rightSidebarRef}

package/src/components/workspace/types.ts

@@ -7,7 +7,10 @@ export type SidebarRef = {
   isExpanded: () => boolean;
 };
 
-export type PercentageSidebarOptions = {
+/**
+ * Sidebar options with pixel-based sizing.
+ */
+export type SidebarOptions = {
   minSize?: number;
   maxSize?: number;
   initialSize?: number;
@@ -45,9 +48,8 @@ export type LayoutProps<
   rightTabValue?: RightTab;
   onChangeRightTab?: (value: RightTab) => void;
   centerPanel: React.ReactNode;
-  leftSidebarOptions: PercentageSidebarOptions;
-  rightSidebarOptions: PercentageSidebarOptions;
-  centerPanelPercentage: number;
+  leftSidebarOptions: SidebarOptions;
+  rightSidebarOptions: SidebarOptions;
   autoSavePrefix?: string;
   leftSidebarRef: React.RefObject<SidebarRef | null>;
   rightSidebarRef: React.RefObject<SidebarRef | null>;

package/src/contexts/DialogContext.tsx

@@ -231,6 +231,21 @@ export const DialogProvider = function DialogProvider({
   const confirmButtonRef = useRef<HTMLButtonElement>(null);
   const dialogRef = useRef<IDialog>(null);
 
+  // Handle auto-focus when dialog opens
+  React.useEffect(() => {
+    if (!contents) return;
+
+    // Use requestAnimationFrame to ensure the dialog is rendered
+    requestAnimationFrame(() => {
+      if (contents.type === "input") {
+        inputRef.current?.focus();
+        inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
+      } else if (contents.type === "confirmation") {
+        confirmButtonRef.current?.focus();
+      }
+    });
+  }, [contents]);
+
   const containsElement = useCallback((element: HTMLElement) => {
     if (!dialogRef.current) return false;
 
@@ -267,30 +282,6 @@ export const DialogProvider = function DialogProvider({
           },
           [close]
         )}
-        onOpenAutoFocus={useCallback(
-          (event: Event) => {
-            if (!contents) return;
-
-            if (contents.type === "input") {
-              event.stopPropagation();
-              event.preventDefault();
-              inputRef.current?.focus();
-              inputRef.current?.setSelectionRange(
-                0,
-                inputRef.current.value.length
-              );
-              return;
-            }
-
-            if (contents.type === "confirmation") {
-              event.stopPropagation();
-              event.preventDefault();
-              confirmButtonRef.current?.focus();
-              return;
-            }
-          },
-          [contents]
-        )}
       >
         {contents?.type === "confirmation" ? (
           <div className="n-flex n-flex-1 n-flex-row n-items-center">

package/src/emojis.ts

@@ -0,0 +1 @@
+export { gemoji as emojis } from "gemoji";

package/src/hooks/useTriggerToggle.ts

@@ -0,0 +1,95 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface UseTriggerToggleOptions {
+  /**
+   * Called when an interaction outside the popup occurs.
+   * Return false to prevent the component from closing.
+   */
+  shouldCloseOnInteractOutside?: (event: PointerEvent) => boolean;
+}
+
+/**
+ * Hook that provides toggle behavior for trigger-based components (Popover, Drawer, etc.)
+ *
+ * When a component is open and the user clicks the trigger, this hook ensures:
+ * 1. The component closes (normal behavior)
+ * 2. The immediate reopen attempt from the same click is blocked
+ * 3. Subsequent clicks work normally
+ *
+ * @param isOpen - Whether the component is currently open
+ * @param setIsOpen - Function to update the open state
+ * @param options - Optional configuration
+ * @returns Object with anchorElement state, popupRef, and handleOpenChange
+ */
+export function useTriggerToggle(
+  isOpen: boolean,
+  setIsOpen: (open: boolean) => void,
+  options: UseTriggerToggleOptions = {}
+) {
+  const { shouldCloseOnInteractOutside } = options;
+
+  const [anchorElement, setAnchorElement] = useState<Element | null>(null);
+  const popupRef = useRef<HTMLDivElement>(null);
+  // Track whether a close was just initiated (to prevent immediate reopen from same click)
+  const closeInitiatedRef = useRef(false);
+  // Track whether the next close should be prevented based on shouldCloseOnInteractOutside
+  const shouldPreventCloseRef = useRef(false);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      // Check if click is outside the popup content for shouldCloseOnInteractOutside
+      if (
+        popupRef.current &&
+        !popupRef.current.contains(event.target as Node)
+      ) {
+        if (shouldCloseOnInteractOutside) {
+          const shouldClose = shouldCloseOnInteractOutside(event);
+          shouldPreventCloseRef.current = !shouldClose;
+        }
+      }
+    };
+
+    // Use capture phase to intercept before Base UI's handler
+    document.addEventListener("pointerdown", handlePointerDown, true);
+
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+    };
+  }, [isOpen, anchorElement, shouldCloseOnInteractOutside]);
+
+  const handleOpenChange = useCallback(
+    (newOpen: boolean) => {
+      // If closing and we should prevent it, skip
+      if (!newOpen && shouldPreventCloseRef.current) {
+        shouldPreventCloseRef.current = false;
+        return;
+      }
+
+      // When closing, set flag and clear it on next macrotask
+      // This detects if open is called within the same event loop cycle (same click)
+      if (!newOpen) {
+        closeInitiatedRef.current = true;
+        setTimeout(() => {
+          closeInitiatedRef.current = false;
+        }, 0);
+      }
+
+      // Block immediate reopen from the same click that closed the component
+      if (newOpen && closeInitiatedRef.current) {
+        return;
+      }
+
+      setIsOpen(newOpen);
+    },
+    [setIsOpen]
+  );
+
+  return {
+    anchorElement,
+    setAnchorElement,
+    popupRef,
+    handleOpenChange,
+  };
+}

package/src/index.css

@@ -109,6 +109,8 @@
   --n-inspector-v-separator: 10px;
   --n-dialog-padding: 32px;
   --n-input-height: 27px;
+  --n-input-padding-x: 8px;
+  --n-input-padding-y: 4px;
   --n-icon: var(--n-indigo-300);
   --n-icon-selected: rgb(220, 220, 220);
   --n-warning: rgb(251, 211, 0);

package/src/index.tsx

@@ -26,6 +26,7 @@ export * from "./components/DraggableMenuButton";
 export * from "./components/Drawer";
 export * from "./components/DropdownMenu";
 export * from "./components/EditableText";
+export * from "./components/EmojiPicker";
 export * from "./components/Fade";
 export * from "./components/file-explorer/FileExplorerLayout";
 export * from "./components/FileUploadIndicator";
@@ -43,7 +44,6 @@ export type {
   MenuItem,
   SelectableMenuItem,
 } from "./components/internal/Menu";
-export * from "./components/internal/MenuViewport";
 export * from "./components/IVirtualizedList";
 export * from "./components/Label";
 export * from "./components/LabeledElementView";
@@ -63,7 +63,6 @@ export * from "./components/ResizableContainer";
 export * from "./components/RingProgress";
 export * from "./components/ScrollableSidebar";
 export * from "./components/ScrollArea";
-export * from "./components/ScrollArea2";
 export * from "./components/SearchCompletionMenu";
 export * from "./components/Section";
 export * from "./components/SegmentedControl";

package/src/theme/proseTheme.ts

@@ -13,6 +13,8 @@ export const whiteboardProseTheme = (isDark: boolean) =>
     "prose-li:n-m-0",
     "prose-li:n-p-0",
     "prose-a:n-text-inherit",
+    "prose-pre:n-my-1",
+    "prose-pre:n-text-inherit",
     "prose-strong:n-text-inherit",
     "prose-em:n-italic",
     "prose-ol:n-list-inside",