@agent-native/core 0.79.27 → 0.80.0

package/corpus/templates/design/app/components/visual-editor/DrawOverlay.tsx

@@ -46,6 +46,10 @@ export interface DrawAnnotation {
 interface DrawOverlayProps {
   /** Whether the overlay is currently visible (toggled from the toolbar) */
   visible: boolean;
+  /** When false, canvas clicks pass through to sibling tools while the toolbar stays usable. */
+  canvasInteractive?: boolean;
+  /** Extra queued annotations owned by sibling tools, such as comment pins. */
+  queuedAnnotationCount?: number;
   /** Called when the user submits the queued strokes/text to the agent */
   onSend: (
     annotations: DrawAnnotation[],
@@ -94,7 +98,13 @@ interface Stroke {
  * its parent, so the parent (a slide editor or design canvas) only needs to
  * be `position: relative`.
  */
-export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
+export function DrawOverlay({
+  visible,
+  canvasInteractive = true,
+  queuedAnnotationCount = 0,
+  onSend,
+  onClose,
+}: DrawOverlayProps) {
   const t = useT();
   const containerRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -292,13 +302,19 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
   if (!visible) return null;
 
   const hasContent =
-    strokes.length > 0 || textAnnotations.length > 0 || instruction.trim();
+    strokes.length > 0 ||
+    textAnnotations.length > 0 ||
+    instruction.trim() ||
+    queuedAnnotationCount > 0;
 
   return (
     <div
       ref={containerRef}
       data-draw-overlay
-      className="absolute inset-0 z-30 pointer-events-auto"
+      className={cn(
+        "absolute inset-0 z-30",
+        canvasInteractive ? "pointer-events-auto" : "pointer-events-none",
+      )}
     >
       {/* Drawing canvas */}
       <canvas
@@ -307,6 +323,7 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
         className={cn(
           "absolute inset-0 h-full w-full",
           textMode ? "cursor-text" : "cursor-crosshair",
+          !canvasInteractive && "pointer-events-none",
         )}
         onPointerDown={handlePointerDown}
         onPointerMove={handlePointerMove}
@@ -332,7 +349,7 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
       {/* Pending text input */}
       {textInput && (
         <div
-          className="absolute z-40"
+          className="pointer-events-auto absolute z-40"
           style={{ left: textInput.x, top: textInput.y }}
         >
           <Input
@@ -360,7 +377,7 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
       {/* Bottom toolbar */}
       <div
         data-draw-toolbar
-        className="absolute bottom-4 left-1/2 z-40 flex -translate-x-1/2 items-center gap-2 rounded-xl border border-border bg-popover px-3 py-2 shadow-2xl"
+        className="pointer-events-auto absolute bottom-4 left-1/2 z-40 flex -translate-x-1/2 items-center gap-2 rounded-xl border border-border bg-popover px-3 py-2 shadow-2xl"
       >
         {/* Color picker */}
         <div className="flex gap-1">

package/corpus/templates/design/app/components/visual-editor/SaveStatusIndicator.tsx

@@ -1,6 +1,11 @@
 import { useT } from "@agent-native/core/client";
 import { IconCloudOff } from "@tabler/icons-react";
 
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 interface SaveStatusIndicatorProps {
@@ -18,17 +23,25 @@ export function SaveStatusIndicator({
   const t = useT();
   if (offline) {
     return (
-      <div
-        data-save-status="offline"
-        title={t("visualEditor.changesSaveWhenReconnected")}
-        className={cn(
-          "flex items-center gap-1 text-[11px] text-amber-500",
-          className,
-        )}
-      >
-        <IconCloudOff className="w-3 h-3" />
-        <span className="hidden sm:inline">{t("visualEditor.offline")}</span>
-      </div>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div
+            data-save-status="offline"
+            className={cn(
+              "flex items-center gap-1 text-[11px] text-amber-500",
+              className,
+            )}
+          >
+            <IconCloudOff className="w-3 h-3" />
+            <span className="hidden sm:inline">
+              {t("visualEditor.offline")}
+            </span>
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          {t("visualEditor.changesSaveWhenReconnected")}
+        </TooltipContent>
+      </Tooltip>
     );
   }
 

package/corpus/templates/design/app/global.css

@@ -35,14 +35,34 @@
   --sidebar-accent-foreground: 220 10% 15%;
   --sidebar-border: 220 10% 90%;
   --sidebar-ring: 220 10% 40%;
+  --design-editor-accent-color: hsl(213 91% 67%);
+  --design-editor-accent-hover-color: hsl(213 72% 56%);
+  --design-editor-selection-color: color-mix(
+    in srgb,
+    hsl(213 91% 67%) 14%,
+    transparent
+  );
+  --design-editor-active-row-color: color-mix(
+    in srgb,
+    hsl(220 10% 15%) 8%,
+    transparent
+  );
+  --design-editor-accent-strong-color: var(--design-editor-accent-color);
+  --design-editor-accent-contrast-color: #ffffff;
+  --design-editor-measure-color: hsl(344 100% 63%);
+  --design-editor-panel-bg: hsl(var(--background));
+  --design-editor-panel-raised-bg: hsl(var(--secondary));
+  --design-editor-control-bg: hsl(var(--muted));
+  --design-editor-control-border: hsl(var(--border));
+  --design-editor-canvas-bg: hsl(220 10% 92%);
 }
 
 .dark {
   --background: 220 6% 6%;
   --foreground: 0 0% 90%;
-  --card: 220 5% 6%;
+  --card: 220 5% 13%;
   --card-foreground: 0 0% 90%;
-  --popover: 220 5% 6%;
+  --popover: 220 5% 13%;
   --popover-foreground: 0 0% 90%;
   --primary: 0 0% 75%;
   --primary-foreground: 220 6% 6%;
@@ -58,7 +78,7 @@
   --input: 220 4% 14%;
   --ring: 0 0% 60%;
   --radius: 0.5rem;
-  --sidebar-background: 220 6% 4%;
+  --sidebar-background: 220 5% 13%;
   --sidebar-foreground: 220 4% 60%;
   --sidebar-primary: 0 0% 75%;
   --sidebar-primary-foreground: 220 6% 6%;
@@ -66,6 +86,22 @@
   --sidebar-accent-foreground: 0 0% 90%;
   --sidebar-border: 220 4% 10%;
   --sidebar-ring: 0 0% 60%;
+  --design-editor-accent-color: hsl(213 91% 67%);
+  --design-editor-accent-hover-color: hsl(213 72% 56%);
+  --design-editor-selection-color: color-mix(
+    in srgb,
+    hsl(213 91% 67%) 24%,
+    transparent
+  );
+  --design-editor-active-row-color: hsl(220 4% 20%);
+  --design-editor-accent-strong-color: var(--design-editor-accent-color);
+  --design-editor-accent-contrast-color: #ffffff;
+  --design-editor-measure-color: hsl(344 100% 63%);
+  --design-editor-panel-bg: hsl(220 5% 13%);
+  --design-editor-panel-raised-bg: hsl(220 4% 18%);
+  --design-editor-control-bg: hsl(220 4% 18%);
+  --design-editor-control-border: hsl(220 4% 24%);
+  --design-editor-canvas-bg: hsl(220 6% 6%);
 }
 
 @layer base {
@@ -90,3 +126,85 @@
 ::-webkit-scrollbar-thumb:hover {
   background: hsl(var(--muted-foreground) / 0.4);
 }
+
+.design-inspector-scroll {
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--border)) transparent;
+}
+
+.design-inspector-scroll::-webkit-scrollbar {
+  width: 5px;
+}
+
+.design-inspector-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.design-inspector-scroll::-webkit-scrollbar-thumb {
+  background: hsl(var(--border));
+  border-radius: 3px;
+}
+
+.design-inspector-scroll::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.4);
+}
+
+/* Design has a dense editor surface, so its side chrome needs more contrast
+   than the shared shell defaults and a real divider in addition to shadow. */
+.agent-layout-shell,
+.agent-sidebar-shell {
+  --design-shell-chrome-bg: hsl(220 9% 93%);
+  --design-shell-divider: hsl(220 9% 79%);
+  --agent-native-lower-surface: var(--design-shell-chrome-bg);
+  --agent-native-raised-border: var(--design-shell-divider);
+  --agent-native-raised-shadow-left: -1px 0 0 var(--design-shell-divider);
+  --agent-native-raised-shadow-right: 1px 0 0 var(--design-shell-divider);
+}
+
+.dark .agent-layout-shell,
+.dark .agent-sidebar-shell,
+.dark.agent-layout-shell,
+.dark.agent-sidebar-shell {
+  --design-shell-chrome-bg: hsl(220 5% 9%);
+  --design-shell-divider: hsl(220 4% 20%);
+  --agent-native-lower-surface: var(--design-shell-chrome-bg);
+  --agent-native-raised-border: var(--design-shell-divider);
+}
+
+.agent-layout-shell .agent-layout-left-drawer,
+.agent-layout-shell
+  .agent-layout-left-drawer
+  > :where(.border-e, .border-r):first-child {
+  border-inline-end-color: var(--design-shell-divider) !important;
+  border-right-color: var(--design-shell-divider) !important;
+}
+
+.agent-sidebar-main-surface[data-agent-sidebar-main-state="open"][data-agent-sidebar-main-position="right"] {
+  border-inline-end: 1px solid var(--design-shell-divider);
+}
+
+.agent-sidebar-main-surface[data-agent-sidebar-main-state="open"][data-agent-sidebar-main-position="left"] {
+  border-inline-start: 1px solid var(--design-shell-divider);
+}
+
+.agent-sidebar-panel[data-agent-sidebar-layout="desktop"],
+.agent-sidebar-panel[data-agent-sidebar-layout="mobile"],
+.agent-sidebar-panel > .agent-sidebar-panel-inner {
+  background: var(--design-shell-chrome-bg);
+}
+
+.design-editor-app-menu-content {
+  border: 1.5px solid var(--design-editor-control-border);
+  box-shadow: 0 10px 24px rgb(0 0 0 / 0.12);
+  animation: none !important;
+}
+
+.design-editor-app-menu-content[data-state="open"],
+.design-editor-app-menu-content[data-state="closed"] {
+  animation: none !important;
+}
+
+.dark .design-editor-app-menu-content {
+  box-shadow: 0 12px 28px rgb(0 0 0 / 0.34);
+}

package/corpus/templates/design/app/hooks/use-agent-generating.ts

@@ -18,6 +18,7 @@ interface UseAgentGeneratingOptions {
   /** When chat starts on a tab we did not open, adopt it if this returns true. */
   shouldAdoptRunningTab?: () => boolean;
   onAdoptRunningTab?: (tabId: string) => void;
+  onRunning?: (tabId: string | null) => void;
 }
 
 /**
@@ -87,6 +88,7 @@ export function useAgentGenerating(options: UseAgentGeneratingOptions = {}) {
           if (eventTabId && callbacksRef.current.shouldAdoptRunningTab?.()) {
             activeTabIdRef.current = eventTabId;
             callbacksRef.current.onAdoptRunningTab?.(eventTabId);
+            callbacksRef.current.onRunning?.(eventTabId);
             setGenerating(true);
             startGenerationTimeout(eventTabId);
             return;
@@ -112,6 +114,7 @@ export function useAgentGenerating(options: UseAgentGeneratingOptions = {}) {
           return;
         }
         clearStopDebounce();
+        callbacksRef.current.onRunning?.(activeTabIdRef.current);
         setGenerating(true);
         startGenerationTimeout(activeTabIdRef.current);
       }
@@ -138,6 +141,7 @@ export function useAgentGenerating(options: UseAgentGeneratingOptions = {}) {
         message,
         context,
         submit: options?.submit ?? true,
+        newTab: options?.newTab ?? true,
       });
       track(tabId);
       return tabId;

package/corpus/templates/design/app/hooks/use-navigation-state.ts

@@ -1,29 +1,144 @@
-import { useAgentRouteState, getBrowserTabId } from "@agent-native/core/client";
+import {
+  useAgentRouteState,
+  getBrowserTabId,
+  setClientAppState,
+} from "@agent-native/core/client";
 import { useParams } from "react-router";
 
 export interface NavigationState {
   view: string;
   designId?: string;
   designSystemId?: string;
+  editorView?: "single" | "overview";
+  inspectorTab?: "design" | "tweaks" | "extensions";
+  inspector?: "design" | "tweaks" | "extensions";
+  fileId?: string;
+  screenId?: string;
+  filename?: string;
+  screen?: string;
+  zoom?: number;
   path?: string;
 }
 
+export interface DesignEditorCommand {
+  designId: string;
+  editorView?: "single" | "overview";
+  viewMode?: "single" | "overview";
+  inspectorTab?: "design" | "tweaks" | "extensions";
+  inspector?: "design" | "tweaks" | "extensions";
+  fileId?: string;
+  screenId?: string;
+  filename?: string;
+  screen?: string;
+  zoom?: number;
+  tool?: string;
+  path?: string;
+  issuedAt: number;
+}
+
+const FOCUSED_SCREEN_ZOOM = 100;
+
+export function designEditorCommandKey(browserTabId?: string): string {
+  return browserTabId
+    ? `design-editor-command:${browserTabId}`
+    : "design-editor-command";
+}
+
+export function designEditorCommandKeysForTab(browserTabId?: string): string[] {
+  return [designEditorCommandKey(browserTabId)];
+}
+
+function normalizeEditorView(
+  value: unknown,
+): "single" | "overview" | undefined {
+  return value === "single" || value === "overview" ? value : undefined;
+}
+
+function normalizeInspectorTab(
+  value: unknown,
+): "design" | "tweaks" | "extensions" | undefined {
+  return value === "design" || value === "tweaks" || value === "extensions"
+    ? value
+    : undefined;
+}
+
+export function editorPathFromCommand(cmd: NavigationState): string | null {
+  if (cmd.path) return cmd.path;
+  if (cmd.view !== "editor" || !cmd.designId) return null;
+
+  const params = new URLSearchParams();
+  const editorView = normalizeEditorView(cmd.editorView);
+  if (editorView) params.set("view", editorView);
+  const inspectorTab = normalizeInspectorTab(cmd.inspectorTab ?? cmd.inspector);
+  if (inspectorTab) params.set("inspector", inspectorTab);
+  const screen = cmd.fileId ?? cmd.screenId ?? cmd.filename ?? cmd.screen;
+  if (screen) params.set("screen", screen);
+  if (typeof cmd.zoom === "number" && Number.isFinite(cmd.zoom)) {
+    params.set("zoom", String(cmd.zoom));
+  } else if (editorView === "single") {
+    params.set("zoom", String(FOCUSED_SCREEN_ZOOM));
+  }
+
+  const query = params.toString();
+  return `/design/${encodeURIComponent(cmd.designId)}${query ? `?${query}` : ""}`;
+}
+
+export function editorCommandFromNavigate(
+  cmd: NavigationState,
+  path: string,
+): DesignEditorCommand | null {
+  if (cmd.view !== "editor" || !cmd.designId) return null;
+  const editorView = normalizeEditorView(cmd.editorView);
+  const inspectorTab = normalizeInspectorTab(cmd.inspectorTab ?? cmd.inspector);
+  const command: DesignEditorCommand = {
+    designId: cmd.designId,
+    issuedAt: Date.now(),
+    path,
+  };
+  if (editorView) command.editorView = editorView;
+  if (inspectorTab) command.inspectorTab = inspectorTab;
+  if (cmd.fileId) command.fileId = cmd.fileId;
+  if (cmd.screenId) command.screenId = cmd.screenId;
+  if (cmd.filename) command.filename = cmd.filename;
+  if (cmd.screen) command.screen = cmd.screen;
+  if (typeof cmd.zoom === "number" && Number.isFinite(cmd.zoom)) {
+    command.zoom = cmd.zoom;
+  } else if (editorView === "single") {
+    command.zoom = FOCUSED_SCREEN_ZOOM;
+  }
+  return command;
+}
+
 export function useNavigationState() {
   const params = useParams();
+  const browserTabId = getBrowserTabId();
 
   useAgentRouteState<NavigationState>({
-    browserTabId: getBrowserTabId(),
+    browserTabId,
     getNavigationState: ({ pathname, search }) => {
       const state: NavigationState = { view: "list" };
+      const searchParams = new URLSearchParams(search);
 
       if (pathname.startsWith("/design/")) {
         state.view = "editor";
         state.designId = params.id;
+        const editorView = normalizeEditorView(searchParams.get("view"));
+        if (editorView) state.editorView = editorView;
+        const inspectorTab = normalizeInspectorTab(
+          searchParams.get("inspector"),
+        );
+        if (inspectorTab) state.inspectorTab = inspectorTab;
+        const screen = searchParams.get("screen");
+        if (screen) state.screen = screen;
+        const fileId = searchParams.get("fileId");
+        if (fileId) state.fileId = fileId;
+        const filename = searchParams.get("filename");
+        if (filename) state.filename = filename;
+        const zoom = Number(searchParams.get("zoom"));
+        if (Number.isFinite(zoom)) state.zoom = zoom;
       } else if (pathname.startsWith("/design-systems")) {
         state.view = "design-systems";
-        const designSystemId = new URLSearchParams(search).get(
-          "designSystemId",
-        );
+        const designSystemId = searchParams.get("designSystemId");
         if (designSystemId) state.designSystemId = designSystemId;
       } else if (pathname.startsWith("/present/")) {
         state.view = "present";
@@ -40,9 +155,8 @@ export function useNavigationState() {
       return state;
     },
     getCommandPath: (cmd) => {
-      if (cmd.path) return cmd.path;
-      if (cmd.view === "editor" && cmd.designId)
-        return `/design/${cmd.designId}`;
+      const editorPath = editorPathFromCommand(cmd);
+      if (editorPath) return editorPath;
       if (cmd.view === "design-systems") {
         return cmd.designSystemId
           ? `/design-systems?designSystemId=${encodeURIComponent(cmd.designSystemId)}`
@@ -55,5 +169,13 @@ export function useNavigationState() {
       if (cmd.view === "settings") return "/settings";
       return "/";
     },
+    onNavigate: (cmd, path) => {
+      const command = editorCommandFromNavigate(cmd, path);
+      if (!command) return;
+      const keys = designEditorCommandKeysForTab(browserTabId);
+      for (const key of keys) {
+        setClientAppState(key, command).catch(() => {});
+      }
+    },
   });
 }