@molecule/app-bonds-default-react 1.0.0

package/LICENSE

@@ -0,0 +1,115 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work.
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship.
+
+      "Contribution" shall mean any work of authorship, including the
+      original version of the Work and any modifications or additions
+      to that Work, that is intentionally submitted to the Licensor for
+      inclusion in the Work by the copyright owner or by an individual or
+      Legal Entity authorized to submit on behalf of the copyright owner.
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      patent license to make, have made, use, offer to sell, sell, import,
+      and otherwise transfer the Work.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file.
+
+   5. Submission of Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.
+
+   8. Limitation of Liability. In no event and under no legal theory shall
+      any Contributor be liable to You for damages.
+
+   9. Accepting Warranty or Additional Liability.
+
+   Copyright 2026 Molecule Dev, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/dist/auth.d.ts

@@ -0,0 +1,91 @@
+import type { AuthClient, AuthClientConfig, UserProfile } from '@molecule/app-auth';
+import type { HttpClient } from '@molecule/app-http';
+/**
+ * Builds the default fetch-based HTTP client + wires it into
+ * `@molecule/app-http`. Replaces the per-app `bonds/http-default.ts`
+ * shipped by ~52 fleet apps.
+ *
+ * @example
+ * ```ts
+ * // bonds/http-default.ts
+ * import { createDefaultHttpClient } from '@molecule/app-bonds-default-react'
+ * import { API_BASE_URL } from '../config.js'
+ *
+ * export const { httpClient, setupHttpDefault } = createDefaultHttpClient(API_BASE_URL)
+ * ```
+ */
+export declare function createDefaultHttpClient(baseURL: string): {
+    httpClient: HttpClient;
+    setupHttpDefault: () => void;
+};
+/**
+ * Variant of `createDefaultHttpClient` that adds a request interceptor
+ * injecting the JWT bearer token from the auth client AND (optionally)
+ * stripping a leading `/api/` from request URLs.
+ *
+ * Replaces ~20 per-app `bonds/http-default.ts` files that hand-roll
+ * this same wiring. Pass `stripApiPrefix: true` when the app uses
+ * `baseURL: '/api'` to handle pages that pass `/api/`-prefixed paths
+ * (would otherwise resolve to `/api/api/...` and 404).
+ */
+export declare function createDefaultHttpClientWithAuthBearer(opts: {
+    baseURL: string;
+    withCredentials?: boolean;
+    stripApiPrefix?: boolean;
+    getToken: () => string | null | undefined;
+}): {
+    httpClient: HttpClient;
+    setupHttpDefault: () => void;
+};
+/**
+ * Builds the default JWT auth client + wires it into `@molecule/app-auth`.
+ *
+ * Replaces the 16-line per-app `bonds/auth-default.ts` that 93 fleet
+ * apps shipped byte-identically. Apps pass their own `authConfig`
+ * (which lives in `src/config.ts`).
+ *
+ * @example
+ * ```ts
+ * // bonds/auth-default.ts
+ * import { createDefaultAuthClient } from '@molecule/app-bonds-default-react'
+ * import { authConfig } from '../config.js'
+ *
+ * export const { authClient, setupAuthDefault } =
+ *   createDefaultAuthClient(authConfig)
+ * ```
+ */
+export declare function createDefaultAuthClient<TUser extends UserProfile = UserProfile>(authConfig: AuthClientConfig): {
+    authClient: AuthClient<TUser>;
+    setupAuthDefault: () => void;
+};
+/**
+ * Variant of `createDefaultAuthClient` that also keeps the bonded
+ * `@molecule/app-http` client's bearer token in sync with auth events
+ * (login / register / refresh / logout). Required by apps whose http
+ * client must carry the JWT on every request — without this wiring,
+ * authed endpoints return 401 after page reloads or token refresh.
+ *
+ * Hydrates the HTTP client's token from the persisted auth state
+ * on setup, then listens for auth events to keep them aligned.
+ */
+export declare function createDefaultAuthClientWithHttpSync<TUser extends UserProfile = UserProfile>(authConfig: AuthClientConfig): {
+    authClient: AuthClient<TUser>;
+    setupAuthDefault: () => void;
+};
+/**
+ * Most aggressive variant — bonds a fetch-based HTTP client with the
+ * given `baseURL` (so molecule pkg `useGet('/path')` calls hit
+ * `${baseURL}/path` instead of the SPA's catch-all route), AND keeps
+ * its bearer token in sync with auth events.
+ *
+ * Used by apps where molecule packages render pricing / billing /
+ * other authed JSON-fetching screens that need both behaviors.
+ */
+export declare function createDefaultAuthClientWithFetchClient<TUser extends UserProfile = UserProfile>(authConfig: AuthClientConfig, fetchClientOptions: {
+    baseURL: string;
+    withCredentials?: boolean;
+}): {
+    authClient: AuthClient<TUser>;
+    setupAuthDefault: () => void;
+};
+//# sourceMappingURL=auth.d.ts.map

package/dist/auth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth.d.ts","sourceRoot":"","sources":["../src/auth.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEnF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAOpD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,MAAM,GAAG;IACxD,UAAU,EAAE,UAAU,CAAA;IACtB,gBAAgB,EAAE,MAAM,IAAI,CAAA;CAC7B,CAMA;AAED;;;;;;;;;GASG;AACH,wBAAgB,qCAAqC,CAAC,IAAI,EAAE;IAC1D,OAAO,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,EAAE,MAAM,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;CAC1C,GAAG;IACF,UAAU,EAAE,UAAU,CAAA;IACtB,gBAAgB,EAAE,MAAM,IAAI,CAAA;CAC7B,CAmBA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,SAAS,WAAW,GAAG,WAAW,EAC7E,UAAU,EAAE,gBAAgB,GAC3B;IACD,UAAU,EAAE,UAAU,CAAC,KAAK,CAAC,CAAA;IAC7B,gBAAgB,EAAE,MAAM,IAAI,CAAA;CAC7B,CAMA;AAED;;;;;;;;;GASG;AACH,wBAAgB,mCAAmC,CAAC,KAAK,SAAS,WAAW,GAAG,WAAW,EACzF,UAAU,EAAE,gBAAgB,GAC3B;IACD,UAAU,EAAE,UAAU,CAAC,KAAK,CAAC,CAAA;IAC7B,gBAAgB,EAAE,MAAM,IAAI,CAAA;CAC7B,CAoBA;AAED;;;;;;;;GAQG;AACH,wBAAgB,sCAAsC,CAAC,KAAK,SAAS,WAAW,GAAG,WAAW,EAC5F,UAAU,EAAE,gBAAgB,EAC5B,kBAAkB,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,eAAe,CAAC,EAAE,OAAO,CAAA;CAAE,GACjE;IACD,UAAU,EAAE,UAAU,CAAC,KAAK,CAAC,CAAA;IAC7B,gBAAgB,EAAE,MAAM,IAAI,CAAA;CAC7B,CAyBA"}

package/dist/auth.js

@@ -0,0 +1,147 @@
+import { createJWTAuthClient, setClient } from '@molecule/app-auth';
+import { createFetchClient, getClient as getHttpClient, setClient as setHttpClient, } from '@molecule/app-http';
+/**
+ * Builds the default fetch-based HTTP client + wires it into
+ * `@molecule/app-http`. Replaces the per-app `bonds/http-default.ts`
+ * shipped by ~52 fleet apps.
+ *
+ * @example
+ * ```ts
+ * // bonds/http-default.ts
+ * import { createDefaultHttpClient } from '@molecule/app-bonds-default-react'
+ * import { API_BASE_URL } from '../config.js'
+ *
+ * export const { httpClient, setupHttpDefault } = createDefaultHttpClient(API_BASE_URL)
+ * ```
+ */
+export function createDefaultHttpClient(baseURL) {
+    const httpClient = createFetchClient({ baseURL });
+    return {
+        httpClient,
+        setupHttpDefault: () => setHttpClient(httpClient),
+    };
+}
+/**
+ * Variant of `createDefaultHttpClient` that adds a request interceptor
+ * injecting the JWT bearer token from the auth client AND (optionally)
+ * stripping a leading `/api/` from request URLs.
+ *
+ * Replaces ~20 per-app `bonds/http-default.ts` files that hand-roll
+ * this same wiring. Pass `stripApiPrefix: true` when the app uses
+ * `baseURL: '/api'` to handle pages that pass `/api/`-prefixed paths
+ * (would otherwise resolve to `/api/api/...` and 404).
+ */
+export function createDefaultHttpClientWithAuthBearer(opts) {
+    const httpClient = createFetchClient({
+        baseURL: opts.baseURL,
+        withCredentials: opts.withCredentials,
+    });
+    httpClient.addRequestInterceptor((config) => {
+        if (opts.stripApiPrefix && typeof config.url === 'string' && config.url.startsWith('/api/')) {
+            config.url = config.url.replace(/^\/api\//, '/');
+        }
+        const token = opts.getToken();
+        if (token) {
+            config.headers = { ...config.headers, Authorization: `Bearer ${token}` };
+        }
+        return config;
+    });
+    return {
+        httpClient,
+        setupHttpDefault: () => setHttpClient(httpClient),
+    };
+}
+/**
+ * Builds the default JWT auth client + wires it into `@molecule/app-auth`.
+ *
+ * Replaces the 16-line per-app `bonds/auth-default.ts` that 93 fleet
+ * apps shipped byte-identically. Apps pass their own `authConfig`
+ * (which lives in `src/config.ts`).
+ *
+ * @example
+ * ```ts
+ * // bonds/auth-default.ts
+ * import { createDefaultAuthClient } from '@molecule/app-bonds-default-react'
+ * import { authConfig } from '../config.js'
+ *
+ * export const { authClient, setupAuthDefault } =
+ *   createDefaultAuthClient(authConfig)
+ * ```
+ */
+export function createDefaultAuthClient(authConfig) {
+    const authClient = createJWTAuthClient(authConfig);
+    return {
+        authClient,
+        setupAuthDefault: () => setClient(authClient),
+    };
+}
+/**
+ * Variant of `createDefaultAuthClient` that also keeps the bonded
+ * `@molecule/app-http` client's bearer token in sync with auth events
+ * (login / register / refresh / logout). Required by apps whose http
+ * client must carry the JWT on every request — without this wiring,
+ * authed endpoints return 401 after page reloads or token refresh.
+ *
+ * Hydrates the HTTP client's token from the persisted auth state
+ * on setup, then listens for auth events to keep them aligned.
+ */
+export function createDefaultAuthClientWithHttpSync(authConfig) {
+    const authClient = createJWTAuthClient(authConfig);
+    return {
+        authClient,
+        setupAuthDefault: () => {
+            setClient(authClient);
+            const initialToken = authClient.getAccessToken();
+            if (initialToken) {
+                getHttpClient().setAuthToken(initialToken);
+            }
+            authClient.addEventListener((event) => {
+                if (event.type === 'login' || event.type === 'register' || event.type === 'refresh') {
+                    const token = authClient.getAccessToken();
+                    if (token)
+                        getHttpClient().setAuthToken(token);
+                }
+                else if (event.type === 'logout') {
+                    getHttpClient().setAuthToken(null);
+                }
+            });
+        },
+    };
+}
+/**
+ * Most aggressive variant — bonds a fetch-based HTTP client with the
+ * given `baseURL` (so molecule pkg `useGet('/path')` calls hit
+ * `${baseURL}/path` instead of the SPA's catch-all route), AND keeps
+ * its bearer token in sync with auth events.
+ *
+ * Used by apps where molecule packages render pricing / billing /
+ * other authed JSON-fetching screens that need both behaviors.
+ */
+export function createDefaultAuthClientWithFetchClient(authConfig, fetchClientOptions) {
+    const authClient = createJWTAuthClient(authConfig);
+    return {
+        authClient,
+        setupAuthDefault: () => {
+            const httpClient = createFetchClient({
+                baseURL: fetchClientOptions.baseURL,
+                withCredentials: fetchClientOptions.withCredentials ?? true,
+            });
+            setHttpClient(httpClient);
+            setClient(authClient);
+            const initialToken = authClient.getAccessToken();
+            if (initialToken) {
+                httpClient.setAuthToken(initialToken);
+            }
+            authClient.addEventListener((event) => {
+                if (event.type === 'login' || event.type === 'register' || event.type === 'refresh') {
+                    const token = authClient.getAccessToken();
+                    if (token)
+                        httpClient.setAuthToken(token);
+                }
+                else if (event.type === 'logout') {
+                    httpClient.setAuthToken(null);
+                }
+            });
+        },
+    };
+}

package/dist/bootstrap.d.ts

@@ -0,0 +1,33 @@
+import { type ComponentType } from 'react';
+/**
+ * Boot the React app: wire bonds, kick off auth initialization, mount
+ * `<App />` inside `<StrictMode>` to `#root`, and (optionally) register
+ * the PWA service worker.
+ *
+ * Replaces the 20-line per-app `src/main.tsx` that 97 fleet apps shipped
+ * byte-identically.
+ *
+ * @example
+ * ```tsx
+ * // src/main.tsx
+ * import './index.css'
+ * import './theme.css'
+ *
+ * import { bootstrapApp } from '@molecule/app-bonds-default-react'
+ *
+ * import { App } from './App.js'
+ * import { authClient, setupProviders } from './bonds/index.js'
+ * import { registerPWA } from './pwa.js'
+ *
+ * bootstrapApp({ App, authClient, setupProviders, registerPWA })
+ * ```
+ */
+export declare function bootstrapApp(opts: {
+    App: ComponentType;
+    authClient: {
+        initialize: () => Promise<void>;
+    };
+    setupProviders: () => void | Promise<void>;
+    registerPWA?: () => void;
+}): void;
+//# sourceMappingURL=bootstrap.d.ts.map

package/dist/bootstrap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.d.ts","sourceRoot":"","sources":["../src/bootstrap.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAc,MAAM,OAAO,CAAA;AAGtD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE;IACjC,GAAG,EAAE,aAAa,CAAA;IAClB,UAAU,EAAE;QAAE,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;KAAE,CAAA;IAC/C,cAAc,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC1C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB,GAAG,IAAI,CAwBP"}

package/dist/bootstrap.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+/**
+ * Boot the React app: wire bonds, kick off auth initialization, mount
+ * `<App />` inside `<StrictMode>` to `#root`, and (optionally) register
+ * the PWA service worker.
+ *
+ * Replaces the 20-line per-app `src/main.tsx` that 97 fleet apps shipped
+ * byte-identically.
+ *
+ * @example
+ * ```tsx
+ * // src/main.tsx
+ * import './index.css'
+ * import './theme.css'
+ *
+ * import { bootstrapApp } from '@molecule/app-bonds-default-react'
+ *
+ * import { App } from './App.js'
+ * import { authClient, setupProviders } from './bonds/index.js'
+ * import { registerPWA } from './pwa.js'
+ *
+ * bootstrapApp({ App, authClient, setupProviders, registerPWA })
+ * ```
+ */
+export function bootstrapApp(opts) {
+    void (async () => {
+        // Await provider wiring BEFORE the first render so components may use
+        // bonded providers from their very first effect (e.g. realtime
+        // `connect()` — several optional setups like setupAppRealtimeSocketio
+        // are async, and mounting past them races the bond registration).
+        await opts.setupProviders();
+        opts.authClient.initialize().catch((error) => {
+            // Auth session restore is best-effort at boot — the app mounts
+            // logged-out and the user can sign in; log for debuggability.
+            console.warn('bootstrapApp: authClient.initialize() failed', error);
+        });
+        createRoot(document.getElementById('root')).render(_jsx(StrictMode, { children: _jsx(opts.App, {}) }));
+        opts.registerPWA?.();
+    })().catch((error) => {
+        // A provider setup failure means the app cannot mount — surface it
+        // loudly instead of leaving a silent blank page.
+        console.error('bootstrapApp: setupProviders() failed; app not mounted', error);
+        throw error;
+    });
+}

package/dist/index.d.ts

@@ -0,0 +1,75 @@
+/**
+ * `@molecule/app-bonds-default-react` — default app-side bond wirings for the
+ * React fleet stack, replacing the byte-identical per-app files:
+ *
+ * - `bootstrapApp({ App, authClient, setupProviders, registerPWA? })` — the
+ *   whole scaffolded `src/main.tsx`: awaits `setupProviders()` BEFORE the
+ *   first render, kicks off `authClient.initialize()` (best-effort), mounts
+ *   `<App />` in StrictMode on `#root`, then registers the PWA.
+ * - `setupAllDefaultBonds()` — wires the SEVEN universal bonds in one call:
+ *   fonts-arimo, routing-react-router, storage-localstorage, styling-tailwind
+ *   (registers the tailwind-merge class merger), theme-css-variables
+ *   (light + dark via `getDefaultThemeProvider()`), ui-tailwind ClassMap,
+ *   icons-molecule. Each also exists as an individual `setupApp*()` for apps
+ *   that wire a la carte (per-app `app/src/bonds/<name>.ts` files stay 1-line
+ *   re-exports of these).
+ * - Auth/http factories — `createDefaultAuthClient(authConfig)` returns
+ *   `{ authClient, setupAuthDefault }`; the `...WithHttpSync` /
+ *   `...WithFetchClient` variants also keep the bonded http client's bearer
+ *   token in sync with auth events.
+ *
+ * @example
+ * ```tsx
+ * // src/main.tsx
+ * import {
+ *   bootstrapApp,
+ *   createDefaultAuthClientWithHttpSync,
+ *   setupAllDefaultBonds,
+ *   setupAppCodeEditorMonaco,
+ * } from '@molecule/app-bonds-default-react'
+ *
+ * import { App } from './App.js'
+ * import { authConfig } from './config.js'
+ *
+ * const { authClient, setupAuthDefault } =
+ *   createDefaultAuthClientWithHttpSync(authConfig)
+ *
+ * bootstrapApp({
+ *   App,
+ *   authClient,
+ *   // Async so optional async bonds are AWAITED before the first render.
+ *   setupProviders: async () => {
+ *     setupAllDefaultBonds()
+ *     setupAuthDefault()
+ *     await setupAppCodeEditorMonaco() // only if the app uses the code editor
+ *   },
+ * })
+ * ```
+ *
+ * @remarks
+ * - `setupAllDefaultBonds()` does NOT wire the optional bonds. Those ship as
+ *   separate ASYNC setups — `setupAppRealtimeSocketio`,
+ *   `setupAppKeyboardShortcutsHotkeys`, `setupAppCommandPaletteCmdk`,
+ *   `setupAppCodeEditorMonaco`, `setupAppVirtualScrollTanstack`,
+ *   `setupAppDragDropDndkit`, `setupAppChartsChartjs`, `setupAppMapsLeaflet`,
+ *   `setupAppVideoHls` — and MUST be awaited inside `setupProviders`
+ *   (make it async). `bootstrapApp` awaits `setupProviders()` before mounting
+ *   so bonded providers exist by a component's first effect; a fire-and-forget
+ *   async setup races the mount and intermittently loses.
+ * - Plain `createDefaultAuthClient` does NOT attach the JWT to the bonded
+ *   http client. If molecule packages call authed `/api` endpoints, use
+ *   `createDefaultAuthClientWithHttpSync` (or `...WithFetchClient` to also
+ *   bond a fetch client with a `baseURL`) — otherwise those endpoints return
+ *   401 after a page reload or token refresh.
+ * - `getDefaultThemeProvider()` constructs lazily because the CSS-variables
+ *   theme provider touches `localStorage` at construction — importing this
+ *   package is SSR/test-safe, but only CALL it in a DOM environment. Apps
+ *   with custom themes build their own provider and skip
+ *   `setupAppThemeCssVariables()`.
+ *
+ * @module
+ */
+export * from './auth.js';
+export * from './bootstrap.js';
+export * from './setup.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AAEH,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,74 @@
+/**
+ * `@molecule/app-bonds-default-react` — default app-side bond wirings for the
+ * React fleet stack, replacing the byte-identical per-app files:
+ *
+ * - `bootstrapApp({ App, authClient, setupProviders, registerPWA? })` — the
+ *   whole scaffolded `src/main.tsx`: awaits `setupProviders()` BEFORE the
+ *   first render, kicks off `authClient.initialize()` (best-effort), mounts
+ *   `<App />` in StrictMode on `#root`, then registers the PWA.
+ * - `setupAllDefaultBonds()` — wires the SEVEN universal bonds in one call:
+ *   fonts-arimo, routing-react-router, storage-localstorage, styling-tailwind
+ *   (registers the tailwind-merge class merger), theme-css-variables
+ *   (light + dark via `getDefaultThemeProvider()`), ui-tailwind ClassMap,
+ *   icons-molecule. Each also exists as an individual `setupApp*()` for apps
+ *   that wire a la carte (per-app `app/src/bonds/<name>.ts` files stay 1-line
+ *   re-exports of these).
+ * - Auth/http factories — `createDefaultAuthClient(authConfig)` returns
+ *   `{ authClient, setupAuthDefault }`; the `...WithHttpSync` /
+ *   `...WithFetchClient` variants also keep the bonded http client's bearer
+ *   token in sync with auth events.
+ *
+ * @example
+ * ```tsx
+ * // src/main.tsx
+ * import {
+ *   bootstrapApp,
+ *   createDefaultAuthClientWithHttpSync,
+ *   setupAllDefaultBonds,
+ *   setupAppCodeEditorMonaco,
+ * } from '@molecule/app-bonds-default-react'
+ *
+ * import { App } from './App.js'
+ * import { authConfig } from './config.js'
+ *
+ * const { authClient, setupAuthDefault } =
+ *   createDefaultAuthClientWithHttpSync(authConfig)
+ *
+ * bootstrapApp({
+ *   App,
+ *   authClient,
+ *   // Async so optional async bonds are AWAITED before the first render.
+ *   setupProviders: async () => {
+ *     setupAllDefaultBonds()
+ *     setupAuthDefault()
+ *     await setupAppCodeEditorMonaco() // only if the app uses the code editor
+ *   },
+ * })
+ * ```
+ *
+ * @remarks
+ * - `setupAllDefaultBonds()` does NOT wire the optional bonds. Those ship as
+ *   separate ASYNC setups — `setupAppRealtimeSocketio`,
+ *   `setupAppKeyboardShortcutsHotkeys`, `setupAppCommandPaletteCmdk`,
+ *   `setupAppCodeEditorMonaco`, `setupAppVirtualScrollTanstack`,
+ *   `setupAppDragDropDndkit`, `setupAppChartsChartjs`, `setupAppMapsLeaflet`,
+ *   `setupAppVideoHls` — and MUST be awaited inside `setupProviders`
+ *   (make it async). `bootstrapApp` awaits `setupProviders()` before mounting
+ *   so bonded providers exist by a component's first effect; a fire-and-forget
+ *   async setup races the mount and intermittently loses.
+ * - Plain `createDefaultAuthClient` does NOT attach the JWT to the bonded
+ *   http client. If molecule packages call authed `/api` endpoints, use
+ *   `createDefaultAuthClientWithHttpSync` (or `...WithFetchClient` to also
+ *   bond a fetch client with a `baseURL`) — otherwise those endpoints return
+ *   401 after a page reload or token refresh.
+ * - `getDefaultThemeProvider()` constructs lazily because the CSS-variables
+ *   theme provider touches `localStorage` at construction — importing this
+ *   package is SSR/test-safe, but only CALL it in a DOM environment. Apps
+ *   with custom themes build their own provider and skip
+ *   `setupAppThemeCssVariables()`.
+ *
+ * @module
+ */
+export * from './auth.js';
+export * from './bootstrap.js';
+export * from './setup.js';

package/dist/setup.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Default app-side bond wirings (React + Tailwind + React Router +
+ * localStorage + Arimo font + Molecule icons).
+ *
+ * Centralizes 5 byte-identical `app/src/bonds/<name>.ts` setup
+ * functions that every flagship app shipped. Per-app bond files
+ * become 1-line re-exports — `bonds/index.ts` import sites unchanged.
+ *
+ * `setupAppStylingTailwind` registers `tailwind-merge` as the class merger
+ * for `cn()`; Tailwind itself is configured via env vars and the Vite plugin.
+ * Apps wire it in `setupProviders()` alongside the others.
+ *
+ * @module
+ */
+import { createCSSVariablesThemeProvider } from '@molecule/app-theme-css-variables';
+/** Returns (and lazily constructs) the shared default CSS-variables theme provider. */
+export declare function getDefaultThemeProvider(): ReturnType<typeof createCSSVariablesThemeProvider>;
+/** Wires `@molecule/app-fonts-arimo` to `@molecule/app-fonts`. */
+export declare function setupAppFontsArimo(): void;
+/** Wires `@molecule/app-icons-molecule` to `@molecule/app-icons`. */
+export declare function setupAppIconsMolecule(): void;
+/** Wires `@molecule/app-routing-react-router` to `@molecule/app-routing`. */
+export declare function setupAppRoutingReactRouter(): void;
+/** Wires `@molecule/app-storage-localstorage` to `@molecule/app-storage`. */
+export declare function setupAppStorageLocalstorage(): void;
+/**
+ * Wires `@molecule/app-styling-tailwind`: registers `tailwind-merge` as the
+ * class merger for `@molecule/app-styling`'s `cn()`, so conflicting Tailwind
+ * utilities resolve (last wins). Tailwind itself is configured via env vars +
+ * the Vite plugin; this is the one runtime hook the framework-agnostic styling
+ * core needs so it carries no Tailwind dependency of its own.
+ */
+export declare function setupAppStylingTailwind(): void;
+/** Wires the default light + dark CSS-variables theme provider to `@molecule/app-theme`. */
+export declare function setupAppThemeCssVariables(): void;
+/** Wires `@molecule/app-ui-tailwind` `classMap` to `@molecule/app-ui`. */
+export declare function setupAppUiTailwind(): void;
+/** Wires `@molecule/app-realtime-socketio` to `@molecule/app-realtime`. */
+export declare function setupAppRealtimeSocketio(): Promise<void>;
+/** Wires `@molecule/app-keyboard-shortcuts-hotkeys` to `@molecule/app-keyboard-shortcuts`. */
+export declare function setupAppKeyboardShortcutsHotkeys(): Promise<void>;
+/** Wires `@molecule/app-command-palette-cmdk` to `@molecule/app-command-palette`. */
+export declare function setupAppCommandPaletteCmdk(): Promise<void>;
+/** Wires `@molecule/app-code-editor-monaco` to `@molecule/app-code-editor`. */
+export declare function setupAppCodeEditorMonaco(): Promise<void>;
+/** Wires `@molecule/app-virtual-scroll-tanstack` to `@molecule/app-virtual-scroll`. */
+export declare function setupAppVirtualScrollTanstack(): Promise<void>;
+/** Wires `@molecule/app-drag-drop-dndkit` to `@molecule/app-drag-drop`. */
+export declare function setupAppDragDropDndkit(): Promise<void>;
+/**
+ * Wires `@molecule/app-charts-chartjs` (Chart.js) to `@molecule/app-charts` — real
+ * line/bar/pie/etc. charts instead of the core's placeholder panel.
+ */
+export declare function setupAppChartsChartjs(): Promise<void>;
+/**
+ * Wires `@molecule/app-maps-leaflet` (Leaflet + OpenStreetMap, no API key) to
+ * `@molecule/app-maps` — a real slippy map instead of the core's grey placeholder.
+ * REQUIRES `import 'leaflet/dist/leaflet.css'` once in the app entry (the scaffolded
+ * `bonds/app-maps-leaflet.ts` does this); without it tiles + markers mis-position.
+ */
+export declare function setupAppMapsLeaflet(): Promise<void>;
+/** Wires `@molecule/app-video-hls` (hls.js — HLS streaming everywhere) to `@molecule/app-video`. */
+export declare function setupAppVideoHls(): Promise<void>;
+/**
+ * Wires all 7 universal app-side bonds in one call — fonts, routing,
+ * storage, styling, theme, UI ClassMap, icons (in that order). Auth
+ * + i18n stay per-app because they need app-specific config.
+ *
+ * Replaces 9 individual setupX() calls in per-app `bonds/index.ts`.
+ */
+export declare function setupAllDefaultBonds(): void;
+//# sourceMappingURL=setup.d.ts.map

package/dist/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../src/setup.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAYH,OAAO,EACL,+BAA+B,EAGhC,MAAM,mCAAmC,CAAA;AAe1C,uFAAuF;AACvF,wBAAgB,uBAAuB,IAAI,UAAU,CAAC,OAAO,+BAA+B,CAAC,CAS5F;AAED,kEAAkE;AAClE,wBAAgB,kBAAkB,IAAI,IAAI,CAEzC;AAED,qEAAqE;AACrE,wBAAgB,qBAAqB,IAAI,IAAI,CAE5C;AAED,6EAA6E;AAC7E,wBAAgB,0BAA0B,IAAI,IAAI,CAEjD;AAED,6EAA6E;AAC7E,wBAAgB,2BAA2B,IAAI,IAAI,CAElD;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,IAAI,IAAI,CAE9C;AAED,4FAA4F;AAC5F,wBAAgB,yBAAyB,IAAI,IAAI,CAEhD;AAED,0EAA0E;AAC1E,wBAAgB,kBAAkB,IAAI,IAAI,CAEzC;AAED,2EAA2E;AAC3E,wBAAsB,wBAAwB,IAAI,OAAO,CAAC,IAAI,CAAC,CAM9D;AAED,8FAA8F;AAC9F,wBAAsB,gCAAgC,IAAI,OAAO,CAAC,IAAI,CAAC,CAMtE;AAED,qFAAqF;AACrF,wBAAsB,0BAA0B,IAAI,OAAO,CAAC,IAAI,CAAC,CAMhE;AAED,+EAA+E;AAC/E,wBAAsB,wBAAwB,IAAI,OAAO,CAAC,IAAI,CAAC,CAM9D;AAED,uFAAuF;AACvF,wBAAsB,6BAA6B,IAAI,OAAO,CAAC,IAAI,CAAC,CAMnE;AAED,2EAA2E;AAC3E,wBAAsB,sBAAsB,IAAI,OAAO,CAAC,IAAI,CAAC,CAM5D;AAED;;;GAGG;AACH,wBAAsB,qBAAqB,IAAI,OAAO,CAAC,IAAI,CAAC,CAM3D;AAED;;;;;GAKG;AACH,wBAAsB,mBAAmB,IAAI,OAAO,CAAC,IAAI,CAAC,CAMzD;AAED,oGAAoG;AACpG,wBAAsB,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC,CAMtD;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAQ3C"}

package/dist/setup.js

@@ -0,0 +1,179 @@
+/**
+ * Default app-side bond wirings (React + Tailwind + React Router +
+ * localStorage + Arimo font + Molecule icons).
+ *
+ * Centralizes 5 byte-identical `app/src/bonds/<name>.ts` setup
+ * functions that every flagship app shipped. Per-app bond files
+ * become 1-line re-exports — `bonds/index.ts` import sites unchanged.
+ *
+ * `setupAppStylingTailwind` registers `tailwind-merge` as the class merger
+ * for `cn()`; Tailwind itself is configured via env vars and the Vite plugin.
+ * Apps wire it in `setupProviders()` alongside the others.
+ *
+ * @module
+ */
+import { setFont } from '@molecule/app-fonts';
+import { font as arimoFont } from '@molecule/app-fonts-arimo';
+import { setIconSet } from '@molecule/app-icons';
+import { iconSet as moleculeIconSet } from '@molecule/app-icons-molecule';
+import { setRouter } from '@molecule/app-routing';
+import { provider as reactRouterProvider } from '@molecule/app-routing-react-router';
+import { setProvider as setStorage } from '@molecule/app-storage';
+import { provider as localStorageProvider } from '@molecule/app-storage-localstorage';
+import { registerTailwindClassMerger } from '@molecule/app-styling-tailwind';
+import { setProvider as setTheme } from '@molecule/app-theme';
+import { createCSSVariablesThemeProvider, darkTheme, lightTheme, } from '@molecule/app-theme-css-variables';
+import { setClassMap } from '@molecule/app-ui';
+import { classMap } from '@molecule/app-ui-tailwind';
+/**
+ * Pre-wired default CSS-variables theme provider with light + dark
+ * themes from `@molecule/app-theme-css-variables`. Apps that need
+ * custom themes should build their own provider and skip this.
+ *
+ * Lazily constructed on first access — `createCSSVariablesThemeProvider`
+ * touches `globalThis.localStorage.getItem` during construction, which
+ * throws in non-DOM environments (SSR, unit-test runners with
+ * incomplete localStorage shims).
+ */
+let _defaultThemeProvider = null;
+/** Returns (and lazily constructs) the shared default CSS-variables theme provider. */
+export function getDefaultThemeProvider() {
+    if (!_defaultThemeProvider) {
+        _defaultThemeProvider = createCSSVariablesThemeProvider({
+            themes: [lightTheme, darkTheme],
+            defaultTheme: 'light',
+            persistKey: 'molecule-theme',
+        });
+    }
+    return _defaultThemeProvider;
+}
+/** Wires `@molecule/app-fonts-arimo` to `@molecule/app-fonts`. */
+export function setupAppFontsArimo() {
+    setFont(arimoFont);
+}
+/** Wires `@molecule/app-icons-molecule` to `@molecule/app-icons`. */
+export function setupAppIconsMolecule() {
+    setIconSet(moleculeIconSet);
+}
+/** Wires `@molecule/app-routing-react-router` to `@molecule/app-routing`. */
+export function setupAppRoutingReactRouter() {
+    setRouter(reactRouterProvider);
+}
+/** Wires `@molecule/app-storage-localstorage` to `@molecule/app-storage`. */
+export function setupAppStorageLocalstorage() {
+    setStorage(localStorageProvider);
+}
+/**
+ * Wires `@molecule/app-styling-tailwind`: registers `tailwind-merge` as the
+ * class merger for `@molecule/app-styling`'s `cn()`, so conflicting Tailwind
+ * utilities resolve (last wins). Tailwind itself is configured via env vars +
+ * the Vite plugin; this is the one runtime hook the framework-agnostic styling
+ * core needs so it carries no Tailwind dependency of its own.
+ */
+export function setupAppStylingTailwind() {
+    registerTailwindClassMerger();
+}
+/** Wires the default light + dark CSS-variables theme provider to `@molecule/app-theme`. */
+export function setupAppThemeCssVariables() {
+    setTheme(getDefaultThemeProvider());
+}
+/** Wires `@molecule/app-ui-tailwind` `classMap` to `@molecule/app-ui`. */
+export function setupAppUiTailwind() {
+    setClassMap(classMap);
+}
+/** Wires `@molecule/app-realtime-socketio` to `@molecule/app-realtime`. */
+export async function setupAppRealtimeSocketio() {
+    const [{ setProvider: setRealtime }, { provider }] = await Promise.all([
+        import('@molecule/app-realtime'),
+        import('@molecule/app-realtime-socketio'),
+    ]);
+    setRealtime(provider);
+}
+/** Wires `@molecule/app-keyboard-shortcuts-hotkeys` to `@molecule/app-keyboard-shortcuts`. */
+export async function setupAppKeyboardShortcutsHotkeys() {
+    const [{ setProvider: setKbd }, { provider }] = await Promise.all([
+        import('@molecule/app-keyboard-shortcuts'),
+        import('@molecule/app-keyboard-shortcuts-hotkeys'),
+    ]);
+    setKbd(provider);
+}
+/** Wires `@molecule/app-command-palette-cmdk` to `@molecule/app-command-palette`. */
+export async function setupAppCommandPaletteCmdk() {
+    const [{ setProvider: setPalette }, { provider }] = await Promise.all([
+        import('@molecule/app-command-palette'),
+        import('@molecule/app-command-palette-cmdk'),
+    ]);
+    setPalette(provider);
+}
+/** Wires `@molecule/app-code-editor-monaco` to `@molecule/app-code-editor`. */
+export async function setupAppCodeEditorMonaco() {
+    const [{ setProvider: setEditor }, { provider }] = await Promise.all([
+        import('@molecule/app-code-editor'),
+        import('@molecule/app-code-editor-monaco'),
+    ]);
+    setEditor(provider);
+}
+/** Wires `@molecule/app-virtual-scroll-tanstack` to `@molecule/app-virtual-scroll`. */
+export async function setupAppVirtualScrollTanstack() {
+    const [{ setProvider: setScroll }, { provider }] = await Promise.all([
+        import('@molecule/app-virtual-scroll'),
+        import('@molecule/app-virtual-scroll-tanstack'),
+    ]);
+    setScroll(provider);
+}
+/** Wires `@molecule/app-drag-drop-dndkit` to `@molecule/app-drag-drop`. */
+export async function setupAppDragDropDndkit() {
+    const [{ setProvider: setDnd }, { provider }] = await Promise.all([
+        import('@molecule/app-drag-drop'),
+        import('@molecule/app-drag-drop-dndkit'),
+    ]);
+    setDnd(provider);
+}
+/**
+ * Wires `@molecule/app-charts-chartjs` (Chart.js) to `@molecule/app-charts` — real
+ * line/bar/pie/etc. charts instead of the core's placeholder panel.
+ */
+export async function setupAppChartsChartjs() {
+    const [{ setProvider: setCharts }, { provider }] = await Promise.all([
+        import('@molecule/app-charts'),
+        import('@molecule/app-charts-chartjs'),
+    ]);
+    setCharts(provider);
+}
+/**
+ * Wires `@molecule/app-maps-leaflet` (Leaflet + OpenStreetMap, no API key) to
+ * `@molecule/app-maps` — a real slippy map instead of the core's grey placeholder.
+ * REQUIRES `import 'leaflet/dist/leaflet.css'` once in the app entry (the scaffolded
+ * `bonds/app-maps-leaflet.ts` does this); without it tiles + markers mis-position.
+ */
+export async function setupAppMapsLeaflet() {
+    const [{ setProvider: setMaps }, { provider }] = await Promise.all([
+        import('@molecule/app-maps'),
+        import('@molecule/app-maps-leaflet'),
+    ]);
+    setMaps(provider);
+}
+/** Wires `@molecule/app-video-hls` (hls.js — HLS streaming everywhere) to `@molecule/app-video`. */
+export async function setupAppVideoHls() {
+    const [{ setProvider: setVideo }, { provider }] = await Promise.all([
+        import('@molecule/app-video'),
+        import('@molecule/app-video-hls'),
+    ]);
+    setVideo(provider);
+}
+/**
+ * Wires all 7 universal app-side bonds in one call — fonts, routing,
+ * storage, styling, theme, UI ClassMap, icons (in that order). Auth
+ * + i18n stay per-app because they need app-specific config.
+ *
+ * Replaces 9 individual setupX() calls in per-app `bonds/index.ts`.
+ */
+export function setupAllDefaultBonds() {
+    setupAppFontsArimo();
+    setupAppRoutingReactRouter();
+    setupAppStorageLocalstorage();
+    setupAppStylingTailwind();
+    setupAppThemeCssVariables();
+    setupAppUiTailwind();
+    setupAppIconsMolecule();
+}

package/package.json

@@ -0,0 +1,149 @@
+{
+  "name": "@molecule/app-bonds-default-react",
+  "version": "1.0.0",
+  "description": "Default app-side bond wirings for React+Tailwind+react-router+localStorage+Arimo font+molecule icons. 5 setup functions consolidating 665 byte-identical per-app bond wiring files across the fleet.",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "molecule",
+    "bonds",
+    "default",
+    "react"
+  ],
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@molecule/app-auth": "1.0.0",
+    "@molecule/app-charts-chartjs": "1.0.0",
+    "@molecule/app-code-editor": "1.0.0",
+    "@molecule/app-code-editor-monaco": "1.0.0",
+    "@molecule/app-command-palette": "1.0.0",
+    "@molecule/app-command-palette-cmdk": "1.0.0",
+    "@molecule/app-drag-drop": "1.0.0",
+    "@molecule/app-drag-drop-dndkit": "1.0.0",
+    "@molecule/app-fonts": "1.0.0",
+    "@molecule/app-fonts-arimo": "1.0.0",
+    "@molecule/app-http": "1.0.0",
+    "@molecule/app-icons": "1.0.0",
+    "@molecule/app-icons-molecule": "1.0.0",
+    "@molecule/app-keyboard-shortcuts": "1.0.0",
+    "@molecule/app-keyboard-shortcuts-hotkeys": "1.0.0",
+    "@molecule/app-maps-leaflet": "1.0.0",
+    "@molecule/app-realtime": "1.0.0",
+    "@molecule/app-realtime-socketio": "1.0.0",
+    "@molecule/app-routing": "1.0.0",
+    "@molecule/app-routing-react-router": "1.0.0",
+    "@molecule/app-storage": "1.0.0",
+    "@molecule/app-storage-localstorage": "1.0.0",
+    "@molecule/app-theme": "1.0.0",
+    "@molecule/app-theme-css-variables": "1.0.0",
+    "@molecule/app-ui": "1.0.0",
+    "@molecule/app-ui-tailwind": "1.0.0",
+    "@molecule/app-video-hls": "1.0.0",
+    "@molecule/app-virtual-scroll": "1.0.0",
+    "@molecule/app-virtual-scroll-tanstack": "1.0.0",
+    "@types/node": "26.1.2",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "happy-dom": "20.11.1",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  },
+  "peerDependencies": {
+    "@molecule/app-auth": "^1.0.0",
+    "@molecule/app-charts-chartjs": "1.0.0",
+    "@molecule/app-code-editor": "^1.0.0",
+    "@molecule/app-code-editor-monaco": "^1.0.0",
+    "@molecule/app-command-palette": "^1.0.0",
+    "@molecule/app-command-palette-cmdk": "^1.0.0",
+    "@molecule/app-drag-drop": "^1.0.0",
+    "@molecule/app-drag-drop-dndkit": "^1.0.0",
+    "@molecule/app-fonts": "^1.0.0",
+    "@molecule/app-fonts-arimo": "^1.0.0",
+    "@molecule/app-http": "^1.0.0",
+    "@molecule/app-icons": "^1.0.0",
+    "@molecule/app-icons-molecule": "^1.0.0",
+    "@molecule/app-keyboard-shortcuts": "^1.0.0",
+    "@molecule/app-keyboard-shortcuts-hotkeys": "^1.0.0",
+    "@molecule/app-maps-leaflet": "1.0.0",
+    "@molecule/app-realtime": "^1.0.0",
+    "@molecule/app-realtime-socketio": "^1.0.0",
+    "@molecule/app-routing": "^1.0.0",
+    "@molecule/app-routing-react-router": "^1.0.0",
+    "@molecule/app-storage": "^1.0.0",
+    "@molecule/app-storage-localstorage": "^1.0.0",
+    "@molecule/app-styling-tailwind": "^1.0.0",
+    "@molecule/app-theme": "^1.0.0",
+    "@molecule/app-theme-css-variables": "^1.0.0",
+    "@molecule/app-ui": "^1.0.0",
+    "@molecule/app-ui-tailwind": "^1.0.0",
+    "@molecule/app-video-hls": "1.0.0",
+    "@molecule/app-virtual-scroll": "^1.0.0",
+    "@molecule/app-virtual-scroll-tanstack": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@molecule/app-charts-chartjs": {
+      "optional": true
+    },
+    "@molecule/app-code-editor": {
+      "optional": true
+    },
+    "@molecule/app-code-editor-monaco": {
+      "optional": true
+    },
+    "@molecule/app-command-palette": {
+      "optional": true
+    },
+    "@molecule/app-command-palette-cmdk": {
+      "optional": true
+    },
+    "@molecule/app-drag-drop": {
+      "optional": true
+    },
+    "@molecule/app-drag-drop-dndkit": {
+      "optional": true
+    },
+    "@molecule/app-keyboard-shortcuts": {
+      "optional": true
+    },
+    "@molecule/app-keyboard-shortcuts-hotkeys": {
+      "optional": true
+    },
+    "@molecule/app-maps-leaflet": {
+      "optional": true
+    },
+    "@molecule/app-realtime": {
+      "optional": true
+    },
+    "@molecule/app-realtime-socketio": {
+      "optional": true
+    },
+    "@molecule/app-video-hls": {
+      "optional": true
+    },
+    "@molecule/app-virtual-scroll": {
+      "optional": true
+    },
+    "@molecule/app-virtual-scroll-tanstack": {
+      "optional": true
+    }
+  }
+}