fromsrc 0.0.0 → 0.0.2

package/dist/components/navbar.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+function NavbarBase({
+  logo,
+  title,
+  links,
+  actions,
+  className,
+  sticky = true
+}) {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: [
+        "border-b border-line",
+        sticky && "sticky top-0 z-40 bg-surface/80 backdrop-blur",
+        className
+      ].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-14 max-w-7xl items-center px-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          logo,
+          title && /* @__PURE__ */ jsx("span", { className: "text-fg font-semibold", children: title })
+        ] }),
+        links && links.length > 0 && /* @__PURE__ */ jsx("nav", { className: "mx-auto flex items-center gap-6", children: links.map((link) => /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: link.href,
+            className: [
+              "text-sm transition-colors hover:text-fg",
+              link.active ? "text-fg font-medium" : "text-muted"
+            ].join(" "),
+            children: link.label
+          },
+          link.href
+        )) }),
+        actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })
+      ] })
+    }
+  );
+}
+const Navbar = memo(NavbarBase);
+
+export { Navbar };

package/dist/components/navlink.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { ReactNode, JSX } from 'react';
+
+interface NavLinkProps {
+    href: string;
+    children: ReactNode;
+    icon?: ReactNode;
+    onClick?: () => void;
+    external?: boolean;
+}
+declare function NavLinkComponent({ href, children, icon, onClick, external, }: NavLinkProps): JSX.Element;
+declare const NavLink: react.MemoExoticComponent<typeof NavLinkComponent>;
+
+export { NavLink, type NavLinkProps };

package/dist/components/navlink.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { memo, useRef, useEffect } from 'react';
+
+function NavLinkComponent({
+  href,
+  children,
+  icon,
+  onClick,
+  external
+}) {
+  const pathname = usePathname();
+  const isActive = pathname === href;
+  const ref = useRef(null);
+  const isExternal = external ?? href.startsWith("http");
+  useEffect(() => {
+    if (isActive && ref.current) {
+      ref.current.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  }, [isActive]);
+  if (isExternal) {
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick,
+        "aria-label": `${typeof children === "string" ? children : ""} (opens in new tab)`,
+        className: "flex items-center gap-2 px-2 py-1.5 text-sm rounded-lg text-muted hover:bg-surface/50 hover:text-fg transition-colors [transition-duration:150ms] hover:[transition-duration:0ms]",
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4 shrink-0 [&>svg]:w-4 [&>svg]:h-4", "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-3 h-3 shrink-0 opacity-40",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      ref,
+      href,
+      onClick,
+      prefetch: true,
+      "aria-current": isActive ? "page" : void 0,
+      className: `flex items-center gap-2 px-2 py-1.5 text-sm rounded-lg transition-colors [transition-duration:150ms] hover:[transition-duration:0ms] ${isActive ? "text-fg bg-surface/80 font-medium" : "text-muted hover:text-fg hover:bg-surface/50"}`,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4 shrink-0 [&>svg]:w-4 [&>svg]:h-4", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children })
+      ]
+    }
+  );
+}
+const NavLink = memo(NavLinkComponent);
+
+export { NavLink };

package/dist/components/note.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Props for note-style callout components
+ */
+interface NoteProps {
+    /** Content to display inside the note */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Accessible label for screen readers */
+    label?: string;
+}
+/**
+ * Subtle informational callout with left border
+ */
+declare const Note: react.NamedExoticComponent<NoteProps>;
+/**
+ * Warning callout for important information
+ */
+declare const Important: react.NamedExoticComponent<NoteProps>;
+/**
+ * Callout for experimental or unstable features
+ */
+declare const Experimental: react.NamedExoticComponent<NoteProps>;
+
+export { Experimental, Important, Note, type NoteProps };

package/dist/components/note.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const Note = memo(function Note2({
+  children,
+  className = "",
+  label = "Note"
+}) {
+  return /* @__PURE__ */ jsx(
+    "aside",
+    {
+      role: "note",
+      "aria-label": label,
+      className: `my-4 pl-4 border-l-2 border-muted/30 text-sm text-muted italic ${className}`,
+      children
+    }
+  );
+});
+const Important = memo(function Important2({
+  children,
+  className = "",
+  label = "Important"
+}) {
+  return /* @__PURE__ */ jsx(
+    "aside",
+    {
+      role: "note",
+      "aria-label": label,
+      className: `my-4 pl-4 border-l-2 border-amber-500/50 text-sm text-amber-200/80 ${className}`,
+      children
+    }
+  );
+});
+const Experimental = memo(function Experimental2({
+  children,
+  className = "",
+  label = "Experimental"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      role: "note",
+      "aria-label": label,
+      className: `my-4 px-4 py-3 rounded-lg bg-purple-500/5 border border-purple-500/20 text-sm text-purple-200/80 ${className}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "text-[10px] uppercase tracking-wider text-purple-400 font-medium",
+            children: "experimental"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "mt-1", children })
+      ]
+    }
+  );
+});
+
+export { Experimental, Important, Note };

package/dist/components/openapi.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { JSX } from 'react';
+
+interface OpenapiProps {
+    spec: string | object;
+    tag?: string;
+    method?: string;
+    path?: string;
+    group?: "none" | "tag";
+}
+declare function OpenapiBase({ spec, tag, method, path, group }: OpenapiProps): JSX.Element;
+declare const Openapi: react.MemoExoticComponent<typeof OpenapiBase>;
+
+export { Openapi, type OpenapiProps };

package/dist/components/openapi.js

@@ -0,0 +1,145 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo, useMemo } from 'react';
+import { parseOpenApi } from '../openapi';
+import { Endpoint, Param, Response } from './endpoint';
+import { Openapischema } from './openapischema';
+import { OpenapiTags } from './openapitags';
+
+function bypath(endpoint, path) {
+  return endpoint.path.toLowerCase().includes(path.toLowerCase());
+}
+function bymethod(endpoint, method) {
+  return endpoint.method.toLowerCase() === method.toLowerCase();
+}
+function bytag(endpoint, tag) {
+  return endpoint.tags.some((entry) => entry.toLowerCase() === tag.toLowerCase());
+}
+function parsedspec(spec) {
+  try {
+    return parseOpenApi(spec);
+  } catch {
+    return null;
+  }
+}
+function methodrank(method) {
+  const list = ["get", "post", "put", "patch", "delete", "options", "head", "trace"];
+  const index = list.indexOf(method.toLowerCase());
+  return index === -1 ? list.length : index;
+}
+function sorted(endpoints) {
+  return [...endpoints].sort((left, right) => {
+    if (left.path === right.path) return methodrank(left.method) - methodrank(right.method);
+    return left.path.localeCompare(right.path);
+  });
+}
+function formatseclabel(list) {
+  if (!list || list.length === 0) return null;
+  return list.join(", ");
+}
+function tagname(endpoint) {
+  const first = endpoint.tags[0];
+  if (!first) return "untagged";
+  return first;
+}
+function tagid(name) {
+  return `tag-${name.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
+}
+function groups(endpoints) {
+  const map = /* @__PURE__ */ new Map();
+  for (const endpoint of endpoints) {
+    const name = tagname(endpoint);
+    const list = map.get(name);
+    if (list) list.push(endpoint);
+    else map.set(name, [endpoint]);
+  }
+  return Array.from(map.entries()).sort((left, right) => {
+    if (left[0] === "untagged") return 1;
+    if (right[0] === "untagged") return -1;
+    return left[0].localeCompare(right[0]);
+  });
+}
+function endpointmeta(endpoint) {
+  const security = formatseclabel(endpoint.security);
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-wrap items-center gap-2 text-xs", children: [
+    endpoint.operationId && /* @__PURE__ */ jsx("span", { className: "rounded border border-line px-2 py-1 font-mono text-dim", children: endpoint.operationId }),
+    endpoint.deprecated && /* @__PURE__ */ jsx("span", { className: "rounded border border-red-500/30 bg-red-500/10 px-2 py-1 text-red-400", children: "deprecated" }),
+    endpoint.tags.map((entry) => /* @__PURE__ */ jsx("span", { className: "rounded border border-line px-2 py-1 text-muted", children: entry }, `${endpoint.path}-${endpoint.method}-tag-${entry}`)),
+    security && /* @__PURE__ */ jsxs("span", { className: "rounded border border-line px-2 py-1 text-muted", children: [
+      "security: ",
+      security
+    ] })
+  ] });
+}
+function endpointview(endpoint) {
+  return /* @__PURE__ */ jsxs(
+    Endpoint,
+    {
+      method: endpoint.method,
+      path: endpoint.path,
+      description: endpoint.summary ?? endpoint.description,
+      children: [
+        endpointmeta(endpoint),
+        endpoint.parameters.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-4", role: "list", "aria-label": "parameters", children: endpoint.parameters.map((parameter) => /* @__PURE__ */ jsx(
+          Param,
+          {
+            name: `${parameter.name} (${parameter.in})`,
+            type: parameter.schema?.type ?? "string",
+            required: parameter.required,
+            description: parameter.description
+          },
+          `${endpoint.path}-${endpoint.method}-${parameter.in}-${parameter.name}`
+        )) }),
+        endpoint.requestBody?.content && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-fg mb-2", children: "request body" }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-3", children: Object.entries(endpoint.requestBody.content).map(([media, content]) => /* @__PURE__ */ jsxs("div", { className: "rounded border border-line p-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-mono text-dim mb-2", children: media }),
+            /* @__PURE__ */ jsx(Openapischema, { schema: content.schema })
+          ] }, media)) })
+        ] }),
+        endpoint.responses.map((response) => /* @__PURE__ */ jsx(Response, { status: response.status, description: response.description, children: response.content && /* @__PURE__ */ jsx("div", { className: "space-y-3 mt-2", children: Object.entries(response.content).map(([media, content]) => /* @__PURE__ */ jsxs("div", { className: "rounded border border-line p-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-mono text-dim mb-2", children: media }),
+          /* @__PURE__ */ jsx(Openapischema, { schema: content.schema })
+        ] }, media)) }) }, `${endpoint.path}-${endpoint.method}-${response.status}`))
+      ]
+    },
+    `${endpoint.method}-${endpoint.path}`
+  );
+}
+function OpenapiBase({ spec, tag, method, path, group = "none" }) {
+  const parsed = useMemo(() => parsedspec(spec), [spec]);
+  const endpoints = useMemo(() => {
+    if (!parsed) return [];
+    let list2 = parsed.endpoints;
+    if (tag) list2 = list2.filter((entry) => bytag(entry, tag));
+    if (method) list2 = list2.filter((entry) => bymethod(entry, method));
+    if (path) list2 = list2.filter((entry) => bypath(entry, path));
+    return sorted(list2);
+  }, [parsed, tag, method, path]);
+  if (!parsed) return /* @__PURE__ */ jsx("p", { className: "text-sm text-red-400", children: "invalid openapi specification" });
+  if (endpoints.length === 0) return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted", children: "no endpoints found" });
+  const list = group === "tag" ? groups(endpoints) : [];
+  const items = list.map(([name, value]) => ({ name, id: tagid(name), count: value.length }));
+  return /* @__PURE__ */ jsxs("section", { className: "my-6", "aria-label": "openapi reference", children: [
+    /* @__PURE__ */ jsxs("header", { className: "mb-4", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium text-fg", children: parsed.info.title }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-dim", children: [
+        "v",
+        parsed.info.version
+      ] }),
+      parsed.info.description && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted", children: parsed.info.description })
+    ] }),
+    group === "tag" ? /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+      /* @__PURE__ */ jsx(OpenapiTags, { items }),
+      list.map(([name, list2]) => /* @__PURE__ */ jsxs("section", { "aria-labelledby": tagid(name), children: [
+        /* @__PURE__ */ jsxs("h3", { id: tagid(name), className: "mb-2 flex items-center gap-2 text-sm font-medium uppercase tracking-wide text-dim", children: [
+          /* @__PURE__ */ jsx("span", { children: name }),
+          /* @__PURE__ */ jsx("span", { className: "rounded border border-line px-1.5 py-0.5 text-[10px] font-mono normal-case", children: list2.length })
+        ] }),
+        /* @__PURE__ */ jsx("div", { children: list2.map(endpointview) })
+      ] }, name))
+    ] }) : /* @__PURE__ */ jsx("div", { children: endpoints.map(endpointview) })
+  ] });
+}
+const Openapi = memo(OpenapiBase);
+
+export { Openapi };

package/dist/components/openapischema.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { JSX } from 'react';
+import { OpenApiSchema } from '../openapiutil.js';
+
+interface OpenapischemaProps {
+    schema?: OpenApiSchema;
+    name?: string;
+    required?: boolean;
+}
+declare function OpenapischemaBase({ schema, name, required }: OpenapischemaProps): JSX.Element;
+declare const Openapischema: react.MemoExoticComponent<typeof OpenapischemaBase>;
+
+export { Openapischema, type OpenapischemaProps };

package/dist/components/openapischema.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+function scalar(value) {
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  return JSON.stringify(value);
+}
+function typestring(schema) {
+  if (!schema) return "unknown";
+  if (schema.enum?.length) return schema.enum.join(" | ");
+  if (schema.type === "array") return `${typestring(schema.items)}[]`;
+  if (schema.oneOf?.length) return schema.oneOf.map((part) => typestring(part)).join(" | ");
+  if (schema.anyOf?.length) return schema.anyOf.map((part) => typestring(part)).join(" | ");
+  if (schema.allOf?.length) return schema.allOf.map((part) => typestring(part)).join(" & ");
+  return schema.type ?? "object";
+}
+function OpenapischemaBase({ schema, name, required }) {
+  if (!schema) {
+    return /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-muted", children: "unknown" });
+  }
+  const properties = schema.properties ? Object.entries(schema.properties) : [];
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+      name && /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-fg", children: name }),
+      /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-muted", children: typestring(schema) }),
+      required && /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wide text-red-400", children: "required" }),
+      schema.format && /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wide text-dim", children: schema.format })
+    ] }),
+    schema.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted", children: schema.description }),
+    schema.default !== void 0 && /* @__PURE__ */ jsxs("div", { className: "text-xs text-dim", children: [
+      "default: ",
+      /* @__PURE__ */ jsx("code", { className: "font-mono", children: scalar(schema.default) })
+    ] }),
+    schema.example !== void 0 && /* @__PURE__ */ jsxs("div", { className: "text-xs text-dim", children: [
+      "example: ",
+      /* @__PURE__ */ jsx("code", { className: "font-mono", children: scalar(schema.example) })
+    ] }),
+    properties.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-2 border-l border-line pl-3", role: "list", children: properties.map(([key, value]) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      Openapischema,
+      {
+        schema: value,
+        name: key,
+        required: schema.required?.includes(key)
+      }
+    ) }, key)) })
+  ] });
+}
+const Openapischema = memo(OpenapischemaBase);
+
+export { Openapischema };

package/dist/components/openapitags.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+
+interface OpenapiTag {
+    name: string;
+    id: string;
+    count: number;
+}
+interface OpenapiTagsProps {
+    items: OpenapiTag[];
+}
+declare const OpenapiTags: react.NamedExoticComponent<OpenapiTagsProps>;
+
+export { type OpenapiTag, OpenapiTags, type OpenapiTagsProps };

package/dist/components/openapitags.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const OpenapiTagsBase = memo(function OpenapiTagsBase2({ items }) {
+  if (items.length < 2) return null;
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "OpenAPI tags", className: "mb-4", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-2", role: "list", children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: `#${item.id}`,
+      className: "inline-flex items-center gap-2 rounded border border-line px-2 py-1 text-xs text-muted hover:text-fg focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-dim",
+      children: [
+        /* @__PURE__ */ jsx("span", { children: item.name }),
+        /* @__PURE__ */ jsx("span", { className: "rounded border border-line px-1.5 py-0.5 text-[10px] font-mono", children: item.count })
+      ]
+    }
+  ) }, item.id)) }) });
+});
+const OpenapiTags = OpenapiTagsBase;
+
+export { OpenapiTags };

package/dist/components/pagetransition.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { ReactNode, JSX } from 'react';
+
+interface PageTransitionProps {
+    children: ReactNode;
+    className?: string;
+    duration?: number;
+    mode?: "fade" | "slide" | "none";
+}
+declare function PageTransitionBase({ children, className, duration, mode, }: PageTransitionProps): JSX.Element;
+declare const PageTransition: react.MemoExoticComponent<typeof PageTransitionBase>;
+
+export { PageTransition, type PageTransitionProps };

package/dist/components/pagetransition.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { memo, useState, useRef, useEffect } from 'react';
+
+function PageTransitionBase({
+  children,
+  className,
+  duration = 200,
+  mode = "fade"
+}) {
+  const [displayed, setDisplayed] = useState(children);
+  const [visible, setVisible] = useState(true);
+  const prevRef = useRef(children);
+  useEffect(() => {
+    if (prevRef.current === children) return;
+    prevRef.current = children;
+    if (mode === "none") {
+      setDisplayed(children);
+      return;
+    }
+    setVisible(false);
+    const timer = setTimeout(() => {
+      setDisplayed(children);
+      setVisible(true);
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [children, duration, mode]);
+  const style = mode === "none" ? {} : {
+    transition: `opacity ${duration}ms ease, transform ${duration}ms ease`,
+    opacity: visible ? 1 : 0,
+    transform: mode === "slide" ? visible ? "translateY(0)" : "translateY(8px)" : void 0
+  };
+  return /* @__PURE__ */ jsx("div", { className, style, children: displayed });
+}
+const PageTransition = memo(PageTransitionBase);
+
+export { PageTransition };

package/dist/components/pagination.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { JSX } from 'react';
+
+/**
+ * Link destination with href and display title
+ */
+interface PaginationLink {
+    href: string;
+    title: string;
+}
+/**
+ * Props for the Pagination component
+ */
+interface PaginationProps {
+    /** Previous page link */
+    prev?: PaginationLink;
+    /** Next page link */
+    next?: PaginationLink;
+}
+declare function PaginationBase({ prev, next }: PaginationProps): JSX.Element | null;
+/**
+ * Navigation component for previous/next page links
+ */
+declare const Pagination: react.MemoExoticComponent<typeof PaginationBase>;
+
+export { Pagination, type PaginationLink, type PaginationProps };

package/dist/components/pagination.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Link from 'next/link';
+import { memo } from 'react';
+import { IconChevronLeft, IconChevronRight } from './icons';
+
+function PaginationBase({ prev, next }) {
+  if (!prev && !next) return null;
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: "flex items-center justify-between gap-4 mt-12 pt-6 border-t border-line",
+      "aria-label": "Pagination navigation",
+      role: "navigation",
+      children: [
+        prev ? /* @__PURE__ */ jsxs(
+          Link,
+          {
+            href: prev.href,
+            rel: "prev",
+            "aria-label": `Go to previous page: ${prev.title}`,
+            className: "flex items-center gap-2 px-4 py-3 rounded-xl border border-line bg-surface/30 hover:bg-surface/50 transition-colors group",
+            children: [
+              /* @__PURE__ */ jsx(
+                IconChevronLeft,
+                {
+                  size: 16,
+                  className: "text-muted group-hover:text-fg transition-colors",
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "text-left", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-xs text-muted", children: "previous" }),
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-fg", children: prev.title })
+              ] })
+            ]
+          }
+        ) : /* @__PURE__ */ jsx("div", { "aria-hidden": "true" }),
+        next ? /* @__PURE__ */ jsxs(
+          Link,
+          {
+            href: next.href,
+            rel: "next",
+            "aria-label": `Go to next page: ${next.title}`,
+            className: "flex items-center gap-2 px-4 py-3 rounded-xl border border-line bg-surface/30 hover:bg-surface/50 transition-colors group",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-xs text-muted", children: "next" }),
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-fg", children: next.title })
+              ] }),
+              /* @__PURE__ */ jsx(
+                IconChevronRight,
+                {
+                  size: 16,
+                  className: "text-muted group-hover:text-fg transition-colors",
+                  "aria-hidden": "true"
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsx("div", { "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+const Pagination = memo(PaginationBase);
+
+export { Pagination };

package/dist/components/panel.d.ts

@@ -0,0 +1,25 @@
+import { RefObject, KeyboardEvent, JSX } from 'react';
+import { SearchResult } from '../search.js';
+import '../content.js';
+import 'zod';
+import '../schema.js';
+import '../searchscore.js';
+
+interface PanelProps {
+    query: string;
+    value: string;
+    safe: number;
+    recent: string[];
+    loading: boolean;
+    results: SearchResult[];
+    input: RefObject<HTMLInputElement | null>;
+    list: RefObject<HTMLUListElement | null>;
+    onClose: () => void;
+    onChange: (value: string) => void;
+    onKey: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onSelect: (query: string) => void;
+    onNavigate: (slug: string | undefined, anchor?: string) => void;
+}
+declare function Panel({ query, value, safe, recent, loading, results, input, list, onClose, onChange, onKey, onSelect, onNavigate, }: PanelProps): JSX.Element;
+
+export { Panel, type PanelProps };