Frontend layer

Shell

Shell is the component and wake runtime. It owns markup, local UI state, SSR adoption and view rendering.

.shell files

A .shell file is a component file. It can export a Props type, render markup, use local Shell state, and be compiled for DOM and SSR.

<script lang="ts">  export type Props = {    readonly title: string  }</script><section>  <h1>{props.title}</h1></section>

Typed props

The component owns its props contract. Today resource-side page typing is explicit TypeScript. Later the VS Code extension can make this flow tighter from .shell files.

Control flow

Shell templates use explicit tags such as <when> and <each>. They keep the template readable without hiding the render model behind a client router.

View outlet

The <view> outlet renders a selected view from the generated view registry. It is not a router. Shield decides the view; Shell renders it.

<view name={props.view} props={props.props} />

Wake

Wake adopts server-rendered HTML. It does not re-own the page as an SPA by default. Enhanced links and forms can make navigation feel warm while the server still owns the result.

import './style.css'import { wakeRoot } from '@schildw3rk/shield/client'import App from './App.shell'wakeRoot(App)