@agent-native/core 0.163.4 → 0.164.1

package/corpus/templates/clips/app/routes/share.$shareId.tsx

@@ -1274,7 +1274,7 @@ export default function ShareRoute() {
               onReact={(emoji) => {
                 if (!session) {
                   requireSignIn("react");
-                  return;
+                  return false;
                 }
                 tracking.reportReaction(emoji);
                 const liveCt = isLoomEmbedBacked
@@ -1287,7 +1287,7 @@ export default function ShareRoute() {
                   liveCt < 1e7
                     ? Math.floor(liveCt * 1000)
                     : currentMs;
-                fetch(
+                return fetch(
                   agentNativePath("/_agent-native/actions/react-to-recording"),
                   {
                     method: "POST",
@@ -1303,7 +1303,11 @@ export default function ShareRoute() {
                     if (!res.ok) throw new Error(`react failed: ${res.status}`);
                     return dataQ.refetch();
                   })
-                  .catch((err) => console.warn("[clips] react failed", err));
+                  .then(() => true)
+                  .catch((err) => {
+                    console.warn("[clips] react failed", err);
+                    return false;
+                  });
               }}
               className="h-full w-full rounded-none sm:rounded-xl"
             />
@@ -1371,10 +1375,11 @@ export default function ShareRoute() {
                 ) : null}
                 {recording.enableReactions ? (
                   <ReactionsTray
+                    reactions={reactions}
                     onReact={(emoji) => {
                       if (!session) {
                         requireSignIn("react");
-                        return;
+                        return false;
                       }
                       tracking.reportReaction(emoji);
                       const liveCt = isLoomEmbedBacked
@@ -1387,7 +1392,7 @@ export default function ShareRoute() {
                         liveCt < 1e7
                           ? Math.floor(liveCt * 1000)
                           : currentMs;
-                      fetch(
+                      return fetch(
                         agentNativePath(
                           "/_agent-native/actions/react-to-recording",
                         ),
@@ -1406,9 +1411,11 @@ export default function ShareRoute() {
                             throw new Error(`react failed: ${res.status}`);
                           return dataQ.refetch();
                         })
-                        .catch((err) =>
-                          console.warn("[clips] react failed", err),
-                        );
+                        .then(() => true)
+                        .catch((err) => {
+                          console.warn("[clips] react failed", err);
+                          return false;
+                        });
                     }}
                   />
                 ) : null}

package/corpus/templates/clips/netlify.toml

@@ -16,6 +16,8 @@ AGENT_CHAT_DURABLE_BACKGROUND = "true"
 
 [context.production.environment]
 AGENT_NATIVE_HOSTED_HARNESS = "true"
+AGENT_NATIVE_ENABLE_KEEP_WARM = "1"
+AGENT_NATIVE_DISABLE_KEEP_WARM_BACKGROUND = "1"
 
 # Netlify Functions run on linux/x64 (AWS Lambda). This tells the deploy build
 # to bundle the matching ffmpeg-static binary into the server bundle so frame

package/corpus/templates/clips/server/routes/[...page].head.ts

@@ -16,6 +16,11 @@ export default defineEventHandler((event) => {
     return new Response(null, {
       status: 302,
       headers: {
+        // Keep this redirect on the same public SSR-cache path as the shell.
+        // Without a content type the deploy adapter cannot apply the canonical
+        // cache policy, so every visit to `/` reaches the origin before the
+        // already-cached `/library` shell can load.
+        "content-type": "text/html; charset=utf-8",
         location: "/library",
         "Permissions-Policy": MEDIA_CAPTURE_PERMISSIONS_POLICY,
       },

package/corpus/templates/content/netlify.toml

@@ -16,6 +16,8 @@ AGENT_CHAT_DURABLE_BACKGROUND = "true"
 
 [context.production.environment]
 AGENT_NATIVE_HOSTED_HARNESS = "true"
+AGENT_NATIVE_ENABLE_KEEP_WARM = "1"
+AGENT_NATIVE_DISABLE_KEEP_WARM_BACKGROUND = "1"
 
 # A2A delegation calls run a full agent loop (LLM + tool calls + DB queries).
 # The framework does not impose a default agent-run timeout; if a template sets

package/corpus/templates/design/.agents/skills/design-editor-architecture/SKILL.md

@@ -0,0 +1,103 @@
+---
+name: design-editor-architecture
+description: >-
+  Where design editor behavior lives and how to navigate DesignEditor.tsx. Use
+  before changing any editor behavior — undo/redo, paste, delete, duplicate,
+  style commit, layer move/rename, export, structure change — or before opening
+  `app/pages/DesignEditor.tsx`.
+scope: dev
+metadata:
+  internal: true
+---
+
+# Design Editor Architecture
+
+## The routing rule
+
+Editor **behavior** lives in `app/pages/design-editor/`, not in
+`app/pages/DesignEditor.tsx`.
+
+`DesignEditor.tsx` is ~20,900 lines and holds only three things: state
+declarations, the `useCallback` wrappers that gather arguments, and the JSX.
+Every wrapper delegates to a `run<Name>()` command module.
+
+**To change what an editor action does, edit the command module.** Opening
+`DesignEditor.tsx` to change behavior is almost always the wrong move — it will
+exhaust your context before you find the code.
+
+| Directory | Holds |
+| --- | --- |
+| `design-editor/commands/` | 86 one-per-action modules, each exporting `run<Name>(args, …)`. Start at `commands/README.md` |
+| `design-editor/effects/` | Subscription and autosave loops (collab text, motion autosave, agent selection mirroring) |
+| `design-editor/derive/` | Pure derivations (`overview-screens.ts`, `design-breakpoints.ts`) |
+| `design-editor/domains/` | Whole-domain hooks owning state + refs + effects + handlers together (`use-tweaks.ts`) |
+| `design-editor/*.ts` | Shared helpers: `history.ts`, `selection-state.ts`, `pending-edits.ts`, `editor-state.ts`, `editor-helpers.ts`, … |
+
+## Common task → file
+
+| Task | File |
+| --- | --- |
+| Undo / redo | `commands/undo.ts`, `commands/redo.ts` |
+| Paste | `commands/editor-paste.ts` routes; `commands/paste-selection.ts` and `commands/paste-over-selection.ts` do layers |
+| Copy | `commands/copy-selection.ts` |
+| Delete | `commands/delete-selection.ts` (layers), `commands/delete-files.ts` (screens) |
+| Duplicate | `commands/duplicate-selection.ts`, `commands/duplicate-screen.ts` |
+| Style commit | `commands/commit-visual-styles.ts` |
+| Inspector style edit | `commands/style-change.ts` (one property), `commands/styles-change.ts` (many) |
+| Structure change | `commands/visual-structure-change.ts`, `commands/screen-visual-structure-change.ts` |
+| Layer move / rename | `commands/layer-move.ts`, `commands/layer-move-to-screen.ts`, `commands/layer-rename.ts` |
+| Lock / hide a layer | `commands/toggle-layer-locked.ts`, `commands/toggle-layer-hidden.ts` |
+| Export | `commands/render-png-blob.ts`, `download-pdf.ts`, `download-svg.ts`, `copy-as-figma-svg.ts` |
+| Save / persistence | `commands/save-file-content.ts`, `commands/apply-file-content-update.ts` |
+| Breakpoints | `responsive-breakpoints` skill; `derive/design-breakpoints.ts` |
+
+A `screen-` prefix means the command is addressed by an explicit `screenId`
+(overview canvas or board). The unprefixed twin acts on the focused screen.
+
+Before adding a `domains/` hook, count what it would expose. Past roughly 16
+returned values the hook stops hiding anything and just relocates the wiring —
+measured surfaces for share/export (20), generation (18), and motion (48) are
+all why those still live inline. Also check no input it needs is declared after
+the point where its own outputs are first consumed; responsive-interact fails
+that test and cannot be extracted without changing when values are read.
+
+## Navigating DesignEditor.tsx when you must
+
+The file carries ~82 section banners. This prints a table of contents:
+
+```bash
+grep -n "──" app/pages/DesignEditor.tsx
+```
+
+Read one region with an offset and a limit instead of opening the file. Every
+section is under ~800 lines. Banners use `// ── Name ──` in the component body
+and `{/* ── Render: name ── */}` inside the JSX.
+
+When you add or move a region, add a banner for it.
+
+## Hard constraints
+
+**`DesignEditor.tsx` must keep exactly one runtime export — the default — and
+zero runtime named exports.** Type-only exports are fine. Both routes
+(`app/routes/design.$id.tsx`, `app/routes/visual-edit.$id.tsx`) import that
+default. A named export breaks React Fast Refresh for the whole editor.
+
+**The render-callback trio's dependency arrays are load-bearing.**
+`DesignEditor.routeRefreshBoundary.test.ts` parses the file with the TypeScript
+compiler and enforces:
+
+- `renderScreenContent` deps are exactly `[renderEditableScreenContent]`
+- `renderBreakpointContent` deps are exactly `[renderEditableScreenContent]`
+- `renderEditableScreenContent` deps include `activeBreakpointWidthState`,
+  `motionDefaultEase`, `motionDurationMs`, `inScreenGradientEditTarget`,
+  `handleInScreenGradientEditChange`, and `statePreviewTarget`
+
+That last one exists because cached overview canvases must invalidate on
+preview-only state changes. Dropping a name from it renders a stale canvas.
+
+**Many specs read source as text.** ~20 specs `readFileSync` either
+`DesignEditor.tsx` or a command module and slice it with `indexOf` markers, then
+assert on the source string. Moving code breaks them with a confusing failure.
+Re-point the path and the marker in the same commit that moves the code. Prefer
+asserting against the command module (`commandSource("undo.ts")`) over the
+editor file.

package/corpus/templates/design/.agents/skills/design-generation/SKILL.md

@@ -907,7 +907,8 @@ read `references/code-layers.md`. For the VS Code-style source workbench
   reserved for editor-internal state (selection chrome, editor-chrome scale
   compensation, clipboard/surface tokens) — the editor strips any property
   under those prefixes before persisting a cross-screen style capture
-  (`isEditorInternalCssVar` in `app/pages/DesignEditor.tsx`), so a design that
+  (`isEditorInternalCssVar` in `app/pages/design-editor/portable-style.ts`),
+  so a design that
   defines its own theming under that namespace would silently lose those
   values on a cross-screen move. Use `--color-*`, `--font-*`, or another
   design-owned prefix for tokens/tweaks instead.

package/corpus/templates/design/AGENTS.md

@@ -99,4 +99,6 @@ Read the relevant skill before deeper work in that area.
 ## Source Changes
 
 Before building common workspace or agent UI, read `agent-native-toolkit`; read
-`customizing-agent-native` before adapting shared UI.
+`customizing-agent-native` before adapting shared UI. Editor behavior lives in
+`app/pages/design-editor/commands/*.ts`, not `DesignEditor.tsx` — read
+`design-editor-architecture` before changing it.

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -1768,14 +1768,15 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
   // Editor-internal CSS custom-property prefixes — selection chrome colors,
   // editor-chrome scale compensation, framework clipboard/surface tokens.
   // These have no meaning outside this editor session and must never leak
-  // into persisted user HTML/exports. DesignEditor.tsx's
+  // into persisted user HTML/exports. design-editor/portable-style.ts's
   // applyPortableStyleSnapshotToHtml (isEditorInternalCssVar /
   // EDITOR_INTERNAL_CSS_VAR_PREFIXES) already filters them back out on the
   // apply side; filtering here too at COLLECTION time is pure bloat
   // reduction (skips carrying them across the postMessage boundary at all)
   // and changes no observable behavior on the apply side.
   //
-  // keep in sync with DesignEditor.tsx's EDITOR_INTERNAL_CSS_VAR_PREFIXES
+  // keep in sync with design-editor/portable-style.ts's
+  // EDITOR_INTERNAL_CSS_VAR_PREFIXES
   var EDITOR_INTERNAL_CSS_VAR_PREFIXES = [
     "--design-editor-",
     "--agent-native-editor-chrome-",

package/corpus/templates/design/app/components/design/editor/AgentNativeMenuMark.tsx

@@ -0,0 +1,25 @@
+export function AgentNativeMenuMark({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="-5 -5 145 88"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        d="M29.0771 77.8838H2.5L18.9 48.9L43.2 6.6C44 5.2 45.9 5.2 46.7 6.6L69.1 44.2C69.9 45.5 69 46.7305 67.5 46.7305H48.3C47.6 46.7305 46.9 47.1 46.6 47.7L30.8 76.9C30.45 77.5 29.8 77.8838 29.0771 77.8838Z"
+        stroke="currentColor"
+        strokeWidth="10.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M105.927 0H132.5C134 0 134.9 1.6 134.15 2.9L91.5 76.9C91.15 77.5 90.5 77.8853 89.8 77.8853H63.8C62.3 77.8853 61.4 76.3 62.15 75L104.2 1C104.55 0.38 105.2 0 105.927 0Z"
+        stroke="currentColor"
+        strokeWidth="10.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/corpus/templates/design/app/components/design/editor/DesignBottomToolbar.tsx

@@ -0,0 +1,411 @@
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  IconArrowUpRight,
+  IconBrush,
+  IconCircle,
+  IconDevices,
+  IconFrame,
+  IconHandClick,
+  IconHandStop,
+  IconLine,
+  IconMessage,
+  IconPhotoVideo,
+  IconPointer,
+  IconScale,
+  IconScribble,
+  IconSquare,
+  IconStar,
+  IconTransformPoint,
+  IconTriangle,
+} from "@tabler/icons-react";
+import type { ReactNode } from "react";
+
+import type { DesignToolbarOption } from "@/components/design/editor/toolbar-controls";
+import {
+  DesignModeTab,
+  DesignPenToolIcon,
+  DesignToolbarTool,
+} from "@/components/design/editor/toolbar-controls";
+import { IconText } from "@/components/design/inspector/design-icons";
+import {
+  MOVE_GROUP_TOOL_PRESENTATIONS,
+  getMoveGroupToolPresentation,
+} from "@/pages/design-editor/tool-state";
+import type {
+  DesignTool,
+  EditorMode,
+  ShapeTool,
+} from "@/pages/design-editor/types";
+
+export function DesignBottomToolbar({
+  mode,
+  pinMode,
+  drawMode,
+  activeTool,
+  isOverview,
+  hasActiveFile,
+  onMove,
+  onFrame,
+  frameToolDraws,
+  onFrameToolDrawsChange,
+  onShape,
+  onText,
+  onPen,
+  onHand,
+  onDraw,
+  onScale,
+  onCommentPin,
+  onModeChange,
+  shortcutsPanelOpen,
+}: {
+  mode: EditorMode;
+  pinMode: boolean;
+  drawMode: boolean;
+  activeTool: DesignTool;
+  isOverview: boolean;
+  hasActiveFile: boolean;
+  onMove: () => void;
+  onFrame: () => void;
+  frameToolDraws: "screen" | "frame";
+  onFrameToolDrawsChange: (value: "screen" | "frame") => void;
+  onShape: (tool: ShapeTool) => void;
+  onText: () => void;
+  onPen: () => void;
+  onHand: () => void;
+  onDraw: () => void;
+  onScale: () => void;
+  onCommentPin: () => void;
+  onModeChange: (mode: EditorMode) => void;
+  shortcutsPanelOpen: boolean;
+}) {
+  const t = useT();
+  const shapeTools = new Set<DesignTool>([
+    "rect",
+    "line",
+    "arrow",
+    "ellipse",
+    "polygon",
+    "star",
+  ]);
+  const activeShape = shapeTools.has(activeTool)
+    ? (activeTool as ShapeTool)
+    : "rect";
+  const shapeIcon = (tool: ShapeTool, className: string) => {
+    switch (tool) {
+      case "line":
+        return <IconLine className={className} />;
+      case "arrow":
+        return <IconArrowUpRight className={className} />;
+      case "ellipse":
+        return <IconCircle className={className} />;
+      case "polygon":
+        return <IconTriangle className={className} />;
+      case "star":
+        return <IconStar className={className} />;
+      case "rect":
+      default:
+        return <IconSquare className={className} />;
+    }
+  };
+  const shapeOptions: DesignToolbarOption[] = [
+    {
+      key: "rect",
+      label: t("designEditor.tools.rect"),
+      icon: shapeIcon("rect", "size-4"),
+      shortcut: "R",
+      active: activeTool === "rect",
+      onSelect: () => onShape("rect"),
+    },
+    {
+      key: "line",
+      label: t("designEditor.tools.line"),
+      icon: shapeIcon("line", "size-4"),
+      shortcut: "L",
+      active: activeTool === "line",
+      onSelect: () => onShape("line"),
+    },
+    {
+      key: "arrow",
+      label: t("designEditor.tools.arrow"),
+      icon: shapeIcon("arrow", "size-4"),
+      shortcut: "⇧L",
+      active: activeTool === "arrow",
+      onSelect: () => onShape("arrow"),
+    },
+    {
+      key: "ellipse",
+      label: t("designEditor.tools.ellipse"),
+      icon: shapeIcon("ellipse", "size-4"),
+      shortcut: "O",
+      active: activeTool === "ellipse",
+      onSelect: () => onShape("ellipse"),
+    },
+    {
+      key: "polygon",
+      label: t("designEditor.tools.polygon"),
+      icon: shapeIcon("polygon", "size-4"),
+      active: activeTool === "polygon",
+      onSelect: () => onShape("polygon"),
+    },
+    {
+      key: "star",
+      label: t("designEditor.tools.star"),
+      icon: shapeIcon("star", "size-4"),
+      active: activeTool === "star",
+      onSelect: () => onShape("star"),
+    },
+    {
+      key: "image-video",
+      label: t("designEditor.tools.imageVideo"),
+      icon: <IconPhotoVideo className="size-4" />,
+      disabled: true,
+      onSelect: () => {},
+    },
+  ];
+  const activeShapeOption =
+    shapeOptions.find((option) => option.key === activeShape) ??
+    shapeOptions[0]!;
+  const activeMoveGroupTool = getMoveGroupToolPresentation(activeTool);
+  const handleActiveMoveGroupTool =
+    activeMoveGroupTool.tool === "hand"
+      ? onHand
+      : activeMoveGroupTool.tool === "scale"
+        ? onScale
+        : onMove;
+  const tools: Array<{
+    key: string;
+    active: boolean;
+    label: string;
+    icon: ReactNode;
+    onClick: () => void;
+    options: DesignToolbarOption[];
+  }> = [
+    {
+      key: "move",
+      // Parent button is active whenever any of the move-group sub-tools is
+      // selected so the toolbar visually reflects hand and scale modes too.
+      active:
+        (activeTool === "move" && mode === "edit") ||
+        activeTool === "hand" ||
+        activeTool === "scale",
+      // The parent button represents the active move-group sub-tool. Expose
+      // that same identity to assistive technology and the tooltip instead of
+      // announcing every H/K activation as the Move tool.
+      label: t(activeMoveGroupTool.labelKey),
+      // Mirror the active sub-tool icon so the parent button is always
+      // informative about the currently selected move-group tool.
+      icon:
+        activeTool === "hand" ? (
+          <IconHandStop className="size-[18px]" />
+        ) : activeTool === "scale" ? (
+          <IconScale className="size-[18px]" />
+        ) : (
+          <IconPointer className="size-[18px]" />
+        ),
+      // Keep the primary action aligned with the icon/label it presents. A
+      // Hand or Scale button should remain Hand or Scale when clicked rather
+      // than silently switching back to Move.
+      onClick: handleActiveMoveGroupTool,
+      options: [
+        {
+          key: "move",
+          label: t("designEditor.tools.move"),
+          icon: <IconPointer className="size-4" />,
+          shortcut: MOVE_GROUP_TOOL_PRESENTATIONS.move.shortcut,
+          active: activeTool === "move" && mode === "edit",
+          onSelect: onMove,
+        },
+        {
+          key: "hand",
+          label: t("designEditor.tools.hand"),
+          icon: <IconHandStop className="size-4" />,
+          shortcut: MOVE_GROUP_TOOL_PRESENTATIONS.hand.shortcut,
+          active: activeTool === "hand",
+          onSelect: onHand,
+        },
+        {
+          key: "scale",
+          label: t("designEditor.tools.scale"),
+          icon: <IconScale className="size-4" />,
+          shortcut: MOVE_GROUP_TOOL_PRESENTATIONS.scale.shortcut,
+          active: activeTool === "scale",
+          onSelect: onScale,
+        },
+      ],
+    },
+    {
+      key: "frame",
+      active: activeTool === "frame",
+      label:
+        frameToolDraws === "screen"
+          ? t("designEditor.tools.screen")
+          : t("designEditor.tools.frame"),
+      icon:
+        frameToolDraws === "screen" ? (
+          <IconDevices className="size-[18px]" />
+        ) : (
+          <IconFrame className="size-[18px]" />
+        ),
+      onClick: onFrame,
+      options: [
+        {
+          key: "frame",
+          label: t("designEditor.tools.frame"),
+          icon: <IconFrame className="size-4" />,
+          shortcut: "F",
+          active: activeTool === "frame" && frameToolDraws === "frame",
+          onSelect: () => {
+            onFrameToolDrawsChange("frame");
+            onFrame();
+          },
+        },
+        {
+          key: "screen",
+          label: t("designEditor.tools.screen"),
+          icon: <IconDevices className="size-4" />,
+          active: activeTool === "frame" && frameToolDraws === "screen",
+          onSelect: () => {
+            onFrameToolDrawsChange("screen");
+            onFrame();
+          },
+        },
+      ],
+    },
+    {
+      key: "shape",
+      active: shapeTools.has(activeTool),
+      label: activeShapeOption.label,
+      icon: shapeIcon(activeShape, "size-[18px]"),
+      onClick: () => onShape(activeShape),
+      options: shapeOptions,
+    },
+    {
+      key: "pen",
+      active: activeTool === "pen",
+      label: t("designEditor.tools.pen"),
+      icon: <DesignPenToolIcon className="size-[18px]" />,
+      onClick: onPen,
+      options: [
+        {
+          key: "pen",
+          label: t("designEditor.tools.pen"),
+          icon: <DesignPenToolIcon className="size-4" />,
+          shortcut: "P",
+          active: activeTool === "pen",
+          onSelect: onPen,
+        },
+        {
+          key: "draw",
+          label: t("designEditor.modes.draw"),
+          icon: <IconBrush className="size-4" />,
+          shortcut: "Y",
+          active: activeTool === "draw" && mode === "annotate" && drawMode,
+          disabled: !hasActiveFile,
+          onSelect: onDraw,
+        },
+      ],
+    },
+    {
+      key: "text",
+      active: activeTool === "text",
+      label: t("designEditor.tools.text"),
+      icon: <IconText className="size-[18px]" />,
+      onClick: onText,
+      options: [
+        {
+          key: "text",
+          label: t("designEditor.tools.text"),
+          icon: <IconText className="size-4" />,
+          shortcut: "T",
+          active: activeTool === "text",
+          onSelect: onText,
+        },
+      ],
+    },
+    {
+      key: "comment",
+      active: activeTool === "comment" && mode === "annotate" && pinMode,
+      label: t("designEditor.pinComment"),
+      icon: <IconMessage className="size-[18px]" />,
+      onClick: onCommentPin,
+      options: [
+        {
+          key: "comment",
+          label: t("designEditor.pinComment"),
+          icon: <IconMessage className="size-4" />,
+          shortcut: "C",
+          active: activeTool === "comment" && mode === "annotate" && pinMode,
+          disabled: !hasActiveFile || isOverview,
+          onSelect: onCommentPin,
+        },
+      ],
+    },
+  ];
+
+  const modes: Array<{
+    key: EditorMode;
+    active: boolean;
+    label: string;
+    icon: ReactNode;
+    onClick: () => void;
+  }> = [
+    {
+      key: "annotate",
+      active: mode === "annotate",
+      label: t("designEditor.modes.annotate"),
+      icon: <IconScribble className="size-[18px]" />,
+      onClick: () => onModeChange("annotate"),
+    },
+    {
+      key: "edit",
+      active: mode === "edit",
+      label: t("designEditor.modes.edit"),
+      icon: <IconTransformPoint className="size-[18px]" />,
+      onClick: () => onModeChange("edit"),
+    },
+    {
+      key: "interact",
+      active: mode === "interact",
+      label: t("designEditor.modes.interact"),
+      icon: <IconHandClick className="size-[18px]" />,
+      onClick: () => onModeChange("interact"),
+    },
+  ];
+  return (
+    <div
+      data-design-bottom-toolbar
+      /* guard:allow-raw-color — fixed dark editor chrome, intentionally theme-independent */
+      className="fixed left-1/2 z-[70] flex max-w-[calc(100%-1rem)] -translate-x-1/2 items-center gap-1.5 overflow-x-auto rounded-xl border border-white/10 bg-[#2c2c2c]/95 p-1.5 text-neutral-100 shadow-[0_22px_55px_-24px_rgba(0,0,0,0.9),0_0_0_1px_rgba(0,0,0,0.25)] backdrop-blur transition-[bottom] duration-150 motion-reduce:transition-none md:max-w-[calc(100%-2rem)] md:overflow-visible"
+      style={{ bottom: shortcutsPanelOpen ? 257 : 16 }}
+    >
+      <div className="flex min-w-0 items-center gap-0.5">
+        {tools.map((tool) => (
+          <DesignToolbarTool
+            key={tool.key}
+            active={tool.active}
+            label={tool.label}
+            icon={tool.icon}
+            options={tool.options}
+            onPrimary={tool.onClick}
+          />
+        ))}
+      </div>
+
+      {/* guard:allow-raw-color — fixed dark editor chrome, intentionally theme-independent */}
+      <div className="h-9 w-px shrink-0 bg-white/15" />
+
+      {/* guard:allow-raw-color — fixed dark editor chrome, intentionally theme-independent */}
+      <div className="flex shrink-0 items-center gap-0.5 rounded-md bg-white/10 p-0.5">
+        {modes.map((item) => (
+          <DesignModeTab
+            key={item.key}
+            active={item.active}
+            label={item.label}
+            icon={item.icon}
+            onClick={item.onClick}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}