@agent-native/core 0.84.57 → 0.84.58

package/corpus/templates/design/app/components/design/DesignImportPanel.tsx

@@ -10,25 +10,18 @@ import {
   IconUpload,
 } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
-import {
-  useCallback,
-  useRef,
-  useState,
-  type ClipboardEvent,
-  type ReactNode,
-} from "react";
+import { useCallback, useRef, useState, type ReactNode } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import { sendToDesignAgentChat } from "@/lib/agent-chat";
 import {
-  getFigmaClipboardContent,
   importResultSummary,
   looksLikeStandaloneHtml,
   VISUAL_EDIT_CONNECT_COMMAND,
+  VISUAL_EDIT_INSTALL_COMMAND,
   type ImportResult,
 } from "@/lib/design-import";
 import { cn } from "@/lib/utils";
@@ -107,49 +100,6 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
     [context.designId, finishImport, importSource, t],
   );
 
-  const handlePaste = useCallback(
-    (event: ClipboardEvent<HTMLDivElement>) => {
-      const html = event.clipboardData.getData("text/html");
-      const text = event.clipboardData.getData("text/plain");
-      const content = html || text;
-      if (!content) return;
-      const figmaContent = getFigmaClipboardContent(event.clipboardData);
-      if (figmaContent) {
-        event.preventDefault();
-        importSource.mutate(
-          {
-            designId: context.designId,
-            sourceType: "figma-paste-html",
-            content: figmaContent,
-            originalName: "figma-paste.html",
-          },
-          {
-            onSuccess: (result: unknown) => {
-              void finishImport(
-                result as ImportResult,
-                t("designEditor.import.figmaSuccess"),
-              );
-            },
-            onError: (error: unknown) => {
-              toast.error(t("designEditor.import.errors.figmaPasteFailed"), {
-                description:
-                  error instanceof Error
-                    ? error.message
-                    : t("common.genericError"),
-              });
-            },
-          },
-        );
-        return;
-      }
-      if (looksLikeStandaloneHtml(content)) {
-        event.preventDefault();
-        importHtmlString(content, "pasted-html.html");
-      }
-    },
-    [context.designId, finishImport, importHtmlString, importSource, t],
-  );
-
   const uploadFile = useCallback(
     async (file: File) => {
       setUploading(true);
@@ -210,46 +160,36 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
     [importHtmlString],
   );
 
-  const askVisualEdit = useCallback(() => {
-    sendToDesignAgentChat({
-      message:
-        "Use the visual-edit skill to connect my local app to this Design project. Run the app if needed, call `npx @agent-native/core@latest design connect`, then add URL-backed screens to this design.",
-    } as Parameters<typeof sendToDesignAgentChat>[0]);
-    toast.success(t("designEditor.import.visualEditSent"));
-  }, [t]);
-
-  const copyVisualEditCommand = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(VISUAL_EDIT_CONNECT_COMMAND);
-      toast.success(t("designEditor.copied"));
-    } catch {
-      toast.error(t("designEditor.toasts.clipboardBlocked"));
-    }
-  }, [t]);
+  const copyVisualEditCommand = useCallback(
+    async (command: string) => {
+      try {
+        await navigator.clipboard.writeText(command);
+        toast.success(t("designEditor.copied"));
+      } catch {
+        toast.error(t("designEditor.toasts.clipboardBlocked"));
+      }
+    },
+    [t],
+  );
 
   const busy = importSource.isPending || uploading;
 
   return (
     <div className="flex min-h-0 flex-1 flex-col bg-background">
-      <div className="flex h-14 shrink-0 items-center border-b border-border/60 px-3.5">
-        <div className="min-w-0">
-          <h3 className="truncate text-base font-semibold tracking-tight text-foreground">
-            {t("designEditor.import.title")}
-          </h3>
-          <p className="mt-0.5 truncate text-[11px] text-muted-foreground">
-            {"Bring source screens into this design" /* i18n-ignore */}
-          </p>
-        </div>
+      <div className="flex min-h-8 shrink-0 items-center border-b border-border/60 px-3">
+        <h3 className="min-w-0 flex-1 truncate text-xs font-semibold text-foreground">
+          {t("designEditor.import.title")}
+        </h3>
       </div>
 
-      <div className="design-inspector-scroll min-h-0 flex-1 overflow-y-auto overscroll-contain px-3.5 pb-4 pt-3">
+      <div className="design-inspector-scroll min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 pb-4 pt-3">
         <div className="space-y-0.5">
           <ImportSourceRow
             id="figma-paste-import"
             icon={<IconBrandFigma className="size-3.5" />}
             title={t("designEditor.import.figmaPasteTitle")}
             description={
-              "Copy a frame in Figma, then paste here." /* i18n-ignore */
+              "Copy a frame in Figma, then paste into the canvas." /* i18n-ignore */
             }
             isOpen={activeMode === "figma-paste"}
             onToggle={() =>
@@ -258,20 +198,13 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
               )
             }
           >
-            <div className="p-2">
-              <div
-                role="textbox"
-                tabIndex={0}
-                data-hotkeys-scope="text"
-                aria-label={t("designEditor.import.figmaPasteTarget")}
-                onPaste={handlePaste}
-                className={cn(
-                  "flex min-h-24 cursor-text items-center justify-center rounded-md border border-dashed border-border bg-muted/30 px-3 py-4 text-center text-xs text-muted-foreground outline-none transition-colors",
-                  "focus:border-primary/60 focus:bg-background focus:ring-2 focus:ring-primary/15",
-                )}
-              >
-                {t("designEditor.import.figmaPasteTarget")}
-              </div>
+            <div className="space-y-1.5 p-2 text-[11px] leading-snug text-muted-foreground">
+              <p>{t("designEditor.import.figmaPasteDescription")}</p>
+              <p>
+                {
+                  "Click the canvas first, then paste with the same shortcut you use for copied Design content." /* i18n-ignore */
+                }
+              </p>
             </div>
           </ImportSourceRow>
 
@@ -362,6 +295,46 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
               </div>
             </div>
           </ImportSourceRow>
+
+          <ImportSourceRow
+            id="local-app-import"
+            icon={<IconCode className="size-3.5" />}
+            title={t("designEditor.import.localTitle")}
+            description={t("designEditor.import.localDescription")}
+            isOpen={activeMode === "local-app"}
+            onToggle={() =>
+              setActiveMode((mode) =>
+                mode === "local-app" ? null : "local-app",
+              )
+            }
+          >
+            <div className="space-y-2 p-2">
+              <p className="text-[11px] leading-snug text-muted-foreground">
+                {t("designEditor.import.visualEditGuidance")}{" "}
+                <a
+                  href="/docs/template-design"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="font-medium text-foreground underline-offset-2 hover:underline"
+                >
+                  {"Read the visual-edit docs." /* i18n-ignore */}
+                </a>
+              </p>
+              <VisualEditCommandRow
+                command={VISUAL_EDIT_INSTALL_COMMAND}
+                onCopy={copyVisualEditCommand}
+              />
+              <VisualEditCommandRow
+                command={VISUAL_EDIT_CONNECT_COMMAND}
+                onCopy={copyVisualEditCommand}
+              />
+              <p className="text-[10px] leading-snug text-muted-foreground">
+                {
+                  "Replace <port> with the running app's local port." /* i18n-ignore */
+                }
+              </p>
+            </div>
+          </ImportSourceRow>
         </div>
 
         <div className="mt-4 border-t border-border/60 pt-3">
@@ -377,47 +350,6 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
               }
               badge={t("designEditor.import.comingSoon")}
             />
-            <ImportSourceRow
-              id="local-app-import"
-              icon={<IconCode className="size-3.5" />}
-              title={t("designEditor.import.localTitle")}
-              description={t("designEditor.import.localDescription")}
-              isOpen={activeMode === "local-app"}
-              onToggle={() =>
-                setActiveMode((mode) =>
-                  mode === "local-app" ? null : "local-app",
-                )
-              }
-            >
-              <div className="space-y-2 p-2">
-                <p className="text-[11px] leading-snug text-muted-foreground">
-                  {t("designEditor.import.visualEditGuidance")}
-                </p>
-                <div className="flex items-center gap-1.5 rounded-md border border-border/70 bg-muted/40 p-1.5">
-                  <code className="min-w-0 flex-1 truncate font-mono text-[10px] leading-5 text-foreground/80">
-                    {VISUAL_EDIT_CONNECT_COMMAND}
-                  </code>
-                  <Button
-                    type="button"
-                    size="sm"
-                    variant="ghost"
-                    className="h-6 shrink-0 px-1.5 text-[10px]"
-                    onClick={copyVisualEditCommand}
-                  >
-                    <IconCopy className="size-3" />
-                    {"Copy" /* i18n-ignore */}
-                  </Button>
-                </div>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  className="h-7 w-full justify-center text-[11px]"
-                  onClick={askVisualEdit}
-                >
-                  {t("designEditor.import.useVisualEditNow")}
-                </Button>
-              </div>
-            </ImportSourceRow>
           </div>
         </div>
 
@@ -441,6 +373,32 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
   );
 }
 
+function VisualEditCommandRow({
+  command,
+  onCopy,
+}: {
+  command: string;
+  onCopy: (command: string) => void;
+}) {
+  return (
+    <div className="flex items-center gap-1.5 rounded-md border border-border/70 bg-muted/40 p-1.5">
+      <code className="min-w-0 flex-1 truncate font-mono text-[10px] leading-5 text-foreground/80">
+        {command}
+      </code>
+      <Button
+        type="button"
+        size="sm"
+        variant="ghost"
+        aria-label={"Copy command" /* i18n-ignore */}
+        className="h-6 shrink-0 px-1.5 text-[10px]"
+        onClick={() => onCopy(command)}
+      >
+        <IconCopy className="size-3" />
+      </Button>
+    </div>
+  );
+}
+
 function ImportSourceRow({
   id,
   icon,

package/corpus/templates/design/app/components/design/EditPanel.tsx

@@ -138,7 +138,7 @@ import type { StatesPanelProps } from "./StatesPanel";
 import { TweaksPanelContent } from "./TweaksPanel";
 import type { ElementInfo } from "./types";
 
-export type InspectorTab = "design" | "tweaks" | "extensions";
+export type InspectorTab = "design" | "tweaks";
 
 const MIXED_VALUE = "Mixed";
 
@@ -206,6 +206,7 @@ function mixedElementFromSelection(
 interface EditPanelProps {
   selectedElement: ElementInfo | null;
   selectedElements?: ElementInfo[];
+  selectedScreenGeometry?: ScreenGeometrySelection | null;
   pageStyles?: Record<string, string>;
   zoom?: number;
   headerTrailing?: ReactNode;
@@ -216,7 +217,6 @@ interface EditPanelProps {
   tweakValues?: Record<string, string | number | boolean>;
   onTweakChange?: (id: string, value: string | number | boolean) => void;
   onRequestTweaks?: (anchor: HTMLElement) => void;
-  extensionsPanel?: ReactNode;
   onStyleChange: (property: string, value: string) => void;
   onStylesChange?: (styles: Record<string, string>) => void;
   onExport?: (settings: ExportSettingsValue[]) => void;
@@ -288,6 +288,15 @@ interface EditPanelProps {
   aiActions?: ReactNode;
 }
 
+export interface ScreenGeometrySelection {
+  id: string;
+  title: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
 /**
  * Data backing the "Inspect code" popover. The parent resolves the selected
  * node's HTML and (for real-app sources) its source file location.
@@ -2959,16 +2968,87 @@ function SelectionHeader({
   );
 }
 
+function ScreenSelectionHeader({
+  screen,
+}: {
+  screen: ScreenGeometrySelection;
+}) {
+  return (
+    <div className="flex min-h-8 shrink-0 items-center justify-between gap-2 border-b border-border/90 px-3">
+      <div className="flex min-w-0 items-center gap-1.5 text-left text-[13px] font-semibold text-foreground">
+        <IconFrame className="size-3.5 shrink-0 text-muted-foreground" />
+        <span className="truncate">{screen.title}</span>
+      </div>
+    </div>
+  );
+}
+
+function ScreenGeometryProperties({
+  screen,
+}: {
+  screen: ScreenGeometrySelection;
+}) {
+  const t = useT();
+  const noop = useCallback(() => {}, []);
+
+  return (
+    <PanelSection title={t("editPanel.sections.positionLayout")}>
+      <div className="space-y-1.5">
+        <SubsectionLabel>{t("editPanel.labels.position")}</SubsectionLabel>
+        <div className="grid grid-cols-2 gap-2">
+          <ScrubInput
+            label="X"
+            value={Math.round(screen.x)}
+            onChange={noop}
+            unit="px"
+            disabled
+            inputClassName="h-6"
+          />
+          <ScrubInput
+            label="Y"
+            value={Math.round(screen.y)}
+            onChange={noop}
+            unit="px"
+            disabled
+            inputClassName="h-6"
+          />
+        </div>
+      </div>
+      <div className="space-y-1.5">
+        <SubsectionLabel>
+          {"Size" /* i18n-ignore design inspector label */}
+        </SubsectionLabel>
+        <div className="grid grid-cols-2 gap-2">
+          <ScrubInput
+            label="W"
+            value={Math.round(screen.width)}
+            onChange={noop}
+            unit="px"
+            disabled
+            inputClassName="h-6"
+          />
+          <ScrubInput
+            label="H"
+            value={Math.round(screen.height)}
+            onChange={noop}
+            unit="px"
+            disabled
+            inputClassName="h-6"
+          />
+        </div>
+      </div>
+    </PanelSection>
+  );
+}
+
 function InspectorTabsHeader({
   activeTab,
   onActiveTabChange,
   trailing,
-  showExtensions,
 }: {
   activeTab: InspectorTab;
   onActiveTabChange: (tab: InspectorTab) => void;
   trailing?: ReactNode;
-  showExtensions?: boolean;
 }) {
   const t = useT();
 
@@ -2991,14 +3071,6 @@ function InspectorTabsHeader({
           >
             {t("designEditor.tweaks")}
           </TabsTrigger>
-          {showExtensions ? (
-            <TabsTrigger
-              value="extensions"
-              className="h-6 rounded-md px-1.5 !text-[11px] font-semibold text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:bg-[var(--design-editor-panel-raised-bg)] data-[state=active]:text-foreground data-[state=active]:shadow-none"
-            >
-              {"Extensions" /* i18n-ignore design inspector tab */}
-            </TabsTrigger>
-          ) : null}
         </TabsList>
       </Tabs>
       {trailing ? <div className="shrink-0">{trailing}</div> : null}
@@ -6859,6 +6931,7 @@ export function ComponentSection({
 export function EditPanel({
   selectedElement,
   selectedElements,
+  selectedScreenGeometry,
   pageStyles = {},
   headerTrailing,
   width = 256,
@@ -6868,7 +6941,6 @@ export function EditPanel({
   tweakValues = {},
   onTweakChange,
   onRequestTweaks,
-  extensionsPanel,
   onStyleChange,
   onStylesChange,
   onExport,
@@ -6978,7 +7050,6 @@ export function EditPanel({
         activeTab={activeTab}
         onActiveTabChange={handleActiveTabChange}
         trailing={headerTrailing}
-        showExtensions={!!extensionsPanel}
       />
 
       {activeTab === "design" ? (
@@ -6999,6 +7070,9 @@ export function EditPanel({
                 : undefined
             }
           />
+          {!inspectorElement && selectedScreenGeometry ? (
+            <ScreenSelectionHeader screen={selectedScreenGeometry} />
+          ) : null}
 
           <div
             className="design-inspector-scroll min-h-0 flex-1 overflow-y-auto overscroll-contain"
@@ -7093,7 +7167,11 @@ export function EditPanel({
               </div>
             ) : null}
 
-            {!inspectorElement && (
+            {!inspectorElement && selectedScreenGeometry ? (
+              <ScreenGeometryProperties screen={selectedScreenGeometry} />
+            ) : null}
+
+            {!inspectorElement && !selectedScreenGeometry && (
               <PageProperties
                 styles={pageStyles}
                 onStyleChange={onStyleChange}
@@ -7263,10 +7341,6 @@ export function EditPanel({
             />
           </div>
         </div>
-      ) : activeTab === "extensions" && extensionsPanel ? (
-        <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-          {extensionsPanel}
-        </div>
       ) : null}
     </div>
   );

package/corpus/templates/design/app/components/design/MultiScreenCanvas.tsx

@@ -409,10 +409,6 @@ const DRAG_THRESHOLD = 3;
 const FRAME_LABEL_HEIGHT = 28;
 const FRAME_HEADER_BUTTON_OUTSIDE_WIDTH = 260;
 const FRAME_HEADER_BUTTON_RESERVE = 116;
-const FRAME_HEADER_DIMENSIONS_WIDTH = 72;
-const FRAME_HEADER_TITLE_CHAR_WIDTH = 6.5;
-const FRAME_HEADER_MIN_TITLE_WIDTH = 28;
-const FRAME_HEADER_MAX_TITLE_WIDTH = 180;
 const TRANSFORM_BADGE_OFFSET = 12;
 const TRANSFORM_BADGE_EDGE_PADDING = 8;
 const TRANSFORM_BADGE_HEIGHT = 28;
@@ -433,7 +429,7 @@ const CHROME_OPACITY_TRANSITION = "opacity 150ms ease-out";
 const CHROME_BORDER_SETTLE_TRANSITION = `inset ${CHROME_SETTLE_MS}ms ease-out, border-width ${CHROME_SETTLE_MS}ms ease-out, border-radius ${CHROME_SETTLE_MS}ms ease-out, ${CHROME_OPACITY_TRANSITION}`;
 const SELECTION_BOX_SETTLE_TRANSITION = `border-width ${CHROME_SETTLE_MS}ms ease-out, border-radius ${CHROME_SETTLE_MS}ms ease-out, ${CHROME_OPACITY_TRANSITION}`;
 const CHROME_HANDLE_SETTLE_TRANSITION = `width ${CHROME_SETTLE_MS}ms ease-out, height ${CHROME_SETTLE_MS}ms ease-out, border-width ${CHROME_SETTLE_MS}ms ease-out, top ${CHROME_SETTLE_MS}ms ease-out, bottom ${CHROME_SETTLE_MS}ms ease-out, left ${CHROME_SETTLE_MS}ms ease-out, right ${CHROME_SETTLE_MS}ms ease-out, ${CHROME_OPACITY_TRANSITION}`;
-// Frame header (name + dimensions + "Full view" button) is counter-scaled via
+// Frame header (name + "Full view" button) is counter-scaled via
 // transform to stay a fixed screen size; ease that scale on zoom-settle. opacity
 // is included so the button's hover-fade (transition-opacity) keeps working.
 const CHROME_LABEL_SETTLE_TRANSITION = `transform ${CHROME_SETTLE_MS}ms ease-out, ${CHROME_OPACITY_TRANSITION}`;
@@ -474,6 +470,14 @@ export function shouldBoardSurfaceCapturePointerEvents(args: {
   );
 }
 
+export function shouldShowFrameFullViewButton(args: {
+  emphasized: boolean;
+  showFullView?: boolean;
+  childHoverActive?: boolean;
+}) {
+  return args.emphasized || !!args.showFullView || !!args.childHoverActive;
+}
+
 export function getBoardSurfaceLayerStyle(args: {
   geometry: FrameGeometry;
   interactive: boolean;
@@ -5676,10 +5680,16 @@ const Screen = memo(function Screen({
     (directlyHovered || isDirectlyHovered) &&
     !creationToolActive &&
     !canvasGestureActive;
+  const childHoverActive =
+    hasHoveredChild && !creationToolActive && !canvasGestureActive;
   const suppressFrameChromeForChild =
     hasHoveredChild && !directlyHovered && !isDirectlyHovered;
   const emphasized = isSelected || frameDirectlyHovered;
-  const fullViewVisible = emphasized || showFullView;
+  const fullViewVisible = shouldShowFrameFullViewButton({
+    emphasized,
+    showFullView,
+    childHoverActive,
+  });
   const activeOrEmphasized = isActive || emphasized;
   const selectionOutlined = isSelected && !groupSelected;
   const showHoverChrome =
@@ -5712,16 +5722,6 @@ const Screen = memo(function Screen({
     64,
     frameScreenWidth - (fullViewOutsideFrame ? 8 : FRAME_HEADER_BUTTON_RESERVE),
   );
-  const estimatedTitleWidth = clamp(
-    display.length * FRAME_HEADER_TITLE_CHAR_WIDTH,
-    FRAME_HEADER_MIN_TITLE_WIDTH,
-    FRAME_HEADER_MAX_TITLE_WIDTH,
-  );
-  const showDimensions =
-    frameScreenWidth >=
-    estimatedTitleWidth +
-      FRAME_HEADER_DIMENSIONS_WIDTH +
-      (fullViewOutsideFrame ? 16 : FRAME_HEADER_BUTTON_RESERVE);
   const fullViewMaxWidth = fullViewOutsideFrame
     ? 120
     : Math.max(84, Math.min(180, frameScreenWidth * 0.46));
@@ -5806,14 +5806,6 @@ const Screen = memo(function Screen({
           >
             {display}
           </span>
-          {showDimensions ? (
-            <span
-              data-frame-dimensions
-              className="hidden shrink-0 text-[10px] tabular-nums text-muted-foreground/70 sm:inline"
-            >
-              {previewViewport.displayWidth} x {previewViewport.displayHeight}
-            </span>
-          ) : null}
         </div>
         <button
           type="button"
@@ -6551,12 +6543,12 @@ interface BoundsRect {
   bottom: number;
 }
 
-interface ScreenViewportSize {
+export interface ScreenViewportSize {
   width: number;
   height: number;
 }
 
-function getInitialFrameGeometry(
+export function getInitialFrameGeometry(
   index: number,
   metadata?: ScreenViewportSize,
 ): FrameGeometry {