# biugle/biu architecture

> Architecture diagram of the GitHub repository biugle/biu, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/biugle/biu
- Repository: https://github.com/biugle/biu

## Overview

biu is a modular frontend foundation for enterprise Portals, independently deployed APPs, and React Custom projects. The primary workflow is: a developer uses the CLI to scaffold or discover a project, resolve menu and route inputs, and generate a page registry; the Runtime then provides navigation, authentication, preferences, and remote-APP hosting, while Presets supply Portal layouts. Shared packages provide routing, state, UI, localization, and communication contracts. Major documented capabilities are included even where implementation excerpts were unavailable; those links are based on the README rather than sampled source.

Main entry points: [`packages/runtime/src/index.tsx`](https://github.com/biugle/biu/blob/main/packages/runtime/src/index.tsx) (Runtime Core), [`packages/cli/src/project.ts`](https://github.com/biugle/biu/blob/main/packages/cli/src/project.ts) (Project Discovery), [`packages/preset/src/layout-frame.tsx`](https://github.com/biugle/biu/blob/main/packages/preset/src/layout-frame.tsx) (Portal Layout), [`packages/cli/src/cli.ts`](https://github.com/biugle/biu/blob/main/packages/cli/src/cli.ts) (CLI Commands)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_cli["Project CLI"]
  node_cli_entry["CLI Commands<br/>[cli.ts]"]
  node_project_discovery["Project Discovery<br/>[project.ts]"]
  node_foundation["Foundation Snapshot<br/>[foundation.ts]"]
end

subgraph group_runtime["App Runtime"]
  node_runtime_core["Runtime Core<br/>[index.tsx]"]
  node_runtime_context["Runtime Context<br/>[context.tsx]"]
  node_remote_apps["Remote APP Hosting<br/>[remote.tsx]"]
  node_auth["Authentication Gate<br/>[auth-page.tsx]"]
  node_updates["Build Update Check<br/>[update-check.ts]"]
end

subgraph group_shell["Portal Shell"]
  node_presets["Layout Presets<br/>[core.tsx]"]
  node_layout_frame["Portal Layout<br/>[layout-frame.tsx]"]
  node_react_adapter["React Adapter<br/>[index.tsx]"]
end

subgraph group_contracts["Shared Contracts"]
  node_router["Menu And Router<br/>[navigation.ts]"]
  node_bridge["Window Bridge<br/>[index.ts]"]
  node_events["Event Bus<br/>[index.ts]"]
  node_i18n["Localization<br/>[index.ts]"]
end

subgraph group_state["State And UI"]
  node_stores["Scoped Stores<br/>[index.ts]"]
  node_session_store["Tab Sessions<br/>[session-store.ts]"]
  node_ui["Shared UI<br/>[index.ts]"]
end

node_developer(("Developer"))
node_project["Portal Or APP"]
node_remote_service(("Remote APP"))
node_menu_service(("Menu And Permission API"))
node_identity_provider(("SSO Provider"))

node_developer -->|"runs commands"| node_cli_entry
node_cli_entry -->|"discovers project"| node_project_discovery
node_project_discovery -->|"reads configuration"| node_project
node_project_discovery -.->|"requests menus"| node_menu_service
node_project_discovery -->|"uses route rules"| node_router
node_cli_entry -->|"prepares packages"| node_foundation
node_project_discovery -->|"generates entry"| node_runtime_core
node_developer -->|"opens app"| node_runtime_core
node_runtime_core -->|"provides context"| node_runtime_context
node_runtime_core -->|"resolves navigation"| node_router
node_runtime_core -->|"manages app state"| node_stores
node_runtime_core -->|"hosts remote apps"| node_remote_apps
node_remote_apps -->|"loads remote app"| node_remote_service
node_remote_apps -->|"exchanges messages"| node_bridge
node_runtime_context -->|"posts overlay state"| node_bridge
node_runtime_core -->|"gates access"| node_auth
node_auth -.->|"requests authentication"| node_identity_provider
node_runtime_core -->|"checks build"| node_updates
node_presets -->|"composes shell"| node_layout_frame
node_layout_frame -->|"uses runtime context"| node_runtime_context
node_layout_frame -->|"uses menu paths"| node_router
node_layout_frame -->|"reads menu state"| node_stores
node_layout_frame -->|"uses overlays"| node_ui
node_react_adapter -->|"adapts React"| node_runtime_core
node_runtime_core -->|"uses translations"| node_i18n
node_runtime_core -->|"exposes events"| node_events
node_runtime_core -->|"persists tab session"| node_session_store
node_ui -->|"provides interactions"| node_developer

click node_cli_entry "https://github.com/biugle/biu/blob/main/packages/cli/src/cli.ts"
click node_project_discovery "https://github.com/biugle/biu/blob/main/packages/cli/src/project.ts"
click node_foundation "https://github.com/biugle/biu/blob/main/packages/cli/src/foundation.ts"
click node_runtime_core "https://github.com/biugle/biu/blob/main/packages/runtime/src/index.tsx"
click node_runtime_context "https://github.com/biugle/biu/blob/main/packages/runtime/src/context.tsx"
click node_remote_apps "https://github.com/biugle/biu/blob/main/packages/runtime/src/remote.tsx"
click node_auth "https://github.com/biugle/biu/blob/main/packages/runtime/src/auth-page.tsx"
click node_updates "https://github.com/biugle/biu/blob/main/packages/runtime/src/update-check.ts"
click node_presets "https://github.com/biugle/biu/blob/main/packages/preset/src/core.tsx"
click node_layout_frame "https://github.com/biugle/biu/blob/main/packages/preset/src/layout-frame.tsx"
click node_react_adapter "https://github.com/biugle/biu/blob/main/packages/adapter-react/src/index.tsx"
click node_router "https://github.com/biugle/biu/blob/main/packages/router/src/navigation.ts"
click node_bridge "https://github.com/biugle/biu/blob/main/packages/bridge/src/index.ts"
click node_events "https://github.com/biugle/biu/blob/main/packages/events/src/index.ts"
click node_i18n "https://github.com/biugle/biu/blob/main/packages/i18n/src/index.ts"
click node_stores "https://github.com/biugle/biu/blob/main/packages/store/src/index.ts"
click node_session_store "https://github.com/biugle/biu/blob/main/packages/store/src/store/session-store.ts"
click node_ui "https://github.com/biugle/biu/blob/main/packages/ui/src/index.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_cli_entry,node_project_discovery,node_foundation toneBlue
class node_runtime_core,node_runtime_context,node_remote_apps,node_auth,node_updates toneAmber
class node_presets,node_layout_frame,node_react_adapter,node_menu_service toneMint
class node_router,node_bridge,node_events,node_i18n toneRose
class node_stores,node_session_store,node_ui,node_developer,node_project,node_remote_service,node_identity_provider toneIndigo
```

## Components

### Project CLI

- [CLI Commands](https://github.com/biugle/biu/blob/main/packages/cli/src/cli.ts): `packages/cli/src/cli.ts`
- [Project Discovery](https://github.com/biugle/biu/blob/main/packages/cli/src/project.ts): `packages/cli/src/project.ts`
- [Foundation Snapshot](https://github.com/biugle/biu/blob/main/packages/cli/src/foundation.ts): `packages/cli/src/foundation.ts`

### App Runtime

- [Runtime Core](https://github.com/biugle/biu/blob/main/packages/runtime/src/index.tsx): `packages/runtime/src/index.tsx`
- [Runtime Context](https://github.com/biugle/biu/blob/main/packages/runtime/src/context.tsx): `packages/runtime/src/context.tsx`
- [Remote APP Hosting](https://github.com/biugle/biu/blob/main/packages/runtime/src/remote.tsx): `packages/runtime/src/remote.tsx`
- [Authentication Gate](https://github.com/biugle/biu/blob/main/packages/runtime/src/auth-page.tsx): `packages/runtime/src/auth-page.tsx`
- [Build Update Check](https://github.com/biugle/biu/blob/main/packages/runtime/src/update-check.ts): `packages/runtime/src/update-check.ts`

### Portal Shell

- [Layout Presets](https://github.com/biugle/biu/blob/main/packages/preset/src/core.tsx): `packages/preset/src/core.tsx`
- [Portal Layout](https://github.com/biugle/biu/blob/main/packages/preset/src/layout-frame.tsx): `packages/preset/src/layout-frame.tsx`
- [React Adapter](https://github.com/biugle/biu/blob/main/packages/adapter-react/src/index.tsx): `packages/adapter-react/src/index.tsx`

### Shared Contracts

- [Menu And Router](https://github.com/biugle/biu/blob/main/packages/router/src/navigation.ts): `packages/router/src/navigation.ts`
- [Window Bridge](https://github.com/biugle/biu/blob/main/packages/bridge/src/index.ts): `packages/bridge/src/index.ts`
- [Event Bus](https://github.com/biugle/biu/blob/main/packages/events/src/index.ts): `packages/events/src/index.ts`
- [Localization](https://github.com/biugle/biu/blob/main/packages/i18n/src/index.ts): `packages/i18n/src/index.ts`

### State And UI

- [Scoped Stores](https://github.com/biugle/biu/blob/main/packages/store/src/index.ts): `packages/store/src/index.ts`
- [Tab Sessions](https://github.com/biugle/biu/blob/main/packages/store/src/store/session-store.ts): `packages/store/src/store/session-store.ts`
- [Shared UI](https://github.com/biugle/biu/blob/main/packages/ui/src/index.ts): `packages/ui/src/index.ts`

### Other components

- **Developer**
- **Portal Or APP**
- **Remote APP**
- **Menu And Permission API**
- **SSO Provider**

## Connections

- Developer → CLI Commands: runs commands
- CLI Commands → Project Discovery: discovers project
- Project Discovery → Portal Or APP: reads configuration
- Project Discovery → Menu And Permission API: requests menus
- Project Discovery → Menu And Router: uses route rules
- CLI Commands → Foundation Snapshot: prepares packages
- Project Discovery → Runtime Core: generates entry
- Developer → Runtime Core: opens app
- Runtime Core → Runtime Context: provides context
- Runtime Core → Menu And Router: resolves navigation
- Runtime Core → Scoped Stores: manages app state
- Runtime Core → Remote APP Hosting: hosts remote apps
- Remote APP Hosting → Remote APP: loads remote app
- Remote APP Hosting → Window Bridge: exchanges messages
- Runtime Context → Window Bridge: posts overlay state
- Runtime Core → Authentication Gate: gates access
- Authentication Gate → SSO Provider: requests authentication
- Runtime Core → Build Update Check: checks build
- Layout Presets → Portal Layout: composes shell
- Portal Layout → Runtime Context: uses runtime context
- Portal Layout → Menu And Router: uses menu paths
- Portal Layout → Scoped Stores: reads menu state
- Portal Layout → Shared UI: uses overlays
- React Adapter → Runtime Core: adapts React
- Runtime Core → Localization: uses translations
- Runtime Core → Event Bus: exposes events
- Runtime Core → Tab Sessions: persists tab session
- Shared UI → Developer: provides interactions