render-browser-compat 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright © 2026-PRESENT YieldRay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,98 @@
+# render-browser-compact
+
+Goal of this project is to render MDN [Browser Compatibility Data](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Page_structures/Compatibility_tables) to
+
+- SVG
+- HTML
+- Web Component
+- React Component
+
+with a style similar to the MDN docs page.
+
+## TODO
+
+- [x] mobile view support
+- [ ] support showing sub compat data
+- [x] add a docs site, and can select compat data by ui
+- [x] auto width/height for svg
+- [x] support theming (dark mode)
+- [x] data fetching mode
+- [x] support react
+- [x] support web-component
+
+## Theming Support
+
+This library supports light and dark themes through a prop-based theme system that works across all rendering targets (SVG, HTML, React components, Web components) without requiring hooks or context, making it fully SSR compatible.
+
+```typescript
+interface Theme {
+  iconColor: string; // Color for browser icons and generic icons
+  supportYesColor: string; // Color for "Yes" support indicators
+  supportNoColor: string; // Color for "No" support indicators
+  textColor: string; // Primary text color
+  borderColor: string; // Border color for table elements
+  backgroundColor: string; // Background color
+}
+```
+
+```typescript
+import { lightTheme, darkTheme } from "render-browser-compat/theme";
+```
+
+### Usage Examples
+
+#### React Components
+
+```tsx
+import { RenderBrowserCompat } from 'render-browser-compat/isomorphic';
+import { darkTheme } from 'render-browser-compat/theme';
+
+// With dark theme
+<RenderBrowserCompat paths={['api', 'fetch']} theme={darkTheme} />
+
+// Light theme (default)
+<RenderBrowserCompat paths={['api', 'fetch']} />
+```
+
+#### Web Components
+
+```html
+<!-- Light theme (default) -->
+<browser-compat paths="api.fetch"></browser-compat>
+
+<!-- Dark theme -->
+<browser-compat paths="api.fetch" theme="dark"></browser-compat>
+```
+
+#### SVG Rendering
+
+```typescript
+import { renderSVG } from "render-browser-compat/svg";
+import { darkTheme } from "render-browser-compat/theme";
+
+const svg = await renderSVG(["api", "fetch"], false, darkTheme);
+```
+
+#### HTML Rendering
+
+```typescript
+import { renderHTML } from "render-browser-compat/html";
+import { lightTheme } from "render-browser-compat/theme";
+
+const html = await renderHTML(["api", "fetch"], false, lightTheme);
+```
+
+#### Custom Themes
+
+```typescript
+const customTheme = {
+  iconColor: "#8b5cf6",
+  supportYesColor: "#10b981",
+  supportNoColor: "#ef4444",
+  textColor: "#1f2937",
+  borderColor: "#d1d5db",
+  backgroundColor: "#ffffff",
+};
+
+<RenderBrowserCompat paths={['api', 'fetch']} theme={customTheme} />
+```

package/dist/api-BuHiz06o.js

@@ -0,0 +1,6 @@
+async function c(e) {
+  return await fetch(`https://bcd.developer.mozilla.org/bcd/api/v0/current/${e.join(".")}.json`).then((t) => t.json());
+}
+export {
+  c as f
+};

package/dist/api.d.ts

@@ -0,0 +1,7 @@
+import { Identifier } from '@mdn/browser-compat-data';
+import { Paths } from './core.tsx';
+export declare function fetchBcdApi(paths: Paths): Promise<{
+    browsers: unknown;
+    query: string;
+    data: Identifier;
+}>;

package/dist/components/Chrome.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Chrome(props: React.PropsWithoutRef<React.SVGProps<{}>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Deno.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Deno(props: React.PropsWithoutRef<React.SVGProps<{}>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Desktop.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Desktop(props: React.PropsWithoutRef<React.SVGProps<{}>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Edge.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Edge(props: React.PropsWithoutRef<React.SVGProps<{}>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Experimental.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Experimental(props: React.PropsWithoutRef<React.SVGProps<{}>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Firefox.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Firefox(props: React.PropsWithoutRef<React.SVGProps<{}>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Mobile.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Mobile(props: React.PropsWithoutRef<React.SVGProps<{}>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/No.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function No(props: React.PropsWithoutRef<React.SVGProps<{}>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Node.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Node(props: React.PropsWithoutRef<React.SVGProps<{}>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Nonstandard.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Nonstandard(props: React.PropsWithoutRef<React.SVGProps<{}>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Opera.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Opera(props: React.PropsWithoutRef<React.SVGProps<{}>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Safari.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Safari(props: React.PropsWithoutRef<React.SVGProps<{}>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Samsung.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Samsung(props: React.PropsWithoutRef<React.SVGProps<{}>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Server.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Server(props: React.PropsWithoutRef<React.SVGProps<{}>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Unknown.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Unknown(props: React.PropsWithoutRef<React.SVGProps<{}>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Webview.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Webview(props: React.PropsWithoutRef<React.SVGProps<{}>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Yes.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Yes(props: React.PropsWithoutRef<React.SVGProps<{}>>): import("react/jsx-runtime").JSX.Element;

package/dist/core.d.ts

@@ -0,0 +1,11 @@
+import { CompatStatement, CompatData, Identifier } from '@mdn/browser-compat-data';
+import { default as React } from 'react';
+import { Theme } from './theme.ts';
+export declare function Flex({ children, ...style }: React.PropsWithChildren<React.CSSProperties>): import("react/jsx-runtime").JSX.Element;
+export declare function RenderCompatSupport({ compact, theme, ...props }: {
+    name: string;
+    support: CompatStatement["support"];
+    compact?: boolean;
+    theme?: Theme;
+}): import("react/jsx-runtime").JSX.Element;
+export type Paths = readonly [keyof Omit<CompatData, "__meta" | "browsers">, ...identifiers: Array<keyof Identifier>];

package/dist/html.d.ts

@@ -0,0 +1,10 @@
+import { Paths } from './core.tsx';
+import { Theme } from './theme.ts';
+/**
+ * when we need to render html, we expect it happens on the
+ * client side (prefer svg on the server), so we load bcd
+ * data from online api
+ *
+ * CSS: * { box-sizing: border-box; overflow: hidden; }
+ */
+export declare function renderHTML(paths: Paths, compact?: boolean, theme?: Theme): Promise<string>;

package/dist/html.js

@@ -0,0 +1,12 @@
+import { jsx as p } from "react/jsx-runtime";
+import { renderToStaticMarkup as s } from "react-dom/server";
+import { f as i } from "./api-BuHiz06o.js";
+import { RenderBrowserCompatData as f } from "./isomorphic.js";
+import { defaultTheme as d } from "./theme.js";
+async function M(t, o, r = d) {
+  const e = (await i(t)).data.__compat, m = String(t[t.length - 1]), { support: n, status: a, tags: c } = e;
+  return s(/* @__PURE__ */ p(f, { name: m, support: n, tags: c, status: a, compact: o, theme: r }));
+}
+export {
+  M as renderHTML
+};

package/dist/isomorphic.d.ts

@@ -0,0 +1,23 @@
+import { CompatStatement } from '@mdn/browser-compat-data';
+import { Paths } from './core.tsx';
+import { Theme } from './theme.ts';
+/**
+ * isomorphic, can be used in both browser and server.
+ * however, as it loads all compat data, it is not recommended to use in the browser considering the bundle size.
+ */
+export declare function RenderBrowserCompat({ paths, compact, theme }: {
+    paths: Paths;
+    compact?: boolean;
+    theme?: Theme;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * @internal
+ */
+export declare function RenderBrowserCompatData({ name, support, tags, status, compact, theme }: {
+    name: string;
+    support: CompatStatement["support"];
+    tags: CompatStatement["tags"];
+    status: CompatStatement["status"];
+    compact?: boolean;
+    theme?: Theme;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/isomorphic.js

@@ -0,0 +1,257 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import w from "@mdn/browser-compat-data";
+import { defaultTheme as s } from "./theme.js";
+function b(i) {
+  return /* @__PURE__ */ t("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...i, children: [
+    /* @__PURE__ */ r("mask", { id: "path-1-inside-1_519_18896", fill: "white", children: /* @__PURE__ */ r("rect", { x: "0.38501", width: "16", height: "13", rx: "1" }) }),
+    /* @__PURE__ */ r("rect", { x: "0.38501", width: "16", height: "13", rx: "1", stroke: "currentColor", strokeWidth: "3", mask: "url(#path-1-inside-1_519_18896)" }),
+    /* @__PURE__ */ r("rect", { x: "7.38501", y: "13", width: "1.5", height: "2", fill: "currentColor" }),
+    /* @__PURE__ */ r("path", { d: "M11.135 14.5C11.6873 14.5 12.135 14.9477 12.135 15.5L12.135 16L4.13501 16L4.13501 15.5C4.13501 14.9477 4.58273 14.5 5.13501 14.5L11.135 14.5Z", fill: "currentColor" })
+  ] });
+}
+function v(i) {
+  return /* @__PURE__ */ r("svg", { xmlns: "http://www.w3.org/2000/svg", width: "11", height: "16", viewBox: "0 0 11 16", ...i, children: /* @__PURE__ */ r("path", { fill: "currentColor", d: "M10,0H1A1,1,0,0,0,0,1V15a1,1,0,0,0,1,1h9a1,1,0,0,0,1-1V1A1,1,0,0,0,10,0ZM5.5,15.25a.75.75,0,1,1,.75-.75A.75.75,0,0,1,5.5,15.25ZM9.5141,13H1.5225V1.5069H9.5141Z" }) });
+}
+function m(i) {
+  return /* @__PURE__ */ r("svg", { width: "16", height: "16", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", ...i, children: /* @__PURE__ */ r(
+    "path",
+    {
+      d: "M49.84 5a45 45 0 0140.32 24.7l-37.25-1.95c-10.55-.6-20.59 5.32-24 15.26L15 21.72A45 45 0 0149.85 5zM12.33 25.34l16.93 33.29C34 68 44.12 73.74 54.56 71.78L43 94.43a45 45 0 01-30.67-69.09zM92 33.82a45 45 0 01-44.51 61.11l20.33-31.28c5.78-8.89 5.68-20.49-1.2-28.52zm-42 1A15.17 15.17 0 1134.83 50 15.15 15.15 0 0150 34.83z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function H(i) {
+  return /* @__PURE__ */ r("svg", { width: "16", height: "16", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", ...i, children: /* @__PURE__ */ t("g", { fill: "currentColor", children: [
+    /* @__PURE__ */ r("path", { d: "M60.81 93.78c-11 .58-21.31-7.29-24.1-18.29a25.74 25.74 0 013.36-20.91c.25-.37.41-1 1-.89.44.11.35.65.39 1 1.11 8.36 5.88 14.19 13.12 18 10.3 5.39 20.77 5.12 31.18.13 1-.48 2.12-1.51 3.18-.37s0 2.3-.6 3.28c-5.56 8.52-12.71 15-22.94 17.42-1 .23-2 .4-3 .55-.47.05-1.03.08-1.59.08z" }),
+    /* @__PURE__ */ r("path", { d: "M51.82 42.22c2.29.48-11.15-10.67-27.69-8.16-5.76.87-19 5.86-17.89 23.66C8.23 89.66 34.15 94.33 42.78 95a1 1 0 001.08-.92 1 1 0 00-.3-.8C39 88.87 26.39 81.09 29.22 65.05c2.54-14.49 12.94-24.87 22.6-22.83z" }),
+    /* @__PURE__ */ r("path", { d: "M62.11 62.19c3.76 1.3 9.77 2 18.76-.24h.06a19.87 19.87 0 0012.61-15.47C96.08 29.11 81.44 5.8 55.82 5 20.3 4 10.55 27.14 8.69 32.85a.39.39 0 00.61.43c4.13-3.3 20.86-14.69 41.62-1.64C62.68 41 61.21 50.39 59.09 55.43a5 5 0 002.65 6.62z" })
+  ] }) });
+}
+function y(i) {
+  return /* @__PURE__ */ r("svg", { width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", ...i, children: /* @__PURE__ */ r(
+    "path",
+    {
+      d: "M14.389 3.133a7.96 7.96 0 0 0-.696-.795 6.28 6.28 0 0 0-.636-.584c.129.113.253.231.37.357a4.48 4.48 0 0 1 .976 1.625c.418 1.263.39 2.844-.407 4.085-.95 1.48-2.498 2.21-4.171 2.174a3.38 3.38 0 0 1-.218-.006c-3.003-.18-3.76-3.252-2.198-4.58-.421-.09-1.213.087-1.764.91-.494.737-.467 1.877-.161 2.685A4.316 4.316 0 0 1 5.09 7.74c-.395-2.663 1.398-4.935 3.042-5.497-.887-.773-3.11-.72-4.764.493-.964.708-1.654 1.714-2.017 2.913.053-.673.308-1.678.831-2.704C1.63 3.23.924 4.135.576 4.972.074 6.18-.103 7.624.056 8.998l.037.309A8.01 8.01 0 1 0 14.39 3.133Zm.014.603a4.48 4.48 0 0 0-.976-1.625c-.51-.55-1.146-.97-1.82-1.295A8.109 8.109 0 0 0 9.82.184a7.983 7.983 0 0 0-3.313-.02C5.37.404 4.37.894 3.739 1.508c.474-.288 1.135-.52 1.606-.64 2.186-.55 4.593.046 6.234 1.617.33.315.626.669.866 1.058.98 1.588.887 3.584.123 4.761-.567.875-1.781 1.696-2.914 1.687 1.738.09 3.359-.64 4.342-2.17.798-1.241.825-2.822.407-4.085Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function z(i) {
+  return /* @__PURE__ */ r("svg", { width: "16", height: "16", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", ...i, children: /* @__PURE__ */ r(
+    "path",
+    {
+      d: "M80 16.45a32.35 32.35 0 00-18-5.52c-10.69 0-20.14 5.47-26.77 13.71A40.77 40.77 0 0026.75 49v2.1a40.74 40.74 0 008.43 24.31C41.81 83.6 51.26 89.07 62 89.07a32.39 32.39 0 0018-5.52A44.77 44.77 0 0150 95h-2.16A45 45 0 0150 5h.15A44.92 44.92 0 0180 16.45zM95 50a44.87 44.87 0 01-14.57 33.1 21.39 21.39 0 01-11.15 3.16A22 22 0 0156.48 82c10.19-3.72 17.73-16.62 17.73-32s-7.48-28.28-17.68-32a22.15 22.15 0 0112.76-4.17 21.61 21.61 0 0111.35 3.27A44.87 44.87 0 0195 50z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function C(i) {
+  return /* @__PURE__ */ r("svg", { width: "16", height: "16", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", ...i, children: /* @__PURE__ */ r(
+    "path",
+    {
+      d: "M52.66 49.85a3 3 0 01-2.91 3.21 3.06 3.06 0 11-.25-6.12 3 3 0 013.16 2.91zm.75 2.91L71 23.58C68.63 25.79 46.63 46 46 47.09L28.5 76.22c2.31-2.16 24.36-22.5 24.91-23.46zM85.91 50a35.75 35.75 0 01-5.22 18.63 23.71 23.71 0 00-3-1.75.66.66 0 00-.65.65c0 .65 2.36 1.86 3 2.21a36.11 36.11 0 01-21.45 15.12l-.8-3.37c-.06-.45-.36-.5-.76-.5s-.55.5-.5.75l.81 3.41a35.59 35.59 0 01-7.34.76 36.05 36.05 0 01-18.68-5.28A29 29 0 0033.53 77a.66.66 0 00-.65-.65c-.7 0-2.21 3-2.66 3.62a36.13 36.13 0 01-15.17-21.7l3.47-.75a.66.66 0 00.5-.75c0-.35-.5-.56-.81-.5L14.8 57a35.69 35.69 0 014.77-26 23.79 23.79 0 003.31 2 .63.63 0 00.66-.6c0-.71-2.66-2.06-3.27-2.46A36.18 36.18 0 0142 15l.75 3.37a.66.66 0 00.75.5c.35 0 .56-.5.5-.81l-.75-3.31a37.07 37.07 0 016.75-.66 36 36 0 0119 5.47 19.08 19.08 0 00-2 3.27.62.62 0 00.6.65c.71 0 2.06-2.61 2.41-3.22a35.94 35.94 0 0114.9 21.45l-2.82.6c-.45.1-.5.4-.5.8s.5.56.76.51l2.86-.62a36.83 36.83 0 01.7 7zm4.27 0A40.18 40.18 0 1050 90.18 40.17 40.17 0 0090.18 50zM95 50A45 45 0 1150 5a45 45 0 0145 45z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function Z(i) {
+  return /* @__PURE__ */ r("svg", { width: "16", height: "16", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", ...i, children: /* @__PURE__ */ r(
+    "path",
+    {
+      d: "M 30.839844 5 A 25.93 25.93 0 0 0 5 30.869141 L 5 69.130859 A 25.93 25.93 0 0 0 30.839844 95 L 69.160156 95 A 25.91 25.91 0 0 0 95 69.189453 L 95 30.869141 A 25.93 25.93 0 0 0 69.160156 5 L 30.839844 5 z M 48.619141 20.316406 A 29.66 29.66 0 0 1 79.570312 48.070312 C 84.650312 52.070312 87.290312 56.360938 86.320312 59.960938 C 85.350313 63.560938 80.919688 65.879297 74.429688 66.779297 A 50 50 0 0 1 68.769531 67.230469 A 84 84 0 0 1 46.140625 64.140625 A 82.27 82.27 0 0 1 25.060547 55.269531 L 25 55.279297 A 39 39 0 0 1 20.369141 52.070312 C 15.229141 48.020313 12.659141 43.769922 13.619141 40.169922 C 14.579141 36.569922 19.020859 34.259375 25.380859 33.359375 A 29.66 29.66 0 0 1 48.619141 20.316406 z M 47.804688 24.587891 A 25.5 25.5 0 0 0 24.410156 50 C 29.680156 53.54 37.719063 57.070078 47.039062 59.580078 C 56.666671 62.144115 65.577261 63.174525 72.003906 62.732422 A 25.27 25.27 0 0 0 75.410156 50.199219 L 75.410156 50 A 25.5 25.5 0 0 0 47.804688 24.587891 z M 23.259766 37.140625 C 20.259766 37.850625 18.259375 39.139141 17.859375 40.869141 C 17.459375 42.599141 18.370234 44.659062 20.490234 46.789062 A 30.3 30.3 0 0 1 23.070312 37.589844 L 23.259766 37.140625 z M 79.390625 52.839844 L 79.330078 53.220703 A 26.67 26.67 0 0 1 77.132812 61.882812 C 79.670666 61.112778 81.264168 59.957654 81.710938 58.369141 C 82.160938 56.769141 81.320625 54.829844 79.390625 52.839844 z M 21.369141 57.910156 A 49.51 49.51 0 0 0 27.160156 61.380859 A 25.42 25.42 0 0 0 64 71.279297 C 66.39 71.279297 68.709531 71.279844 70.769531 71.089844 A 29.63 29.63 0 0 1 21.369141 57.910156 z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function O(i) {
+  return /* @__PURE__ */ r("svg", { width: "16", height: "16", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", viewBox: "0 0 100 100", ...i, children: /* @__PURE__ */ r(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M73.013 63.924a4.164 4.164 0 1 1 4.163-4.166 4.17 4.17 0 0 1-4.163 4.166m-46.026 0a4.164 4.164 0 1 1 4.164-4.166 4.17 4.17 0 0 1-4.164 4.166M74.506 38.84l8.322-14.413a1.732 1.732 0 1 0-2.999-1.734L71.403 37.29c-6.444-2.94-13.682-4.578-21.404-4.578-7.722 0-14.958 1.64-21.402 4.578L20.17 22.694a1.731 1.731 0 1 0-3 1.731l8.323 14.416C11.204 46.613 1.43 61.08 0 78.172h100C98.569 61.08 88.795 46.613 74.506 38.841"
+    }
+  ) });
+}
+function f(i) {
+  return /* @__PURE__ */ r("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10.061", height: "7.5908", viewBox: "0 0 10.061 7.5908", ...i, children: /* @__PURE__ */ r("polygon", { points: "3.53 7.591 0 4.061 1.061 3 3.53 5.47 9 0 10.061 1.061 3.53 7.591", fill: "currentColor" }) });
+}
+function P(i) {
+  return /* @__PURE__ */ r("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 16 16", ...i, children: /* @__PURE__ */ r("path", { d: "M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0Zm3.5154,10.2983-1.06,1.0605L8.1567,9.0606l-2.298,2.2982L4.7982,10.2983,7.0961,8,4.7982,5.7021,5.8587,4.6415,8.1567,6.94l2.2982-2.2984,1.06,1.0605L9.2172,8Z", fill: "currentColor" }) });
+}
+function N(i) {
+  return /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", ...i, children: [
+    /* @__PURE__ */ r(
+      "path",
+      {
+        d: "M46.065.026c-.234.024-.984.11-1.66.172-9.617 1.008-19.087 5.079-26.81 11.547-1.426 1.18-4.673 4.427-5.854 5.854C5.346 25.235 1.608 33.806.231 43.952c-.308 2.25-.308 9.85 0 12.1C1.608 66.198 5.346 74.77 11.74 82.406c1.181 1.426 4.428 4.673 5.854 5.853 7.637 6.395 16.209 10.133 26.355 11.51 2.25.308 9.85.308 12.1 0 10.146-1.377 18.718-5.115 26.355-11.51 1.426-1.18 4.673-4.427 5.854-5.853 6.394-7.637 10.133-16.208 11.51-26.354.308-2.25.308-9.85 0-12.1-1.377-10.145-5.116-18.717-11.51-26.353-1.181-1.427-4.428-4.673-5.854-5.854-7.612-6.37-16.27-10.158-26.28-11.498C55.041.1 53.467.038 50.552.013c-2.225-.024-4.255-.012-4.488.013zm.615 5.312c0 1.439.098 4.562.233 7.526.074 1.451.16 3.53.197 4.612.135 3.836.541 13.908.603 14.806l.061.897-.553-.061c-.308-.025-.59-.099-.64-.135-.037-.05-.123-.898-.172-1.894-.221-4.378-.947-21.36-1.02-23.845l-.075-2.73.345-.049c.184-.025.492-.061.688-.074l.333-.012v.96zm11.769-.295c.012.012.049 3.726.086 8.252.049 4.537.11 8.608.147 9.05.037.455.025.849-.037.873-.049.037-.356.037-.664 0l-.565-.049-.086-3.578c-.05-1.98-.111-4.169-.136-4.882-.098-2.177-.184-9.568-.11-9.752.049-.135.184-.148.7-.062.357.074.652.136.665.148zm-28.445 4.12c.073.11.651 6.886 1.365 15.753.233 3.012.467 5.767.504 6.111.061.627.05.652-.344.898-.222.135-.443.246-.492.246-.037 0-.111-.32-.148-.713-.172-1.599-.836-9.322-1.303-14.905-.271-3.283-.517-6.222-.554-6.542-.061-.54-.049-.59.27-.762.394-.21.616-.246.702-.086zm33.856 2.471c.344.123.38.185.455.886.123 1.23.086 7.108-.05 7.108-.356 0-1.094-.418-1.156-.652-.036-.148-.073-1.894-.073-3.874 0-3.996-.05-3.763.824-3.468zm-22.715.578c0 .332.087 2.165.185 4.095.098 1.931.21 4.378.258 5.436.086 2.14.11 2.066-.713 2.115-.406.012-.406.012-.43-.603-.025-.344-.087-1.414-.16-2.398-.062-.983-.21-3.11-.308-4.734a129.358 129.358 0 00-.258-3.579c-.074-.614-.062-.64.27-.762.197-.074.542-.135.763-.135.393-.013.393-.013.393.565zm34.115 1.685l.418.172.086 1.648c.037.898.062 2.84.037 4.304l-.037 2.681-.516-.258-.517-.246-.037-4.083c-.025-2.25-.012-4.156.012-4.242.05-.185.05-.185.554.024zm-22.456 1.611c.074.074.246 6.038.258 9.063l.013 1.82-.579-.086c-.332-.037-.602-.074-.614-.086-.037-.025-.406-9.137-.406-10.022v-.91l.627.073c.357.05.664.111.7.148zm28.322.873c.147.172.172 2.865.209 17.72.037 17.057.037 17.5-.184 17.5a.804.804 0 01-.431-.16c-.184-.135-.209-1.623-.27-16.196-.05-8.83-.111-16.847-.148-17.819l-.074-1.77.357.258c.209.147.443.356.54.467zm-11.031 2.521c.061.05.123.75.135 1.55.061 2.717.074 19.38.012 19.43-.024.024-.246-.038-.492-.136l-.442-.184V18.644l.344.074c.184.049.381.123.443.184zm-33.942.689c.037.332.098 1.082.135 1.697.037.602.123 1.98.197 3.05.147 2.164.123 2.3-.578 2.3-.37 0-.418-.038-.468-.407-.123-.725-.553-6.776-.492-6.874.062-.086.701-.307.997-.332.073-.012.172.246.209.566zm-20.341 3.136c.135 1.303.406 4.033.603 6.062.209 2.03.38 3.75.38 3.825 0 .147-.946.614-1.045.516-.061-.061-1.29-10.945-1.29-11.436 0-.296.946-1.538 1.07-1.402.036.024.159 1.119.282 2.435zm48.22 1.29l.356.21.013 2.656c.012 1.451.037 3.074.037 3.603.024 1.107-.111 1.291-.775 1.058l-.381-.136v-1.057c0-.59-.037-2.3-.086-3.812l-.074-2.73h.283c.147 0 .43.098.627.209zM21.21 28.79c.221 2.361.578 6.346.811 8.854l.419 4.55-.48.48-.467.48-.087-.972c-.049-.541-.295-3.05-.553-5.583-.258-2.533-.627-6.21-.812-8.165l-.344-3.542.48-.443c.43-.406.48-.418.565-.197.05.123.259 2.165.468 4.538zM12 30.277c.27 2.423.983 8.867 1.598 14.314.615 5.448 1.193 10.699 1.304 11.683.098.983.27 2.471.369 3.32.172 1.439.172 1.537-.025 1.685-.295.221-.418.196-.418-.062 0-.11-.11-1.045-.246-2.053a4809.8 4809.8 0 01-1.414-10.945 967.16 967.16 0 01-.738-5.718c-.246-1.857-.602-4.624-.8-6.149a1445.96 1445.96 0 01-.737-5.817c-.222-1.672-.357-3.16-.32-3.32.086-.332.812-1.488.886-1.414.024.037.27 2.041.54 4.476zm-3.764 5.3c.185 1.476.53 4.17.763 6.001.234 1.82.529 4.095.664 5.042l.234 1.722-.259.221c-.147.123-.295.172-.344.123-.05-.049-.147-.54-.221-1.082-.074-.541-.53-3.701-1.021-7.01l-.873-6.025.283-.836c.147-.455.307-.824.344-.824.05 0 .234 1.205.43 2.668zm67.516-1.61c.172.172.197.934.197 6.578v6.383h-.345c-.75 0-.738.184-.787-6.8l-.037-6.358h.394c.209 0 .48.086.578.196zm-26.92 2.2c2.779.419 5.202 1.193 7.6 2.423 1.55.8 2.287 1.353 4.009 3 2.558 2.448 4.132 4.588 5.608 7.613 2.152 4.402 2.988 8.3 4.046 18.753.48 4.685 1.106 13.183 1.242 16.663.037 1.008.123 2.669.197 3.69.135 2.164.295 1.868-1.612 2.79-2.644 1.28-5.19 2.165-8.546 2.99-4.108 1.007-6.764 1.327-10.823 1.34l-2.951.012.025-1.414c0-.775.073-2.583.147-3.997.369-6.85.295-15.495-.184-20.29-.27-2.755-.8-6.1-1.095-6.838-.061-.16.222-.295 1.439-.713 2.226-.775 4.157-1.746 4.452-2.226.529-.91-.418-2.214-1.623-2.214-.21 0-.837.222-1.415.48-2.755 1.267-8.276 2.755-11.461 3.087-2.202.233-5.62.098-7.994-.332-1.291-.234-3.603-1.107-5.534-2.103-2.226-1.156-3.591-2.693-3.997-4.513-.221-.984-.16-2.952.123-4.059.308-1.217 1.168-2.988 1.956-4.02 3.504-4.612 10.735-8.609 18.151-10.01 2.361-.443 5.706-.493 8.24-.111zm37.939.382c.442.184.492.233.492.652.024 3.357-.05 11.03-.111 11.35-.013.11-.652.123-.922.025-.173-.062-.197-.726-.197-6.15 0-3.885.049-6.074.123-6.074.061 0 .344.086.615.197zm5.374 6.751l.443.184-.087 10.183c-.098 12.973-.11 13.355-.578 14.474-.762 1.832-.725 2.2-.651-5.842.024-4.02.086-8.091.11-9.038.025-.947.05-3.616.062-5.94 0-2.803.037-4.205.123-4.205.074 0 .332.086.578.184zm-73.96 3.062c.074.996.05 1.094-.307 1.882l-.393.836-.148-1.23c-.234-1.968-.234-2.054.234-2.349.209-.147.43-.246.467-.221.037.024.11.516.148 1.082zm-7.6 7.415c.111 1.009.972 7.698 1.415 10.982.664 5.079.713 5.804.418 5.497-.037-.037-.32-1.746-.615-3.8-1.919-13.257-1.906-13.17-1.746-13.269.332-.221.442-.098.528.59zm8.855 5.633c.074.307.43 3.64.43 4.045 0 .345-.443.664-.64.468-.06-.062-.22-1.107-.344-2.312-.135-1.218-.27-2.484-.307-2.816l-.074-.615.43.492c.247.27.468.602.505.738zm9.924 4.636c.136.123.222.614.332 1.943.185 2.398.21 2.213-.295 2.213-.516 0-.504.037-.676-2.127-.173-2.202-.173-2.177.16-2.177.16 0 .368.074.48.148zm9.74.184c.025.123.086.86.135 1.636.037.774.148 2.52.246 3.873.345 4.968.357 5.596.148 5.596-.234 0-.258-.185-.529-3.69a260.265 260.265 0 00-.406-5.078c-.11-1.34-.184-2.46-.147-2.484.135-.148.492-.037.553.147zm-23.12 2.361c.074.11.541 4.046 1.12 9.42.171 1.623.344 3.185.38 3.48l.062.529-.308-.197c-.233-.16-.32-.32-.32-.602 0-.775-.528-5.879-.934-9.002-.233-1.77-.418-3.333-.418-3.48 0-.258.295-.357.418-.148zm70.971 5.14l-.086 5.14-.308.456c-.7 1.033-.664 1.23-.627-4.526l.025-5.275.455-.468c.246-.245.492-.455.541-.455.037 0 .037 2.312 0 5.129zM75.58 79.885c.062 7.144.05 7.698-.147 7.92-.123.134-.234.22-.27.184-.087-.099-.21-15.68-.111-15.766.049-.049.172-.073.283-.061.16.037.196.91.245 7.723zM35.415 74.99c.086.763.393 4.415.516 6.137.074 1.156.074 1.193-.197 1.279-.147.049-.32.036-.368-.025-.087-.086-.357-2.816-.69-7.022l-.085-1.008h.381c.357 0 .381.024.443.64zm-9.666 4.304c.086.086.147.394.147.701 0 .32.148 1.98.308 3.702.467 4.71.504 5.35.295 5.226-.32-.184-.603-.467-.541-.54.024-.05-.025-.665-.123-1.366a61.075 61.075 0 01-.246-2.582c-.05-.714-.16-2.017-.258-2.89-.234-2.152-.222-2.398.049-2.398a.58.58 0 01.369.147zm5.817 8.276c.036.271.11 1.28.16 2.239.085 1.844.049 1.98-.456 1.598-.147-.11-.246-.578-.393-1.98-.258-2.533-.27-2.434.209-2.385.357.037.406.086.48.528z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ r("path", { d: "M27.017 42.156c-1.275.58-1.373 2.4-.171 3.044.87.464 1.752.245 2.206-.555.858-1.47-.54-3.173-2.035-2.49zm8.31 1.238c-1.176.761-1.176 2.593 0 3.354 1.165.736 2.673-.232 2.673-1.703 0-1.419-1.544-2.373-2.672-1.65z", fill: "currentColor" })
+  ] });
+}
+function W(i) {
+  return /* @__PURE__ */ r("svg", { width: "16", height: "16", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", ...i, children: /* @__PURE__ */ r("path", { d: "M53.32 5.73a6.72 6.72 0 00-6.08 0l-34 19.2a6.7 6.7 0 00-3.07 5.24v38.89a6.61 6.61 0 003 5.24l34.07 20a6.57 6.57 0 006 0l33.59-19.79a6.72 6.72 0 003-5.24v-39a6.82 6.82 0 00-3-5.24z", fill: "currentColor" }) });
+}
+function $(i) {
+  return /* @__PURE__ */ r("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "12", viewBox: "0 0 16 12", ...i, children: /* @__PURE__ */ t("g", { fill: "currentColor", children: [
+    /* @__PURE__ */ r("path", { d: "M15,0H1A1,1,0,0,0,0,1V2A1,1,0,0,0,1,3H15a1,1,0,0,0,1-1V1A1,1,0,0,0,15,0ZM14,2.25a.75.75,0,1,1,.75-.75A.75.75,0,0,1,14,2.25Z" }),
+    /* @__PURE__ */ r("path", { d: "M15,4.5H1a1,1,0,0,0-1,1v1a1,1,0,0,0,1,1H15a1,1,0,0,0,1-1v-1A1,1,0,0,0,15,4.5ZM14,6.75A.75.75,0,1,1,14.75,6,.75.75,0,0,1,14,6.75Z" }),
+    /* @__PURE__ */ r("path", { d: "M15,9H1a1,1,0,0,0-1,1v1a1,1,0,0,0,1,1H15a1,1,0,0,0,1-1V10A1,1,0,0,0,15,9Zm-1,2.25a.75.75,0,1,1,.75-.75A.75.75,0,0,1,14,11.25Z" })
+  ] }) });
+}
+const p = 50, a = `${p}px`;
+function e({ children: i, ...n }) {
+  return /* @__PURE__ */ r("div", { style: { ...n, display: "flex" }, children: i });
+}
+function g({ support: i, theme: n = s }) {
+  if (Array.isArray(i)) {
+    const o = i[0].version_added;
+    return /* @__PURE__ */ t(e, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "6px", padding: "8px 0 3px", children: [
+      /* @__PURE__ */ r(f, { style: { color: n.iconColor } }),
+      /* @__PURE__ */ r("span", { style: { color: n.supportYesColor }, children: o })
+    ] });
+  }
+  return i?.version_added ? /* @__PURE__ */ t(e, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "6px", padding: "8px 0 3px", children: [
+    /* @__PURE__ */ r(f, { style: { color: n.iconColor } }),
+    /* @__PURE__ */ r("span", { style: { color: n.supportYesColor }, children: i.version_added })
+  ] }) : /* @__PURE__ */ t(e, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "6px", padding: "8px 0 3px", children: [
+    /* @__PURE__ */ r(P, { style: { color: n.supportNoColor } }),
+    /* @__PURE__ */ r("span", { style: { color: n.supportNoColor }, children: "No" })
+  ] });
+}
+function A({ childrenProps: i, theme: n = s, ...o }) {
+  return /* @__PURE__ */ r(e, { ...o, children: Object.entries({
+    Chrome: m,
+    Edge: H,
+    Firefox: y,
+    Opera: z,
+    Safari: C
+  }).map(([d, l]) => /* @__PURE__ */ t(e, { width: a, flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "8px", ...i, children: [
+    /* @__PURE__ */ r(l, { style: { color: n.iconColor } }),
+    /* @__PURE__ */ r("span", { style: { color: n.textColor }, children: d })
+  ] }, d)) });
+}
+function M({ childrenProps: i, theme: n = s, ...o }) {
+  return /* @__PURE__ */ r(e, { ...o, children: Object.entries({
+    "Chrome Android": m,
+    "Firefox Android": y,
+    "Opera Android": z,
+    "Safari IOS": C,
+    "Samsung Internet": Z,
+    "Webview Android": O,
+    "Webview IOS": C
+  }).map(([d, l]) => /* @__PURE__ */ t(e, { width: a, flexDirection: "column", alignItems: "center", justifyContent: "center", ...i, children: [
+    /* @__PURE__ */ r(l, { style: { color: n.iconColor } }),
+    /* @__PURE__ */ r("span", { style: { color: n.textColor }, children: d })
+  ] }, d)) });
+}
+function B({ childrenProps: i, theme: n = s, ...o }) {
+  return /* @__PURE__ */ r(e, { ...o, children: Object.entries({
+    Deno: N,
+    "Node.js": W
+  }).map(([d, l]) => /* @__PURE__ */ t(e, { width: a, flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "8px", ...i, children: [
+    /* @__PURE__ */ r(l, { style: { color: n.iconColor } }),
+    /* @__PURE__ */ r("span", { style: { color: n.textColor }, children: d })
+  ] }, d)) });
+}
+function j({ support: i, childrenProps: n, theme: o = s, ...c }) {
+  return /* @__PURE__ */ r(e, { ...c, children: ["chrome", "edge", "firefox", "opera", "safari"].map((l) => /* @__PURE__ */ r(e, { width: a, justifyContent: "center", ...n, children: /* @__PURE__ */ r(g, { support: i[l], theme: o }) }, l)) });
+}
+function L({ support: i, childrenProps: n, theme: o = s, ...c }) {
+  return /* @__PURE__ */ r(e, { ...c, children: ["chrome_android", "firefox_android", "opera_android", "safari_ios", "samsunginternet_android", "webview_android", "webview_ios"].map((l) => /* @__PURE__ */ r(e, { width: a, justifyContent: "center", ...n, children: /* @__PURE__ */ r(g, { support: i[l], theme: o }) }, l)) });
+}
+function S({ support: i, childrenProps: n, theme: o = s, ...c }) {
+  return /* @__PURE__ */ r(e, { ...c, children: ["deno", "nodejs"].map((l) => /* @__PURE__ */ r(e, { width: a, justifyContent: "center", ...n, children: /* @__PURE__ */ r(g, { support: i[l], theme: o }) }, l)) });
+}
+function T({ name: i, support: n, theme: o = s }) {
+  const c = p * 14 + 100, d = ["deno", "nodejs"].some((l) => l in n);
+  return /* @__PURE__ */ t(e, { flexDirection: "column", textAlign: "center", fontSize: "12px", lineHeight: "85%", width: `${c}px`, background: o.backgroundColor, color: o.textColor, children: [
+    /* @__PURE__ */ t(e, { children: [
+      /* @__PURE__ */ r(e, { width: "100px", border: `1px solid ${o.borderColor}`, borderBottom: "none" }),
+      /* @__PURE__ */ t(e, { width: "100%", children: [
+        /* @__PURE__ */ r(e, { justifyContent: "center", width: `${p * 5}px`, padding: "4px", borderBottom: `1px solid ${o.borderColor}`, borderRight: `1px solid ${o.borderColor}`, borderTop: `1px solid ${o.borderColor}`, children: /* @__PURE__ */ r(b, { style: { color: o.iconColor } }) }),
+        /* @__PURE__ */ r(e, { justifyContent: "center", width: `${p * 7}px`, padding: "4px", borderBottom: `1px solid ${o.borderColor}`, borderRight: `1px solid ${o.borderColor}`, borderTop: `1px solid ${o.borderColor}`, children: /* @__PURE__ */ r(v, { style: { color: o.iconColor } }) }),
+        d && /* @__PURE__ */ r(e, { justifyContent: "center", width: `${p * 2}px`, padding: "4px", borderBottom: `1px solid ${o.borderColor}`, borderRight: `1px solid ${o.borderColor}`, borderTop: `1px solid ${o.borderColor}`, children: /* @__PURE__ */ r($, { style: { color: o.iconColor } }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(e, { color: o.textColor, children: [
+      /* @__PURE__ */ r(e, { width: "100px", border: `1px solid ${o.borderColor}`, borderTop: "none" }),
+      /* @__PURE__ */ t(e, { width: "100%", children: [
+        /* @__PURE__ */ r(A, { borderBottom: `1px solid ${o.borderColor}`, childrenProps: { borderRight: `1px solid ${o.borderColor}` }, theme: o }),
+        /* @__PURE__ */ r(M, { borderBottom: `1px solid ${o.borderColor}`, childrenProps: { borderRight: `1px solid ${o.borderColor}` }, theme: o }),
+        d && /* @__PURE__ */ r(B, { borderBottom: `1px solid ${o.borderColor}`, childrenProps: { borderRight: `1px solid ${o.borderColor}` }, theme: o })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(e, { children: [
+      /* @__PURE__ */ r(e, { width: "100px", border: `1px solid ${o.borderColor}`, borderTop: "none", children: /* @__PURE__ */ r(e, { width: "100px", alignItems: "center", justifyContent: "center", wordBreak: "break-word", padding: "0 2px", color: o.textColor, children: i }) }),
+      /* @__PURE__ */ t(e, { width: "100%", children: [
+        /* @__PURE__ */ r(j, { support: n, borderBottom: `1px solid ${o.borderColor}`, childrenProps: { borderRight: `1px solid ${o.borderColor}` }, theme: o }),
+        /* @__PURE__ */ r(L, { support: n, borderBottom: `1px solid ${o.borderColor}`, childrenProps: { borderRight: `1px solid ${o.borderColor}` }, theme: o }),
+        d && /* @__PURE__ */ r(S, { support: n, borderBottom: `1px solid ${o.borderColor}`, childrenProps: { borderRight: `1px solid ${o.borderColor}` }, theme: o })
+      ] })
+    ] })
+  ] });
+}
+function V({ name: i, support: n, theme: o = s }) {
+  const c = p * 6, d = ["deno", "nodejs"].some((u) => u in n), l = /* @__PURE__ */ t(e, { background: o.backgroundColor, color: o.textColor, children: [
+    /* @__PURE__ */ t(e, { flexDirection: "column", width: `${p * 2}px`, children: [
+      /* @__PURE__ */ r(e, { height: "20px", justifyContent: "center", alignItems: "center", border: `1px solid ${o.borderColor}`, children: /* @__PURE__ */ r(b, { style: { color: o.iconColor } }) }),
+      /* @__PURE__ */ t(e, { children: [
+        /* @__PURE__ */ r(A, { flexDirection: "column", borderLeft: `1px solid ${o.borderColor}`, borderRight: `1px solid ${o.borderColor}`, childrenProps: { borderBottom: `1px solid ${o.borderColor}`, height: "35px" }, theme: o }),
+        /* @__PURE__ */ r(j, { support: n, flexDirection: "column", borderRight: `1px solid ${o.borderColor}`, childrenProps: { borderBottom: `1px solid ${o.borderColor}`, height: "35px" }, theme: o })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(e, { flexDirection: "column", width: `${p * 2}px`, children: [
+      /* @__PURE__ */ r(e, { height: "20px", justifyContent: "center", alignItems: "center", border: `1px solid ${o.borderColor}`, children: /* @__PURE__ */ r(v, { style: { color: o.iconColor } }) }),
+      /* @__PURE__ */ t(e, { children: [
+        /* @__PURE__ */ r(M, { flexDirection: "column", borderLeft: `1px solid ${o.borderColor}`, borderRight: `1px solid ${o.borderColor}`, childrenProps: { borderBottom: `1px solid ${o.borderColor}`, height: "35px" }, theme: o }),
+        /* @__PURE__ */ r(L, { support: n, flexDirection: "column", borderRight: `1px solid ${o.borderColor}`, childrenProps: { borderBottom: `1px solid ${o.borderColor}`, height: "35px" }, theme: o })
+      ] })
+    ] }),
+    d && /* @__PURE__ */ t(e, { flexDirection: "column", width: `${p * 2}px`, children: [
+      /* @__PURE__ */ r(e, { height: "20px", justifyContent: "center", alignItems: "center", border: `1px solid ${o.borderColor}`, children: /* @__PURE__ */ r($, { style: { color: o.iconColor } }) }),
+      /* @__PURE__ */ t(e, { children: [
+        /* @__PURE__ */ r(B, { flexDirection: "column", borderLeft: `1px solid ${o.borderColor}`, borderRight: `1px solid ${o.borderColor}`, childrenProps: { borderBottom: `1px solid ${o.borderColor}`, height: "35px" }, theme: o }),
+        /* @__PURE__ */ r(S, { support: n, flexDirection: "column", borderRight: `1px solid ${o.borderColor}`, childrenProps: { borderBottom: `1px solid ${o.borderColor}`, height: "35px" }, theme: o })
+      ] })
+    ] })
+  ] });
+  return /* @__PURE__ */ t(e, { width: `${c}px`, textAlign: "center", fontSize: "12px", lineHeight: "85%", flexDirection: "column", children: [
+    /* @__PURE__ */ r(e, { justifyContent: "center", padding: "4px", color: o.textColor, children: i }),
+    l
+  ] });
+}
+function E({ compact: i, theme: n = s, ...o }) {
+  return i ? /* @__PURE__ */ r(V, { ...o, theme: n }) : /* @__PURE__ */ r(T, { ...o, theme: n });
+}
+function X({ paths: i, compact: n, theme: o = s }) {
+  const [c, ...d] = i, l = new Set(Object.keys(w));
+  if (l.delete("__meta"), l.delete("browsers"), !l.has(c))
+    return /* @__PURE__ */ r("span", { children: `Error: ${c} is not in ${JSON.stringify(l)}` });
+  const u = w[c];
+  if (d.length === 0)
+    return /* @__PURE__ */ r("span", { children: `Error: ${JSON.stringify(d)} is empty` });
+  let h = u;
+  for (const x of d) {
+    if (x === "__compat" || !(x in h))
+      return /* @__PURE__ */ r("span", { children: `Error: ${x} is not in ${JSON.stringify(Object.keys(h))}` });
+    h = h[x];
+  }
+  const D = String(i[i.length - 1]), k = h.__compat, { support: _, status: R, tags: I } = k;
+  return /* @__PURE__ */ r(J, { name: D, support: _, tags: I, status: R, compact: n, theme: o });
+}
+function J({ name: i, support: n, tags: o, status: c, compact: d, theme: l = s }) {
+  return /* @__PURE__ */ t(e, { flexDirection: "column", padding: "0px", children: [
+    /* @__PURE__ */ r(E, { name: i, support: n, compact: d, theme: l }),
+    /* @__PURE__ */ t(e, { width: d ? "320px" : "800px", flexDirection: d ? "column" : "row", alignItems: d ? "flex-start" : "center", justifyContent: "space-between", fontSize: "11px", wordBreak: "break-all", background: l.backgroundColor, color: l.textColor, children: [
+      /* @__PURE__ */ r("span", { style: { lineHeight: "85%", color: l.textColor }, children: o?.join(", ") }),
+      /* @__PURE__ */ r("span", { style: { lineHeight: "85%", color: l.textColor }, children: JSON.stringify(c) })
+    ] })
+  ] });
+}
+export {
+  X as RenderBrowserCompat,
+  J as RenderBrowserCompatData
+};

package/dist/react-dom.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { Paths } from './core.tsx';
+import { Theme } from './theme.ts';
+/**
+ * @example
+ * <RenderBrowserCompatClient
+ *  paths={['api', 'AbortController']}
+ *  fallback={<>Loading...</>}
+ * />
+ */
+export declare function RenderBrowserCompatClient({ paths, compact, fallback, theme }: {
+    paths: Paths;
+    compact?: boolean;
+    fallback: React.ReactNode;
+    theme?: Theme;
+}): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+/**
+ * @example
+ * <React.Suspense fallback={<Loading />}>
+ *  <RenderBrowserCompat paths={['api', 'AbortController']} />
+ * </React.Suspense>
+ */
+export declare function RenderBrowserCompat({ paths, compact, theme }: {
+    paths: Paths;
+    compact?: boolean;
+    theme?: Theme;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react-dom.js

@@ -0,0 +1,21 @@
+import { jsx as p } from "react/jsx-runtime";
+import c from "react";
+import { f } from "./api-BuHiz06o.js";
+import { RenderBrowserCompatData as u } from "./isomorphic.js";
+import { defaultTheme as i } from "./theme.js";
+function S({ paths: t, compact: e, fallback: r, theme: n = i }) {
+  const [o, m] = c.useState();
+  if (c.useEffect(() => {
+    f(t).then(m);
+  }, [t]), !o) return r;
+  const a = o.data.__compat, s = String(t[t.length - 1]), { support: d, status: g, tags: C } = a;
+  return /* @__PURE__ */ p(u, { name: s, support: d, tags: C, status: g, compact: e, theme: n });
+}
+function x({ paths: t, compact: e, theme: r = i }) {
+  const n = c.use(f(t)).data.__compat, o = String(t[t.length - 1]), { support: m, status: a, tags: s } = n;
+  return /* @__PURE__ */ p(u, { name: o, support: m, tags: s, status: a, compact: e, theme: r });
+}
+export {
+  x as RenderBrowserCompat,
+  S as RenderBrowserCompatClient
+};

package/dist/react-server.d.ts

@@ -0,0 +1,7 @@
+import { Paths } from './core.tsx';
+import { Theme } from './theme.ts';
+export declare function RenderBrowserCompat({ paths, compact, theme }: {
+    paths: Paths;
+    compact?: boolean;
+    theme?: Theme;
+}): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/react-server.js

@@ -0,0 +1,11 @@
+import { jsx as s } from "react/jsx-runtime";
+import { f as c } from "./api-BuHiz06o.js";
+import { RenderBrowserCompatData as f } from "./isomorphic.js";
+import { defaultTheme as i } from "./theme.js";
+async function B({ paths: t, compact: o, theme: r = i }) {
+  const a = (await c(t)).data.__compat, e = String(t[t.length - 1]), { support: m, status: n, tags: p } = a;
+  return /* @__PURE__ */ s(f, { name: e, support: m, tags: p, status: n, compact: o, theme: r });
+}
+export {
+  B as RenderBrowserCompat
+};

package/dist/svg.d.ts

@@ -0,0 +1,9 @@
+import { Paths } from './core.tsx';
+import { Theme } from './theme.ts';
+/**
+ * When we need to render SVG, this normally only happens on the
+ * server side, so in this version we import the whole bcd data
+ *
+ * { headers: { "content-type": "image/svg+xml" } }
+ */
+export declare function renderSVG(paths: Paths, compact?: boolean, theme?: Theme): Promise<string>;

package/dist/svg.js

@@ -0,0 +1,31 @@
+import { jsx as s } from "react/jsx-runtime";
+import n from "satori";
+import { RenderBrowserCompat as f } from "./isomorphic.js";
+import { defaultTheme as i } from "./theme.js";
+async function m(e, t) {
+  const o = new URL("https://fonts.googleapis.com/css2");
+  o.searchParams.set("family", e);
+  const a = (await fetch(o).then((r) => r.text())).match(/src: url\((.+)\) format\('(opentype|truetype)'\)/)?.[1];
+  if (a) {
+    const r = await fetch(a);
+    if (r.ok)
+      return await r.arrayBuffer();
+  }
+  throw new Error("failed to load font data");
+}
+async function d(e, t, o = i) {
+  return n(/* @__PURE__ */ s(f, { paths: e, compact: t, theme: o }), {
+    width: t ? 260 : 800,
+    height: t ? 800 : 150,
+    fonts: [
+      {
+        name: "Roboto",
+        data: await m("Roboto"),
+        style: "normal"
+      }
+    ]
+  });
+}
+export {
+  d as renderSVG
+};

package/dist/theme.d.ts

@@ -0,0 +1,17 @@
+export interface Theme {
+    /** Color for browser icons and generic icons */
+    iconColor: string;
+    /** Color for "Yes" support indicators */
+    supportYesColor: string;
+    /** Color for "No" support indicators */
+    supportNoColor: string;
+    /** Primary text color */
+    textColor: string;
+    /** Border color for table elements */
+    borderColor: string;
+    /** Background color (mainly for potential future use) */
+    backgroundColor: string;
+}
+export declare const lightTheme: Theme;
+export declare const darkTheme: Theme;
+export declare const defaultTheme: Theme;

package/dist/theme.js

@@ -0,0 +1,20 @@
+const o = {
+  iconColor: "#696969",
+  supportYesColor: "#007936",
+  supportNoColor: "#d30038",
+  textColor: "#1b1b1b",
+  borderColor: "#cdcdcd",
+  backgroundColor: "#ffffff"
+}, r = {
+  iconColor: "#a0a0a0",
+  supportYesColor: "#4ade80",
+  supportNoColor: "#f87171",
+  textColor: "#e5e5e5",
+  borderColor: "#404040",
+  backgroundColor: "#1f1f1f"
+}, e = o;
+export {
+  r as darkTheme,
+  e as defaultTheme,
+  o as lightTheme
+};

package/dist/web-component.d.ts

@@ -0,0 +1,8 @@
+export declare class BrowserCompat extends HTMLElement {
+    constructor();
+    static get observedAttributes(): string[];
+    private _rerender;
+    connectedCallback(): void;
+    attributeChangedCallback(_name: string, _oldValue: string, _newValue: string): void;
+}
+export declare function init(name?: string): Promise<CustomElementConstructor>;

package/dist/web-component.js

@@ -0,0 +1,42 @@
+import { renderHTML as a } from "./html.js";
+import { defaultTheme as i, darkTheme as h } from "./theme.js";
+class c extends HTMLElement {
+  constructor() {
+    super();
+    const t = this.attachShadow({ mode: "open" }), e = new CSSStyleSheet();
+    e.replace(
+      /*css*/
+      "* { box-sizing: border-box; overflow: hidden; }"
+    ), t.adoptedStyleSheets = [e];
+  }
+  static get observedAttributes() {
+    return ["paths", "compact", "theme"];
+  }
+  async _rerender() {
+    const t = this.getAttribute("paths");
+    if (!t) return;
+    const e = this.hasAttribute("compact"), s = this.getAttribute("theme");
+    let o = i;
+    s === "dark" ? o = h : s === "light" && (o = i);
+    try {
+      this.setAttribute("state", "loading");
+      const n = await a(t.split("."), e, o);
+      this.shadowRoot.innerHTML = n, this.setAttribute("state", "ok");
+    } catch {
+      this.setAttribute("state", "error");
+    }
+  }
+  connectedCallback() {
+    this._rerender();
+  }
+  attributeChangedCallback(t, e, s) {
+    this._rerender();
+  }
+}
+function m(r = "browser-compat") {
+  return window.customElements.define(r, c), window.customElements.whenDefined(r);
+}
+export {
+  c as BrowserCompat,
+  m as init
+};

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "render-browser-compat",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "mprocs",
+    "build": "vite build",
+    "build:deno": "vite build -c vite.deno.ts",
+    "docs:dev": "vite -c vite.docs.ts",
+    "docs:build": "vite build -c vite.docs.ts",
+    "format": "prettier --write ."
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/isomorphic.js",
+  "types": "./dist/isomorphic.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/isomorphic.d.ts",
+      "import": "./dist/isomorphic.js"
+    },
+    "./isomorphic": {
+      "types": "./dist/isomorphic.d.ts",
+      "import": "./dist/isomorphic.js"
+    },
+    "./react-dom": {
+      "types": "./dist/react-dom.d.ts",
+      "import": "./dist/react-dom.js"
+    },
+    "./web-component": {
+      "types": "./dist/web-component.d.ts",
+      "import": "./dist/web-component.js"
+    },
+    "./svg": {
+      "types": "./dist/svg.d.ts",
+      "import": "./dist/svg.js"
+    },
+    "./html": {
+      "types": "./dist/html.d.ts",
+      "import": "./dist/html.js"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@mdn/browser-compat-data": "^7",
+    "react": "^19.2.4"
+  },
+  "optionalDependencies": {
+    "react-dom": "^19.2.4",
+    "satori": "^0.25.0"
+  },
+  "devDependencies": {
+    "@hono/node-server": "^1.19.12",
+    "@types/node": "^25.5.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.2.0",
+    "highlight.js": "^11.11.1",
+    "prettier": "^3.8.1",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-tsconfig-paths": "^6.1.1"
+  },
+  "packageManager": "pnpm@10.33.0",
+  "author": "YieldRay",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/YieldRay/render-browser-compact.git"
+  },
+  "bugs": {
+    "url": "https://github.com/YieldRay/render-browser-compact/issues"
+  },
+  "homepage": "https://github.com/YieldRay/render-browser-compact#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  }
+}