@noya-app/noya-designsystem 0.1.63 → 0.1.64

package/src/contexts/DesignSystemConfiguration.tsx

@@ -1,8 +1,11 @@
+"use client";
+
 import { getCurrentPlatform, PlatformName } from "@noya-app/noya-keymap";
 import * as React from "react";
 import { ToastProvider } from "../components/Toast";
 import { DialogProvider } from "./DialogContext";
 import { FloatingWindowProvider } from "./FloatingWindowContext";
+import { LinkComponent, LinkComponentProvider } from "./LinkComponentContext";
 import { OpenPortalsProvider } from "./OpenPortalsContext";
 
 export type DesignSystemConfigurationContextValue = {
@@ -18,9 +21,11 @@ export const DesignSystemConfigurationProvider = React.memo(
   function DesignSystemConfigurationProvider({
     children,
     platform,
+    LinkComponent,
   }: {
     children: React.ReactNode;
     platform?: PlatformName;
+    LinkComponent?: LinkComponent;
   }) {
     const [internalPlatform, setInternalPlatform] =
       React.useState<PlatformName>(platform ?? "key");
@@ -41,11 +46,13 @@ export const DesignSystemConfigurationProvider = React.memo(
     return (
       <DesignSystemConfigurationContext.Provider value={contextValue}>
         <OpenPortalsProvider>
-          <DialogProvider>
-            <ToastProvider>
-              <FloatingWindowProvider>{children}</FloatingWindowProvider>
-            </ToastProvider>
-          </DialogProvider>
+          <LinkComponentProvider value={LinkComponent}>
+            <DialogProvider>
+              <ToastProvider>
+                <FloatingWindowProvider>{children}</FloatingWindowProvider>
+              </ToastProvider>
+            </DialogProvider>
+          </LinkComponentProvider>
         </OpenPortalsProvider>
       </DesignSystemConfigurationContext.Provider>
     );

package/src/contexts/DialogContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, {
   createContext,
   ReactNode,

package/src/contexts/FloatingWindowContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { uuid } from "@noya-app/noya-utils";
 import React, { createContext, useContext, useMemo, useState } from "react";
 import { createPortal } from "react-dom";

package/src/contexts/GlobalInputBlurContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { createContext, useContext, useEffect } from 'react';
 
 export type GlobalInputBlurContextValue = {

package/src/contexts/ImageDataContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 export type ImageDataContextValue = {

package/src/contexts/LinkComponentContext.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+
+export type LinkComponent = React.ComponentType<React.ComponentProps<"a">>;
+
+const LinkComponentContext = createContext<LinkComponent | undefined>(
+  undefined
+);
+
+export const LinkComponentProvider = LinkComponentContext.Provider;
+
+export const useLinkComponent = () => {
+  const Link = useContext(LinkComponentContext);
+
+  return Link ?? "a";
+};

package/src/contexts/OpenPortalsContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 export type OpenPortalsContextValue = {

package/src/contexts/PortalScopeContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 export type PortalScopeContextValue = string;

package/src/hooks/mergeEventHandlers.ts

@@ -1,7 +1,7 @@
 import { unique } from "@noya-app/noya-utils";
 import { composeEventHandlers } from "@radix-ui/primitive";
 
-function composeAllEventHandlers<E>(...handlers: ((e: E) => void)[]) {
+function composeAllEventHandlers<E extends { defaultPrevented: boolean }>(...handlers: ((e: E) => void)[]) {
   const [first, ...rest] = handlers;
 
   return rest.reduce(

package/src/hooks/useHover.ts

@@ -1,3 +1,5 @@
+"use client";
+
 // From: https://github.com/radix-ui/primitives/blob/main/packages/react/scroll-area/src/useHover.ts
 // MIT License
 
@@ -8,13 +10,13 @@
 // @see https://github.com/adobe/react-spectrum/tree/452d1cb6a49f9f493757737edaf2b64014108de6/packages/%40react-aria
 // @see https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
-import * as React from 'react';
+import * as React from "react";
 
 export interface HoverEvent {
   /** The type of hover event being fired. */
-  type: 'hoverstart' | 'hoverend';
+  type: "hoverstart" | "hoverend";
   /** The pointer type that triggered the hover event. */
-  pointerType: 'mouse' | 'pen';
+  pointerType: "mouse" | "pen";
   /** The target element of the hover event. */
   target: HTMLElement;
 }
@@ -58,17 +60,17 @@ function setGlobalIgnoreEmulatedMouseEvents() {
 }
 
 function handleGlobalPointerEvent(event: PointerEvent) {
-  if (event.pointerType === 'touch') {
+  if (event.pointerType === "touch") {
     setGlobalIgnoreEmulatedMouseEvents();
   }
 }
 
 function setupGlobalTouchEvents() {
-  if (typeof document === 'undefined') {
+  if (typeof document === "undefined") {
     return;
   }
 
-  document.addEventListener('pointerup', handleGlobalPointerEvent);
+  document.addEventListener("pointerup", handleGlobalPointerEvent);
 
   hoverCount++;
   return function teardownGlobalTouchEvents() {
@@ -76,7 +78,7 @@ function setupGlobalTouchEvents() {
     if (hoverCount > 0) {
       return;
     }
-    document.removeEventListener('pointerup', handleGlobalPointerEvent);
+    document.removeEventListener("pointerup", handleGlobalPointerEvent);
   };
 }
 
@@ -98,10 +100,14 @@ export function useHover(props: HoverProps = {}): HoverResult {
   const hoverProps = React.useMemo(
     function getHoverProps() {
       function triggerHoverStart(
-        event: PointerEvent | React.PointerEvent | MouseEvent | React.MouseEvent,
-        pointerType: 'mouse' | 'pen' | 'touch'
+        event:
+          | PointerEvent
+          | React.PointerEvent
+          | MouseEvent
+          | React.MouseEvent,
+        pointerType: "mouse" | "pen" | "touch"
       ) {
-        if (isDisabled || pointerType === 'touch' || state.isHovered) {
+        if (isDisabled || pointerType === "touch" || state.isHovered) {
           return;
         }
 
@@ -110,7 +116,7 @@ export function useHover(props: HoverProps = {}): HoverResult {
 
         if (onHoverStart) {
           onHoverStart({
-            type: 'hoverstart',
+            type: "hoverstart",
             target,
             pointerType,
           });
@@ -124,10 +130,14 @@ export function useHover(props: HoverProps = {}): HoverResult {
       }
 
       function triggerHoverEnd(
-        event: PointerEvent | React.PointerEvent | MouseEvent | React.MouseEvent,
-        pointerType: 'mouse' | 'pen' | 'touch'
+        event:
+          | PointerEvent
+          | React.PointerEvent
+          | MouseEvent
+          | React.MouseEvent,
+        pointerType: "mouse" | "pen" | "touch"
       ) {
-        if (isDisabled || pointerType === 'touch' || !state.isHovered) {
+        if (isDisabled || pointerType === "touch" || !state.isHovered) {
           return;
         }
 
@@ -136,7 +146,7 @@ export function useHover(props: HoverProps = {}): HoverResult {
 
         if (onHoverEnd) {
           onHoverEnd({
-            type: 'hoverend',
+            type: "hoverend",
             target,
             pointerType,
           });
@@ -151,7 +161,10 @@ export function useHover(props: HoverProps = {}): HoverResult {
 
       const hoverProps: React.HTMLAttributes<HTMLElement> = {
         onPointerEnter(event: React.PointerEvent<HTMLElement>) {
-          if (globalIgnoreEmulatedMouseEvents && event.pointerType === 'mouse') {
+          if (
+            globalIgnoreEmulatedMouseEvents &&
+            event.pointerType === "mouse"
+          ) {
             return;
           }
           triggerHoverStart(event, event.pointerType);
@@ -170,4 +183,4 @@ export function useHover(props: HoverProps = {}): HoverResult {
     hoverProps,
     isHovered,
   };
-}
+}

package/src/hooks/useIndent.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 
 export const IndentContext = React.createContext<{

package/src/hooks/useLabel.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { ReactNode } from "react";
 
 export type LabelType = "inset" | "start" | "end" | "above" | "none";

package/src/hooks/useObjectURL.ts

@@ -1,4 +1,6 @@
-import { useLayoutEffect, useMemo } from 'react';
+"use client";
+
+import { useLayoutEffect, useMemo } from "react";
 
 export function useObjectURL(object?: ArrayBuffer | Uint8Array | Blob) {
   const objectURL = useMemo(() => {
@@ -8,8 +10,8 @@ export function useObjectURL(object?: ArrayBuffer | Uint8Array | Blob) {
       object instanceof Uint8Array
         ? object
         : object !== undefined
-        ? new Uint8Array(object)
-        : new Uint8Array();
+          ? new Uint8Array(object)
+          : new Uint8Array();
 
     return URL.createObjectURL(new Blob([bytes]));
   }, [object]);

package/src/hooks/usePlatform.ts

@@ -1,4 +1,6 @@
-import { useDesignSystemConfiguration } from '../contexts/DesignSystemConfiguration';
+"use client";
+
+import { useDesignSystemConfiguration } from "../contexts/DesignSystemConfiguration";
 
 export function usePlatform() {
   return useDesignSystemConfiguration().platform;
@@ -7,7 +9,7 @@ export function usePlatform() {
 /**
  * Either ctrl or meta, depending on the platform
  */
-export function usePlatformModKey(): 'ctrlKey' | 'metaKey' {
+export function usePlatformModKey(): "ctrlKey" | "metaKey" {
   const platform = useDesignSystemConfiguration().platform;
-  return platform === 'mac' ? 'metaKey' : 'ctrlKey';
+  return platform === "mac" ? "metaKey" : "ctrlKey";
 }

package/src/hooks/useTheme.ts

@@ -1,4 +1,6 @@
-import { useState, useEffect } from "react";
+"use client";
+
+import { useEffect, useState } from "react";
 
 /** @default light */
 export type UseThemeReturnType = "dark" | "light";

package/src/index.css

@@ -11,6 +11,7 @@
   --n-primary-150: rgb(225, 219, 255);
   --n-primary-100: rgb(234, 230, 255); /* --n-primary-pastel */
   --n-primary-50: rgb(243, 242, 255);
+  --n-primary-25: rgb(250, 248, 255);
 
   --n-indigo-950: rgb(18, 26, 37);
   --n-indigo-900: rgb(30, 40, 60);
@@ -58,6 +59,13 @@
   --n-button-background-active-hover: var(--n-primary-50);
   --n-button-text: var(--n-text);
   --n-button-text-active: var(--n-primary);
+  --n-toolbar-drawer-background: var(--n-primary-25);
+  --n-toolbar-drawer-border: color-mix(
+    in srgb,
+    var(--n-primary) 30%,
+    transparent
+  );
+  --n-toolbar-drawer-shadow: rgba(153, 153, 153, 0.25);
   --n-canvas-background: var(--n-indigo-25);
   --n-canvas-grid: rgba(0, 0, 0, 0.05);
   --n-sidebar-background: rgb(255, 255, 255);
@@ -162,6 +170,17 @@
   --n-button-text-active: var(--n-primary-100);
   --n-secondary-bright: #36fe91;
   --n-code-background: rgb(20, 19, 23);
+  --n-toolbar-drawer-background: color-mix(
+    in srgb,
+    var(--n-primary-900) 50%,
+    var(--n-background)
+  );
+  --n-toolbar-drawer-border: color-mix(
+    in srgb,
+    var(--n-primary-700) 30%,
+    transparent
+  );
+  --n-toolbar-drawer-shadow: rgba(255, 255, 255, 0.1);
   --n-canvas-background: rgb(20, 19, 23);
   --n-canvas-grid: rgba(0, 0, 0, 0.1);
   --n-sidebar-background: rgb(34, 33, 39);

package/src/index.tsx

@@ -5,6 +5,7 @@ export * from "./components/ai-assistant/AIAssistantLayout";
 export * from "./components/AnimatePresence";
 export * from "./components/Avatar";
 export * from "./components/Banner";
+export * from "./components/blocks/ImageBlockComponent";
 export * from "./components/Breadcrumbs";
 export * from "./components/Button";
 export * from "./components/Checkbox";
@@ -25,6 +26,7 @@ export * from "./components/DropdownMenu";
 export * from "./components/EditableText";
 export * from "./components/Fade";
 export * from "./components/file-explorer/FileExplorerLayout";
+export * from "./components/FileUploadIndicator";
 export * from "./components/FillInputField";
 export * from "./components/FillPreviewBackground";
 export * from "./components/FloatingWindow";
@@ -81,6 +83,7 @@ export * from "./contexts/DialogContext";
 export * from "./contexts/FloatingWindowContext";
 export * from "./contexts/GlobalInputBlurContext";
 export * from "./contexts/ImageDataContext";
+export * from "./contexts/LinkComponentContext";
 export * from "./contexts/OpenPortalsContext";
 export * from "./contexts/PortalScopeContext";
 // Hooks
@@ -88,12 +91,11 @@ export * from "./hooks/useHover";
 export * from "./hooks/useIndent";
 export * from "./hooks/useLabel";
 export * from "./hooks/usePlatform";
-export * from "./hooks/usePreservePanelSize";
 export * from "./hooks/useTheme";
-export * from "./mediaQuery";
 export * from "./theme";
 export * from "./utils/classNames";
 export * from "./utils/createSectionedMenu";
+export * from "./utils/formatByteSize";
 export * from "./utils/getGradientBackground";
 // Utils
 export * from "./utils/colorFromString";
@@ -112,3 +114,4 @@ export * as InspectorPrimitives from "./components/InspectorPrimitives";
 
 export * from "./components/BaseToolbar";
 export * from "./components/Toolbar";
+export * from "./components/ToolbarDrawer";

package/src/utils/classNames.ts

@@ -41,8 +41,9 @@ const keyMap: Record<Category, Set<string>> = {
   position: positionKeysSet,
 };
 
-export function cx(...args: ClassNameItem[]): string {
-  return args.filter(Boolean).join(" ").trim();
+export function cx(...args: ClassNameItem[]): string | undefined {
+  const classes = args.filter(Boolean).join(" ").trim();
+  return classes.length > 0 ? classes : undefined;
 }
 
 const filterLastClassNameInCategory = ({
@@ -68,7 +69,7 @@ export function mergeConflictingClassNames(
   const classes = Array.isArray(classNames)
     ? cx(...classNames)
     : cx(classNames);
-  let classNamesList = classes.split(/\s+/);
+  let classNamesList = classes?.split(/\s+/) ?? [];
   options?.categories?.forEach((category) => {
     classNamesList = filterLastClassNameInCategory({
       classNames: classNamesList,

package/src/utils/combobox.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { chunkBy, partition } from "@noya-app/noya-utils";
 import { useSyncExternalStore } from "react";
 import {

package/src/utils/formatByteSize.ts

@@ -0,0 +1,8 @@
+const byteSizeUnits = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+export function formatByteSize(size: number) {
+  const unitIndex = Math.floor(Math.log(size) / Math.log(1024));
+  const unit = byteSizeUnits[unitIndex];
+  const value = size / Math.pow(1024, unitIndex);
+  return `${value.toFixed(1)} ${unit}`;
+}

package/src/utils/withSeparatorElements.ts

@@ -16,7 +16,7 @@ function flattenChildren(
 ): ReactNode[] {
   return Children.toArray(children).flatMap((child) => {
     if (traverseFragments && isValidElement(child) && child.type === Fragment) {
-      return flattenChildren(child.props.children, traverseFragments);
+      return flattenChildren((child as any).props.children, traverseFragments);
     }
     return child;
   });

package/src/hooks/usePreservePanelSize.tsx

@@ -1,183 +0,0 @@
-import { useWindowSize } from "@noya-app/react-utils";
-import React, { useLayoutEffect, useRef } from "react";
-import { ImperativePanelGroupHandle } from "react-resizable-panels";
-import { PanelLayoutState } from "../components/workspace/types";
-
-export const EDITOR_PANEL_GROUP_ID = "editor-panel-group";
-export const LEFT_SIDEBAR_ID = "editor-left-sidebar";
-export const RIGHT_SIDEBAR_ID = "editor-right-sidebar";
-export const CONTENT_AREA_ID = "editor-content-area";
-
-export function usePreservePanelSize(
-  panelGroupRef: React.RefObject<ImperativePanelGroupHandle | null>,
-  setPanelLayoutState?: (state: PanelLayoutState) => void
-) {
-  const windowSize = useWindowSize();
-  const layoutRef = useRef<
-    { windowWidth: number; panelPercentages: number[] } | undefined
-  >();
-
-  useLayoutEffect(() => {
-    const panelGroup = document.querySelector(
-      `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
-    ) as HTMLElement;
-
-    function observePanels() {
-      const panels = [
-        ...panelGroup.querySelectorAll<HTMLElement>("[data-panel]"),
-      ];
-
-      const panelObserver = new ResizeObserver(() => {
-        const layout = {
-          windowWidth: panelGroup.offsetWidth,
-          panelPercentages: panelGroupRef.current?.getLayout() ?? [],
-        };
-        layoutRef.current = layout;
-
-        const leftSidebar = panels.find(
-          (panel) => panel.id === LEFT_SIDEBAR_ID
-        );
-        const rightSidebar = panels.find(
-          (panel) => panel.id === RIGHT_SIDEBAR_ID
-        );
-
-        setPanelLayoutState?.({
-          leftSidebarCollapsed: leftSidebar?.offsetWidth === 0,
-          rightSidebarCollapsed: rightSidebar?.offsetWidth === 0,
-        });
-      });
-
-      panels.forEach((panel) => panelObserver.observe(panel));
-
-      return () => {
-        panelObserver.disconnect();
-      };
-    }
-
-    let disconnectPanelObserver = observePanels();
-
-    const panelGroupObserver = new MutationObserver(() => {
-      disconnectPanelObserver();
-      disconnectPanelObserver = observePanels();
-    });
-
-    panelGroupObserver.observe(panelGroup, {
-      childList: true,
-    });
-
-    return () => {
-      disconnectPanelObserver();
-      panelGroupObserver.disconnect();
-    };
-  }, [panelGroupRef, setPanelLayoutState]);
-
-  useLayoutEffect(() => {
-    if (!layoutRef.current) return;
-
-    // Preserve the pixel values of the left and right sidebar when the window is resized.
-    // To do this we convert the percentage values to pixel values based on the old window width,
-    // then convert the pixel values to percentage values based on the new window width.
-    const {
-      windowWidth: oldWindowWidth,
-      panelPercentages: oldPanelPercentages,
-    } = layoutRef.current;
-
-    // Check the types of the values in the array
-    if (
-      oldPanelPercentages.some(
-        (value) => typeof value !== "number" || isNaN(value)
-      ) ||
-      oldWindowWidth === 0
-    ) {
-      return;
-    }
-
-    const currentLayout = panelGroupRef.current?.getLayout();
-
-    // Ensure we have the same number of panels
-    if (!currentLayout || currentLayout.length !== oldPanelPercentages.length) {
-      return;
-    }
-
-    if (currentLayout.length === 3) {
-      const leftSidebarWidth = (oldPanelPercentages[0] / 100) * oldWindowWidth;
-      const rightSidebarWidth = (oldPanelPercentages[2] / 100) * oldWindowWidth;
-
-      const newLeftSidebarPercentage =
-        (leftSidebarWidth / windowSize.width) * 100;
-      const newRightSidebarPercentage =
-        (rightSidebarWidth / windowSize.width) * 100;
-
-      const newLayout = [
-        newLeftSidebarPercentage,
-        100 - newLeftSidebarPercentage - newRightSidebarPercentage,
-        newRightSidebarPercentage,
-      ];
-
-      try {
-        panelGroupRef.current?.setLayout(newLayout);
-      } catch (e) {
-        console.error(e);
-        console.info("snapshot on error", {
-          oldWindowWidth,
-          oldPanelPercentages,
-          newLayout,
-          currentLayout,
-        });
-      }
-    } else if (currentLayout.length === 2) {
-      // Check if this is a right sidebar layout by looking at the panel IDs
-      const panelGroup = document.querySelector(
-        `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
-      );
-      const panels = [
-        ...(panelGroup?.querySelectorAll<HTMLElement>("[data-panel]") ?? []),
-      ];
-      const isRightSidebarLayout = panels[1]?.id === RIGHT_SIDEBAR_ID;
-
-      if (isRightSidebarLayout) {
-        const rightSidebarWidth =
-          (oldPanelPercentages[1] / 100) * oldWindowWidth;
-        const newRightSidebarPercentage =
-          (rightSidebarWidth / windowSize.width) * 100;
-        const newLayout = [
-          100 - newRightSidebarPercentage,
-          newRightSidebarPercentage,
-        ];
-
-        try {
-          panelGroupRef.current?.setLayout(newLayout);
-        } catch (e) {
-          console.error(e);
-          console.info("snapshot on error", {
-            oldWindowWidth,
-            oldPanelPercentages,
-            newLayout,
-            currentLayout,
-          });
-        }
-      } else {
-        const leftSidebarWidth =
-          (oldPanelPercentages[0] / 100) * oldWindowWidth;
-        const newLeftSidebarPercentage =
-          (leftSidebarWidth / windowSize.width) * 100;
-        const newLayout = [
-          newLeftSidebarPercentage,
-          100 - newLeftSidebarPercentage,
-        ];
-
-        try {
-          panelGroupRef.current?.setLayout(newLayout);
-        } catch (e) {
-          console.error(e);
-          console.info("snapshot on error", {
-            oldWindowWidth,
-            oldPanelPercentages,
-            newLayout,
-            currentLayout,
-          });
-        }
-      }
-    }
-  }, [panelGroupRef, windowSize.width]);
-}

package/src/mediaQuery.ts

@@ -1,13 +0,0 @@
-export const size = {
-  medium: '800px',
-  large: '1280px',
-  xlarge: '1550px',
-  xxlarge: '1680px',
-};
-
-export const mediaQuery = {
-  small: `@media (max-width: ${size.medium})`,
-  medium: `@media (max-width: ${size.large}) and (min-width: ${size.medium})`,
-  large: `@media (max-width: ${size.xlarge}) and (min-width: ${size.large})`,
-  xlarge: `@media (min-width: ${size.xlarge})`,
-};