basefn 1.8.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basefn",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/brnrdog/basefn.git"

package/src/Basefn.res

@@ -62,6 +62,7 @@ type hoverCardAlign = Basefn__HoverCard.align
 type alertDialogVariant = Basefn__AlertDialog.variant
 type contextMenuItem = Basefn__ContextMenu.menuItem
 type contextMenuContent = Basefn__ContextMenu.menuContent
+type spotlightItem = Basefn__Spotlight.spotlightItem
 type gridColumns = Basefn__Grid.columns
 type gridRows = Basefn__Grid.rows
 type gridAutoFlow = Basefn__Grid.autoFlow
@@ -227,6 +228,9 @@ module AlertDialog = {
 module ContextMenu = {
   include Basefn__ContextMenu
 }
+module Spotlight = {
+  include Basefn__Spotlight
+}
 
 // Responsive Utilities
 module Responsive = {

package/src/Basefn.res.mjs

@@ -36,6 +36,7 @@ import * as Basefn__Accordion from "./components/Basefn__Accordion.res.mjs";
 import * as Basefn__AppLayout from "./components/Basefn__AppLayout.res.mjs";
 import * as Basefn__HoverCard from "./components/Basefn__HoverCard.res.mjs";
 import * as Basefn__Separator from "./components/Basefn__Separator.res.mjs";
+import * as Basefn__Spotlight from "./components/Basefn__Spotlight.res.mjs";
 import * as Basefn__Breadcrumb from "./components/Basefn__Breadcrumb.res.mjs";
 import * as Basefn__Responsive from "./Basefn__Responsive.res.mjs";
 import * as Basefn__ScrollArea from "./components/Basefn__ScrollArea.res.mjs";
@@ -140,6 +141,8 @@ let AlertDialog = Basefn__AlertDialog;
 
 let ContextMenu = Basefn__ContextMenu;
 
+let Spotlight = Basefn__Spotlight;
+
 let Responsive = Basefn__Responsive;
 
 export {
@@ -188,6 +191,7 @@ export {
   HoverCard,
   AlertDialog,
   ContextMenu,
+  Spotlight,
   Responsive,
 }
 /*  Not a pure module */

package/src/components/Basefn__Spotlight.css

@@ -0,0 +1,207 @@
+@import '../styles/variables.css';
+
+.basefn-spotlight-backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: var(--basefn-surface-overlay);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 20vh;
+  z-index: 1100;
+  animation: basefn-spotlight-fade-in 0.15s ease-out;
+}
+
+.basefn-spotlight {
+  background: var(--basefn-bg-primary);
+  border-radius: var(--basefn-radius-xl);
+  box-shadow: var(--basefn-shadow-lg);
+  width: 560px;
+  max-width: 90vw;
+  max-height: 60vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: basefn-spotlight-slide-in 0.2s ease-out;
+}
+
+/* Search input area */
+.basefn-spotlight__input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--basefn-spacing-md);
+  padding: var(--basefn-spacing-md) var(--basefn-spacing-lg);
+  border-bottom: 1px solid var(--basefn-border-primary);
+}
+
+.basefn-spotlight__icon {
+  flex-shrink: 0;
+  color: var(--basefn-text-tertiary);
+  width: 20px;
+  height: 20px;
+}
+
+.basefn-spotlight__input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--basefn-font-family);
+  font-size: var(--basefn-font-size-base);
+  color: var(--basefn-text-primary);
+  line-height: var(--basefn-line-height-normal);
+  padding: var(--basefn-spacing-sm) 0;
+}
+
+.basefn-spotlight__input::placeholder {
+  color: var(--basefn-text-muted);
+}
+
+/* Results list */
+.basefn-spotlight__results {
+  overflow-y: auto;
+  padding: var(--basefn-spacing-sm) 0;
+}
+
+.basefn-spotlight__empty {
+  padding: var(--basefn-spacing-xl) var(--basefn-spacing-lg);
+  text-align: center;
+  color: var(--basefn-text-muted);
+  font-size: var(--basefn-font-size-sm);
+}
+
+.basefn-spotlight__group-label {
+  padding: var(--basefn-spacing-sm) var(--basefn-spacing-lg);
+  font-size: var(--basefn-font-size-xs);
+  font-weight: var(--basefn-font-weight-semibold);
+  color: var(--basefn-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.basefn-spotlight__item {
+  display: flex;
+  align-items: center;
+  gap: var(--basefn-spacing-md);
+  width: 100%;
+  padding: var(--basefn-spacing-sm) var(--basefn-spacing-lg);
+  margin: 0;
+  font-family: var(--basefn-font-family);
+  font-size: var(--basefn-font-size-sm);
+  color: var(--basefn-text-primary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color var(--basefn-transition-fast);
+  border-radius: 0;
+}
+
+.basefn-spotlight__item:hover,
+.basefn-spotlight__item--active {
+  background-color: var(--basefn-color-primary);
+  color: #ffffff;
+}
+
+.basefn-spotlight__item-icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--basefn-text-tertiary);
+}
+
+.basefn-spotlight__item:hover .basefn-spotlight__item-icon,
+.basefn-spotlight__item--active .basefn-spotlight__item-icon {
+  color: #ffffff;
+}
+
+.basefn-spotlight__item-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.basefn-spotlight__item-label {
+  font-weight: var(--basefn-font-weight-medium);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.basefn-spotlight__item-description {
+  font-size: var(--basefn-font-size-xs);
+  color: var(--basefn-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 1px;
+}
+
+.basefn-spotlight__item:hover .basefn-spotlight__item-description,
+.basefn-spotlight__item--active .basefn-spotlight__item-description {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Footer with keyboard hints */
+.basefn-spotlight__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--basefn-spacing-lg);
+  padding: var(--basefn-spacing-sm) var(--basefn-spacing-lg);
+  border-top: 1px solid var(--basefn-border-primary);
+  font-size: var(--basefn-font-size-xs);
+  color: var(--basefn-text-muted);
+}
+
+.basefn-spotlight__footer-hint {
+  display: flex;
+  align-items: center;
+  gap: var(--basefn-spacing-xs);
+}
+
+.basefn-spotlight__footer-key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.25rem;
+  border-radius: var(--basefn-radius-sm);
+  border: 1px solid var(--basefn-border-secondary);
+  background: var(--basefn-bg-secondary);
+  font-size: 0.6875rem;
+  font-family: var(--basefn-font-family);
+  line-height: 1;
+}
+
+/* Animations */
+@keyframes basefn-spotlight-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes basefn-spotlight-slide-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* Mobile */
+@media (max-width: 640px) {
+  .basefn-spotlight-backdrop {
+    padding-top: 10vh;
+  }
+
+  .basefn-spotlight {
+    max-width: 95vw;
+    max-height: 70vh;
+  }
+
+  .basefn-spotlight__footer {
+    display: none;
+  }
+}

package/src/components/Basefn__Spotlight.res

@@ -0,0 +1,205 @@
+%%raw(`import './Basefn__Spotlight.css'`)
+
+open Xote
+
+@get external key: Dom.event => string = "key"
+@send external focus: Dom.element => unit = "focus"
+@send external querySelector: (Dom.element, string) => Nullable.t<Dom.element> = "querySelector"
+
+type spotlightItem = {
+  id: string,
+  label: string,
+  description?: string,
+  group?: string,
+  onSelect: unit => unit,
+}
+
+@jsx.component
+let make = (
+  ~isOpen: Signal.t<bool>,
+  ~onClose: unit => unit,
+  ~items: array<spotlightItem>,
+  ~placeholder: string="Search...",
+  ~emptyMessage: string="No results found.",
+  ~filterFn: option<(string, spotlightItem) => bool>=?,
+) => {
+  let query = Signal.make("")
+  let activeIndex = Signal.make(0)
+
+  let defaultFilter = (q: string, item: spotlightItem) => {
+    let q = String.toLowerCase(q)
+    String.toLowerCase(item.label)->String.includes(q) ||
+      switch item.description {
+      | Some(desc) => String.toLowerCase(desc)->String.includes(q)
+      | None => false
+      }
+  }
+
+  let filterItem = switch filterFn {
+  | Some(fn) => fn
+  | None => defaultFilter
+  }
+
+  let filteredItems = Computed.make(() => {
+    let q = Signal.get(query)
+    if q === "" {
+      items
+    } else {
+      items->Array.filter(item => filterItem(q, item))
+    }
+  })
+
+  let handleSelect = (item: spotlightItem) => {
+    item.onSelect()
+    Signal.set(query, "")
+    Signal.set(activeIndex, 0)
+    onClose()
+  }
+
+  let handleKeyDown = (evt: Dom.event) => {
+    let k = key(evt)
+    let currentItems = Signal.get(filteredItems)
+    let len = Array.length(currentItems)
+
+    switch k {
+    | "ArrowDown" => {
+        let _ = Basefn__Dom.preventDefault(evt)
+        Signal.update(activeIndex, i => mod(i + 1, max(len, 1)))
+      }
+    | "ArrowUp" => {
+        let _ = Basefn__Dom.preventDefault(evt)
+        Signal.update(activeIndex, i => mod(i - 1 + max(len, 1), max(len, 1)))
+      }
+    | "Enter" =>
+      if len > 0 {
+        let idx = Signal.get(activeIndex)
+        switch currentItems->Array.get(idx) {
+        | Some(item) => handleSelect(item)
+        | None => ()
+        }
+      }
+    | "Escape" => {
+        Signal.set(query, "")
+        Signal.set(activeIndex, 0)
+        onClose()
+      }
+    | _ => ()
+    }
+  }
+
+  let handleInput = (evt: Dom.event) => {
+    let value = Basefn__Dom.target(evt)["value"]
+    Signal.set(query, value)
+    Signal.set(activeIndex, 0)
+  }
+
+  let handleBackdropClick = evt => {
+    let target = Obj.magic(evt)["target"]
+    let currentTarget = Obj.magic(evt)["currentTarget"]
+    if target === currentTarget {
+      Signal.set(query, "")
+      Signal.set(activeIndex, 0)
+      onClose()
+    }
+  }
+
+  // Auto-focus input when opened
+  let _ = Effect.run(() => {
+    if Signal.get(isOpen) {
+      let _ = setTimeout(() => {
+        let doc: Dom.element = %raw(`document.body`)
+        switch querySelector(doc, ".basefn-spotlight__input") {
+        | Value(el) => focus(el)
+        | _ => ()
+        }
+      }, 16)
+    }
+    None
+  })
+
+  let renderResults = () => {
+    let currentItems = Signal.get(filteredItems)
+
+    if Array.length(currentItems) === 0 {
+      <div class="basefn-spotlight__empty"> {Component.text(emptyMessage)} </div>
+    } else {
+      let lastGroup: ref<option<string>> = ref(None)
+      let elements: array<Component.node> = []
+
+      currentItems->Array.forEachWithIndex((item, index) => {
+        switch item.group {
+        | Some(group) if Some(group) !== lastGroup.contents => {
+            lastGroup := Some(group)
+            let _ = elements->Array.push(
+              <div key={"group-" ++ group} class="basefn-spotlight__group-label">
+                {Component.text(group)}
+              </div>,
+            )
+          }
+        | _ => ()
+        }
+
+        let itemClass =
+          "basefn-spotlight__item" ++
+          (index === Signal.get(activeIndex) ? " basefn-spotlight__item--active" : "")
+
+        let _ = elements->Array.push(
+          <button key={item.id} class={itemClass} onClick={_ => handleSelect(item)}>
+            <div class="basefn-spotlight__item-content">
+              <div class="basefn-spotlight__item-label"> {Component.text(item.label)} </div>
+              {switch item.description {
+              | Some(desc) =>
+                <div class="basefn-spotlight__item-description"> {Component.text(desc)} </div>
+              | None => <> </>
+              }}
+            </div>
+          </button>,
+        )
+      })
+
+      elements->Component.fragment
+    }
+  }
+
+  let content = Computed.make(() => {
+    if Signal.get(isOpen) {
+      [
+        <div class="basefn-spotlight-backdrop" onClick={handleBackdropClick}>
+          <div class="basefn-spotlight">
+            <div class="basefn-spotlight__input-wrapper">
+              <Basefn__Icon name={Basefn__Icon.Search} size={Basefn__Icon.Sm} />
+              <input
+                class="basefn-spotlight__input"
+                type_="text"
+                placeholder
+                value={ReactiveProp.reactive(query)}
+                onInput={handleInput}
+                onKeyDown={handleKeyDown}
+              />
+            </div>
+            <div class="basefn-spotlight__results"> {renderResults()} </div>
+            <div class="basefn-spotlight__footer">
+              <span class="basefn-spotlight__footer-hint">
+                <span class="basefn-spotlight__footer-key"> {Component.text("\u2191")} </span>
+                <span class="basefn-spotlight__footer-key"> {Component.text("\u2193")} </span>
+                {Component.text("to navigate")}
+              </span>
+              <span class="basefn-spotlight__footer-hint">
+                <span class="basefn-spotlight__footer-key"> {Component.text("\u21b5")} </span>
+                {Component.text("to select")}
+              </span>
+              <span class="basefn-spotlight__footer-hint">
+                <span class="basefn-spotlight__footer-key"> {Component.text("esc")} </span>
+                {Component.text("to close")}
+              </span>
+            </div>
+          </div>
+        </div>,
+      ]
+    } else {
+      []
+    }
+  })
+
+  Component.signalFragment(content)
+}

package/src/components/Basefn__Spotlight.res.mjs

@@ -0,0 +1,233 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Xote from "xote/src/Xote.res.mjs";
+import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Basefn__Dom from "../Basefn__Dom.res.mjs";
+import * as Basefn__Icon from "./Basefn__Icon.res.mjs";
+import * as Primitive_int from "@rescript/runtime/lib/es6/Primitive_int.js";
+
+import './Basefn__Spotlight.css'
+;
+
+function Basefn__Spotlight(props) {
+  let filterFn = props.filterFn;
+  let __emptyMessage = props.emptyMessage;
+  let __placeholder = props.placeholder;
+  let items = props.items;
+  let onClose = props.onClose;
+  let isOpen = props.isOpen;
+  let placeholder = __placeholder !== undefined ? __placeholder : "Search...";
+  let emptyMessage = __emptyMessage !== undefined ? __emptyMessage : "No results found.";
+  let query = Xote.Signal.make("", undefined, undefined);
+  let activeIndex = Xote.Signal.make(0, undefined, undefined);
+  let defaultFilter = (q, item) => {
+    let q$1 = q.toLowerCase();
+    if (item.label.toLowerCase().includes(q$1)) {
+      return true;
+    }
+    let desc = item.description;
+    if (desc !== undefined) {
+      return desc.toLowerCase().includes(q$1);
+    } else {
+      return false;
+    }
+  };
+  let filterItem = filterFn !== undefined ? filterFn : defaultFilter;
+  let filteredItems = Xote.Computed.make(() => {
+    let q = Xote.Signal.get(query);
+    if (q === "") {
+      return items;
+    } else {
+      return items.filter(item => filterItem(q, item));
+    }
+  }, undefined);
+  let handleSelect = item => {
+    item.onSelect();
+    Xote.Signal.set(query, "");
+    Xote.Signal.set(activeIndex, 0);
+    onClose();
+  };
+  let handleKeyDown = evt => {
+    let k = evt.key;
+    let currentItems = Xote.Signal.get(filteredItems);
+    let len = currentItems.length;
+    switch (k) {
+      case "ArrowDown" :
+        Basefn__Dom.preventDefault(evt);
+        return Xote.Signal.update(activeIndex, i => Primitive_int.mod_(i + 1 | 0, Primitive_int.max(len, 1)));
+      case "ArrowUp" :
+        Basefn__Dom.preventDefault(evt);
+        return Xote.Signal.update(activeIndex, i => Primitive_int.mod_((i - 1 | 0) + Primitive_int.max(len, 1) | 0, Primitive_int.max(len, 1)));
+      case "Enter" :
+        if (len <= 0) {
+          return;
+        }
+        let idx = Xote.Signal.get(activeIndex);
+        let item = currentItems[idx];
+        if (item !== undefined) {
+          return handleSelect(item);
+        } else {
+          return;
+        }
+      case "Escape" :
+        Xote.Signal.set(query, "");
+        Xote.Signal.set(activeIndex, 0);
+        return onClose();
+      default:
+        return;
+    }
+  };
+  let handleInput = evt => {
+    let value = Basefn__Dom.target(evt).value;
+    Xote.Signal.set(query, value);
+    Xote.Signal.set(activeIndex, 0);
+  };
+  let handleBackdropClick = evt => {
+    let target = evt.target;
+    let currentTarget = evt.currentTarget;
+    if (target === currentTarget) {
+      Xote.Signal.set(query, "");
+      Xote.Signal.set(activeIndex, 0);
+      return onClose();
+    }
+  };
+  Xote.Effect.run(() => {
+    if (Xote.Signal.get(isOpen)) {
+      setTimeout(() => {
+        let doc = document.body;
+        let el = doc.querySelector(".basefn-spotlight__input");
+        if (el == null) {
+          return;
+        }
+        el.focus();
+      }, 16);
+    }
+  }, undefined);
+  let renderResults = () => {
+    let currentItems = Xote.Signal.get(filteredItems);
+    if (currentItems.length === 0) {
+      return Xote__JSX.Elements.jsx("div", {
+        class: "basefn-spotlight__empty",
+        children: Xote.Component.text(emptyMessage)
+      });
+    }
+    let lastGroup = {
+      contents: undefined
+    };
+    let elements = [];
+    currentItems.forEach((item, index) => {
+      let group = item.group;
+      if (group !== undefined && group !== lastGroup.contents) {
+        lastGroup.contents = group;
+        elements.push(Xote__JSX.Elements.jsxKeyed("div", {
+          class: "basefn-spotlight__group-label",
+          children: Xote.Component.text(group)
+        }, "group-" + group, undefined));
+      }
+      let itemClass = "basefn-spotlight__item" + (
+        index === Xote.Signal.get(activeIndex) ? " basefn-spotlight__item--active" : ""
+      );
+      let desc = item.description;
+      elements.push(Xote__JSX.Elements.jsxKeyed("button", {
+        class: itemClass,
+        onClick: param => handleSelect(item),
+        children: Xote__JSX.Elements.jsxs("div", {
+          class: "basefn-spotlight__item-content",
+          children: Xote__JSX.array([
+            Xote__JSX.Elements.jsx("div", {
+              class: "basefn-spotlight__item-label",
+              children: Xote.Component.text(item.label)
+            }),
+            desc !== undefined ? Xote__JSX.Elements.jsx("div", {
+                class: "basefn-spotlight__item-description",
+                children: Xote.Component.text(desc)
+              }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+          ])
+        })
+      }, item.id, undefined));
+    });
+    return Xote.Component.fragment(elements);
+  };
+  return Xote.Component.signalFragment(Xote.Computed.make(() => {
+    if (Xote.Signal.get(isOpen)) {
+      return [Xote__JSX.Elements.jsx("div", {
+          class: "basefn-spotlight-backdrop",
+          onClick: handleBackdropClick,
+          children: Xote__JSX.Elements.jsxs("div", {
+            class: "basefn-spotlight",
+            children: Xote__JSX.array([
+              Xote__JSX.Elements.jsxs("div", {
+                class: "basefn-spotlight__input-wrapper",
+                children: Xote__JSX.array([
+                  Xote__JSX.jsx(Basefn__Icon.make, {
+                    name: "Search",
+                    size: "Sm"
+                  }),
+                  Xote__JSX.Elements.jsx("input", {
+                    class: "basefn-spotlight__input",
+                    type: "text",
+                    value: Xote.ReactiveProp.reactive(query),
+                    placeholder: placeholder,
+                    onInput: handleInput,
+                    onKeyDown: handleKeyDown
+                  })
+                ])
+              }),
+              Xote__JSX.Elements.jsx("div", {
+                class: "basefn-spotlight__results",
+                children: renderResults()
+              }),
+              Xote__JSX.Elements.jsxs("div", {
+                class: "basefn-spotlight__footer",
+                children: Xote__JSX.array([
+                  Xote__JSX.Elements.jsxs("span", {
+                    class: "basefn-spotlight__footer-hint",
+                    children: Xote__JSX.array([
+                      Xote__JSX.Elements.jsx("span", {
+                        class: "basefn-spotlight__footer-key",
+                        children: Xote.Component.text("\u2191")
+                      }),
+                      Xote__JSX.Elements.jsx("span", {
+                        class: "basefn-spotlight__footer-key",
+                        children: Xote.Component.text("\u2193")
+                      }),
+                      Xote.Component.text("to navigate")
+                    ])
+                  }),
+                  Xote__JSX.Elements.jsxs("span", {
+                    class: "basefn-spotlight__footer-hint",
+                    children: Xote__JSX.array([
+                      Xote__JSX.Elements.jsx("span", {
+                        class: "basefn-spotlight__footer-key",
+                        children: Xote.Component.text("\u21b5")
+                      }),
+                      Xote.Component.text("to select")
+                    ])
+                  }),
+                  Xote__JSX.Elements.jsxs("span", {
+                    class: "basefn-spotlight__footer-hint",
+                    children: Xote__JSX.array([
+                      Xote__JSX.Elements.jsx("span", {
+                        class: "basefn-spotlight__footer-key",
+                        children: Xote.Component.text("esc")
+                      }),
+                      Xote.Component.text("to close")
+                    ])
+                  })
+                ])
+              })
+            ])
+          })
+        })];
+    } else {
+      return [];
+    }
+  }, undefined));
+}
+
+let make = Basefn__Spotlight;
+
+export {
+  make,
+}
+/*  Not a pure module */