straplight 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bartosz Gamza
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,83 @@
+<p align="center">
+  <img src="assets/icon.png" width="120" alt="Straplight icon" />
+</p>
+
+<h1 align="center">Straplight</h1>
+
+<p align="center">Spotlight-like search overlay for the Strapi admin panel. Press <strong>Cmd+K</strong> (or <strong>Ctrl+K</strong>) to instantly search across all your content types.</p>
+
+<p align="center">
+  <img src="assets/screenshot.png" alt="Straplight search overlay" />
+</p>
+
+## Features
+
+- **Cmd+K search overlay** — opens a search dialog from anywhere in the admin panel
+- **Full-text search** — searches across all string fields (title, name, text, email, richtext, etc.) in your `api::` content types
+- **Keyboard navigation** — use arrow keys to navigate results, Enter to open, Escape to close
+- **Debounced search** with stale-response protection — fast and flicker-free
+- **Dark and light theme** support — follows your Strapi admin theme
+- **Configurable** — fine-tune search behavior and choose which content types are searchable via the settings page
+
+## Installation
+
+```bash
+npm install straplight
+# or
+yarn add straplight
+```
+
+Add the plugin to your Strapi configuration:
+
+```ts
+// config/plugins.ts
+export default () => ({
+  straplight: {
+    enabled: true,
+  },
+});
+```
+
+Rebuild your admin panel:
+
+```bash
+yarn build
+yarn develop
+```
+
+## Usage
+
+1. Press **Cmd+K** (macOS) or **Ctrl+K** (Windows/Linux) from anywhere in the admin panel
+2. Start typing to search across all your content types
+3. Use **Arrow Up/Down** to navigate results
+4. Press **Enter** to open the selected entry in the Content Manager
+5. Press **Escape** to close the overlay
+
+## Settings
+
+Navigate to **Settings > Straplight** in the admin panel to configure the plugin.
+
+### General
+
+| Setting | Description | Default |
+| --- | --- | --- |
+| **Delay** | Debounce delay in milliseconds before triggering a search | `200` |
+| **Min characters** | Minimum query length required to trigger a search | `1` |
+
+### Content Types
+
+The content types table lets you control search behavior per content type:
+
+- **Enabled** — toggle whether a content type is included in search results
+- **Additional display fields** — choose up to 2 extra fields to show alongside the main field in search results (supports relations)
+
+All `api::` content types are searchable by default.
+
+## Compatibility
+
+- Strapi v5 (5.x)
+- Node.js >= 18
+
+## License
+
+[MIT](LICENSE)

package/dist/_chunks/Settings-BLDXIWWB.js

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const admin = require("@strapi/strapi/admin");
+const designSystem = require("@strapi/design-system");
+const index = require("./index-CuzgWWKQ.js");
+const DEFAULTS = {
+  debounceMs: 200,
+  minQueryLength: 1,
+  contentTypes: {}
+};
+function SettingsPage() {
+  const [settings, setSettings] = react.useState(DEFAULTS);
+  const [contentTypes, setContentTypes] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [isSaving, setIsSaving] = react.useState(false);
+  const { toggleNotification } = admin.useNotification();
+  react.useEffect(() => {
+    const { get } = admin.getFetchClient();
+    get(`/${index.PLUGIN_ID}/settings`).then(({ data }) => {
+      setSettings({ ...DEFAULTS, ...data.settings });
+      setContentTypes(data.contentTypes || []);
+    }).catch(() => {
+      toggleNotification({
+        type: "danger",
+        message: "Failed to load settings"
+      });
+    }).finally(() => setIsLoading(false));
+  }, []);
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      const { put } = admin.getFetchClient();
+      const { data } = await put(`/${index.PLUGIN_ID}/settings`, settings);
+      setSettings({ ...DEFAULTS, ...data.settings });
+      toggleNotification({
+        type: "success",
+        message: "Settings saved successfully"
+      });
+    } catch {
+      toggleNotification({
+        type: "danger",
+        message: "Failed to save settings"
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const updateContentType = (uid, update) => {
+    setSettings((prev) => ({
+      ...prev,
+      contentTypes: {
+        ...prev.contentTypes,
+        [uid]: {
+          ...{
+            enabled: prev.contentTypes[uid]?.enabled !== false,
+            displayFields: prev.contentTypes[uid]?.displayFields || []
+          },
+          ...prev.contentTypes[uid],
+          ...update
+        }
+      }
+    }));
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(admin.Layouts.Root, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Header, { title: "Straplight", subtitle: "Configure the search overlay" }),
+      /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 8, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: "Loading..." }) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(admin.Layouts.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      admin.Layouts.Header,
+      {
+        title: "Straplight",
+        subtitle: "Configure the search overlay",
+        primaryAction: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: handleSave, loading: isSaving, children: "Save" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(admin.Layouts.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 8, background: "neutral0", shadow: "filterShadow", hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "h2", children: "General" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 6, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: "delay-input", hint: "Debounce delay before triggering search (ms)", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Delay" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.NumberInput,
+              {
+                id: "delay-input",
+                name: "debounceMs",
+                value: settings.debounceMs,
+                onValueChange: (value) => setSettings((prev) => ({ ...prev, debounceMs: value ?? 200 })),
+                step: 50
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: "min-query-input", hint: "Minimum query length to trigger search", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Min characters" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.NumberInput,
+              {
+                label: "Min characters",
+                name: "minQueryLength",
+                value: settings.minQueryLength,
+                onValueChange: (value) => setSettings((prev) => ({ ...prev, minQueryLength: Math.max(1, value ?? 1) })),
+                step: 1
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+          ] }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 8, marginTop: 6, background: "neutral0", shadow: "filterShadow", hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "start", gap: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "h2", children: "Content Types" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Choose which content types are searchable and what fields to display in results" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { colCount: 3, rowCount: contentTypes.length, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Enabled" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Content Type" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Additional display fields" }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: contentTypes.map((ct) => {
+            const ctSettings = settings.contentTypes[ct.uid];
+            const isEnabled = ctSettings?.enabled !== false;
+            const displayFields = ctSettings?.displayFields || [];
+            const availableFields = ct.fields.filter((f) => f.name !== ct.mainField);
+            return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Switch,
+                {
+                  checked: isEnabled,
+                  onCheckedChange: (checked) => updateContentType(ct.uid, { enabled: checked }),
+                  visibleLabels: true
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "start", gap: 1, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: ct.displayName }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: ct.uid })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.MultiSelect,
+                {
+                  placeholder: "Select fields...",
+                  value: displayFields,
+                  onChange: (values) => {
+                    if (values.length <= 2) {
+                      updateContentType(ct.uid, { displayFields: values });
+                    }
+                  },
+                  disabled: !isEnabled,
+                  withTags: true,
+                  children: availableFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.MultiSelectOption, { value: field.name, children: field.type === "relation" ? `${field.name} (${field.target})` : field.name }, field.name))
+                }
+              ) })
+            ] }, ct.uid);
+          }) })
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+exports.SettingsPage = SettingsPage;

package/dist/_chunks/Settings-CncfOILf.mjs

@@ -0,0 +1,166 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useNotification, getFetchClient, Layouts } from "@strapi/strapi/admin";
+import { Box, Typography, Button, Flex, Grid, Field, NumberInput, Table, Thead, Tr, Th, Tbody, Td, Switch, MultiSelect, MultiSelectOption } from "@strapi/design-system";
+import { P as PLUGIN_ID } from "./index-B2B6CFFk.mjs";
+const DEFAULTS = {
+  debounceMs: 200,
+  minQueryLength: 1,
+  contentTypes: {}
+};
+function SettingsPage() {
+  const [settings, setSettings] = useState(DEFAULTS);
+  const [contentTypes, setContentTypes] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const { toggleNotification } = useNotification();
+  useEffect(() => {
+    const { get } = getFetchClient();
+    get(`/${PLUGIN_ID}/settings`).then(({ data }) => {
+      setSettings({ ...DEFAULTS, ...data.settings });
+      setContentTypes(data.contentTypes || []);
+    }).catch(() => {
+      toggleNotification({
+        type: "danger",
+        message: "Failed to load settings"
+      });
+    }).finally(() => setIsLoading(false));
+  }, []);
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      const { put } = getFetchClient();
+      const { data } = await put(`/${PLUGIN_ID}/settings`, settings);
+      setSettings({ ...DEFAULTS, ...data.settings });
+      toggleNotification({
+        type: "success",
+        message: "Settings saved successfully"
+      });
+    } catch {
+      toggleNotification({
+        type: "danger",
+        message: "Failed to save settings"
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const updateContentType = (uid, update) => {
+    setSettings((prev) => ({
+      ...prev,
+      contentTypes: {
+        ...prev.contentTypes,
+        [uid]: {
+          ...{
+            enabled: prev.contentTypes[uid]?.enabled !== false,
+            displayFields: prev.contentTypes[uid]?.displayFields || []
+          },
+          ...prev.contentTypes[uid],
+          ...update
+        }
+      }
+    }));
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs(Layouts.Root, { children: [
+      /* @__PURE__ */ jsx(Layouts.Header, { title: "Straplight", subtitle: "Configure the search overlay" }),
+      /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsx(Box, { padding: 8, children: /* @__PURE__ */ jsx(Typography, { children: "Loading..." }) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Layouts.Root, { children: [
+    /* @__PURE__ */ jsx(
+      Layouts.Header,
+      {
+        title: "Straplight",
+        subtitle: "Configure the search overlay",
+        primaryAction: /* @__PURE__ */ jsx(Button, { onClick: handleSave, loading: isSaving, children: "Save" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Layouts.Content, { children: [
+      /* @__PURE__ */ jsx(Box, { padding: 8, background: "neutral0", shadow: "filterShadow", hasRadius: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: "General" }),
+        /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, children: [
+          /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxs(Field.Root, { id: "delay-input", hint: "Debounce delay before triggering search (ms)", children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: "Delay" }),
+            /* @__PURE__ */ jsx(
+              NumberInput,
+              {
+                id: "delay-input",
+                name: "debounceMs",
+                value: settings.debounceMs,
+                onValueChange: (value) => setSettings((prev) => ({ ...prev, debounceMs: value ?? 200 })),
+                step: 50
+              }
+            ),
+            /* @__PURE__ */ jsx(Field.Hint, {})
+          ] }) }),
+          /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxs(Field.Root, { id: "min-query-input", hint: "Minimum query length to trigger search", children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: "Min characters" }),
+            /* @__PURE__ */ jsx(
+              NumberInput,
+              {
+                label: "Min characters",
+                name: "minQueryLength",
+                value: settings.minQueryLength,
+                onValueChange: (value) => setSettings((prev) => ({ ...prev, minQueryLength: Math.max(1, value ?? 1) })),
+                step: 1
+              }
+            ),
+            /* @__PURE__ */ jsx(Field.Hint, {})
+          ] }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Box, { padding: 8, marginTop: 6, background: "neutral0", shadow: "filterShadow", hasRadius: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "start", gap: 1, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: "Content Types" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Choose which content types are searchable and what fields to display in results" })
+        ] }),
+        /* @__PURE__ */ jsxs(Table, { colCount: 3, rowCount: contentTypes.length, children: [
+          /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Enabled" }) }),
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Content Type" }) }),
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Additional display fields" }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(Tbody, { children: contentTypes.map((ct) => {
+            const ctSettings = settings.contentTypes[ct.uid];
+            const isEnabled = ctSettings?.enabled !== false;
+            const displayFields = ctSettings?.displayFields || [];
+            const availableFields = ct.fields.filter((f) => f.name !== ct.mainField);
+            return /* @__PURE__ */ jsxs(Tr, { children: [
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  checked: isEnabled,
+                  onCheckedChange: (checked) => updateContentType(ct.uid, { enabled: checked }),
+                  visibleLabels: true
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "start", gap: 1, children: [
+                /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: ct.displayName }),
+                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: ct.uid })
+              ] }) }),
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+                MultiSelect,
+                {
+                  placeholder: "Select fields...",
+                  value: displayFields,
+                  onChange: (values) => {
+                    if (values.length <= 2) {
+                      updateContentType(ct.uid, { displayFields: values });
+                    }
+                  },
+                  disabled: !isEnabled,
+                  withTags: true,
+                  children: availableFields.map((field) => /* @__PURE__ */ jsx(MultiSelectOption, { value: field.name, children: field.type === "relation" ? `${field.name} (${field.target})` : field.name }, field.name))
+                }
+              ) })
+            ] }, ct.uid);
+          }) })
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+export {
+  SettingsPage
+};