@nextclaw/ui 0.25.4 → 0.26.1

package/src/shared/components/ui/popover.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
 import { cn } from '@/shared/lib/utils';
+import { deferEscapeToNestedMenu } from './context-menu/context-menu';
+import { CONTEXT_MENU_SURFACE_CLASS } from './context-menu/context-menu-items';
 
 const FLOATING_CONTENT_AVAILABLE_HEIGHT_GAP = '2rem';
 
@@ -19,21 +21,25 @@ const PopoverAnchor = PopoverPrimitive.Anchor;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, sideOffset = 8, align = 'start', collisionPadding = 12, style, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & { variant?: 'default' | 'menu' }
+>(({ className, variant = 'default', sideOffset = 8, align = 'start', collisionPadding = 12, style, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
-      data-theme-overlay="popover"
+      data-theme-overlay={variant === 'menu' ? 'menu' : 'popover'}
       sideOffset={sideOffset}
       align={align}
       collisionPadding={collisionPadding}
       className={cn(
         'z-[var(--z-popover,10100)] w-72 overflow-x-hidden overflow-y-auto rounded-2xl border border-border bg-popover p-4 text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className
+        className,
+        variant === 'menu' && CONTEXT_MENU_SURFACE_CLASS
       )}
       style={{ maxHeight: POPOVER_CONTENT_MAX_HEIGHT, ...style }}
       {...props}
+      onEscapeKeyDown={(event) => {
+        if (!deferEscapeToNestedMenu(event)) props.onEscapeKeyDown?.(event);
+      }}
     />
   </PopoverPrimitive.Portal>
 ));

package/src/shared/components/workbench/__tests__/workbench-surface.manager.test.ts

@@ -0,0 +1,70 @@
+import { beforeEach, expect, it } from "vitest";
+import { WorkbenchSurfaceManager } from "@/shared/components/workbench/managers/workbench-surface.manager";
+import { useWorkbenchSurfaceStore } from "@/shared/components/workbench/stores/workbench-surface.store";
+import { resizeWorkbenchRect } from "@/shared/components/workbench/utils/workbench-surface-geometry.utils";
+
+const manager = new WorkbenchSurfaceManager();
+beforeEach(() => useWorkbenchSurfaceStore.setState({ surfaces: {} }));
+
+it("keeps geometry and placement through maximize, collapse and restore", () => {
+  manager.place("file", "floating");
+  manager.move("file", manager.get("file").rect, 100, 20, {
+    width: 1400,
+    height: 1000,
+  });
+  const { rect } = manager.get("file");
+  manager.toggleMaximize("file");
+  expect(manager.get("file")).toMatchObject({
+    maximized: true,
+    placement: "floating",
+    rect,
+  });
+  manager.toggleMaximize("file");
+  manager.minimize("file");
+  manager.restore("file");
+  expect(manager.get("file")).toMatchObject({
+    minimized: false,
+    maximized: false,
+    rect,
+  });
+  manager.place("file", "docked");
+  manager.place("file", "floating");
+  expect(manager.get("file").rect).toEqual(rect);
+});
+
+it("isolates scopes, orders focused windows and constrains after viewport shrink", () => {
+  manager.place("global", "floating");
+  manager.place("session", "floating");
+  manager.focus("global");
+  expect(manager.get("global").layer).toBeGreaterThan(
+    manager.get("session").layer,
+  );
+  manager.minimize("global");
+  expect(manager.get("session").minimized).toBe(false);
+  manager.constrain("global", { width: 280, height: 200 });
+  const { rect } = manager.get("global");
+  expect(rect.x).toBeGreaterThanOrEqual(0);
+  expect(rect.x + rect.w).toBeLessThanOrEqual(280);
+  expect(rect.y + rect.h).toBeLessThanOrEqual(200);
+});
+
+it("anchors the opposite edge when resizing from left or top", () => {
+  const rect = { x: 100, y: 100, w: 560, h: 640 };
+  const next = resizeWorkbenchRect(rect, "top-left", 30, 40, {
+    width: 1400,
+    height: 1000,
+  });
+  expect(next.x + next.w).toBe(rect.x + rect.w);
+  expect(next.y + next.h).toBe(rect.y + rect.h);
+});
+
+it("reloads validated layout without reviving transient maximized or collapsed state", async () => {
+  manager.place("global", "floating");
+  manager.minimize("global");
+  await useWorkbenchSurfaceStore.persist.rehydrate();
+  expect(manager.get("global")).toMatchObject({
+    placement: "floating",
+    minimized: false,
+    maximized: false,
+  });
+});

package/src/shared/components/workbench/__tests__/workbench-surface.test.tsx

@@ -0,0 +1,111 @@
+import { act, fireEvent, render, screen, within } from "@testing-library/react";
+import { beforeEach, expect, it, vi } from "vitest";
+import { WorkbenchSurface } from "@/shared/components/workbench/workbench-surface";
+import { WorkbenchSurfaceManager } from "@/shared/components/workbench/managers/workbench-surface.manager";
+import { useWorkbenchSurfaceStore } from "@/shared/components/workbench/stores/workbench-surface.store";
+
+const manager = new WorkbenchSurfaceManager();
+beforeEach(() => {
+  useWorkbenchSurfaceStore.setState({ surfaces: {} });
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    value: 1200,
+  });
+});
+
+it("retains the exact input and iframe nodes through every presentation transition and hiding", () => {
+  const props = {
+    id: "resource",
+    title: "Resource",
+    manager,
+    onClose: vi.fn(),
+  };
+  const content = (
+    <>
+      <textarea aria-label="Draft" defaultValue="Keep me" />
+      <iframe title="App" src="about:blank" />
+    </>
+  );
+  const view = render(
+    <WorkbenchSurface {...props}>{content}</WorkbenchSurface>,
+  );
+  const input = screen.getByRole("textbox");
+  const iframe = screen.getByTitle("App");
+  for (const action of [
+    "Float view group",
+    "Maximize",
+    "Restore size",
+    "Collapse view",
+    "Expand view",
+    "Dock to sidebar",
+  ]) {
+    fireEvent.click(screen.getByRole("button", { name: action }));
+    expect(input.isConnected).toBe(true);
+    expect(iframe.isConnected).toBe(true);
+    expect(view.container.querySelector("textarea")).toBe(input);
+    expect(view.container.querySelector("iframe")).toBe(iframe);
+  }
+  view.rerender(
+    <WorkbenchSurface {...props} hidden>
+      {content}
+    </WorkbenchSurface>,
+  );
+  expect(screen.queryByRole("textbox")).toBeNull();
+  view.rerender(<WorkbenchSurface {...props}>{content}</WorkbenchSurface>);
+  expect(screen.getByRole("textbox")).toBe(input);
+});
+
+it("restores size before collapsing on Escape and keeps close separate", () => {
+  const onClose = vi.fn();
+  manager.place("resource", "floating");
+  render(
+    <WorkbenchSurface
+      id="resource"
+      manager={manager}
+      title="Resource"
+      onClose={onClose}
+    >
+      <textarea />
+    </WorkbenchSurface>,
+  );
+  fireEvent.click(screen.getByRole("button", { name: "Maximize" }));
+  fireEvent.keyDown(screen.getByRole("textbox"), { key: "Escape" });
+  expect(manager.get("resource")).toMatchObject({
+    minimized: false,
+    maximized: false,
+  });
+  fireEvent.keyDown(screen.getByRole("textbox"), { key: "Escape" });
+  expect(manager.get("resource").minimized).toBe(true);
+  expect(onClose).not.toHaveBeenCalled();
+  fireEvent.click(screen.getByRole("button", { name: "Close view" }));
+  expect(onClose).toHaveBeenCalledOnce();
+});
+
+it("offers keyboard resize and a compact viewport without unusable desktop controls", () => {
+  const onWidthCommit = vi.fn();
+  render(
+    <WorkbenchSurface
+      id="resource"
+      manager={manager}
+      title="Resource"
+      onClose={vi.fn()}
+      width={480}
+      onWidthCommit={onWidthCommit}
+    >
+      <input />
+    </WorkbenchSurface>,
+  );
+  fireEvent.keyDown(screen.getByRole("separator"), { key: "ArrowLeft" });
+  expect(onWidthCommit).toHaveBeenCalledWith(504);
+  act(() => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      value: 375,
+    });
+    window.dispatchEvent(new Event("resize"));
+  });
+  const region = screen.getByRole("region");
+  expect(region.style.position).toBe("fixed");
+  expect(within(region).queryByRole("button", { name: "Maximize" })).toBeNull();
+  expect(within(region).queryByRole("separator")).toBeNull();
+});

package/src/shared/components/workbench/managers/workbench-surface.manager.ts

@@ -0,0 +1,120 @@
+import { useWorkbenchSurfaceStore } from "@/shared/components/workbench/stores/workbench-surface.store";
+import {
+  DEFAULT_WORKBENCH_SURFACE,
+  type WorkbenchPlacement,
+  type WorkbenchRect,
+  type WorkbenchResizeEdge,
+  type WorkbenchSurfaceState,
+  type WorkbenchViewport,
+} from "@/shared/components/workbench/types/workbench-surface.types";
+import {
+  constrainWorkbenchRect,
+  resizeWorkbenchRect,
+} from "@/shared/components/workbench/utils/workbench-surface-geometry.utils";
+
+export class WorkbenchSurfaceManager {
+  isVisible = (id: string): boolean =>
+    useWorkbenchSurfaceStore.getState().visibleSurfaceIds.includes(id);
+
+  setVisible = (id: string, visible: boolean): void => {
+    useWorkbenchSurfaceStore.setState(({ visibleSurfaceIds }) => ({
+      visibleSurfaceIds: visible
+        ? [...new Set([...visibleSurfaceIds, id])]
+        : visibleSurfaceIds.filter((key) => key !== id),
+    }));
+  };
+
+  get = (id: string): WorkbenchSurfaceState =>
+    useWorkbenchSurfaceStore.getState().surfaces[id] ??
+    DEFAULT_WORKBENCH_SURFACE;
+
+  private update = (
+    id: string,
+    patch: Partial<WorkbenchSurfaceState>,
+  ): void => {
+    useWorkbenchSurfaceStore.setState(({ surfaces }) => ({
+      surfaces: { ...surfaces, [id]: { ...this.get(id), ...patch } },
+    }));
+  };
+
+  place = (id: string, placement: WorkbenchPlacement): void => {
+    this.update(id, { placement, minimized: false, maximized: false });
+    this.focus(id);
+  };
+
+  minimize = (id: string): void =>
+    this.update(id, { minimized: true, maximized: false });
+  restore = (id: string): void => this.update(id, { minimized: false });
+  toggleMaximize = (id: string): void => {
+    this.update(id, { maximized: !this.get(id).maximized, minimized: false });
+    this.focus(id);
+  };
+
+  focus = (id: string): void => {
+    const { surfaces } = useWorkbenchSurfaceStore.getState();
+    const ids = Object.keys(surfaces).sort(
+      (left, right) => surfaces[left].layer - surfaces[right].layer,
+    );
+    if (ids.at(-1) === id && this.get(id).layer > 0) return;
+    const ordered = [...ids.filter((key) => key !== id), id];
+    useWorkbenchSurfaceStore.setState({
+      surfaces: Object.fromEntries(
+        ordered.map((key, index) => [
+          key,
+          { ...this.get(key), layer: index + 1 },
+        ]),
+      ),
+    });
+  };
+
+  reset = (id: string): void => {
+    useWorkbenchSurfaceStore.setState(({ surfaces }) => {
+      const next = { ...surfaces };
+      delete next[id];
+      return { surfaces: next };
+    });
+  };
+
+  constrain = (id: string, viewport: WorkbenchViewport): void => {
+    const current = this.get(id).rect;
+    const rect = constrainWorkbenchRect(current, viewport);
+    if (
+      Object.keys(rect).some(
+        (key) =>
+          rect[key as keyof WorkbenchRect] !==
+          current[key as keyof WorkbenchRect],
+      )
+    )
+      this.update(id, { rect });
+  };
+
+  move = (
+    id: string,
+    start: WorkbenchRect,
+    dx: number,
+    dy: number,
+    viewport: WorkbenchViewport,
+  ): void => {
+    this.update(id, {
+      rect: constrainWorkbenchRect(
+        { ...start, x: start.x + dx, y: start.y + dy },
+        viewport,
+      ),
+    });
+  };
+
+  resize = (
+    id: string,
+    start: WorkbenchRect,
+    edge: WorkbenchResizeEdge,
+    dx: number,
+    dy: number,
+    viewport: WorkbenchViewport,
+  ): void => {
+    this.update(id, {
+      rect: resizeWorkbenchRect(start, edge, dx, dy, viewport),
+    });
+  };
+}
+
+export const workbenchSurfaceManager = new WorkbenchSurfaceManager();

package/src/shared/components/workbench/stores/workbench-surface.store.ts

@@ -0,0 +1,83 @@
+import { ViewMemoryStorage } from "@/shared/lib/navigation-history";
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import {
+  DEFAULT_WORKBENCH_SURFACE,
+  GLOBAL_WORKBENCH_SURFACE,
+  type WorkbenchSurfaceState,
+} from "@/shared/components/workbench/types/workbench-surface.types";
+
+function restoreSurfaces(
+  value: unknown,
+): Record<string, WorkbenchSurfaceState> {
+  if (
+    !value ||
+    typeof value !== "object" ||
+    !("surfaces" in value) ||
+    !value.surfaces ||
+    typeof value.surfaces !== "object"
+  )
+    return {};
+  const result: Record<string, WorkbenchSurfaceState> = {};
+  for (const [id, candidate] of Object.entries(value.surfaces).slice(-64)) {
+    if (!candidate || typeof candidate !== "object") continue;
+    const { placement, rect } = candidate;
+    if (
+      (placement !== "docked" && placement !== "floating") ||
+      !rect ||
+      !["x", "y", "w", "h"].every(
+        (key) => typeof rect[key] === "number" && Number.isFinite(rect[key]),
+      )
+    )
+      continue;
+    result[id] = { ...DEFAULT_WORKBENCH_SURFACE, placement, rect };
+  }
+  return result;
+}
+
+function initialSurfaces(): Record<string, WorkbenchSurfaceState> {
+  // One-way import of the former browser-only placement. New writes have one owner.
+  try {
+    const legacy = JSON.parse(
+      window.localStorage.getItem("nextclaw.doc-browser.state") ?? "null",
+    );
+    if (legacy?.state?.snapshot?.mode === "floating")
+      return {
+        [GLOBAL_WORKBENCH_SURFACE]: {
+          ...DEFAULT_WORKBENCH_SURFACE,
+          placement: "floating",
+        },
+      };
+  } catch {
+    /* Storage may be unavailable. The default dock remains usable. */
+  }
+  return {};
+}
+
+export const useWorkbenchSurfaceStore = create<{
+  surfaces: Record<string, WorkbenchSurfaceState>;
+  visibleSurfaceIds: string[];
+}>()(
+  persist(
+    () => ({ surfaces: initialSurfaces(), visibleSurfaceIds: [] as string[] }),
+    {
+      name: "nextclaw.workbench.layout",
+      version: 1,
+      storage: createJSONStorage(() => new ViewMemoryStorage()),
+      partialize: ({ surfaces }) => ({
+        surfaces: Object.fromEntries(
+          Object.entries(surfaces)
+            .slice(-64)
+            .map(([id, state]) => [
+              id,
+              { ...state, minimized: false, maximized: false, layer: 0 },
+            ]),
+        ),
+      }),
+      merge: (persisted, current) => ({
+        ...current,
+        surfaces: { ...current.surfaces, ...restoreSurfaces(persisted) },
+      }),
+    },
+  ),
+);

package/src/shared/components/workbench/types/workbench-surface.types.ts

@@ -0,0 +1,32 @@
+export type WorkbenchPlacement = "docked" | "floating";
+export type WorkbenchRect = { x: number; y: number; w: number; h: number };
+export type WorkbenchResizeEdge =
+  | "left"
+  | "right"
+  | "top"
+  | "bottom"
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right";
+export type WorkbenchViewport = { width: number; height: number };
+
+/** Presentation only. Resources, tabs, drafts and execution remain with their domain owners. */
+export type WorkbenchSurfaceState = {
+  placement: WorkbenchPlacement;
+  minimized: boolean;
+  maximized: boolean;
+  rect: WorkbenchRect;
+  layer: number;
+};
+
+export const GLOBAL_WORKBENCH_SURFACE = "global-resources";
+export const SESSION_WORKBENCH_SURFACE = "floating-conversation";
+
+export const DEFAULT_WORKBENCH_SURFACE: WorkbenchSurfaceState = {
+  placement: "docked",
+  minimized: false,
+  maximized: false,
+  rect: { x: 80, y: 80, w: 560, h: 640 },
+  layer: 0,
+};

package/src/shared/components/workbench/utils/workbench-surface-geometry.utils.ts

@@ -0,0 +1,46 @@
+import type {
+  WorkbenchRect,
+  WorkbenchResizeEdge,
+  WorkbenchViewport,
+} from "@/shared/components/workbench/types/workbench-surface.types";
+
+const MARGIN = 12;
+const clamp = (value: number, min: number, max: number) =>
+  Math.max(min, Math.min(max, value));
+
+export function constrainWorkbenchRect(
+  rect: WorkbenchRect,
+  viewport: WorkbenchViewport,
+): WorkbenchRect {
+  const maxWidth = Math.max(1, viewport.width - MARGIN * 2);
+  const maxHeight = Math.max(1, viewport.height - MARGIN * 2);
+  const w = clamp(rect.w, Math.min(320, maxWidth), maxWidth);
+  const h = clamp(rect.h, Math.min(240, maxHeight), maxHeight);
+  return {
+    w,
+    h,
+    x: clamp(rect.x, MARGIN, viewport.width - w - MARGIN),
+    y: clamp(rect.y, MARGIN, viewport.height - h - MARGIN),
+  };
+}
+
+export function resizeWorkbenchRect(
+  rect: WorkbenchRect,
+  edge: WorkbenchResizeEdge,
+  dx: number,
+  dy: number,
+  viewport: WorkbenchViewport,
+): WorkbenchRect {
+  const parts = edge.split("-");
+  const right = rect.x + rect.w;
+  const bottom = rect.y + rect.h;
+  const x = parts.includes("left")
+    ? clamp(rect.x + dx, MARGIN, right - Math.min(320, rect.w))
+    : rect.x;
+  const y = parts.includes("top")
+    ? clamp(rect.y + dy, MARGIN, bottom - Math.min(240, rect.h))
+    : rect.y;
+  const w = parts.includes("right") ? rect.w + dx : right - x;
+  const h = parts.includes("bottom") ? rect.h + dy : bottom - y;
+  return constrainWorkbenchRect({ x, y, w, h }, viewport);
+}

package/src/shared/components/workbench/workbench-surface-toolbar.tsx

@@ -0,0 +1,102 @@
+import {
+  ArrowUpRight,
+  Maximize2,
+  Minimize2,
+  Minus,
+  PanelRight,
+  PictureInPicture2,
+  X,
+} from "lucide-react";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { t } from "@/shared/lib/i18n";
+import type { WorkbenchSurfaceState } from "./types/workbench-surface.types";
+
+export function WorkbenchSurfaceToolbar({
+  state,
+  compact,
+  onPlace,
+  onMinimize,
+  onRestore,
+  onMaximize,
+  onClose,
+  closeLabel,
+  onOpenMain,
+}: {
+  state: WorkbenchSurfaceState;
+  compact: boolean;
+  onPlace?: () => void;
+  onMinimize: () => void;
+  onRestore: () => void;
+  onMaximize: () => void;
+  onClose: () => void;
+  closeLabel: string;
+  onOpenMain?: () => void;
+}) {
+  return (
+    <div
+      className="flex shrink-0 items-center gap-0.5"
+      data-workbench-actions=""
+    >
+      {onOpenMain && (
+        <IconActionButton
+          size="sm"
+          icon={<ArrowUpRight className="h-4 w-4" />}
+          label={t("workbenchOpenMain")}
+          onClick={onOpenMain}
+        />
+      )}
+      {!compact && onPlace && (
+        <IconActionButton
+          size="sm"
+          icon={
+            state.placement === "floating" ? (
+              <PanelRight className="h-4 w-4" />
+            ) : (
+              <PictureInPicture2 className="h-4 w-4" />
+            )
+          }
+          label={t(
+            state.placement === "floating"
+              ? "workbenchDock"
+              : "workbenchFloatGroup",
+          )}
+          onClick={onPlace}
+        />
+      )}
+      <IconActionButton
+        size="sm"
+        icon={
+          state.minimized ? (
+            <Maximize2 className="h-4 w-4" />
+          ) : (
+            <Minus className="h-4 w-4" />
+          )
+        }
+        label={t(state.minimized ? "workbenchExpand" : "workbenchCollapse")}
+        onClick={state.minimized ? onRestore : onMinimize}
+      />
+      {!compact && !state.minimized && (
+        <IconActionButton
+          size="sm"
+          icon={
+            state.maximized ? (
+              <Minimize2 className="h-4 w-4" />
+            ) : (
+              <Maximize2 className="h-4 w-4" />
+            )
+          }
+          label={t(
+            state.maximized ? "workbenchRestoreSize" : "workbenchMaximize",
+          )}
+          onClick={onMaximize}
+        />
+      )}
+      <IconActionButton
+        size="sm"
+        icon={<X className="h-4 w-4" />}
+        label={closeLabel}
+        onClick={onClose}
+      />
+    </div>
+  );
+}