@stone-js/starters 0.8.3 → 0.8.4

package/basic-react-declarative/app/Application.tsx

@@ -75,6 +75,7 @@ export class Application implements IPage<ReactIncomingEvent> {
   render ({ data }: PageRenderContext<ResponseData>): JSX.Element {
     return (
       <section className='container'>
+        <img src='/logo.svg' alt='Stone.js' width={96} height={96} />
         <h1 className='h1 text-center mt-64'>{data?.message}</h1>
       </section>
     )

package/basic-react-declarative/package.json

@@ -20,16 +20,16 @@
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@stone-js/core": "^0.8.3",
-    "@stone-js/use-react": "^0.8.3",
-    "@stone-js/browser-adapter": "^0.8.3",
-    "@stone-js/node-cli-adapter": "^0.8.3"
+    "@stone-js/core": "^0.8.4",
+    "@stone-js/use-react": "^0.8.4",
+    "@stone-js/browser-adapter": "^0.8.4",
+    "@stone-js/node-cli-adapter": "^0.8.4"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-typescript": "^7.27.0",
-    "@stone-js/cli": "^0.8.3",
+    "@stone-js/cli": "^0.8.4",
     "@types/node": "^24.0.7",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",

package/basic-react-declarative/public/logo.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96" role="img" aria-label="Stone.js">
+  <title>Stone.js</title>
+  <style>
+    .ink { stroke: #1B1613; }
+    @media (prefers-color-scheme: dark) { .ink { stroke: #EFE8DC; } }
+  </style>
+  <defs>
+    <linearGradient id="braise" gradientUnits="userSpaceOnUse" x1="22" y1="14" x2="74" y2="26.1">
+      <stop offset="0" stop-color="#FFC46B" />
+      <stop offset="1" stop-color="#FF5A1F" />
+    </linearGradient>
+  </defs>
+  <path class="ink" d="M 79.96 36.4 A 34 34 0 0 1 53.9 81.5" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path class="ink" d="M 42.1 81.5 A 34 34 0 0 1 16.05 36.4" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path d="M 22 26.1 A 34 34 0 0 1 74 26.1" fill="none" stroke="url(#braise)" stroke-width="11" stroke-linecap="round" />
+</svg>

package/basic-react-declarative/tests/Application.spec.ts

@@ -83,7 +83,7 @@ describe('Application', () => {
     expect(mockedLogger.info).toHaveBeenCalledWith(expectedMessage)
   })
 
-  it('should render component', () => {
+  it('should render the message', () => {
     // Arrange
     const message = 'Hello World!'
 
@@ -91,6 +91,15 @@ describe('Application', () => {
     const response = renderToString(app.render({ data: { message } } as any))
 
     // Assert
-    expect(response).toMatchSnapshot()
+    expect(response).toContain(message)
+  })
+
+  it('should render the Stone.js logo', () => {
+    // Act
+    const response = renderToString(app.render({ data: { message: 'Hello World!' } } as any))
+
+    // Assert
+    expect(response).toContain('/logo.svg')
+    expect(response).toContain('alt="Stone.js"')
   })
 })

package/basic-react-imperative/app/Application.tsx

@@ -44,6 +44,7 @@ export const FactoryHandler = ({ logger }: AppOptions): IPage<ReactIncomingEvent
     render ({ data }: PageRenderContext<ResponseData>): JSX.Element {
       return (
         <section className='container'>
+          <img src='/logo.svg' alt='Stone.js' width={96} height={96} />
           <h1 className='h1 text-center mt-64'>{data?.message}</h1>
         </section>
       )

package/basic-react-imperative/package.json

@@ -20,16 +20,16 @@
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@stone-js/core": "^0.8.3",
-    "@stone-js/use-react": "^0.8.3",
-    "@stone-js/browser-adapter": "^0.8.3",
-    "@stone-js/node-cli-adapter": "^0.8.3"
+    "@stone-js/core": "^0.8.4",
+    "@stone-js/use-react": "^0.8.4",
+    "@stone-js/browser-adapter": "^0.8.4",
+    "@stone-js/node-cli-adapter": "^0.8.4"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-typescript": "^7.27.0",
-    "@stone-js/cli": "^0.8.3",
+    "@stone-js/cli": "^0.8.4",
     "@types/node": "^24.0.7",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",

package/basic-react-imperative/public/logo.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96" role="img" aria-label="Stone.js">
+  <title>Stone.js</title>
+  <style>
+    .ink { stroke: #1B1613; }
+    @media (prefers-color-scheme: dark) { .ink { stroke: #EFE8DC; } }
+  </style>
+  <defs>
+    <linearGradient id="braise" gradientUnits="userSpaceOnUse" x1="22" y1="14" x2="74" y2="26.1">
+      <stop offset="0" stop-color="#FFC46B" />
+      <stop offset="1" stop-color="#FF5A1F" />
+    </linearGradient>
+  </defs>
+  <path class="ink" d="M 79.96 36.4 A 34 34 0 0 1 53.9 81.5" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path class="ink" d="M 42.1 81.5 A 34 34 0 0 1 16.05 36.4" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path d="M 22 26.1 A 34 34 0 0 1 74 26.1" fill="none" stroke="url(#braise)" stroke-width="11" stroke-linecap="round" />
+</svg>

package/basic-react-imperative/tests/Application.spec.ts

@@ -55,7 +55,7 @@ describe('Application', () => {
     expect(mockedLogger.info).toHaveBeenCalledWith(expectedMessage)
   })
 
-  it('should render component', () => {
+  it('should render the message', () => {
     // Arrange
     const message = 'Hello World!'
 
@@ -63,7 +63,16 @@ describe('Application', () => {
     const response = renderToString(app.render({ data: { message } } as any))
 
     // Assert
-    expect(response).toMatchSnapshot()
+    expect(response).toContain(message)
+  })
+
+  it('should render the Stone.js logo', () => {
+    // Act
+    const response = renderToString(app.render({ data: { message: 'Hello World!' } } as any))
+
+    // Assert
+    expect(response).toContain('/logo.svg')
+    expect(response).toContain('alt="Stone.js"')
   })
 
   it('should get config', () => {

package/basic-service-declarative/package.json

@@ -18,15 +18,15 @@
     "test:cvg": "npm run test -- --coverage"
   },
   "dependencies": {
-    "@stone-js/core": "^0.8.3",
-    "@stone-js/node-cli-adapter": "^0.8.3",
-    "@stone-js/node-http-adapter": "^0.8.3"
+    "@stone-js/core": "^0.8.4",
+    "@stone-js/node-cli-adapter": "^0.8.4",
+    "@stone-js/node-http-adapter": "^0.8.4"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-typescript": "^7.27.0",
-    "@stone-js/cli": "^0.8.3",
+    "@stone-js/cli": "^0.8.4",
     "@types/node": "^24.0.7",
     "@vitest/coverage-v8": "^3.0.9",
     "vitest": "^3.0.9"

package/basic-service-imperative/package.json

@@ -18,15 +18,15 @@
     "test:cvg": "npm run test -- --coverage"
   },
   "dependencies": {
-    "@stone-js/core": "^0.8.3",
-    "@stone-js/node-cli-adapter": "^0.8.3",
-    "@stone-js/node-http-adapter": "^0.8.3"
+    "@stone-js/core": "^0.8.4",
+    "@stone-js/node-cli-adapter": "^0.8.4",
+    "@stone-js/node-http-adapter": "^0.8.4"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-typescript": "^7.27.0",
-    "@stone-js/cli": "^0.8.3",
+    "@stone-js/cli": "^0.8.4",
     "@types/node": "^24.0.7",
     "@vitest/coverage-v8": "^3.0.9",
     "vitest": "^3.0.9"

package/continuum-showcase/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright © 2026 Stone Foundation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/continuum-showcase/app/Application.ts

@@ -0,0 +1,45 @@
+import { Routing } from '@stone-js/router'
+import { UseReact } from '@stone-js/use-react'
+import { Browser } from '@stone-js/browser-adapter'
+import { NodeHttp } from '@stone-js/node-http-adapter'
+import { StoneApp, AdapterHookListenerContext, Hook, LogLevel, Logger } from '@stone-js/core'
+
+/**
+ * Application — the single entry point of the showcase.
+ *
+ * The whole point of the Continuum Architecture is here: you declare the CONTEXT once
+ * (the adapters + features below) and the same domain (the `@Page` handlers) runs under it,
+ * server-side and in the browser, unchanged.
+ *
+ * @NodeHttp() serves the pages over HTTP with server-side rendering.
+ * @Browser() re-hydrates and runs the very same pages client-side.
+ * @UseReact() plugs React in as the view engine.
+ * @Routing() enables the universal router the `@Page` classes register on.
+ * @StoneApp() bootstraps the application (required).
+ */
+@Routing()
+@Browser()
+@UseReact()
+@NodeHttp({ default: true })
+@StoneApp({ name: 'Stone.js Showcase', logger: { level: LogLevel.INFO } })
+export class Application {
+  /**
+   * Run before the application starts.
+   *
+   * @param blueprint - The blueprint.
+   */
+  @Hook('onStart')
+  onStart ({ blueprint }: AdapterHookListenerContext): void {
+    Logger.log(`${String(blueprint.get('stone.name', 'Stone App'))} is starting...`)
+  }
+
+  /**
+   * Run just before the application stops.
+   *
+   * @param blueprint - The blueprint.
+   */
+  @Hook('onStop')
+  onStop ({ blueprint }: AdapterHookListenerContext): void {
+    Logger.log(`${String(blueprint.get('stone.name', 'Stone App'))} is stopping...`)
+  }
+}

package/continuum-showcase/app/layouts/MainLayout.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { PageLayout } from '@stone-js/router'
-import { IPageLayout, PageLayoutRenderContext } from '@stone-js/use-react'
+import { PageLayout, IPageLayout, PageLayoutRenderContext } from '@stone-js/use-react'
 
 /**
  * The default layout. In a future iteration (hierarchical heads), a layout may also

package/continuum-showcase/app/pages/BlogPostPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Page } from '@stone-js/router'
 import {
+  Page,
   createHead,
   IPage,
   PageRenderContext,

package/continuum-showcase/app/pages/HomePage.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { Page } from '@stone-js/router'
-import logo from '@img/logo.png'
+import logo from '@img/logo.svg'
 import {
+  Page,
   createHead,
   IPage,
   PageRenderContext,

package/continuum-showcase/assets/css/index.css

@@ -0,0 +1,26 @@
+body {
+  margin: 0;
+  padding: 0;
+  color: #333;
+  font-size: 14px;
+  line-height: 1.5;
+  background-color: #fff;
+  font-family: 'Roboto', sans-serif;
+}
+.h1 {
+  margin: 0;
+  font-size: 3rem;
+  font-weight: 500;
+  font-weight: bold;
+}
+.container {
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+}
+.text-center {
+  text-align: center;
+}
+.mt-64 {
+  margin-top: 64px;
+}

package/continuum-showcase/assets/images/logo.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96" role="img" aria-label="Stone.js">
+  <title>Stone.js</title>
+  <style>
+    .ink { stroke: #1B1613; }
+    @media (prefers-color-scheme: dark) { .ink { stroke: #EFE8DC; } }
+  </style>
+  <defs>
+    <linearGradient id="braise" gradientUnits="userSpaceOnUse" x1="22" y1="14" x2="74" y2="26.1">
+      <stop offset="0" stop-color="#FFC46B" />
+      <stop offset="1" stop-color="#FF5A1F" />
+    </linearGradient>
+  </defs>
+  <path class="ink" d="M 79.96 36.4 A 34 34 0 0 1 53.9 81.5" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path class="ink" d="M 42.1 81.5 A 34 34 0 0 1 16.05 36.4" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path d="M 22 26.1 A 34 34 0 0 1 74 26.1" fill="none" stroke="url(#braise)" stroke-width="11" stroke-linecap="round" />
+</svg>

package/continuum-showcase/package.json

@@ -3,23 +3,35 @@
   "version": "0.0.0",
   "private": true,
   "type": "module",
-  "description": "Showcase app exercising the new head/OG API and static-asset aliases (2026-07 continuum pass).",
+  "description": "Continuum showcase: one domain rendered server-side and in the browser, with the fluent head/OpenGraph API and static-asset aliases.",
   "scripts": {
     "dev": "stone dev",
     "build": "stone build",
-    "preview": "stone preview"
+    "build:ssr": "stone build --ssr",
+    "preview": "stone preview",
+    "test": "vitest run",
+    "test:cvg": "npm run test -- --coverage"
   },
   "dependencies": {
-    "@stone-js/browser-adapter": "^0.8.3",
-    "@stone-js/core": "^0.8.3",
-    "@stone-js/node-http-adapter": "^0.8.3",
-    "@stone-js/router": "^0.8.3",
-    "@stone-js/use-react": "^0.8.3",
-    "@stone-js/use-view": "^0.8.3",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "@stone-js/core": "^0.8.4",
+    "@stone-js/router": "^0.8.4",
+    "@stone-js/use-react": "^0.8.4",
+    "@stone-js/http-core": "^0.8.4",
+    "@stone-js/pipeline": "^0.8.4",
+    "@stone-js/browser-adapter": "^0.8.4",
+    "@stone-js/node-http-adapter": "^0.8.4"
   },
   "devDependencies": {
-    "@stone-js/cli": "^0.8.3"
+    "@babel/plugin-proposal-decorators": "^7.25.9",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-typescript": "^7.27.0",
+    "@stone-js/cli": "^0.8.4",
+    "@types/node": "^24.0.7",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "@vitest/coverage-v8": "^3.0.9",
+    "vitest": "^3.0.9"
   }
 }

package/continuum-showcase/tests/HomePage.spec.tsx

@@ -0,0 +1,40 @@
+import { renderToString } from 'react-dom/server'
+import { HomePage } from '../app/pages/HomePage'
+
+// Mock the page decorator so the class can be instantiated without a running app context.
+vi.mock('@stone-js/use-react', async (importOriginal) => {
+  const actual: any = await importOriginal()
+  return {
+    ...actual,
+    Page: vi.fn(() => vi.fn())
+  }
+})
+
+describe('HomePage', () => {
+  it('returns the domain message from handle', () => {
+    // Arrange
+    const page = new HomePage()
+
+    // Act
+    const data = page.handle()
+
+    // Assert
+    expect(data.message).toBe('Write your domain once. Stone.js applies the context.')
+  })
+
+  it('renders the Stone.js logo and the message', () => {
+    // Arrange
+    const page = new HomePage()
+
+    // Act
+    const html = renderToString(page.render({ data: page.handle() } as any))
+
+    // Assert: the Stone.js logo is rendered (Vite inlines the small SVG as a data URI),
+    // alongside the title and the domain message.
+    expect(html).toContain('<img')
+    expect(html).toContain('image/svg+xml')
+    expect(html).toContain('alt="Stone.js"')
+    expect(html).toContain('Stone.js Showcase')
+    expect(html).toContain('Write your domain once')
+  })
+})

package/continuum-showcase/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "resolveJsonModule": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "types": ["node", "vite/client", "vitest/globals"],
+  },
+  "include": [
+    "app",
+    "tests",
+    "vitest.config.ts"
+  ]
+}

package/continuum-showcase/vitest.config.ts

@@ -0,0 +1,31 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  // Mirror the CLI's static-asset aliases (see stone.config.mjs) so component imports like
+  // `import logo from '@img/logo.svg'` also resolve under the test runner.
+  resolve: {
+    alias: {
+      '@img': fileURLToPath(new URL('./assets/images', import.meta.url)),
+      '@css': fileURLToPath(new URL('./assets/css', import.meta.url)),
+      '@assets': fileURLToPath(new URL('./assets', import.meta.url))
+    }
+  },
+  test: {
+    globals: true,
+    environment: 'node',
+    include: ['./tests/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
+    coverage: {
+      provider: 'v8',
+      include: ['app/**/*.ts', 'app/**/*.tsx'],
+      reporter: ['text', 'html'],
+      reportsDirectory: './coverage',
+      watermarks: {
+        statements: [60, 80],
+        functions: [60, 80],
+        branches: [60, 80],
+        lines: [60, 80]
+      }
+    }
+  }
+})

package/full-react-declarative/app/layout/AppLayout/AppLayout.tsx

@@ -48,7 +48,7 @@ export class AppLayout implements IPageLayout {
         <header>
           <p>
             <StoneLink to='/' className='logo'>
-              <img src='/logo.png' alt='Stone.js Logo' />
+              <img src='/logo.svg' alt='Stone.js' width={96} height={96} />
               <span>Stone.js</span>
             </StoneLink>
           </p>

package/full-react-declarative/app/layout/ErrorLayout/ErrorLayout.tsx

@@ -19,7 +19,7 @@ export class ErrorLayout implements IPageLayout {
         <header className='mt-64'>
           <div className='container'>
             <p className='pa-24'>
-              <img src='/logo.png' className='logo' alt='Stone.js Logo' />
+              <img src='/logo.svg' className='logo' alt='Stone.js' />
             </p>
           </div>
         </header>

package/full-react-declarative/app/layout/SecurityLayout/SecurityLayout.tsx

@@ -19,7 +19,7 @@ export class SecurityLayout implements IPageLayout {
         <header className='mt-64'>
           <div className='container'>
             <p className='pa-24'>
-              <img src='/logo.png' className='logo' alt='Stone.js Logo' />
+              <img src='/logo.svg' className='logo' alt='Stone.js' />
             </p>
           </div>
         </header>

package/full-react-declarative/package.json

@@ -18,15 +18,15 @@
     "test:cvg": "npm run test -- --coverage"
   },
   "dependencies": {
-    "@stone-js/env": "^0.8.3",
-    "@stone-js/http-core": "^0.8.3",
-    "@stone-js/node-http-adapter": "^0.8.3",
-    "@stone-js/router": "^0.8.3",
-    "@stone-js/filesystem": "^0.8.3",
-    "@stone-js/core": "^0.8.3",
-    "@stone-js/use-react": "^0.8.3",
-    "@stone-js/browser-adapter": "^0.8.3",
-    "@stone-js/node-cli-adapter": "^0.8.3",
+    "@stone-js/env": "^0.8.4",
+    "@stone-js/http-core": "^0.8.4",
+    "@stone-js/node-http-adapter": "^0.8.4",
+    "@stone-js/router": "^0.8.4",
+    "@stone-js/filesystem": "^0.8.4",
+    "@stone-js/core": "^0.8.4",
+    "@stone-js/use-react": "^0.8.4",
+    "@stone-js/browser-adapter": "^0.8.4",
+    "@stone-js/node-cli-adapter": "^0.8.4",
     "axios": "^1.7.9",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -35,7 +35,7 @@
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-typescript": "^7.27.0",
-    "@stone-js/cli": "^0.8.3",
+    "@stone-js/cli": "^0.8.4",
     "@types/axios": "^0.14.4",
     "@types/node": "^24.0.7",
     "@types/react": "^19.0.7",

package/full-react-declarative/public/logo.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96" role="img" aria-label="Stone.js">
+  <title>Stone.js</title>
+  <style>
+    .ink { stroke: #1B1613; }
+    @media (prefers-color-scheme: dark) { .ink { stroke: #EFE8DC; } }
+  </style>
+  <defs>
+    <linearGradient id="braise" gradientUnits="userSpaceOnUse" x1="22" y1="14" x2="74" y2="26.1">
+      <stop offset="0" stop-color="#FFC46B" />
+      <stop offset="1" stop-color="#FF5A1F" />
+    </linearGradient>
+  </defs>
+  <path class="ink" d="M 79.96 36.4 A 34 34 0 0 1 53.9 81.5" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path class="ink" d="M 42.1 81.5 A 34 34 0 0 1 16.05 36.4" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path d="M 22 26.1 A 34 34 0 0 1 74 26.1" fill="none" stroke="url(#braise)" stroke-width="11" stroke-linecap="round" />
+</svg>

package/full-react-declarative/tests/AppLayout.spec.ts

@@ -0,0 +1,51 @@
+import { renderToString } from 'react-dom/server'
+import { AppLayout } from '../app/layout/AppLayout/AppLayout'
+
+// We must mock decorators and router-bound components to lighten the test environment
+vi.mock('@stone-js/use-react', async (importOriginal) => {
+  const actual: any = await importOriginal()
+  return {
+    ...actual,
+    PageLayout: vi.fn(() => vi.fn()),
+    StoneLink: ({ children }: any) => children,
+    StoneOutlet: ({ children }: any) => children
+  }
+})
+
+describe('AppLayout', () => {
+  let layout: AppLayout
+
+  beforeEach(() => {
+    layout = new AppLayout({} as any)
+  })
+
+  const render = (): string => {
+    const container = {
+      make: () => ({ getUser: () => undefined })
+    }
+    return renderToString(layout.render({ container, children: null } as any))
+  }
+
+  it('should create an App Layout instance', () => {
+    // Assert
+    expect(layout).toBeInstanceOf(AppLayout)
+  })
+
+  it('should render the real Stone.js logo', () => {
+    // Act
+    const html = render()
+
+    // Assert
+    expect(html).toContain('/logo.svg')
+    expect(html).toContain('alt="Stone.js"')
+  })
+
+  it('should render the unauthenticated header', () => {
+    // Act
+    const html = render()
+
+    // Assert
+    expect(html).toContain('Login')
+    expect(html).toContain('Stone.js')
+  })
+})

package/full-react-imperative/app/components/LayoutHeader/LayoutHeader.tsx

@@ -27,7 +27,7 @@ export const LayoutHeader: FC<LayoutHeaderOptions> = ({ container }) => {
     <nav className='app-navbar'>
       <div className='header-left'>
         <StoneLink to='/' className='logo'>
-          <img src='/logo.png' alt='Stone.js Logo' />
+          <img src='/logo.svg' alt='Stone.js' width={96} height={96} />
           <span>Stone.js</span>
         </StoneLink>
       </div>