@t007/utils 0.0.25 → 0.0.26

package/README.md

@@ -1,6 +1,6 @@
 # @t007/utils
 
-> The foundational utility belt and central nervous system for the `@t007` UI ecosystem. A collection of highly optimized, zero-dependency vanilla JavaScript helpers for DOM manipulation, async resource loading, and math operations.
+> The foundational utility belt and central nervous system for the `@t007` UI ecosystem. A collection of highly optimized, JavaScript helpers for DOM manipulation, async resource loading, and math operations.
 
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Tobi007-del/t007-tools/blob/main/LICENSE)
 [![NPM Version](https://img.shields.io/npm/v/@t007/utils.svg)](https://www.npmjs.com/package/@t007/utils)
@@ -32,7 +32,6 @@
 
 - ✅ **Tree-Shakeable:** Every utility is exported individually. Modern bundlers will only compile the exact code you import, resulting in zero bloat.
 - ✅ **Shared Memory:** By acting as a peer dependency for the other `@t007` packages, it ensures that your application doesn't download duplicate helper functions.
-- ✅ **Zero Frameworks:** 100% pure vanilla JavaScript. 
 
 ---
 
@@ -50,7 +49,7 @@
 
 ### Built with
 
-- Vanilla JavaScript (ES6+)
+- JavaScript (ES6+)
 - Bundled via `tsup` (ESM, CJS, IIFE outputs)
 - Built for extreme execution speed and minimal byte size.
 
@@ -86,7 +85,95 @@ import { createEl, loadResource, uid } from '@t007/utils';
 const myBtn = createEl('button', { className: 'my-custom-btn', textContent: 'Click Me' });
 
 // Inject a stylesheet dynamically
-await loadResource('https://cdn.example.com/styles.css, 'link');
+await loadResource('https://cdn.example.com/styles.css', 'link');
+```
+
+### Built-in Hooks
+
+| React Hook      | Vanilla Counterpart |
+| --------------- | ------------------- |
+| useRipple       | rippleHandler       |
+| useScrollAssist | initScrollAssist    |
+| useFocusTrap    | initFocusTrap       |
+| useOutsideClick | initOutsideClick    |
+| useHighlight    | N/A                 |
+| N/A             | initVScrollerator   |
+
+### Built-in Components
+| React Component | Vanilla Counterpart |
+| --------------- | ------------------- |
+| HighlightText   | N/A                 |
+
+### Code  Sample
+
+```tsx
+import { useRef } from "react";
+import { useScrollAssist, useRipple } from "@t007/utils/hooks/react";
+import { HighlightText } from "@t007/utils/components/react";
+import '@t007/utils/styles/ripple.css';
+import "@t007/utils/styles/scroll-assist.css";
+
+export function HelperTextScroller() {
+  const ref = useRef<HTMLDivElement>(null);
+  useScrollAssist(ref, { vertical: false, assistClassName: "scroll-assist" });
+  const rippleHandler = useRipple();
+
+  return (
+    <div className="text-wrapper">
+      <p ref={ref} className="text">
+        <HighlightText query="helper" className="highlight">
+          Long helper text to demonstrate highlighting and scroll assistance.
+        </HighlightText>
+      </p>
+      <button onPointerDown={rippleHandler}>Click Me</button>
+    </div>
+  );
+}
+```
+
+### Styles
+
+It includes:
+- `.t007-ripple-wrapper`, `.t007-ripple`, `.t007-ripple-hold`, `.t007-ripple-fade` (default ripple classes)
+- `.t007-scroll-assist` (default assist class)
+
+All defaults are exposed as root-level, `t007`-prefixed variables:
+
+```css
+:root {
+  /** default ripple values */
+  --t007-ripple-initial-opacity: 0.4;
+  --t007-ripple-initial-scale: 0.5;
+  --t007-ripple-expand-scale: 2.05;
+  --t007-ripple-color: rgb(0 0 0 / 0.24);
+  --t007-ripple-expand-duration: 350ms;
+  --t007-ripple-fade-duration: 350ms;
+  /** default scroll assist values */
+  --t007-scroll-assist-color: rgb(0 0 0 / 1);
+  --t007-scroll-assist-opacity: 0.07;
+  --t007-scroll-assist-min-width: 2rem;
+  --t007-scroll-assist-height: 2rem;
+  --t007-scroll-assist-inline-offset: -0.35rem;
+  --t007-scroll-assist-block-offset: 0;
+}
+
+/** custom pre-requisites */
+.highlight {
+  background-color: yellow;
+}
+.text-wrapper {
+  position: relative;
+  flex: 1;
+  min-width: 2rem;
+}
+.text {
+  white-space: nowrap;
+  overflow: auto hidden;
+  scrollbar-width: none;
+}
+.text::-webkit-scrollbar {
+  display: none;
+}
 ```
 
 -----

package/dist/arrowNavigation-DK8mqVOk.d.cts

@@ -0,0 +1,31 @@
+import { K as KeyEvent, C as Config } from './scrollAssist-y9wFmYgt.cjs';
+
+type ArrowNavigationHandle = {
+    /** Current computed horizontal grid size. */
+    gridX: () => number;
+    /** Current computed vertical grid size. */
+    gridY: () => number;
+    /** Current computed virtual vertical grid size. */
+    vGridY: () => number;
+    /** Current live list of navigable items. */
+    items: () => HTMLElement[];
+    /** Current active index. */
+    activeIndex: () => number;
+    /** Current active element or null when none is active. */
+    activeItem: () => HTMLElement | null;
+    /** Resolve the next enabled index from a directional move. */
+    getAbleIndex: (targetIndex: number, e?: KeyEvent) => number | null;
+    /** Run type-ahead selection logic. */
+    typeAhead: (key: string) => void;
+    /** Move active selection/focus to a target index. */
+    goToIndex: (index: number, e?: KeyEvent) => void;
+    /** Simulate directional key navigation with a keyboard-like event. */
+    simulateKey: (e: KeyEvent) => void;
+    /** Remove listeners/observers and release resources. */
+    destroy: () => void;
+};
+/** A vanilla JavaScript utility for managing robust arrow-key roving focus navigation. */
+declare function initArrowNavigation(container: HTMLElement, config?: Config): ArrowNavigationHandle | void;
+declare const removeArrowNavigation: (container: HTMLElement) => void | undefined;
+
+export { type ArrowNavigationHandle as A, initArrowNavigation as i, removeArrowNavigation as r };

package/dist/arrowNavigation-VenvPI4H.d.ts

@@ -0,0 +1,31 @@
+import { K as KeyEvent, C as Config } from './scrollAssist-y9wFmYgt.js';
+
+type ArrowNavigationHandle = {
+    /** Current computed horizontal grid size. */
+    gridX: () => number;
+    /** Current computed vertical grid size. */
+    gridY: () => number;
+    /** Current computed virtual vertical grid size. */
+    vGridY: () => number;
+    /** Current live list of navigable items. */
+    items: () => HTMLElement[];
+    /** Current active index. */
+    activeIndex: () => number;
+    /** Current active element or null when none is active. */
+    activeItem: () => HTMLElement | null;
+    /** Resolve the next enabled index from a directional move. */
+    getAbleIndex: (targetIndex: number, e?: KeyEvent) => number | null;
+    /** Run type-ahead selection logic. */
+    typeAhead: (key: string) => void;
+    /** Move active selection/focus to a target index. */
+    goToIndex: (index: number, e?: KeyEvent) => void;
+    /** Simulate directional key navigation with a keyboard-like event. */
+    simulateKey: (e: KeyEvent) => void;
+    /** Remove listeners/observers and release resources. */
+    destroy: () => void;
+};
+/** A vanilla JavaScript utility for managing robust arrow-key roving focus navigation. */
+declare function initArrowNavigation(container: HTMLElement, config?: Config): ArrowNavigationHandle | void;
+declare const removeArrowNavigation: (container: HTMLElement) => void | undefined;
+
+export { type ArrowNavigationHandle as A, initArrowNavigation as i, removeArrowNavigation as r };

package/dist/chunk-AI5O3OGE.js

@@ -0,0 +1,165 @@
+import {
+  INTERACTIVE_SELECTOR,
+  clamp,
+  createEl,
+  getActiveElement,
+  isInteractive
+} from "./chunk-XVFFZZJA.js";
+
+// src/hooks/vanilla/outsideClick.ts
+import { NIL, NOOP } from "sia-reactor";
+var stacks = /* @__PURE__ */ new WeakMap();
+function initOutsideClick(el, { enabled = false, onOutsideClick = NOOP, clickOnClick = true, clickOnEscape = true, clickOnFocusOut = false, allowInputs = true, root = window, scoped = true, capture = true } = NIL) {
+  const existing = (t007._outsiders ??= /* @__PURE__ */ new WeakMap()).get(el);
+  if (!enabled || existing) return existing ? existing : void 0;
+  scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
+  const stack = stacks.get(root) ?? [], onScopedOut = (e, t, p = e.touches?.[0] || e, rect = el.getBoundingClientRect()) => {
+    if (stack.at(-1) !== el || p.clientX >= rect.left && p.clientX <= rect.right && p.clientY >= rect.top && p.clientY <= rect.bottom) return false;
+    return (!scoped ? true : root.contains(t)) && onOutsideClick(e);
+  }, handleClick = ((e) => clickOnClick && !(allowInputs && isInteractive(e.target)) && onScopedOut(e, e.target)), handleEscape = ((e) => clickOnEscape && e.key === "Escape" && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && stack.at(-1) === el && onOutsideClick(e)), handleFocusOut = (e) => clickOnFocusOut && onScopedOut(e, e.relatedTarget);
+  root.addEventListener("mousedown", handleClick, capture), root.addEventListener("touchstart", handleClick, { passive: true, capture });
+  root.addEventListener("keydown", handleEscape, capture), el.addEventListener("focusout", handleFocusOut, capture);
+  if (!stack.includes(el)) stack.push(el), stacks.set(root, stack);
+  const destroy = () => {
+    root.removeEventListener("mousedown", handleClick, capture), root.removeEventListener("touchstart", handleClick, capture);
+    root.removeEventListener("keydown", handleEscape, capture);
+    el.removeEventListener("focusout", handleFocusOut, capture);
+    t007._outsiders.delete(el), stack.splice(stack.indexOf(el), 1);
+  };
+  return t007._outsiders.set(el, destroy), destroy;
+}
+var removeOutsideClick = (el) => t007._outsiders?.get(el)?.();
+
+// src/hooks/vanilla/focusTrap.ts
+import { NIL as NIL2 } from "sia-reactor";
+var stacks2 = /* @__PURE__ */ new WeakMap();
+function initFocusTrap(el, { enabled = false, initialSelector = "[data-autofocus]", ringClassName = "focus-outline", root = window, scoped = true, capture = true } = NIL2) {
+  const existing = (t007._ftrappers ??= /* @__PURE__ */ new WeakMap()).get(el);
+  if (!enabled || existing) return existing ? existing : void 0;
+  scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
+  const stack = stacks2.get(root) ?? [], focused = document.querySelector(":focus"), initial = el.querySelector(initialSelector), first = createEl("span", { tabIndex: 0 }, { focusGuard: "start" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), last = createEl("span", { tabIndex: 0 }, { focusGuard: "end" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), getFocusable = (c = el) => Array.prototype.filter.call(c.querySelectorAll(INTERACTIVE_SELECTOR), (el2) => !el2.hasAttribute("disabled") && !el2.hasAttribute("aria-hidden") && !el2.hasAttribute("data-focus-guard")), resetFocus = (i = 0, els = getFocusable()) => els?.length ? els.at(i).focus() : (!el.hasAttribute("tabindex") && (el.tabIndex = -1), el.focus()), edgeFocus = (pre = false) => {
+    if (!scoped) return resetFocus(pre ? -1 : 0);
+    else if (root.hasAttribute("tabindex")) return root.focus();
+    const items = getFocusable();
+    if (!items.length) return resetFocus(0, null);
+    const all = getFocusable(root.parentElement?.closest(`:has(${INTERACTIVE_SELECTOR})`) || document.body);
+    for (let target, len = all.length, i = all.indexOf(items[pre ? 0 : items.length - 1]) + (pre ? -1 : 1); pre ? i >= 0 : i < len; pre ? i-- : i++) if (!root.contains(target = all[i])) return target.focus();
+    (pre ? first : last).blur();
+  }, handleFocusIn = () => stack.at(-1) === el && getActiveElement() !== root && !el.contains(getActiveElement()) && setTimeout(resetFocus, 0, 0), handleInitialBlur = () => initial.classList.remove(ringClassName);
+  first.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus(true) : resetFocus(), capture), el.prepend(first);
+  last.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus() : resetFocus(-1), capture), el.append(last);
+  root.addEventListener("focusin", handleFocusIn, capture);
+  if (!el.querySelector(":focus")) !initial ? resetFocus() : setTimeout(() => (initial.classList.add(ringClassName), initial.focus(), initial.addEventListener("blur", handleInitialBlur, capture)));
+  if (!stack.includes(el)) stack.push(el), stacks2.set(root, stack);
+  const destroy = () => {
+    focused?.isConnected && focused.focus(), first.remove(), last.remove();
+    root.removeEventListener("focusin", handleFocusIn, capture);
+    initial?.removeEventListener("blur", handleInitialBlur, capture);
+    t007._ftrappers.delete(el), stack.splice(stack.indexOf(el), 1);
+  };
+  return t007._ftrappers.set(el, destroy), destroy;
+}
+var removeFocusTrap = (el) => t007._ftrappers?.get(el)?.();
+
+// src/hooks/vanilla/ripple.ts
+import { NIL as NIL3 } from "sia-reactor";
+function rippleHandler(e, { target, forceCenter = false, wrapperClassName = "t007-ripple-wrapper", className = "t007-ripple", holdClassName = "t007-ripple-hold", fadeClassName = "t007-ripple-fade" } = NIL3) {
+  const el = target || e.currentTarget;
+  if (!el || e.target !== e.currentTarget && isInteractive(e.target) || el.hasAttribute("disabled") || e.pointerType === "mouse" && e.button !== 0) return;
+  e.stopPropagation?.();
+  const { offsetWidth: rW, offsetHeight: rH } = el, { width: w, height: h, left: l, top: t } = el.getBoundingClientRect(), size = Math.max(rW, rH), x = forceCenter ? rW / 2 - size / 2 : (e.clientX - l) * rW / w - size / 2, y = forceCenter ? rH / 2 - size / 2 : (e.clientY - t) * rH / h - size / 2, wrapper = createEl("span", { className: wrapperClassName }), ripple = createEl("span", { className: className + " " + holdClassName }, {}, { cssText: `width:${size}px;height:${size}px;left:${x}px;top:${y}px;` });
+  let canRelease = false;
+  ripple.addEventListener("animationend", () => canRelease = true, { once: true });
+  el.append(wrapper.appendChild(ripple).parentElement);
+  const release = () => {
+    if (!canRelease) return ripple.addEventListener("animationend", release, { once: true });
+    ripple.classList.replace(holdClassName, fadeClassName);
+    ripple.addEventListener("animationend", () => setTimeout(() => wrapper.remove()));
+    for (const evt of ["pointerup", "pointercancel"]) (el.ownerDocument?.defaultView || window).removeEventListener(evt, release);
+  };
+  for (const evt of ["pointerup", "pointercancel"]) (el.ownerDocument?.defaultView || window).addEventListener(evt, release);
+}
+
+// src/hooks/react/useArrowNavigation/utils.ts
+var getTargetIndex = ({ key, currIndex, length, gridX, gridY, vGridY, loop, ctrlKey = false, rtl }) => {
+  const rowStart = currIndex - currIndex % gridX, rowEnd = Math.min(rowStart + gridX - 1, length - 1), colStart = currIndex % gridX, colEnd = Math.min(colStart + gridX * (gridY - 1), length - 1), canX = gridX > 1, canY = gridY > 1, horizontalMove = rtl ? { ArrowRight: canX ? -1 : 0, ArrowLeft: canX ? 1 : 0 } : { ArrowRight: canX ? 1 : 0, ArrowLeft: canX ? -1 : 0 }, move = { ...horizontalMove, ArrowDown: canY ? gridX : 0, ArrowUp: canY ? -gridX : 0, Home: ctrlKey ? 0 : rowStart, End: ctrlKey ? length - 1 : rowEnd, PageDown: (vGridY - 1) * gridX, PageUp: -(vGridY - 1) * gridX }[key] ?? 0;
+  let targetIndex = key === "Home" || key === "End" ? move : currIndex + move;
+  if (key === "ArrowDown") {
+    if (!loop && targetIndex >= length) targetIndex -= move;
+  } else if (key === "ArrowUp") {
+    if (!loop && targetIndex < 0) targetIndex += Math.abs(move);
+  } else if (key === "PageDown") {
+    if (!loop && targetIndex >= length) targetIndex = colEnd;
+  } else if (key === "PageUp") {
+    if (!loop && targetIndex < 0) targetIndex = colStart;
+  }
+  return loop ? (targetIndex + length) % length : clamp(0, targetIndex, length - 1);
+};
+var getCommonAncestor = (first, second) => {
+  if (!first) return null;
+  if (!second) return first.parentElement;
+  const ancestors = /* @__PURE__ */ new Set();
+  let current = first;
+  while (current) ancestors.add(current), current = current.parentElement;
+  current = second;
+  while (current) {
+    if (ancestors.has(current)) return current;
+    current = current.parentElement;
+  }
+  return null;
+};
+var getGrid = (all, x = true, y = true, vY = true) => {
+  const len = all.length, grid = {};
+  if (!len) return grid;
+  let cols = all.findIndex((el) => el.offsetTop !== all[0].offsetTop);
+  cols = cols > 0 ? cols : len;
+  if (x) grid.x = cols;
+  let rows = Math.ceil(len / cols);
+  if (y) grid.y = rows;
+  if (vY) {
+    const itemHeight = all[0].offsetHeight ?? 0, containerHeight = getCommonAncestor(all[0], all[1])?.clientHeight ?? 0;
+    rows = clamp(1, Math.floor(containerHeight / itemHeight), rows) || rows;
+    grid.vY = rows;
+  }
+  return grid;
+};
+
+// src/hooks/react/useArrowNavigation/consts.ts
+import { NOOP as NOOP2 } from "sia-reactor";
+var H_NAV_KEYS = ["ArrowRight", "ArrowLeft", "Home", "End"];
+var V_NAV_KEYS = ["ArrowUp", "ArrowDown", "PageDown", "PageUp"];
+var NAV_KEYS = [...H_NAV_KEYS, ...V_NAV_KEYS];
+var DEFAULT_CONFIG = {
+  enabled: null,
+  selector: "[data-arrow-item]",
+  focusOnHover: true,
+  loop: true,
+  virtual: false,
+  typeahead: false,
+  rovingTab: null,
+  defaultTabbableIndex: null,
+  baseTabIndex: "0",
+  resetMs: 500,
+  rtl: null,
+  grid: {},
+  activeClass: "focus-outlined",
+  inputSelector: "input,textarea,[contenteditable='true']",
+  focusOptions: { preventScroll: false },
+  scrollIntoView: { block: "nearest", inline: "nearest" },
+  onSelect: NOOP2,
+  onFocusOut: NOOP2
+};
+
+export {
+  initOutsideClick,
+  removeOutsideClick,
+  getTargetIndex,
+  getCommonAncestor,
+  getGrid,
+  H_NAV_KEYS,
+  NAV_KEYS,
+  DEFAULT_CONFIG,
+  initFocusTrap,
+  removeFocusTrap,
+  rippleHandler
+};

package/dist/chunk-OGFBI6PS.js

@@ -0,0 +1,16 @@
+// src/hooks/react/useHighlight.ts
+import { useMemo } from "react";
+function useHighlight(text, query, ignoreCase = true, options) {
+  const { trimQuery = true, wholeWord = false } = options ?? {};
+  return useMemo(() => {
+    if (!query) return [{ text, match: false }];
+    const queries = (Array.isArray(query) ? query : [query]).sort((a, b) => b.length - a.length).map((q) => (trimQuery ? q.trim() : q)?.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).filter(Boolean);
+    if (!queries.length) return [{ text, match: false }];
+    const boundary = wholeWord ? "\\b" : "", regex = new RegExp(`(${queries.map((q) => boundary + q + boundary).join("|")})`, ignoreCase ? "gi" : "g"), parts = text.split(regex);
+    return parts.map((part) => ({ text: part, match: !!part.match(regex) }));
+  }, [text, query, ignoreCase, trimQuery, wholeWord]);
+}
+
+export {
+  useHighlight
+};

package/dist/chunk-XVFFZZJA.js

@@ -0,0 +1,185 @@
+// src/core/dom.ts
+import { createEl, assignEl } from "sia-reactor/utils";
+var INTERACTIVE_SELECTOR = 'button,[href],input,label,select,textarea,details>summary,[contenteditable],iframe,audio[controls],video[controls],[tabindex]:not([tabindex="-1"])';
+var isInteractive = (target) => target instanceof HTMLElement && target.matches(INTERACTIVE_SELECTOR);
+var VIRTUAL_RESOURCE = /* @__PURE__ */ Symbol.for("T007_VIRTUAL_RESOURCE");
+function loadResource(req, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
+  w.t007 ??= {}, w.t007._resourceCache ??= {};
+  if (req === VIRTUAL_RESOURCE || isSym(req)) return Promise.resolve();
+  const src = req;
+  if (w.t007._resourceCache[src]) return w.t007._resourceCache[src];
+  const existing = type === "script" ? Array.prototype.find.call(w.document.scripts, (s) => isSameURL(s.src, src)) : type === "style" ? Array.prototype.find.call(w.document.styleSheets, (s) => isSameURL(s.href, src)) : null;
+  if (existing) return w.t007._resourceCache[src] = Promise.resolve(existing);
+  w.t007._resourceCache[src] = new Promise((resolve, reject) => {
+    (function tryLoad(remaining, el) {
+      const onerror = () => {
+        el?.remove?.();
+        if (remaining > 1) {
+          setTimeout(tryLoad, 1e3, remaining - 1);
+          console.warn(`Retrying ${type} load (${attempts - remaining + 1}): ${src}...`);
+        } else {
+          delete w.t007._resourceCache[src];
+          reject(new Error(`${type} load failed after ${attempts} attempts: ${src}`));
+        }
+      };
+      const url = retryKey && remaining < attempts ? `${src}${src.includes("?") ? "&" : "?"}_${retryKey}=${Date.now()}` : src;
+      if (type === "script") w.document.body.append(el = createEl("script", { src: url, type: module ? "module" : "text/javascript", crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
+      else if (type === "style") w.document.head.append(el = createEl("link", { rel: "stylesheet", href: url, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
+      else reject(new Error(`Unsupported resource type: ${type}`));
+    })(attempts);
+  });
+  return w.t007._resourceCache[src];
+}
+function getActiveElement(root = document) {
+  const activeEl = root.activeElement;
+  return !activeEl ? null : activeEl.shadowRoot ? getActiveElement(activeEl.shadowRoot) : activeEl;
+}
+
+// src/index.ts
+import { NIL, NOOP } from "sia-reactor";
+
+// src/core/obj.ts
+import { isObj } from "sia-reactor/utils";
+function isDef(val) {
+  return "undefined" !== typeof val;
+}
+function isSym(val) {
+  return "symbol" === typeof val;
+}
+function isBool(val) {
+  return "boolean" === typeof val;
+}
+function isNum(val) {
+  return "number" === typeof val;
+}
+function isStr(val) {
+  return "string" === typeof val;
+}
+function isArr(obj) {
+  return Array.isArray(obj);
+}
+function isPOJO(obj, crossRealms = false, typecheck = true) {
+  return (typecheck ? isObj(obj, false) : true) && (crossRealms ? Object.prototype.toString.call(obj) === "[object Object]" : obj.constructor === Object);
+}
+function isIter(obj) {
+  return obj != null && "function" === typeof obj[Symbol.iterator];
+}
+function isFunc(val) {
+  return "function" === typeof val;
+}
+function inBoolArrOpt(opt, str) {
+  return opt?.includes?.(str) ?? opt;
+}
+
+// src/core/num.ts
+import { clamp } from "sia-reactor/utils";
+
+// src/core/str.ts
+function uid(prefix = "") {
+  return prefix + Date.now().toString(36) + "_" + performance.now().toString(36).replace(".", "") + "_" + Math.random().toString(36).slice(2);
+}
+function isSameURL(src1, src2) {
+  if (!isStr(src1) || !isStr(src2) || !src1 || !src2) return false;
+  try {
+    const u1 = new URL(src1, window.location.href), u2 = new URL(src2, window.location.href);
+    return decodeURIComponent(u1.origin + u1.pathname) === decodeURIComponent(u2.origin + u2.pathname);
+  } catch {
+    return src1.replace(/\\/g, "/").split("?")[0].trim() === src2.replace(/\\/g, "/").split("?")[0].trim();
+  }
+}
+
+// src/core/fn.ts
+import { setTimeout as setTimeout2, setInterval, requestAnimationFrame } from "sia-reactor/utils";
+function limited(FN_KEY, fn, opts = {}) {
+  let count = 0, { key, maxTimes: max = 1 } = isStr(opts) ? { key: opts } : opts;
+  const getReg = () => JSON.parse(localStorage.getItem(FN_KEY) || "{}"), setReg = (r) => localStorage.setItem(FN_KEY, JSON.stringify(r));
+  const handle = (...args) => {
+    if (!key) return count++ < max ? fn(...args) : void 0;
+    const r = getReg(), c = r[key] || 0;
+    return c < max ? (r[key] = c + 1, setReg(r), fn(...args)) : void 0;
+  };
+  handle.left = max - (handle.count = count);
+  handle.reset = () => (count = 0, key && ((r) => (delete r[key], setReg(r)))(getReg()));
+  handle.block = () => (count = max, key && ((r) => (r[key] = max, setReg(r)))(getReg()));
+  return handle;
+}
+var mockAsync = (timeout = 250) => new Promise((resolve) => setTimeout(resolve, timeout));
+var breath = (w = window) => new Promise((res) => w.requestAnimationFrame(res));
+var deepBreath = (w = window) => new Promise((res) => w.requestAnimationFrame(() => w.requestAnimationFrame(res)));
+function bindCleanupToSignal(cleanup, signal) {
+  signal?.aborted ? cleanup() : signal?.addEventListener("abort", cleanup, { once: true });
+  if (signal && !signal.aborted) cleanup = (() => (signal.removeEventListener("abort", cleanup), cleanup()));
+  return cleanup;
+}
+
+// src/core/keys.ts
+import { parseKeyCombo, stringifyKeyEvent, cleanKeyCombo, matchKeys, getTermsForKey, keyEventAllowed, formatKeyForDisplay, formatKeyShortcutsForDisplay, parseForARIAKS } from "sia-reactor/utils";
+
+// src/core/file.ts
+function formatSize(bytes, decimals = 3, base = 1e3) {
+  if (bytes < base) return `${bytes} byte${bytes == 1 ? "" : "s"}`;
+  const units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(base)), units.length - 1);
+  return `${(bytes / Math.pow(base, exponent)).toFixed(decimals).replace(/\.0+$/, "")} ${units[exponent]}`;
+}
+
+// src/mixins/methd.ts
+import { onAllMethods, bindAllMethods, guardAllMethods, guardMethod } from "sia-reactor/utils";
+
+// src/index.ts
+if ("undefined" !== typeof window) {
+  (window.t007 ??= {}).VIRTUAL_RESOURCE = VIRTUAL_RESOURCE;
+  window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
+  window.T007_INPUT_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest`;
+  window.T007_DIALOG_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`;
+  window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/dist/index.min.css`;
+  window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/index.min.css`;
+  window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.min.css`;
+}
+
+export {
+  createEl,
+  assignEl,
+  INTERACTIVE_SELECTOR,
+  isInteractive,
+  VIRTUAL_RESOURCE,
+  loadResource,
+  getActiveElement,
+  isObj,
+  isDef,
+  isSym,
+  isBool,
+  isNum,
+  isStr,
+  isArr,
+  isPOJO,
+  isIter,
+  isFunc,
+  inBoolArrOpt,
+  clamp,
+  uid,
+  isSameURL,
+  limited,
+  mockAsync,
+  breath,
+  deepBreath,
+  bindCleanupToSignal,
+  setTimeout2 as setTimeout,
+  setInterval,
+  requestAnimationFrame,
+  parseKeyCombo,
+  stringifyKeyEvent,
+  cleanKeyCombo,
+  matchKeys,
+  getTermsForKey,
+  keyEventAllowed,
+  formatKeyForDisplay,
+  formatKeyShortcutsForDisplay,
+  parseForARIAKS,
+  formatSize,
+  onAllMethods,
+  bindAllMethods,
+  guardAllMethods,
+  guardMethod,
+  NIL,
+  NOOP
+};

package/dist/components/react.cjs

@@ -0,0 +1,51 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/react.ts
+var react_exports = {};
+__export(react_exports, {
+  HighlightText: () => HighlightText
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/hooks/react/useHighlight.ts
+var import_react = require("react");
+function useHighlight(text, query, ignoreCase = true, options) {
+  const { trimQuery = true, wholeWord = false } = options ?? {};
+  return (0, import_react.useMemo)(() => {
+    if (!query) return [{ text, match: false }];
+    const queries = (Array.isArray(query) ? query : [query]).sort((a, b) => b.length - a.length).map((q) => (trimQuery ? q.trim() : q)?.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).filter(Boolean);
+    if (!queries.length) return [{ text, match: false }];
+    const boundary = wholeWord ? "\\b" : "", regex = new RegExp(`(${queries.map((q) => boundary + q + boundary).join("|")})`, ignoreCase ? "gi" : "g"), parts = text.split(regex);
+    return parts.map((part) => ({ text: part, match: !!part.match(regex) }));
+  }, [text, query, ignoreCase, trimQuery, wholeWord]);
+}
+
+// src/components/react/HighlightText.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var HighlightText = ({ children = "", query = "", className = "highlight", ignoreCase = true, trimQuery = true, wholeWord = false }) => {
+  const chunks = useHighlight(children, query, ignoreCase, { trimQuery, wholeWord });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: chunks.map(
+    ({ text, match }, i) => match ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className, children: text }, i) : text
+  ) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HighlightText
+});

package/dist/components/react.d.cts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { H as HighlightOptions } from '../useHighlight-DMpDCILK.cjs';
+
+interface HighlightTextProps extends HighlightOptions {
+    /** The text to be processed and displayed. */
+    children?: string;
+    /** The string or array of strings to match and highlight within the children text. */
+    query?: string | string[];
+    /** The CSS class to apply to the highlighted parts of the text. Defaults to `"highlight"`. */
+    className?: string;
+    /** Whether the matching should be case-insensitive. Defaults to `true`. */
+    ignoreCase?: boolean;
+}
+/** Component to highlight parts of text that match a query. It splits the text into chunks based on the query and wraps matching parts in a span with the specified className. */
+declare const HighlightText: React.FC<HighlightTextProps>;
+
+export { HighlightText, type HighlightTextProps };

package/dist/components/react.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { H as HighlightOptions } from '../useHighlight-DMpDCILK.js';
+
+interface HighlightTextProps extends HighlightOptions {
+    /** The text to be processed and displayed. */
+    children?: string;
+    /** The string or array of strings to match and highlight within the children text. */
+    query?: string | string[];
+    /** The CSS class to apply to the highlighted parts of the text. Defaults to `"highlight"`. */
+    className?: string;
+    /** Whether the matching should be case-insensitive. Defaults to `true`. */
+    ignoreCase?: boolean;
+}
+/** Component to highlight parts of text that match a query. It splits the text into chunks based on the query and wraps matching parts in a span with the specified className. */
+declare const HighlightText: React.FC<HighlightTextProps>;
+
+export { HighlightText, type HighlightTextProps };

package/dist/components/react.js

@@ -0,0 +1,15 @@
+import {
+  useHighlight
+} from "../chunk-OGFBI6PS.js";
+
+// src/components/react/HighlightText.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var HighlightText = ({ children = "", query = "", className = "highlight", ignoreCase = true, trimQuery = true, wholeWord = false }) => {
+  const chunks = useHighlight(children, query, ignoreCase, { trimQuery, wholeWord });
+  return /* @__PURE__ */ jsx(Fragment, { children: chunks.map(
+    ({ text, match }, i) => match ? /* @__PURE__ */ jsx("span", { className, children: text }, i) : text
+  ) });
+};
+export {
+  HighlightText
+};