@sudajs/theme-engine 1.4.1 → 1.6.0

package/dist/fields/url-field.js

@@ -0,0 +1,742 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { z } from "zod";
+import { useThemeEditorContext, } from "../editor/context.js";
+// ---------------------------------------------------------------------------
+// Constants & helpers (1:1 ported from legacy property_form.tsx)
+// ---------------------------------------------------------------------------
+const EXTERNAL_URL_TYPE = "external";
+const URL_RESOURCE_TYPE_ALIASES = {
+    posts: "post",
+    pages: "page",
+    tags: "tag",
+};
+const URL_PICKER_LIST_PATHS = {
+    post: "/posts",
+};
+const URL_PICKER_FILTER_SEARCH_TYPES = {
+    post: { by_tag: "tag" },
+};
+function isListStrategyResourceType(type) {
+    return Object.prototype.hasOwnProperty.call(URL_PICKER_LIST_PATHS, type);
+}
+const LIST_VIRTUAL_SUFFIX = "_list";
+function isVirtualListType(virtualType) {
+    return virtualType.endsWith(LIST_VIRTUAL_SUFFIX);
+}
+function realTypeFromVirtual(virtualType) {
+    const real = isVirtualListType(virtualType)
+        ? virtualType.slice(0, -LIST_VIRTUAL_SUFFIX.length)
+        : virtualType;
+    return real;
+}
+function buildListUrl(type, params) {
+    const basePath = URL_PICKER_LIST_PATHS[type];
+    if (!params || Object.keys(params).length === 0) {
+        return basePath;
+    }
+    const searchParams = new URLSearchParams();
+    for (const [key, value] of Object.entries(params)) {
+        const normalized = value.trim();
+        if (normalized !== "") {
+            searchParams.set(key, normalized);
+        }
+    }
+    const queryString = searchParams.toString();
+    return queryString === "" ? basePath : `${basePath}?${queryString}`;
+}
+const RESOURCE_SEARCH_PAGE_SIZE = 20;
+const RESOURCE_SEARCH_DEBOUNCE_MS = 250;
+const RESOURCE_SCROLL_LOAD_THRESHOLD_PX = 32;
+const externalUrlInputSchema = z.string().url();
+function isExternalUrlValue(value) {
+    const trimmed = value.trim();
+    if (trimmed === "") {
+        return false;
+    }
+    return /^(https?:\/\/|\/\/|mailto:|tel:)/i.test(trimmed);
+}
+function isValidExternalUrlInput(value) {
+    const input = value.trim();
+    if (input === "") {
+        return true;
+    }
+    return externalUrlInputSchema.safeParse(input).success;
+}
+function titleCase(value) {
+    return value.charAt(0).toUpperCase() + value.slice(1).replace(/_/g, " ");
+}
+const RESOURCE_TYPE_LABELS_EN = {
+    post: "Post",
+    post_list: "Post List",
+    page: "Page",
+    tag: "Tag",
+    external: "External URL",
+};
+const RESOURCE_TYPE_LABELS_ZH = {
+    post: "文章",
+    post_list: "文章列表",
+    page: "页面",
+    tag: "标签",
+    external: "外部链接",
+};
+const STRATEGY_LABELS_EN = {
+    latest: "Latest",
+    featured: "Featured",
+    by_tag: "By tag",
+    manual: "Select",
+};
+const STRATEGY_LABELS_ZH = {
+    latest: "最新",
+    featured: "精选",
+    by_tag: "按标签",
+    manual: "选择",
+};
+const COMMON_LABELS_EN = {
+    search: "Search",
+    searching: "Searching…",
+    noResults: "No results",
+    searchFailed: "Search failed",
+    retry: "Retry",
+    confirm: "Confirm",
+    invalidUrl: "Please enter a valid URL",
+    select: "Select",
+    externalUrl: "External URL",
+    manual: "Manual",
+    loadMore: "Load more",
+};
+const COMMON_LABELS_ZH = {
+    search: "搜索",
+    searching: "搜索中…",
+    noResults: "没有结果",
+    searchFailed: "搜索失败",
+    retry: "重试",
+    confirm: "确认",
+    invalidUrl: "请输入有效的 URL",
+    select: "选择",
+    externalUrl: "外部链接",
+    manual: "手动",
+    loadMore: "加载更多",
+};
+function isZhLocale(locale) {
+    if (!locale) {
+        return false;
+    }
+    return locale.toLowerCase().startsWith("zh");
+}
+function commonLabels(locale) {
+    return isZhLocale(locale) ? COMMON_LABELS_ZH : COMMON_LABELS_EN;
+}
+function resourceTypeLabel(type, locale) {
+    const map = isZhLocale(locale) ? RESOURCE_TYPE_LABELS_ZH : RESOURCE_TYPE_LABELS_EN;
+    return map[type] ?? titleCase(type);
+}
+function strategyLabel(configs, resourceType, strategy, locale) {
+    const overrides = configs?.content?.strategyLabels?.[resourceType];
+    if (overrides && typeof overrides[strategy] === "string") {
+        return overrides[strategy];
+    }
+    const map = isZhLocale(locale) ? STRATEGY_LABELS_ZH : STRATEGY_LABELS_EN;
+    return map[strategy];
+}
+// ---------------------------------------------------------------------------
+// Inline styles (matches the rest of theme-engine fields)
+// ---------------------------------------------------------------------------
+const triggerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 6,
+    width: "100%",
+    minHeight: 32,
+    padding: "4px 10px",
+    borderRadius: 6,
+    border: "1px solid var(--puck-color-grey-09, #dcdcdc)",
+    background: "var(--puck-color-white, #fff)",
+    cursor: "pointer",
+    fontSize: 12,
+    textAlign: "left",
+    overflow: "hidden",
+};
+const rootPanelStyle = {
+    position: "fixed",
+    zIndex: 10000,
+    borderRadius: 8,
+    border: "1px solid var(--puck-color-grey-08, #c8c8c8)",
+    background: "#fff",
+    boxShadow: "0 12px 32px rgba(15, 23, 42, 0.18)",
+    overflow: "visible",
+    fontSize: 12,
+    width: 280,
+    padding: 8,
+};
+const subPanelStyle = {
+    ...rootPanelStyle,
+    width: 280,
+    minHeight: 128,
+};
+const itemStyleBase = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 6,
+    minHeight: 28,
+    padding: "4px 8px",
+    borderRadius: 4,
+    border: "none",
+    background: "transparent",
+    cursor: "pointer",
+    textAlign: "left",
+    fontSize: 12,
+    color: "inherit",
+    width: "100%",
+};
+const itemActiveStyle = {
+    ...itemStyleBase,
+    background: "var(--puck-color-grey-11, #f5f5f5)",
+    color: "inherit",
+};
+const inputStyle = {
+    width: "100%",
+    minHeight: 30,
+    padding: "0 8px",
+    borderRadius: 6,
+    border: "1px solid var(--puck-color-grey-09, #dcdcdc)",
+    background: "#fff",
+    fontSize: 12,
+};
+const helperTextStyle = {
+    color: "#667085",
+    fontSize: 11,
+    padding: "2px 4px",
+};
+const buttonPrimaryStyle = {
+    ...itemStyleBase,
+    justifyContent: "center",
+    background: "var(--puck-color-azure-05, #1f6feb)",
+    color: "#fff",
+    fontWeight: 600,
+    cursor: "pointer",
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function UrlPicker({ value, onChange, }) {
+    const { urlResolvableTypes, queryStrategyConfigs, editorPages = [], searchResources, editorLocale, } = useThemeEditorContext();
+    const labels = useMemo(() => commonLabels(editorLocale), [editorLocale]);
+    const resourceTypes = useMemo(() => {
+        // Top-level categories shown in the picker. Defaults match the legacy
+        // behavior (post / page); themes / hosts can override via
+        // `urlResolvableTypes` to restrict the list further.
+        const DEFAULT_TOP_LEVEL = ["post", "page"];
+        const PREFERRED_ORDER = ["post", "page", "tag"];
+        if (!urlResolvableTypes) {
+            return DEFAULT_TOP_LEVEL.slice();
+        }
+        const types = Object.keys(urlResolvableTypes);
+        const availableTypes = new Set(types);
+        const filtered = types.filter((type) => {
+            const canonicalType = URL_RESOURCE_TYPE_ALIASES[type];
+            return canonicalType === undefined || !availableTypes.has(canonicalType);
+        });
+        const topLevelTypes = filtered.filter((type) => type !== "tag");
+        const ordered = (topLevelTypes.length > 0 ? topLevelTypes : filtered).sort((a, b) => {
+            const aIndex = PREFERRED_ORDER.indexOf(a);
+            const bIndex = PREFERRED_ORDER.indexOf(b);
+            return (aIndex === -1 ? 99 : aIndex) - (bIndex === -1 ? 99 : bIndex);
+        });
+        return ordered.length > 0 ? ordered : DEFAULT_TOP_LEVEL.slice();
+    }, [urlResolvableTypes]);
+    const virtualResourceTypes = useMemo(() => {
+        return resourceTypes.flatMap((type) => isListStrategyResourceType(type) ? [`${type}${LIST_VIRTUAL_SUFFIX}`, type] : [type]);
+    }, [resourceTypes]);
+    const currentValue = value;
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    const subPanelRef = useRef(null);
+    const [isOpen, setOpen] = useState(false);
+    const [panelPos, setPanelPos] = useState(null);
+    const ROOT_PANEL_WIDTH = 280;
+    const SUB_PANEL_WIDTH = 280;
+    const PANEL_OFFSET = 8;
+    const recomputePanelPos = useCallback(() => {
+        const trigger = triggerRef.current;
+        if (!trigger)
+            return;
+        const rect = trigger.getBoundingClientRect();
+        const viewportWidth = typeof window !== "undefined" ? window.innerWidth : rect.right;
+        const rootLeftCandidate = rect.left - ROOT_PANEL_WIDTH - PANEL_OFFSET;
+        const rootLeft = rootLeftCandidate > 8 ? rootLeftCandidate : Math.max(8, viewportWidth - ROOT_PANEL_WIDTH - 8);
+        const subRightLeft = rootLeft + ROOT_PANEL_WIDTH + PANEL_OFFSET;
+        const subLeft = subRightLeft + SUB_PANEL_WIDTH <= viewportWidth - 8
+            ? subRightLeft
+            : Math.max(8, rootLeft - SUB_PANEL_WIDTH - PANEL_OFFSET);
+        setPanelPos({
+            rootTop: rect.bottom + 4,
+            rootLeft,
+            subTop: rect.bottom + 4,
+            subLeft,
+        });
+    }, []);
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        recomputePanelPos();
+        const handleReflow = () => recomputePanelPos();
+        window.addEventListener("resize", handleReflow);
+        window.addEventListener("scroll", handleReflow, true);
+        return () => {
+            window.removeEventListener("resize", handleReflow);
+            window.removeEventListener("scroll", handleReflow, true);
+        };
+    }, [isOpen, recomputePanelPos]);
+    const initialVirtualType = virtualResourceTypes[0] ?? EXTERNAL_URL_TYPE;
+    const [activeVirtualType, setActiveVirtualType] = useState(initialVirtualType);
+    const activeType = realTypeFromVirtual(activeVirtualType);
+    const [activeStrategy, setActiveStrategy] = useState(isVirtualListType(activeVirtualType) && isListStrategyResourceType(activeType) ? "latest" : "manual");
+    const [query, setQuery] = useState("");
+    const [options, setOptions] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [searchFailed, setSearchFailed] = useState(false);
+    const [hasSearched, setHasSearched] = useState(false);
+    const [hasMoreOptions, setHasMoreOptions] = useState(false);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const [loadMoreFailed, setLoadMoreFailed] = useState(false);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [filterQuery, setFilterQuery] = useState("");
+    const [filterOptions, setFilterOptions] = useState([]);
+    const [filterLoading, setFilterLoading] = useState(false);
+    const [filterSearchFailed, setFilterSearchFailed] = useState(false);
+    const [filterHasSearched, setFilterHasSearched] = useState(false);
+    const [externalInput, setExternalInput] = useState("");
+    const [selectedLabel, setSelectedLabel] = useState("");
+    const isActiveExternal = activeVirtualType === EXTERNAL_URL_TYPE;
+    const supportsListStrategies = isVirtualListType(activeVirtualType) && isListStrategyResourceType(activeType);
+    const isManualSearch = !isActiveExternal && (!supportsListStrategies || activeStrategy === "manual");
+    const isFilterSearch = supportsListStrategies && activeStrategy === "by_tag";
+    // Reset internal state when re-opening.
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        const defaultVirtualType = virtualResourceTypes[0] ?? EXTERNAL_URL_TYPE;
+        const defaultRealType = realTypeFromVirtual(defaultVirtualType);
+        setActiveVirtualType(defaultVirtualType);
+        setActiveStrategy(isVirtualListType(defaultVirtualType) && isListStrategyResourceType(defaultRealType)
+            ? "latest"
+            : "manual");
+        setQuery("");
+        setFilterQuery("");
+        setExternalInput(isExternalUrlValue(currentValue) ? currentValue : "");
+    }, [isOpen, virtualResourceTypes, currentValue]);
+    // Click-outside dismissal.
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        const handler = (event) => {
+            const target = event.target;
+            if (panelRef.current &&
+                target &&
+                !panelRef.current.contains(target) &&
+                (!subPanelRef.current || !subPanelRef.current.contains(target)) &&
+                triggerRef.current &&
+                !triggerRef.current.contains(target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [isOpen]);
+    // Resolve the human-readable label for the currently saved value.
+    useEffect(() => {
+        if (!currentValue) {
+            setSelectedLabel("");
+            return;
+        }
+        let isCancelled = false;
+        const resolveLabel = async () => {
+            // 1) match against list-strategy URLs first
+            for (const type of resourceTypes) {
+                if (isCancelled)
+                    return;
+                if (!isListStrategyResourceType(type))
+                    continue;
+                const basePath = URL_PICKER_LIST_PATHS[type];
+                if (currentValue === basePath || currentValue.startsWith(`${basePath}?`)) {
+                    const parsed = new URL(currentValue, "https://local.test");
+                    const featured = parsed.searchParams.get("featured");
+                    const tag = parsed.searchParams.get("tag");
+                    if (featured === "1") {
+                        setSelectedLabel(strategyLabel(queryStrategyConfigs, type, "featured", editorLocale));
+                        return;
+                    }
+                    if (tag && tag.trim() !== "") {
+                        setSelectedLabel(`${strategyLabel(queryStrategyConfigs, type, "by_tag", editorLocale)} · ${tag}`);
+                        return;
+                    }
+                    setSelectedLabel(strategyLabel(queryStrategyConfigs, type, "latest", editorLocale));
+                    return;
+                }
+            }
+            // 2) try editor pages
+            const matchedPage = editorPages.find((p) => {
+                const url = p.handle === "index" ? "/" : `/${p.handle}`;
+                return url === currentValue || p.handle === currentValue;
+            });
+            if (matchedPage) {
+                setSelectedLabel(matchedPage.label);
+                return;
+            }
+            // 3) ask searchResources to find a label for non-list types
+            if (!searchResources)
+                return;
+            for (const type of resourceTypes) {
+                if (isCancelled)
+                    return;
+                if (type === "page")
+                    continue;
+                try {
+                    const result = await searchResources({
+                        type: type,
+                        query: "",
+                        page: 1,
+                        perPage: RESOURCE_SEARCH_PAGE_SIZE,
+                    });
+                    const match = result.options.find((option) => (option.url ?? option.value) === currentValue);
+                    if (match) {
+                        setSelectedLabel(match.label);
+                        return;
+                    }
+                }
+                catch {
+                    // continue to next type
+                }
+            }
+        };
+        void resolveLabel();
+        return () => {
+            isCancelled = true;
+        };
+    }, [currentValue, resourceTypes, editorPages, queryStrategyConfigs, searchResources, editorLocale]);
+    const displayLabel = useMemo(() => {
+        if (!currentValue) {
+            return labels.select;
+        }
+        return selectedLabel || currentValue;
+    }, [currentValue, labels.select, selectedLabel]);
+    const selectedStrategyForType = useCallback((type) => {
+        if (!isListStrategyResourceType(type) || currentValue === "")
+            return null;
+        const basePath = URL_PICKER_LIST_PATHS[type];
+        if (currentValue === basePath)
+            return "latest";
+        if (currentValue.startsWith(`${basePath}?`)) {
+            const parsed = new URL(currentValue, "https://local.test");
+            const featured = parsed.searchParams.get("featured");
+            const tag = parsed.searchParams.get("tag");
+            if (featured === "1")
+                return "featured";
+            if (tag && tag.trim() !== "")
+                return "by_tag";
+            return "latest";
+        }
+        if (currentValue.startsWith(`${basePath}/`))
+            return "manual";
+        return null;
+    }, [currentValue]);
+    // -- Manual / page list search effect --------------------------------
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        if (activeType === "page") {
+            const pageOptions = editorPages
+                .filter((p) => !p.disabled && (p.group === "home" || p.group === "static"))
+                .map((p) => ({
+                value: p.handle,
+                label: p.label,
+                url: p.handle === "index" ? "/" : `/${p.handle}`,
+            }));
+            const filtered = query.trim() === ""
+                ? pageOptions
+                : pageOptions.filter((opt) => opt.label.toLowerCase().includes(query.trim().toLowerCase()));
+            setOptions(filtered);
+            setCurrentPage(1);
+            setHasMoreOptions(false);
+            setHasSearched(true);
+            setLoading(false);
+            setSearchFailed(false);
+            return;
+        }
+        if (!isManualSearch || !searchResources) {
+            setOptions([]);
+            setLoading(false);
+            setHasSearched(false);
+            setHasMoreOptions(false);
+            setCurrentPage(1);
+            setSearchFailed(false);
+            return;
+        }
+        let isCancelled = false;
+        setLoading(true);
+        setHasSearched(false);
+        setSearchFailed(false);
+        setLoadMoreFailed(false);
+        const timer = window.setTimeout(() => {
+            void (async () => {
+                try {
+                    const result = await searchResources({
+                        type: activeType,
+                        query: query.trim(),
+                        page: 1,
+                        perPage: RESOURCE_SEARCH_PAGE_SIZE,
+                    });
+                    if (isCancelled)
+                        return;
+                    setOptions(result.options);
+                    setCurrentPage(result.page ?? 1);
+                    setHasMoreOptions(Boolean(result.hasMore));
+                    setHasSearched(true);
+                }
+                catch {
+                    if (!isCancelled) {
+                        setOptions([]);
+                        setCurrentPage(1);
+                        setHasMoreOptions(false);
+                        setSearchFailed(true);
+                        setHasSearched(true);
+                    }
+                }
+                finally {
+                    if (!isCancelled)
+                        setLoading(false);
+                }
+            })();
+        }, RESOURCE_SEARCH_DEBOUNCE_MS);
+        return () => {
+            isCancelled = true;
+            window.clearTimeout(timer);
+        };
+    }, [isOpen, activeType, isManualSearch, query, searchResources, editorPages]);
+    // -- Filter (by_tag) search effect -----------------------------------
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        if (!isFilterSearch || !searchResources || !isListStrategyResourceType(activeType)) {
+            setFilterOptions([]);
+            setFilterLoading(false);
+            setFilterSearchFailed(false);
+            setFilterHasSearched(false);
+            return;
+        }
+        const searchType = URL_PICKER_FILTER_SEARCH_TYPES[activeType].by_tag;
+        let isCancelled = false;
+        setFilterLoading(true);
+        setFilterSearchFailed(false);
+        setFilterHasSearched(false);
+        const timer = window.setTimeout(() => {
+            void (async () => {
+                try {
+                    const result = await searchResources({
+                        type: searchType,
+                        query: filterQuery.trim(),
+                        page: 1,
+                        perPage: RESOURCE_SEARCH_PAGE_SIZE,
+                    });
+                    if (isCancelled)
+                        return;
+                    setFilterOptions(result.options);
+                    setFilterHasSearched(true);
+                }
+                catch {
+                    if (!isCancelled) {
+                        setFilterOptions([]);
+                        setFilterSearchFailed(true);
+                        setFilterHasSearched(true);
+                    }
+                }
+                finally {
+                    if (!isCancelled)
+                        setFilterLoading(false);
+                }
+            })();
+        }, RESOURCE_SEARCH_DEBOUNCE_MS);
+        return () => {
+            isCancelled = true;
+            window.clearTimeout(timer);
+        };
+    }, [isOpen, activeType, activeStrategy, filterQuery, isFilterSearch, searchResources]);
+    const loadMoreOptions = useCallback(async () => {
+        if (!searchResources || loading || isLoadingMore || !hasMoreOptions || !isManualSearch)
+            return;
+        const nextPage = currentPage + 1;
+        setIsLoadingMore(true);
+        setLoadMoreFailed(false);
+        try {
+            const result = await searchResources({
+                type: activeType,
+                query: query.trim(),
+                page: nextPage,
+                perPage: RESOURCE_SEARCH_PAGE_SIZE,
+            });
+            setOptions((previous) => {
+                const existingValues = new Set(previous.map((option) => option.value));
+                return [...previous, ...result.options.filter((option) => !existingValues.has(option.value))];
+            });
+            setCurrentPage(result.page ?? nextPage);
+            setHasMoreOptions(Boolean(result.hasMore));
+        }
+        catch {
+            setLoadMoreFailed(true);
+        }
+        finally {
+            setIsLoadingMore(false);
+        }
+    }, [activeType, currentPage, hasMoreOptions, isLoadingMore, isManualSearch, loading, query, searchResources]);
+    const handleOptionsScroll = (event) => {
+        if (!hasMoreOptions || loading || isLoadingMore || loadMoreFailed || !isManualSearch)
+            return;
+        const target = event.currentTarget;
+        const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+        if (distanceToBottom <= RESOURCE_SCROLL_LOAD_THRESHOLD_PX) {
+            void loadMoreOptions();
+        }
+    };
+    const handleTypeTabChange = (virtualType) => {
+        const realType = realTypeFromVirtual(virtualType);
+        const isListMode = isVirtualListType(virtualType) && isListStrategyResourceType(realType);
+        setActiveVirtualType(virtualType);
+        setActiveStrategy(isListMode ? "latest" : "manual");
+        setQuery("");
+        setOptions([]);
+        setFilterQuery("");
+        setFilterOptions([]);
+        setHasSearched(false);
+        setFilterHasSearched(false);
+        setSearchFailed(false);
+        setFilterSearchFailed(false);
+    };
+    const handleSelectResource = (option) => {
+        const url = option.url ?? option.value;
+        setSelectedLabel(option.label);
+        onChange(url);
+        setOpen(false);
+    };
+    const handlePickListStrategy = (type, strategy) => {
+        if (strategy === "latest") {
+            setSelectedLabel(strategyLabel(queryStrategyConfigs, type, strategy, editorLocale));
+            onChange(buildListUrl(type));
+            setOpen(false);
+            return;
+        }
+        if (strategy === "featured") {
+            setSelectedLabel(strategyLabel(queryStrategyConfigs, type, strategy, editorLocale));
+            onChange(buildListUrl(type, { featured: "1" }));
+            setOpen(false);
+        }
+    };
+    const handleSelectFilterOption = (option) => {
+        if (!isListStrategyResourceType(activeType))
+            return;
+        if (activeStrategy !== "by_tag")
+            return;
+        const params = { tag: option.value };
+        const nextUrl = buildListUrl(activeType, params);
+        setSelectedLabel(`${strategyLabel(queryStrategyConfigs, activeType, activeStrategy, editorLocale)} · ${option.label}`);
+        onChange(nextUrl);
+        setOpen(false);
+    };
+    const handleExternalConfirm = () => {
+        if (!isValidExternalUrlInput(externalInput))
+            return;
+        setSelectedLabel("");
+        onChange(externalInput.trim());
+        setOpen(false);
+    };
+    const trimmedExternalInput = externalInput.trim();
+    const isExternalInputValid = isValidExternalUrlInput(externalInput);
+    const externalInputErrorMessage = isActiveExternal && trimmedExternalInput !== "" && !isExternalInputValid ? labels.invalidUrl : "";
+    const helperMessage = searchFailed ? labels.searchFailed : "";
+    const filterHelperMessage = filterSearchFailed ? labels.searchFailed : "";
+    const listOnlyStrategies = ["latest", "featured", "by_tag"];
+    return (_jsxs("div", { style: { position: "relative" }, children: [_jsxs("button", { ref: triggerRef, type: "button", style: triggerStyle, title: displayLabel, onClick: () => setOpen((prev) => !prev), children: [_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", style: { width: 13, height: 13, flexShrink: 0, opacity: 0.5 }, children: _jsx("path", { d: "M10.5 13.5 13.5 10.5M8.5 11.5l-1.2 1.2a3 3 0 0 0 4.2 4.2l1.2-1.2M15.5 12.5l1.2-1.2a3 3 0 0 0-4.2-4.2l-1.2 1.2", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }) }), _jsx("span", { style: {
+                            display: "inline-block",
+                            flex: 1,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                        }, children: displayLabel }), _jsx("span", { "aria-hidden": "true", style: { opacity: 0.5, fontSize: 10 }, children: "\u21C5" })] }), isOpen ? (_jsxs(_Fragment, { children: [_jsxs("div", { ref: panelRef, style: {
+                            ...rootPanelStyle,
+                            top: panelPos?.rootTop ?? 0,
+                            left: panelPos?.rootLeft ?? 0,
+                            visibility: panelPos ? "visible" : "hidden",
+                        }, children: [virtualResourceTypes.map((virtualType) => {
+                                const isActive = activeVirtualType === virtualType;
+                                return (_jsxs("button", { type: "button", style: isActive ? itemActiveStyle : itemStyleBase, onMouseEnter: () => handleTypeTabChange(virtualType), onClick: () => handleTypeTabChange(virtualType), children: [_jsx("span", { children: resourceTypeLabel(virtualType, editorLocale) }), _jsx("span", { "aria-hidden": "true", style: { opacity: 0.4, fontSize: 10 }, children: "\u203A" })] }, virtualType));
+                            }), _jsxs("button", { type: "button", style: isActiveExternal ? itemActiveStyle : itemStyleBase, onMouseEnter: () => {
+                                    setActiveVirtualType(EXTERNAL_URL_TYPE);
+                                    setActiveStrategy("manual");
+                                }, onClick: () => {
+                                    setActiveVirtualType(EXTERNAL_URL_TYPE);
+                                    setActiveStrategy("manual");
+                                }, children: [_jsx("span", { children: labels.externalUrl }), _jsx("span", { "aria-hidden": "true", style: { opacity: 0.4, fontSize: 10 }, children: "\u203A" })] })] }), _jsx("div", { ref: subPanelRef, style: {
+                            ...subPanelStyle,
+                            top: panelPos?.subTop ?? 0,
+                            left: panelPos?.subLeft ?? 0,
+                            visibility: panelPos ? "visible" : "hidden",
+                        }, children: isActiveExternal ? (_jsx(ExternalSubpanel, { value: externalInput, onChange: setExternalInput, onConfirm: handleExternalConfirm, isValid: isExternalInputValid, errorMessage: externalInputErrorMessage, confirmLabel: labels.confirm })) : supportsListStrategies ? (_jsx(ListStrategySubpanel, { strategies: listOnlyStrategies, activeStrategy: activeStrategy, onActivateStrategy: (strategy) => {
+                                setActiveStrategy(strategy);
+                                if (strategy === "latest" || strategy === "featured") {
+                                    handlePickListStrategy(activeType, strategy);
+                                }
+                            }, strategyLabelFor: (strategy) => strategyLabel(queryStrategyConfigs, activeType, strategy, editorLocale), selectedStrategy: selectedStrategyForType(activeType), filterQuery: filterQuery, onFilterQueryChange: setFilterQuery, filterOptions: filterOptions, filterLoading: filterLoading, filterHasSearched: filterHasSearched, filterHelperMessage: filterHelperMessage, onSelectFilterOption: handleSelectFilterOption, searchPlaceholder: labels.search, searchingMessage: labels.searching, noResultsMessage: labels.noResults })) : (_jsx(ManualSearchSubpanel, { query: query, onQueryChange: setQuery, options: options, loading: loading, hasSearched: hasSearched, helperMessage: helperMessage, onScroll: handleOptionsScroll, onSelect: handleSelectResource, hasMoreOptions: hasMoreOptions, isLoadingMore: isLoadingMore, loadMoreFailed: loadMoreFailed, onRetryLoadMore: () => void loadMoreOptions(), currentValue: currentValue, searchPlaceholder: labels.search, searchingMessage: labels.searching, noResultsMessage: labels.noResults, retryLabel: labels.retry, loadMoreLabel: labels.loadMore })) })] })) : null] }));
+}
+// ---------------------------------------------------------------------------
+// Sub-panels
+// ---------------------------------------------------------------------------
+function ExternalSubpanel({ value, onChange, onConfirm, isValid, errorMessage, confirmLabel, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("input", { type: "url", autoFocus: true, style: {
+                    ...inputStyle,
+                    borderColor: !isValid && value.trim() !== "" ? "#d04949" : inputStyle.border,
+                }, value: value, placeholder: "https://example.com", onChange: (event) => onChange(event.target.value), onKeyDown: (event) => {
+                    event.stopPropagation();
+                    if (event.key === "Enter" && isValid) {
+                        onConfirm();
+                    }
+                }, "aria-invalid": !isValid && value.trim() !== "" }), errorMessage !== "" ? (_jsx("div", { style: { color: "#d04949", fontSize: 11, padding: "0 4px" }, children: errorMessage })) : null, _jsx("button", { type: "button", style: buttonPrimaryStyle, onClick: onConfirm, disabled: !isValid, children: confirmLabel })] }));
+}
+function ManualSearchSubpanel({ query, onQueryChange, options, loading, hasSearched, helperMessage, onScroll, onSelect, hasMoreOptions, isLoadingMore, loadMoreFailed, onRetryLoadMore, currentValue, searchPlaceholder, searchingMessage, noResultsMessage, retryLabel, loadMoreLabel, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("input", { type: "text", autoFocus: true, style: inputStyle, value: query, placeholder: searchPlaceholder, onChange: (event) => onQueryChange(event.target.value), onKeyDown: (event) => event.stopPropagation() }), _jsx("div", { style: { maxHeight: 240, minHeight: 120, overflowY: "auto", paddingRight: 4 }, onScroll: onScroll, children: loading ? (_jsx("div", { style: helperTextStyle, children: searchingMessage })) : hasSearched && options.length === 0 ? (_jsx("div", { style: helperTextStyle, children: noResultsMessage })) : (options.map((option) => {
+                    const optionUrl = option.url ?? option.value;
+                    const isSelected = currentValue === optionUrl;
+                    return (_jsxs("button", { type: "button", style: isSelected ? itemActiveStyle : itemStyleBase, onClick: () => onSelect(option), children: [_jsx("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: option.label }), isSelected ? _jsx("span", { style: { fontSize: 10 }, children: "\u2713" }) : null] }, option.value));
+                })) }), hasMoreOptions && loadMoreFailed ? (_jsx("button", { type: "button", style: itemStyleBase, disabled: isLoadingMore, onClick: onRetryLoadMore, children: isLoadingMore ? searchingMessage : retryLabel })) : null, hasMoreOptions && !loadMoreFailed ? (_jsx("button", { type: "button", style: itemStyleBase, disabled: isLoadingMore, onClick: onRetryLoadMore, children: isLoadingMore ? searchingMessage : loadMoreLabel })) : null, helperMessage !== "" ? _jsx("div", { style: helperTextStyle, children: helperMessage }) : null] }));
+}
+function ListStrategySubpanel({ strategies, activeStrategy, onActivateStrategy, strategyLabelFor, selectedStrategy, filterQuery, onFilterQueryChange, filterOptions, filterLoading, filterHasSearched, filterHelperMessage, onSelectFilterOption, searchPlaceholder, searchingMessage, noResultsMessage, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: strategies.map((strategy) => {
+                    const isSelected = selectedStrategy === strategy;
+                    const isActive = activeStrategy === strategy;
+                    const style = isSelected || isActive ? itemActiveStyle : itemStyleBase;
+                    return (_jsxs("button", { type: "button", style: style, onClick: () => onActivateStrategy(strategy), children: [_jsx("span", { children: strategyLabelFor(strategy) }), isSelected ? _jsx("span", { style: { fontSize: 10 }, children: "\u2713" }) : null] }, strategy));
+                }) }), activeStrategy === "by_tag" ? (_jsxs(_Fragment, { children: [_jsx("input", { type: "text", autoFocus: true, style: inputStyle, value: filterQuery, placeholder: searchPlaceholder, onChange: (event) => onFilterQueryChange(event.target.value), onKeyDown: (event) => event.stopPropagation() }), _jsx("div", { style: { maxHeight: 200, minHeight: 100, overflowY: "auto", paddingRight: 4 }, children: filterLoading ? (_jsx("div", { style: helperTextStyle, children: searchingMessage })) : filterHasSearched && filterOptions.length === 0 ? (_jsx("div", { style: helperTextStyle, children: noResultsMessage })) : (filterOptions.map((option) => (_jsx("button", { type: "button", style: itemStyleBase, onClick: () => onSelectFilterOption(option), children: _jsx("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" }, children: option.label }) }, option.value)))) }), filterHelperMessage !== "" ? _jsx("div", { style: helperTextStyle, children: filterHelperMessage }) : null] })) : null] }));
+}
+// ---------------------------------------------------------------------------
+// Field factory
+// ---------------------------------------------------------------------------
+function UrlFieldRender({ value, onChange, }) {
+    return _jsx(UrlPicker, { value: value ?? "", onChange: onChange });
+}
+export function urlField(label) {
+    const field = {
+        type: "custom",
+        metadata: { sudaField: "url" },
+        render: ({ value, onChange }) => _jsx(UrlFieldRender, { value: value, onChange: onChange }),
+    };
+    if (label !== undefined) {
+        field.label = label;
+    }
+    return field;
+}
+//# sourceMappingURL=url-field.js.map