@suzumiyaaoba/mdxr 0.1.0

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { cn } from "cn";
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "bg-foreground text-background data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/components.ts

@@ -0,0 +1,78 @@
+// Public entry: `@suzumiyaaoba/mdxr/components`
+// Re-export the built-in catalog so custom components can compose them.
+// `export *` keeps the surface complete — the hydration bundle never loads
+// this barrel (it resolves each used name straight to its leaf module).
+export * from "./ui/index.js";
+export { DocContext } from "./doc-context.js";
+export {
+  defineComponent,
+  textOf,
+  type ComponentMeta,
+  type MdxrComponent,
+} from "./define.js";
+
+// shadcn/ui (Base UI) component set — composable from project components.
+export * from "./components/ui/accordion.js";
+export * from "./components/ui/alert.js";
+export * from "./components/ui/alert-dialog.js";
+export * from "./components/ui/aspect-ratio.js";
+export * from "./components/ui/attachment.js";
+export * from "./components/ui/avatar.js";
+export * from "./components/ui/badge.js";
+export * from "./components/ui/breadcrumb.js";
+export * from "./components/ui/bubble.js";
+export * from "./components/ui/button.js";
+export * from "./components/ui/button-group.js";
+export * from "./components/ui/calendar.js";
+export * from "./components/ui/card.js";
+export * from "./components/ui/carousel.js";
+export * from "./components/ui/chart.js";
+export * from "./components/ui/checkbox.js";
+export * from "./components/ui/collapsible.js";
+export * from "./components/ui/combobox.js";
+export * from "./components/ui/command.js";
+export * from "./components/ui/context-menu.js";
+export * from "./components/ui/dialog.js";
+export * from "./components/ui/direction.js";
+export * from "./components/ui/drawer.js";
+export * from "./components/ui/dropdown-menu.js";
+export * from "./components/ui/empty.js";
+export * from "./components/ui/field.js";
+export * from "./components/ui/fieldset.js";
+export * from "./components/ui/frame.js";
+export * from "./components/ui/hover-card.js";
+export * from "./components/ui/input.js";
+export * from "./components/ui/input-group.js";
+export * from "./components/ui/input-otp.js";
+export * from "./components/ui/item.js";
+export * from "./components/ui/kbd.js";
+export * from "./components/ui/label.js";
+export * from "./components/ui/marker.js";
+export * from "./components/ui/menubar.js";
+export * from "./components/ui/message.js";
+export * from "./components/ui/message-scroller.js";
+export * from "./components/ui/meter.js";
+export * from "./components/ui/native-select.js";
+export * from "./components/ui/navigation-menu.js";
+export * from "./components/ui/pagination.js";
+export * from "./components/ui/popover.js";
+export * from "./components/ui/progress.js";
+export * from "./components/ui/questionnaire.js";
+export * from "./components/ui/radio-group.js";
+export * from "./components/ui/resizable.js";
+export * from "./components/ui/scroll-area.js";
+export * from "./components/ui/select.js";
+export * from "./components/ui/separator.js";
+export * from "./components/ui/sheet.js";
+export * from "./components/ui/sidebar.js";
+export * from "./components/ui/skeleton.js";
+export * from "./components/ui/slider.js";
+export * from "./components/ui/spinner.js";
+export * from "./components/ui/switch.js";
+export * from "./components/ui/table.js";
+export * from "./components/ui/tabs.js";
+export * from "./components/ui/textarea.js";
+export * from "./components/ui/toast.js";
+export * from "./components/ui/toggle.js";
+export * from "./components/ui/toggle-group.js";
+export * from "./components/ui/tooltip.js";

package/src/config.ts

@@ -0,0 +1,56 @@
+import fs from "node:fs";
+import path from "node:path";
+
+import { isRecord, nonEmpty } from "./guards.js";
+import { loadUserModule } from "./load-user-module.js";
+
+/** Shape of `mdxr.config.ts` in a project that uses mdxr. */
+export interface MdxrConfig {
+  /** Path to a TS/TSX module whose named exports are extra MDX components. */
+  components?: string;
+  /**
+   * Editor used for file links (`vscode` default). A known name (`cursor`,
+   * `zed`, `vscode-insiders`, `windsurf`, `sublime`, `textmate`, `idea`), a
+   * `{path}`/`{line}` URL template, or `"none"` to disable. Frontmatter
+   * `editor:` overrides per document.
+   */
+  editor?: string;
+  /** Path to a CSS file with `@theme` overrides / extra utilities. */
+  theme?: string;
+}
+
+export const defineConfig = (config: MdxrConfig): MdxrConfig => config;
+
+export interface ResolvedConfig {
+  componentsPath?: string;
+  themePath?: string;
+  /** Bundled mdxr.config code (Tailwind scan source). */
+  componentsCode?: string;
+  dir: string;
+  editor?: string;
+}
+
+const CONFIG_FILES = [
+  "mdxr.config.ts",
+  "mdxr.config.mts",
+  "mdxr.config.js",
+  "mdxr.config.mjs",
+];
+
+export const loadConfig = async (dir: string): Promise<ResolvedConfig> => {
+  const name = CONFIG_FILES.find((n) => fs.existsSync(path.join(dir, n)));
+  if (name === undefined) {
+    return { dir };
+  }
+  const { module: mod, code } = await loadUserModule(path.join(dir, name));
+  const raw = isRecord(mod.default) ? mod.default : {};
+  return {
+    componentsCode: code,
+    componentsPath: nonEmpty(raw.components)
+      ? path.resolve(dir, raw.components)
+      : undefined,
+    dir,
+    editor: nonEmpty(raw.editor) ? raw.editor : undefined,
+    themePath: nonEmpty(raw.theme) ? path.resolve(dir, raw.theme) : undefined,
+  };
+};

package/src/define.ts

@@ -0,0 +1,122 @@
+import { Fragment, isValidElement } from "react";
+import type { ReactElement, ReactNode } from "react";
+import type { GenericSchema, InferOutput } from "valibot";
+import { safeParse } from "valibot";
+
+import { isRecord } from "./guards.js";
+
+/** Metadata attached to a component for `mdxr catalog` and prop validation. */
+export interface ComponentMeta {
+  description?: string;
+  /** Valibot schema for props (MDX attributes arrive as strings; `children` is passed through). */
+  schema?: GenericSchema;
+}
+
+/** Props as received from a document: arbitrary attributes plus children. */
+export interface DocProps extends Record<string, unknown> {
+  children?: ReactNode;
+}
+
+/**
+ * A component usable in an mdxr document. Props are intentionally loose —
+ * documents are data, and prop validation happens via `defineComponent`
+ * schemas at render time. Only ever invoked by MDX/React.
+ */
+export type AnyComponent = ((props: DocProps) => ReactNode) & {
+  __mdxr?: ComponentMeta;
+};
+
+/** Name → component map passed to MDX's `components` prop. */
+export type ComponentMap = Record<string, AnyComponent>;
+
+export type MdxrComponent = AnyComponent;
+
+type PropsOf<S> = S extends GenericSchema
+  ? InferOutput<S>
+  : Record<string, unknown>;
+
+/**
+ * Validate `props` against `schema`, throwing the catalog's `Invalid props`
+ * error on failure. `tag` names the element in the message
+ * (`Invalid props on <Node>`); without it the bare `Invalid props` form is
+ * reported — the shape `defineComponent` produces.
+ */
+export const parseProps = <S extends GenericSchema>(
+  schema: S,
+  props: unknown,
+  tag?: string
+): InferOutput<S> => {
+  const r = safeParse(schema, props);
+  if (!r.success) {
+    const detail = r.issues
+      .map(
+        (i) =>
+          `${i.path?.map((p) => String(p.key)).join(".") ?? "props"}: ${i.message}`
+      )
+      .join("; ");
+    throw new Error(
+      tag === undefined
+        ? `Invalid props: ${detail}`
+        : `Invalid props on <${tag}>: ${detail}`
+    );
+  }
+  return r.output;
+};
+
+/**
+ * Wrap a render function with prop validation + catalog metadata.
+ * Prop types are inferred from the valibot schema, so the render callback
+ * is fully typed. Validation failures surface as document errors so the
+ * agent can self-correct.
+ */
+export const defineComponent = <
+  S extends GenericSchema | undefined = undefined,
+>(
+  meta: { description?: string; schema?: S },
+  render: (props: PropsOf<S> & { children?: ReactNode }) => ReactElement | null
+): MdxrComponent => {
+  const Comp = (props: DocProps): ReactElement | null => {
+    const parsed: unknown =
+      meta.schema === undefined ? props : parseProps(meta.schema, props);
+    // Validated above by the schema (or intentionally loose without one).
+    // oxlint-disable-next-line typescript/no-unsafe-type-assertion
+    return render(parsed as PropsOf<S> & { children?: ReactNode });
+  };
+  Comp.__mdxr = meta;
+  return Comp;
+};
+
+/**
+ * Normalize a `children` prop into a flat array: nested arrays and fragments
+ * are unwrapped, and null/undefined/boolean nodes are dropped. Used instead of
+ * `React.Children` utilities, which lint rules discourage.
+ */
+export const flattenChildren = (node: ReactNode): ReactNode[] => {
+  if (Array.isArray(node)) {
+    return node.flatMap(flattenChildren);
+  }
+  if (node === null || node === undefined || typeof node === "boolean") {
+    return [];
+  }
+  if (
+    isValidElement<{ children?: ReactNode }>(node) &&
+    node.type === Fragment
+  ) {
+    return flattenChildren(node.props.children);
+  }
+  return [node];
+};
+
+/** Extract all text from a React node tree (used for copy-to-clipboard payloads). */
+export const textOf = (node: unknown): string => {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+  if (Array.isArray(node)) {
+    return node.map(textOf).join("");
+  }
+  if (isRecord(node) && isRecord(node.props)) {
+    return textOf(node.props.children);
+  }
+  return "";
+};

package/src/doc-context.ts

@@ -0,0 +1,20 @@
+import { createContext } from "react";
+
+export interface DocContextValue {
+  /**
+   * Build an editor URL (`vscode://file/…`, per the resolved `editor` setting)
+   * for a document-relative path, or undefined when file links are disabled or
+   * the file does not exist on disk.
+   */
+  fileLink?: (relPath: string, line?: string) => string | undefined;
+  /**
+   * The document's render timestamp. Relative-time components (`<Due>`) must
+   * read "now" from here: the value is serialized into the hydration payload,
+   * so client rendering sees the same instant SSR did — a render crossing
+   * midnight can't produce a hydration mismatch.
+   */
+  now?: Date;
+}
+
+/** Render-time document info shared with components. */
+export const DocContext = createContext<DocContextValue>({});

package/src/editor.ts

@@ -0,0 +1,94 @@
+import { nonEmpty, urlScheme } from "./guards.js";
+
+type EditorLink = (absPath: string, line?: string) => string;
+
+/**
+ * Path → URI path segment-by-segment. `encodeURI` would leave `#`, `?`,
+ * `%`, `&` intact and they parse as delimiters inside the editor URL;
+ * `encodeURIComponent` on the whole path would mangle `/`. Backslashes are
+ * normalized so Windows paths survive too (`C:\x` → `C%3A/x`).
+ */
+const encodePath = (p: string): string =>
+  p
+    .replaceAll("\\", "/")
+    .split("/")
+    .map((seg) => encodeURIComponent(seg))
+    .join("/");
+
+/** `scheme://file/{abs}:{line}` — the VS Code URL convention most editors share. */
+const atLine =
+  (scheme: string): EditorLink =>
+  (p, l) =>
+    `${scheme}://file${encodePath(p)}${nonEmpty(l) ? `:${l}` : ""}`;
+
+/** `{scheme}://open?url=file://{abs}&line={n}` — Sublime/TextMate style. */
+const queryUrl =
+  (scheme: string): EditorLink =>
+  (p, l) =>
+    `${scheme}://open?url=file://${encodePath(p)}${nonEmpty(l) ? `&line=${l}` : ""}`;
+
+/** Known editors; unknown names fall back to the `scheme://file` convention. */
+export const EDITORS: Record<string, EditorLink> = {
+  cursor: atLine("cursor"),
+  idea: (p, l) =>
+    `idea://open?file=${encodePath(p)}${nonEmpty(l) ? `&line=${l}` : ""}`,
+  sublime: queryUrl("subl"),
+  textmate: queryUrl("txmt"),
+  vscode: atLine("vscode"),
+  "vscode-insiders": atLine("vscode-insiders"),
+  windsurf: atLine("windsurf"),
+  zed: atLine("zed"),
+};
+
+/**
+ * Schemes that execute script when an `<a href>` is clicked. `editor` is a
+ * config value, but frontmatter can also supply it — a document must not be
+ * able to mint `javascript:`/`data:` links through file references.
+ */
+const SCRIPTABLE = new Set(["data", "javascript", "vbscript"]);
+
+const build = (
+  editor: string | undefined,
+  absPath: string,
+  line?: string
+): string | undefined => {
+  const e = nonEmpty(editor) ? editor : "vscode";
+  if (e === "none") {
+    return undefined;
+  }
+  const known = EDITORS[e];
+  if (known !== undefined) {
+    return known(absPath, line);
+  }
+  if (e.includes("{path}")) {
+    return e
+      .replaceAll("{path}", encodePath(absPath))
+      .replaceAll("{line}", line ?? "");
+  }
+  // A bare name becomes a `scheme://file` editor — but only if it could
+  // actually be a URI scheme; otherwise the link would be malformed.
+  if (!/^[a-z][a-z0-9+.-]*$/iu.test(e)) {
+    return undefined;
+  }
+  return atLine(e)(absPath, line);
+};
+
+/**
+ * Editor URL for an absolute path. `editor` is a known name (see EDITORS),
+ * `"none"` (no link), a URL template with `{path}`/`{line}` placeholders
+ * (`myed://open?f={path}&l={line}`), or a bare name treated as a
+ * `scheme://file` editor. Undefined → vscode. Scriptable schemes are
+ * refused — `editor` can arrive from frontmatter, which is document input.
+ */
+export const editorUrl = (
+  editor: string | undefined,
+  absPath: string,
+  line?: string
+): string | undefined => {
+  const url = build(editor, absPath, line);
+  if (url === undefined) {
+    return undefined;
+  }
+  const scheme = urlScheme(url);
+  return scheme !== undefined && SCRIPTABLE.has(scheme) ? undefined : url;
+};

package/src/format-error.ts

@@ -0,0 +1,78 @@
+/**
+ * Validate the `--format` flag: omitted and "text" mean human-readable
+ * errors, "json" switches failure output to a machine-readable object.
+ */
+export const parseErrorFormat = (format?: string): "text" | "json" => {
+  if (format === undefined || format === "text") {
+    return "text";
+  }
+  if (format === "json") {
+    return "json";
+  }
+  throw new Error(`invalid --format "${format}" (expected text|json)`);
+};
+
+export const formatError = (err: unknown): string => {
+  if (err instanceof Error) {
+    // vfile-style messages carry line/column for agent self-repair.
+    const e = err as Error & { line?: number; column?: number; file?: string };
+    const loc =
+      e.line === null || e.line === undefined
+        ? ""
+        : `:${e.line}:${e.column ?? 0}`;
+    const file = e.file ?? "";
+    return `${file}${loc} ${e.message}`.trim();
+  }
+  return String(err);
+};
+
+const levenshtein = (a: string, b: string): number => {
+  const dp = Array.from({ length: a.length + 1 }, (_, i) => [
+    i,
+    ...Array.from({ length: b.length }, () => 0),
+  ]);
+  for (let j = 1; j <= b.length; j += 1) {
+    dp[0][j] = j;
+  }
+  for (let i = 1; i <= a.length; i += 1) {
+    for (let j = 1; j <= b.length; j += 1) {
+      dp[i][j] = Math.min(
+        dp[i - 1][j] + 1,
+        dp[i][j - 1] + 1,
+        dp[i - 1][j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1)
+      );
+    }
+  }
+  return dp[a.length][b.length];
+};
+
+/**
+ * MDX's "Expected component `<X>`" errors get a friendlier message: the
+ * closest catalog name (edit distance ≤ 3) plus the full list, so the agent
+ * can self-correct without a `mdxr catalog` round-trip.
+ */
+export const enhanceRenderError = (
+  err: unknown,
+  componentNames: string[]
+): unknown => {
+  if (!(err instanceof Error)) {
+    return err;
+  }
+  const m = /Expected component [`"'](?<name>\w+)[`"']/u.exec(err.message);
+  const name = m?.groups?.name;
+  if (name === undefined) {
+    return err;
+  }
+  const names = componentNames.filter((n) => /^[A-Z]/u.test(n));
+  const [nearest] = names
+    .map((n) => ({ d: levenshtein(name.toLowerCase(), n.toLowerCase()), n }))
+    .toSorted((x, y) => x.d - y.d);
+  const hint =
+    nearest !== undefined && nearest.d <= 3
+      ? ` Did you mean <${nearest.n}>?`
+      : "";
+  return new Error(
+    `Unknown component <${name}>.${hint} Available: ${names.join(", ")}. Add custom components via mdxr.config.ts.`,
+    { cause: err }
+  );
+};

package/src/guards.ts

@@ -0,0 +1,84 @@
+/** Runtime type guards shared across AST/config/module boundaries. */
+
+import type { AnyComponent } from "./define.js";
+
+export const isRecord = (v: unknown): v is Record<string, unknown> =>
+  typeof v === "object" && v !== null;
+
+/** `React.memo`/`forwardRef`/`lazy` results are objects, not functions —
+ * but they are still valid element types for the MDX components map. */
+const REACT_COMPONENT_OBJECTS = new Set<symbol>([
+  Symbol.for("react.memo"),
+  Symbol.for("react.forward_ref"),
+  Symbol.for("react.lazy"),
+]);
+
+export const isComponent = (v: unknown): v is AnyComponent =>
+  typeof v === "function" ||
+  (isRecord(v) &&
+    typeof v.$$typeof === "symbol" &&
+    REACT_COMPONENT_OBJECTS.has(v.$$typeof));
+
+/** Treat "" as absent — document attributes arrive as strings. */
+export const nonEmpty = (v: unknown): v is string =>
+  typeof v === "string" && v !== "";
+
+/** String-or-undefined narrow — unlike `nonEmpty`, "" passes through. */
+export const asString = (v: unknown): string | undefined =>
+  typeof v === "string" ? v : undefined;
+
+/** Membership-guard factory: `isOneOf(STATUSES)` narrows to the list's union. */
+export const isOneOf =
+  <T extends string>(list: readonly T[]) =>
+  (x: unknown): x is T =>
+    typeof x === "string" && (list as readonly string[]).includes(x);
+
+/**
+ * Prototype-safe record lookup — `table[key]` only for own properties, so
+ * keys like "toString" or "constructor" can't leak members off `Object`'s
+ * prototype. Use wherever document-supplied strings index a table.
+ */
+export const own = <T>(
+  table: Readonly<Record<string, T>>,
+  key: string
+): T | undefined => (Object.hasOwn(table, key) ? table[key] : undefined);
+
+const SAFE_SCHEMES = new Set(["http", "https", "mailto", "tel"]);
+
+/**
+ * The scheme a browser would parse out of `v`, lowercased — or undefined for
+ * scheme-less values. Browsers strip \t\n\r anywhere in a URL and remove
+ * leading/trailing C0 controls and spaces before scheme parsing
+ * ("  javascript:…", "java\tscript:…", "\x01javascript:…" all execute), so
+ * the probe uses the same normalized form.
+ */
+export const urlScheme = (v: string): string | undefined => {
+  /* oxlint-disable no-control-regex -- C0 range is the point: the URL parser
+     strips it at the edges, so the probe must too */
+  const probe = v
+    .replaceAll(/[\t\n\r]/gu, "")
+    .replace(/^[\u0000-\u0020]+/u, "")
+    .replace(/[\u0000-\u0020]+$/u, "");
+  /* oxlint-enable no-control-regex */
+  return /^(?<scheme>[a-zA-Z][a-zA-Z0-9+.-]*):/u
+    .exec(probe)
+    ?.groups?.scheme.toLowerCase();
+};
+
+/**
+ * Doc-supplied `href` props pass through to `<a href>` unescaped — a
+ * `javascript:`/`data:` scheme would execute on click. Allow only web
+ * schemes plus scheme-less values (anchors, relative and protocol-relative
+ * URLs); anything else renders as no link. Editor URLs (`vscode:` etc.)
+ * never take this path — they come from the server-side `fileLink`.
+ */
+export const safeHref = (v: unknown): string | undefined => {
+  if (typeof v !== "string" || v === "") {
+    return undefined;
+  }
+  const scheme = urlScheme(v);
+  if (scheme === undefined || SAFE_SCHEMES.has(scheme)) {
+    return v;
+  }
+  return undefined;
+};

package/src/hooks/use-mobile.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>();
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => {
+      mql.removeEventListener("change", onChange);
+    };
+  }, []);
+
+  return !!isMobile;
+}