@stone-js/starters 0.8.3 → 0.8.5

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/app/middleware/AuthMiddleware.ts

@@ -18,7 +18,7 @@ export interface AuthMiddlewareOptions {
  */
 @Middleware({
   global: true,
-  params: [['/login', '/register']]
+  params: [['/', '/login', '/register']]
 })
 export class AuthMiddleware implements IMiddleware<ReactIncomingEvent, ReactOutgoingResponse> {
   private readonly snapshot: ISnapshot

package/full-react-declarative/app/pages/home/HomePage.tsx

@@ -8,8 +8,8 @@ import { IPage, Page, ReactIncomingEvent, StoneLink, HeadContext } from '@stone-
 export class HomePage implements IPage<ReactIncomingEvent> {
   head (): HeadContext {
     return {
-      title: 'Home',
-      description: 'Welcome to the Stone.js Blog Dashboard'
+      title: 'Welcome to Stone.js',
+      description: 'Stone.js Blog Dashboard — write your domain once, Stone.js is the context that runs it anywhere.'
     }
   }
 
@@ -20,25 +20,26 @@ export class HomePage implements IPage<ReactIncomingEvent> {
    */
   render (): JSX.Element {
     return (
-      <div>
-        <h1>Stone.js Blog Dashboard</h1>
-        <p>Welcome to the Stone.js Blog Dashboard.</p>
-        <div>
-          <h2>Posts</h2>
-          <p>View the latest posts from the Stone.js Blog.</p>
-          <StoneLink to='/posts'>View Posts</StoneLink>
-        </div>
-        <div>
-          <h2>Users</h2>
-          <p>View the latest users from the Stone.js Blog.</p>
-          <StoneLink to='/users'>View Users</StoneLink>
-        </div>
-        <div>
-          <h2>Manage</h2>
-          <p>Manage your profile</p>
-          <StoneLink to='/manage'>Manage</StoneLink>
-        </div>
-      </div>
+      <main className='stone-welcome'>
+        <div className='glow' aria-hidden='true' />
+        <section className='hero'>
+          <img className='mark' src='/logo.svg' alt='Stone.js' width={104} height={104} />
+          <p className='eyebrow'>Welcome to</p>
+          <h1 className='title'>Stone.js</h1>
+          <p className='lead'>Your Blog Dashboard is running.</p>
+          <p className='tagline'>
+            Write your domain once, Stone.js is the context that runs it anywhere:
+            server, serverless, browser, CLI and the edge.
+          </p>
+          <nav className='links'>
+            <StoneLink to='/posts'>Browse Posts</StoneLink>
+            <StoneLink to='/users'>Browse Users</StoneLink>
+            <a href='https://stonejs.dev/docs' target='_blank' rel='noreferrer noopener'>Documentation</a>
+            <a href='https://github.com/stone-foundation/stone-js-framework' target='_blank' rel='noreferrer noopener'>GitHub</a>
+          </nav>
+        </section>
+        <footer className='brand'><span className='dot'>●</span> Stone.js — the continuum framework</footer>
+      </main>
     )
   }
 }

package/full-react-declarative/assets/css/index.css

@@ -299,3 +299,170 @@ h1, h2, h3, h4, h5, h6 {
   background: #FEE2E2;
   border-left: 4px solid #EF4444;
 }
+
+/**
+ * Stone.js brand welcome hero — "Obsidienne & Braise".
+ * Fully scoped under .stone-welcome so it never clashes with the app's styles.
+ * Theme-aware: dark by default, light under prefers-color-scheme: light.
+ */
+:root {
+  --sw-ink: #14100E;
+  --sw-ink-2: #1E1815;
+  --sw-cream: #F4EFE6;
+  --sw-cream-dim: #B8AE9E;
+  --sw-ember-1: #FFC46B;
+  --sw-ember-2: #FF5A1F;
+  --sw-line: rgba(244, 239, 230, 0.10);
+  --sw-card: rgba(244, 239, 230, 0.04);
+  --sw-bg: radial-gradient(1200px 600px at 50% -10%, #241C17 0%, var(--sw-ink) 55%);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --sw-ink: #F4EFE6;
+    --sw-ink-2: #ffffff;
+    --sw-cream: #1B1613;
+    --sw-cream-dim: #6B6154;
+    --sw-line: rgba(27, 22, 19, 0.10);
+    --sw-card: rgba(27, 22, 19, 0.03);
+    --sw-bg: radial-gradient(1200px 600px at 50% -10%, #FFFFFF 0%, #F1E9DC 60%);
+  }
+}
+
+.stone-welcome,
+.stone-welcome * { box-sizing: border-box; }
+
+.stone-welcome {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  color: var(--sw-cream);
+  background: var(--sw-bg);
+  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+}
+
+/* Ember glow behind the mark. */
+.stone-welcome .glow {
+  position: absolute;
+  top: 8%;
+  left: 50%;
+  width: 520px;
+  height: 520px;
+  transform: translateX(-50%);
+  background: radial-gradient(circle, rgba(255, 90, 31, 0.22) 0%, rgba(255, 90, 31, 0) 68%);
+  filter: blur(8px);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.stone-welcome .hero {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 680px;
+  text-align: center;
+  animation: sw-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+
+.stone-welcome .mark {
+  width: 104px;
+  height: 104px;
+  filter: drop-shadow(0 8px 28px rgba(255, 90, 31, 0.35));
+}
+
+.stone-welcome .eyebrow {
+  margin: 22px 0 0;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--sw-cream-dim);
+}
+
+.stone-welcome .title {
+  margin: 8px 0 0;
+  font-size: clamp(44px, 8vw, 76px);
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  line-height: 1.02;
+  background: linear-gradient(92deg, var(--sw-ember-1), var(--sw-ember-2));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.stone-welcome .lead {
+  margin: 18px auto 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--sw-cream);
+}
+
+.stone-welcome .tagline {
+  margin: 10px auto 0;
+  max-width: 46ch;
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--sw-cream-dim);
+}
+
+.stone-welcome .links {
+  margin-top: 34px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: center;
+}
+
+.stone-welcome .links a,
+.stone-welcome .links .edit {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 11px 18px;
+  border: 1px solid var(--sw-line);
+  border-radius: 12px;
+  background: var(--sw-card);
+  color: var(--sw-cream);
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: border-color 0.2s, transform 0.2s, background 0.2s;
+}
+
+.stone-welcome .links a:hover {
+  transform: translateY(-2px);
+  border-color: rgba(255, 90, 31, 0.6);
+  background: rgba(255, 90, 31, 0.08);
+}
+
+.stone-welcome .links .edit {
+  font-family: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
+  color: var(--sw-cream-dim);
+}
+.stone-welcome .links .edit b { color: var(--sw-ember-1); font-weight: 700; }
+
+.stone-welcome .brand {
+  position: relative;
+  z-index: 1;
+  margin-top: 56px;
+  font-size: 13px;
+  letter-spacing: 0.02em;
+  color: var(--sw-cream-dim);
+}
+.stone-welcome .brand .dot { color: var(--sw-ember-2); }
+
+@keyframes sw-rise {
+  from { opacity: 0; transform: translateY(14px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .stone-welcome .hero { animation: none; }
+}

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.5",
+    "@stone-js/http-core": "^0.8.5",
+    "@stone-js/node-http-adapter": "^0.8.5",
+    "@stone-js/router": "^0.8.5",
+    "@stone-js/filesystem": "^0.8.5",
+    "@stone-js/core": "^0.8.5",
+    "@stone-js/use-react": "^0.8.5",
+    "@stone-js/browser-adapter": "^0.8.5",
+    "@stone-js/node-cli-adapter": "^0.8.5",
     "axios": "^1.7.9",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -35,12 +35,15 @@
     "@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.5",
     "@types/axios": "^0.14.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"
+  },
+  "overrides": {
+    "glob": "^11.0.0"
   }
 }

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-declarative/tests/HomePage.spec.ts

@@ -0,0 +1,38 @@
+import { renderToString } from 'react-dom/server'
+import { HomePage } from '../app/pages/home/HomePage'
+
+// We must mock the @Page decorator and router-bound components to lighten the test environment
+vi.mock('@stone-js/use-react', async (importOriginal) => {
+  const actual: any = await importOriginal()
+  return {
+    ...actual,
+    Page: vi.fn(() => vi.fn()),
+    StoneLink: ({ children }: any) => children
+  }
+})
+
+describe('HomePage', () => {
+  const render = (): string => {
+    const page = new HomePage()
+    return renderToString(page.render())
+  }
+
+  it('should render the premium Stone.js welcome hero with the real logo', () => {
+    // Act
+    const html = render()
+
+    // Assert
+    expect(html).toContain('/logo.svg')
+    expect(html).toContain('alt="Stone.js"')
+  })
+
+  it('should render the Welcome to Stone.js headline', () => {
+    // Act
+    const html = render()
+
+    // Assert
+    expect(html).toContain('Welcome')
+    expect(html).toContain('Stone.js')
+    expect(html).toContain('stone-welcome')
+  })
+})

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>

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

@@ -2,9 +2,9 @@ import { User } from '../../models/User'
 import { Post } from '../../models/Post'
 import { deletePost } from '../../pages/utils'
 import { PostCard } from '../PostCard/PostCard'
-import PullToRefresh from 'react-pull-to-refresh'
 import { IContainer, ILogger } from '@stone-js/core'
 import { FC, useEffect, useRef, useState } from 'react'
+import { PullToRefresh } from '../PullToRefresh/PullToRefresh'
 import { PostSkeleton } from '../PostSkeleton/PostSkeleton'
 import { CommentWidget } from '../CommentWidget/CommentWidget'
 import { IRouter, ReactIncomingEvent } from '@stone-js/use-react'

package/full-react-imperative/app/components/PullToRefresh/PullToRefresh.css

@@ -0,0 +1,10 @@
+.pull-to-refresh {
+  will-change: transform;
+}
+
+.pull-to-refresh__indicator {
+  text-align: center;
+  padding: 8px 0;
+  font-size: 0.85rem;
+  opacity: 0.7;
+}

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

@@ -0,0 +1,66 @@
+import './PullToRefresh.css'
+import { FC, ReactNode, TouchEvent, useRef, useState } from 'react'
+
+/**
+ * PullToRefresh options.
+ */
+export interface PullToRefreshOptions {
+  children: ReactNode
+  threshold?: number
+  onRefresh: () => Promise<void> | void
+}
+
+/**
+ * Lightweight, SSR-safe pull-to-refresh wrapper.
+ *
+ * Implemented in-app (with no dependency that touches `window` at import time)
+ * so it renders safely during server-side rendering and static route
+ * generation. The pull gesture is a progressive enhancement that only activates
+ * from touch interactions on the client.
+ */
+export const PullToRefresh: FC<PullToRefreshOptions> = ({ children, onRefresh, threshold = 64 }) => {
+  const startY = useRef<number | null>(null)
+  const [pullY, setPullY] = useState(0)
+  const [refreshing, setRefreshing] = useState(false)
+
+  const onTouchStart = (event: TouchEvent): void => {
+    if (refreshing) { return }
+    // Only start a pull when the page is scrolled to the very top.
+    if (document.documentElement.scrollTop <= 0) {
+      startY.current = event.touches[0].clientY
+    }
+  }
+
+  const onTouchMove = (event: TouchEvent): void => {
+    if (startY.current === null || refreshing) { return }
+    const delta = event.touches[0].clientY - startY.current
+    if (delta > 0) { setPullY(Math.min(delta, threshold * 1.5)) }
+  }
+
+  const onTouchEnd = (): void => {
+    if (startY.current === null) { return }
+    const shouldRefresh = pullY >= threshold
+    startY.current = null
+    setPullY(0)
+    if (shouldRefresh) {
+      setRefreshing(true)
+      void Promise.resolve(onRefresh()).finally(() => setRefreshing(false))
+    }
+  }
+
+  return (
+    <div
+      className='pull-to-refresh'
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}
+      style={{
+        transform: pullY > 0 ? `translateY(${pullY}px)` : undefined,
+        transition: pullY > 0 ? 'none' : 'transform .2s ease'
+      }}
+    >
+      {refreshing && <div className='pull-to-refresh__indicator'>Refreshing…</div>}
+      {children}
+    </div>
+  )
+}

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

@@ -18,7 +18,7 @@ export const ErrorLayout = (): 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-imperative/app/layout/SecurityLayout/SecurityLayout.tsx

@@ -18,7 +18,7 @@ export const SecurityLayout = (): 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-imperative/app/middleware/AuthMiddleware.ts

@@ -52,5 +52,5 @@ export const AuthMiddleware = ({
  */
 export const AuthMiddlewareBlueprint = defineMiddleware(
   AuthMiddleware,
-  { global: true, params: [['/login', '/register']], isFactory: true }
+  { global: true, params: [['/', '/login', '/register']], isFactory: true }
 )