Folder structure

Orbix is a standard Vite + React + TypeScript project:

orbix-react/
├── index.html                       document shell: engine stylesheet, boot scripts, icon sprite, preloader
├── 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 and icon sets, preview server
├── src/
│   ├── main.tsx                     entry: theme, preferences, i18n, then the React app
│   ├── app/
│   │   ├── router.tsx               route table: layout routes with the pages inside, loaded on demand
│   │   ├── Root.tsx                 root route: customizer, command palette, toasts, link handling
│   │   ├── pages.ts                 one entry per page: path, page id, title key, layout
│   │   ├── menu.ts                  sidebar menu (also feeds the command palette)
│   │   └── types.ts                 page and menu types
│   ├── layouts/                     AppLayout (sidebar shell), AuthLayout, BlankLayout
│   ├── pages/                       one component per page (129), same folders as the URLs
│   ├── components/
│   │   ├── shell/                   sidebar, topbar, footer, page header, brand, notifications, customizer, command palette
│   │   └── apps, auth, forms, ...   reusable blocks (product card, mail row, password field, ...)
│   ├── hooks/                       useI18n, usePageScript, useChart, useDataGrid, useCalendar, useCurrentPage
│   ├── core/                        i18n, formats, charts, shell preferences, page 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
│   ├── 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: pages, navigation, languages, hard-coded text, sources, images, build
├── vite.config.ts, vitest.config.ts, tsconfig.json
└── package.json

node_modules/, dist/, src/styles/foundry/, src/svg/sprite.svg 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/router.tsx places it inside its layout route (AppLayout) and loads the component on demand.
The layout renders the shell (the sidebar comes from src/app/menu.ts), sets the translated document title and marks the current menu entry from the page id.
The page component renders its content with translated texts (useI18n()), and usePageScript(init) runs its page script after render: src/scripts/dashboards/crm.ts draws the charts. Everything the script creates is released when you leave the page.