optimize elements by reducing the bundle size required

app/build.ts

@@ -1,4 +1,7 @@
+import fs from "node:fs";
+
 import { $ } from "bun";
+import { replace } from "esbuild-plugin-replace";
 import * as tsup from "tsup";
 
 const args = process.argv.slice(2);
@@ -80,7 +83,8 @@ await tsup.build({
       "src/ui/index.ts",
       "src/ui/client/index.ts",
       "src/ui/elements/index.ts",
-      "src/ui/main.css"
+      "src/ui/main.css",
+      "src/ui/styles.css"
    ],
    outDir: "dist/ui",
    external: [
@@ -108,6 +112,50 @@ await tsup.build({
    }
 });
 
+/**
+ * Building UI Elements
+ * - tailwind-merge is mocked, no exclude
+ * - ui/client is external, and after built replaced with "bknd/client"
+ */
+await tsup.build({
+   minify,
+   sourcemap,
+   watch,
+   entry: ["src/ui/elements/index.ts"],
+   outDir: "dist/ui/elements",
+   external: [
+      "ui/client",
+      "react",
+      "react-dom",
+      "react/jsx-runtime",
+      "react/jsx-dev-runtime",
+      "use-sync-external-store"
+   ],
+   metafile: true,
+   platform: "browser",
+   format: ["esm"],
+   splitting: false,
+   bundle: true,
+   treeshake: true,
+   loader: {
+      ".svg": "dataurl"
+   },
+   esbuildOptions: (options) => {
+      options.alias = {
+         // not important for elements, mock to reduce bundle
+         "tailwind-merge": "./src/ui/elements/mocks/tailwind-merge.ts"
+      };
+   },
+   onSuccess: async () => {
+      // manually replace ui/client with bknd/client
+      const path = "./dist/ui/elements/index.js";
+      const bundle = await Bun.file(path).text();
+      await Bun.write(path, bundle.replaceAll("ui/client", "bknd/client"));
+
+      delayTypes();
+   }
+});
+
 /**
  * Building adapters
  */