@adecore/ui 0.31.11 → 0.32.0

package/dist/settings/SettingsDialog.js

@@ -1,97 +1,837 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { Tabs } from '@base-ui/react/tabs';
 import { Search, X } from 'lucide-react';
-import { CloseButton } from '../CloseButton.js';
-import { DialogDescription, DialogPopup, DialogRoot, DialogTitle } from '../dialog/parts.js';
-import { ErrorBoundary } from '../ErrorBoundary.js';
-import { Icon } from '../Icon.js';
-import { IconButton } from '../IconButton.js';
-import { LazyBoundary } from '../LazyBoundary.js';
-import { Input } from '../Input.js';
-import { Select } from '../Select.js';
+import { CloseButton } from "../CloseButton.js";
+import { DialogDescription, DialogPopup, DialogRoot, DialogTitle } from "../dialog/parts.js";
+import { ErrorBoundary } from "../ErrorBoundary.js";
+import { Icon } from "../Icon.js";
+import { IconButton } from "../IconButton.js";
+import { LazyBoundary } from "../LazyBoundary.js";
+import { Input } from "../Input.js";
+import { Select } from "../Select.js";
 import { SettingsTargetContext } from './target.js';
 /* How far a pane with a hero scrolls before the title bar over it is filled in. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BAR_FILL_DISTANCE = 70;
 const NAV_ITEM = 'flex h-8 min-w-0 shrink-0 items-center gap-2.5 rounded-md px-2.5 text-sm focus-visible:-outline-offset-2 text-text-muted hover:bg-surface-hover hover:text-text data-active:bg-surface-active data-active:text-text';
-function NavTab({ section }) {
-    return (_jsxs(Tabs.Tab, { value: section.id, className: NAV_ITEM, children: [_jsx(Icon, { icon: section.icon, size: 16, className: "shrink-0 text-text-faint" }), _jsx("span", { className: "truncate", children: section.label })] }));
+function NavTab(t0) {
+  const $ = _c(8);
+  const {
+    section
+  } = t0;
+  let t1;
+  if ($[0] !== section.icon) {
+    t1 = /*#__PURE__*/_jsx(Icon, {
+      icon: section.icon,
+      size: 16,
+      className: "shrink-0 text-text-faint"
+    });
+    $[0] = section.icon;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== section.label) {
+    t2 = /*#__PURE__*/_jsx("span", {
+      className: "truncate",
+      children: section.label
+    });
+    $[2] = section.label;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== section.id || $[5] !== t1 || $[6] !== t2) {
+    t3 = /*#__PURE__*/_jsxs(Tabs.Tab, {
+      value: section.id,
+      className: NAV_ITEM,
+      children: [t1, t2]
+    });
+    $[4] = section.id;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}
+function SettingsNav(t0) {
+  const $ = _c(13);
+  const {
+    groups,
+    footer,
+    account
+  } = t0;
+  const {
+    t
+  } = useTranslation("ui");
+  let t1;
+  if ($[0] !== t) {
+    t1 = t("settings.sections");
+    $[0] = t;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== groups) {
+    t2 = groups.map(_temp2);
+    $[2] = groups;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t2) {
+    t3 = /*#__PURE__*/_jsx("div", {
+      className: "flex min-h-0 flex-col gap-3.5 overflow-y-auto",
+      children: t2
+    });
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== account || $[7] !== footer) {
+    t4 = (footer?.length || account) && /*#__PURE__*/_jsxs("div", {
+      className: "mt-auto flex flex-col gap-3 pt-3.5",
+      children: [footer?.map(_temp3), account && /*#__PURE__*/_jsx("div", {
+        className: "-mx-3 -mb-1 border-t border-border px-3 pt-3",
+        children: account.tab
+      })]
+    });
+    $[6] = account;
+    $[7] = footer;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== t1 || $[10] !== t3 || $[11] !== t4) {
+    t5 = /*#__PURE__*/_jsxs(Tabs.List, {
+      "aria-label": t1,
+      activateOnFocus: true,
+      className: "flex min-h-0 grow flex-col",
+      children: [t3, t4]
+    });
+    $[9] = t1;
+    $[10] = t3;
+    $[11] = t4;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  return t5;
+}
+function _temp3(section_0) {
+  return /*#__PURE__*/_jsx(NavTab, {
+    section: section_0
+  }, section_0.id);
 }
-function SettingsNav({ groups, footer, account }) {
-    const { t } = useTranslation('ui');
-    return (_jsxs(Tabs.List, { "aria-label": t('settings.sections'), activateOnFocus: true, className: "flex min-h-0 grow flex-col", children: [_jsx("div", { className: "flex min-h-0 flex-col gap-3.5 overflow-y-auto", children: groups.map((group) => (_jsxs("div", { className: "flex flex-col gap-0.5", children: [group.label !== null && _jsx("span", { className: "px-2.5 pt-2.5 pb-1 text-xs font-medium text-text-faint", children: group.label }), group.sections.map((section) => (_jsx(NavTab, { section: section }, section.id)))] }, group.sections[0].id))) }), (footer?.length || account) && (_jsxs("div", { className: "mt-auto flex flex-col gap-3 pt-3.5", children: [footer?.map((section) => (_jsx(NavTab, { section: section }, section.id))), account && _jsx("div", { className: "-mx-3 -mb-1 border-t border-border px-3 pt-3", children: account.tab })] }))] }));
+function _temp2(group) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: "flex flex-col gap-0.5",
+    children: [group.label !== null && /*#__PURE__*/_jsx("span", {
+      className: "px-2.5 pt-2.5 pb-1 text-xs font-medium text-text-faint",
+      children: group.label
+    }), group.sections.map(_temp)]
+  }, group.sections[0].id);
 }
-function SearchField({ search, query, onQuery, onPick }) {
-    const { t } = useTranslation('ui');
-    const input = useRef(null);
-    const focusAt = search.focusAt ?? 0;
-    useEffect(() => {
-        if (focusAt > 0) {
-            input.current?.focus();
-            input.current?.select();
+function _temp(section) {
+  return /*#__PURE__*/_jsx(NavTab, {
+    section: section
+  }, section.id);
+}
+function SearchField(t0) {
+  const $ = _c(29);
+  const {
+    search,
+    query,
+    onQuery,
+    onPick
+  } = t0;
+  const {
+    t
+  } = useTranslation("ui");
+  const input = useRef(null);
+  const focusAt = search.focusAt ?? 0;
+  let t1;
+  let t2;
+  if ($[0] !== focusAt) {
+    t1 = () => {
+      if (focusAt > 0) {
+        input.current?.focus();
+        input.current?.select();
+      }
+    };
+    t2 = [focusAt];
+    $[0] = focusAt;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /*#__PURE__*/_jsx(Icon, {
+      icon: Search,
+      size: 14,
+      className: "pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-text-faint"
+    });
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== t) {
+    t4 = t("settings.search.placeholder");
+    $[4] = t;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  let t5;
+  if ($[6] !== t) {
+    t5 = t("settings.search.placeholder");
+    $[6] = t;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== onQuery) {
+    t6 = event => onQuery(event.target.value);
+    $[8] = onQuery;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== onPick || $[11] !== onQuery || $[12] !== query || $[13] !== search) {
+    t7 = event_0 => {
+      if (event_0.key === "Escape" && query) {
+        event_0.stopPropagation();
+        onQuery("");
+      }
+      if (event_0.key === "Enter") {
+        const first = search.find(query)[0];
+        if (first) {
+          onPick(first);
         }
-    }, [focusAt]);
-    return (_jsxs("div", { className: "relative shrink-0", children: [_jsx(Icon, { icon: Search, size: 14, className: "pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-text-faint" }), _jsx(Input, { ref: input, className: "bg-surface-sunken pr-12 pl-8 text-xs", placeholder: t('settings.search.placeholder'), "aria-label": t('settings.search.placeholder'), value: query, spellCheck: false, autoComplete: "off", onChange: (event) => onQuery(event.target.value), onKeyDown: (event) => {
-                    // Escape clears the search first; the dialog only closes on an empty field.
-                    if (event.key === 'Escape' && query) {
-                        event.stopPropagation();
-                        onQuery('');
-                    }
-                    if (event.key === 'Enter') {
-                        const first = search.find(query)[0];
-                        if (first) {
-                            onPick(first);
-                        }
-                    }
-                } }), query ? (_jsx(IconButton, { icon: X, size: "sm", label: t('settings.search.clear'), tooltip: false, className: "absolute top-1/2 right-1 -translate-y-1/2", onClick: () => onQuery('') })) : (search.hint && (_jsx("span", { className: "pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 text-xs text-text-faint", "aria-hidden": true, children: search.hint })))] }));
+      }
+    };
+    $[10] = onPick;
+    $[11] = onQuery;
+    $[12] = query;
+    $[13] = search;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] !== query || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 || $[19] !== t7) {
+    t8 = /*#__PURE__*/_jsx(Input, {
+      ref: input,
+      className: "bg-surface-sunken pr-12 pl-8 text-xs",
+      placeholder: t4,
+      "aria-label": t5,
+      value: query,
+      spellCheck: false,
+      autoComplete: "off",
+      onChange: t6,
+      onKeyDown: t7
+    });
+    $[15] = query;
+    $[16] = t4;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = t7;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  let t9;
+  if ($[21] !== onQuery || $[22] !== query || $[23] !== search.hint || $[24] !== t) {
+    t9 = query ? /*#__PURE__*/_jsx(IconButton, {
+      icon: X,
+      size: "sm",
+      label: t("settings.search.clear"),
+      tooltip: false,
+      className: "absolute top-1/2 right-1 -translate-y-1/2",
+      onClick: () => onQuery("")
+    }) : search.hint && /*#__PURE__*/_jsx("span", {
+      className: "pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 text-xs text-text-faint",
+      "aria-hidden": true,
+      children: search.hint
+    });
+    $[21] = onQuery;
+    $[22] = query;
+    $[23] = search.hint;
+    $[24] = t;
+    $[25] = t9;
+  } else {
+    t9 = $[25];
+  }
+  let t10;
+  if ($[26] !== t8 || $[27] !== t9) {
+    t10 = /*#__PURE__*/_jsxs("div", {
+      className: "relative shrink-0",
+      children: [t3, t8, t9]
+    });
+    $[26] = t8;
+    $[27] = t9;
+    $[28] = t10;
+  } else {
+    t10 = $[28];
+  }
+  return t10;
 }
 /* In place of the navigation while a query is typed: the panes and rows that match, each a jump to where it lives. */
-function SearchResults({ search, query, labelOf, onPick }) {
-    const { t, i18n } = useTranslation('ui');
-    // The language is a dependency the linter cannot see; every result reads its words off i18next.
-    // oxlint-disable-next-line react-hooks/exhaustive-deps
-    const results = useMemo(() => search.find(query), [search.find, query, i18n.language]);
-    if (results.length === 0) {
-        return _jsx("p", { className: "px-2.5 py-1 text-xs break-words text-text-muted", children: t('settings.search.none', { query: query.trim() }) });
-    }
-    return (_jsx("ul", { className: "flex min-h-0 flex-col gap-0.5 overflow-y-auto", "aria-label": t('settings.search.results'), children: results.map((result) => (_jsx("li", { children: _jsxs("button", { type: "button", className: "flex w-full min-w-0 flex-col rounded-md px-2.5 py-1.5 text-left hover:bg-surface-hover", onClick: () => onPick(result), children: [_jsx("span", { className: "truncate text-sm text-text", children: result.label }), _jsx("span", { className: "truncate text-xs text-text-faint", children: result.id === null ? t('settings.search.pane') : labelOf(result.section) })] }) }, `${result.section}:${result.id ?? ''}`))) }));
+function SearchResults({
+  search,
+  query,
+  labelOf,
+  onPick
+}) {
+  const {
+    t,
+    i18n
+  } = useTranslation('ui');
+  // The language is a dependency the linter cannot see; every result reads its words off i18next.
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
+  const results = useMemo(() => search.find(query), [search.find, query, i18n.language]);
+  if (results.length === 0) {
+    return /*#__PURE__*/_jsx("p", {
+      className: "px-2.5 py-1 text-xs break-words text-text-muted",
+      children: t('settings.search.none', {
+        query: query.trim()
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx("ul", {
+    className: "flex min-h-0 flex-col gap-0.5 overflow-y-auto",
+    "aria-label": t('settings.search.results'),
+    children: results.map(result => /*#__PURE__*/_jsx("li", {
+      children: /*#__PURE__*/_jsxs("button", {
+        type: "button",
+        className: "flex w-full min-w-0 flex-col rounded-md px-2.5 py-1.5 text-left hover:bg-surface-hover",
+        onClick: () => onPick(result),
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "truncate text-sm text-text",
+          children: result.label
+        }), /*#__PURE__*/_jsx("span", {
+          className: "truncate text-xs text-text-faint",
+          children: result.id === null ? t('settings.search.pane') : labelOf(result.section)
+        })]
+      })
+    }, `${result.section}:${result.id ?? ''}`))
+  });
 }
 /* Sections on the left, one pane on the right. A pane mounts only while its section is open. */
-export function SettingsDialog({ open, onOpenChange, section, onNavigate, groups, footer = [], account, search, target = null, onTargetShown, className, ref }) {
-    const { t } = useTranslation('ui');
-    const [query, setQuery] = useState('');
-    const sections = [...groups.flatMap((group) => group.sections), ...footer, ...(account ? [account.section] : [])];
-    const meta = sections.find((entry) => entry.id === section) ?? sections[0];
-    const items = sections.map((entry) => ({ value: entry.id, label: entry.label }));
-    const searching = search !== undefined && query.trim() !== '';
-    const floating = meta.hero !== undefined && !meta.split;
-    const barFill = useRef(null);
-    // The latest callback behind a stable one, so a lit row's timer does not start over on every render.
-    const latestShown = useRef(onTargetShown);
-    useEffect(() => {
-        latestShown.current = onTargetShown;
-    });
-    const targetValue = useMemo(() => ({ target, shown: () => latestShown.current?.() }), [target]);
-    const labelOf = (id) => sections.find((entry) => entry.id === id)?.label ?? id;
-    const pick = (result) => onNavigate({ section: result.section, target: result.id });
-    return (_jsx(DialogRoot, { open: open, onOpenChange: (next) => {
-            onOpenChange(next);
-            if (!next) {
-                setQuery('');
-            }
-        }, children: _jsxs(DialogPopup, { ref: ref, className: clsx('flex h-[760px] w-[1200px]', className), children: [_jsxs(Tabs.Root, { value: meta.id, onValueChange: (value) => onNavigate({ section: value }), orientation: "vertical", className: "flex min-h-0 min-w-0 grow max-[640px]:flex-col", children: [_jsxs("div", { className: "flex w-58 shrink-0 flex-col gap-3.5 border-r border-border bg-surface bg-clip-padding px-3 py-4 max-[960px]:w-48 max-[640px]:w-auto max-[640px]:flex-row max-[640px]:items-center max-[640px]:border-r-0 max-[640px]:border-b", children: [_jsx(DialogTitle, { className: "px-2.5 pt-1 max-[640px]:pt-0", children: t('settings.title') }), _jsxs("div", { className: "contents max-[640px]:hidden", children: [search && _jsx(SearchField, { search: search, query: query, onQuery: setQuery, onPick: pick }), searching ? (_jsx(SearchResults, { search: search, query: query, labelOf: labelOf, onPick: pick })) : (_jsx(SettingsNav, { groups: groups, footer: footer, account: account }))] }), _jsx("div", { className: "min-w-0 grow min-[641px]:hidden", children: _jsx(Select, { value: meta.id, items: items, onValueChange: (value) => onNavigate({ section: value }), label: t('settings.section') }) })] }), _jsxs("div", { className: "relative flex min-h-0 min-w-0 grow flex-col", children: [_jsxs("div", { className: clsx('flex min-w-0 items-start gap-4 px-8 pt-5.5 pb-4.5 max-[960px]:px-4', floating && 'absolute inset-x-0 top-0 z-10'), children: [floating && (_jsx("div", { ref: barFill, className: "absolute inset-0 -z-10 border-b border-border bg-surface-raised opacity-0", "aria-hidden": true }, meta.id)), _jsxs("div", { className: "min-w-0 grow", children: [_jsx("h2", { className: "text-lg font-semibold text-text", children: meta.label }), _jsx("p", { className: "mt-0.5 text-xs break-words text-text-muted", children: meta.description })] }), _jsx(CloseButton, { label: t('settings.close'), dialog: true })] }), _jsx(SettingsTargetContext, { value: targetValue, children: sections.map((entry) => {
-                                        const Pane = entry.pane;
-                                        const Hero = entry.split ? undefined : entry.hero;
-                                        return (_jsx(Tabs.Panel, { value: entry.id, keepMounted: false, className: clsx('flex min-h-0 min-w-0 grow flex-col outline-none', 
-                                            // A split pane scrolls each of its sides itself.
-                                            !entry.split && 'gap-7 overflow-y-auto px-8 pb-10 max-[960px]:px-4', 
-                                            // Under a hero the bar's fill marks the edge; a fade would wipe the hero out behind the clear bar.
-                                            !entry.split && !Hero && 'scroll-fade-top pt-1'), onScroll: (event) => {
-                                                const top = event.currentTarget.scrollTop;
-                                                event.currentTarget.toggleAttribute('data-fade-start', top > 0);
-                                                barFill.current?.style.setProperty('opacity', String(Math.min(top / BAR_FILL_DISTANCE, 1)));
-                                            }, children: _jsx(ErrorBoundary, { label: t('settings.failed'), className: "min-h-0 grow", children: _jsxs(LazyBoundary, { children: [Hero && (_jsx("div", { className: "-mx-8 shrink-0 max-[960px]:-mx-4", children: _jsx(Hero, {}) })), _jsx(Pane, {})] }) }) }, entry.id));
-                                    }) })] })] }), _jsx(DialogDescription, { className: "sr-only", children: meta.description })] }) }));
+export function SettingsDialog(t0) {
+  const $ = _c(110);
+  const {
+    open,
+    onOpenChange,
+    section,
+    onNavigate,
+    groups,
+    footer: t1,
+    account,
+    search,
+    target: t2,
+    onTargetShown,
+    className,
+    ref
+  } = t0;
+  let t3;
+  if ($[0] !== t1) {
+    t3 = t1 === undefined ? [] : t1;
+    $[0] = t1;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const footer = t3;
+  const target = t2 === undefined ? null : t2;
+  const {
+    t
+  } = useTranslation("ui");
+  const [query, setQuery] = useState("");
+  let t4;
+  if ($[2] !== account || $[3] !== footer || $[4] !== groups) {
+    let t5;
+    if ($[6] !== account) {
+      t5 = account ? [account.section] : [];
+      $[6] = account;
+      $[7] = t5;
+    } else {
+      t5 = $[7];
+    }
+    t4 = [...groups.flatMap(_temp4), ...footer, ...t5];
+    $[2] = account;
+    $[3] = footer;
+    $[4] = groups;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const sections = t4;
+  let t5;
+  if ($[8] !== section || $[9] !== sections) {
+    t5 = sections.find(entry => entry.id === section) ?? sections[0];
+    $[8] = section;
+    $[9] = sections;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  const meta = t5;
+  let t6;
+  if ($[11] !== sections) {
+    t6 = sections.map(_temp5);
+    $[11] = sections;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  const items = t6;
+  let t7;
+  if ($[13] !== query || $[14] !== search) {
+    t7 = search !== undefined && query.trim() !== "";
+    $[13] = query;
+    $[14] = search;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  const searching = t7;
+  const floating = meta.hero !== undefined && !meta.split;
+  const barFill = useRef(null);
+  const latestShown = useRef(onTargetShown);
+  let t8;
+  if ($[16] !== onTargetShown) {
+    t8 = () => {
+      latestShown.current = onTargetShown;
+    };
+    $[16] = onTargetShown;
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  useEffect(t8);
+  let t9;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = () => latestShown.current?.();
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  let t10;
+  if ($[19] !== target) {
+    t10 = {
+      target,
+      shown: t9
+    };
+    $[19] = target;
+    $[20] = t10;
+  } else {
+    t10 = $[20];
+  }
+  const targetValue = t10;
+  let t11;
+  if ($[21] !== sections) {
+    t11 = id => sections.find(entry_1 => entry_1.id === id)?.label ?? id;
+    $[21] = sections;
+    $[22] = t11;
+  } else {
+    t11 = $[22];
+  }
+  const labelOf = t11;
+  let t12;
+  if ($[23] !== onNavigate) {
+    t12 = result => onNavigate({
+      section: result.section,
+      target: result.id
+    });
+    $[23] = onNavigate;
+    $[24] = t12;
+  } else {
+    t12 = $[24];
+  }
+  const pick = t12;
+  let t13;
+  if ($[25] !== onOpenChange) {
+    t13 = next => {
+      onOpenChange(next);
+      if (!next) {
+        setQuery("");
+      }
+    };
+    $[25] = onOpenChange;
+    $[26] = t13;
+  } else {
+    t13 = $[26];
+  }
+  let t14;
+  if ($[27] !== className) {
+    t14 = clsx("flex h-[760px] w-[1200px]", className);
+    $[27] = className;
+    $[28] = t14;
+  } else {
+    t14 = $[28];
+  }
+  const t15 = meta.id;
+  let t16;
+  if ($[29] !== onNavigate) {
+    t16 = value => onNavigate({
+      section: value
+    });
+    $[29] = onNavigate;
+    $[30] = t16;
+  } else {
+    t16 = $[30];
+  }
+  let t17;
+  if ($[31] !== t) {
+    t17 = t("settings.title");
+    $[31] = t;
+    $[32] = t17;
+  } else {
+    t17 = $[32];
+  }
+  let t18;
+  if ($[33] !== t17) {
+    t18 = /*#__PURE__*/_jsx(DialogTitle, {
+      className: "px-2.5 pt-1 max-[640px]:pt-0",
+      children: t17
+    });
+    $[33] = t17;
+    $[34] = t18;
+  } else {
+    t18 = $[34];
+  }
+  let t19;
+  if ($[35] !== pick || $[36] !== query || $[37] !== search) {
+    t19 = search && /*#__PURE__*/_jsx(SearchField, {
+      search: search,
+      query: query,
+      onQuery: setQuery,
+      onPick: pick
+    });
+    $[35] = pick;
+    $[36] = query;
+    $[37] = search;
+    $[38] = t19;
+  } else {
+    t19 = $[38];
+  }
+  let t20;
+  if ($[39] !== account || $[40] !== footer || $[41] !== groups || $[42] !== labelOf || $[43] !== pick || $[44] !== query || $[45] !== search || $[46] !== searching) {
+    t20 = searching ? /*#__PURE__*/_jsx(SearchResults, {
+      search: search,
+      query: query,
+      labelOf: labelOf,
+      onPick: pick
+    }) : /*#__PURE__*/_jsx(SettingsNav, {
+      groups: groups,
+      footer: footer,
+      account: account
+    });
+    $[39] = account;
+    $[40] = footer;
+    $[41] = groups;
+    $[42] = labelOf;
+    $[43] = pick;
+    $[44] = query;
+    $[45] = search;
+    $[46] = searching;
+    $[47] = t20;
+  } else {
+    t20 = $[47];
+  }
+  let t21;
+  if ($[48] !== t19 || $[49] !== t20) {
+    t21 = /*#__PURE__*/_jsxs("div", {
+      className: "contents max-[640px]:hidden",
+      children: [t19, t20]
+    });
+    $[48] = t19;
+    $[49] = t20;
+    $[50] = t21;
+  } else {
+    t21 = $[50];
+  }
+  const t22 = meta.id;
+  let t23;
+  if ($[51] !== onNavigate) {
+    t23 = value_0 => onNavigate({
+      section: value_0
+    });
+    $[51] = onNavigate;
+    $[52] = t23;
+  } else {
+    t23 = $[52];
+  }
+  let t24;
+  if ($[53] !== t) {
+    t24 = t("settings.section");
+    $[53] = t;
+    $[54] = t24;
+  } else {
+    t24 = $[54];
+  }
+  let t25;
+  if ($[55] !== items || $[56] !== meta.id || $[57] !== t23 || $[58] !== t24) {
+    t25 = /*#__PURE__*/_jsx("div", {
+      className: "min-w-0 grow min-[641px]:hidden",
+      children: /*#__PURE__*/_jsx(Select, {
+        value: t22,
+        items: items,
+        onValueChange: t23,
+        label: t24
+      })
+    });
+    $[55] = items;
+    $[56] = meta.id;
+    $[57] = t23;
+    $[58] = t24;
+    $[59] = t25;
+  } else {
+    t25 = $[59];
+  }
+  let t26;
+  if ($[60] !== t18 || $[61] !== t21 || $[62] !== t25) {
+    t26 = /*#__PURE__*/_jsxs("div", {
+      className: "flex w-58 shrink-0 flex-col gap-3.5 border-r border-border bg-surface bg-clip-padding px-3 py-4 max-[960px]:w-48 max-[640px]:w-auto max-[640px]:flex-row max-[640px]:items-center max-[640px]:border-r-0 max-[640px]:border-b",
+      children: [t18, t21, t25]
+    });
+    $[60] = t18;
+    $[61] = t21;
+    $[62] = t25;
+    $[63] = t26;
+  } else {
+    t26 = $[63];
+  }
+  const t27 = floating && "absolute inset-x-0 top-0 z-10";
+  let t28;
+  if ($[64] !== t27) {
+    t28 = clsx("flex min-w-0 items-start gap-4 px-8 pt-5.5 pb-4.5 max-[960px]:px-4", t27);
+    $[64] = t27;
+    $[65] = t28;
+  } else {
+    t28 = $[65];
+  }
+  let t29;
+  if ($[66] !== floating || $[67] !== meta.id) {
+    t29 = floating && /*#__PURE__*/_jsx("div", {
+      ref: barFill,
+      className: "absolute inset-0 -z-10 border-b border-border bg-surface-raised opacity-0",
+      "aria-hidden": true
+    }, meta.id);
+    $[66] = floating;
+    $[67] = meta.id;
+    $[68] = t29;
+  } else {
+    t29 = $[68];
+  }
+  let t30;
+  if ($[69] !== meta.label) {
+    t30 = /*#__PURE__*/_jsx("h2", {
+      className: "text-lg font-semibold text-text",
+      children: meta.label
+    });
+    $[69] = meta.label;
+    $[70] = t30;
+  } else {
+    t30 = $[70];
+  }
+  let t31;
+  if ($[71] !== meta.description) {
+    t31 = /*#__PURE__*/_jsx("p", {
+      className: "mt-0.5 text-xs break-words text-text-muted",
+      children: meta.description
+    });
+    $[71] = meta.description;
+    $[72] = t31;
+  } else {
+    t31 = $[72];
+  }
+  let t32;
+  if ($[73] !== t30 || $[74] !== t31) {
+    t32 = /*#__PURE__*/_jsxs("div", {
+      className: "min-w-0 grow",
+      children: [t30, t31]
+    });
+    $[73] = t30;
+    $[74] = t31;
+    $[75] = t32;
+  } else {
+    t32 = $[75];
+  }
+  let t33;
+  if ($[76] !== t) {
+    t33 = t("settings.close");
+    $[76] = t;
+    $[77] = t33;
+  } else {
+    t33 = $[77];
+  }
+  let t34;
+  if ($[78] !== t33) {
+    t34 = /*#__PURE__*/_jsx(CloseButton, {
+      label: t33,
+      dialog: true
+    });
+    $[78] = t33;
+    $[79] = t34;
+  } else {
+    t34 = $[79];
+  }
+  let t35;
+  if ($[80] !== t28 || $[81] !== t29 || $[82] !== t32 || $[83] !== t34) {
+    t35 = /*#__PURE__*/_jsxs("div", {
+      className: t28,
+      children: [t29, t32, t34]
+    });
+    $[80] = t28;
+    $[81] = t29;
+    $[82] = t32;
+    $[83] = t34;
+    $[84] = t35;
+  } else {
+    t35 = $[84];
+  }
+  let t36;
+  if ($[85] !== sections || $[86] !== t) {
+    t36 = sections.map(entry_2 => {
+      const Pane = entry_2.pane;
+      const Hero = entry_2.split ? undefined : entry_2.hero;
+      return /*#__PURE__*/_jsx(Tabs.Panel, {
+        value: entry_2.id,
+        keepMounted: false,
+        className: clsx("flex min-h-0 min-w-0 grow flex-col outline-none", !entry_2.split && "gap-7 overflow-y-auto px-8 pb-10 max-[960px]:px-4", !entry_2.split && !Hero && "scroll-fade-top pt-1"),
+        onScroll: event => {
+          const top = event.currentTarget.scrollTop;
+          event.currentTarget.toggleAttribute("data-fade-start", top > 0);
+          barFill.current?.style.setProperty("opacity", String(Math.min(top / BAR_FILL_DISTANCE, 1)));
+        },
+        children: /*#__PURE__*/_jsx(ErrorBoundary, {
+          label: t("settings.failed"),
+          className: "min-h-0 grow",
+          children: /*#__PURE__*/_jsxs(LazyBoundary, {
+            children: [Hero && /*#__PURE__*/_jsx("div", {
+              className: "-mx-8 shrink-0 max-[960px]:-mx-4",
+              children: /*#__PURE__*/_jsx(Hero, {})
+            }), /*#__PURE__*/_jsx(Pane, {})]
+          })
+        })
+      }, entry_2.id);
+    });
+    $[85] = sections;
+    $[86] = t;
+    $[87] = t36;
+  } else {
+    t36 = $[87];
+  }
+  let t37;
+  if ($[88] !== t36 || $[89] !== targetValue) {
+    t37 = /*#__PURE__*/_jsx(SettingsTargetContext, {
+      value: targetValue,
+      children: t36
+    });
+    $[88] = t36;
+    $[89] = targetValue;
+    $[90] = t37;
+  } else {
+    t37 = $[90];
+  }
+  let t38;
+  if ($[91] !== t35 || $[92] !== t37) {
+    t38 = /*#__PURE__*/_jsxs("div", {
+      className: "relative flex min-h-0 min-w-0 grow flex-col",
+      children: [t35, t37]
+    });
+    $[91] = t35;
+    $[92] = t37;
+    $[93] = t38;
+  } else {
+    t38 = $[93];
+  }
+  let t39;
+  if ($[94] !== meta.id || $[95] !== t16 || $[96] !== t26 || $[97] !== t38) {
+    t39 = /*#__PURE__*/_jsxs(Tabs.Root, {
+      value: t15,
+      onValueChange: t16,
+      orientation: "vertical",
+      className: "flex min-h-0 min-w-0 grow max-[640px]:flex-col",
+      children: [t26, t38]
+    });
+    $[94] = meta.id;
+    $[95] = t16;
+    $[96] = t26;
+    $[97] = t38;
+    $[98] = t39;
+  } else {
+    t39 = $[98];
+  }
+  let t40;
+  if ($[99] !== meta.description) {
+    t40 = /*#__PURE__*/_jsx(DialogDescription, {
+      className: "sr-only",
+      children: meta.description
+    });
+    $[99] = meta.description;
+    $[100] = t40;
+  } else {
+    t40 = $[100];
+  }
+  let t41;
+  if ($[101] !== ref || $[102] !== t14 || $[103] !== t39 || $[104] !== t40) {
+    t41 = /*#__PURE__*/_jsxs(DialogPopup, {
+      ref: ref,
+      className: t14,
+      children: [t39, t40]
+    });
+    $[101] = ref;
+    $[102] = t14;
+    $[103] = t39;
+    $[104] = t40;
+    $[105] = t41;
+  } else {
+    t41 = $[105];
+  }
+  let t42;
+  if ($[106] !== open || $[107] !== t13 || $[108] !== t41) {
+    t42 = /*#__PURE__*/_jsx(DialogRoot, {
+      open: open,
+      onOpenChange: t13,
+      children: t41
+    });
+    $[106] = open;
+    $[107] = t13;
+    $[108] = t41;
+    $[109] = t42;
+  } else {
+    t42 = $[109];
+  }
+  return t42;
+}
+function _temp5(entry_0) {
+  return {
+    value: entry_0.id,
+    label: entry_0.label
+  };
 }
+function _temp4(group) {
+  return group.sections;
+}