Marvia

Sign inSign up

Marvia-07 · shell & navigation

One application. One shell. One navigation.

Pages and extensions never build chrome. They register schema — menu items, toolbar actions, breadcrumbs, commands, overlays — into a shell that stays identical everywhere.

Composition

Shell parts

Nine owned surfaces. No feature may replace one of them.

AppShell

Owns sidebar, header, toolbar, workspace context, notifications, command palette, prompt bar and the overlay manager. Never edited by a feature.

Sidebar

Schema-driven navigation with a workspace switcher, core links, extension links, recents and a profile/credits footer.

Header

Breadcrumb, page title, workspace context, global search, notifications, quick actions and the profile menu. No feature-specific headers.

Toolbar

Per-page actions resolved from the page schema: filters, refresh, search, export, import and bulk actions.

Command palette

CMD/CTRL+K over navigation, actions, settings, workspace management and future AI commands. Fully searchable.

Universal search

Asynchronous providers per scope; results merge into one ranked list.

Prompt bar

Persistent and bottom-fixed. Belongs to the shell so every page inherits AI interaction for free.

Notification centre

One inbox for workspace, extension and connector events, with read state and mentions.

Overlay manager

A single stack for dialogs, drawers, popovers, the palette and toasts. Escape always closes the top layer.

Sidebar registry

Primary navigation

Core navigation is data. Everything else belongs to an extension.

ItemGroupRoutePermission
Workspaceworkspace/workspaceworkspace.read
Projectscore/projectsproject.read
Marketplacecore/marketplace—
Historycore/historyactivity.read
Extensionsfooter/extensionsextension.read
Learnfooter/learn—
Creditsfooter/creditscredit.read
Securityfooter/securitysecurity.view
Settingsfooter/settingssettings.read

Layout manager

Page layout registry

Thirteen layouts. Extensions reuse them; custom layouts are rejected.

dashboard

Metric grid plus activity rail.

toolbarmetricscontentaside

report

Fixed report section order; not reorderable.

summaryscoreissuesrecommendationsdata

documentation

Table of contents plus reading column.

toccontent

marketplace

Filterable catalogue with detail drawer.

filtersgriddetail

settings

Namespaced sections with a sticky nav.

navsections

workspace

Workspace overview and membership.

headercontent

learning

Course list and lesson reader.

outlinelesson

chat

Thread with persistent prompt bar.

threadcontext

split

Two resizable panes.

leftright

inspector

Content with a right inspector panel.

contentinspector

blank

Shell chrome only.

content

modal

Focused task inside an overlay.

contentactions

drawer

Side panel task surface.

contentactions

Required page states — no blank screens

readyemptyloadingerrorpermission-deniedofflineworkspace-empty

Command & search

Palette, scopes and shortcuts

CMD/CTRL+K opens everything; universal search runs asynchronously per scope.

Command groups

navigationactionssettingsworkspaceai

Search scopes

projectsreportsknowledgelearningextensionsmarketplacehistorymembersconnectors

Keyboard

  • ⌘K / Ctrl+KOpen the command palette
  • ⌘/ / Ctrl+/Focus the prompt bar
  • ⌘B / Ctrl+BCollapse or expand the sidebar
  • ⌘⇧WOpen the workspace switcher
  • G then PGo to Projects
  • NOpen notifications
  • EscapeClose the topmost overlay

Overlays & prompt

One stack, one prompt bar

Dialogs, drawers, popovers, the palette and toasts share a single manager.

Overlay kinds

dialogdrawerpopoverpalettetoast

Dialogs

confirmationdeletepublishpurchaseinvitesettings

Drawers

settingsinspectorfiltersextensionnotifications

Prompt modes

askanalyzegeneratecommandsearch

Notification channels

in-appemailpushwebhooktelegram

Extension slots

sidebar.itemsidebar.grouptoolbar.actionquick.actionworkspace.carddashboard.widgetcontext.panelprompt.commandnotification.typebreadcrumb.nodelayout.usage

Behaviour

Responsive, accessible, fast

Shell guarantees that pages inherit rather than reimplement.

Responsive

  • desktop ≥ 1280px

    Sidebar expanded, toolbar inline, prompt bar centred.

  • tablet 768–1279px

    Sidebar collapses to icons, toolbar overflows into a menu.

  • mobile < 768px

    Sidebar becomes a drawer, prompt bar stays fixed to the bottom.

Accessibility

  • Keyboard-first: every shell action is reachable without a pointer.
  • ARIA roles and labels on navigation, overlays and the prompt bar.
  • Visible focus rings; focus is trapped inside overlays and restored on close.
  • prefers-reduced-motion disables all shell transitions.
  • Semantic landmarks: header, nav, main, footer on every page.

Performance

  • Routes, layouts and extensions are code split and lazily loaded.
  • Data refresh is explicit; no background polling by default.
  • Long collections render through virtual lists.
  • Shell state is memoised so navigation never re-renders the content tree.