Folder structure

Orbix is a standard Angular CLI project (application builder, standalone components, no NgModules):

orbix-angular/
├── angular.json                     build (one configuration per CSS engine), dev server, unit tests
├── packages/foundry-ui/             design system bundled with the template (local npm package),
│                                    with its SCSS sources (see Customize with SCSS)
├── public/
│   ├── favicon.svg
│   └── images/                      demo photos (CC0 / public domain) and their CREDITS.json
├── scripts/                         build of the CSS engine, icon sprite, index.html and icon sets, preview server
├── src/
│   ├── index.html                   document shell: engine, base path, boot scripts, icon sprite, preloader
│   ├── main.ts                      entry: theme, preferences, then bootstrapApplication()
│   ├── app/
│   │   ├── app.ts, app.html         root: the routed layout, customizer, command palette, toasts, link handling
│   │   ├── app.config.ts            providers: router, Transloco, title strategy, startup (language first)
│   │   ├── app.routes.ts            route table: one layout route per layout, the pages loaded on demand
│   │   ├── pages.ts                 one entry per page: path, page id, title key, layout
│   │   ├── menu.ts                  sidebar menu (also feeds the command palette)
│   │   ├── current-page.ts          the page being shown (menu state, <html> attributes, focus)
│   │   ├── title-strategy.ts        translated document titles
│   │   └── types.ts                 page and menu types
│   ├── layouts/                     app-layout (sidebar shell), auth-layout, blank-layout
│   ├── pages/                       one standalone component per page (129): <page>.ts + <page>.html
│   ├── components/
│   │   ├── shell/                   sidebar, topbar, footer, page header, brand, notifications, customizer, command palette
│   │   └── apps, auth, forms, ...   reusable blocks (product-card, mail-row, password, ...)
│   ├── directives/                  oxAttrs (markup attributes), oxChart, oxDataGrid, oxCalendar
│   ├── core/                        i18n (Transloco), formats, charts, shell preferences, page lifecycle and scope, navigation
│   ├── scripts/                     demo behavior per page family (charts, boards, filters, forms)
│   ├── data/                        demo data (people, events)
│   ├── locales/{en,es,pt,fr,ar}/    translations, one JSON file per area, index.ts bundles each language
│   ├── scss/brand.scss              brand settings of the design system (colors, radius, fonts)
│   ├── styles/engines/bootstrap.css    CSS engine entry
│   ├── styles/foundry/              design system compiled from SCSS by the build (generated)
│   ├── styles/index.css, orbix/     template styles (tokens only, logical properties)
│   ├── boot/orbix-boot.js           no-flicker boot script inlined in index.html
│   └── svg/                         Orbix icons (the sprite is generated)
├── tests/                           Vitest + TestBed: pages, navigation, languages, hard-coded text, sources, images, build
├── tsconfig.json, tsconfig.app.json, tsconfig.spec.json
└── package.json

node_modules/, dist/, .angular/ (build cache), src/generated/ (sprite and index.html of the engine), src/styles/foundry/ and public/icon-sets/ are created by npm install, npm run build and npm run assets.

How a page is put together

src/app/pages.ts lists the page: { path: '/dashboards/crm', id: 'dash-crm', title: 'dashboards.crm.title', layout: 'app', load: () => import('@/pages/dashboards/crm') }.
src/app/app.routes.ts puts it under the route of its layout: the AppLayout component with the page as a child route, loaded on demand (loadComponent), and the page data (id, title, layout...) in the route data.
The layout renders the shell (the sidebar comes from src/app/menu.ts); the current menu entry follows the page id (CurrentPage service) and the document title the page title (OrbixTitleStrategy). Pages of the same layout share the layout instance: moving between them renders only the page.
The page component renders its template with translated texts (t()), and injectPageScript(init) runs its page script once the page has rendered: src/scripts/dashboards/crm.ts draws the charts. Everything the script creates is released when you leave the page.

Components and host elements

Angular renders every component inside a host element. To keep the exact markup of the design system (tables, lists, grids and the fd-* child selectors), Orbix uses two patterns:

Attribute selectors: a reusable block whose markup has one root element uses it as its host. The product card is <li oxProductCard [name]="'Aurora'" ...> (selector li[oxProductCard]), a table row is <tr oxCartRow ...>; the root's classes and attributes are in the component's host metadata.
ox-host class: pages, layouts and blocks with several root elements (the auth forms) have a host element with the class ox-host, which src/styles/angular.css sets to display: contents: it generates no box.