@drawnagency/primitives 0.1.90 → 0.1.91

package/dist/components/chat/ChatPanel.d.ts

@@ -3,9 +3,9 @@ export interface ChatMessage {
     content: string;
 }
 /** How the conversation is framed on screen:
- *  - "floating": the compact anchored panel (/edit FAB + settings test chat)
- *  - "docked":   full-height right sidebar (viewer, >=768px)
- *  - "sheet":    bottom sheet (viewer, phones) */
+ *  - "floating": the compact anchored panel (settings test chat only)
+ *  - "docked":   full-height right sidebar (viewer + /edit, >=768px)
+ *  - "sheet":    bottom sheet (viewer + /edit, phones) */
 export type ChatPanelMode = "floating" | "docked" | "sheet";
 /** Assistant markdown → sanitized HTML. Callers MUST gate on the sanitizer
  *  having loaded (`mdReady`) — before then sanitizeHtml passes raw HTML
@@ -26,8 +26,15 @@ export declare function streamChat(body: {
     error: string;
     retryAfterMs?: number;
 }>;
-export default function ChatPanel({ open, onClose, siteName, botName, thinkingPhrases, tasks, isEditor, draftChatbot, simulateAudience, variant, mode, focusComposer, audience }: {
+export default function ChatPanel({ open, closing, animateEnter, onClose, siteName, botName, thinkingPhrases, tasks, isEditor, draftChatbot, simulateAudience, variant, mode, focusComposer, audience }: {
     open: boolean;
+    /** Viewer modes: keeps the panel mounted through its exit slide (ChatWidget
+     *  flips this off once the transition has run). */
+    closing?: boolean;
+    /** Animate the entrance (explicit user open). False for the docked restore
+     *  on page load, where the column is already reserved pre-paint and a slide
+     *  would replay on every navigation. */
+    animateEnter?: boolean;
     onClose: () => void;
     siteName: string;
     /** Resolved assistant display name (per-audience, server-side). */
@@ -43,8 +50,9 @@ export default function ChatPanel({ open, onClose, siteName, botName, thinkingPh
     draftChatbot?: unknown;
     /** Configurator test panel only: preview this audience's prompt overlay. */
     simulateAudience?: string;
-    /** Floating mode only — anchors the panel above its launcher: viewer corner
-     *  FAB vs /edit FAB column. */
+    /** Surface the chat serves: "editor" (/edit docked chat) keeps internal
+     *  cross-page links in a new tab (unsaved editor state) and sizes the
+     *  docked panel against the editor toolbar instead of the viewer nav. */
     variant?: "viewer" | "editor";
     mode?: ChatPanelMode;
     /** Focus the composer when opened (explicit user open on desktop). Never

package/dist/components/chat/ChatPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatPanel.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,WAAW;IAAG,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE;AAE5E;;;kDAGkD;AAClD,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AA8C5D;;kEAEkE;AAClE,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEhD;AAcD,8EAA8E;AAC9E,wBAAsB,UAAU,CAC9B,IAAI,EAAE;IAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAAE,EACxH,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EAC9B,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CA6CjG;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,gBAAgB,EAAE,OAAkB,EAAE,IAAiB,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE;IACxM,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,OAAO,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;mCAC+B;IAC/B,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;kFAC8E;IAC9E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;+DAC2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,kDA8dA"}
+{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatPanel.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,WAAW;IAAG,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE;AAE5E;;;0DAG0D;AAC1D,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AA+C5D;;kEAEkE;AAClE,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEhD;AAcD,8EAA8E;AAC9E,wBAAsB,UAAU,CAC9B,IAAI,EAAE;IAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAAE,EACxH,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EAC9B,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CA6CjG;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,gBAAgB,EAAE,OAAkB,EAAE,IAAiB,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE;IAC/N,IAAI,EAAE,OAAO,CAAC;IACd;uDACmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;4CAEwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,OAAO,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;6EAEyE;IACzE,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;kFAC8E;IAC9E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;+DAC2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,kDAqfA"}

package/dist/components/chat/ChatWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatWidget.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,4EAA4E;IAC5E,OAAO,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,kFAAkF;IAClF,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAkB,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAyFtJ"}
+{"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatWidget.tsx"],"names":[],"mappings":"AAyBA,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,4EAA4E;IAC5E,OAAO,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,kFAAkF;IAClF,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAWD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAkB,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAyItJ"}

package/dist/components/shared/Fab.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+/** Floating action button — the round primary buttons floating over the page.
+ *
+ *  The `column` is both the placement and the behavior hook: base.css hides
+ *  every member of both columns (shrink + fade) while the chat is open, keyed
+ *  on the column class, so a new FAB participates in the chat open/close
+ *  choreography just by rendering through this component. Positions are
+ *  static on purpose — FABs are only visible while the chat is closed
+ *  (--chat-space: 0), so they never need to track the docked sidebar.
+ *
+ *  - "viewer": viewport corner stack (z-40, h-12). Rendered on SSR viewer
+ *    pages too — keep this component hook-free so it stays server-renderable
+ *    without hydration.
+ *  - "editor": the /edit FAB column (z-50, h-10), content-edge aligned at lg+
+ *    via fab-container-right.
+ *
+ *  Renders an <a> when `href` is set, else a <button type="button">. The
+ *  caller supplies the vertical slot (bottom-*) via className and the icon as
+ *  children.
+ */
+interface FabCommon {
+    /** Accessible name — FABs are icon-only. */
+    label: string;
+    column: "viewer" | "editor";
+    /** Vertical slot (bottom-*) plus any per-FAB extras. */
+    className?: string;
+    children: ReactNode;
+}
+export type FabProps = ({
+    href: string;
+} & FabCommon & Omit<ComponentPropsWithoutRef<"a">, "children" | "className" | "aria-label">) | ({
+    href?: undefined;
+    ref?: Ref<HTMLButtonElement>;
+} & FabCommon & Omit<ComponentPropsWithoutRef<"button">, "children" | "className" | "aria-label" | "type">);
+export default function Fab({ label, column, className, children, ...rest }: FabProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Fab.d.ts.map

package/dist/components/shared/Fab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fab.d.ts","sourceRoot":"","sources":["../../../src/components/shared/Fab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGtE;;;;;;;;;;;;;;;;;;GAkBG;AACH,UAAU,SAAS;IACjB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,QAAQ,GAChB,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,GAAG,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC,CAAC,GAC7G,CAAC;IAAE,IAAI,CAAC,EAAE,SAAS,CAAC;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,GAAG,SAAS,GAC7D,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC;AAElG,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,QAAQ,2CAoBpF"}

package/dist/components/shell/BugReportFAB.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BugReportFAB.d.ts","sourceRoot":"","sources":["../../../src/components/shell/BugReportFAB.tsx"],"names":[],"mappings":"AA6BA,wBAAgB,YAAY,mDA0T3B"}
+{"version":3,"file":"BugReportFAB.d.ts","sourceRoot":"","sources":["../../../src/components/shell/BugReportFAB.tsx"],"names":[],"mappings":"AA8BA,wBAAgB,YAAY,mDAqT3B"}

package/dist/components/shell/EditorShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAcjD,OAAO,EAAoC,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAuDtF,OAAO,KAAK,EAAE,eAAe,EAA2D,MAAM,oBAAoB,CAAC;AAuCnH,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAoBxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAIhB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;IAIhE,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAKjC,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CAC1C;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,YAAY,EACZ,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,EACX,sBAA8B,EAC9B,eAAe,GAChB,EAAE,KAAK,2CA0mDP;AAuED;6EAC6E;AAC7E,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,WAAW,CAAC,YAAY,CAAC,EACvC,aAAa,EAAE,MAAM,GAAG,IAAI,EAC5B,eAAe,EAAE,MAAM,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAK/B"}
+{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAcjD,OAAO,EAAoC,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAuDtF,OAAO,KAAK,EAAE,eAAe,EAA2D,MAAM,oBAAoB,CAAC;AAwCnH,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAoBxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAIhB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;IAIhE,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAKjC,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CAC1C;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,YAAY,EACZ,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,EACX,sBAA8B,EAC9B,eAAe,GAChB,EAAE,KAAK,2CA4mDP;AAuED;6EAC6E;AAC7E,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,WAAW,CAAC,YAAY,CAAC,EACvC,aAAa,EAAE,MAAM,GAAG,IAAI,EAC5B,eAAe,EAAE,MAAM,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAK/B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.90",
+  "version": "0.1.91",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",

package/src/components/chat/ChatPanel.tsx

@@ -12,9 +12,9 @@ import { RemoveIcon } from "../shared/icons";
 export interface ChatMessage { role: "user" | "assistant"; content: string }
 
 /** How the conversation is framed on screen:
- *  - "floating": the compact anchored panel (/edit FAB + settings test chat)
- *  - "docked":   full-height right sidebar (viewer, >=768px)
- *  - "sheet":    bottom sheet (viewer, phones) */
+ *  - "floating": the compact anchored panel (settings test chat only)
+ *  - "docked":   full-height right sidebar (viewer + /edit, >=768px)
+ *  - "sheet":    bottom sheet (viewer + /edit, phones) */
 export type ChatPanelMode = "floating" | "docked" | "sheet";
 
 const SESSION_KEY = "bp-chat-session";
@@ -35,9 +35,10 @@ function sessionId(): string {
   return id;
 }
 
-/** Conversation persistence (viewer modes only): internal links open in the
- *  same tab, so the transcript must survive page navigation. sessionStorage —
- *  per-tab, cleared when the visit ends. */
+/** Conversation persistence (docked/sheet modes): viewer internal links open
+ *  in the same tab, so the transcript must survive page navigation — and it
+ *  carries across same-tab hops between /edit and the live site. sessionStorage
+ *  — per-tab, cleared when the visit ends. */
 function loadStoredMessages(): ChatMessage[] {
   try {
     const parsed: unknown = JSON.parse(window.sessionStorage.getItem(MESSAGES_KEY) ?? "[]");
@@ -132,8 +133,15 @@ export async function streamChat(
   }
 }
 
-export default function ChatPanel({ open, onClose, siteName, botName, thinkingPhrases, tasks, isEditor, draftChatbot, simulateAudience, variant = "viewer", mode = "floating", focusComposer, audience }: {
+export default function ChatPanel({ open, closing, animateEnter, onClose, siteName, botName, thinkingPhrases, tasks, isEditor, draftChatbot, simulateAudience, variant = "viewer", mode = "floating", focusComposer, audience }: {
   open: boolean;
+  /** Viewer modes: keeps the panel mounted through its exit slide (ChatWidget
+   *  flips this off once the transition has run). */
+  closing?: boolean;
+  /** Animate the entrance (explicit user open). False for the docked restore
+   *  on page load, where the column is already reserved pre-paint and a slide
+   *  would replay on every navigation. */
+  animateEnter?: boolean;
   onClose: () => void;
   siteName: string;
   /** Resolved assistant display name (per-audience, server-side). */
@@ -146,8 +154,9 @@ export default function ChatPanel({ open, onClose, siteName, botName, thinkingPh
   draftChatbot?: unknown;
   /** Configurator test panel only: preview this audience's prompt overlay. */
   simulateAudience?: string;
-  /** Floating mode only — anchors the panel above its launcher: viewer corner
-   *  FAB vs /edit FAB column. */
+  /** Surface the chat serves: "editor" (/edit docked chat) keeps internal
+   *  cross-page links in a new tab (unsaved editor state) and sizes the
+   *  docked panel against the editor toolbar instead of the viewer nav. */
   variant?: "viewer" | "editor";
   mode?: ChatPanelMode;
   /** Focus the composer when opened (explicit user open on desktop). Never
@@ -331,14 +340,15 @@ export default function ChatPanel({ open, onClose, siteName, botName, thinkingPh
       return;
     }
     if (url.origin === window.location.origin) {
-      if (persistent) {
+      if (persistent && variant !== "editor") {
         // Internal cross-page citation, viewer chat: navigate in place — the
         // sessionStorage transcript (and docked-open state) survive the load.
         window.location.assign(url.href);
         return;
       }
-      // Editor surfaces (floating mode): same-tab navigation would destroy
-      // unsaved editor state — keep internal links in a new tab there.
+      // Editor surfaces (/edit docked chat, settings test panel): same-tab
+      // navigation would destroy unsaved editor state — keep internal links
+      // in a new tab there.
       window.open(url.href, "_blank", "noopener");
       return;
     }
@@ -442,14 +452,21 @@ export default function ChatPanel({ open, onClose, siteName, botName, thinkingPh
     setHistory(loadHistory(historyAudience));
   }
 
-  if (!open) return null;
+  if (!open && !closing) return null;
 
   const lastIndex = messages.length - 1;
 
   return (
     <>
       {mode === "sheet" && (
-        <div className="fixed inset-0 z-50 bg-black/50" onClick={onClose} aria-hidden="true" />
+        <div
+          className={cn(
+            "fixed inset-0 z-50 bg-black/50 motion-safe:transition-opacity motion-safe:duration-300",
+            open ? "opacity-100 starting:opacity-0" : "pointer-events-none opacity-0",
+          )}
+          onClick={onClose}
+          aria-hidden="true"
+        />
       )}
       <div
         ref={panelRef}
@@ -460,12 +477,27 @@ export default function ChatPanel({ open, onClose, siteName, botName, thinkingPh
         onKeyDown={(e) => { if (e.key === "Escape") onClose(); }}
         className={cn(
           "flex flex-col bg-base focus:outline-none",
-          mode === "floating" && cn(
-            "fixed z-40 h-[28rem] w-80 rounded-outer border border-base-200 shadow-xl",
-            variant === "editor" ? "bottom-4 fab-panel-left max-w-[calc(100vw-5.25rem)]" : "bottom-20 right-4",
+          mode === "floating" && "fixed z-40 h-[28rem] w-80 rounded-outer border border-base-200 shadow-xl bottom-20 right-4",
+          // Enter/exit slides pair with base.css's 300ms band shift (same
+          // duration + default curve); under reduced motion there's no
+          // transition and @starting-style has no effect — instant show/hide.
+          // Top offset clears the fixed top bar spanning the panel's column:
+          // the viewer nav header exists below xl (chat-enabled pages dock
+          // the nav at xl); /edit keeps its full-width h-16 toolbar at every
+          // width, so the panel always tucks below it — the toolbar never
+          // moves during the open/close slide.
+          mode === "docked" && cn(
+            "fixed right-0 bottom-0 z-40 w-[var(--chat-w)] border-l border-base-200",
+            variant === "editor" ? "top-16" : "top-16 xl:top-0",
+            "motion-safe:transition-transform motion-safe:duration-300",
+            open ? "translate-x-0" : "translate-x-full",
+            open && animateEnter && "starting:translate-x-full",
+          ),
+          mode === "sheet" && cn(
+            "fixed inset-x-0 bottom-0 z-50 h-[85dvh] rounded-t-outer border-t border-base-200 shadow-xl",
+            "motion-safe:transition-transform motion-safe:duration-300",
+            open ? "translate-y-0 starting:translate-y-full" : "translate-y-full",
           ),
-          mode === "docked" && "fixed right-0 bottom-0 top-16 xl:top-0 z-40 w-[var(--chat-w)] border-l border-base-200",
-          mode === "sheet" && "fixed inset-x-0 bottom-0 z-50 h-[85dvh] rounded-t-outer border-t border-base-200 shadow-xl",
         )}
         style={mode === "sheet" ? { bottom: "var(--kb-offset, 0px)", maxHeight: "calc(var(--vvh, 100dvh) - 2.5rem)" } : undefined}
       >

package/src/components/chat/ChatWidget.tsx

@@ -1,17 +1,22 @@
 // Chat launcher + shell chooser. Browser-safe: no node imports, no process.env.
 //
-// Placements:
-// - "viewer" (default): >=768px the conversation docks as a full-height right
-//   sidebar (html.bp-chat-docked shifts the page band left — see base.css);
-//   below 768px it opens as a bottom sheet. The FAB shows only while closed.
-//   Docked-open is the default and the preference persists per tab
-//   (sessionStorage, mirrored by Layout.astro's pre-paint script so the
-//   column is reserved before hydration).
-// - "editor": unchanged floating panel at the BOTTOM of the /edit route's FAB
-//   column (edit-mode toggle at bottom-16, bug report at bottom-28 above it),
-//   aligned to the content edge via fab-container-right like its neighbors.
+// Both variants share the same conversation experience: >=768px it docks as a
+// full-height right sidebar (html.bp-chat-docked shifts the page band left —
+// see base.css); below 768px it opens as a bottom sheet. Open/close is
+// animated (sidebar slides in as the band shifts, sheet slides up, and ALL
+// page FABs shrink/fade away); prefers-reduced-motion keeps everything
+// instant. FABs show only while closed. Docked-open is the default and the
+// preference persists per tab (sessionStorage, mirrored by Layout.astro's
+// pre-paint script so the column is reserved before hydration) — shared
+// across viewer pages and /edit.
+//
+// The variants differ only in the launcher's placement:
+// - "viewer" (default): viewport corner (viewer-fab tracks the sidebar edge).
+// - "editor": BOTTOM of the /edit route's FAB column (edit-mode toggle at
+//   bottom-16, bug report at bottom-28 above it), aligned to the content edge
+//   via fab-container-right like its neighbors.
 import { lazy, Suspense, useEffect, useRef, useState } from "react";
-import { cn } from "../../lib/cn";
+import Fab from "../shared/Fab";
 
 const ChatPanel = lazy(() => import("./ChatPanel"));
 
@@ -34,19 +39,79 @@ export interface ChatWidgetProps {
   audience?: string | null;
 }
 
+/** Matches the 300ms slide transitions in base.css / ChatPanel. */
+const CLOSE_MS = 300;
+/** How long html.bp-chat-animating stays on: the 300ms glide plus a timer-
+ *  jitter buffer. The class gates the band/nav FLIP transforms in base.css —
+ *  it must outlive the transition (or the glide would cut off early) but
+ *  MUST come off afterwards, because a resting transform re-anchors
+ *  position:fixed descendants. */
+const ANIM_MS = 350;
+
 export default function ChatWidget({ siteName, botName, thinkingPhrases, tasks, isEditor, draftChatbot, variant = "viewer", audience }: ChatWidgetProps) {
   const [open, setOpen] = useState(false);
   const [everOpened, setEverOpened] = useState(false);
   const [docked, setDocked] = useState(false);
   const [userOpened, setUserOpened] = useState(false);
+  // Close is animated: the panel stays mounted while it slides out.
+  const [closing, setClosing] = useState(false);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const animTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const fabRef = useRef<HTMLButtonElement>(null);
-  const isViewer = variant === "viewer";
+
+  useEffect(() => () => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    if (animTimer.current) clearTimeout(animTimer.current);
+    document.documentElement.classList.remove("bp-chat-animating");
+  }, []);
+
+  function clearCloseTimer() {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    closeTimer.current = null;
+  }
+
+  function motionOk(): boolean {
+    return typeof window.matchMedia === "function" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+
+  /** Open the FLIP window for a docked toggle: while bp-chat-animating is on
+   *  <html>, base.css glides the band/nav via transform between the snapped
+   *  layouts (see the @property note there). User-driven toggles only — the
+   *  page-load restore must not replay the glide. */
+  function beginShiftWindow() {
+    if (!docked || !motionOk()) return;
+    document.documentElement.classList.add("bp-chat-animating");
+    if (animTimer.current) clearTimeout(animTimer.current);
+    animTimer.current = setTimeout(() => {
+      document.documentElement.classList.remove("bp-chat-animating");
+      animTimer.current = null;
+    }, ANIM_MS);
+  }
+
+  function openPanel() {
+    clearCloseTimer();
+    beginShiftWindow();
+    setClosing(false);
+    setOpen(true);
+    setEverOpened(true);
+  }
+
+  function closePanel() {
+    clearCloseTimer();
+    beginShiftWindow();
+    setOpen(false);
+    // Reduced motion unmounts immediately — the pre-animation behavior.
+    if (motionOk()) {
+      setClosing(true);
+      closeTimer.current = setTimeout(() => { setClosing(false); closeTimer.current = null; }, CLOSE_MS);
+    }
+  }
 
   // Post-hydration restore. The server renders only the FAB; Layout.astro's
   // pre-paint script has already reserved the docked column and CSS hides the
   // FAB under html.bp-chat-docked, so this state sync causes no layout jump.
   useEffect(() => {
-    if (!isViewer || typeof window.matchMedia !== "function") return;
+    if (typeof window.matchMedia !== "function") return;
     const mq = window.matchMedia(DOCK_QUERY);
     const apply = () => setDocked(mq.matches);
     apply();
@@ -55,59 +120,56 @@ export default function ChatWidget({ siteName, botName, thinkingPhrases, tasks,
     try { storedOpen = window.sessionStorage.getItem(OPEN_KEY) !== "0"; } catch {}
     if (mq.matches && storedOpen) { setOpen(true); setEverOpened(true); }
     return () => mq.removeEventListener("change", apply);
-  }, [isViewer]);
+  }, []);
 
-  // Reflect docked-open on <html> (drives the band shift + FAB hiding) and
-  // persist the preference. Only the docked state persists — the phone sheet
-  // always starts closed.
+  // Reflect open state on <html>: bp-chat-docked drives the band shift (and
+  // the /edit toolbar/FAB-column shift), bp-chat-open (any mode) drives the
+  // document FAB's hide/handoff — both animated in base.css. Persist the
+  // preference; only the docked state persists — the phone sheet always
+  // starts closed.
   useEffect(() => {
-    if (!isViewer) return;
     document.documentElement.classList.toggle("bp-chat-docked", open && docked);
+    document.documentElement.classList.toggle("bp-chat-open", open);
     if (docked) {
       try { window.sessionStorage.setItem(OPEN_KEY, open ? "1" : "0"); } catch {}
     }
-    return () => document.documentElement.classList.remove("bp-chat-docked");
-  }, [open, docked, isViewer]);
+    return () => {
+      document.documentElement.classList.remove("bp-chat-docked");
+      document.documentElement.classList.remove("bp-chat-open");
+    };
+  }, [open, docked]);
 
   // Closing the sheet/sidebar returns focus to the launcher.
   useEffect(() => {
-    if (isViewer && !open && everOpened) fabRef.current?.focus();
-  }, [open, everOpened, isViewer]);
-
-  const showFab = !isViewer || !open;
+    if (!open && everOpened) fabRef.current?.focus();
+  }, [open, everOpened]);
 
+  // The launcher stays mounted while the chat is open so it can shrink and
+  // fade out (and reverse back in): base.css hides ALL FABs (.viewer-fab and
+  // the /edit .fab-container-right column, this button included) under
+  // html.bp-chat-open/.bp-chat-docked, with visibility dropped after the fade
+  // so no invisible button can take focus or clicks.
   return (
     <>
-      {showFab && (
-        <button
-          ref={fabRef}
-          type="button"
-          aria-label={open ? "Collapse chat" : `Chat with ${botName}`}
-          aria-expanded={open}
-          onClick={() => { setOpen((o) => !o); setEverOpened(true); setUserOpened(true); }}
-          className={cn(
-            "fixed z-40 flex items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity",
-            variant === "editor"
-              ? "bottom-4 right-4 lg:right-auto h-10 w-10 fab-container-right"
-              : "bottom-4 h-12 w-12 viewer-fab bp-chat-fab",
-          )}
-        >
-          {open ? (
-            <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="m6 9 6 6 6-6" />
-            </svg>
-          ) : (
-            <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
-            </svg>
-          )}
-        </button>
-      )}
+      <Fab
+        ref={fabRef}
+        label={`Chat with ${botName}`}
+        column={variant === "editor" ? "editor" : "viewer"}
+        className="bottom-4"
+        aria-expanded={open}
+        onClick={() => { setUserOpened(true); if (open) closePanel(); else openPanel(); }}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
+        </svg>
+      </Fab>
       {everOpened && (
         <Suspense fallback={null}>
           <ChatPanel
             open={open}
-            onClose={() => setOpen(false)}
+            closing={closing}
+            animateEnter={userOpened}
+            onClose={closePanel}
             siteName={siteName}
             botName={botName}
             thinkingPhrases={thinkingPhrases}
@@ -115,7 +177,7 @@ export default function ChatWidget({ siteName, botName, thinkingPhrases, tasks,
             isEditor={isEditor}
             draftChatbot={draftChatbot}
             variant={variant}
-            mode={isViewer ? (docked ? "docked" : "sheet") : "floating"}
+            mode={docked ? "docked" : "sheet"}
             focusComposer={userOpened}
             audience={audience}
           />

package/src/components/shared/Fab.tsx

@@ -0,0 +1,57 @@
+import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import { cn } from "../../lib/cn";
+
+/** Floating action button — the round primary buttons floating over the page.
+ *
+ *  The `column` is both the placement and the behavior hook: base.css hides
+ *  every member of both columns (shrink + fade) while the chat is open, keyed
+ *  on the column class, so a new FAB participates in the chat open/close
+ *  choreography just by rendering through this component. Positions are
+ *  static on purpose — FABs are only visible while the chat is closed
+ *  (--chat-space: 0), so they never need to track the docked sidebar.
+ *
+ *  - "viewer": viewport corner stack (z-40, h-12). Rendered on SSR viewer
+ *    pages too — keep this component hook-free so it stays server-renderable
+ *    without hydration.
+ *  - "editor": the /edit FAB column (z-50, h-10), content-edge aligned at lg+
+ *    via fab-container-right.
+ *
+ *  Renders an <a> when `href` is set, else a <button type="button">. The
+ *  caller supplies the vertical slot (bottom-*) via className and the icon as
+ *  children.
+ */
+interface FabCommon {
+  /** Accessible name — FABs are icon-only. */
+  label: string;
+  column: "viewer" | "editor";
+  /** Vertical slot (bottom-*) plus any per-FAB extras. */
+  className?: string;
+  children: ReactNode;
+}
+
+export type FabProps =
+  | ({ href: string } & FabCommon & Omit<ComponentPropsWithoutRef<"a">, "children" | "className" | "aria-label">)
+  | ({ href?: undefined; ref?: Ref<HTMLButtonElement> } & FabCommon &
+      Omit<ComponentPropsWithoutRef<"button">, "children" | "className" | "aria-label" | "type">);
+
+export default function Fab({ label, column, className, children, ...rest }: FabProps) {
+  const classes = cn(
+    "cursor-pointer fixed flex items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity",
+    column === "viewer"
+      ? "z-40 h-12 w-12 right-4 viewer-fab"
+      : "z-50 h-10 w-10 right-4 lg:right-auto fab-container-right",
+    className,
+  );
+  if (rest.href !== undefined) {
+    return (
+      <a aria-label={label} className={classes} {...(rest as ComponentPropsWithoutRef<"a">)}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <button type="button" aria-label={label} className={classes} {...(rest as ComponentPropsWithoutRef<"button"> & { ref?: Ref<HTMLButtonElement> })}>
+      {children}
+    </button>
+  );
+}

package/src/components/shell/BugReportFAB.tsx

@@ -2,6 +2,7 @@ import { useState, useCallback, useRef, useEffect } from "react";
 import { EditorModal } from "./EditorModal";
 import { useEditorContext } from "./EditorContext";
 import { cn } from "../../lib/cn";
+import Fab from "../shared/Fab";
 
 type Category = "Visual" | "Unexpected Behavior" | "Media / Media Library" | "Save / Publish" | "Feature Request" | "Other";
 
@@ -186,17 +187,12 @@ export function BugReportFAB() {
     <>
       {/* FAB button */}
       {visible && (
-        <button
-          type="button"
-          onClick={handleOpen}
-          aria-label="Report a bug"
-          className="cursor-pointer fixed bottom-28 right-4 lg:right-auto z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity fab-container-right"
-        >
+        <Fab label="Report a bug" column="editor" className="bottom-28" onClick={handleOpen}>
           {/* Bug / beetle SVG icon */}
           <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
             <path d="M19 8h-1.26A6.003 6.003 0 0012 4a6.003 6.003 0 00-5.74 4H5a1 1 0 000 2h1.05A6.04 6.04 0 006 12H5a1 1 0 000 2h1c0 .34.03.67.08 1H5a1 1 0 000 2h1.26a6 6 0 0011.48 0H19a1 1 0 000-2h-1.08c.05-.33.08-.66.08-1h1a1 1 0 000-2h-1a6.04 6.04 0 00-.05-2H19a1 1 0 000-2zM12 6c1.7 0 3.16.88 4 2.19V8a1 1 0 10-2 0v.04A3.97 3.97 0 0012 8a3.97 3.97 0 00-2 .04V8a1 1 0 10-2 0v.19A4.69 4.69 0 018 6a4 4 0 014 0zm0 14a4 4 0 01-4-4v-4a4 4 0 018 0v4a4 4 0 01-4 4z"/>
           </svg>
-        </button>
+        </Fab>
       )}
 
       {/* Modal */}

package/src/components/shell/EditorShell.tsx

@@ -101,6 +101,7 @@ import { UploadRejectionAlert, formatRejections } from "../shared/UploadRejectio
 import { Button } from "../shared/Button";
 import { SplitButton } from "../shared/SplitButton";
 import { IconButton } from "../shared/IconButton";
+import Fab from "../shared/Fab";
 import { Tooltip } from "../shared/Tooltip";
 import { SegmentedControl } from "../shared/SegmentedControl";
 import { computeDisplaySections } from "./view-branch";
@@ -1548,18 +1549,13 @@ export default function EditorShell({
               scope renders the provider and can't read the context directly),
               hide the FAB so it can't open the draft editor over a history view. */}
           {resolvedActivePage?.document?.enabled && !historyActive && (
-            <button
-              type="button"
-              onClick={() => setShowDocumentEditor(true)}
-              aria-label="Edit as document"
-              className="cursor-pointer fixed bottom-40 right-4 lg:right-auto z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity fab-container-right"
-            >
+            <Fab label="Edit as document" column="editor" className="bottom-40" onClick={() => setShowDocumentEditor(true)}>
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                 <rect x="3" y="5" width="18" height="14" rx="1" />
                 <path d="M7 10h10" />
                 <path d="M7 14h7" />
               </svg>
-            </button>
+            </Fab>
           )}
           {showDocumentEditor && resolvedActivePage?.document?.enabled && (
             <Suspense fallback={<DocumentOverlayFallback />}>
@@ -1626,6 +1622,12 @@ export default function EditorShell({
             </div>
           )}
 
+          {/* bp-band-shift: rides the chat dock's FLIP glide (base.css). On
+              /edit it lives HERE, on the content column only — Layout's
+              <main> can't carry it because the toolbar/FABs/chat panel above
+              are position:fixed inside main, and a transformed ancestor
+              would re-anchor them. */}
+          <div className="bp-band-shift">
           <HistoryOrEditorContent
             index={siteIndex}
             activeSections={activeSections}
@@ -1654,6 +1656,7 @@ export default function EditorShell({
               onTakeover={confirmTakeover}
             />
           </HistoryOrEditorContent>
+          </div>
           <GlobalModal />
           <SiteSettingsModal
             isOpen={showSiteSettings}
@@ -2412,8 +2415,12 @@ function EditorToolbar({
   return (
     <>
       {isEditMode && (
+        // Full-width and static on purpose: the docked chat sidebar slides in
+        // BELOW this bar (ChatPanel docks at top-16 on /edit), so the toolbar
+        // never moves during the chat open/close transition. h-16 matches the
+        // panel's top offset (and the body's pt-16) exactly.
         <div className="fixed top-0 right-0 left-0 z-50 border-b border-base-200 bg-base">
-          <div className="mx-auto max-w-screen-xl grid grid-cols-3 items-center px-4 py-2">
+          <div className="mx-auto max-w-screen-xl grid h-16 grid-cols-3 items-center px-4">
             <div className="flex items-center gap-2">
               {buttonState === "saveAndPublish" && (
                 <SplitButton
@@ -2490,7 +2497,7 @@ function EditorToolbar({
       )}
       {!isEditMode && (
         <div className="fixed top-0 right-0 left-0 z-50 border-b border-base-200 bg-base">
-          <div className="mx-auto max-w-screen-xl flex items-center justify-center px-4 py-2">
+          <div className="mx-auto max-w-screen-xl flex h-16 items-center justify-center px-4">
             <SegmentedControl
               options={[
                 { value: "live", label: "Published" },
@@ -2503,10 +2510,11 @@ function EditorToolbar({
         </div>
       )}
       {!historyState && (
-        <button
+        <Fab
+          label={isEditMode ? "Switch to view mode" : "Switch to edit mode"}
+          column="editor"
+          className="bottom-16"
           onClick={toggleEditMode}
-          className="cursor-pointer fixed bottom-16 right-4 lg:right-auto z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity fab-container-right"
-          aria-label={isEditMode ? "Switch to view mode" : "Switch to edit mode"}
         >
           {isEditMode ? (
             <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
@@ -2518,7 +2526,7 @@ function EditorToolbar({
               <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
             </svg>
           )}
-        </button>
+        </Fab>
       )}
     </>
   );