@nextclaw/ui 0.15.24 → 0.15.26

package/src/shared/components/ui/context-menu/context-menu.tsx

@@ -8,26 +8,40 @@ import {
   type MouseEvent,
   type ReactElement,
   type ReactNode,
-} from "react";
-import { createPortal } from "react-dom";
-import { cn } from "@/shared/lib/utils";
+} from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '@/shared/lib/utils';
 
-export type ContextMenuItem = {
+type ContextMenuItemBase = {
   key: string;
   label: string;
   icon?: ReactNode;
+  destructive?: boolean;
   disabled?: boolean;
   restoreFocus?: boolean;
-  onSelect: () => void;
 };
 
+export type ContextMenuItem = ContextMenuItemBase &
+  (
+    | {
+        download?: string;
+        href: string;
+        onSelect?: () => void;
+      }
+    | {
+        download?: never;
+        href?: never;
+        onSelect: () => void;
+      }
+  );
+
 export type ContextMenuGroup = {
   key: string;
   items: readonly ContextMenuItem[];
 };
 
 type ContextMenuPosition = {
-  align: "start" | "end";
+  align: 'start' | 'end';
   x: number;
   y: number;
   trigger: HTMLElement;
@@ -61,9 +75,7 @@ function ContextMenuSurface({
       return;
     }
     const rect = menu.getBoundingClientRect();
-    const preferredLeft = position.align === "end"
-      ? position.x - rect.width
-      : position.x;
+    const preferredLeft = position.align === 'end' ? position.x - rect.width : position.x;
     const left = Math.max(
       CONTEXT_MENU_EDGE_GAP,
       Math.min(preferredLeft, window.innerWidth - rect.width - CONTEXT_MENU_EDGE_GAP),
@@ -74,22 +86,16 @@ function ContextMenuSurface({
     );
     menu.style.left = `${left}px`;
     menu.style.top = `${top}px`;
-    menu.querySelector<HTMLButtonElement>('[role="menuitem"]:not(:disabled)')?.focus();
+    menu.querySelector<HTMLElement>('[role="menuitem"]:not(:disabled)')?.focus();
   }, [position]);
 
   const moveFocus = (direction: 1 | -1) => {
-    const items = Array.from(
-      menuRef.current?.querySelectorAll<HTMLButtonElement>(
-        '[role="menuitem"]:not(:disabled)',
-      ) ?? [],
-    );
+    const items = Array.from(menuRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]:not(:disabled)') ?? []);
     if (items.length === 0) {
       return;
     }
-    const currentIndex = items.indexOf(document.activeElement as HTMLButtonElement);
-    const nextIndex = currentIndex < 0
-      ? 0
-      : (currentIndex + direction + items.length) % items.length;
+    const currentIndex = items.indexOf(document.activeElement as HTMLElement);
+    const nextIndex = currentIndex < 0 ? 0 : (currentIndex + direction + items.length) % items.length;
     items[nextIndex]?.focus();
   };
 
@@ -107,50 +113,78 @@ function ContextMenuSurface({
         style={{ left: position.x, top: position.y }}
         onPointerDown={(event) => event.stopPropagation()}
         onKeyDown={(event) => {
-          if (event.key === "Escape") {
+          if (event.key === 'Escape') {
             event.preventDefault();
             onClose(true);
-          } else if (event.key === "ArrowDown") {
+          } else if (event.key === 'ArrowDown') {
             event.preventDefault();
             moveFocus(1);
-          } else if (event.key === "ArrowUp") {
+          } else if (event.key === 'ArrowUp') {
             event.preventDefault();
             moveFocus(-1);
-          } else if (event.key === "Home" || event.key === "End") {
+          } else if (event.key === 'Home' || event.key === 'End') {
             event.preventDefault();
-            const items = menuRef.current?.querySelectorAll<HTMLButtonElement>(
-              '[role="menuitem"]:not(:disabled)',
-            );
-            items?.[event.key === "Home" ? 0 : items.length - 1]?.focus();
+            const items = menuRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]:not(:disabled)');
+            items?.[event.key === 'Home' ? 0 : items.length - 1]?.focus();
           }
         }}
       >
         {groups.map((group, groupIndex) => (
           <div key={group.key} role="group">
             {groupIndex > 0 ? <div className="my-1 h-px bg-border" /> : null}
-            {group.items.map((item) => (
-              <button
-                key={item.key}
-                type="button"
-                role="menuitem"
-                disabled={item.disabled}
-                className={cn(
-                  "flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-left text-[13px] font-medium text-foreground outline-none transition-colors",
-                  "hover:bg-muted focus-visible:bg-muted disabled:pointer-events-none disabled:opacity-45",
-                )}
-                onClick={() => {
-                  item.onSelect();
-                  onClose(item.restoreFocus !== false);
-                }}
-              >
-                {item.icon ? (
-                  <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground">
-                    {item.icon}
-                  </span>
-                ) : null}
-                <span className="min-w-0 flex-1 truncate">{item.label}</span>
-              </button>
-            ))}
+            {group.items.map((item) => {
+              const itemClassName = cn(
+                'flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-left text-[13px] font-medium outline-none transition-colors',
+                item.destructive
+                  ? 'text-destructive hover:bg-destructive/10 focus-visible:bg-destructive/10'
+                  : 'text-foreground hover:bg-muted focus-visible:bg-muted',
+                'disabled:pointer-events-none disabled:opacity-45',
+              );
+              const content = (
+                <>
+                  {item.icon ? (
+                    <span
+                      className={cn(
+                        'inline-flex h-4 w-4 shrink-0 items-center justify-center',
+                        item.destructive ? 'text-destructive' : 'text-muted-foreground',
+                      )}
+                    >
+                      {item.icon}
+                    </span>
+                  ) : null}
+                  <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                </>
+              );
+              return item.href ? (
+                <a
+                  key={item.key}
+                  role="menuitem"
+                  className={itemClassName}
+                  href={item.href}
+                  download={item.download}
+                  onClick={() => {
+                    item.onSelect?.();
+                    onClose(false);
+                  }}
+                >
+                  {content}
+                </a>
+              ) : (
+                <button
+                  key={item.key}
+                  type="button"
+                  role="menuitem"
+                  disabled={item.disabled}
+                  className={itemClassName}
+                  onClick={() => {
+                    item.onSelect?.();
+                    onClose(item.restoreFocus !== false);
+                  }}
+                >
+                  {content}
+                </button>
+              );
+            })}
           </div>
         ))}
       </div>
@@ -165,7 +199,7 @@ export function ContextMenu({
   label,
 }: {
   children: ReactElement<{
-    "data-context-menu-open"?: string;
+    'data-context-menu-open'?: string;
     onContextMenu?: (event: MouseEvent) => void;
   }>;
   groups: readonly ContextMenuGroup[];
@@ -191,7 +225,7 @@ export function ContextMenu({
     }
     const bounds = trigger.getBoundingClientRect();
     setPosition({
-      align: "end",
+      align: 'end',
       x: bounds.right,
       y: bounds.bottom,
       trigger,
@@ -199,7 +233,7 @@ export function ContextMenu({
   };
 
   const child = cloneElement(children, {
-    "data-context-menu-open": position ? "" : undefined,
+    'data-context-menu-open': position ? '' : undefined,
     onContextMenu: (event: MouseEvent) => {
       children.props.onContextMenu?.(event);
       if (event.defaultPrevented || visibleGroups.length === 0) {
@@ -209,7 +243,7 @@ export function ContextMenu({
       const trigger = event.currentTarget as HTMLElement;
       const bounds = trigger.getBoundingClientRect();
       setPosition({
-        align: "start",
+        align: 'start',
         x: event.clientX || bounds.left,
         y: event.clientY || bounds.bottom,
         trigger,
@@ -218,17 +252,10 @@ export function ContextMenu({
   });
 
   return (
-    <ContextMenuControllerContext.Provider
-      value={{ isOpen: Boolean(position), toggleFromButton }}
-    >
+    <ContextMenuControllerContext.Provider value={{ isOpen: Boolean(position), toggleFromButton }}>
       {child}
       {position ? (
-        <ContextMenuSurface
-          groups={visibleGroups}
-          label={label}
-          position={position}
-          onClose={closeMenu}
-        />
+        <ContextMenuSurface groups={visibleGroups} label={label} position={position} onClose={closeMenu} />
       ) : null}
     </ContextMenuControllerContext.Provider>
   );
@@ -238,19 +265,19 @@ export function ContextMenuTrigger({
   children,
 }: {
   children: ReactElement<{
-    "aria-expanded"?: boolean;
-    "aria-haspopup"?: "menu";
+    'aria-expanded'?: boolean;
+    'aria-haspopup'?: 'menu';
     onClick?: (event: MouseEvent) => void;
   }>;
 }) {
   const controller = useContext(ContextMenuControllerContext);
   if (!controller) {
-    throw new Error("ContextMenuTrigger must be rendered inside ContextMenu");
+    throw new Error('ContextMenuTrigger must be rendered inside ContextMenu');
   }
 
   return cloneElement(children, {
-    "aria-expanded": controller.isOpen,
-    "aria-haspopup": "menu",
+    'aria-expanded': controller.isOpen,
+    'aria-haspopup': 'menu',
     onClick: (event: MouseEvent) => {
       children.props.onClick?.(event);
       if (event.defaultPrevented) {

package/src/shared/hooks/use-system-object-references.ts

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+import { nextclawClient } from '@/shared/lib/api';
+
+export function useSystemObjectReferences(params: {
+  enabled: boolean;
+  query: string;
+  limit?: number;
+  objectType?: string;
+}) {
+  const { enabled, limit, objectType } = params;
+  const query = params.query.trim();
+  return useQuery({
+    queryKey: ['system-object-references', objectType ?? null, query, limit ?? null],
+    queryFn: () => nextclawClient.systemObjectReferences.list({
+      query: query || undefined,
+      limit,
+      objectType,
+    }),
+    enabled,
+    staleTime: 10_000,
+  });
+}

package/src/shared/lib/api/managers/client.manager.ts

@@ -1,24 +1,33 @@
 import {
   NextClawClient,
+  NextClawClientError,
   type NextClawRealtimeEvent,
   type NextClawQueryParams,
   type NextClawTransport,
   type NextClawTransportRequestInput,
-  type NextClawTransportUploadInput
+  type NextClawTransportUploadInput,
 } from '@nextclaw/client-sdk';
 import { API_BASE } from '@/shared/lib/api/api-base';
 import { appClient } from '@/shared/lib/transport';
 import type { ApiResponse } from '@/shared/lib/api/types';
 
 const nextclawUiTransport: NextClawTransport = {
-  request: async <T>({ body, headers, method, path, query, signal, timeoutMs }: NextClawTransportRequestInput): Promise<T> => {
+  request: async <T>({
+    body,
+    headers,
+    method,
+    path,
+    query,
+    signal,
+    timeoutMs,
+  }: NextClawTransportRequestInput): Promise<T> => {
     return await appClient.request({
       method,
       path: appendQueryToPath(path, serializeQuery(query)),
       ...(body !== undefined ? { body } : {}),
       ...(headers ? { headers } : {}),
       ...(signal ? { signal } : {}),
-      ...(timeoutMs !== undefined ? { timeoutMs } : {})
+      ...(timeoutMs !== undefined ? { timeoutMs } : {}),
     });
   },
   upload: async <T>({ formData, headers, path, signal }: NextClawTransportUploadInput): Promise<T> => {
@@ -27,25 +36,30 @@ const nextclawUiTransport: NextClawTransport = {
       body: formData,
       credentials: 'include',
       ...(headers ? { headers } : {}),
-      ...(signal ? { signal } : {})
+      ...(signal ? { signal } : {}),
     });
     const payload = (await response.json()) as ApiResponse<unknown>;
     if (!response.ok || !payload.ok) {
-      throw new Error(readApiErrorMessage(payload, `Upload failed for ${path}`));
+      throw new NextClawClientError({
+        message: readApiErrorMessage(payload, `Upload failed for ${path}`),
+        status: response.status,
+        code: !payload.ok ? payload.error.code : undefined,
+        details: !payload.ok ? payload.error.details : undefined,
+      });
     }
     return payload.data as T;
   },
-  subscribe: (handler: (event: NextClawRealtimeEvent) => void) => appClient.subscribe(handler)
+  subscribe: (handler: (event: NextClawRealtimeEvent) => void) => appClient.subscribe(handler),
 };
 
 export const nextclawClient = new NextClawClient({
   baseUrl: API_BASE,
-  transport: nextclawUiTransport
+  transport: nextclawUiTransport,
 });
 
 export async function requestApiResponse<T>(
   endpoint: string,
-  options: RequestInit & { timeoutMs?: number } = {}
+  options: RequestInit & { timeoutMs?: number } = {},
 ): Promise<ApiResponse<T>> {
   const method = (options.method || 'GET').toUpperCase();
   try {
@@ -53,11 +67,11 @@ export async function requestApiResponse<T>(
       method: method as 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',
       path: endpoint,
       ...(options.timeoutMs !== undefined ? { timeoutMs: options.timeoutMs } : {}),
-      ...(options.body !== undefined ? { body: parseRequestBody(options.body) } : {})
+      ...(options.body !== undefined ? { body: parseRequestBody(options.body) } : {}),
     });
     return {
       ok: true,
-      data
+      data,
     };
   } catch (error) {
     return {
@@ -67,9 +81,9 @@ export async function requestApiResponse<T>(
         message: error instanceof Error ? error.message : String(error),
         details: {
           method,
-          endpoint
-        }
-      }
+          endpoint,
+        },
+      },
     };
   }
 }
@@ -80,17 +94,17 @@ export const api = {
   put: <T>(path: string, body: unknown) =>
     requestApiResponse<T>(path, {
       method: 'PUT',
-      body: JSON.stringify(body)
+      body: JSON.stringify(body),
     }),
   post: <T>(path: string, body: unknown) =>
     requestApiResponse<T>(path, {
       method: 'POST',
-      body: JSON.stringify(body)
+      body: JSON.stringify(body),
     }),
   delete: <T>(path: string) =>
     requestApiResponse<T>(path, {
-      method: 'DELETE'
-    })
+      method: 'DELETE',
+    }),
 };
 
 function parseRequestBody(body: BodyInit | null | undefined): unknown {

package/src/shared/lib/api/server-path/server-path.types.ts

@@ -0,0 +1,66 @@
+export type ServerPathEntryView = {
+  name: string;
+  path: string;
+  kind: 'directory' | 'file';
+  hidden: boolean;
+};
+
+export type ServerPathBreadcrumbView = { label: string; path: string };
+
+export type ServerPathLocationView = {
+  kind: 'desktop' | 'documents' | 'downloads' | 'icloud-drive' | 'applications' | 'volumes';
+  path: string;
+};
+
+export type ServerPathBrowseView = {
+  currentPath: string;
+  parentPath: string | null;
+  homePath: string;
+  breadcrumbs: ServerPathBreadcrumbView[];
+  entries: ServerPathEntryView[];
+  locations: ServerPathLocationView[];
+};
+
+export type ServerPathSearchEntryView = {
+  name: string;
+  path: string;
+  relativePath: string;
+  parentRelativePath: string;
+  kind: 'directory' | 'file';
+  hidden: boolean;
+};
+
+export type ServerPathSearchView = {
+  basePath: string;
+  query: string;
+  entries: ServerPathSearchEntryView[];
+  truncated: boolean;
+};
+
+export type ServerPathDirectoryCreateRequest = { basePath?: string; parentPath: string; name: string };
+export type ServerPathDirectoryCreateView = { path: string };
+export type ServerPathFileCreateRequest = { basePath: string; parentPath: string; name: string };
+export type ServerPathFileCreateView = { name: string; path: string; kind: 'file' };
+export type ServerPathEntryRenameRequest = { basePath: string; path: string; name: string };
+export type ServerPathEntryRenameView = {
+  oldPath: string;
+  path: string;
+  name: string;
+  kind: 'directory' | 'file';
+};
+export type ServerPathEntryDeleteView = { path: string; kind: 'directory' | 'file' };
+export type ServerPathFilesUploadView = {
+  files: Array<{ name: string; path: string; sizeBytes: number }>;
+  overwritten: boolean;
+};
+
+export type ServerPathReadView = {
+  requestedPath: string;
+  resolvedPath: string;
+  kind: 'text' | 'markdown' | 'binary';
+  sizeBytes: number;
+  startLine?: number;
+  truncated: boolean;
+  text?: string;
+  languageHint?: string | null;
+};