@agent-native/core 0.117.0 → 0.117.2

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

@@ -106,6 +106,7 @@ export type CanvasContextMenuAction =
   | "copy-as-code"
   | "copy-as-svg"
   | "copy-as-png"
+  | "rotate-clockwise"
   | "flip-horizontal"
   | "flip-vertical"
   | "toggle-ui"
@@ -176,6 +177,7 @@ export interface CanvasContextMenuLabels {
   copyAsCode: string;
   copyAsSvg: string;
   copyAsPng: string;
+  rotateClockwise: string;
   flipHorizontal: string;
   flipVertical: string;
   toggleUiShow: string;
@@ -219,6 +221,7 @@ export interface CanvasContextMenuShortcuts {
   copyAsCode: string;
   copyAsSvg: string;
   copyAsPng: string;
+  rotateClockwise: string;
   flipHorizontal: string;
   flipVertical: string;
   toggleUi: string;
@@ -296,6 +299,7 @@ export interface CanvasContextMenuProps {
   canCopyAsCode?: boolean;
   canCopyAsSvg?: boolean;
   canCopyAsPng?: boolean;
+  canRotateClockwise?: boolean;
   canFlipHorizontal?: boolean;
   canFlipVertical?: boolean;
   canToggleUi?: boolean;
@@ -356,6 +360,7 @@ export interface CanvasContextMenuProps {
   onCopyAsCode?: CanvasContextMenuActionHandler;
   onCopyAsSvg?: CanvasContextMenuActionHandler;
   onCopyAsPng?: CanvasContextMenuActionHandler;
+  onRotateClockwise?: CanvasContextMenuActionHandler;
   onFlipHorizontal?: CanvasContextMenuActionHandler;
   onFlipVertical?: CanvasContextMenuActionHandler;
   onToggleUi?: CanvasContextMenuActionHandler;
@@ -409,6 +414,7 @@ const DEFAULT_LABELS: CanvasContextMenuLabels = {
   copyAsCode: "Copy as code",
   copyAsSvg: "Copy as SVG",
   copyAsPng: "Copy as PNG",
+  rotateClockwise: "Rotate 90° clockwise",
   flipHorizontal: "Flip horizontal",
   flipVertical: "Flip vertical",
   toggleUiShow: "Show UI",
@@ -452,6 +458,7 @@ const DEFAULT_SHORTCUTS: CanvasContextMenuShortcuts = {
   copyAsCode: "",
   copyAsSvg: "",
   copyAsPng: "⇧⌘C",
+  rotateClockwise: "",
   flipHorizontal: "⇧H",
   flipVertical: "⇧V",
   toggleUi: "⌘\\",
@@ -464,7 +471,7 @@ type ActionCallbackMap = Partial<
 
 // design-editor menu chrome: compact, dark-border, subtle shadow, no animation jitter
 const MENU_CONTENT_CLASS =
-  "w-52 min-w-[200px] rounded-[6px] border border-[var(--design-editor-control-border)] bg-[var(--design-editor-panel-bg)] py-[3px] px-[3px] text-[12px] text-foreground shadow-[0_4px_16px_rgba(0,0,0,0.16),0_0_0_0.5px_rgba(0,0,0,0.08)] outline-none";
+  "w-52 min-w-[200px] rounded-[6px] border border-[var(--design-editor-control-border)] bg-[var(--design-editor-panel-bg)] py-[3px] px-[3px] text-[12px] text-foreground shadow-[0_4px_16px_rgba(0,0,0,0.16),0_0_0_0.5px_rgba(0,0,0,0.08)] outline-none data-[state=open]:!animate-none data-[state=closed]:!animate-none";
 // design row height ~28px, full-width highlight on hover, no icon gap waste
 const MENU_ITEM_CLASS =
   "flex h-7 cursor-default select-none items-center rounded-[4px] px-2 py-0 text-[12px] leading-none gap-0 focus:bg-[var(--design-editor-selection-color)] focus:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-35";
@@ -525,6 +532,7 @@ export const CanvasContextMenu = forwardRef<
     canCopyAsCode = selectedCount > 0,
     canCopyAsSvg = selectedCount > 0,
     canCopyAsPng = selectedCount > 0,
+    canRotateClockwise = false,
     canFlipHorizontal = selectedCount > 0,
     canFlipVertical = selectedCount > 0,
     canToggleUi = true,
@@ -565,6 +573,7 @@ export const CanvasContextMenu = forwardRef<
     onCopyAsCode,
     onCopyAsSvg,
     onCopyAsPng,
+    onRotateClockwise,
     onFlipHorizontal,
     onFlipVertical,
     onToggleUi,
@@ -650,6 +659,7 @@ export const CanvasContextMenu = forwardRef<
       "copy-as-code": onCopyAsCode,
       "copy-as-svg": onCopyAsSvg,
       "copy-as-png": onCopyAsPng,
+      "rotate-clockwise": onRotateClockwise,
       "flip-horizontal": onFlipHorizontal,
       "flip-vertical": onFlipVertical,
       "toggle-ui": onToggleUi,
@@ -665,6 +675,7 @@ export const CanvasContextMenu = forwardRef<
       onCopyAsCode,
       onCopyAsPng,
       onCopyAsSvg,
+      onRotateClockwise,
       onCopyProps,
       onCreateComponent,
       onReprompt,
@@ -1073,6 +1084,13 @@ export const CanvasContextMenu = forwardRef<
             <CanvasMenuSeparator />
 
             <ContextMenuGroup>
+              <CanvasMenuItem
+                hidden={isHiddenAction("rotate-clockwise")}
+                disabled={!canRun("rotate-clockwise", canRotateClockwise)}
+                label={labels.rotateClockwise}
+                shortcut={shortcuts.rotateClockwise}
+                onSelect={(event) => runAction("rotate-clockwise", event)}
+              />
               <CanvasMenuItem
                 hidden={isHiddenAction("flip-horizontal")}
                 disabled={!canRun("flip-horizontal", canFlipHorizontal)}

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

@@ -533,6 +533,8 @@ interface DesignCanvasProps {
   selectedSelector?: string | null;
   selectedSelectorCandidates?: string[];
   selectedSelectorGroups?: string[][];
+  /** Visual treatment for selection mirrors in responsive peer previews. */
+  passiveSelectionStyle?: "default" | "soft";
   hoveredSelector?: string | null;
   hoveredSelectorCandidates?: string[];
   lockedSelectors?: string[];
@@ -1058,6 +1060,7 @@ export function DesignCanvas({
   selectedSelector,
   selectedSelectorCandidates = [],
   selectedSelectorGroups = [],
+  passiveSelectionStyle = "default",
   hoveredSelector,
   hoveredSelectorCandidates = [],
   lockedSelectors = [],
@@ -2969,6 +2972,7 @@ export function DesignCanvas({
       {
         type: "select-elements",
         selectorGroups: selectedSelectorGroups,
+        passiveSelectionStyle,
       },
       "*",
     );
@@ -2978,8 +2982,14 @@ export function DesignCanvas({
             type: "hover-element",
             selector: hoveredSelector,
             selectorCandidates: hoveredSelectorCandidates,
+            hoverStyle: passiveSelectionStyle,
           }
-        : { type: "hover-element", selector: "", selectorCandidates: [] },
+        : {
+            type: "hover-element",
+            selector: "",
+            selectorCandidates: [],
+            hoverStyle: passiveSelectionStyle,
+          },
       "*",
     );
     // Re-send motion tracks so the preview bridge is ready after a reload.
@@ -3038,6 +3048,7 @@ export function DesignCanvas({
     selectedSelector,
     selectedSelectorCandidates,
     selectedSelectorGroups,
+    passiveSelectionStyle,
     shaderFillPreview,
     spacePanActive,
     statePreviewTarget,

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

@@ -28,7 +28,6 @@ import {
   type InteractionState,
 } from "@shared/interaction-states";
 import {
-  IconAdjustmentsHorizontal,
   IconAlignCenter,
   IconAlignJustified,
   IconAlignLeft,
@@ -44,7 +43,6 @@ import {
   IconBorderCorners,
   IconBorderRadius,
   IconBorderStyle,
-  IconBrush,
   IconCheck,
   IconChevronDown,
   IconChevronRight,
@@ -74,7 +72,6 @@ import {
   IconLink,
   IconLinkOff,
   IconMinus,
-  IconMessageCircle,
   IconPerspective,
   IconPhoto,
   IconPlus,
@@ -399,7 +396,7 @@ export function mergeOptimisticInteractionStateStyles(
   return { ...(persisted ?? {}), ...(pending ?? {}) };
 }
 
-export type InspectorTab = "design" | "tweaks" | "comments";
+export type InspectorTab = "design" | "tweaks" | "comments" | "code";
 
 interface EditPanelProps {
   selectedElement: ElementInfo | null;
@@ -409,6 +406,8 @@ interface EditPanelProps {
   zoom?: number;
   headerTrailing?: ReactNode;
   width?: number;
+  /** Viewer mode exposes inspection and comments, never editing controls. */
+  readOnly?: boolean;
   activeTab?: InspectorTab;
   onActiveTabChange?: (tab: InspectorTab) => void;
   tweaks?: TweakDefinition[];
@@ -933,6 +932,130 @@ function InspectCodePopover({ data }: { data: InspectCodeData }) {
   );
 }
 
+function CodeInspectPanel({
+  data,
+  element,
+  screen,
+}: {
+  data?: InspectCodeData;
+  element: ElementInfo | null;
+  screen: ScreenGeometrySelection | null | undefined;
+}) {
+  const [copied, setCopied] = useState(false);
+  const snippet = data
+    ? (elementHtmlPreview(data) ??
+      data.sourceLocation?.snippet ??
+      data.html?.trim() ??
+      null)
+    : null;
+  const bounds = element?.boundingRect ?? screen;
+  const measurements = bounds
+    ? [
+        ["X", bounds.x],
+        ["Y", bounds.y],
+        ["W", bounds.width],
+        ["H", bounds.height],
+      ]
+    : [];
+  const styles = element
+    ? [
+        ["Display", element.computedStyles.display],
+        ["Position", element.computedStyles.position],
+        ["Font", element.computedStyles.fontSize],
+        ["Color", element.computedStyles.color],
+      ].filter(([, value]) => value)
+    : [];
+
+  const handleCopy = () => {
+    if (!snippet) return;
+    void navigator.clipboard
+      ?.writeText(snippet)
+      .then(() => {
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1200);
+      })
+      .catch(() => {});
+  };
+
+  return (
+    <div className="design-inspector-scroll min-h-0 flex-1 overflow-y-auto overscroll-contain">
+      <div className="flex h-10 items-center justify-between gap-2 border-b border-border/90 px-3">
+        <div className="flex min-w-0 items-center gap-1.5">
+          <IconCode className="size-3.5 text-muted-foreground" />
+          <h3 className="truncate text-[13px] font-semibold text-foreground">
+            {"Code & measurements" /* i18n-ignore design inspector heading */}
+          </h3>
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-6 px-2 text-[10px]"
+          onClick={handleCopy}
+          disabled={!snippet}
+        >
+          {
+            copied
+              ? "Copied" /* i18n-ignore design inspector action */
+              : "Copy" /* i18n-ignore design inspector action */
+          }
+        </Button>
+      </div>
+
+      {measurements.length > 0 ? (
+        <PanelSection
+          title={"Measurements" /* i18n-ignore design inspector section */}
+        >
+          <div className="grid grid-cols-2 gap-2">
+            {measurements.map(([label, value]) => (
+              <div
+                key={label}
+                className="flex items-center justify-between rounded border border-border/70 bg-[var(--design-editor-control-bg)] px-2 py-1.5 text-[11px]"
+              >
+                <span className="text-muted-foreground">{label}</span>
+                <span className="font-mono text-foreground">
+                  {Math.round(Number(value))}px
+                </span>
+              </div>
+            ))}
+          </div>
+        </PanelSection>
+      ) : null}
+
+      {styles.length > 0 ? (
+        <PanelSection
+          title={"Computed styles" /* i18n-ignore design inspector section */}
+        >
+          <div className="space-y-1 text-[11px]">
+            {styles.map(([label, value]) => (
+              <div key={label} className="flex justify-between gap-3">
+                <span className="text-muted-foreground">{label}</span>
+                <span className="max-w-[65%] truncate font-mono text-foreground">
+                  {value}
+                </span>
+              </div>
+            ))}
+          </div>
+        </PanelSection>
+      ) : null}
+
+      <PanelSection title={"Code" /* i18n-ignore design inspector section */}>
+        {snippet ? (
+          <pre className="max-h-80 overflow-auto rounded bg-[var(--design-editor-control-bg)] p-2 font-mono text-[10px] leading-relaxed text-foreground">
+            <code>{highlightedHtml(snippet)}</code>
+          </pre>
+        ) : (
+          <p className="text-[11px] leading-4 text-muted-foreground">
+            {
+              "Select a layer to inspect its code and measurements." /* i18n-ignore design inspector empty */
+            }
+          </p>
+        )}
+      </PanelSection>
+    </div>
+  );
+}
+
 function elementTypeIcon(element: ElementInfo) {
   if (elementIsComponentSelection(element)) return IconComponents;
   const tag = normalizedElementTagName(element.tagName);
@@ -1099,16 +1222,16 @@ function ScreenGeometryProperties({
 
 function InspectorTabsHeader({
   activeTab,
+  readOnly,
   onActiveTabChange,
   trailing,
   commentsCount = 0,
-  compact = false,
 }: {
   activeTab: InspectorTab;
+  readOnly: boolean;
   onActiveTabChange: (tab: InspectorTab) => void;
   trailing?: ReactNode;
   commentsCount?: number;
-  compact?: boolean;
 }) {
   const t = useT();
 
@@ -1120,20 +1243,15 @@ function InspectorTabsHeader({
         className="min-w-0"
       >
         <TabsList className="h-7 max-w-full justify-start gap-0.5 overflow-hidden rounded-none bg-transparent p-0">
-          <TabsTrigger
-            value="design"
-            aria-label={t("navigation.brand")}
-            className={cn(
-              "h-6 rounded-md !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",
-              compact ? "w-7 px-0" : "px-1.5",
-            )}
-          >
-            {compact ? (
-              <IconBrush className="size-3.5" />
-            ) : (
-              t("navigation.brand")
-            )}
-          </TabsTrigger>
+          {!readOnly ? (
+            <TabsTrigger
+              value="design"
+              aria-label={t("navigation.brand")}
+              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"
+            >
+              {t("navigation.brand")}
+            </TabsTrigger>
+          ) : null}
           <TabsTrigger
             value="comments"
             aria-label={
@@ -1141,43 +1259,37 @@ function InspectorTabsHeader({
                 ? t("review.commentsTab", { count: commentsCount })
                 : t("review.comments")
             }
-            className={cn(
-              "group h-6 min-w-0 rounded-md !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",
-              compact ? "w-auto gap-0.5 px-1" : "gap-1 px-1.5",
-            )}
+            className="group h-6 min-w-0 rounded-md gap-1 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"
           >
-            {compact ? (
-              <IconMessageCircle className="size-3.5" />
-            ) : (
-              <span className="truncate">{t("review.comments")}</span>
-            )}
+            <span className="truncate">{t("review.comments")}</span>
             {commentsCount > 0 ? (
               <span
                 className={cn(
                   "flex shrink-0 items-center justify-center rounded-full bg-muted tabular-nums text-muted-foreground group-data-[state=active]:bg-background",
-                  compact
-                    ? "h-3.5 min-w-3.5 px-0.5 text-[8px]"
-                    : "h-4 min-w-4 px-1 text-[9px]",
+                  "h-4 min-w-4 px-1 text-[9px]",
                 )}
               >
                 {commentsCount > 99 ? "99+" : commentsCount}
               </span>
             ) : null}
           </TabsTrigger>
-          <TabsTrigger
-            value="tweaks"
-            aria-label={t("designEditor.tweaks")}
-            className={cn(
-              "h-6 rounded-md !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",
-              compact ? "w-7 px-0" : "px-1.5",
-            )}
-          >
-            {compact ? (
-              <IconAdjustmentsHorizontal className="size-3.5" />
-            ) : (
-              t("designEditor.tweaks")
-            )}
-          </TabsTrigger>
+          {!readOnly ? (
+            <TabsTrigger
+              value="tweaks"
+              aria-label={t("designEditor.tweaks")}
+              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"
+            >
+              {t("designEditor.tweaks")}
+            </TabsTrigger>
+          ) : (
+            <TabsTrigger
+              value="code"
+              aria-label={"Code" /* i18n-ignore design inspector tab */}
+              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"
+            >
+              {"Code" /* i18n-ignore design inspector tab */}
+            </TabsTrigger>
+          )}
         </TabsList>
       </Tabs>
       {trailing ? <div className="shrink-0">{trailing}</div> : null}
@@ -1410,6 +1522,7 @@ export const EditPanel = memo(function EditPanel({
   pageStyles = {},
   headerTrailing,
   width = 256,
+  readOnly = false,
   activeTab = "design",
   onActiveTabChange,
   tweaks = [],
@@ -1770,10 +1883,16 @@ export const EditPanel = memo(function EditPanel({
   const userScrollIntentRef = useRef(false);
   const scrollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  const resolvedActiveTab: InspectorTab =
+    readOnly && (activeTab === "design" || activeTab === "tweaks")
+      ? "code"
+      : activeTab;
+
   // Frame presets belong to the Design inspector. Keep Comments and Tweaks
   // visible when the Frame tool remains armed while another tab is active.
   const showFramePresets =
-    activeTab === "design" &&
+    !readOnly &&
+    resolvedActiveTab === "design" &&
     activeTool === "frame" &&
     Boolean(onCreateScreenFromPreset);
 
@@ -1787,18 +1906,18 @@ export const EditPanel = memo(function EditPanel({
         style={{ width }}
       >
         <InspectorTabsHeader
-          activeTab={activeTab}
+          activeTab={resolvedActiveTab}
+          readOnly={readOnly}
           onActiveTabChange={handleActiveTabChange}
           trailing={headerTrailing}
           commentsCount={reviewCommentsCount}
-          compact={width < 280}
         />
 
         {showFramePresets ? (
           <FramePresetsPanel
             onPick={(preset) => onCreateScreenFromPreset?.(preset)}
           />
-        ) : activeTab === "design" ? (
+        ) : resolvedActiveTab === "design" ? (
           <>
             <SelectionHeader
               element={inspectorElement}
@@ -2090,7 +2209,7 @@ export const EditPanel = memo(function EditPanel({
               ) : null}
             </div>
           </>
-        ) : activeTab === "tweaks" ? (
+        ) : resolvedActiveTab === "tweaks" ? (
           <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
             <div className="flex h-10 shrink-0 items-center justify-between gap-2 border-b border-border/90 px-3">
               <h3 className="min-w-0 flex-1 truncate text-[13px] font-semibold text-foreground">
@@ -2127,7 +2246,13 @@ export const EditPanel = memo(function EditPanel({
               />
             </div>
           </div>
-        ) : activeTab === "comments" && reviewCommentsPanelProps ? (
+        ) : resolvedActiveTab === "code" ? (
+          <CodeInspectPanel
+            data={inspectCode}
+            element={inspectorElement}
+            screen={selectedScreenGeometry}
+          />
+        ) : resolvedActiveTab === "comments" && reviewCommentsPanelProps ? (
           <ReviewCommentsPanel {...reviewCommentsPanelProps} />
         ) : null}
       </div>