export declare const focusModeToggleTemplate = "\"use client\";\nimport { useEffect, useRef, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { resetButton } from \"cherry-styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\n\n// Desktop-only affordance that collapses both rails for distraction-free\n// reading. The button is fixed rather than living in the sidebar footer next\n// to the ThemeToggle: the footer slides away with the sidebar, and the way\n// back out of focus mode has to stay on screen.\nconst StyledFocusToggle = styled.button<{ theme: Theme }>`\n  display: none;\n\n  ${mq(\"lg\")} {\n    ${resetButton};\n    ${interactiveStyles};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: fixed;\n    /* Above the sidebar (99) so it stays clickable once the rails are out,\n       below the chat panel (1000). */\n    z-index: 100;\n    /* Sidebar footer row, flush with the footer's left padding (the\n       ThemeToggle holds the right end of the same row). */\n    left: 20px;\n    bottom: 16px;\n    width: 30px;\n    height: 30px;\n    border-radius: 50%;\n    background: ${({ theme }) => theme.colors.light};\n    border-color: ${({ theme }) => theme.colors.grayLight};\n\n    & svg {\n      width: 16px;\n      height: 16px;\n    }\n\n    & svg[stroke] {\n      stroke: ${({ theme }) => theme.colors.primary};\n    }\n\n    &:hover svg[stroke] {\n      stroke: ${({ theme }) => theme.colors.accent};\n    }\n  }\n`;\n\nfunction FocusModeToggle() {\n  const [isFocusMode, setIsFocusMode] = useState(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  // Cmd/Ctrl+B, the editor convention for collapsing the side columns. Sits\n  // alongside the app's other chords (Cmd+K search, Cmd+I chat,\n  // Cmd+Shift+L theme) and stays out of the way while the reader is typing.\n  useEffect(() => {\n    function handleKeyDown(e: KeyboardEvent) {\n      if (!(e.metaKey || e.ctrlKey) || e.shiftKey || e.altKey) return;\n      if (e.key.toLowerCase() !== \"b\") return;\n      const target = e.target as HTMLElement | null;\n      if (target?.closest(\"input, textarea, [contenteditable='true']\")) return;\n      // The button is display:none below \"lg\" and focus mode is a desktop\n      // layout, so the shortcut is live exactly when the button is.\n      const button = buttonRef.current;\n      if (!button || getComputedStyle(button).display === \"none\") return;\n      e.preventDefault();\n      setIsFocusMode((value) => !value);\n    }\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, []);\n\n  // The nav sidebar, the right rail and the content columns sit in separate\n  // subtrees, so the state rides on the root element and each of them reacts\n  // in CSS (see focusModeHide / focusModeColumn in SharedStyled).\n  useEffect(() => {\n    const root = document.documentElement;\n    if (isFocusMode) {\n      root.setAttribute(\"data-focus-mode\", \"\");\n    } else {\n      root.removeAttribute(\"data-focus-mode\");\n    }\n    return () => root.removeAttribute(\"data-focus-mode\");\n  }, [isFocusMode]);\n\n  return (\n    <StyledFocusToggle\n      ref={buttonRef}\n      type=\"button\"\n      onClick={() => setIsFocusMode((value) => !value)}\n      aria-pressed={isFocusMode}\n      aria-label={isFocusMode ? \"Exit focus mode\" : \"Enter focus mode\"}\n      title={isFocusMode ? \"Exit focus mode (\u2318B)\" : \"Focus mode (\u2318B)\"}\n    >\n      <Icon name={isFocusMode ? \"minimize\" : \"maximize\"} size={16} />\n    </StyledFocusToggle>\n  );\n}\n\nexport { FocusModeToggle };\n";