Folder structure

Orbix is a standard Vite + Vue 3 + TypeScript project:

orbix-vue/
├── index.html                       document shell: engine stylesheet, boot scripts, icon sprite, preloader
├── packages/foundry-ui/             design system bundled with the template (local npm package, Vue components),
│                                    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.ts                      entry: theme, preferences, i18n, then the Vue app (vue-i18n, router)
│   ├── App.vue                      root: the routed layout, customizer, command palette, toasts, link handling
│   ├── app/
│   │   ├── router.ts                route table: one layout route per page, the page loaded on demand
│   │   ├── pages.ts                 one entry per page: path, page id, title key, layout
│   │   ├── menu.ts                  sidebar menu (also feeds the command palette)
│   │   └── types.ts                 page, route meta and menu types
│   ├── layouts/                     AppLayout.vue (sidebar shell), AuthLayout.vue, BlankLayout.vue
│   ├── pages/                       one single-file component per page (129), same folders as the URLs
│   ├── components/
│   │   ├── shell/                   sidebar, topbar, footer, page header, AppLink, brand, notifications, customizer, command palette
│   │   └── apps, auth, forms, ...   reusable blocks (ProductCard.vue, MailRow.vue, Password.vue, ...)
│   ├── composables/                 useI18n, usePageScript, useChart, useDataGrid, useCalendar, useCurrentPage
│   ├── core/                        i18n (vue-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.vue') }.
src/app/router.ts turns it into a layout route: the AppLayout component with the page as its child, loaded on demand, and the page data (id, title, layout...) in the route meta.
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 (useRoute().meta). Pages of the same layout share the layout instance: moving between them re-renders only the page.
The page component renders its content with translated texts (useI18n()), and usePageScript(init) runs its page script once the page is mounted: src/scripts/dashboards/crm.ts draws the charts. Everything the script creates is released when you leave the page.