@noya-app/noya-designsystem 0.1.76 → 0.1.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.76",
+  "version": "0.1.77",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -23,10 +23,10 @@
     "@base-ui-components/react": "1.0.0-beta.4",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.32",
+    "@noya-app/noya-colorpicker": "0.1.33",
     "@noya-app/noya-utils": "0.1.9",
-    "@noya-app/noya-geometry": "0.1.16",
-    "@noya-app/noya-icons": "0.1.16",
+    "@noya-app/noya-geometry": "0.1.17",
+    "@noya-app/noya-icons": "0.1.17",
     "@noya-app/noya-keymap": "0.1.4",
     "@noya-app/noya-tailwind-config": "0.1.9",
     "radix-ui": "1.4.2",

package/src/components/BaseToolbar.tsx

@@ -13,12 +13,15 @@ export interface BaseToolbarProps {
   className?: string;
   innerClassName?: string;
   enableAbsoluteBreakpoint?: boolean;
+  /** Whether to enable container query classes. @default true */
+  enableContainerQuery?: boolean;
 }
 
-const toolbarStyle = {
+/** Shared toolbar style that sets button and input backgrounds to transparent */
+export const toolbarTransparentStyle = {
   [cssVarNames.colors.buttonBackground]: "transparent",
   [cssVarNames.colors.inputBackground]: "transparent",
-};
+} as const;
 
 export function BaseToolbarContainer({
   children,
@@ -34,7 +37,10 @@ export function BaseToolbarContainer({
   enableAbsoluteBreakpoint?: boolean;
 }) {
   return (
-    <div className={cx("n-flex n-flex-col", className)} style={toolbarStyle}>
+    <div
+      className={cx("n-flex n-flex-col", className)}
+      style={toolbarTransparentStyle}
+    >
       <div
         className={cx(
           "n-flex n-items-center n-bg-sidebar-background n-flex-none n-relative",
@@ -61,10 +67,12 @@ export function BaseToolbar({
   className,
   innerClassName,
   enableAbsoluteBreakpoint = true,
+  enableContainerQuery = true,
 }: BaseToolbarProps) {
   const childrenContainerClassName = cx(
     "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none n-inset-0 n-pl-1 n-pr-1 n-min-w-0",
-    "@xl/toolbar:!n-absolute @xl/toolbar:!n-pl-0 @xl/toolbar:!n-pr-0"
+    enableContainerQuery &&
+      "@xl/toolbar:!n-absolute @xl/toolbar:!n-pl-0 @xl/toolbar:!n-pr-0"
   );
 
   const childrenElement = children && (
@@ -93,8 +101,14 @@ export function BaseToolbar({
         </>
       )}
       <Spacer.Horizontal size={10} />
+      {leftElement && !enableContainerQuery && (
+        <>
+          {leftElement}
+          {childrenElement && <Spacer.Horizontal size={10} />}
+        </>
+      )}
       {childrenElement}
-      {leftElement && (
+      {leftElement && enableContainerQuery && (
         <>
           {childrenElement && (
             <>

package/src/components/DropdownMenu.tsx

@@ -38,6 +38,7 @@ export type DropdownRootProps<T extends string> = Omit<
   onCloseAutoFocus?: React.EventHandler<SyntheticEvent<unknown>>;
   emptyState?: React.ReactNode;
   contentStyle?: React.CSSProperties;
+  modal?: boolean;
 } & Pick<
     ComponentProps<typeof RadixDropdownMenu.Content>,
     "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding"
@@ -75,6 +76,7 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
     contentStyle,
     title,
     icon,
+    modal = true,
   } = props;
 
   const [open, setOpen] = useControlledOrUncontrolled({
@@ -105,7 +107,7 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
   );
 
   return (
-    <RadixDropdownMenu.Root onOpenChange={setOpen} open={open}>
+    <RadixDropdownMenu.Root onOpenChange={setOpen} open={open} modal={modal}>
       <RadixDropdownMenu.Trigger
         ref={forwardedRef as ForwardedRef<any>}
         asChild

package/src/components/GridBackground.tsx

@@ -0,0 +1,40 @@
+import { AffineTransform } from "@noya-app/noya-geometry";
+import React from "react";
+
+interface GridBackgroundProps {
+  transform?: AffineTransform;
+  /** @default 10 */
+  gridSize?: number;
+  dotSize?: number;
+}
+
+export const GridBackground = ({
+  transform = AffineTransform.identity,
+  gridSize: gridSizeProp = 10,
+  dotSize = 1,
+}: GridBackgroundProps) => {
+  const scale = transform.scaleComponents.x;
+  const isScaling = scale !== 1 && transform.scaleComponents.y !== 1;
+  const gridSize = isScaling && scale > 1 ? gridSizeProp * scale : gridSizeProp;
+  return (
+    <div className="n-absolute n-inset-0 n-pointer-events-none n-overflow-hidden">
+      <svg
+        className="n-absolute n-inset-0 n-w-full n-h-full"
+        style={{ opacity: 0.5 }}
+      >
+        <defs>
+          <pattern
+            id="dot-pattern"
+            width={gridSize}
+            height={gridSize}
+            patternUnits="userSpaceOnUse"
+            patternTransform={`translate(${transform.tx % gridSize} ${transform.ty % gridSize})`}
+          >
+            <rect x={0} y={0} width={dotSize} height={dotSize} fill="#9ca3af" />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill="url(#dot-pattern)" />
+      </svg>
+    </div>
+  );
+};

package/src/components/OverlayToolbar.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { cx } from "../utils/classNames";
+import { toolbarTransparentStyle } from "./BaseToolbar";
+
+export type OverlayLayout = "bottomCenterTopRight" | "topLeftTopRight";
+
+export interface OverlayToolbarProps {
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  overlayLayout?: OverlayLayout;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const panelClassName =
+  "n-pointer-events-auto n-inline-flex n-items-center n-gap-toolbar-separator n-rounded-3xl n-border n-border-divider n-bg-sidebar-background n-px-3 n-py-2.5 n-shadow-2xl";
+
+export function OverlayToolbar({
+  left,
+  right,
+  overlayLayout = "bottomCenterTopRight",
+  className,
+  style,
+}: OverlayToolbarProps) {
+  const resolvedLayout =
+    overlayLayout === "topLeftTopRight"
+      ? "topLeftTopRight"
+      : "bottomCenterTopRight";
+
+  // Merge transparent backgrounds with custom style
+  const panelStyle = useMemo(
+    () => ({
+      ...toolbarTransparentStyle,
+      ...style,
+    }),
+    [style]
+  );
+
+  const renderLeftPanel = (overlayId: string) => {
+    if (!left) return null;
+
+    return (
+      <div
+        className={panelClassName}
+        data-embedded-overlay-id={overlayId}
+        style={panelStyle}
+      >
+        {left}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {/* Left items panel */}
+      {resolvedLayout === "bottomCenterTopRight" ? (
+        <div
+          className={cx(
+            "n-pointer-events-none n-absolute n-bottom-0 n-left-0 n-right-0 n-flex n-justify-center n-px-6 n-pb-6",
+            className
+          )}
+        >
+          {renderLeftPanel("noya-toolbar-bottom-center")}
+        </div>
+      ) : (
+        <div
+          className={cx(
+            "n-pointer-events-none n-absolute n-top-0 n-left-0 n-px-4 sm:!n-px-6 n-pt-4 sm:!n-pt-6",
+            className
+          )}
+        >
+          {renderLeftPanel("noya-toolbar-top-left")}
+        </div>
+      )}
+
+      {/* Right items panel */}
+      {right && (
+        <div
+          className={cx(
+            "n-pointer-events-none n-absolute n-top-0 n-right-0 n-px-4 sm:!n-px-6 n-pt-4 sm:!n-pt-6",
+            className
+          )}
+        >
+          <div
+            className={panelClassName}
+            data-embedded-overlay-id="noya-toolbar-top-right"
+            style={panelStyle}
+          >
+            {right}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/SegmentedControl.tsx

@@ -92,7 +92,7 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
         variant === "tabs"
           ? ""
           : variant === "buttons"
-            ? "focus-visible:n-ring-2 focus-visible:n-ring-primary focus:n-shadow-[0_0_0_1px_var(--n-popover-background)_inset] n-transition-all"
+            ? "focus:n-ring-2 focus:n-ring-primary focus:n-shadow-[0_0_0_1px_var(--n-popover-background)_inset] n-transition-all"
             : colorScheme === "secondary"
               ? "focus:n-ring-2 focus:n-ring-secondary focus:n-ring-offset-1"
               : "focus:n-ring-2 focus:n-ring-primary focus:n-ring-offset-1",
@@ -116,7 +116,7 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
         variant === "default"
           ? "n-px-1 n-rounded n-border-r n-border-divider last:n-border-r-0"
           : variant === "buttons"
-            ? "n-px-1 n-rounded-sm n-max-w-fit"
+            ? "n-px-1.5 n-rounded-sm n-max-w-fit"
             : "n-px-1.5 n-border-y-2 n-border-y-transparent aria-checked:n-border-b-primary",
         // icon only buttons
         variant === "buttons" && title === "" && icon && "n-min-w-input-height",

package/src/components/StackNavigator.tsx

@@ -356,6 +356,7 @@ function defaultRenderHeader({
       innerClassName="n-px-1"
       showDivider={showDivider}
       enableAbsoluteBreakpoint={false}
+      enableContainerQuery={false}
       left={
         showBackButton && (
           <Button

package/src/components/Toolbar.tsx

@@ -49,6 +49,7 @@ export const ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown<
       open={open}
       onOpenChange={setOpen}
       items={item.items}
+      modal={false}
       onSelect={(value) => {
         if (onSelectMenuItem && value) {
           onSelectMenuItem(value);
@@ -299,6 +300,21 @@ export interface ToolbarProps<T extends string = string> {
   dividerOverflow?: number;
 }
 
+export function useBindKeyboardShortcutsForMenuItems<T extends string>(
+  items: MenuItem<T>[],
+  onSelectMenuItem?: (value: T) => void
+) {
+  return useKeyboardShortcuts(
+    React.useMemo(
+      () =>
+        onSelectMenuItem
+          ? getKeyboardShortcutsForMenuItems(items, onSelectMenuItem)
+          : {},
+      [items, onSelectMenuItem]
+    )
+  );
+}
+
 export function Toolbar<T extends string = string>({
   children,
   logo,
@@ -314,14 +330,9 @@ export function Toolbar<T extends string = string>({
     [leftMenuItems, rightMenuItems]
   );
 
-  useKeyboardShortcuts(
-    React.useMemo(
-      () =>
-        onSelectMenuItem && shouldBindKeyboardShortcuts
-          ? getKeyboardShortcutsForMenuItems(allMenuItems, onSelectMenuItem)
-          : {},
-      [allMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts]
-    )
+  useBindKeyboardShortcutsForMenuItems(
+    allMenuItems,
+    shouldBindKeyboardShortcuts ? onSelectMenuItem : undefined
   );
 
   return (

package/src/components/UserPointer.tsx

@@ -13,7 +13,7 @@ const UserPointerContainer = memo(function UserPointerContainer({
   className,
   style,
 }: {
-  point: Point;
+  point?: Point;
   visible?: boolean;
   children: React.ReactNode;
   className?: string;
@@ -22,7 +22,9 @@ const UserPointerContainer = memo(function UserPointerContainer({
   return (
     <div
       style={{
-        transform: `translate(${Math.round(point.x)}px, ${Math.round(point.y)}px)`,
+        ...(point && {
+          transform: `translate(${Math.round(point.x)}px, ${Math.round(point.y)}px)`,
+        }),
         transition: "transform 0.075s, opacity 0.2s",
         ...style,
       }}
@@ -117,7 +119,7 @@ export type UserPointerProps = {
   name?: string;
   /** label to display in the tooltip next to the Pointer */
   visible?: boolean;
-  point: Point;
+  point?: Point;
   /** defaults to a random color based on the key, but can optionally be overridden */
   backgroundColor?: string;
   style?: React.CSSProperties;

package/src/components/workspace/WorkspaceLayout.tsx

@@ -16,6 +16,7 @@ import React, {
 } from "react";
 import { cx } from "../../utils/classNames";
 import { MenuItem } from "../internal/Menu";
+import { OverlayLayout, OverlayToolbar } from "../OverlayToolbar";
 import { DrawerWorkspaceLayout } from "./DrawerWorkspaceLayout";
 import { PanelWorkspaceLayout } from "./PanelWorkspaceLayout";
 import { renderPanelChildren } from "./renderPanelChildren";
@@ -31,6 +32,8 @@ export type SideType = "auto" | "panel" | "drawer";
 
 export type DetectSizeType = "container" | "window";
 
+export type ToolbarVariant = "default" | "overlay";
+
 export interface WorkspaceLayoutProps<
   LeftTab extends string,
   RightTab extends string,
@@ -54,6 +57,24 @@ export interface WorkspaceLayoutProps<
   right?: RenderPanel<RightTab>;
   rightOptions?: SideOptions;
   toolbar?: React.ReactNode;
+  /**
+   * Toolbar variant - "default" renders above content, "overlay" renders floating panels
+   * @default "default"
+   */
+  toolbarVariant?: ToolbarVariant;
+  /**
+   * Content for the left/bottom-center overlay panel (when toolbarVariant is "overlay")
+   */
+  overlayToolbarLeft?: React.ReactNode;
+  /**
+   * Content for the right overlay panel (when toolbarVariant is "overlay")
+   */
+  overlayToolbarRight?: React.ReactNode;
+  /**
+   * Layout configuration for overlay toolbar
+   * @default "bottomCenterTopRight"
+   */
+  overlayLayout?: OverlayLayout;
   sideType?: SideType;
   sideTypeBreakpoint?: number;
   detectSize?: DetectSizeType;
@@ -125,6 +146,10 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     className,
     style,
     toolbar,
+    toolbarVariant = "default",
+    overlayToolbarLeft,
+    overlayToolbarRight,
+    overlayLayout,
     children,
     sideType = "auto",
     sideTypeBreakpoint = 800,
@@ -422,6 +447,8 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
   const readyToRender =
     detectSize === "window" || (containerSize && containerSize.width > 0);
 
+  const isOverlay = toolbarVariant === "overlay";
+
   return (
     <div
       ref={containerRef}
@@ -433,27 +460,36 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
       style={style}
       data-theme={theme}
     >
-      {toolbar}
+      {!isOverlay && toolbar}
       <div className="n-flex n-flex-row n-flex-1 n-relative">
         {readyToRender && (
-          <LayoutComponent
-            leftPanel={leftPanel}
-            rightPanel={rightPanel}
-            centerPanel={centerPanel}
-            leftTabItems={leftTabItems}
-            leftTabValue={leftTabValue}
-            onChangeLeftTab={setLeftTabValue}
-            rightTabItems={rightTabItems}
-            rightTabValue={rightTabValue}
-            onChangeRightTab={setRightTabValue}
-            leftSidebarOptions={leftSidebarOptions}
-            rightSidebarOptions={rightSidebarOptions}
-            centerPanelPercentage={centerPanelPercentage}
-            autoSavePrefix={autoSavePrefix}
-            leftSidebarRef={leftSidebarRef}
-            rightSidebarRef={rightSidebarRef}
-            compactDrawerMenu={compactDrawerMenu}
-          />
+          <>
+            <LayoutComponent
+              leftPanel={leftPanel}
+              rightPanel={rightPanel}
+              centerPanel={centerPanel}
+              leftTabItems={leftTabItems}
+              leftTabValue={leftTabValue}
+              onChangeLeftTab={setLeftTabValue}
+              rightTabItems={rightTabItems}
+              rightTabValue={rightTabValue}
+              onChangeRightTab={setRightTabValue}
+              leftSidebarOptions={leftSidebarOptions}
+              rightSidebarOptions={rightSidebarOptions}
+              centerPanelPercentage={centerPanelPercentage}
+              autoSavePrefix={autoSavePrefix}
+              leftSidebarRef={leftSidebarRef}
+              rightSidebarRef={rightSidebarRef}
+              compactDrawerMenu={compactDrawerMenu}
+            />
+            {isOverlay && (
+              <OverlayToolbar
+                left={overlayToolbarLeft}
+                right={overlayToolbarRight}
+                overlayLayout={overlayLayout}
+              />
+            )}
+          </>
         )}
       </div>
     </div>

package/src/index.tsx

@@ -31,6 +31,7 @@ export * from "./components/file-explorer/FileExplorerLayout";
 export * from "./components/FileUploadIndicator";
 export * from "./components/FloatingWindow";
 export * from "./components/Grid";
+export * from "./components/GridBackground";
 export * from "./components/GridView";
 export * from "./components/IconButton";
 export * from "./components/Icons";
@@ -128,5 +129,6 @@ export * from "./components/DimensionInput";
 export * as InspectorPrimitives from "./components/InspectorPrimitives";
 
 export * from "./components/BaseToolbar";
+export * from "./components/OverlayToolbar";
 export * from "./components/Toolbar";
 export * from "./components/ToolbarDrawer";

package/src/theme/proseTheme.ts

@@ -1,2 +1,22 @@
 export const proseTheme =
   "n-prose n-prose-sm n-max-w-none [[data-theme='dark']_&]:n-prose-invert prose-a:n-text-blue-600";
+
+export const whiteboardProseTheme = (isDark: boolean) =>
+  [
+    "n-prose",
+    "n-prose-sm",
+    "n-max-w-none",
+    isDark ? "n-prose-invert n-text-white" : "",
+    "prose-p:n-m-0",
+    "prose-ul:n-m-0",
+    "prose-ol:n-m-0",
+    "prose-li:n-m-0",
+    "prose-li:n-p-0",
+    "prose-a:n-text-inherit",
+    "prose-strong:n-text-inherit",
+    "prose-em:n-italic",
+    "prose-ol:n-list-inside",
+    "prose-ul:n-list-inside",
+    "prose-ol:n-pl-0",
+    "prose-ul:n-pl-0",
+  ].join(" ");

package/tailwind.config.ts

@@ -7,7 +7,12 @@ const config = {
   ...noyaConfig,
   prefix: "n-",
   plugins: [containerQueries, typography],
-  safelist: [...noyaConfig.safelist, "dark:n-prose-invert"],
+  safelist: [
+    ...noyaConfig.safelist,
+    "n-prose-invert",
+    "dark:n-prose-invert",
+    "prose-p:n-m-0",
+  ],
 } satisfies Config;
 
 export default config;