jamdesk 1.1.208 → 1.1.210

package/vendored/components/navigation/ThemePreviewPicker.tsx

@@ -1,197 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import { useOnClickOutside } from '@/hooks/useOnClickOutside';
-import { useLinkPrefix } from '@/lib/link-prefix-context';
-import { useThemePreview } from '@/lib/theme-preview-context';
-import { THEME_PREVIEW_COOKIE } from '@/lib/theme-preview';
-import { getAllThemes, type ThemeName } from '@/themes';
-
-/**
- * Jamdesk-only affordance: re-skins jamdesk.com/docs with any built-in theme so
- * prospects can see all four on a real docs site.
- *
- * The gate is server-side (lib/theme-preview.ts decides whether the provider is
- * enabled); this component ALSO self-guards on `enabled` so a mistake in
- * Header's conditional can never leak it onto a customer site.
- *
- * Strings are English-only by design. jamdesk-docs has fr/es locales, but the
- * only prose here is "Reset to default" and "Default" — everything else is a
- * proper noun — and adding entries to lib/ui-strings.ts for a sales affordance
- * isn't worth the churn across every locale.
- */
-export function ThemePreviewPicker() {
-  const { enabled, activeTheme, defaultTheme } = useThemePreview();
-  const linkPrefix = useLinkPrefix();
-  const [isOpen, setIsOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const listRef = useRef<HTMLUListElement>(null);
-
-  // Every close path but a theme selection runs through here. A click-outside
-  // would otherwise unmount the focused option and drop focus to <body>, so
-  // the visitor's next Tab restarts at the top of the document. Synchronous on
-  // purpose: this runs during the mousedown dispatch, so a click that lands on
-  // something focusable still ends up there — the browser's own focus default
-  // wins afterwards, which is what it should do.
-  function closeAndRestoreFocus() {
-    const hadFocus = !!containerRef.current?.contains(document.activeElement);
-    setIsOpen(false);
-    if (hadFocus) buttonRef.current?.focus();
-  }
-
-  useOnClickOutside(containerRef, closeAndRestoreFocus, isOpen);
-
-  // Move focus onto the active option when the menu opens. Without this the
-  // trigger keeps focus and Tab is the only way forward — and an earlier cut of
-  // this component closed the menu on Tab (copied from LanguageSelector, where
-  // that is safe only because ArrowUp/Down have already moved focus into the
-  // list), which left the widget keyboard-inoperable: WCAG 2.1.1.
-  useEffect(() => {
-    if (!isOpen) return;
-    const options = listRef.current?.querySelectorAll<HTMLElement>('[role="option"]');
-    if (!options?.length) return;
-    const active = Array.from(options).find((o) => o.getAttribute('aria-selected') === 'true');
-    (active ?? options[0]).focus();
-  }, [isOpen]);
-
-  if (!enabled) return null;
-
-  // Escape only. Arrow-key roving focus is deliberately NOT copied from
-  // LanguageSelector: its options are a customer-configurable list, whereas
-  // this is a fixed four-row Jamdesk-only affordance whose rows are ordinary
-  // buttons that Tab already walks. Escape must stay — it is the way back out
-  // of a menu focus has just been moved into.
-  function handleKeyDown(e: React.KeyboardEvent) {
-    if (e.key === 'Escape') closeAndRestoreFocus();
-  }
-
-  // Tabbing past the last row leaves the widget; close behind it. This is what
-  // LanguageSelector's Tab branch achieved, without eating the Tab that is this
-  // component's only way INTO the option list.
-  function handleFocusOut(e: React.FocusEvent) {
-    // A null relatedTarget means focus landed on <body>, NOT that focus left
-    // the widget — and since the menu always opens with focus inside itself,
-    // that blur comes from inside. Safari and Firefox-on-macOS produce it on
-    // every mousedown over a <button>; Chrome produces it for a mousedown on
-    // this panel's own padding or its divider band. Closing there unmounts the
-    // row before its click can land, so no theme is ever applied. Do not
-    // "simplify" this branch away: genuine outside-pointer closes are
-    // useOnClickOutside's job, and Escape and Tab both supply a real
-    // relatedTarget. The only thing given up is close-on-window-blur.
-    if (!(e.relatedTarget instanceof Element)) return;
-    if (!e.currentTarget.contains(e.relatedTarget)) setIsOpen(false);
-  }
-
-  // `null` clears the cookie. Path mirrors the docs prefix so the cookie is
-  // scoped to /docs on jamdesk.com and to / on jamdesk-docs.jamdesk.app.
-  function applyTheme(name: ThemeName | null) {
-    const path = linkPrefix || '/';
-    // SESSION cookie on the set path — no Max-Age, so the preview dies with the
-    // browser. The picker is desktop-only (`hidden lg:block`), so a persisted
-    // preview would follow a visitor to mobile with no affordance to reset it.
-    // The CLEAR path is the opposite and must stay explicit: `Max-Age=0` is
-    // what expires an existing cookie, and omitting it there would leave the
-    // preview in place.
-    const expiry = name === null ? '; Max-Age=0' : '';
-    // `Secure` means the browser silently DROPS this cookie over plain http, so
-    // the picker looks inert when QA'd on http://localhost — use https or a
-    // deployed host.
-    document.cookie =
-      `${THEME_PREVIEW_COOKIE}=${name ?? ''}; Path=${path}${expiry}; SameSite=Lax; Secure`;
-    // Close first: the reload is not instant, and an open menu left showing the
-    // previous selection reads as a dead click.
-    setIsOpen(false);
-    // Full reload — the theme is applied by the server render (CSS variables,
-    // font class and layout variant all key off config.theme), so there is no
-    // client-side state to update.
-    window.location.reload();
-  }
-
-  const allThemes = getAllThemes();
-  const activeDisplayName = allThemes.find((t) => t.name === activeTheme)?.displayName ?? '';
-
-  return (
-    <div
-      ref={containerRef}
-      className="relative hidden lg:block"
-      onKeyDown={handleKeyDown}
-      onBlur={handleFocusOut}
-    >
-      <button
-        ref={buttonRef}
-        onClick={() => {
-          setIsOpen(!isOpen);
-          // Closing unmounts the focused option. Safari does not focus a
-          // button on mousedown, so without this focus would land on <body>.
-          // Mirrors Prompt.tsx's trigger.
-          if (isOpen) buttonRef.current?.focus();
-        }}
-        aria-expanded={isOpen}
-        aria-haspopup="listbox"
-        aria-label={`Preview a theme: ${activeDisplayName}`}
-        className="flex items-center gap-2 rounded-lg px-2 py-1.5 cursor-pointer transition-colors text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-tertiary)]"
-      >
-        <i
-          className="fa-solid fa-palette text-[12px] text-[var(--color-text-tertiary)]"
-          aria-hidden="true"
-        />
-        <i
-          className={`fa-solid fa-chevron-down text-[10px] text-[var(--color-text-tertiary)] transition-transform ${isOpen ? 'rotate-180' : ''}`}
-          aria-hidden="true"
-        />
-      </button>
-
-      {isOpen && (
-        <div
-          className="absolute right-0 top-full mt-1 z-50 min-w-[190px] py-1 bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-lg"
-          style={{ boxShadow: 'var(--shadow-lg)' }}
-        >
-          <ul ref={listRef} role="listbox" aria-label="Preview a theme">
-            {allThemes.map((theme) => {
-              const isActive = theme.name === activeTheme;
-              return (
-                <li key={theme.name}>
-                  <button
-                    role="option"
-                    aria-selected={isActive}
-                    onClick={() => applyTheme(theme.name as ThemeName)}
-                    className="w-full flex items-center justify-between gap-3 px-3 py-2 text-left text-sm cursor-pointer text-[var(--color-text-primary)] hover:bg-[var(--color-bg-tertiary)]"
-                  >
-                    <span>{theme.displayName}</span>
-                    <span className="flex items-center gap-2">
-                      {theme.name === defaultTheme && (
-                        <span className="text-xs text-[var(--color-text-tertiary)]">Default</span>
-                      )}
-                      {isActive && (
-                        <i
-                          className="fa-solid fa-check text-[11px] text-[var(--color-accent)]"
-                          aria-hidden="true"
-                        />
-                      )}
-                    </span>
-                  </button>
-                </li>
-              );
-            })}
-          </ul>
-
-          {/* Outside the <ul>: a `role="listbox"` may only own `option` and
-              `group` children, and a reset action is neither. Nesting it as a
-              bare <li><button> would put a `listitem` inside a listbox, which
-              screen readers drop or mis-announce. LanguageSelector — the
-              pattern this component mirrors — has no extra row, so there is no
-              existing precedent to copy here. */}
-          <div className="mt-1 pt-1 border-t border-[var(--color-border)]">
-            <button
-              onClick={() => applyTheme(null)}
-              className="w-full px-3 py-2 text-left text-sm cursor-pointer text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-tertiary)]"
-            >
-              Reset to default
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}