fromsrc 0.0.0 → 0.0.1

package/dist/components/screenshot.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Image from 'next/image';
+import { memo } from 'react';
+
+const Screenshot = memo(function Screenshot2({
+  src,
+  alt,
+  caption,
+  browser = true,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs("figure", { className: `my-6 ${className}`, role: "figure", "aria-label": caption || alt, children: [
+    browser ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-line overflow-hidden bg-surface", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-2 px-4 py-2.5 border-b border-line bg-bg",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "w-3 h-3 rounded-full bg-red-500/80", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "w-3 h-3 rounded-full bg-yellow-500/80", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "w-3 h-3 rounded-full bg-green-500/80", "aria-hidden": "true" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 mx-8", children: /* @__PURE__ */ jsx("div", { className: "h-6 rounded bg-surface/80 border border-line", "aria-hidden": "true" }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "relative w-full aspect-video", children: /* @__PURE__ */ jsx(Image, { src, alt, fill: true, className: "object-cover object-top" }) })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "relative w-full aspect-video rounded-lg border border-line overflow-hidden", children: /* @__PURE__ */ jsx(Image, { src, alt, fill: true, className: "object-cover object-top" }) }),
+    caption && /* @__PURE__ */ jsx("figcaption", { className: "mt-2 text-center text-sm text-muted", children: caption })
+  ] });
+});
+const Frame = memo(function Frame2({
+  children,
+  title,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: `my-6 rounded-lg border border-line overflow-hidden ${className}`,
+      "aria-label": title || "content frame",
+      children: [
+        title && /* @__PURE__ */ jsx("header", { className: "px-4 py-2 border-b border-line bg-surface/50", children: /* @__PURE__ */ jsx("span", { className: "text-xs text-muted", children: title }) }),
+        /* @__PURE__ */ jsx("div", { className: "p-4 bg-bg", children })
+      ]
+    }
+  );
+});
+
+export { Frame, Screenshot };

package/dist/components/scrollprogress.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { JSX } from 'react';
+
+interface ScrollProgressProps {
+    color?: string;
+    height?: number;
+    label?: string;
+}
+declare function ScrollProgressBase({ color, height, label, }: ScrollProgressProps): JSX.Element;
+declare const ScrollProgress: react.MemoExoticComponent<typeof ScrollProgressBase>;
+
+export { ScrollProgress, type ScrollProgressProps };

package/dist/components/scrollprogress.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { memo, useState, useRef, useCallback, useEffect } from 'react';
+
+function ScrollProgressBase({
+  color = "var(--accent)",
+  height = 2,
+  label = "Page scroll progress"
+}) {
+  const [progress, setProgress] = useState(0);
+  const rafRef = useRef(0);
+  const handleScroll = useCallback(() => {
+    if (rafRef.current) return;
+    rafRef.current = requestAnimationFrame(() => {
+      const scrollTop = document.documentElement.scrollTop;
+      const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const newProgress = scrollHeight > 0 ? scrollTop / scrollHeight * 100 : 0;
+      setProgress(newProgress);
+      rafRef.current = 0;
+    });
+  }, []);
+  useEffect(() => {
+    handleScroll();
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [handleScroll]);
+  const rounded = Math.round(progress);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed left-0 top-0 z-50 w-full",
+      style: { height },
+      role: "progressbar",
+      "aria-valuenow": rounded,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": label,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full transition-[width] duration-100",
+          style: {
+            width: `${progress}%`,
+            backgroundColor: color
+          }
+        }
+      )
+    }
+  );
+}
+const ScrollProgress = memo(ScrollProgressBase);
+
+export { ScrollProgress };

package/dist/components/scrollspy.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ScrollSpyProps = {
+    items: {
+        id: string;
+        label: string;
+        depth?: number;
+    }[];
+    className?: string;
+    activeClassName?: string;
+    offset?: number;
+    as?: React.ElementType;
+};
+declare function ScrollSpy({ items, className, activeClassName, offset, as: Tag, }: ScrollSpyProps): react_jsx_runtime.JSX.Element;
+declare const ScrollSpyComponent: react.MemoExoticComponent<typeof ScrollSpy>;
+
+export { ScrollSpyComponent as ScrollSpy, ScrollSpyComponent, type ScrollSpyProps };

package/dist/components/scrollspy.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { memo, useState, useEffect } from 'react';
+
+function ScrollSpy({
+  items,
+  className,
+  activeClassName = "font-semibold text-accent",
+  offset = 100,
+  as: Tag = "nav"
+}) {
+  const [activeId, setActiveId] = useState("");
+  useEffect(() => {
+    const elements = items.map((item) => document.getElementById(item.id)).filter((item) => item instanceof HTMLElement);
+    if (elements.length === 0) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+        const first = visible[0];
+        if (first?.target instanceof HTMLElement) {
+          setActiveId(first.target.id);
+        }
+      },
+      {
+        rootMargin: `-${offset}px 0px -40% 0px`
+      }
+    );
+    for (const el of elements) {
+      observer.observe(el);
+    }
+    return () => observer.disconnect();
+  }, [items, offset]);
+  return /* @__PURE__ */ jsx(Tag, { className, children: /* @__PURE__ */ jsx("ul", { children: items.map((item) => /* @__PURE__ */ jsx(
+    "li",
+    {
+      style: { paddingLeft: item.depth ? `${item.depth * 0.75}rem` : void 0 },
+      children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: `#${item.id}`,
+          className: activeId === item.id ? activeClassName : void 0,
+          children: item.label
+        }
+      )
+    },
+    item.id
+  )) }) });
+}
+const ScrollSpyComponent = memo(ScrollSpy);
+
+export { ScrollSpyComponent as ScrollSpy, ScrollSpyComponent };

package/dist/components/search.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from 'react';
+import { DocMeta, SearchDoc } from '../content.js';
+import { SearchAdapter } from '../search.js';
+import 'zod';
+import '../schema.js';
+import '../searchscore.js';
+
+interface SearchProps {
+    basePath?: string;
+    docs?: (DocMeta | SearchDoc)[];
+    endpoint?: string;
+    hidden?: boolean;
+    adapter?: SearchAdapter;
+    debounce?: number;
+    limit?: number;
+}
+declare function Search({ basePath, docs, endpoint, hidden, adapter, debounce, limit, }: SearchProps): JSX.Element | null;
+
+export { Search, type SearchProps };

package/dist/components/search.js

@@ -0,0 +1,228 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRouter } from 'next/navigation';
+import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import { useDebounce } from '../hooks/debounce';
+import { useLocalStorage } from '../hooks/storage';
+import { useScrollLock } from '../hooks/scrolllock';
+import { localSearch } from '../search';
+import { trimquery } from '../searchpolicy';
+import { getOptionId } from './results';
+import { Panel } from './panel';
+import { Trigger } from './trigger';
+import { useSearcher } from './searcher';
+import { getRecentOptionId } from './recent';
+
+function tosearchdoc(doc) {
+  if ("content" in doc) return doc;
+  return { ...doc, content: "" };
+}
+function iseditable(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target.isContentEditable;
+}
+function Search({
+  basePath = "/docs",
+  docs = [],
+  endpoint,
+  hidden,
+  adapter = localSearch,
+  debounce = 100,
+  limit = 8
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState(0);
+  const [recent, setRecent] = useLocalStorage("fromsrc-recent-searches", []);
+  const [local, setLocal] = useState([]);
+  const [adapterloading, setAdapterLoading] = useState(false);
+  const input = useRef(null);
+  const list = useRef(null);
+  const queryref = useRef("");
+  const requestref = useRef(0);
+  const lastfocus = useRef(null);
+  const updatequery = useCallback((next) => {
+    const value2 = trimquery(next);
+    queryref.current = value2;
+    setQuery(value2);
+  }, []);
+  const router = useRouter();
+  const searchdocs = useMemo(() => docs.map(tosearchdoc), [docs]);
+  const value = useDebounce(query, debounce);
+  const remote = useSearcher(endpoint, value, limit);
+  const remoteResults = useMemo(() => {
+    if (!endpoint) return [];
+    if (value.trim() !== queryref.current.trim()) return [];
+    return remote.results;
+  }, [endpoint, remote.results, value]);
+  const results = endpoint ? remoteResults : local;
+  const loading = endpoint ? remote.loading : adapterloading;
+  const hasrecent = value.trim().length === 0 && recent.length > 0;
+  const safe = results.length === 0 ? -1 : Math.min(selected, results.length - 1);
+  const saferecent = hasrecent ? Math.min(selected, recent.length - 1) : -1;
+  useScrollLock(open);
+  const openmodal = useCallback(() => {
+    const active = document.activeElement;
+    lastfocus.current = active instanceof HTMLElement ? active : null;
+    setOpen(true);
+  }, []);
+  useEffect(() => {
+    const handler = (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === "k") {
+        event.preventDefault();
+        openmodal();
+      }
+      const slash = event.key === "/" || event.code === "Slash";
+      if (slash && !event.metaKey && !event.ctrlKey && !event.altKey && !iseditable(event.target)) {
+        event.preventDefault();
+        openmodal();
+      }
+      if (event.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [openmodal]);
+  useEffect(() => {
+    if (open) {
+      input.current?.focus();
+    } else {
+      updatequery("");
+      setSelected(0);
+      lastfocus.current?.focus();
+    }
+  }, [open, updatequery]);
+  useEffect(() => setSelected(0), [value]);
+  useEffect(() => {
+    if (endpoint) return;
+    const id = requestref.current + 1;
+    requestref.current = id;
+    const result = adapter.search(value, searchdocs, limit);
+    if (result instanceof Promise) {
+      setAdapterLoading(true);
+      void result.then((next) => {
+        if (requestref.current !== id) return;
+        setLocal(next);
+        setAdapterLoading(false);
+      }).catch(() => {
+        if (requestref.current !== id) return;
+        setLocal([]);
+        setAdapterLoading(false);
+      });
+      return;
+    }
+    setLocal(result);
+    setAdapterLoading(false);
+  }, [adapter, endpoint, limit, searchdocs, value]);
+  useEffect(() => {
+    const target = hasrecent ? saferecent : safe;
+    if (target < 0 || !list.current) return;
+    const id = hasrecent ? getRecentOptionId(target) : getOptionId(target);
+    const option = list.current.querySelector(`#${id}`);
+    option?.scrollIntoView({ block: "nearest" });
+  }, [hasrecent, safe, saferecent]);
+  const save = useCallback(
+    (item) => {
+      const text = item.trim();
+      if (!text) return;
+      setRecent((items) => [text, ...items.filter((entry) => entry !== text)].slice(0, 5));
+    },
+    [setRecent]
+  );
+  const navigate = useCallback(
+    (slug, anchor) => {
+      save(query);
+      const target = slug ? `${basePath}/${slug}` : basePath;
+      router.push(anchor ? `${target}#${anchor}` : target);
+      setOpen(false);
+    },
+    [basePath, query, router, save]
+  );
+  const onkey = useCallback(
+    (event) => {
+      if (hasrecent) {
+        if (event.key === "ArrowDown") {
+          event.preventDefault();
+          setSelected((item) => Math.min(item + 1, recent.length - 1));
+          return;
+        }
+        if (event.key === "ArrowUp") {
+          event.preventDefault();
+          setSelected((item) => Math.max(item - 1, 0));
+          return;
+        }
+        if (event.key === "Home") {
+          event.preventDefault();
+          setSelected(0);
+          return;
+        }
+        if (event.key === "End") {
+          event.preventDefault();
+          setSelected(recent.length - 1);
+          return;
+        }
+        if (event.key === "Enter" && saferecent >= 0 && recent[saferecent]) {
+          event.preventDefault();
+          updatequery(recent[saferecent]);
+          setSelected(0);
+          return;
+        }
+      }
+      if (results.length === 0) return;
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setSelected((item) => Math.min(item + 1, results.length - 1));
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setSelected((item) => Math.max(item - 1, 0));
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        setSelected(0);
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        setSelected(results.length - 1);
+        return;
+      }
+      if (event.key === "Tab" && results[0]) {
+        event.preventDefault();
+        updatequery(results[0].doc.title);
+        setSelected(0);
+        return;
+      }
+      if (event.key === "Enter" && safe >= 0 && results[safe]) {
+        navigate(results[safe].doc.slug, results[safe].anchor);
+      }
+    },
+    [hasrecent, navigate, recent, results, safe, saferecent, updatequery]
+  );
+  if (!open) {
+    if (hidden) return null;
+    return /* @__PURE__ */ jsx(Trigger, { onOpen: openmodal });
+  }
+  return /* @__PURE__ */ jsx(
+    Panel,
+    {
+      query,
+      value,
+      safe: hasrecent ? saferecent : safe,
+      recent,
+      loading,
+      results,
+      input,
+      list,
+      onClose: () => setOpen(false),
+      onChange: updatequery,
+      onKey: onkey,
+      onSelect: updatequery,
+      onNavigate: navigate
+    }
+  );
+}
+
+export { Search };

package/dist/components/searchbutton.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+
+interface SearchButtonProps {
+    onClick: () => void;
+    className?: string;
+    placeholder?: string;
+}
+declare const SearchButton: react.NamedExoticComponent<SearchButtonProps>;
+
+export { SearchButton, type SearchButtonProps };

package/dist/components/searchbutton.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useState, useEffect } from 'react';
+
+const SearchButton = memo(function SearchButton2({
+  onClick,
+  className = "",
+  placeholder = "Search..."
+}) {
+  const [modifier, setModifier] = useState("Ctrl");
+  useEffect(() => {
+    const ua = navigator.userAgentData;
+    const platform = ua?.platform ?? navigator.platform ?? "";
+    if (/mac/i.test(platform)) setModifier("\u2318");
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: `flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm text-neutral-500 transition-colors hover:border-neutral-300 hover:text-neutral-700 dark:border-neutral-800 dark:text-neutral-400 dark:hover:border-neutral-700 dark:hover:text-neutral-300 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            "aria-hidden": "true",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+              /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: placeholder }),
+        /* @__PURE__ */ jsxs("kbd", { className: "rounded border border-neutral-200 px-1.5 py-0.5 text-xs font-medium dark:border-neutral-700", children: [
+          modifier,
+          "+K"
+        ] })
+      ]
+    }
+  );
+});
+
+export { SearchButton };

package/dist/components/searchdialog.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+
+interface SearchDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onSearch: (query: string) => void;
+    results?: {
+        title: string;
+        description?: string;
+        href: string;
+        section?: string;
+    }[];
+    placeholder?: string;
+    className?: string;
+    loading?: boolean;
+}
+declare const SearchDialog: react.NamedExoticComponent<SearchDialogProps>;
+
+export { SearchDialog, type SearchDialogProps };

package/dist/components/searchdialog.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo, useState, useRef, useEffect, useCallback } from 'react';
+import { useScrollLock } from '../hooks/scrolllock';
+
+const SearchDialog = memo(function SearchDialog2({
+  open,
+  onClose,
+  onSearch,
+  results,
+  placeholder = "Search docs...",
+  className,
+  loading
+}) {
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(-1);
+  const inputRef = useRef(null);
+  useScrollLock(open);
+  useEffect(() => {
+    if (!open) {
+      setQuery("");
+      setActive(-1);
+      return;
+    }
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    requestAnimationFrame(() => inputRef.current?.focus());
+    return () => {
+      window.removeEventListener("keydown", handler);
+    };
+  }, [open, onClose]);
+  const handleChange = useCallback(
+    (e) => {
+      setQuery(e.target.value);
+      setActive(-1);
+      onSearch(e.target.value);
+    },
+    [onSearch]
+  );
+  const handleInputKey = useCallback((e) => {
+    if (!results || results.length === 0) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((prev) => Math.min(results.length - 1, prev + 1));
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((prev) => Math.max(-1, prev - 1));
+      return;
+    }
+    if (e.key === "Enter" && active >= 0) {
+      e.preventDefault();
+      const item = results[active];
+      if (!item) return;
+      window.location.href = item.href;
+    }
+  }, [active, results]);
+  const handleBackdrop = useCallback(
+    (e) => {
+      if (e.target === e.currentTarget) onClose();
+    },
+    [onClose]
+  );
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `fixed inset-0 z-50 flex items-start justify-center bg-black/50 backdrop-blur-sm pt-[20vh] ${className ?? ""}`,
+      onClick: handleBackdrop,
+      role: "presentation",
+      children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-lg rounded-xl border border-line bg-bg shadow-2xl overflow-hidden", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value: query,
+            onChange: handleChange,
+            onKeyDown: handleInputKey,
+            placeholder,
+            className: "w-full px-4 py-3 bg-transparent text-fg text-sm placeholder:text-muted border-b border-line focus:outline-none"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "max-h-72 overflow-y-auto", children: loading ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted text-sm", children: "loading..." }) : results && results.length === 0 && query.trim() ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted text-sm", children: "no results" }) : results?.map((r, i) => /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: r.href,
+            onMouseEnter: () => setActive(i),
+            className: `flex flex-col gap-0.5 px-4 py-2.5 transition-colors ${i === active ? "bg-surface" : "hover:bg-surface"}`,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm text-fg", children: r.title }),
+                r.section && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted", children: r.section })
+              ] }),
+              r.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted", children: r.description })
+            ]
+          },
+          r.href
+        )) })
+      ] })
+    }
+  );
+});
+
+export { SearchDialog };

package/dist/components/searcher.d.ts

@@ -0,0 +1,12 @@
+import { SearchResult } from '../search.js';
+import '../content.js';
+import 'zod';
+import '../schema.js';
+import '../searchscore.js';
+
+declare function useSearcher(endpoint: string | undefined, query: string, limit: number): {
+    results: SearchResult[];
+    loading: boolean;
+};
+
+export { useSearcher };