@agent-native/core 0.100.2 → 0.101.3

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

@@ -1,8 +1,10 @@
 import { usePinchZoom, useT } from "@agent-native/core/client";
+import type { ReviewThread } from "@agent-native/core/client";
 import {
   injectSessionReplayIframeBootstrap,
   SESSION_REPLAY_IFRAME_ATTRIBUTE,
 } from "@agent-native/core/client";
+import type { ReviewComment } from "@agent-native/core/review";
 import {
   DEFAULT_CANVAS_MAX_ZOOM,
   DEFAULT_CANVAS_MIN_ZOOM,
@@ -23,7 +25,14 @@ import {
   type PenPoint,
 } from "@shared/pen-path";
 import { IconPlugConnectedX, IconRefresh } from "@tabler/icons-react";
-import { useRef, useEffect, useCallback, useMemo, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
@@ -33,8 +42,8 @@ import { Button } from "@/components/ui/button";
 // exist for now and can be reconciled in a follow-up. Don't import both.
 import {
   DrawOverlay as SharedDrawOverlay,
-  CanvasCommentPins,
-  type CanvasPin,
+  ReviewCanvasPins,
+  type ReviewFocusRequest,
 } from "@/components/visual-editor";
 import { sendToDesignAgentChatAndConfirm } from "@/lib/agent-chat";
 import {
@@ -503,9 +512,9 @@ interface DesignCanvasProps {
   pinMode?: boolean;
   /**
    * When true, suppresses rendering of comment pins on this canvas (e.g. the
-   * Figma-style Shift+C "hide comments" toggle in single-screen mode). Only
-   * affects pin *visibility* — pin drop mode (`pinMode`) still behaves
-   * normally underneath so toggling this back off doesn't lose anything.
+   * Figma-style Shift+C "hide comments" toggle in single-screen mode). Hiding
+   * comments while pin mode is active also exits pin mode so an invisible
+   * click target cannot keep intercepting canvas interactions.
    */
   commentPinsHidden?: boolean;
   selectedSelector?: string | null;
@@ -521,6 +530,18 @@ interface DesignCanvasProps {
   onExitPinMode?: () => void;
   /** Stable id of the open design (used for pin scoping + agent prompt). */
   designId?: string;
+  /** Whether the current signed-in viewer may create review comments. */
+  reviewCanPost?: boolean;
+  /** Whether the current viewer may resolve review threads. */
+  reviewCanResolve?: boolean;
+  /** A panel-driven request to focus an anchored review comment. */
+  reviewFocusRequest?: ReviewFocusRequest | null;
+  /** Dispatch a newly created agent-targeted comment to the local agent chat. */
+  onDispatchCommentToAgent?: (comment: ReviewComment) => void;
+  /** Dispatch one existing review thread to the local agent chat. */
+  onSendThreadToAgent?: (thread: ReviewThread) => void;
+  /** Thread currently being routed to the agent. */
+  reviewSendingThreadId?: string | null;
   /** Human-readable label for the design (used in agent prompt). */
   designTitle?: string;
   /** Stable id for comment pins, usually scoped to the active screen. */
@@ -1022,11 +1043,16 @@ export function DesignCanvas({
   onExitPinMode,
   registerRuntimeBridge = true,
   designId,
+  reviewCanPost = false,
+  reviewCanResolve = false,
+  reviewFocusRequest,
+  onDispatchCommentToAgent,
+  onSendThreadToAgent,
+  reviewSendingThreadId,
   designTitle,
   commentContextId,
   screenId,
   previewFrameId,
-  commentContextLabel,
   onPrototypeNavigate,
   motionTracks,
   motionDefaultEase,
@@ -1050,6 +1076,7 @@ export function DesignCanvas({
     null,
   );
   const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const reviewCanvasId = useId();
   const zoomLayerRef = useRef<HTMLDivElement>(null);
   const zoomRef = useRef(zoom);
   // Zoom-invariant chrome: the non-embedded-frame render path below wraps the
@@ -1119,8 +1146,6 @@ export function DesignCanvas({
     return true;
   }, []);
   const [renderedContent, setRenderedContent] = useState(content);
-  const [annotationPins, setAnnotationPins] = useState<CanvasPin[]>([]);
-  const [pinSubmitSignal, setPinSubmitSignal] = useState(0);
   // True while a drawing send is capturing/compositing/uploading the
   // annotated screenshot (see design-canvas/annotation-snapshot.ts). Drives
   // SharedDrawOverlay's busy Send state so a slow capture can't be triggered
@@ -1919,14 +1944,6 @@ export function DesignCanvas({
     setExternalSnapshotRetryNonce((nonce) => nonce + 1);
   }, []);
 
-  const queuedAnnotationPins = useMemo(
-    () =>
-      annotationPins.filter(
-        (pin) => pin.queued && !pin.submitted && (pin.draft || "").trim(),
-      ),
-    [annotationPins],
-  );
-
   useEffect(() => {
     if (previousContentKeyRef.current !== contentKey) {
       previousContentKeyRef.current = contentKey;
@@ -4009,6 +4026,7 @@ export function DesignCanvas({
   // visible when a design background matches the editor canvas.
   const iframeElement = (
     <div
+      data-review-canvas-id={reviewCanvasId}
       className="design-canvas-iframe-wrapper relative inline-block ring-1 ring-border/60 shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_8px_24px_-12px_rgba(0,0,0,0.45)]"
       onDragEnter={handleWrapperDragEnter}
       onDragOver={handleWrapperDragOver}
@@ -4305,7 +4323,7 @@ export function DesignCanvas({
         scopeKey={screenId}
         retainSurfaceWhenHidden={retainDrawOverlayWhenHidden}
         canvasInteractive={!pinMode}
-        queuedAnnotationCount={queuedAnnotationPins.length}
+        queuedAnnotationCount={0}
         zoom={zoom}
         sending={annotationCaptureBusy}
         onClose={() => onExitDrawMode?.()}
@@ -4318,33 +4336,14 @@ export function DesignCanvas({
                 : `[label "${a.text}" at ${a.position.x.toFixed(0)},${a.position.y.toFixed(0)}]`,
             )
             .join("\n");
-          const pinSummary = queuedAnnotationPins
-            .flatMap((pin, index) => {
-              const lines = [
-                `[${index + 1}] Comment pin on ${commentContextLabel || designTitle || commentContextId || designId || "design"}`,
-                `Position: ${pin.xPct.toFixed(1)}% from left, ${pin.yPct.toFixed(1)}% from top`,
-              ];
-              if (pin.targetAnchorId)
-                lines.push(`Anchor id: ${pin.targetAnchorId}`);
-              if (pin.targetSelector)
-                lines.push(`Element: ${pin.targetSelector}`);
-              if (pin.targetText)
-                lines.push(`Nearby text: "${pin.targetText}"`);
-              lines.push("");
-              lines.push((pin.draft || "").trim());
-              return [...lines, ""];
-            })
-            .join("\n");
           const lines = [
             `[Annotations on design ${designId || ""}${designTitle ? ` (${designTitle})` : ""}]`,
             `Canvas size: ${canvasSize.width.toFixed(0)}x${canvasSize.height.toFixed(0)}`,
             ...(summary ? ["", "[Drawing]", summary] : []),
-            ...(pinSummary ? ["", "[Comment pins]", pinSummary] : []),
             "",
             instruction || "Apply these annotations to the design.",
           ];
           const message = lines.join("\n");
-          const hasQueuedPins = queuedAnnotationPins.length > 0;
 
           // Best-effort: render the annotated screen + composited drawing as
           // ONE image the agent can see (see design-canvas/annotation-snapshot.ts),
@@ -4368,7 +4367,7 @@ export function DesignCanvas({
             .then((imageUrl) =>
               submitDesignAnnotations({
                 message,
-                hasQueuedPins,
+                hasQueuedPins: false,
                 // Ack-confirmed send: only exit draw mode / mark pins
                 // submitted once the message is CONFIRMED to have reached
                 // the chat (became a visible turn). A fire-and-forget send
@@ -4389,9 +4388,7 @@ export function DesignCanvas({
                     );
                   }
                 },
-                markQueuedPinsSubmitted: () => {
-                  setPinSubmitSignal((signal) => signal + 1);
-                },
+                markQueuedPinsSubmitted: () => {},
                 exitDrawMode: () => onExitDrawMode?.(),
                 onError: (error) => {
                   console.error(
@@ -4536,27 +4533,23 @@ export function DesignCanvas({
         </div>
       )}
 
-      {/* Canvas comment pins — anchored to the iframe wrapper. The pins
-          themselves render via fixed positioning, so we mount them outside
-          the zoom-transformed container to keep coordinates stable.
-          Suppressed entirely when commentPinsHidden (Figma-style Shift+C
-          "hide comments" toggle) is set — existing pins disappear and pin
-          drop-mode has nothing to render into until it's toggled back on. */}
-      {!commentPinsHidden && (
-        <CanvasCommentPins
+      {designId && (screenId || commentContextId) ? (
+        <ReviewCanvasPins
           active={!!pinMode}
-          submitMode={drawMode ? "queue" : "direct"}
-          onPinsChange={setAnnotationPins}
-          submitQueuedSignal={pinSubmitSignal}
-          clickPlaneUnderToolbar={!!drawMode}
+          hidden={commentPinsHidden}
           onClose={() => onExitPinMode?.()}
-          canvasSelector=".design-canvas-iframe-wrapper"
-          contextId={commentContextId || designId || "design"}
-          contextLabel={
-            commentContextLabel || designTitle || commentContextId || designId
-          }
+          canvasSelector={`[data-review-canvas-id="${reviewCanvasId}"]`}
+          resourceType="design"
+          resourceId={designId}
+          targetId={screenId ?? commentContextId ?? ""}
+          canPost={reviewCanPost}
+          canResolve={reviewCanResolve}
+          focusRequest={reviewFocusRequest}
+          onDispatchCommentToAgent={onDispatchCommentToAgent}
+          onSendThreadToAgent={onSendThreadToAgent}
+          sendingThreadId={reviewSendingThreadId}
         />
-      )}
+      ) : null}
     </div>
   );
 }

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

@@ -480,9 +480,9 @@ interface AssetLibraryPanelProps {
    * overview canvas, over the board surface, or the editor is in
    * single-screen mode and the point is outside that screen's iframe).
    *
-   * When omitted (the default — no DesignEditor wiring yet), this panel
-   * falls back to EXACTLY today's behavior: it sends the raw viewport point
-   * as `x`/`y` with no `screenId`, which the action already handles safely
+   * When omitted by another host, this panel falls back to sending the raw
+   * viewport point as `x`/`y` with no `screenId`, which the action already
+   * handles safely
    * (a raw client point rarely lands inside a real screen's small content
    * bounds, and even when it coincidentally does, worst case is an
    * imprecisely-placed insert — never a crash or data loss; see
@@ -693,9 +693,9 @@ export function AssetLibraryPanel({
       // isUsableDropPosition for the exact "both x and y, non-negative"
       // usability contract a caller-supplied position must meet, and this
       // component's resolveScreenPoint prop doc above for how dropPosition
-      // gets its coordinate space (converted screen-content px when
-      // resolveScreenPoint is wired up by the DesignEditor owner, otherwise
-      // the raw viewport point as an inert-but-harmless fallback).
+      // gets its coordinate space (converted screen-content px when the host
+      // supplies resolveScreenPoint, otherwise the raw viewport point as an
+      // inert-but-harmless fallback).
       insertNativeAsset.mutate(
         {
           kind: asset.kind,
@@ -755,9 +755,9 @@ export function AssetLibraryPanel({
     if (!draggedNativeAsset) return;
     // Convert the viewport drop point into a specific screen's own
     // content-px coordinates via the optional resolveScreenPoint prop (see
-    // its doc comment above for the exact contract). Without that prop
-    // (no DesignEditor wiring yet), fall back to sending the raw viewport
-    // point with no screenId — the exact behavior this drop handler always
+    // its doc comment above for the exact contract). Without that prop, fall
+    // back to sending the raw viewport point with no screenId — the behavior
+    // this drop handler historically
     // had, and still safe: insert-design-native-asset's isUsableDropPosition
     // only requires non-negative finite numbers, so an unconverted point is
     // never rejected, just imprecise (see that action's fallback doc).
@@ -765,6 +765,10 @@ export function AssetLibraryPanel({
       clientX: event.clientX,
       clientY: event.clientY,
     });
+    if (resolveScreenPoint && !resolved) {
+      clearNativeAssetDrag();
+      return;
+    }
     handleInsertNativeAsset(
       draggedNativeAsset,
       resolved

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

@@ -28,6 +28,7 @@ import {
   type InteractionState,
 } from "@shared/interaction-states";
 import {
+  IconAdjustmentsHorizontal,
   IconAlignCenter,
   IconAlignJustified,
   IconAlignLeft,
@@ -73,6 +74,7 @@ import {
   IconLink,
   IconLinkOff,
   IconMinus,
+  IconMessageCircle,
   IconPerspective,
   IconPhoto,
   IconPlus,
@@ -336,6 +338,10 @@ import {
   GlslShaderEffectSection,
   type GlslShaderPanelContext,
 } from "./inspector/GlslShaderPanel";
+import {
+  ReviewCommentsPanel,
+  type ReviewCommentsPanelProps,
+} from "./ReviewCommentsPanel";
 import { ReviewPanel } from "./ReviewPanel";
 import type { ReviewPanelProps } from "./ReviewPanel";
 import type { StatesPanelProps } from "./StatesPanel";
@@ -393,7 +399,7 @@ export function mergeOptimisticInteractionStateStyles(
   return { ...(persisted ?? {}), ...(pending ?? {}) };
 }
 
-export type InspectorTab = "design" | "tweaks";
+export type InspectorTab = "design" | "tweaks" | "comments";
 
 interface EditPanelProps {
   selectedElement: ElementInfo | null;
@@ -456,6 +462,10 @@ interface EditPanelProps {
   statesPanelProps?: Omit<StatesPanelProps, "designId">;
   /** Props forwarded to the ReviewPanel (§6.5). */
   reviewPanelProps?: Omit<ReviewPanelProps, "className">;
+  /** Persisted design review comments and feedback queue. */
+  reviewCommentsPanelProps?: ReviewCommentsPanelProps;
+  /** Open review-thread count shown on the inspector tab. */
+  reviewCommentsCount?: number;
   // -------------------------------------------------------------------------
   // Component section (§6.1)
   // When a component instance is selected, pass its node id here to unlock
@@ -1091,31 +1101,82 @@ function InspectorTabsHeader({
   activeTab,
   onActiveTabChange,
   trailing,
+  commentsCount = 0,
+  compact = false,
 }: {
   activeTab: InspectorTab;
   onActiveTabChange: (tab: InspectorTab) => void;
   trailing?: ReactNode;
+  commentsCount?: number;
+  compact?: boolean;
 }) {
   const t = useT();
 
   return (
-    <div className="flex min-h-8 shrink-0 items-center justify-between gap-1 border-b border-border/90 px-2 py-1">
+    <div className="flex min-h-8 min-w-0 shrink-0 items-center justify-between gap-1 border-b border-border/90 px-2 py-1">
       <Tabs
         value={activeTab}
         onValueChange={(value) => onActiveTabChange(value as InspectorTab)}
+        className="min-w-0"
       >
-        <TabsList className="h-7 justify-start gap-0.5 rounded-none bg-transparent p-0">
+        <TabsList className="h-7 max-w-full justify-start gap-0.5 overflow-hidden rounded-none bg-transparent p-0">
           <TabsTrigger
             value="design"
-            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"
+            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",
+            )}
           >
-            {"Design" /* i18n-ignore design inspector tab */}
+            {compact ? (
+              <IconBrush className="size-3.5" />
+            ) : (
+              t("navigation.brand")
+            )}
+          </TabsTrigger>
+          <TabsTrigger
+            value="comments"
+            aria-label={
+              commentsCount > 0
+                ? 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",
+            )}
+          >
+            {compact ? (
+              <IconMessageCircle className="size-3.5" />
+            ) : (
+              <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]",
+                )}
+              >
+                {commentsCount > 99 ? "99+" : commentsCount}
+              </span>
+            ) : null}
           </TabsTrigger>
           <TabsTrigger
             value="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"
+            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",
+            )}
           >
-            {t("designEditor.tweaks")}
+            {compact ? (
+              <IconAdjustmentsHorizontal className="size-3.5" />
+            ) : (
+              t("designEditor.tweaks")
+            )}
           </TabsTrigger>
         </TabsList>
       </Tabs>
@@ -1367,6 +1428,8 @@ export const EditPanel = memo(function EditPanel({
   designId,
   onComponentPropApplied,
   reviewPanelProps,
+  reviewCommentsPanelProps,
+  reviewCommentsCount = 0,
   componentNodeId,
   componentSwapPickerRequest,
   sourceCapabilities = [],
@@ -1707,11 +1770,12 @@ export const EditPanel = memo(function EditPanel({
   const userScrollIntentRef = useRef(false);
   const scrollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // Figma replaces the entire right panel with the size-preset list while the
-  // Frame tool is armed — regardless of which inspector tab (Design/Tweaks)
-  // was showing beforehand — so this takes priority over `activeTab` below.
+  // 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 =
-    activeTool === "frame" && Boolean(onCreateScreenFromPreset);
+    activeTab === "design" &&
+    activeTool === "frame" &&
+    Boolean(onCreateScreenFromPreset);
 
   return (
     <TooltipProvider delayDuration={300} skipDelayDuration={400}>
@@ -1726,6 +1790,8 @@ export const EditPanel = memo(function EditPanel({
           activeTab={activeTab}
           onActiveTabChange={handleActiveTabChange}
           trailing={headerTrailing}
+          commentsCount={reviewCommentsCount}
+          compact={width < 280}
         />
 
         {showFramePresets ? (
@@ -2061,6 +2127,8 @@ export const EditPanel = memo(function EditPanel({
               />
             </div>
           </div>
+        ) : activeTab === "comments" && reviewCommentsPanelProps ? (
+          <ReviewCommentsPanel {...reviewCommentsPanelProps} />
         ) : null}
       </div>
     </TooltipProvider>

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

@@ -11,9 +11,9 @@ import {
   IconFrame,
   IconLayersSubtract,
   IconLayersUnion,
+  IconLayoutGrid,
   IconLock,
   IconLockOpen,
-  IconLayoutGrid,
   IconPencil,
   IconPlus,
   IconSearch,
@@ -30,8 +30,8 @@ import {
   useMemo,
   useRef,
   useState,
-  type KeyboardEvent,
   type DragEvent,
+  type KeyboardEvent,
   type MouseEvent,
   type ReactNode,
   type Ref,
@@ -2047,7 +2047,7 @@ const LayerRow = memo(function LayerRow({
           aria-expanded={hasChildren ? isExpanded : undefined}
           aria-level={depth + 1}
           aria-selected={selectable ? isSelected : undefined}
-          className="relative min-w-full"
+          className="relative w-max min-w-full"
           draggable={draggable}
           onDragStart={handleDragStart}
           onDragOver={handleDragOver}
@@ -2087,7 +2087,7 @@ const LayerRow = memo(function LayerRow({
           ) : null}
           <div
             className={cn(
-              "group flex h-8 min-w-full items-center gap-1 rounded-[5px] pr-1 text-[12px]",
+              "group flex h-7 w-max min-w-full items-center gap-1 rounded-[5px] pr-1 text-[12px] bg-[var(--design-editor-panel-bg)]",
               activeDrop === "inside" &&
                 "ring-1 ring-inset ring-[var(--design-editor-accent-color)]",
               isSelected &&
@@ -2233,67 +2233,80 @@ const LayerRow = memo(function LayerRow({
               ) : null}
             </button>
 
-            {lockable ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    className={cn(
-                      "size-5 shrink-0 rounded-sm p-0 text-muted-foreground opacity-0 hover:bg-transparent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
-                      node.locked && "opacity-100",
-                      isSelected && "text-foreground",
-                    )}
-                    aria-label={node.locked ? labels.unlock : labels.lock}
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      onToggleLocked?.(node.id, !node.locked);
-                    }}
-                  >
-                    {node.locked ? (
-                      <IconLock className="size-3" />
-                    ) : (
-                      <IconLockOpen className="size-3" />
-                    )}
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {node.locked ? labels.unlock : labels.lock}
-                </TooltipContent>
-              </Tooltip>
-            ) : null}
-
-            {hideable ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    className={cn(
-                      "size-5 shrink-0 rounded-sm p-0 text-muted-foreground opacity-0 hover:bg-transparent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
-                      node.hidden && "opacity-100",
-                      isSelected && "text-foreground",
-                    )}
-                    aria-label={node.hidden ? labels.show : labels.hide}
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      onToggleHidden?.(node.id, !node.hidden);
-                    }}
-                  >
-                    {node.hidden ? (
-                      <IconEyeOff className="size-3" />
-                    ) : (
-                      <IconEye className="size-3" />
-                    )}
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {node.hidden ? labels.show : labels.hide}
-                </TooltipContent>
-              </Tooltip>
-            ) : null}
+            {(lockable || hideable) && (
+              <div
+                className={cn(
+                  "sticky right-0 z-10 ml-auto flex shrink-0 items-center gap-1 bg-inherit",
+                  node.locked || node.hidden
+                    ? "w-auto overflow-visible pl-2 pr-1"
+                    : "w-0 overflow-hidden pl-0 pr-0 group-hover:w-auto group-hover:overflow-visible group-hover:pl-2 group-hover:pr-1 focus-within:w-auto focus-within:overflow-visible focus-within:pl-2 focus-within:pr-1",
+                )}
+              >
+                <div className="absolute inset-0 -z-20 bg-[var(--design-editor-panel-bg)]" />
+                <div className="absolute inset-0 -z-10 bg-inherit" />
+                {lockable ? (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className={cn(
+                          "size-5 shrink-0 rounded-sm p-0 text-muted-foreground opacity-0 hover:bg-transparent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
+                          node.locked && "opacity-100",
+                          isSelected && "text-foreground",
+                        )}
+                        aria-label={node.locked ? labels.unlock : labels.lock}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          onToggleLocked?.(node.id, !node.locked);
+                        }}
+                      >
+                        {node.locked ? (
+                          <IconLock className="size-3" />
+                        ) : (
+                          <IconLockOpen className="size-3" />
+                        )}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {node.locked ? labels.unlock : labels.lock}
+                    </TooltipContent>
+                  </Tooltip>
+                ) : null}
+
+                {hideable ? (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className={cn(
+                          "size-5 shrink-0 rounded-sm p-0 text-muted-foreground opacity-0 hover:bg-transparent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
+                          node.hidden && "opacity-100",
+                          isSelected && "text-foreground",
+                        )}
+                        aria-label={node.hidden ? labels.show : labels.hide}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          onToggleHidden?.(node.id, !node.hidden);
+                        }}
+                      >
+                        {node.hidden ? (
+                          <IconEyeOff className="size-3" />
+                        ) : (
+                          <IconEye className="size-3" />
+                        )}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {node.hidden ? labels.show : labels.hide}
+                    </TooltipContent>
+                  </Tooltip>
+                ) : null}
+              </div>
+            )}
           </div>
         </div>
       </ContextMenuTrigger>