@kilivi/payloadcms-theme-management 2.0.0 → 2.2.0

package/dist/fields/ThemeTokenSelectField.js

@@ -1,9 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useField } from '@payloadcms/ui';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Check, ChevronDown } from 'lucide-react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { allThemePresets, fetchThemeConfiguration } from '../index.js';
-import { getAdminLanguage } from '../utils/getAdminLanguage.js';
+import { useThemeLanguage, useThemeTranslations } from '../hooks/useThemeTranslations.js';
 import { inferTenant } from '../utils/inferTenant.js';
 import { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js';
 const FALLBACK_TOKENS = [
@@ -11,7 +12,7 @@ const FALLBACK_TOKENS = [
         value: 'background',
         label: {
             en: 'Theme background',
-            cs: 'Pozadí tématu'
+            cs: 'Pozadí motivu'
         },
         color: 'var(--background)'
     },
@@ -83,7 +84,7 @@ function buildOptionsFromConfiguration(configuration, themePresets) {
         const labelMap = {
             background: {
                 en: 'Theme background',
-                cs: 'Pozadí tématu'
+                cs: 'Pozadí motivu'
             },
             card: {
                 en: 'Card background',
@@ -137,6 +138,9 @@ export default function ThemeTokenSelectField(props) {
     });
     const [options, setOptions] = useState(FALLBACK_TOKENS);
     const selectedValue = value || 'background';
+    // Active Payload admin language (reactive via Payload's i18n context).
+    const adminLang = useThemeLanguage();
+    const t = useThemeTranslations();
     // Get themePresets from admin.custom or use defaults
     const themePresets = useMemo(()=>{
         const customPresets = field.admin?.custom?.themePresets;
@@ -150,7 +154,7 @@ export default function ThemeTokenSelectField(props) {
             setOptions(buildOptionsFromConfiguration(formThemeConfiguration, themePresets));
             return;
         }
-        let isMounted = true;
+        const controller = new AbortController();
         const custom = field.admin?.custom;
         // Prefer tenant ID from the current form (`formTenant`) first since editor fills the relation id.
         // If the relation is an object, prefer `id` over `slug` to avoid passing a human-readable slug when an id is available.
@@ -164,8 +168,6 @@ export default function ThemeTokenSelectField(props) {
             return undefined;
         })();
         const inferredTenant = tenantFromForm ?? custom?.tenantSlug ?? inferTenant();
-        // Determine admin language to pass as `locale` to fetch, if not provided
-        const adminLang = getAdminLanguage();
         // Normalize fetch options so that even when callers provide an empty object ("{}"),
         // we still ensure `tenantSlug` and `locale` are set to sensible defaults (inferred/form/adminLang).
         const rawFetchOpts = custom?.fetchThemeConfigurationOptions ?? custom?.fetchOptions ?? (custom?.collectionSlug || typeof custom?.useGlobal !== 'undefined' ? {
@@ -181,10 +183,11 @@ export default function ThemeTokenSelectField(props) {
         const fetchOpts = {
             ...rawFetchOpts ?? {},
             tenantSlug: rawFetchOpts?.tenantSlug ?? inferredTenant,
-            locale: rawFetchOpts?.locale ?? adminLang
+            locale: rawFetchOpts?.locale ?? adminLang,
+            signal: controller.signal
         };
         fetchThemeConfiguration(fetchOpts).then(async (configuration)=>{
-            if (!isMounted) return;
+            if (controller.signal.aborted) return;
             if (configuration) {
                 setOptions(buildOptionsFromConfiguration(configuration, themePresets));
                 return;
@@ -200,10 +203,11 @@ export default function ThemeTokenSelectField(props) {
                         useGlobal: true,
                         collectionSlug: fallbackCollection,
                         tenantSlug: inferredTenant,
-                        locale: custom?.locale ?? adminLang
+                        locale: custom?.locale ?? adminLang,
+                        signal: controller.signal
                     };
                     const fallbackConfig = await fetchThemeConfiguration(fallbackOpts);
-                    if (!isMounted) return;
+                    if (controller.signal.aborted) return;
                     if (fallbackConfig) {
                         // Found theme config in global, use it
                         setOptions(buildOptionsFromConfiguration(fallbackConfig, themePresets));
@@ -217,39 +221,20 @@ export default function ThemeTokenSelectField(props) {
             setOptions(buildOptionsFromConfiguration(configuration, themePresets));
         });
         return ()=>{
-            isMounted = false;
+            controller.abort();
         };
     }, [
         themePresets,
         field.admin?.custom,
         formThemeConfiguration,
-        formTenant
+        formTenant,
+        adminLang
     ]);
     const handleSelect = useCallback((nextValue)=>{
         setValue(nextValue);
     }, [
         setValue
     ]);
-    // Make admin language reactive so switching admin UI language updates labels
-    const initialAdminLang = getAdminLanguage();
-    const [adminLang, setAdminLang] = useState(initialAdminLang);
-    useEffect(()=>{
-        if (typeof document === 'undefined' || !('MutationObserver' in window)) return;
-        const el = document.documentElement;
-        const obs = new MutationObserver(()=>{
-            const next = getAdminLanguage();
-            if (next !== adminLang) setAdminLang(next);
-        });
-        obs.observe(el, {
-            attributes: true,
-            attributeFilter: [
-                'lang'
-            ]
-        });
-        return ()=>obs.disconnect();
-    }, [
-        adminLang
-    ]);
     const label = typeof field.label === 'string' ? field.label : field.label && field.label[adminLang] || field.label?.en || field.label?.cs || '';
     let description = '';
     if (typeof field.admin?.description === 'string') {
@@ -280,12 +265,105 @@ export default function ThemeTokenSelectField(props) {
             return color;
         }
     };
+    const selectedIndex = options.findIndex((opt)=>opt.value === selectedValue);
+    const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : undefined;
+    const selectedColor = selectedOption ? resolveCssColor(selectedOption.color) : '';
+    const selectedLabel = selectedOption ? getOptionLabel(selectedOption) : '';
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const baseId = useId();
+    const labelId = `${baseId}-label`;
+    const listboxId = `${baseId}-listbox`;
+    const optionId = (index)=>`${baseId}-option-${index}`;
+    const containerRef = useRef(null);
+    const triggerRef = useRef(null);
+    const listboxRef = useRef(null);
+    const openList = (index = selectedIndex >= 0 ? selectedIndex : 0)=>{
+        setActiveIndex(index);
+        setIsOpen(true);
+    };
+    const closeList = useCallback((restoreFocus)=>{
+        setIsOpen(false);
+        if (restoreFocus) triggerRef.current?.focus();
+    }, []);
+    const chooseOption = (index)=>{
+        const option = options[index];
+        if (!option) return;
+        handleSelect(option.value);
+        closeList(true);
+    };
+    useEffect(()=>{
+        if (!isOpen) return;
+        listboxRef.current?.focus();
+        const handlePointerOutside = (event)=>{
+            if (!containerRef.current?.contains(event.target)) closeList(false);
+        };
+        document.addEventListener('pointerdown', handlePointerOutside);
+        return ()=>document.removeEventListener('pointerdown', handlePointerOutside);
+    }, [
+        isOpen,
+        closeList
+    ]);
+    useEffect(()=>{
+        if (!isOpen || activeIndex < 0) return;
+        listboxRef.current?.querySelector(`#${CSS.escape(optionId(activeIndex))}`)?.scrollIntoView({
+            block: 'nearest'
+        });
+    }, [
+        isOpen,
+        activeIndex
+    ]);
+    const handleTriggerKeyDown = (event)=>{
+        if ([
+            'ArrowDown',
+            'ArrowUp',
+            'Enter',
+            ' '
+        ].includes(event.key)) {
+            event.preventDefault();
+            openList();
+        }
+    };
+    const handleListboxKeyDown = (event)=>{
+        const last = options.length - 1;
+        switch(event.key){
+            case 'ArrowDown':
+                event.preventDefault();
+                setActiveIndex((i)=>Math.min(last, i + 1));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                setActiveIndex((i)=>Math.max(0, i - 1));
+                break;
+            case 'Home':
+                event.preventDefault();
+                setActiveIndex(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                setActiveIndex(last);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                chooseOption(activeIndex);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                closeList(true);
+                break;
+            case 'Tab':
+                closeList(false);
+                break;
+        }
+    };
     return /*#__PURE__*/ _jsxs("div", {
         className: "field-type theme-token-select",
         children: [
-            label && /*#__PURE__*/ _jsxs("label", {
+            label && /*#__PURE__*/ _jsxs("div", {
                 className: "field-label",
-                htmlFor: path,
+                id: labelId,
                 style: {
                     display: 'block',
                     marginBottom: '8px'
@@ -303,69 +381,189 @@ export default function ThemeTokenSelectField(props) {
                 style: {
                     marginBottom: '12px',
                     fontSize: '13px',
-                    color: 'var(--theme-elevation-500)'
+                    color: 'var(--theme-elevation-600)'
                 },
                 children: description
             }),
-            /*#__PURE__*/ _jsx("div", {
-                className: "token-grid",
+            /*#__PURE__*/ _jsxs("div", {
                 style: {
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
-                    gap: '10px'
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '12px',
+                    position: 'relative'
                 },
-                children: options.map((option)=>{
-                    const isActive = option.value === selectedValue;
-                    return /*#__PURE__*/ _jsxs("button", {
-                        type: "button",
-                        onClick: ()=>handleSelect(option.value),
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        "aria-hidden": true,
+                        style: {
+                            width: '40px',
+                            height: '40px',
+                            borderRadius: '8px',
+                            border: '2px solid var(--theme-elevation-200)',
+                            backgroundColor: selectedColor,
+                            flexShrink: 0,
+                            boxShadow: selectedColor ? '0 2px 8px rgba(0, 0, 0, 0.1)' : 'inset 0 1px 2px rgba(0, 0, 0, 0.05)'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        ref: containerRef,
                         style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '10px',
-                            padding: '10px 12px',
-                            borderRadius: '10px',
-                            border: isActive ? '2px solid var(--theme-success-500)' : '1px solid var(--theme-elevation-150)',
-                            backgroundColor: 'var(--theme-elevation-0)',
-                            boxShadow: isActive ? '0 10px 20px -10px rgba(59, 130, 246, 0.4)' : '0 1px 2px rgba(15, 23, 42, 0.08)',
-                            cursor: 'pointer',
-                            transition: 'border-color 0.2s ease, box-shadow 0.2s ease'
+                            flex: 1,
+                            minWidth: 0,
+                            position: 'relative'
                         },
                         children: [
-                            /*#__PURE__*/ _jsx("span", {
-                                "aria-hidden": true,
+                            /*#__PURE__*/ _jsxs("button", {
+                                ref: triggerRef,
+                                id: path,
+                                type: "button",
+                                role: "combobox",
+                                "aria-haspopup": "listbox",
+                                "aria-expanded": isOpen,
+                                "aria-controls": isOpen ? listboxId : undefined,
+                                "aria-labelledby": label ? `${labelId} ${baseId}-value` : undefined,
+                                onClick: ()=>isOpen ? closeList(false) : openList(),
+                                onKeyDown: handleTriggerKeyDown,
                                 style: {
-                                    width: '32px',
-                                    height: '32px',
+                                    width: '100%',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    gap: '8px',
+                                    padding: '10px 12px',
                                     borderRadius: '8px',
-                                    border: '1px solid rgba(15, 23, 42, 0.08)',
-                                    backgroundColor: resolveCssColor(option.color),
-                                    flexShrink: 0
-                                }
+                                    border: '1px solid var(--theme-elevation-200)',
+                                    backgroundColor: 'var(--theme-input-bg, var(--theme-elevation-0))',
+                                    color: 'var(--theme-elevation-900)',
+                                    fontSize: '14px',
+                                    fontWeight: 500,
+                                    cursor: 'pointer',
+                                    textAlign: 'left'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        id: `${baseId}-value`,
+                                        style: {
+                                            minWidth: 0
+                                        },
+                                        children: selectedLabel
+                                    }),
+                                    /*#__PURE__*/ _jsx(ChevronDown, {
+                                        size: 14,
+                                        "aria-hidden": true,
+                                        style: {
+                                            flexShrink: 0,
+                                            transform: isOpen ? 'rotate(180deg)' : undefined
+                                        }
+                                    })
+                                ]
                             }),
-                            /*#__PURE__*/ _jsx("span", {
+                            isOpen && /*#__PURE__*/ _jsx("div", {
+                                ref: listboxRef,
+                                id: listboxId,
+                                role: "listbox",
+                                tabIndex: -1,
+                                "aria-labelledby": label ? labelId : undefined,
+                                "aria-activedescendant": activeIndex >= 0 ? optionId(activeIndex) : undefined,
+                                onKeyDown: handleListboxKeyDown,
                                 style: {
-                                    fontSize: '13px',
-                                    fontWeight: 600,
-                                    color: 'var(--theme-elevation-800)'
+                                    position: 'absolute',
+                                    top: '100%',
+                                    left: 0,
+                                    right: 0,
+                                    marginTop: '4px',
+                                    backgroundColor: 'var(--theme-elevation-0)',
+                                    border: '1px solid var(--theme-elevation-200)',
+                                    borderRadius: '8px',
+                                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+                                    zIndex: 1000,
+                                    maxHeight: '300px',
+                                    overflowY: 'auto'
                                 },
-                                children: getOptionLabel(option)
+                                children: options.map((option, index)=>{
+                                    const isSelected = option.value === selectedValue;
+                                    const isActive = index === activeIndex;
+                                    const optionColor = resolveCssColor(option.color);
+                                    return /*#__PURE__*/ _jsxs("div", {
+                                        id: optionId(index),
+                                        role: "option",
+                                        "aria-selected": isSelected,
+                                        onClick: ()=>chooseOption(index),
+                                        onPointerMove: ()=>setActiveIndex(index),
+                                        style: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: '10px',
+                                            padding: '10px 12px',
+                                            backgroundColor: isActive ? 'var(--theme-elevation-100)' : isSelected ? 'var(--theme-elevation-50)' : 'transparent',
+                                            outline: isActive ? '2px solid var(--theme-elevation-800)' : undefined,
+                                            outlineOffset: '-2px',
+                                            color: 'var(--theme-elevation-900)',
+                                            fontSize: '14px',
+                                            fontWeight: isSelected ? 600 : 500,
+                                            cursor: 'pointer'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                "aria-hidden": true,
+                                                style: {
+                                                    width: '24px',
+                                                    height: '24px',
+                                                    borderRadius: '6px',
+                                                    border: '1px solid var(--theme-elevation-150)',
+                                                    backgroundColor: optionColor,
+                                                    flexShrink: 0
+                                                }
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                style: {
+                                                    flex: 1
+                                                },
+                                                children: getOptionLabel(option)
+                                            }),
+                                            isSelected && /*#__PURE__*/ _jsx(Check, {
+                                                size: 14,
+                                                "aria-hidden": true
+                                            })
+                                        ]
+                                    }, option.value);
+                                })
                             })
                         ]
-                    }, option.value);
-                })
+                    })
+                ]
             }),
-            /*#__PURE__*/ _jsx("select", {
-                id: path,
-                value: selectedValue,
-                onChange: (event)=>handleSelect(event.target.value),
+            selectedLabel && /*#__PURE__*/ _jsxs("div", {
                 style: {
-                    display: 'none'
+                    marginTop: '10px',
+                    padding: '8px 12px',
+                    borderRadius: '6px',
+                    backgroundColor: 'var(--theme-elevation-50)',
+                    fontSize: '12px',
+                    color: 'var(--theme-elevation-700)'
                 },
-                children: options.map((option)=>/*#__PURE__*/ _jsx("option", {
-                        value: option.value,
-                        children: getOptionLabel(option)
-                    }, option.value))
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        style: {
+                            fontWeight: 600
+                        },
+                        children: t.ui.selectedColor
+                    }),
+                    " ",
+                    selectedLabel,
+                    selectedColor && selectedColor !== '' && /*#__PURE__*/ _jsxs("span", {
+                        style: {
+                            marginLeft: '8px',
+                            fontFamily: 'monospace',
+                            color: 'var(--theme-elevation-600)'
+                        },
+                        children: [
+                            "(",
+                            selectedColor,
+                            ")"
+                        ]
+                    })
+                ]
             })
         ]
     });

package/dist/fields/ThemeTokenSelectField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/ThemeTokenSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientProps } from 'payload'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { allThemePresets, fetchThemeConfiguration } from '../index.js'\nimport type { SiteThemeConfiguration } from '../payload-types.js'\nimport type { ThemePreset } from '../presets.js'\nimport type { FetchThemeConfigurationOptions } from '../types.js'\nimport { getAdminLanguage } from '../utils/getAdminLanguage.js'\nimport { inferTenant } from '../utils/inferTenant.js'\nimport { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\n\ninterface ThemeColorOption {\n  value: string\n  label: string | { [key: string]: string | undefined }\n  color: string\n  description?: string\n}\n\nconst FALLBACK_TOKENS: ThemeColorOption[] = [\n  {\n    value: 'background',\n    label: { en: 'Theme background', cs: 'Pozadí tématu' },\n    color: 'var(--background)',\n  },\n  { value: 'card', label: { en: 'Card background', cs: 'Pozadí karty' }, color: 'var(--card)' },\n  { value: 'muted', label: { en: 'Muted surface', cs: 'Tlumený povrch' }, color: 'var(--muted)' },\n  {\n    value: 'accent',\n    label: { en: 'Accent surface', cs: 'Akcentní povrch' },\n    color: 'var(--accent)',\n  },\n  {\n    value: 'secondary',\n    label: { en: 'Secondary surface', cs: 'Sekundární povrch' },\n    color: 'var(--secondary)',\n  },\n  {\n    value: 'primary',\n    label: { en: 'Primary surface', cs: 'Primární povrch' },\n    color: 'var(--primary)',\n  },\n]\n\n// Use plugin-provided fetch helper which supports collection/global and options\n// This will use `collectionSlug`, `useGlobal`, tenant, locale, depth, draft, etc.\n// Accept fetch options from field.admin.custom to allow overrides in different setups.\n\nfunction buildOptionsFromConfiguration(\n  configuration: SiteThemeConfiguration | Record<string, unknown> | null,\n  themePresets: ThemePreset[],\n): ThemeColorOption[] {\n  if (!configuration) {\n    return FALLBACK_TOKENS\n  }\n\n  const resolved = resolveThemeConfiguration(configuration)\n  const lightMode = resolved.lightMode ?? themePresets[0]?.lightMode ?? {}\n  const orderedKeys: string[] = [\n    'background',\n    'card',\n    'muted',\n    'accent',\n    'secondary',\n    'primary',\n    'popover',\n  ]\n\n  const typedLightMode = lightMode as Record<string, string | null | undefined>\n\n  const tokens = orderedKeys\n    .map((key) => {\n      const value = typedLightMode?.[key]\n      if (typeof value !== 'string' || value.trim().length === 0) {\n        return null\n      }\n\n      const labelMap: Record<string, { en: string; cs: string }> = {\n        background: { en: 'Theme background', cs: 'Pozadí tématu' },\n        card: { en: 'Card background', cs: 'Pozadí karty' },\n        muted: { en: 'Muted surface', cs: 'Tlumený povrch' },\n        accent: { en: 'Accent surface', cs: 'Akcentní povrch' },\n        secondary: { en: 'Secondary surface', cs: 'Sekundární povrch' },\n        primary: { en: 'Primary surface', cs: 'Primární povrch' },\n        popover: { en: 'Popover surface', cs: 'Popover povrch' },\n      }\n\n      return {\n        value: key,\n        label: labelMap[key] ?? { en: key, cs: key },\n        color: value,\n      }\n    })\n    .filter((token): token is NonNullable<typeof token> => token !== null)\n\n  return tokens.length > 0 ? tokens : FALLBACK_TOKENS\n}\n\nexport default function ThemeTokenSelectField(props: SelectFieldClientProps) {\n  const { path, field } = props\n  const { value, setValue } = useField<string>({ path })\n  // Try to read themeConfiguration from the active form (Site Settings) first\n  const { value: formThemeConfiguration } = useField<SiteThemeConfiguration | null>({\n    path: 'themeConfiguration',\n  })\n\n  // Read tenant from the current form (sibling data) where present.\n  // Prefer `tenant` field as it is populated correctly in most setups.\n  const { value: formTenant } = useField<any>({ path: 'tenant' })\n\n  const [options, setOptions] = useState<ThemeColorOption[]>(FALLBACK_TOKENS)\n  const selectedValue = value || 'background'\n\n  // Get themePresets from admin.custom or use defaults\n  const themePresets = useMemo(() => {\n    const customPresets = (field.admin?.custom as { themePresets?: ThemePreset[] })?.themePresets\n    return customPresets && customPresets.length > 0 ? customPresets : allThemePresets\n  }, [field.admin?.custom])\n\n  useEffect(() => {\n    // If the active form contains themeConfiguration (e.g., editing Site Settings), prefer it\n    if (formThemeConfiguration) {\n      setOptions(buildOptionsFromConfiguration(formThemeConfiguration, themePresets))\n      return\n    }\n\n    let isMounted = true\n\n    // Allow fields to override fetch options via admin.custom\n    type CustomAdmin = {\n      fetchThemeConfigurationOptions?: FetchThemeConfigurationOptions\n      fetchOptions?: FetchThemeConfigurationOptions\n      collectionSlug?: string\n      useGlobal?: boolean\n      tenantSlug?: string\n      depth?: number\n      locale?: string\n      draft?: boolean\n      queryParams?: Record<string, unknown>\n    }\n\n    const custom = field.admin?.custom as unknown as CustomAdmin\n\n    // Prefer tenant ID from the current form (`formTenant`) first since editor fills the relation id.\n    // If the relation is an object, prefer `id` over `slug` to avoid passing a human-readable slug when an id is available.\n    // Then respect an explicit `admin.custom.tenantSlug` override, otherwise fall back to other heuristics.\n    const tenantFromForm = (() => {\n      if (typeof formTenant === 'string' && formTenant.trim()) return formTenant\n      if (formTenant && typeof formTenant === 'object') {\n        // Prefer id first\n        return (formTenant.id ?? formTenant.slug ?? formTenant.value) as string | undefined\n      }\n      return undefined\n    })()\n\n    const inferredTenant = tenantFromForm ?? custom?.tenantSlug ?? inferTenant()\n\n    // Determine admin language to pass as `locale` to fetch, if not provided\n    const adminLang = getAdminLanguage()\n\n    // Normalize fetch options so that even when callers provide an empty object (\"{}\"),\n    // we still ensure `tenantSlug` and `locale` are set to sensible defaults (inferred/form/adminLang).\n    const rawFetchOpts =\n      custom?.fetchThemeConfigurationOptions ??\n      custom?.fetchOptions ??\n      (custom?.collectionSlug || typeof custom?.useGlobal !== 'undefined'\n        ? ({\n            collectionSlug: custom.collectionSlug,\n            useGlobal: custom.useGlobal,\n            depth: custom.depth,\n            locale: custom.locale,\n            draft: custom.draft,\n            queryParams: custom.queryParams,\n          } as unknown as FetchThemeConfigurationOptions)\n        : undefined)\n\n    // Always build a fetch options object so we can inject sensible defaults (tenantSlug, locale)\n    // even when callers passed an empty object or no options at all.\n    const fetchOpts: FetchThemeConfigurationOptions = {\n      ...(rawFetchOpts ?? {}),\n      tenantSlug: rawFetchOpts?.tenantSlug ?? inferredTenant,\n      locale: rawFetchOpts?.locale ?? adminLang,\n    }\n\n    fetchThemeConfiguration(fetchOpts).then(async (configuration) => {\n      if (!isMounted) return\n      if (configuration) {\n        setOptions(buildOptionsFromConfiguration(configuration, themePresets))\n        return\n      }\n\n      // If nothing found and fetchOpts didn't explicitly request global, try fallback to global\n      // This helps in setups where plugin created a standalone global (default slug 'appearance-settings')\n      const explicitlyRequestedGlobal = !!(\n        (fetchOpts as FetchThemeConfigurationOptions | undefined)?.useGlobal === true ||\n        (fetchOpts as FetchThemeConfigurationOptions | undefined)?.collectionSlug ===\n          'appearance-settings'\n      )\n\n      if (!explicitlyRequestedGlobal) {\n        try {\n          // Prefer custom.collectionSlug if provided, otherwise try the default standalone slug\n          const fallbackCollection = custom?.collectionSlug || 'appearance-settings'\n          const fallbackOpts: FetchThemeConfigurationOptions = {\n            useGlobal: true,\n            collectionSlug: fallbackCollection,\n            tenantSlug: inferredTenant,\n            locale: custom?.locale ?? adminLang,\n          }\n          const fallbackConfig = await fetchThemeConfiguration(fallbackOpts)\n          if (!isMounted) return\n          if (fallbackConfig) {\n            // Found theme config in global, use it\n            setOptions(buildOptionsFromConfiguration(fallbackConfig, themePresets))\n            return\n          }\n        } catch (e) {\n          console.warn('[ThemeTokenSelectField] Fallback global fetch failed:', e)\n        }\n      }\n\n      // final fallback: use empty tokens\n      setOptions(buildOptionsFromConfiguration(configuration, themePresets))\n    })\n\n    return () => {\n      isMounted = false\n    }\n  }, [themePresets, field.admin?.custom, formThemeConfiguration, formTenant])\n\n  const handleSelect = useCallback(\n    (nextValue: string) => {\n      setValue(nextValue)\n    },\n    [setValue],\n  )\n\n  // Make admin language reactive so switching admin UI language updates labels\n  const initialAdminLang = getAdminLanguage()\n  const [adminLang, setAdminLang] = useState<string>(initialAdminLang)\n\n  useEffect(() => {\n    if (typeof document === 'undefined' || !('MutationObserver' in window)) return\n    const el = document.documentElement\n    const obs = new MutationObserver(() => {\n      const next = getAdminLanguage()\n      if (next !== adminLang) setAdminLang(next)\n    })\n    obs.observe(el, { attributes: true, attributeFilter: ['lang'] })\n    return () => obs.disconnect()\n  }, [adminLang])\n\n  const label =\n    typeof field.label === 'string'\n      ? field.label\n      : (field.label && (field.label as Record<string, string>)[adminLang]) ||\n        field.label?.en ||\n        field.label?.cs ||\n        ''\n\n  let description = ''\n  if (typeof field.admin?.description === 'string') {\n    description = field.admin.description\n  } else if (field.admin?.description && typeof field.admin.description === 'object') {\n    description =\n      (field.admin.description as Record<string, string>)[adminLang] ||\n      (field.admin.description as Record<string, string>).en ||\n      (field.admin.description as Record<string, string>).cs ||\n      ''\n  }\n\n  // Helper function to get label text from localized or string label\n  const getOptionLabel = (option: ThemeColorOption): string => {\n    if (typeof option.label === 'string') {\n      return option.label\n    }\n    // Prefer current admin language, fallback to English/Czech, then any available language\n    return (\n      (option.label as Record<string, string>)[adminLang] ||\n      option.label.en ||\n      option.label.cs ||\n      Object.values(option.label)[0] ||\n      option.value\n    )\n  }\n\n  // Resolve CSS variable colors (e.g., 'var(--primary)') to their computed values when possible\n  const resolveCssColor = (color: string): string => {\n    if (typeof window === 'undefined' || !color || !color.trim().startsWith('var(')) {\n      return color\n    }\n\n    try {\n      const match = color.trim().match(/var\\((--[^)]+)\\)/)\n      if (!match) return color\n      const varName = match[1]\n      const computed = getComputedStyle(document.documentElement).getPropertyValue(varName).trim()\n      return computed || color\n    } catch (e) {\n      return color\n    }\n  }\n\n  return (\n    <div className=\"field-type theme-token-select\">\n      {label && (\n        <label\n          className=\"field-label\"\n          htmlFor={path}\n          style={{ display: 'block', marginBottom: '8px' }}\n        >\n          {label}\n          {field.required && <span className=\"required\">*</span>}\n        </label>\n      )}\n\n      {description && (\n        <div\n          className=\"field-description\"\n          style={{ marginBottom: '12px', fontSize: '13px', color: 'var(--theme-elevation-500)' }}\n        >\n          {description}\n        </div>\n      )}\n\n      <div\n        className=\"token-grid\"\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',\n          gap: '10px',\n        }}\n      >\n        {options.map((option) => {\n          const isActive = option.value === selectedValue\n          return (\n            <button\n              type=\"button\"\n              key={option.value}\n              onClick={() => handleSelect(option.value)}\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                gap: '10px',\n                padding: '10px 12px',\n                borderRadius: '10px',\n                border: isActive\n                  ? '2px solid var(--theme-success-500)'\n                  : '1px solid var(--theme-elevation-150)',\n                backgroundColor: 'var(--theme-elevation-0)',\n                boxShadow: isActive\n                  ? '0 10px 20px -10px rgba(59, 130, 246, 0.4)'\n                  : '0 1px 2px rgba(15, 23, 42, 0.08)',\n                cursor: 'pointer',\n                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',\n              }}\n            >\n              <span\n                aria-hidden\n                style={{\n                  width: '32px',\n                  height: '32px',\n                  borderRadius: '8px',\n                  border: '1px solid rgba(15, 23, 42, 0.08)',\n                  backgroundColor: resolveCssColor(option.color),\n                  flexShrink: 0,\n                }}\n              />\n              <span\n                style={{ fontSize: '13px', fontWeight: 600, color: 'var(--theme-elevation-800)' }}\n              >\n                {getOptionLabel(option)}\n              </span>\n            </button>\n          )\n        })}\n      </div>\n\n      <select\n        id={path}\n        value={selectedValue}\n        onChange={(event) => handleSelect(event.target.value)}\n        style={{ display: 'none' }}\n      >\n        {options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {getOptionLabel(option)}\n          </option>\n        ))}\n      </select>\n    </div>\n  )\n}\n"],"names":["useField","useCallback","useEffect","useMemo","useState","allThemePresets","fetchThemeConfiguration","getAdminLanguage","inferTenant","resolveThemeConfiguration","FALLBACK_TOKENS","value","label","en","cs","color","buildOptionsFromConfiguration","configuration","themePresets","resolved","lightMode","orderedKeys","typedLightMode","tokens","map","key","trim","length","labelMap","background","card","muted","accent","secondary","primary","popover","filter","token","ThemeTokenSelectField","props","path","field","setValue","formThemeConfiguration","formTenant","options","setOptions","selectedValue","customPresets","admin","custom","isMounted","tenantFromForm","id","slug","undefined","inferredTenant","tenantSlug","adminLang","rawFetchOpts","fetchThemeConfigurationOptions","fetchOptions","collectionSlug","useGlobal","depth","locale","draft","queryParams","fetchOpts","then","explicitlyRequestedGlobal","fallbackCollection","fallbackOpts","fallbackConfig","e","console","warn","handleSelect","nextValue","initialAdminLang","setAdminLang","document","window","el","documentElement","obs","MutationObserver","next","observe","attributes","attributeFilter","disconnect","description","getOptionLabel","option","Object","values","resolveCssColor","startsWith","match","varName","computed","getComputedStyle","getPropertyValue","div","className","htmlFor","style","display","marginBottom","required","span","fontSize","gridTemplateColumns","gap","isActive","button","type","onClick","alignItems","padding","borderRadius","border","backgroundColor","boxShadow","cursor","transition","aria-hidden","width","height","flexShrink","fontWeight","select","onChange","event","target"],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/ThemeTokenSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientProps } from 'payload'\nimport { Check, ChevronDown } from 'lucide-react'\nimport { useCallback, useEffect, useId, useMemo, useRef, useState, type KeyboardEvent } from 'react'\nimport { allThemePresets, fetchThemeConfiguration } from '../index.js'\nimport type { SiteThemeConfiguration } from '../payload-types.js'\nimport type { ThemePreset } from '../presets.js'\nimport type { FetchThemeConfigurationOptions } from '../types.js'\nimport { useThemeLanguage, useThemeTranslations } from '../hooks/useThemeTranslations.js'\nimport { inferTenant } from '../utils/inferTenant.js'\nimport { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\n\ninterface ThemeColorOption {\n  value: string\n  label: string | { [key: string]: string | undefined }\n  color: string\n  description?: string\n}\n\nconst FALLBACK_TOKENS: ThemeColorOption[] = [\n  {\n    value: 'background',\n    label: { en: 'Theme background', cs: 'Pozadí motivu' },\n    color: 'var(--background)',\n  },\n  { value: 'card', label: { en: 'Card background', cs: 'Pozadí karty' }, color: 'var(--card)' },\n  { value: 'muted', label: { en: 'Muted surface', cs: 'Tlumený povrch' }, color: 'var(--muted)' },\n  {\n    value: 'accent',\n    label: { en: 'Accent surface', cs: 'Akcentní povrch' },\n    color: 'var(--accent)',\n  },\n  {\n    value: 'secondary',\n    label: { en: 'Secondary surface', cs: 'Sekundární povrch' },\n    color: 'var(--secondary)',\n  },\n  {\n    value: 'primary',\n    label: { en: 'Primary surface', cs: 'Primární povrch' },\n    color: 'var(--primary)',\n  },\n]\n\n// Use plugin-provided fetch helper which supports collection/global and options\n// This will use `collectionSlug`, `useGlobal`, tenant, locale, depth, draft, etc.\n// Accept fetch options from field.admin.custom to allow overrides in different setups.\n\nfunction buildOptionsFromConfiguration(\n  configuration: SiteThemeConfiguration | Record<string, unknown> | null,\n  themePresets: ThemePreset[],\n): ThemeColorOption[] {\n  if (!configuration) {\n    return FALLBACK_TOKENS\n  }\n\n  const resolved = resolveThemeConfiguration(configuration)\n  const lightMode = resolved.lightMode ?? themePresets[0]?.lightMode ?? {}\n  const orderedKeys: string[] = [\n    'background',\n    'card',\n    'muted',\n    'accent',\n    'secondary',\n    'primary',\n    'popover',\n  ]\n\n  const typedLightMode = lightMode as Record<string, string | null | undefined>\n\n  const tokens = orderedKeys\n    .map((key) => {\n      const value = typedLightMode?.[key]\n      if (typeof value !== 'string' || value.trim().length === 0) {\n        return null\n      }\n\n      const labelMap: Record<string, { en: string; cs: string }> = {\n        background: { en: 'Theme background', cs: 'Pozadí motivu' },\n        card: { en: 'Card background', cs: 'Pozadí karty' },\n        muted: { en: 'Muted surface', cs: 'Tlumený povrch' },\n        accent: { en: 'Accent surface', cs: 'Akcentní povrch' },\n        secondary: { en: 'Secondary surface', cs: 'Sekundární povrch' },\n        primary: { en: 'Primary surface', cs: 'Primární povrch' },\n        popover: { en: 'Popover surface', cs: 'Popover povrch' },\n      }\n\n      return {\n        value: key,\n        label: labelMap[key] ?? { en: key, cs: key },\n        color: value,\n      }\n    })\n    .filter((token): token is NonNullable<typeof token> => token !== null)\n\n  return tokens.length > 0 ? tokens : FALLBACK_TOKENS\n}\n\nexport default function ThemeTokenSelectField(props: SelectFieldClientProps) {\n  const { path, field } = props\n  const { value, setValue } = useField<string>({ path })\n  // Try to read themeConfiguration from the active form (Site Settings) first\n  const { value: formThemeConfiguration } = useField<SiteThemeConfiguration | null>({\n    path: 'themeConfiguration',\n  })\n\n  // Read tenant from the current form (sibling data) where present.\n  // Prefer `tenant` field as it is populated correctly in most setups.\n  const { value: formTenant } = useField<any>({ path: 'tenant' })\n\n  const [options, setOptions] = useState<ThemeColorOption[]>(FALLBACK_TOKENS)\n  const selectedValue = value || 'background'\n  // Active Payload admin language (reactive via Payload's i18n context).\n  const adminLang = useThemeLanguage()\n  const t = useThemeTranslations()\n\n  // Get themePresets from admin.custom or use defaults\n  const themePresets = useMemo(() => {\n    const customPresets = (field.admin?.custom as { themePresets?: ThemePreset[] })?.themePresets\n    return customPresets && customPresets.length > 0 ? customPresets : allThemePresets\n  }, [field.admin?.custom])\n\n  useEffect(() => {\n    // If the active form contains themeConfiguration (e.g., editing Site Settings), prefer it\n    if (formThemeConfiguration) {\n      setOptions(buildOptionsFromConfiguration(formThemeConfiguration, themePresets))\n      return\n    }\n\n    const controller = new AbortController()\n\n    // Allow fields to override fetch options via admin.custom\n    type CustomAdmin = {\n      fetchThemeConfigurationOptions?: FetchThemeConfigurationOptions\n      fetchOptions?: FetchThemeConfigurationOptions\n      collectionSlug?: string\n      useGlobal?: boolean\n      tenantSlug?: string\n      depth?: number\n      locale?: string\n      draft?: boolean\n      queryParams?: Record<string, string | number | boolean>\n    }\n\n    const custom = field.admin?.custom as unknown as CustomAdmin\n\n    // Prefer tenant ID from the current form (`formTenant`) first since editor fills the relation id.\n    // If the relation is an object, prefer `id` over `slug` to avoid passing a human-readable slug when an id is available.\n    // Then respect an explicit `admin.custom.tenantSlug` override, otherwise fall back to other heuristics.\n    const tenantFromForm = (() => {\n      if (typeof formTenant === 'string' && formTenant.trim()) return formTenant\n      if (formTenant && typeof formTenant === 'object') {\n        // Prefer id first\n        return (formTenant.id ?? formTenant.slug ?? formTenant.value) as string | undefined\n      }\n      return undefined\n    })()\n\n    const inferredTenant = tenantFromForm ?? custom?.tenantSlug ?? inferTenant()\n\n    // Normalize fetch options so that even when callers provide an empty object (\"{}\"),\n    // we still ensure `tenantSlug` and `locale` are set to sensible defaults (inferred/form/adminLang).\n    const rawFetchOpts =\n      custom?.fetchThemeConfigurationOptions ??\n      custom?.fetchOptions ??\n      (custom?.collectionSlug || typeof custom?.useGlobal !== 'undefined'\n        ? ({\n            collectionSlug: custom.collectionSlug,\n            useGlobal: custom.useGlobal,\n            depth: custom.depth,\n            locale: custom.locale,\n            draft: custom.draft,\n            queryParams: custom.queryParams,\n          } as unknown as FetchThemeConfigurationOptions)\n        : undefined)\n\n    // Always build a fetch options object so we can inject sensible defaults (tenantSlug, locale)\n    // even when callers passed an empty object or no options at all.\n    const fetchOpts: FetchThemeConfigurationOptions = {\n      ...(rawFetchOpts ?? {}),\n      tenantSlug: rawFetchOpts?.tenantSlug ?? inferredTenant,\n      locale: rawFetchOpts?.locale ?? adminLang,\n      signal: controller.signal,\n    }\n\n    fetchThemeConfiguration(fetchOpts).then(async (configuration) => {\n      if (controller.signal.aborted) return\n      if (configuration) {\n        setOptions(buildOptionsFromConfiguration(configuration, themePresets))\n        return\n      }\n\n      // If nothing found and fetchOpts didn't explicitly request global, try fallback to global\n      // This helps in setups where plugin created a standalone global (default slug 'appearance-settings')\n      const explicitlyRequestedGlobal = !!(\n        (fetchOpts as FetchThemeConfigurationOptions | undefined)?.useGlobal === true ||\n        (fetchOpts as FetchThemeConfigurationOptions | undefined)?.collectionSlug ===\n          'appearance-settings'\n      )\n\n      if (!explicitlyRequestedGlobal) {\n        try {\n          // Prefer custom.collectionSlug if provided, otherwise try the default standalone slug\n          const fallbackCollection = custom?.collectionSlug || 'appearance-settings'\n          const fallbackOpts: FetchThemeConfigurationOptions = {\n            useGlobal: true,\n            collectionSlug: fallbackCollection,\n            tenantSlug: inferredTenant,\n            locale: custom?.locale ?? adminLang,\n            signal: controller.signal,\n          }\n          const fallbackConfig = await fetchThemeConfiguration(fallbackOpts)\n          if (controller.signal.aborted) return\n          if (fallbackConfig) {\n            // Found theme config in global, use it\n            setOptions(buildOptionsFromConfiguration(fallbackConfig, themePresets))\n            return\n          }\n        } catch (e) {\n          console.warn('[ThemeTokenSelectField] Fallback global fetch failed:', e)\n        }\n      }\n\n      // final fallback: use empty tokens\n      setOptions(buildOptionsFromConfiguration(configuration, themePresets))\n    })\n\n    return () => {\n      controller.abort()\n    }\n  }, [themePresets, field.admin?.custom, formThemeConfiguration, formTenant, adminLang])\n\n  const handleSelect = useCallback(\n    (nextValue: string) => {\n      setValue(nextValue)\n    },\n    [setValue],\n  )\n\n  const label =\n    typeof field.label === 'string'\n      ? field.label\n      : (field.label && (field.label as Record<string, string>)[adminLang]) ||\n        field.label?.en ||\n        field.label?.cs ||\n        ''\n\n  let description = ''\n  if (typeof field.admin?.description === 'string') {\n    description = field.admin.description\n  } else if (field.admin?.description && typeof field.admin.description === 'object') {\n    description =\n      (field.admin.description as Record<string, string>)[adminLang] ||\n      (field.admin.description as Record<string, string>).en ||\n      (field.admin.description as Record<string, string>).cs ||\n      ''\n  }\n\n  // Helper function to get label text from localized or string label\n  const getOptionLabel = (option: ThemeColorOption): string => {\n    if (typeof option.label === 'string') {\n      return option.label\n    }\n    // Prefer current admin language, fallback to English/Czech, then any available language\n    return (\n      (option.label as Record<string, string>)[adminLang] ||\n      option.label.en ||\n      option.label.cs ||\n      Object.values(option.label)[0] ||\n      option.value\n    )\n  }\n\n  // Resolve CSS variable colors (e.g., 'var(--primary)') to their computed values when possible\n  const resolveCssColor = (color: string): string => {\n    if (typeof window === 'undefined' || !color || !color.trim().startsWith('var(')) {\n      return color\n    }\n\n    try {\n      const match = color.trim().match(/var\\((--[^)]+)\\)/)\n      if (!match) return color\n      const varName = match[1]\n      const computed = getComputedStyle(document.documentElement).getPropertyValue(varName).trim()\n      return computed || color\n    } catch (e) {\n      return color\n    }\n  }\n\n  const selectedIndex = options.findIndex((opt) => opt.value === selectedValue)\n  const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : undefined\n  const selectedColor = selectedOption ? resolveCssColor(selectedOption.color) : ''\n  const selectedLabel = selectedOption ? getOptionLabel(selectedOption) : ''\n  const [isOpen, setIsOpen] = useState(false)\n  const [activeIndex, setActiveIndex] = useState(-1)\n  const baseId = useId()\n  const labelId = `${baseId}-label`\n  const listboxId = `${baseId}-listbox`\n  const optionId = (index: number) => `${baseId}-option-${index}`\n  const containerRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const listboxRef = useRef<HTMLDivElement>(null)\n\n  const openList = (index = selectedIndex >= 0 ? selectedIndex : 0) => {\n    setActiveIndex(index)\n    setIsOpen(true)\n  }\n\n  const closeList = useCallback((restoreFocus: boolean) => {\n    setIsOpen(false)\n    if (restoreFocus) triggerRef.current?.focus()\n  }, [])\n\n  const chooseOption = (index: number) => {\n    const option = options[index]\n    if (!option) return\n    handleSelect(option.value)\n    closeList(true)\n  }\n\n  useEffect(() => {\n    if (!isOpen) return\n    listboxRef.current?.focus()\n    const handlePointerOutside = (event: PointerEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) closeList(false)\n    }\n    document.addEventListener('pointerdown', handlePointerOutside)\n    return () => document.removeEventListener('pointerdown', handlePointerOutside)\n  }, [isOpen, closeList])\n\n  useEffect(() => {\n    if (!isOpen || activeIndex < 0) return\n    listboxRef.current\n      ?.querySelector<HTMLElement>(`#${CSS.escape(optionId(activeIndex))}`)\n      ?.scrollIntoView({ block: 'nearest' })\n  }, [isOpen, activeIndex])\n\n  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) {\n      event.preventDefault()\n      openList()\n    }\n  }\n\n  const handleListboxKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const last = options.length - 1\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault()\n        setActiveIndex((i) => Math.min(last, i + 1))\n        break\n      case 'ArrowUp':\n        event.preventDefault()\n        setActiveIndex((i) => Math.max(0, i - 1))\n        break\n      case 'Home':\n        event.preventDefault()\n        setActiveIndex(0)\n        break\n      case 'End':\n        event.preventDefault()\n        setActiveIndex(last)\n        break\n      case 'Enter':\n      case ' ':\n        event.preventDefault()\n        chooseOption(activeIndex)\n        break\n      case 'Escape':\n        event.preventDefault()\n        event.stopPropagation()\n        closeList(true)\n        break\n      case 'Tab':\n        closeList(false)\n        break\n    }\n  }\n\n  return (\n    <div className=\"field-type theme-token-select\">\n      {label && (\n        <div className=\"field-label\" id={labelId} style={{ display: 'block', marginBottom: '8px' }}>\n          {label}\n          {field.required && <span className=\"required\">*</span>}\n        </div>\n      )}\n\n      {description && (\n        <div\n          className=\"field-description\"\n          style={{ marginBottom: '12px', fontSize: '13px', color: 'var(--theme-elevation-600)' }}\n        >\n          {description}\n        </div>\n      )}\n\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: '12px',\n          position: 'relative',\n        }}\n      >\n        {/* Color preview swatch */}\n        <div\n          aria-hidden\n          style={{\n            width: '40px',\n            height: '40px',\n            borderRadius: '8px',\n            border: '2px solid var(--theme-elevation-200)',\n            backgroundColor: selectedColor,\n            flexShrink: 0,\n            boxShadow: selectedColor\n              ? '0 2px 8px rgba(0, 0, 0, 0.1)'\n              : 'inset 0 1px 2px rgba(0, 0, 0, 0.05)',\n          }}\n        />\n\n        {/* Select-only combobox (WAI-ARIA): button trigger + keyboard listbox */}\n        <div ref={containerRef} style={{ flex: 1, minWidth: 0, position: 'relative' }}>\n          <button\n            ref={triggerRef}\n            id={path}\n            type=\"button\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            aria-expanded={isOpen}\n            aria-controls={isOpen ? listboxId : undefined}\n            aria-labelledby={label ? `${labelId} ${baseId}-value` : undefined}\n            onClick={() => (isOpen ? closeList(false) : openList())}\n            onKeyDown={handleTriggerKeyDown}\n            style={{\n              width: '100%',\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              gap: '8px',\n              padding: '10px 12px',\n              borderRadius: '8px',\n              border: '1px solid var(--theme-elevation-200)',\n              backgroundColor: 'var(--theme-input-bg, var(--theme-elevation-0))',\n              color: 'var(--theme-elevation-900)',\n              fontSize: '14px',\n              fontWeight: 500,\n              cursor: 'pointer',\n              textAlign: 'left',\n            }}\n          >\n            <span id={`${baseId}-value`} style={{ minWidth: 0 }}>\n              {selectedLabel}\n            </span>\n            <ChevronDown\n              size={14}\n              aria-hidden\n              style={{ flexShrink: 0, transform: isOpen ? 'rotate(180deg)' : undefined }}\n            />\n          </button>\n\n          {isOpen && (\n            <div\n              ref={listboxRef}\n              id={listboxId}\n              role=\"listbox\"\n              tabIndex={-1}\n              aria-labelledby={label ? labelId : undefined}\n              aria-activedescendant={activeIndex >= 0 ? optionId(activeIndex) : undefined}\n              onKeyDown={handleListboxKeyDown}\n              style={{\n                position: 'absolute',\n                top: '100%',\n                left: 0,\n                right: 0,\n                marginTop: '4px',\n                backgroundColor: 'var(--theme-elevation-0)',\n                border: '1px solid var(--theme-elevation-200)',\n                borderRadius: '8px',\n                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',\n                zIndex: 1000,\n                maxHeight: '300px',\n                overflowY: 'auto',\n              }}\n            >\n              {options.map((option, index) => {\n                const isSelected = option.value === selectedValue\n                const isActive = index === activeIndex\n                const optionColor = resolveCssColor(option.color)\n                return (\n                  <div\n                    key={option.value}\n                    id={optionId(index)}\n                    role=\"option\"\n                    aria-selected={isSelected}\n                    onClick={() => chooseOption(index)}\n                    onPointerMove={() => setActiveIndex(index)}\n                    style={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: '10px',\n                      padding: '10px 12px',\n                      backgroundColor: isActive\n                        ? 'var(--theme-elevation-100)'\n                        : isSelected\n                          ? 'var(--theme-elevation-50)'\n                          : 'transparent',\n                      outline: isActive ? '2px solid var(--theme-elevation-800)' : undefined,\n                      outlineOffset: '-2px',\n                      color: 'var(--theme-elevation-900)',\n                      fontSize: '14px',\n                      fontWeight: isSelected ? 600 : 500,\n                      cursor: 'pointer',\n                    }}\n                  >\n                    <span\n                      aria-hidden\n                      style={{\n                        width: '24px',\n                        height: '24px',\n                        borderRadius: '6px',\n                        border: '1px solid var(--theme-elevation-150)',\n                        backgroundColor: optionColor,\n                        flexShrink: 0,\n                      }}\n                    />\n                    <span style={{ flex: 1 }}>{getOptionLabel(option)}</span>\n                    {isSelected && <Check size={14} aria-hidden />}\n                  </div>\n                )\n              })}\n            </div>\n          )}\n        </div>\n      </div>\n\n      {selectedLabel && (\n        <div\n          style={{\n            marginTop: '10px',\n            padding: '8px 12px',\n            borderRadius: '6px',\n            backgroundColor: 'var(--theme-elevation-50)',\n            fontSize: '12px',\n            color: 'var(--theme-elevation-700)',\n          }}\n        >\n          <span style={{ fontWeight: 600 }}>{t.ui.selectedColor}</span> {selectedLabel}\n          {selectedColor && selectedColor !== '' && (\n            <span style={{ marginLeft: '8px', fontFamily: 'monospace', color: 'var(--theme-elevation-600)' }}>\n              ({selectedColor})\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\n"],"names":["useField","Check","ChevronDown","useCallback","useEffect","useId","useMemo","useRef","useState","allThemePresets","fetchThemeConfiguration","useThemeLanguage","useThemeTranslations","inferTenant","resolveThemeConfiguration","FALLBACK_TOKENS","value","label","en","cs","color","buildOptionsFromConfiguration","configuration","themePresets","resolved","lightMode","orderedKeys","typedLightMode","tokens","map","key","trim","length","labelMap","background","card","muted","accent","secondary","primary","popover","filter","token","ThemeTokenSelectField","props","path","field","setValue","formThemeConfiguration","formTenant","options","setOptions","selectedValue","adminLang","t","customPresets","admin","custom","controller","AbortController","tenantFromForm","id","slug","undefined","inferredTenant","tenantSlug","rawFetchOpts","fetchThemeConfigurationOptions","fetchOptions","collectionSlug","useGlobal","depth","locale","draft","queryParams","fetchOpts","signal","then","aborted","explicitlyRequestedGlobal","fallbackCollection","fallbackOpts","fallbackConfig","e","console","warn","abort","handleSelect","nextValue","description","getOptionLabel","option","Object","values","resolveCssColor","window","startsWith","match","varName","computed","getComputedStyle","document","documentElement","getPropertyValue","selectedIndex","findIndex","opt","selectedOption","selectedColor","selectedLabel","isOpen","setIsOpen","activeIndex","setActiveIndex","baseId","labelId","listboxId","optionId","index","containerRef","triggerRef","listboxRef","openList","closeList","restoreFocus","current","focus","chooseOption","handlePointerOutside","event","contains","target","addEventListener","removeEventListener","querySelector","CSS","escape","scrollIntoView","block","handleTriggerKeyDown","includes","preventDefault","handleListboxKeyDown","last","i","Math","min","max","stopPropagation","div","className","style","display","marginBottom","required","span","fontSize","alignItems","gap","position","aria-hidden","width","height","borderRadius","border","backgroundColor","flexShrink","boxShadow","ref","flex","minWidth","button","type","role","aria-haspopup","aria-expanded","aria-controls","aria-labelledby","onClick","onKeyDown","justifyContent","padding","fontWeight","cursor","textAlign","size","transform","tabIndex","aria-activedescendant","top","left","right","marginTop","zIndex","maxHeight","overflowY","isSelected","isActive","optionColor","aria-selected","onPointerMove","outline","outlineOffset","ui","marginLeft","fontFamily"],"mappings":"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"}