@noya-app/noya-designsystem 0.1.66 → 0.1.68

package/src/components/workspace/WorkspaceLayout.tsx

@@ -7,7 +7,13 @@ import {
   useSize,
   useWindowSize,
 } from "@noya-app/react-utils";
-import React, { memo, useImperativeHandle, useMemo, useRef } from "react";
+import React, {
+  memo,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
 import { cx } from "../../utils/classNames";
 import { MenuItem } from "../internal/Menu";
 import { DrawerWorkspaceLayout } from "./DrawerWorkspaceLayout";
@@ -19,6 +25,7 @@ import {
   RenderPanel,
   SidebarRef,
 } from "./types";
+import { WorkspaceSideProvider } from "./WorkspaceSideContext";
 
 export type SideType = "auto" | "panel" | "drawer";
 
@@ -280,13 +287,57 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     (left ? leftSidebarPercentage : 0) -
     (right ? rightSidebarPercentage : 0);
 
+  const isDrawerActive =
+    sideType === "drawer" ||
+    (sideType === "auto" && parentSize.width <= sideTypeBreakpoint);
+
+  const closeLeftSidebar = useCallback(() => {
+    if (isDrawerActive) {
+      leftSidebarRef.current?.collapse();
+    }
+  }, [isDrawerActive]);
+
+  const closeRightSidebar = useCallback(() => {
+    if (isDrawerActive) {
+      rightSidebarRef.current?.collapse();
+    }
+  }, [isDrawerActive]);
+
+  const leftChildrenProps = useMemo(() => {
+    return {
+      activeTabValue: leftTabValue,
+      closeSidebar: closeLeftSidebar,
+    };
+  }, [leftTabValue, closeLeftSidebar]);
+
+  const rightChildrenProps = useMemo(() => {
+    return {
+      activeTabValue: rightTabValue,
+      closeSidebar: closeRightSidebar,
+    };
+  }, [rightTabValue, closeRightSidebar]);
+
+  const leftSidebarProviderValue = useMemo(() => {
+    return {
+      closeSidebar: closeLeftSidebar,
+    };
+  }, [closeLeftSidebar]);
+
+  const rightSidebarProviderValue = useMemo(() => {
+    return {
+      closeSidebar: closeRightSidebar,
+    };
+  }, [closeRightSidebar]);
+
   const leftPanel =
     left && leftVisible !== false ? (
       <PanelInner
         style={leftStyle}
         className={cx("n-bg-sidebar-background n-flex-col", leftClassName)}
       >
-        {leftTabValue ? renderPanelChildren(left, leftTabValue) : null}
+        <WorkspaceSideProvider value={leftSidebarProviderValue}>
+          {leftTabValue ? renderPanelChildren(left, leftChildrenProps) : null}
+        </WorkspaceSideProvider>
       </PanelInner>
     ) : null;
 
@@ -296,7 +347,11 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
         style={rightStyle}
         className={cx("n-bg-sidebar-background n-flex-col", rightClassName)}
       >
-        {rightTabValue ? renderPanelChildren(right, rightTabValue) : null}
+        <WorkspaceSideProvider value={rightSidebarProviderValue}>
+          {rightTabValue
+            ? renderPanelChildren(right, rightChildrenProps)
+            : null}
+        </WorkspaceSideProvider>
       </PanelInner>
     ) : null;
 
@@ -365,7 +420,10 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     <div
       ref={containerRef}
       id={id}
-      className={cx("n-flex n-flex-col n-bg-canvas-background n-relative", className)}
+      className={cx(
+        "n-flex n-flex-col n-bg-canvas-background n-relative",
+        className
+      )}
       style={style}
       data-theme={theme}
     >

package/src/components/workspace/WorkspaceSideContext.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+export type WorkspaceSideContextValue = {
+  /**
+   * Collapses the current sidebar when available (e.g., in drawer/mobile layout).
+   */
+  closeSidebar?: () => void;
+};
+
+const WorkspaceSideContext = createContext<WorkspaceSideContextValue>({});
+
+export const WorkspaceSideProvider = WorkspaceSideContext.Provider;
+
+export function useWorkspaceSide(): WorkspaceSideContextValue {
+  return useContext(WorkspaceSideContext);
+}

package/src/components/workspace/renderPanelChildren.tsx

@@ -2,10 +2,10 @@ import { RenderPanel } from "./types";
 
 export function renderPanelChildren<TabValue extends string>(
   fn: RenderPanel<TabValue>,
-  activeTabValue: TabValue
+  props: { activeTabValue: TabValue; closeSidebar?: () => void }
 ) {
   if (typeof fn === "function") {
-    return fn({ activeTabValue });
+    return fn(props);
   }
 
   return fn;

package/src/components/workspace/types.ts

@@ -23,7 +23,14 @@ export type PanelLayoutState = {
 
 export type RenderPanel<TabValue extends string> =
   | ReactNode
-  | ((props: { activeTabValue: TabValue }) => ReactNode);
+  | ((props: {
+      activeTabValue: TabValue;
+      /**
+       * When the layout is using a drawer (mobile), this will collapse
+       * the current sidebar. It may be undefined for panel layouts.
+       */
+      closeSidebar?: () => void;
+    }) => ReactNode);
 
 export type LayoutProps<
   LeftTab extends string = string,

package/src/contexts/DialogContext.tsx

@@ -65,7 +65,7 @@ const DialogContext = createContext<DialogContextValue | undefined>(undefined);
 type BaseDialogContents = {
   style?: React.CSSProperties;
   className?: string;
-  title: string;
+  title: ReactNode;
   description?: ReactNode;
 };
 
@@ -228,6 +228,7 @@ export const DialogProvider = function DialogProvider({
   );
 
   const inputRef = useRef<HTMLInputElement>(null);
+  const confirmButtonRef = useRef<HTMLButtonElement>(null);
   const dialogRef = useRef<IDialog>(null);
 
   const containsElement = useCallback((element: HTMLElement) => {
@@ -268,16 +269,25 @@ export const DialogProvider = function DialogProvider({
         )}
         onOpenAutoFocus={useCallback(
           (event: Event) => {
-            event.stopPropagation();
-            event.preventDefault();
-
-            if (!contents || contents.type !== "input") return;
+            if (!contents) return;
+
+            if (contents.type === "input") {
+              event.stopPropagation();
+              event.preventDefault();
+              inputRef.current?.focus();
+              inputRef.current?.setSelectionRange(
+                0,
+                inputRef.current.value.length
+              );
+              return;
+            }
 
-            inputRef.current?.focus();
-            inputRef.current?.setSelectionRange(
-              0,
-              inputRef.current.value.length
-            );
+            if (contents.type === "confirmation") {
+              event.stopPropagation();
+              event.preventDefault();
+              confirmButtonRef.current?.focus();
+              return;
+            }
           },
           [contents]
         )}
@@ -295,6 +305,8 @@ export const DialogProvider = function DialogProvider({
             </Button>
             <Spacer.Horizontal size={16} />
             <Button
+              colorScheme="primary"
+              ref={confirmButtonRef}
               onClick={() => {
                 contents.resolve(true);
                 setContents(undefined);

package/src/index.css

@@ -128,7 +128,28 @@
   --n-chip-primary-shadow: rgb(238, 229, 255);
   --n-chip-secondary-shadow: rgb(205, 238, 231);
   --n-chip-error-shadow: rgb(255, 219, 219);
-  --n-chip-default-shadow: rgb(0, 0, 0);
+  --n-chip-default-shadow: rgba(0, 0, 0, 0.1);
+  /* Hover shadows for outlined Chip */
+  --n-chip-primary-shadow-hover: color-mix(
+    in srgb,
+    var(--n-chip-primary-shadow) 85%,
+    var(--n-text) 15%
+  );
+  --n-chip-secondary-shadow-hover: color-mix(
+    in srgb,
+    var(--n-chip-secondary-shadow) 85%,
+    var(--n-text) 15%
+  );
+  --n-chip-error-shadow-hover: color-mix(
+    in srgb,
+    var(--n-chip-error-shadow) 85%,
+    var(--n-text) 15%
+  );
+  --n-chip-default-shadow-hover: color-mix(
+    in srgb,
+    var(--n-chip-default-shadow) 80%,
+    var(--n-text) 20%
+  );
   --n-floating-button: rgb(248, 248, 250);
   --n-block-border: rgb(184, 201, 218);
   --n-block-highlight: rgb(255, 165, 0);
@@ -249,3 +270,124 @@
   color: var(--n-text-disabled);
   pointer-events: none;
 }
+
+/* Direct child pre blocks */
+.n-prose pre {
+  background-color: var(--n-indigo-25);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--n-divider);
+  border-radius: 0.375rem; /* rounded-md */
+}
+
+/* Code inside pre */
+.n-prose pre > code {
+  font-size: 12.8px;
+}
+
+/* Inline code (not inside pre): hide before/after content */
+.n-prose code:not(:where(pre *))::before,
+.n-prose code:not(:where(pre *))::after {
+  content: none !important;
+}
+
+/* Blockquote paragraphs: remove decorative quotes, reset style/weight */
+.n-prose blockquote p::before,
+.n-prose blockquote p::after {
+  content: none !important;
+}
+
+/* Inline code (not inside pre): background, border, padding, radius, weight */
+.n-prose code:not(:where(pre *)) {
+  background-color: var(--n-indigo-25);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--n-divider);
+  padding-left: 0.25rem; /* px-1 */
+  padding-right: 0.25rem; /* px-1 */
+  padding-top: 0.125rem; /* py-0.5 */
+  padding-bottom: 0.125rem; /* py-0.5 */
+  border-radius: 0.25rem; /* rounded */
+  font-weight: 400; /* font-normal */
+}
+
+.n-prose blockquote p {
+  font-weight: 400; /* font-normal */
+  font-style: normal; /* not-italic */
+}
+
+/* Task list container adjustments */
+.n-prose .contains-task-list {
+  padding-left: 0; /* pl-0 */
+  margin-left: 0; /* ml-0 */
+  list-style-position: inside; /* list-inside */
+}
+
+/* Task list items: layout + spacing */
+.n-prose .task-list-item {
+  list-style-type: none; /* list-none */
+  margin-left: 0; /* ml-0 */
+  padding-left: 1px; /* pl-px */
+  display: grid; /* grid */
+  grid-template-columns: auto 1fr; /* grid-cols-[auto,1fr] */
+  align-items: start; /* items-start */
+  column-gap: 0.5rem; /* gap-x-2 */
+}
+
+/* Checkbox column placement + visual tweaks */
+.n-prose .task-list-item > .task-list-item-checkbox {
+  grid-column: 1 / 2; /* col-start-1 col-end-2 */
+  margin-top: 2px; /* mt-[2px] */
+  margin-right: 0; /* mr-0 */
+  accent-color: var(--n-primary); /* accent-[var(--n-primary)] */
+}
+
+/* Non-checkbox content spans the second column */
+.n-prose .task-list-item > :not(.task-list-item-checkbox) {
+  grid-column: 2 / 3; /* col-start-2 col-end-3 */
+}
+
+/* Inline paragraphs/spans inside task items */
+.n-prose .task-list-item > p,
+.n-prose .task-list-item > span {
+  margin: 0; /* m-0 */
+  display: inline; /* inline */
+}
+
+/* Nested lists inside task items */
+.n-prose .task-list-item > ul,
+.n-prose .task-list-item > ol {
+  margin: 0; /* m-0 */
+  list-style-position: inside; /* list-inside */
+}
+
+/* When a list item is marked as a task item but has no checkbox,
+   collapse to a single-column grid so all children stack vertically. */
+.n-prose .task-list-item:not(:has(> .task-list-item-checkbox)) {
+  grid-template-columns: 1fr;
+}
+
+.n-prose .task-list-item:not(:has(> .task-list-item-checkbox)) > * {
+  grid-column: 1 / -1;
+}
+
+/* Non-task list items inside a list that contains task items
+   should keep their native bullets; ensure nested lists break
+   onto the next line similar to GitHub's markdown rendering. */
+.n-prose .contains-task-list > li:not(.task-list-item) > ul,
+.n-prose .contains-task-list > li:not(.task-list-item) > ol {
+  display: block;
+}
+
+/* Ensure the first paragraph sits inline with the bullet */
+.n-prose .contains-task-list > li:not(.task-list-item) > p {
+  display: inline;
+  margin: 0;
+}
+
+/* Spacing for nested unordered lists within mixed task/non-task lists */
+.n-prose .contains-task-list > li:not(.task-list-item) > ul {
+  margin-left: 16px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+}

package/src/index.tsx

@@ -3,6 +3,7 @@ export * from "./components/ActionMenu";
 export * from "./components/ActivityIndicator";
 export * from "./components/ActivityLog";
 export * from "./components/ai-assistant/AIAssistantLayout";
+export * from "./components/Anchor";
 export * from "./components/AnimatePresence";
 export * from "./components/Avatar";
 export * from "./components/Banner";
@@ -61,6 +62,7 @@ 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";
@@ -84,6 +86,7 @@ export * from "./components/TreeView";
 export * from "./components/UserPointer";
 export * from "./components/workspace/types";
 export * from "./components/workspace/WorkspaceLayout";
+export * from "./components/workspace/WorkspaceSideContext";
 // Contexts
 export * from "./contexts/DesignSystemConfiguration";
 export * from "./contexts/DialogContext";
@@ -100,6 +103,7 @@ export * from "./hooks/useLabel";
 export * from "./hooks/usePlatform";
 export * from "./hooks/useTheme";
 export * from "./theme";
+export * from "./theme/proseTheme";
 export * from "./utils/classNames";
 export * from "./utils/createSectionedMenu";
 export * from "./utils/formatByteSize";

package/src/theme/proseTheme.ts

@@ -0,0 +1,2 @@
+export const proseTheme =
+  "n-prose n-prose-sm n-max-w-none [[data-theme='dark']_&]:n-prose-invert prose-a:n-text-blue-600";

package/src/utils/combobox.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { chunkBy, partition } from "@noya-app/noya-utils";
-import { useSyncExternalStore } from "react";
+import React, { useSyncExternalStore } from "react";
 import {
   isMenuItemSectionHeader,
   isNonSelectableMenuItem,
@@ -306,7 +306,11 @@ export function filterWithGroupedSections<T extends string>(
       );
     } else {
       const scoredItems = fuzzyFilter({
-        items: selectableItems.map((item) => item.title.toString()),
+        items: selectableItems.map((item) => {
+          const title = item.title?.toString?.() ?? "";
+          const tooltipText = getNodeText(item.tooltip);
+          return tooltipText ? `${title} ${tooltipText}` : title;
+        }),
         query,
       });
 
@@ -389,3 +393,14 @@ export function useComboboxState<T extends string>(state: ComboboxState<T>) {
     state.getSnapshot
   );
 }
+
+function getNodeText(node: React.ReactNode): string {
+  if (node === null || node === undefined || typeof node === "boolean")
+    return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(getNodeText).join("");
+  if (React.isValidElement(node)) {
+    return getNodeText((node as any).props?.children);
+  }
+  return "";
+}

package/src/utils/detailLineClamp.ts

@@ -0,0 +1,33 @@
+const DETAIL_LINE_CLAMP_CLASS_MAP: Record<number, string> = {
+  1: "n-truncate",
+  2: "n-text-wrap n-line-clamp-2",
+  3: "n-text-wrap n-line-clamp-3",
+  4: "n-text-wrap n-line-clamp-4",
+};
+
+export function normalizeDetailLineClamp(
+  lineClamp?: number
+): number | undefined {
+  if (lineClamp == null) return undefined;
+
+  const normalized = Math.floor(lineClamp);
+
+  if (!Number.isFinite(normalized)) {
+    return undefined;
+  }
+
+  if (normalized < 1) return 1;
+  if (normalized > 4) return 4;
+
+  return normalized as 1 | 2 | 3 | 4;
+}
+
+export function getDetailLineClampClass(
+  lineClamp?: number
+): string | undefined {
+  const normalized = normalizeDetailLineClamp(lineClamp);
+
+  return normalized ? DETAIL_LINE_CLAMP_CLASS_MAP[normalized] : undefined;
+}
+
+export const DETAIL_LINE_CLAMP_CLASSES = DETAIL_LINE_CLAMP_CLASS_MAP;

package/tailwind.config.ts

@@ -1,11 +1,13 @@
 import noyaConfig from "@noya-app/noya-tailwind-config";
 import containerQueries from "@tailwindcss/container-queries";
+import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
 
 const config = {
   ...noyaConfig,
   prefix: "n-",
-  plugins: [containerQueries],
+  plugins: [containerQueries, typography],
+  safelist: [...noyaConfig.safelist, "dark:n-prose-invert"],
 } satisfies Config;
 
 export default config;