devnonla-ui 0.3.0 → 0.4.1

package/src/chat/tool-ui/ChatToolCall.tsx

@@ -1,8 +1,8 @@
 import { type ReactNode, useState } from "react";
+import { FluentIcon } from "../../icon/FluentIcon";
 import { cn } from "../../lib/cn";
 import { Shimmer } from "../../shimmer/Shimmer";
 import { formatToolName, hasMeaningfulInput, prettyJson } from "../common/utils";
-import { ChatSpinner } from "../message-ui/ChatSpinner";
 import { ToolUiTrailing } from "./ToolUiTrailing";
 
 export type ChatToolCallProps = {
@@ -11,7 +11,7 @@ export type ChatToolCallProps = {
   toolInput?: unknown;
   toolOutput?: unknown;
   toolError?: boolean | string;
-  /** Show running spinner (pending execution). */
+  /** Pending execution — label shimmers, no spinner. */
   running?: boolean;
   /** Optional icon node (left of label). */
   icon?: ReactNode;
@@ -28,44 +28,38 @@ export function ChatToolCall({ toolName = "Tool", label, toolInput, toolOutput,
   const [open, setOpen] = useState(defaultOpen);
   const displayLabel = label ?? formatToolName(toolName);
 
-  const identityIcon = icon ?? (
-    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" className="shrink-0 text-muted-foreground" aria-hidden>
-      <path d="M8 7h8M8 12h8M8 17h5" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
-      <rect x="4" y="4" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="1.75" />
-    </svg>
-  );
+  const identityIcon = icon ?? <FluentIcon name="board-24" size={13} className="shrink-0" />;
 
   const header = (
     <>
       {identityIcon}
       <Shimmer active={running} className={cn("min-w-0 flex-1 truncate text-left text-[14px] font-medium", !running && "text-muted-foreground", expandable && !running && "transition-colors group-hover:text-foreground")}>{displayLabel}</Shimmer>
-      <ToolUiTrailing running={running} failed={hasError} chevron={expandable} chevronClassName={cn("group-hover:opacity-100", open && "opacity-100 rotate-90")} />
+      <ToolUiTrailing failed={hasError} chevron={expandable} chevronClassName={cn("group-hover:opacity-100", open && "opacity-100 rotate-90")} />
     </>
   );
 
   return (
     <div className={cn("nonla-chat-tool mt-1", className)}>
       <div className="px-4 pb-0.5">
-        <div className={cn("mb-1 overflow-hidden rounded-xl border", hasError ? "border-destructive/35" : "border-border")}>
+        <div className={cn("mb-1 overflow-hidden rounded-md", open && "bg-card")}>
           {expandable ? (
-            <button type="button" onClick={() => setOpen((v) => !v)} className={cn("group flex w-full cursor-pointer items-center gap-2 px-2.5 py-1.5 outline-none transition-colors hover:bg-muted border-0 bg-transparent", open && "bg-muted")}>
+            <button type="button" onClick={() => setOpen((v) => !v)} className="group flex w-full cursor-pointer items-center gap-2 border-0 bg-transparent px-2.5 py-1 outline-none">
               {header}
             </button>
           ) : (
-            <div className="flex w-full items-center gap-2 px-2.5 py-1.5">{header}</div>
+            <div className="flex w-full items-center gap-2 bg-transparent px-2.5 py-1">{header}</div>
           )}
 
           {open && expandable ? (
-            <div className="border-t border-border font-mono text-[14px]">
-              {hasInput ? <pre className="m-0 max-h-27.5 overflow-y-auto bg-transparent px-3 py-2 break-all whitespace-pre-wrap font-normal leading-[1.65] text-muted-foreground">{prettyJson(toolInput)}</pre> : null}
+            <div className="font-mono text-[13px]">
+              {hasInput ? <pre className="m-0 max-h-27.5 overflow-y-auto bg-well px-3 py-1.5 break-all whitespace-pre-wrap font-normal leading-[1.65] text-muted-foreground">{prettyJson(toolInput)}</pre> : null}
               {running ? (
-                <div className="flex items-center gap-2 border-t border-border bg-muted/40 px-3 py-2 text-muted-foreground">
-                  <ChatSpinner />
+                <div className="bg-well-strong px-3 py-1.5 text-muted-foreground">
                   <Shimmer className="italic">Running…</Shimmer>
                 </div>
               ) : null}
               {!isPending ? (
-                <pre className={cn("m-0 max-h-75 overflow-y-auto px-3 py-2 break-all whitespace-pre-wrap font-normal leading-[1.65] text-muted-foreground", hasInput && "border-t border-border", hasError ? "bg-destructive/6" : "bg-muted/40")}>
+                <pre className={cn("m-0 max-h-75 overflow-y-auto px-3 py-1.5 break-all whitespace-pre-wrap font-normal leading-[1.65] text-muted-foreground", hasError ? "bg-destructive/6" : "nonla-chat-tool-result-ok")}>
                   {hasOutput ? prettyJson(toolOutput) : typeof toolError === "string" ? toolError : "Tool execution failed"}
                 </pre>
               ) : null}

package/src/chat/tool-ui/GetCurrentTimeToolUI.tsx

@@ -1,6 +1,6 @@
 import { FluentIcon } from "../../icon/FluentIcon";
-import { parseJsonObject } from "../common/utils";
 import { Shimmer } from "../../shimmer/Shimmer";
+import { parseJsonObject } from "../common/utils";
 import { ToolUiBadge } from "./ToolUiBadge";
 import { ToolUiTrailing } from "./ToolUiTrailing";
 import { isToolRunning, type ToolUIProps } from "./types";
@@ -42,7 +42,7 @@ export function GetCurrentTimeToolUI({ msg, assistantLabel = "Assistant", assist
         <div className="flex items-center gap-2 py-1">
           <FluentIcon name="clock-24" size={13} className="shrink-0 text-muted-foreground" />
           <Shimmer active={running} className="truncate text-[14px] font-medium tabular-nums text-muted-foreground">{hasError ? "Failed to get time" : running ? "Getting time…" : label}</Shimmer>
-          <ToolUiTrailing running={running} failed={hasError} />
+          <ToolUiTrailing failed={hasError} />
         </div>
       </div>
     </div>

package/src/chat/tool-ui/ReadSkillToolUI.tsx

@@ -60,16 +60,16 @@ export function ReadSkillToolUI({ msg, assistantLabel = "Assistant", assistantCo
             {verb}
             {targetLabel ? <span className="font-normal text-tertiary-foreground"> {targetLabel}</span> : null}
           </Shimmer>
-          <ToolUiTrailing running={running} failed={failed} chevron chevronClassName="group-hover/readskill:opacity-100 group-open/readskill:opacity-100 group-open/readskill:rotate-90" />
+          <ToolUiTrailing failed={failed} chevron chevronClassName="group-hover/readskill:opacity-100 group-open/readskill:opacity-100 group-open/readskill:rotate-90" />
         </summary>
         {body ? (
-          <pre className={cn("m-0 mt-1.5 mb-1 max-h-40 overflow-y-auto rounded-lg border px-3 py-2 font-mono text-[14px] font-normal leading-[1.65] break-all whitespace-pre-wrap", failed ? "border-destructive/35 bg-destructive/6 text-destructive" : "border-(--popper-border) bg-(--nonla-elevated) text-muted-foreground")}>{body}</pre>
+          <pre className={cn("m-0 mt-1.5 mb-1 max-h-40 overflow-y-auto rounded-lg border px-3 py-2 font-mono text-[13px] font-normal leading-[1.65] break-all whitespace-pre-wrap", failed ? "border-destructive/35 bg-destructive/6 text-destructive" : "border-(--popper-border) bg-(--nonla-elevated) text-muted-foreground")}>{body}</pre>
         ) : null}
         {!running && !reference && available.length > 0 ? (
           <div className="mt-0.5 mb-1 flex flex-wrap items-center gap-1">
             <span className="text-[10px] font-medium tracking-wide text-quaternary-foreground uppercase">Refs</span>
             {available.map((name) => (
-              <span key={name} className="inline-flex max-w-full items-center rounded-md border border-border-subtle bg-muted/40 px-1.5 py-0.5 font-mono text-[14px] leading-[1.4] text-tertiary-foreground">
+              <span key={name} className="inline-flex max-w-full items-center rounded-md border border-border-subtle bg-muted/40 px-1.5 py-0.5 font-mono text-[13px] leading-[1.4] text-tertiary-foreground">
                 {skillName ? `${skillName} / ${name}` : name}
               </span>
             ))}

package/src/chat/tool-ui/RunJsToolUI.tsx

@@ -1,6 +1,6 @@
+import { CodeBlock } from "../../codeblock/CodeBlock";
 import { FluentIcon } from "../../icon/FluentIcon";
 import { cn } from "../../lib/cn";
-import { CodeBlock } from "../../codeblock/CodeBlock";
 import { Shimmer } from "../../shimmer/Shimmer";
 import { parseBgTaskRef } from "../common/bgTasks";
 import { parseJsonObject, prettyJson } from "../common/utils";
@@ -87,7 +87,7 @@ export function RunJsToolUI({ msg, assistantLabel = "Assistant", assistantColor,
       <ToolUiBadge show={showAvatar} label={assistantLabel} color={assistantColor} />
       <details className="group/runjs px-4 pb-2" style={{ overflowAnchor: "none" }}>
         <summary className="flex cursor-pointer list-none items-center gap-2 py-0.5 text-[14px] leading-5.5 select-none [&::-webkit-details-marker]:hidden">
-          <FluentIcon name="code-24" size={13} className="shrink-0 text-muted-foreground" />
+          <FluentIcon name="code-block-24" size={13} className="shrink-0 text-muted-foreground" />
           <Shimmer active={running} className="min-w-0 truncate font-medium text-muted-foreground">{verb}</Shimmer>
           <ToolUiTrailing running={running} failed={failed} chevron chevronClassName="group-hover/runjs:opacity-100 group-open/runjs:opacity-100 group-open/runjs:rotate-90" />
         </summary>

package/src/chat/tool-ui/ToolUiTrailing.tsx

@@ -1,4 +1,4 @@
-import { FluentIcon } from "../../icon/FluentIcon";
+import { ChevronRight, CircleX } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { ChatSpinner } from "../message-ui/ChatSpinner";
 
@@ -14,11 +14,7 @@ export function ToolUiTrailing({
   chevronClassName?: string;
 }) {
   if (running) return <ChatSpinner />;
-  if (failed) return <FluentIcon name="error-circle-24" size={13} className="text-destructive" />;
+  if (failed) return <CircleX size={13} className="text-destructive" aria-hidden />;
   if (!chevron) return null;
-  return (
-    <svg className={cn("h-3 w-3 shrink-0 opacity-0 transition-[opacity,transform] duration-150", chevronClassName)} fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-    </svg>
-  );
+  return <ChevronRight size={12} className={cn("shrink-0 opacity-0 transition-[opacity,transform] duration-150", chevronClassName)} aria-hidden />;
 }

package/src/chat/tool-ui/WebFetchToolUI.tsx

@@ -32,23 +32,32 @@ export function WebFetchToolUI({ msg, assistantLabel = "Assistant", assistantCol
   const running = isToolRunning(msg, generating);
   const url = output?.url || inputUrl(msg.toolInput) || "—";
   const body = failed ? (output?.error ?? (typeof msg.toolError === "string" ? msg.toolError : null) ?? "Tool execution failed") : output?.text?.trim() || "";
-  const verb = running || failed ? "Fetch page" : "Fetched page";
+  const expandable = Boolean(body);
+  const verb = running ? "Fetching page" : failed ? "Fetch page" : "Fetched page";
+
+  const header = (
+    <>
+      <FluentIcon name="globe-24" size={13} className="shrink-0 text-muted-foreground" />
+      <Shimmer active={running} className="min-w-0 truncate font-medium text-muted-foreground">
+        {verb} <span className="font-normal text-tertiary-foreground">{url}</span>
+      </Shimmer>
+      <ToolUiTrailing failed={failed} chevron={expandable} chevronClassName="group-hover/webfetch:opacity-100 group-open/webfetch:opacity-100 group-open/webfetch:rotate-90" />
+    </>
+  );
 
   return (
     <div className="mt-1 animate-fadeIn">
       <ToolUiBadge show={showAvatar} label={assistantLabel} color={assistantColor} />
-      <details className="group/webfetch px-4 pb-2" style={{ overflowAnchor: "none" }}>
-        <summary className="flex cursor-pointer list-none items-center gap-2 py-0.5 text-[14px] leading-5.5 select-none [&::-webkit-details-marker]:hidden">
-          <FluentIcon name="globe-24" size={13} className="shrink-0 text-muted-foreground" />
-          <Shimmer active={running} className="min-w-0 truncate font-medium text-muted-foreground">
-            {verb} <span className="font-normal text-tertiary-foreground">{url}</span>
-          </Shimmer>
-          <ToolUiTrailing running={running} failed={failed} chevron chevronClassName="group-hover/webfetch:opacity-100 group-open/webfetch:opacity-100 group-open/webfetch:rotate-90" />
-        </summary>
-        {body ? (
-          <pre className={cn("m-0 mt-1.5 mb-1 max-h-40 overflow-y-auto rounded-lg border px-3 py-2 font-mono text-[14px] font-normal leading-[1.65] break-all whitespace-pre-wrap", failed ? "border-destructive/35 bg-destructive/6 text-destructive" : "border-(--popper-border) bg-(--nonla-elevated) text-muted-foreground")}>{body}</pre>
-        ) : null}
-      </details>
+      {expandable ? (
+        <details className="group/webfetch px-4 pb-2" style={{ overflowAnchor: "none" }}>
+          <summary className="flex cursor-pointer list-none items-center gap-2 py-0.5 text-[14px] leading-5.5 select-none [&::-webkit-details-marker]:hidden">{header}</summary>
+          <pre className={cn("m-0 mt-1.5 mb-1 max-h-40 overflow-y-auto rounded-lg border px-3 py-2 font-mono text-[13px] font-normal leading-[1.65] break-all whitespace-pre-wrap", failed ? "border-destructive/35 bg-destructive/6 text-destructive" : "border-(--popper-border) bg-(--nonla-elevated) text-muted-foreground")}>{body}</pre>
+        </details>
+      ) : (
+        <div className="px-4 pb-2">
+          <div className="flex items-center gap-2 py-0.5 text-[14px] leading-5.5">{header}</div>
+        </div>
+      )}
     </div>
   );
 }

package/src/checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { type ComponentPropsWithoutRef, type ReactNode, forwardRef } from "react";
+import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from "react";
 import { cn } from "../lib/cn";
 
 export type CheckboxProps = Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "onCheckedChange" | "checked" | "onChange"> & {

package/src/codeblock/CodeBlock.tsx

@@ -1,6 +1,9 @@
-import { type ComponentProps, type ReactNode, createContext, useContext, useMemo } from "react";
+import { FileText } from "lucide-react";
+import { type ComponentProps, createContext, type ReactNode, useContext, useMemo } from "react";
 import { ButtonCopy } from "../button/ButtonCopy";
 import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/sizes";
+import { OverlayScroll } from "../scroll/OverlayScroll";
 import { highlightCode, languageLabel, wrapHljsLines } from "./highlight";
 
 type CodeBlockContextValue = {
@@ -22,16 +25,9 @@ export type CodeBlockProps = ComponentProps<"div"> & {
   wordWrap?: boolean;
 };
 
-function CodeFileIcon({ size = 14 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 256 256" aria-hidden>
-      <path fill="none" stroke="currentColor" strokeWidth="25" strokeLinecap="round" d="M208 128l-80 80M192 40 40 192" />
-    </svg>
-  );
-}
-
-export type CodeBlockCopyButtonProps = ComponentProps<"button"> & {
+export type CodeBlockCopyButtonProps = Omit<ComponentProps<"button">, "size"> & {
   content?: string;
+  size?: ControlSize;
 };
 
 export function CodeBlockCopyButton({ content, className, ...props }: CodeBlockCopyButtonProps) {
@@ -54,7 +50,7 @@ export function CodeBlock({ code, language, title, lineNumbers = false, wordWrap
           <div className="flex min-w-0 items-center gap-2">
             {label ? (
               <>
-                <CodeFileIcon />
+                <FileText size={14} className="shrink-0" aria-hidden />
                 <span className="truncate font-medium">{label}</span>
               </>
             ) : null}
@@ -62,14 +58,16 @@ export function CodeBlock({ code, language, title, lineNumbers = false, wordWrap
           <CodeBlockCopyButton />
         </div>
 
-        <div className={cn("nonla-codeblock-body nonla-codeblock-well relative min-w-0 overflow-y-auto bg-card font-mono text-[13px] leading-5", children ? "max-h-96" : "mx-0.5 mb-0.5 max-h-96 rounded-lg")}>
-          <div className={cn("w-full", !wordWrap && "overflow-x-auto")}>
-            <pre className={cn("nonla-codeblock-pre m-0 whitespace-pre break-normal", lineNumbers && "nonla-codeblock-lines", wordWrap && "whitespace-pre-wrap wrap-break-word")}>
-              {/* biome-ignore lint/security/noDangerouslySetInnerHtml: highlight.js emits escaped HTML */}
-              <code className={cn("block px-3 py-2.5", !wordWrap && "w-max min-w-full")} dangerouslySetInnerHTML={{ __html: html }} />
-            </pre>
-          </div>
-        </div>
+        <OverlayScroll
+          autoHeight
+          className={cn("nonla-codeblock-body nonla-codeblock-well min-w-0 bg-card font-mono text-[13px] leading-5 max-h-96", !children && "mx-0.5 mb-0.5 rounded-lg")}
+          innerClassName={wordWrap ? undefined : "overflow-x-auto"}
+        >
+          <pre className={cn("nonla-codeblock-pre m-0 whitespace-pre break-normal", lineNumbers && "nonla-codeblock-lines", wordWrap && "whitespace-pre-wrap wrap-break-word")}>
+            {/* biome-ignore lint/security/noDangerouslySetInnerHtml: highlight.js emits escaped HTML */}
+            <code className={cn("block px-3 py-2.5", !wordWrap && "w-max min-w-full")} dangerouslySetInnerHTML={{ __html: html }} />
+          </pre>
+        </OverlayScroll>
         {children}
       </div>
     </CodeBlockContext.Provider>

package/src/colorpicker/ColorPicker.tsx

@@ -2,10 +2,10 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import {
   type CSSProperties,
   type FC,
+  isValidElement,
   type KeyboardEvent,
-  type PointerEvent as ReactPointerEvent,
   type ReactNode,
-  isValidElement,
+  type PointerEvent as ReactPointerEvent,
   useEffect,
   useRef,
   useState,
@@ -27,17 +27,17 @@ import {
 import { glassOverlayClass } from "../lib/surface";
 import {
   Color,
-  DEFAULT_COLOR,
-  clamp,
-  hsbaToRgba,
-  parseColor,
   type ColorFormat,
   type ColorType,
+  clamp,
+  DEFAULT_COLOR,
   type HsbaColor,
+  hsbaToRgba,
+  parseColor,
 } from "./color";
 
-export { Color, DEFAULT_COLOR, parseColor };
 export type { ColorFormat, ColorType, HsbaColor };
+export { Color, DEFAULT_COLOR, parseColor };
 
 export type PresetColorType = {
   label: ReactNode;

package/src/datepicker/DatePicker.tsx

@@ -4,19 +4,19 @@ import {
   type ButtonHTMLAttributes,
   type CSSProperties,
   type ForwardRefExoticComponent,
+  forwardRef,
   type MouseEvent,
   type ReactElement,
   type ReactNode,
   type RefAttributes,
-  forwardRef,
   useEffect,
   useMemo,
   useState,
 } from "react";
 import type { DateRange } from "react-day-picker";
-import { Calendar } from "../calendar/Calendar";
-import { Button } from "../button/Button";
 import { usePopupContainer } from "../app/context";
+import { Button } from "../button/Button";
+import { Calendar } from "../calendar/Calendar";
 import { cn } from "../lib/cn";
 import { type ControlSize, controlFieldFocusBorder, controlFieldStyle, controlFieldSurface, controlFieldTransition, controlStatusClass, getSizeTokens, useControlSize } from "../lib/sizes";
 import { glassOverlayClass } from "../lib/surface";

package/src/desktop/DesktopHeader.tsx

@@ -66,27 +66,22 @@ export function DesktopBarDivider({ className }: { className?: string }) {
   return <span className={cn("mx-2 h-4 w-px bg-ink-line", className)} aria-hidden />;
 }
 
-export function DesktopHeader({
-  logo,
-  leading,
-  trailing,
-  profile,
-}: {
-  logo?: ReactNode;
-  leading?: ReactNode;
-  trailing?: ReactNode;
-  profile?: ReactNode;
-}) {
+export type DesktopHeaderProps = {
+  left?: ReactNode;
+  right?: ReactNode;
+  className?: string;
+};
+
+export function DesktopHeader({ left, right, className }: DesktopHeaderProps) {
   return (
-    <header className="nonla-header-layer fixed inset-x-0 top-0 flex h-desktop-bar items-center justify-between gap-3 border-0 bg-glass-bar px-3 backdrop-blur-lg">
-      <div className="flex min-w-0 items-center">
-        {logo}
-        {leading}
-      </div>
-      <div className="flex min-w-0 shrink-0 items-center">
-        {trailing}
-        {profile}
-      </div>
+    <header
+      className={cn(
+        "nonla-header-layer fixed inset-x-0 top-0 flex h-desktop-bar items-center justify-between gap-3 border-0 bg-glass-bar px-3 backdrop-blur-lg",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 items-center">{left}</div>
+      <div className="flex min-w-0 shrink-0 items-center">{right}</div>
     </header>
   );
 }

package/src/desktop/DesktopIcon.tsx

@@ -1,13 +1,11 @@
-import { type ReactNode, forwardRef } from "react";
+import { forwardRef, type ReactNode } from "react";
 import { FluentIcon } from "../icon/FluentIcon";
 
 const iconButtonClass =
-  "group w-[96px] flex flex-col items-center gap-2 py-2 px-0 rounded-md border-none cursor-pointer select-none outline-none bg-transparent focus-visible:outline-2 focus-visible:outline-brand motion-safe:transition-transform motion-safe:hover:-translate-y-0.5 motion-safe:active:scale-[0.98]";
+  "group w-[96px] flex flex-col items-center gap-0.5 py-2 px-0 rounded-md border-none cursor-pointer select-none outline-none bg-transparent focus-visible:outline-2 focus-visible:outline-brand motion-safe:transition-transform motion-safe:hover:-translate-y-0.5 motion-safe:active:scale-[0.98]";
 
 const labelClass = "text-xs leading-[18px] font-semibold text-center line-clamp-2 w-full";
 
-const plateClass = "nonla-window-glass nonla-desktop-icon-plate w-11 h-11 flex items-center justify-center";
-
 export const DesktopIcon = forwardRef<
   HTMLButtonElement,
   {
@@ -21,11 +19,7 @@ export const DesktopIcon = forwardRef<
 >(function DesktopIcon({ label, icon, media, active = false, onCard = false, onClick }, ref) {
   return (
     <button ref={ref} type="button" title={label} aria-label={label} aria-current={active ? "true" : undefined} dir="ltr" onClick={onClick} className={iconButtonClass}>
-      {media ?? (
-        <span className={plateClass}>
-          <FluentIcon name={icon ?? "sparkle-24"} size={32} />
-        </span>
-      )}
+      {media ?? <FluentIcon name={icon ?? "sparkle-24"} size={32} />}
       <span className={`${labelClass} ${onCard ? "text-foreground" : "text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.85)]"}`}>{label}</span>
     </button>
   );

package/src/desktop/DesktopWindow.tsx

@@ -1,8 +1,8 @@
-import { type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode, createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createContext, type MouseEvent as ReactMouseEvent, type ReactNode, type PointerEvent as ReactPointerEvent, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../lib/cn";
-import { OverlayScroll, type OverlayScrollVisibility } from "../scroll/OverlayScroll";
 import { glassSurfaceClass } from "../lib/surface";
+import { OverlayScroll, type OverlayScrollVisibility } from "../scroll/OverlayScroll";
 
 type Phase = "open" | "leaving";
 type Size = { w: number; h: number };
@@ -37,6 +37,10 @@ function isEditableTarget(target: EventTarget | null) {
   return Boolean(target.closest(".monaco-editor"));
 }
 
+function hasOpenDialog() {
+  return Boolean(document.querySelector('[role="dialog"][data-state="open"], .nonla-modal-content'));
+}
+
 function originFromActiveIcon(overlay: HTMLElement, frame: HTMLElement) {
   const source = document.querySelector('[aria-current="true"]');
   if (!(source instanceof HTMLElement)) return "50% 50%";
@@ -190,33 +194,33 @@ function TrafficLight({
 }
 
 type WindowHeaderSlot = {
-  slot: HTMLElement | null;
-  setCustom: (on: boolean) => void;
+  left: HTMLElement | null;
+  right: HTMLElement | null;
 };
 
 const WindowHeaderSlotContext = createContext<WindowHeaderSlot | null>(null);
 
-export function WindowHeader({ children }: { children: ReactNode }) {
+export type WindowHeaderProps = {
+  left?: ReactNode;
+  right?: ReactNode;
+};
+
+/** Injects into the window title bar from a child. Prefer `DesktopWindow` `left` / `right` when the parent can pass them. */
+export function WindowHeader({ left, right }: WindowHeaderProps) {
   const ctx = useContext(WindowHeaderSlotContext);
-  useLayoutEffect(() => {
-    if (!ctx) return;
-    ctx.setCustom(true);
-    return () => ctx.setCustom(false);
-  }, [ctx]);
-  if (!ctx?.slot) return null;
-  return createPortal(children, ctx.slot);
+  if (!ctx) return null;
+  return (
+    <>
+      {ctx.left && left != null ? createPortal(left, ctx.left) : null}
+      {ctx.right && right != null ? createPortal(right, ctx.right) : null}
+    </>
+  );
 }
 
-export function DesktopWindow({
-  title,
-  expanded,
-  onClose,
-  onToggleExpand,
-  scroll = true,
-  scrollbar = "hover",
-  children,
-}: {
+export type DesktopWindowProps = {
   title?: ReactNode;
+  left?: ReactNode;
+  right?: ReactNode;
   expanded: boolean;
   onClose: () => void;
   onToggleExpand: () => void;
@@ -224,7 +228,19 @@ export function DesktopWindow({
   scroll?: boolean;
   scrollbar?: OverlayScrollVisibility;
   children: ReactNode;
-}) {
+};
+
+export function DesktopWindow({
+  title,
+  left,
+  right,
+  expanded,
+  onClose,
+  onToggleExpand,
+  scroll = true,
+  scrollbar = "hover",
+  children,
+}: DesktopWindowProps) {
   const overlayRef = useRef<HTMLDivElement>(null);
   const frameRef = useRef<HTMLElement>(null);
   const closedRef = useRef(false);
@@ -253,9 +269,9 @@ export function DesktopWindow({
     w: window.innerWidth,
     h: Math.max(0, window.innerHeight - 42),
   }));
-  const [headerSlot, setHeaderSlot] = useState<HTMLDivElement | null>(null);
-  const [customHeader, setCustomHeader] = useState(false);
-  const headerChrome = useMemo(() => ({ slot: headerSlot, setCustom: setCustomHeader }), [headerSlot]);
+  const [leftSlot, setLeftSlot] = useState<HTMLDivElement | null>(null);
+  const [rightSlot, setRightSlot] = useState<HTMLDivElement | null>(null);
+  const headerChrome = useMemo(() => ({ left: leftSlot, right: rightSlot }), [leftSlot, rightSlot]);
   const requestCloseRef = useRef<() => void>(() => {});
   const viewRef = useRef(view);
   const offsetRef = useRef(offset);
@@ -325,7 +341,7 @@ export function DesktopWindow({
 
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
-      if (e.key !== "Escape" || isEditableTarget(e.target)) return;
+      if (e.key !== "Escape" || e.defaultPrevented || isEditableTarget(e.target) || hasOpenDialog()) return;
       e.preventDefault();
       requestCloseRef.current();
     };
@@ -475,10 +491,8 @@ export function DesktopWindow({
           className={cn("absolute flex flex-col rounded-xl pointer-events-auto transform-gpu", glassSurfaceClass, "nonla-window-glass", leaving && "pointer-events-none")}
         >
           <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl">
-            {/* biome-ignore lint/a11y/noStaticElementInteractions: title bar is a pointer drag surface */}
             <header
               onPointerDown={startDrag}
-              onDoubleClick={onTitleBarDoubleClick}
               className="flex h-8 shrink-0 cursor-default items-center gap-4 border-0 border-b border-solid border-ink-line px-3 select-none touch-none"
             >
               <div className="group/traffic flex shrink-0 items-center gap-2">
@@ -490,8 +504,18 @@ export function DesktopWindow({
                 </TrafficLight>
               </div>
               <div className="flex min-w-0 flex-1 items-center">
-                {customHeader ? null : typeof title === "string" ? <span className="min-w-0 truncate text-xs font-semibold leading-none text-foreground/90">{title}</span> : title}
-                <div ref={setHeaderSlot} className="contents" />
+                <div className="flex min-w-0 items-center">
+                  {left}
+                  <div ref={setLeftSlot} className="contents" />
+                </div>
+                {/* biome-ignore lint/a11y/noStaticElementInteractions: middle strip double-clicks to expand */}
+                <div onDoubleClick={onTitleBarDoubleClick} className="flex min-w-8 flex-1 items-center self-stretch px-2">
+                  {typeof title === "string" ? <span className="min-w-0 truncate text-xs font-semibold leading-none text-foreground/90">{title}</span> : title}
+                </div>
+                <div className="flex shrink-0 items-center">
+                  {right}
+                  <div ref={setRightSlot} className="contents" />
+                </div>
               </div>
             </header>
 

package/src/desktop/MeadowDesktop.tsx

@@ -6,7 +6,7 @@ export function MeadowDesktop({ children, src }: { children?: ReactNode; src?: s
     <div className="absolute inset-0 bg-meadow">
       <MeadowWallpaper src={src} />
       <div className="nonla-desktop-layer absolute inset-x-0 bottom-0 top-desktop-bar">
-        <nav aria-label="Desktop" className="absolute inset-0 overflow-auto pl-2 pr-3 pt-2 pb-3">
+        <nav aria-label="Desktop" className="absolute inset-0 overflow-auto pl-0 pr-3 pt-3 pb-3">
           <div className="flex h-full flex-col flex-wrap content-start gap-x-2 gap-y-3">{children}</div>
         </nav>
       </div>

package/src/form/Form.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { FormProvider, type FieldValues, type UseFormReturn, useWatch } from "react-hook-form";
+import { type FieldValues, FormProvider, type UseFormReturn, useWatch } from "react-hook-form";
 import { cn } from "../lib/cn";
 import { FormExtraContext, type FormFetcher } from "./common/context";
 import { fieldNameOf } from "./common/rules";

package/src/form/FormItem.tsx

@@ -1,5 +1,5 @@
-import { useState, type ComponentType } from "react";
-import { Controller, type Control, type FieldValues } from "react-hook-form";
+import { type ComponentType, useState } from "react";
+import { type Control, Controller, type FieldValues } from "react-hook-form";
 import { cn } from "../lib/cn";
 import { EFormItemType } from "./common/enum";
 import { fieldNameOf, hydrateRules, isRuleRequired } from "./common/rules";