react-native-bundle-discovery-ui 2.8.0 → 2.9.0

package/dist/client/queryHelpers.js

@@ -1,4 +1,36 @@
 //#region src/client/queryHelpers.ts
+const HIGH_SEVERITY_SHARE = 0.01;
+const TOP_LIST_SIZE = 8;
+const isNodeModule = (m) => m.path.includes("node_modules/");
+const moduleSize = (m) => m.output.sizeInBytes;
+function toListModule(m) {
+  return {
+    ext: helpers.getFileExtension(m.path),
+    name: m.path,
+    size: helpers.formatBytes(moduleSize(m)),
+    sizeInBytes: moduleSize(m),
+    isEntry: !!m.isEntry,
+  };
+}
+function stripVersion(id) {
+  const at = id.lastIndexOf("@");
+  return at > 0 ? id.slice(0, at) : id;
+}
+function getFindingPackageNames(packages) {
+  if (!packages) return [];
+  if (typeof packages === "string")
+    return [packages.split(/ x\d+:/)[0].trim()].filter(Boolean);
+  return Array.from(new Set(packages.map(stripVersion)));
+}
+const modulesByAbsolutePath = /* @__PURE__ */ new WeakMap();
+function getModulesByAbsolutePath(report) {
+  let map = modulesByAbsolutePath.get(report);
+  if (!map) {
+    map = new Map(report.modules.map((m) => [m.absolutePath, m]));
+    modulesByAbsolutePath.set(report, map);
+  }
+  return map;
+}
 const helpers = {
   prettifyMap: /* @__PURE__ */ new Map(),
   prettifyJS(sourceStr) {
@@ -20,16 +52,6 @@ const helpers = {
         return sourceStr;
       });
   },
-  askChatGPTAboutPackages() {
-    return `https://chat.openai.com/?prompt=${encodeURIComponent(`I have a list of JavaScript packages from my React Native bundle (see below). I want to optimize bundle size by identifying similar or redundant packages — such as multiple versions of similar libraries (e.g., lodash, lodash-es, underscore, etc.), duplicate utilities, or overlapping functionality (e.g., date libraries like moment, dayjs, date-fns).
-
-Please do the following:
-
-1. Group similar or overlapping packages together.
-2. For each group, suggest which one to keep and which ones to consider removing.
-3. For each group, provide a regex string that can be used to filter those packages from the list (e.g., in grep, find, or search tools).
-4. Keep the output concise and copy-paste friendly.`)}`;
-  },
   plural(count, [singular, plural]) {
     return count === 1 ? singular : plural;
   },
@@ -79,6 +101,7 @@ Please do the following:
     const result = [];
     let entryPointPath = null;
     const data = [];
+    const nodes = [];
     while (queue.length > 0) {
       const { module: currentModule, parentId, level } = queue.shift();
       if (level >= Number(maxParentDepth)) break;
@@ -87,6 +110,15 @@ Please do the following:
         if (visited.has(id)) continue;
         visited.add(id);
       }
+      nodes.push({
+        id,
+        size: currentModule.output.sizeInBytes,
+        level,
+        isCurrent: level === 0,
+        isRoot:
+          !!currentModule.isEntry || currentModule.dependents.length === 0,
+        isNodeModule: id.includes("node_modules/"),
+      });
       if (parentId) {
         const isEntryPoint = currentModule.dependents.length === 0;
         result.push({
@@ -112,9 +144,15 @@ Please do the following:
           break;
         }
     }
+    const links = data.map(([parentId, id]) => ({
+      source: id,
+      target: parentId,
+    }));
     return {
       entryPointPath,
       data,
+      nodes,
+      links,
     };
   },
   getExtColor(extName) {
@@ -163,6 +201,387 @@ Please do the following:
       i = Math.floor(Math.log(bytes) / Math.log(k));
     return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
   },
+  moduleOverview(report, id) {
+    const module = report.modules.find((m) => m.path === id);
+    if (!module) return null;
+    const size = (m) => m.output.sizeInBytes;
+    const totalSize = report.modules.reduce((acc, m) => acc + size(m), 0);
+    const largest = report.modules.reduce(
+      (acc, m) => Math.max(acc, size(m)),
+      0,
+    );
+    const rank =
+      report.modules.filter((m) => size(m) > size(module)).length + 1;
+    const byAbsolutePath = new Map(
+      report.modules.map((m) => [m.absolutePath, m]),
+    );
+    const slash = module.path.lastIndexOf("/");
+    const toModule = (m) => ({
+      ext: helpers.getFileExtension(m.path),
+      name: m.path,
+      size: helpers.formatBytes(size(m)),
+      sizeInBytes: size(m),
+      isEntry: m.isEntry,
+    });
+    let pkg = null;
+    if (module.path.includes("node_modules/")) {
+      const name = helpers.getModulesName(module.path);
+      const marker = `node_modules/${name}/`;
+      const path = module.path.slice(
+        0,
+        module.path.lastIndexOf(marker) + marker.length - 1,
+      );
+      const info = report.packages.find((p) => p.path === path);
+      const files = report.modules.filter((m) => m.path.startsWith(`${path}/`));
+      const pkgSize = files.reduce((acc, m) => acc + size(m), 0);
+      pkg = {
+        name,
+        path,
+        version: info?.version,
+        metadata: info?.metadata,
+        size: pkgSize,
+        files: files.length,
+        share: pkgSize ? size(module) / pkgSize : 0,
+      };
+    }
+    const imports = module.dependencies
+      .map((d) => {
+        const m = byAbsolutePath.get(d.absolutePath);
+        return m
+          ? {
+              specifier: d.name,
+              ...toModule(m),
+              missing: false,
+            }
+          : {
+              specifier: d.name,
+              ext: helpers.getFileExtension(d.path),
+              name: d.path,
+              size: "",
+              sizeInBytes: -1,
+              isEntry: false,
+              missing: true,
+            };
+      })
+      .sort((a, b) => b.sizeInBytes - a.sizeInBytes);
+    const importerPackages = new Set(
+      module.dependents.map((m) =>
+        m.path.includes("node_modules/") ? helpers.getModulesName(m.path) : "",
+      ),
+    );
+    return {
+      path: module.path,
+      dir: module.path.slice(0, slash + 1),
+      file: module.path.slice(slash + 1),
+      ext: helpers.getFileExtension(module.path),
+      isEntry: !!module.isEntry,
+      injectedBy:
+        module.path === "__runtime__"
+          ? "Webpack/Rspack"
+          : module.path === "__prelude__" ||
+              module.path.includes("@react-native/js-polyfills") ||
+              module.path.includes("metro-runtime")
+            ? "Metro"
+            : null,
+      outputSize: size(module),
+      sourceSize: module.source.sizeInBytes,
+      outputLines: module.output.lineCount,
+      sourceLines: module.source.lineCount,
+      totalSize,
+      bundleShare: totalSize ? size(module) / totalSize : 0,
+      largestShare: largest ? size(module) / largest : 0,
+      rank,
+      modulesCount: report.modules.length,
+      pkg,
+      imports,
+      missingImports: imports.filter((i) => i.missing).length,
+      importedBy: module.dependents.length,
+      importerPackages: importerPackages.size,
+      importedByOwnCode: importerPackages.has(""),
+      duplicates: module.duplicates.length,
+      duplicatesSize: module.duplicates.reduce((acc, m) => acc + size(m), 0),
+    };
+  },
+  reportSummary(report) {
+    let totalSize = 0;
+    let nodeModulesSize = 0;
+    for (const m of report.modules) {
+      totalSize += moduleSize(m);
+      if (isNodeModule(m)) nodeModulesSize += moduleSize(m);
+    }
+    const options = report.transformOptions;
+    return {
+      platform: options?.platform ?? null,
+      dev: typeof options?.dev === "boolean" ? options.dev : null,
+      minify: typeof options?.minify === "boolean" ? options.minify : null,
+      totalSize,
+      sourceSize: totalSize - nodeModulesSize,
+      nodeModulesSize,
+      date: report.date ?? null,
+    };
+  },
+  bundleInsights(report) {
+    const totalSize = report.modules.reduce((acc, m) => acc + moduleSize(m), 0);
+    const share = (bytes) => (totalSize ? bytes / totalSize : 0);
+    const modulesByPath = new Map(report.modules.map((m) => [m.path, m]));
+    const packages = /* @__PURE__ */ new Map();
+    let nodeModulesSize = 0;
+    const ownModules = [];
+    for (const m of report.modules) {
+      if (!isNodeModule(m)) {
+        ownModules.push(m);
+        continue;
+      }
+      nodeModulesSize += moduleSize(m);
+      const name = helpers.getModulesName(m.path);
+      const marker = `node_modules/${name}/`;
+      const pkg = packages.get(name) ?? {
+        size: 0,
+        copies: /* @__PURE__ */ new Set(),
+      };
+      pkg.size += moduleSize(m);
+      pkg.copies.add(m.path.slice(0, m.path.lastIndexOf(marker)));
+      packages.set(name, pkg);
+    }
+    const sourceSize = totalSize - nodeModulesSize;
+    const largestPackage = Math.max(
+      0,
+      ...[...packages.values()].map((p) => p.size),
+    );
+    const largestOwnModule = Math.max(0, ...ownModules.map(moduleSize));
+    const countedModules = /* @__PURE__ */ new Set();
+    let potentialSavings = 0;
+    const findings = (report.recommendations ?? [])
+      .map((finding) => {
+        const savings = finding.sizeInBytes ?? 0;
+        const affected = (finding.modules ?? [])
+          .map((path) => modulesByPath.get(path))
+          .filter((m) => !!m)
+          .sort((a, b) => moduleSize(b) - moduleSize(a));
+        const severity =
+          savings && share(savings) >= HIGH_SEVERITY_SHARE
+            ? "high"
+            : savings
+              ? "medium"
+              : "low";
+        return {
+          ...finding,
+          severity,
+          savings,
+          savingsShare: share(savings),
+          packageNames: getFindingPackageNames(finding.packages),
+          packagesText:
+            typeof finding.packages === "string" ? finding.packages : null,
+          docsUrls: [finding.docsUrl ?? []].flat(),
+          affected: affected.map(toListModule),
+          affectedSize: affected.reduce((acc, m) => acc + moduleSize(m), 0),
+        };
+      })
+      .sort((a, b) => b.savings - a.savings);
+    for (const finding of findings) {
+      if (!finding.savings) continue;
+      const overlap = finding.affected
+        .filter((m) => countedModules.has(m.name))
+        .reduce((acc, m) => acc + m.sizeInBytes, 0);
+      potentialSavings += Math.max(finding.savings - overlap, 0);
+      for (const m of finding.affected) countedModules.add(m.name);
+    }
+    const duplicatePackages = [...packages.values()].filter(
+      (p) => p.copies.size > 1,
+    ).length;
+    return {
+      platform: report.transformOptions?.platform,
+      isDev: report.transformOptions?.dev !== false,
+      hasRecommendations: report.recommendations !== null,
+      totalSize,
+      modulesCount: report.modules.length,
+      sourceSize,
+      sourceShare: share(sourceSize),
+      ownModulesCount: ownModules.length,
+      nodeModulesSize,
+      nodeModulesShare: share(nodeModulesSize),
+      packagesCount: packages.size,
+      duplicatePackages,
+      duplicateModules: report.modules.filter((m) => m.duplicates.length)
+        .length,
+      potentialSavings,
+      potentialSavingsShare: share(potentialSavings),
+      findings,
+      findingsWithSavings: findings.filter((f) => f.savings).length,
+      topPackages: [...packages.entries()]
+        .sort((a, b) => b[1].size - a[1].size)
+        .slice(0, TOP_LIST_SIZE)
+        .map(([name, pkg]) => ({
+          name,
+          size: pkg.size,
+          share: share(pkg.size),
+          bar: largestPackage ? pkg.size / largestPackage : 0,
+          copies: pkg.copies.size,
+        })),
+      topPackagesShare: share(
+        [...packages.values()]
+          .map((p) => p.size)
+          .sort((a, b) => b - a)
+          .slice(0, 5)
+          .reduce((acc, size) => acc + size, 0),
+      ),
+      topOwnModules: [...ownModules]
+        .sort((a, b) => moduleSize(b) - moduleSize(a))
+        .slice(0, TOP_LIST_SIZE)
+        .map((m) => ({
+          name: m.path,
+          size: moduleSize(m),
+          share: share(moduleSize(m)),
+          bar: largestOwnModule ? moduleSize(m) / largestOwnModule : 0,
+        })),
+    };
+  },
+  packageOverview(report, name) {
+    const isOwn = (m) =>
+      isNodeModule(m) && helpers.getModulesName(m.path) === name;
+    const files = report.modules.filter(isOwn);
+    if (files.length === 0) return null;
+    const marker = `node_modules/${name}/`;
+    const instancePath = (m) =>
+      m.path.slice(0, m.path.lastIndexOf(marker) + marker.length - 1);
+    const instances = /* @__PURE__ */ new Map();
+    for (const m of files) {
+      const path = instancePath(m);
+      instances.set(path, [...(instances.get(path) ?? []), m]);
+    }
+    const totalSize = report.modules.reduce((acc, m) => acc + moduleSize(m), 0);
+    const size = files.reduce((acc, m) => acc + moduleSize(m), 0);
+    const packageSizes = /* @__PURE__ */ new Map();
+    for (const m of report.modules) {
+      if (!isNodeModule(m)) continue;
+      const pkgName = helpers.getModulesName(m.path);
+      packageSizes.set(
+        pkgName,
+        (packageSizes.get(pkgName) ?? 0) + moduleSize(m),
+      );
+    }
+    const largestPackage = Math.max(...packageSizes.values());
+    const rank = [...packageSizes.values()].filter((s) => s > size).length + 1;
+    const copies = [...instances.entries()]
+      .map(([path, modules]) => {
+        const info = report.packages.find((p) => p.path === path);
+        return {
+          path,
+          version: info?.version,
+          metadata: info?.metadata ?? null,
+          size: modules.reduce((acc, m) => acc + moduleSize(m), 0),
+          files: modules.length,
+        };
+      })
+      .sort((a, b) => b.size - a.size);
+    const fileSet = new Set(files);
+    const importers = /* @__PURE__ */ new Map();
+    for (const m of files)
+      for (const dependent of m.dependents) {
+        if (fileSet.has(dependent)) continue;
+        importers.set(
+          dependent,
+          (importers.get(dependent) ?? /* @__PURE__ */ new Set()).add(m),
+        );
+      }
+    const importerPackages = new Set(
+      [...importers.keys()].map((m) =>
+        isNodeModule(m) ? helpers.getModulesName(m.path) : "",
+      ),
+    );
+    const largestFile = files.reduce((a, b) =>
+      moduleSize(b) > moduleSize(a) ? b : a,
+    );
+    const withMetadata = copies.find((c) => c.metadata)?.metadata ?? null;
+    const findings = (report.recommendations ?? []).filter((f) =>
+      getFindingPackageNames(f.packages).includes(name),
+    );
+    return {
+      name,
+      paths: copies.map((c) => c.path),
+      versions: Array.from(
+        new Set(copies.map((c) => c.version).filter(Boolean)),
+      ),
+      size,
+      bundleShare: totalSize ? size / totalSize : 0,
+      largestShare: largestPackage ? size / largestPackage : 0,
+      rank,
+      packagesCount: packageSizes.size,
+      filesCount: files.length,
+      largestFile: largestFile.path,
+      largestFileSize: moduleSize(largestFile),
+      copies,
+      copiesSavings: size - copies[0].size,
+      deprecated: copies.filter((c) => c.metadata?.deprecated),
+      latestVersion: withMetadata?.latestVersion ?? null,
+      isOutdated: copies.some((c) => c.metadata && !c.metadata.isLatest),
+      publishedAt: withMetadata?.createdAt ?? null,
+      importedBy: importers.size,
+      importerPackages:
+        importerPackages.size - (importerPackages.has("") ? 1 : 0),
+      importedByOwnCode: importerPackages.has(""),
+      importers: [...importers.entries()]
+        .map(([m, imported]) => ({
+          ...toListModule(m),
+          imports: [...imported].map(toListModule),
+        }))
+        .sort((a, b) => b.sizeInBytes - a.sizeInBytes),
+      findings: findings.map((f) => ({
+        id: f.id,
+        title: f.title,
+      })),
+    };
+  },
+  importChain(report, pkgName) {
+    const isTarget = (m) =>
+      isNodeModule(m) && helpers.getModulesName(m.path) === pkgName;
+    const byAbsolutePath = getModulesByAbsolutePath(report);
+    const search = (starts) => {
+      const prev = /* @__PURE__ */ new Map();
+      const queue = [...starts];
+      for (const start of starts) prev.set(start, null);
+      while (queue.length) {
+        const current = queue.shift();
+        if (isTarget(current)) {
+          const chain = [];
+          for (let m = current; m; m = prev.get(m) ?? null) chain.unshift(m);
+          return chain;
+        }
+        for (const dependency of current.dependencies) {
+          const next = byAbsolutePath.get(dependency.absolutePath);
+          if (next && !prev.has(next)) {
+            prev.set(next, current);
+            queue.push(next);
+          }
+        }
+      }
+      return null;
+    };
+    let chain = search(report.modules.filter((m) => m.isEntry));
+    let fromEntry = true;
+    if (!chain) {
+      chain = search(report.modules.filter((m) => m.dependents.length === 0));
+      fromEntry = false;
+    }
+    if (!chain) return null;
+    return {
+      fromEntry,
+      steps: chain.map((m, index) => {
+        const pkg = isNodeModule(m) ? helpers.getModulesName(m.path) : null;
+        const prevModule = chain[index - 1];
+        const prevPkg =
+          prevModule && isNodeModule(prevModule)
+            ? helpers.getModulesName(prevModule.path)
+            : null;
+        return {
+          ...toListModule(m),
+          pkg,
+          entersPackage: index > 0 && pkg !== prevPkg ? pkg : null,
+          isTarget: index === chain.length - 1,
+        };
+      }),
+    };
+  },
   isPackageImport(moduleName) {
     return moduleName?.[0] !== ".";
   },
@@ -175,7 +594,7 @@ Please do the following:
       children: {},
       size: 0,
     };
-    files.forEach(({ path, size }) => {
+    files.forEach(({ path, size, issues }) => {
       if (path === "__prelude__") path = "node_modules/__prelude__";
       if (path === "__runtime__") path = "node_modules/__runtime__";
       const shortPath = path.replace(`${rootFolder}/`, "");
@@ -192,79 +611,26 @@ Please do the following:
           current[part].size = size;
           current[part].path = shortPath;
           current[part].fullPath = path;
+          current[part].issues = issues;
         }
         current = current[part].children;
       });
     });
-    if (type === "foamtree") {
+    if (type === "treemap") {
       sumSizes(nodeModulesMap);
       sumSizes(sourceCodeMap);
-      const sourceCodeGroup = toGroups(sourceCodeMap, "Source Code");
-      const nodeModulesGroup = nodeModulesMap?.children?.node_modules
-        ? toGroups(nodeModulesMap.children.node_modules, "node_modules")
-        : {};
-      if (!sourceCodeGroup.groups) return nodeModulesGroup;
-      if (!nodeModulesGroup.groups) return sourceCodeGroup;
-      const topLevelNode = { groups: [sourceCodeGroup, nodeModulesGroup] };
-      topLevelNode.weight = topLevelNode.groups.reduce(
-        (acc, group) => acc + group.weight,
-        0,
-      );
-      return topLevelNode;
-    }
-    if (type === "highcharts-treemap") {
-      const ROOT_ID_1 = "~";
-      const ROOT_ID_2 = ".";
-      return [
-        {
-          id: ROOT_ID_1,
-          name: "node_modules",
-        },
-        {
-          id: ROOT_ID_2,
-          name: "Source Code",
-        },
-      ]
-        .concat(flattenTree(nodeModulesMap.children.node_modules, ROOT_ID_1))
-        .concat(flattenTree(sourceCodeMap, ROOT_ID_2));
+      const roots = [];
+      if (Object.keys(sourceCodeMap.children).length > 0)
+        roots.push(toTreemapNode(sourceCodeMap, "Source Code"));
+      if (nodeModulesMap.children.node_modules)
+        roots.push(
+          toTreemapNode(nodeModulesMap.children.node_modules, "node_modules"),
+        );
+      return roots;
     }
     throw new Error(`Unsupported type: ${type}`);
   },
 };
-function flattenTree(
-  node,
-  parentId,
-  prevWasSkipped = false,
-  lvl = 0,
-  result = [],
-  overrideParentId,
-) {
-  const nodeChildrenCount = Object.keys(node.children);
-  for (const key of nodeChildrenCount) {
-    const childNode = node.children[key];
-    const childId = `${parentId}/${key}`;
-    const childrenCount = Object.keys(childNode.children).length;
-    const hasChildren = childrenCount > 0;
-    const item = {
-      id: childId,
-      name: prevWasSkipped ? parentId : key,
-      parent: overrideParentId ?? parentId,
-    };
-    if (!hasChildren) item.value = childNode.size;
-    if (lvl === 0) item.color = Highcharts.getOptions().colors[randomInt(0, 9)];
-    const skipThisNode = nodeChildrenCount.length === 1 && childrenCount === 1;
-    if (!skipThisNode) result.push(item);
-    flattenTree(
-      childNode,
-      childId,
-      skipThisNode,
-      lvl + 1,
-      result,
-      skipThisNode ? (overrideParentId ?? parentId) : void 0,
-    );
-  }
-  return result;
-}
 function sumSizes(node) {
   const isFile = Object.keys(node.children).length === 0;
   let totalFiles = isFile ? 1 : 0;
@@ -282,24 +648,22 @@ function sumSizes(node) {
     totalFiles,
   };
 }
-function toGroups(node, label) {
+function toTreemapNode(node, name) {
   const keys = Object.keys(node.children);
   const common = {
-    label,
-    weight: node.size,
+    name,
+    value: node.size,
     fullPath: node.fullPath,
     files: node.files,
     type: node.type,
     size: helpers.formatBytes(node.size),
+    issues: node.issues,
   };
   if (keys.length === 0) return common;
   return Object.assign(common, {
-    groups: keys.map((key) => toGroups(node.children[key], key)),
+    children: keys.map((key) => toTreemapNode(node.children[key], key)),
   });
 }
-function randomInt(min, max) {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
 const nm = "node_modules/";
 function shortenPath(path, nodeModulesMap) {
   if (path.startsWith(`${nm}.pnpm/`)) path = path.replaceAll(`${nm}.pnpm/`, "");

package/dist/client/views/{_theme.js → _colorScheme.js}

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-//#region src/client/views/_theme.ts
+//#region src/client/views/_colorScheme.ts
 function isDark() {
   const isSystemDarkMode = window?.matchMedia?.(
     "(prefers-color-scheme: dark)",
@@ -7,12 +7,5 @@ function isDark() {
   const userMode = localStorage.getItem("discoveryjs:color-scheme");
   return userMode === "auto" ? isSystemDarkMode : userMode === "dark";
 }
-function doTheming(el) {
-  const dark = isDark();
-  el.classList.add("highcharts-light");
-  el.classList[!dark ? "add" : "remove"]("my-light");
-  el.classList[dark ? "add" : "remove"]("highcharts-dark");
-}
-if (isDark()) require("../../../vendors/high-contrast-dark.js");
 //#endregion
-exports.doTheming = doTheming;
+exports.isDark = isDark;

package/dist/client/views/_html.js

@@ -0,0 +1,52 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/client/views/_html.ts
+function escapeHTML(str) {
+  return String(str ?? "").replace(
+    /[&<>"']/g,
+    (c) =>
+      ({
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#39;",
+      })[c],
+  );
+}
+function formatBytes(bytes) {
+  if (!bytes) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), 3);
+  return `${Number.parseFloat((bytes / 1024 ** i).toFixed(i ? 1 : 0))} ${units[i]}`;
+}
+function formatPercent(value) {
+  const pct = value * 100;
+  if (pct === 0) return "0%";
+  if (pct < 0.01) return "<0.01%";
+  return `${pct < 10 ? pct.toFixed(2) : pct.toFixed(1)}%`;
+}
+function plural(count, singular, pluralForm = `${singular}s`) {
+  return `${count.toLocaleString()} ${count === 1 ? singular : pluralForm}`;
+}
+function card({ label, value, sub, kind = "", bar }) {
+  return `
+    <div class="mo-card${kind ? ` mo-card-${kind}` : ""}">
+      <div class="mo-card-label">${label}</div>
+      <div class="mo-card-value">${value}</div>
+      ${sub ? `<div class="mo-card-sub">${sub}</div>` : ""}
+      ${bar === void 0 ? "" : `<div class="mo-bar"><div style="width:${Math.max(bar * 100, 1).toFixed(2)}%"></div></div>`}
+    </div>`;
+}
+function chip(html, kind = "", href) {
+  const cls = `mo-chip${kind ? ` mo-chip-${kind}` : ""}`;
+  return href
+    ? `<a class="${cls}" href="${escapeHTML(href)}">${html}</a>`
+    : `<span class="${cls}">${html}</span>`;
+}
+//#endregion
+exports.card = card;
+exports.chip = chip;
+exports.escapeHTML = escapeHTML;
+exports.formatBytes = formatBytes;
+exports.formatPercent = formatPercent;
+exports.plural = plural;