straplight 1.1.0

package/dist/_chunks/StraplightOverlay-DLEpUqQM.mjs

@@ -0,0 +1,506 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from "react";
+import { getFetchClient } from "@strapi/strapi/admin";
+import { P as PLUGIN_ID } from "./index-B2B6CFFk.mjs";
+const DEFAULTS = {
+  debounceMs: 200,
+  minQueryLength: 1
+};
+function useStraplightSettings() {
+  const [settings, setSettings] = useState(DEFAULTS);
+  useEffect(() => {
+    const { get } = getFetchClient();
+    get(`/${PLUGIN_ID}/settings`).then(({ data }) => {
+      setSettings({
+        debounceMs: data.settings?.debounceMs ?? DEFAULTS.debounceMs,
+        minQueryLength: data.settings?.minQueryLength ?? DEFAULTS.minQueryLength
+      });
+    }).catch(() => {
+    });
+  }, []);
+  return settings;
+}
+function useStraplight() {
+  const settings = useStraplightSettings();
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const debounceRef = useRef(null);
+  const requestIdRef = useRef(0);
+  useEffect(() => {
+    const handler = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setIsOpen((prev) => !prev);
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, []);
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setQuery("");
+    setResults([]);
+    setSelectedIndex(0);
+    setLoading(false);
+    requestIdRef.current++;
+  }, []);
+  useEffect(() => {
+    if (!isOpen) return;
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    const trimmed = query.trim();
+    if (trimmed.length < settings.minQueryLength) {
+      setResults([]);
+      setSelectedIndex(0);
+      setLoading(false);
+      return;
+    }
+    debounceRef.current = setTimeout(async () => {
+      const id = ++requestIdRef.current;
+      setLoading(true);
+      try {
+        const { get } = getFetchClient();
+        const { data } = await get(`/${PLUGIN_ID}/search`, {
+          params: { q: trimmed }
+        });
+        if (id !== requestIdRef.current) return;
+        setResults(data.results || []);
+        setSelectedIndex(0);
+      } catch {
+        if (id !== requestIdRef.current) return;
+        setResults([]);
+      } finally {
+        if (id === requestIdRef.current) {
+          setLoading(false);
+        }
+      }
+    }, settings.debounceMs);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [query, isOpen, settings.debounceMs, settings.minQueryLength]);
+  const navigateToResult = useCallback(
+    (result) => {
+      const path = `/content-manager/collection-types/${result.uid}/${result.documentId}`;
+      const nav = window.__straplight?.navigate;
+      if (nav) {
+        nav(path);
+      } else {
+        window.location.href = `/admin${path}`;
+      }
+      close();
+    },
+    [close]
+  );
+  const onKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIndex((i) => i < results.length - 1 ? i + 1 : 0);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIndex((i) => i > 0 ? i - 1 : results.length - 1);
+      } else if (e.key === "Enter" && results.length > 0) {
+        e.preventDefault();
+        navigateToResult(results[selectedIndex]);
+      }
+    },
+    [results, selectedIndex, navigateToResult, close]
+  );
+  return {
+    isOpen,
+    query,
+    setQuery,
+    results,
+    loading,
+    selectedIndex,
+    close,
+    onKeyDown,
+    navigateToResult
+  };
+}
+const OVERLAY_STYLES = `
+@keyframes straplight-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes straplight-slide-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
+  to { opacity: 1; transform: translateX(-50%); }
+}
+@keyframes straplight-spin {
+  to { transform: rotate(360deg); }
+}
+`;
+function resolveIsDark() {
+  const stored = localStorage.getItem("STRAPI_THEME") || "system";
+  if (stored === "dark") return true;
+  if (stored === "light") return false;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function useIsDarkMode() {
+  return resolveIsDark();
+}
+const themes = {
+  light: {
+    bg: "#ffffff",
+    bgHover: "#f6f6f9",
+    bgSelected: "#f0f0ff",
+    text: "#32324d",
+    textMuted: "#8e8ea9",
+    border: "#eaeaef",
+    inputText: "#32324d",
+    badge: "#f6f6f9",
+    kbd: "#f6f6f9",
+    kbdBorder: "#dcdce4",
+    kbdText: "#666687",
+    backdrop: "rgba(0, 0, 0, 0.4)",
+    shadow: "0 16px 70px rgba(0, 0, 0, 0.2)",
+    spinnerTrack: "#eaeaef",
+    spinnerAccent: "#4945ff"
+  },
+  dark: {
+    bg: "#212134",
+    bgHover: "#2a2a3e",
+    bgSelected: "#2e2e48",
+    text: "#eaeaef",
+    textMuted: "#a5a5ba",
+    border: "#3d3d57",
+    inputText: "#eaeaef",
+    badge: "#2e2e48",
+    kbd: "#2e2e48",
+    kbdBorder: "#3d3d57",
+    kbdText: "#a5a5ba",
+    backdrop: "rgba(0, 0, 0, 0.6)",
+    shadow: "0 16px 70px rgba(0, 0, 0, 0.5)",
+    spinnerTrack: "#3d3d57",
+    spinnerAccent: "#7b79ff"
+  }
+};
+function StraplightOverlay() {
+  const {
+    isOpen,
+    query,
+    setQuery,
+    results,
+    loading,
+    selectedIndex,
+    close,
+    onKeyDown,
+    navigateToResult
+  } = useStraplight();
+  const dark = useIsDarkMode();
+  const t = dark ? themes.dark : themes.light;
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!listRef.current) return;
+    const selected = listRef.current.children[selectedIndex];
+    if (selected) {
+      selected.scrollIntoView({ block: "nearest" });
+    }
+  }, [selectedIndex]);
+  if (!isOpen) return null;
+  const isMac = typeof navigator !== "undefined" && /mac/i.test(navigator.platform || navigator.userAgent);
+  const modKey = isMac ? "⌘" : "Ctrl";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: OVERLAY_STYLES }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: close,
+        style: {
+          position: "fixed",
+          inset: 0,
+          backgroundColor: t.backdrop,
+          backdropFilter: "blur(4px)",
+          zIndex: 99999,
+          animation: "straplight-fade-in 0.15s ease-out"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onKeyDown,
+        style: {
+          position: "fixed",
+          top: "calc(50% - 50px)",
+          left: "50%",
+          width: "580px",
+          maxWidth: "calc(100vw - 32px)",
+          maxHeight: "440px",
+          backgroundColor: t.bg,
+          borderRadius: "12px",
+          boxShadow: t.shadow,
+          zIndex: 1e5,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          animation: "straplight-slide-in 0.2s ease-out 0.05s both"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                padding: "14px 16px",
+                borderBottom: `1px solid ${t.border}`,
+                gap: "10px"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: t.textMuted,
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+                      /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: inputRef,
+                    type: "text",
+                    value: query,
+                    onChange: (e) => setQuery(e.target.value),
+                    placeholder: "Search content...",
+                    style: {
+                      flex: 1,
+                      border: "none",
+                      outline: "none",
+                      fontSize: "16px",
+                      fontFamily: "inherit",
+                      color: t.inputText,
+                      backgroundColor: "transparent"
+                    }
+                  }
+                ),
+                loading && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      width: "18px",
+                      height: "18px",
+                      border: `2px solid ${t.spinnerTrack}`,
+                      borderTopColor: t.spinnerAccent,
+                      borderRadius: "50%",
+                      animation: "straplight-spin 0.6s linear infinite"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: listRef,
+              style: {
+                flex: 1,
+                overflowY: "auto",
+                padding: results.length > 0 ? "8px" : "0"
+              },
+              children: [
+                query.trim() && !loading && results.length === 0 && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      padding: "32px 16px",
+                      textAlign: "center",
+                      color: t.textMuted,
+                      fontSize: "14px"
+                    },
+                    children: "No results found"
+                  }
+                ),
+                results.map((result, index) => /* @__PURE__ */ jsx(
+                  ResultItem,
+                  {
+                    result,
+                    isSelected: index === selectedIndex,
+                    onClick: () => navigateToResult(result),
+                    t
+                  },
+                  `${result.uid}-${result.documentId}`
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "16px",
+                padding: "10px 16px",
+                borderTop: `1px solid ${t.border}`,
+                fontSize: "12px",
+                color: t.textMuted
+              },
+              children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx(Kbd, { t, children: "↑↓" }),
+                  " navigate"
+                ] }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx(Kbd, { t, children: "⏎" }),
+                  " open"
+                ] }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx(Kbd, { t, children: "esc" }),
+                  " close"
+                ] }),
+                /* @__PURE__ */ jsxs("span", { style: { marginLeft: "auto" }, children: [
+                  /* @__PURE__ */ jsxs(Kbd, { t, children: [
+                    modKey,
+                    "+K"
+                  ] }),
+                  " toggle"
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function ResultItem({
+  result,
+  isSelected,
+  onClick,
+  t
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "10px 12px",
+        borderRadius: "8px",
+        cursor: "pointer",
+        backgroundColor: isSelected ? t.bgSelected : "transparent",
+        transition: "background-color 0.1s"
+      },
+      onMouseEnter: (e) => {
+        if (!isSelected)
+          e.currentTarget.style.backgroundColor = t.bgHover;
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = isSelected ? t.bgSelected : "transparent";
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflow: "hidden",
+              marginRight: "12px",
+              display: "flex",
+              alignItems: "baseline",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: "14px",
+                    color: t.text,
+                    fontWeight: isSelected ? 600 : 400,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    flexShrink: 1,
+                    minWidth: 0
+                  },
+                  children: result.label
+                }
+              ),
+              result.fields && result.fields.length > 0 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: "12px",
+                    color: t.textMuted,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    flexShrink: 2,
+                    minWidth: 0
+                  },
+                  children: result.fields.map((f) => f.value).join(" · ")
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: "11px",
+              color: t.textMuted,
+              backgroundColor: t.badge,
+              padding: "2px 8px",
+              borderRadius: "4px",
+              whiteSpace: "nowrap",
+              flexShrink: 0
+            },
+            children: result.contentType
+          }
+        )
+      ]
+    }
+  );
+}
+function Kbd({ children, t }) {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      style: {
+        display: "inline-block",
+        padding: "1px 5px",
+        fontSize: "11px",
+        fontFamily: "inherit",
+        color: t.kbdText,
+        backgroundColor: t.kbd,
+        border: `1px solid ${t.kbdBorder}`,
+        borderRadius: "4px"
+      },
+      children
+    }
+  );
+}
+export {
+  StraplightOverlay
+};