@stacksjs/defaults 0.70.54

package/resources/functions/dashboard/system.ts

@@ -0,0 +1,150 @@
+/**
+ * System-level dashboard helpers — service health probes, env / config
+ * snapshots. Read-only; safe to call on every page render.
+ */
+
+import { existsSync, readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import process from 'node:process'
+
+import { loadModel, safeAll } from './data'
+
+export interface ServiceStatus {
+  name: string
+  status: 'healthy' | 'degraded' | 'offline' | 'unknown'
+  detail: string
+}
+
+let projectRootCache: string | null = null
+function projectRoot(): string {
+  if (projectRootCache) return projectRootCache
+  let dir = process.cwd()
+  for (let i = 0; i < 8; i++) {
+    if (existsSync(resolve(dir, 'storage/framework/defaults'))) {
+      projectRootCache = dir
+      return dir
+    }
+    const parent = resolve(dir, '..')
+    if (parent === dir) break
+    dir = parent
+  }
+  projectRootCache = process.cwd()
+  return projectRootCache
+}
+
+/**
+ * Probe each core service's status. The "probe" for the database is
+ * just a User.count() — if it resolves we know the connection works and
+ * the schema migrated. The other services don't have a cheap dev-time
+ * probe yet, so they report "unknown" with a hint about how to test.
+ */
+export async function getServiceHealth(): Promise<ServiceStatus[]> {
+  const out: ServiceStatus[] = []
+
+  // Database
+  try {
+    const User = await loadModel('User')
+    if (User?._isStub) {
+      out.push({ name: 'Database', status: 'unknown', detail: 'Model not loaded' })
+    }
+    else {
+      const count = typeof User.count === 'function' ? await User.count() : (await safeAll(User)).length
+      out.push({
+        name: 'Database',
+        status: count > 0 ? 'healthy' : 'degraded',
+        detail: count > 0 ? `${count} users` : 'Schema reachable, no rows — run buddy seed',
+      })
+    }
+  }
+  catch (e: any) {
+    out.push({ name: 'Database', status: 'offline', detail: e?.message || 'Connection failed' })
+  }
+
+  // Cache — read driver from env, no live ping yet
+  const cacheDriver = process.env.CACHE_DRIVER || 'memory'
+  out.push({ name: 'Cache', status: 'healthy', detail: `${cacheDriver} driver` })
+
+  // Queue
+  const queueDriver = process.env.QUEUE_CONNECTION || 'sync'
+  try {
+    const Job = await loadModel('Job')
+    const FailedJob = await loadModel('FailedJob')
+    const pending = await safeAll(Job)
+    const failed = await safeAll(FailedJob)
+    out.push({
+      name: 'Queue',
+      status: failed.length > 0 ? 'degraded' : 'healthy',
+      detail: `${queueDriver} · ${pending.length} pending, ${failed.length} failed`,
+    })
+  }
+  catch {
+    out.push({ name: 'Queue', status: 'unknown', detail: `${queueDriver} driver` })
+  }
+
+  // Storage
+  const storageDriver = process.env.FILESYSTEM_DISK || 'local'
+  const publicDir = resolve(projectRoot(), 'storage/app/public')
+  out.push({
+    name: 'Storage',
+    status: existsSync(publicDir) ? 'healthy' : 'degraded',
+    detail: `${storageDriver} disk`,
+  })
+
+  return out
+}
+
+export interface EnvSummary {
+  appEnv: string
+  appUrl: string
+  nodeVersion: string
+  bunVersion: string
+  dbDriver: string
+  dbPath: string
+  cacheDriver: string
+  queueDriver: string
+  mailDriver: string
+  storageDriver: string
+}
+
+/**
+ * Snapshot env-driven configuration for the Environment / Settings pages.
+ * Strips secrets — only driver names and non-sensitive paths are exposed.
+ */
+export function getEnvSummary(): EnvSummary {
+  return {
+    appEnv: process.env.NODE_ENV || process.env.APP_ENV || 'development',
+    appUrl: process.env.APP_URL || 'http://localhost:3000',
+    nodeVersion: process.version,
+    bunVersion: typeof Bun !== 'undefined' ? Bun.version : 'n/a',
+    dbDriver: process.env.DB_CONNECTION || 'sqlite',
+    dbPath: process.env.DB_DATABASE_PATH || 'database/stacks.sqlite',
+    cacheDriver: process.env.CACHE_DRIVER || 'memory',
+    queueDriver: process.env.QUEUE_CONNECTION || 'sync',
+    mailDriver: process.env.MAIL_MAILER || 'log',
+    storageDriver: process.env.FILESYSTEM_DISK || 'local',
+  }
+}
+
+/**
+ * Read the project's root package.json. Used by the Library / Home
+ * pages to display project metadata.
+ */
+export function readPackageJson(): { name: string, version: string, dependencies: Record<string, string>, devDependencies: Record<string, string> } {
+  const root = projectRoot()
+  const file = resolve(root, 'package.json')
+  if (!existsSync(file)) {
+    return { name: 'unknown', version: '0.0.0', dependencies: {}, devDependencies: {} }
+  }
+  try {
+    const json = JSON.parse(readFileSync(file, 'utf8'))
+    return {
+      name: json.name || 'unknown',
+      version: json.version || '0.0.0',
+      dependencies: json.dependencies || {},
+      devDependencies: json.devDependencies || {},
+    }
+  }
+  catch {
+    return { name: 'unknown', version: '0.0.0', dependencies: {}, devDependencies: {} }
+  }
+}

package/resources/layouts/403.stx

@@ -0,0 +1,188 @@
+<script server>
+const appName = props.appName || 'Your App'
+const supportEmail = props.supportEmail || 'support@example.com'
+</script>
+
+<div class="flex flex-col lg:flex-row min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
+  <!-- Left side content -->
+  <div class="flex items-center justify-center p-8 w-full lg:w-1/2">
+    <div class="max-w-xl w-full">
+      <div class="flex items-center justify-between mb-16">
+        <div class="flex items-center space-x-2">
+          <h1 class="font-bold text-slate-900 text-xl">{{ appName }}</h1>
+        </div>
+      </div>
+
+      <div class="">
+        <h2 class="mb-4 font-bold text-6xl text-slate-900">
+          Access Denied
+        </h2>
+        <p class="mb-8 font-bold text-8xl bounce" style="animation-duration: 1s; animation-iteration-count: 2;">
+          403
+        </p>
+        <p class="mb-8 text-slate-600 text-xl">
+          Sorry, you don't have permission to access this page.
+        </p>
+
+        <div class="flex gap-4 sm:flex-row">
+          <a
+            href="/"
+            class="flex items-center justify-center px-6 py-3 w-full sm:w-auto text-white bg-slate-500 hover:bg-slate-600 rounded-lg duration-200 transition-colors"
+          >
+            <i class="mr-2 h-5 w-5 i-hugeicons-home-03"></i>
+            Back to Home
+          </a>
+
+          <a
+            href="javascript:history.back()"
+            class="flex items-center justify-center px-6 py-3 w-full sm:w-auto text-slate-700 hover:bg-slate-50 border border-slate-300 rounded-lg duration-200 transition-colors"
+          >
+            <i class="mr-2 h-5 w-5 i-hugeicons-arrow-left-02"></i>
+            Go Back
+          </a>
+        </div>
+      </div>
+
+      <div class="mt-16 pt-8 border-slate-200 border-t">
+        <p class="text-slate-600">
+          Need help? Contact us at
+          <a href="mailto:{{ supportEmail }}" class="text-slate-500 hover:text-slate-600">
+            {{ supportEmail }}
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Right side SVG -->
+  <div class="flex overflow-hidden relative items-center justify-center h-[100vh] w-full lg:w-1/2">
+    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <defs>
+        <linearGradient id="a" x1="50%" x2="50%" y1="100%" y2="0%">
+          <stop offset="0" stop-color="#76c3c3"/>
+          <stop offset="1" stop-color="#183468"/>
+        </linearGradient>
+        <linearGradient id="b" x1="100%" x2="0%" y1="50%" y2="50%">
+          <stop offset="0" stop-color="#486587"/>
+          <stop offset=".3323" stop-color="#183352"/>
+          <stop offset=".6667" stop-color="#264a6e"/>
+          <stop offset="1" stop-color="#183352"/>
+        </linearGradient>
+        <linearGradient id="c" x1="49.87%" x2="48.5%" y1="3.62%" y2="100%">
+          <stop offset="0" stop-color="#e0f2fa"/>
+          <stop offset=".0898" stop-color="#89bed6"/>
+          <stop offset=".3298" stop-color="#1e3c6e"/>
+          <stop offset="1" stop-color="#1b376b"/>
+        </linearGradient>
+        <linearGradient id="d">
+          <stop offset="0" stop-color="#b0ddf1"/>
+          <stop offset="1" stop-color="#325c82"/>
+        </linearGradient>
+        <linearGradient id="e" x1="49.87%" x2="49.87%" xlink:href="#d" y1="3.62%" y2="77.75%"/>
+        <linearGradient id="f">
+          <stop offset="0" stop-color="#1d3a6d"/>
+          <stop offset="1" stop-color="#467994"/>
+        </linearGradient>
+        <linearGradient id="g" x1="91.59%" x2="66.97%" xlink:href="#f" y1="5.89%" y2="100%"/>
+        <linearGradient id="h" x1="97.27%" x2="52.53%" xlink:href="#f" y1="6.88%" y2="100%"/>
+        <linearGradient id="i" x1="82.73%" x2="41.46%" xlink:href="#f" y1="41.06%" y2="167.23%"/>
+        <linearGradient id="j" x1="49.87%" x2="49.87%" xlink:href="#d" y1="3.62%" y2="100.77%"/>
+        <linearGradient id="k" x1="100%" x2="72.45%" xlink:href="#f" y1="0%" y2="85.2%"/>
+        <linearGradient id="l" x1="100%" x2="62.1%" y1="0%" y2="68.86%">
+          <stop offset="0" stop-color="#163055"/>
+          <stop offset="1" stop-color="#2f587f"/>
+        </linearGradient>
+        <circle id="m" cx="180" cy="102" r="40"/>
+        <filter id="n" height="340%" width="340%" x="-120%" y="-120%">
+          <feOffset in="SourceAlpha" result="shadowOffsetOuter1"/>
+          <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="32"/>
+          <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.696473053 0"/>
+        </filter>
+        <linearGradient id="o" x1="0%" y1="50%" y2="50%">
+          <stop offset="0" stop-color="#fff" stop-opacity="0"/>
+          <stop offset="1" stop-color="#fff"/>
+        </linearGradient>
+      </defs>
+      <g fill="none" fill-rule="evenodd">
+        <path d="m0 0h1024v1024h-1024z" fill="url(#a)"/>
+        <g transform="translate(761 481)">
+          <path d="m96 27 4-1v11h-4z" fill="#8dbcd2"/>
+          <path d="m76 23 4-1v15h-4z" fill="#8dbcd2"/>
+          <g fill="#183352">
+            <path d="m40 22 4 1v14h-4z"/>
+            <path d="m20 26 4 1v14h-4z"/>
+            <path d="m59 0h2v20h-2z" opacity=".5"/>
+          </g>
+          <path d="m61 0c3 0 3 2 6 2s3-2 6-2 3 2 6 2v8c-3 0-3-2-6-2s-3 2-6 2-3-2-6-2z" fill="url(#b)"/>
+          <path d="m50 20 10-2v110h-60l10-100 10-2v10.92l10-.98v-11.94l10-2v12.96l10-.98z" fill="#8dbcd2"/>
+          <path d="m100 26 10 2 10 100h-60v-110l10 2v13.98l10 .98v-12.96l10 2v11.94l10 .98z" fill="#183352"/>
+        </g>
+        <g transform="translate(0 565)">
+          <path d="m1024 385h-1024v-278.14c118.4 21.09 185.14 57.03 327.4 48.14 198.54-12.4 250-125 500-125 90.18 0 147.92 16.3 196.6 37.12z" fill="url(#c)"/>
+          <path d="m1024 355h-1024v-275.44c76.46-35.75 137.14-79.56 285-79.56 250 0 301.46 112.6 500 125 103.24 6.45 166.7-10.7 239-28.66z" fill="url(#e)"/>
+          <path d="m344.12 130.57c23.1 13.47-25.27 81.95-145.12 205.43h649c-344.06-141.7-512.02-210.17-503.88-205.43z" fill="url(#e)"/>
+          <path d="m0 336v-256.44c76.46-35.75 137.14-79.56 285-79.56 71.14 0 86.22 26.04 32.5 82-48 50 147.33 58.02 36 136.5-40.67 28.67 21.17 67.83 185.5 117.5z" fill="url(#g)"/>
+          <path d="m317.5 82c-48 50 147.33 58.02 36 136.5-40.67 28.67 21.17 67.83 185.5 117.5h-484z" fill="url(#h)"/>
+          <path d="m353.5 218.5c-40.67 28.67 21.17 67.83 185.5 117.5h-364z" fill="url(#i)"/>
+          <path d="m0 459v-194.46c100.25 21.2 167.18 50.29 296.67 42.19 198.57-12.43 250.04-125.15 500.07-125.15 109.75 0 171.47 24.16 227.26 51.25v226.17z" fill="url(#j)"/>
+          <path d="m1024 459h-177.84c51.95-58.9 48.86-97.16-9.28-114.78-186.64-56.58-101.76-162.64-39.97-162.64 109.64 0 171.34 24.12 227.09 51.19z" fill="url(#k)"/>
+          <path d="m1024 459h-177.81c52.01-59.01 48.94-97.34-9.22-115l187.03 53.48z" fill="url(#l)"/>
+        </g>
+        <g id="moonGroup">
+          <g transform="translate(94 23)">
+            <use fill="#000" filter="url(#n)" xlink:href="#m"/>
+            <use fill="#d2f1fe" xlink:href="#m"/>
+          </g>
+        </g>
+        <g transform="translate(94 23)">
+          <use fill="#000" filter="url(#n)" xlink:href="#m"/>
+          <g fill="#fff">
+            <circle cx="123" cy="255" fill-opacity=".4" r="3"/>
+            <circle cx="2" cy="234" r="2"/>
+            <circle cx="33" cy="65" r="3"/>
+            <circle cx="122" cy="2" r="2"/>
+            <circle cx="72" cy="144" r="2"/>
+            <circle cx="282" cy="224" r="2"/>
+            <circle cx="373" cy="65" opacity=".4" r="3"/>
+            <circle cx="433" cy="255" r="3"/>
+          </g>
+          <path d="m373.25 325.25a5 5 0 0 0 0-10h-75v10z" fill="url(#o)" opacity=".4" transform="matrix(.70710678 .70710678 -.70710678 .70710678 325.523078 -145.38023)"/>
+          <g fill="#fff">
+            <circle cx="363" cy="345" r="3"/>
+            <circle cx="513" cy="115" r="3"/>
+            <circle cx="723" cy="5" opacity=".4" r="3"/>
+            <circle cx="422" cy="134" r="2"/>
+            <circle cx="752" cy="204" r="2"/>
+            <circle cx="672" cy="114" r="2"/>
+            <circle cx="853" cy="255" opacity=".4" r="3"/>
+            <circle cx="623" cy="225" r="3"/>
+            <circle cx="823" cy="55" r="3"/>
+            <circle cx="902" cy="144" r="2"/>
+            <circle cx="552" cy="14" r="2"/>
+          </g>
+        </g>
+        <path d="m796 535a4 4 0 0 1 4 4v20h-8v-20a4 4 0 0 1 4-4z" fill="#486587"/>
+        <path d="m798 535.54a4 4 0 0 0 -2 3.46v20h-4v-20a4 4 0 0 1 6-3.46zm48-.54a4 4 0 0 1 4 4v20h-8v-20a4 4 0 0 1 4-4z" fill="#071423"/>
+        <path d="m846 559v-20a4 4 0 0 0 -2-3.46 4 4 0 0 1 6 3.46v20z" fill="#8dbcd2"/>
+        <path d="m554.67 131.48a9.46 9.46 0 0 1 13.33 0 9.46 9.46 0 0 0 13.33 0l13.33-13.24a28.39 28.39 0 0 1 40 0l10 9.93a14.2 14.2 0 0 0 20 0 14.2 14.2 0 0 1 20 0l.6.6a31.8 31.8 0 0 1 9.4 22.56h-146.66v-3.84c0-6.01 2.4-11.78 6.67-16.01zm196.33-123.23c11.07-11 28.93-11 40 0l10 9.94a14.19 14.19 0 0 0 20 0 14.19 14.19 0 0 1 20 0 16.36 16.36 0 0 0 21.3 1.5l8.7-6.47a33.47 33.47 0 0 1 40 0l4.06 3.03a39.6 39.6 0 0 1 15.94 31.75h-200c0-12.72 8.93-28.75 20-39.75zm-736.9 66.89.9-.9a21.29 21.29 0 0 1 30 0 21.29 21.29 0 0 0 30 0l10-9.93a35.48 35.48 0 0 1 50 0l15 14.9a14.2 14.2 0 0 0 20 0 14.2 14.2 0 0 1 20 0c6.4 6.35 10 15 10 24.02v5.77h-200c0-12.71 5.07-24.9 14.1-33.86z" fill="#fff" opacity=".07" transform="translate(54 301)"/>
+      </g>
+    </svg>
+  </div>
+</div>
+
+<style>
+@keyframes floatMoon {
+  0% { transform: translateX(0); }
+  50% { transform: translateX(20px); }
+  100% { transform: translateX(0); }
+}
+#moonGroup {
+  animation: floatMoon 4s ease-in-out infinite;
+}
+
+@keyframes waveTop {
+  0% { transform: translateY(0); }
+  50% { transform: translateY(-2px); }
+  100% { transform: translateY(0); }
+}
+</style>

package/resources/layouts/404.stx

@@ -0,0 +1,34 @@
+<script server>
+const backgroundImage = props.backgroundImage || '/images/background-auth.jpg'
+</script>
+
+<div class="flex relative justify-center shrink-0 md:px-12 lg:px-0 min-h-full">
+  <div class="flex relative z-10 flex-1 flex-col sm:justify-center md:flex-none px-4 py-10 md:px-28 bg-white shadow-2xl">
+    <main class="mx-auto sm:px-4 md:px-0 max-w-md w-full md:max-w-sm md:w-96">
+      <div class="flex">
+        <a href="/" aria-label="Home">
+          <Logo class="h-10 w-auto" />
+        </a>
+      </div>
+
+      <p class="mt-20 font-medium text-gray-700 text-sm">
+        404
+      </p>
+
+      <h1 class="mt-3 font-semibold text-gray-900 text-lg">
+        Page not found
+      </h1>
+
+      <p class="mt-3 text-gray-700 text-sm">
+        Sorry, we couldn't find the page you're looking for.
+      </p>
+
+      <a href="/" class="inline-block mt-10 px-4 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded">
+        Go back home
+      </a>
+    </main>
+  </div>
+  <div class="hidden sm:contents lg:block lg:relative lg:flex-1">
+    <img class="absolute inset-0 object-cover h-full w-full" src="{{ backgroundImage }}" alt="">
+  </div>
+</div>

package/resources/layouts/README.md

@@ -0,0 +1,14 @@
+## Layouts
+
+Vue components in this dir are used as layouts.
+
+By default, `default.stx` will be used unless an alternative is specified in the route meta.
+
+With [`unplugin-vue-router`](https://github.com/posva/unplugin-vue-router) and [`vite-plugin-layouts`](https://github.com/stacksjs/vite-plugin-layouts), you can specify the layout in the page's SFCs like this:
+
+```html
+<route lang="yaml">
+meta:
+  layout: home
+</route>
+```

package/resources/layouts/dashboard/default.stx

@@ -0,0 +1,20 @@
+<div>
+    <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
+    <MobileSidebar />
+    <Sidebar />
+
+    <div class="lg:pl-64">
+      <Navbar />
+
+      <main class="bg-neutral-50 dark:bg-neutral-900">
+        <slot />
+      </main>
+
+      <Toast />
+    </div>
+  </div>
+<style>
+body {
+  @apply dark:bg-neutral-900 bg-neutral-50;
+}
+</style>

package/resources/layouts/dashboard/guest.stx

@@ -0,0 +1,10 @@
+<!-- macOS-style guest layout with subtle background -->
+<div class="min-h-screen bg-neutral-100 dark:bg-neutral-950">
+  <slot />
+</div>
+
+<style>
+body {
+  @apply bg-neutral-100 dark:bg-neutral-950;
+}
+</style>

package/resources/layouts/default.stx

@@ -0,0 +1,3 @@
+<main>
+    <slot />
+  </main>

package/resources/layouts/maintenance.stx

@@ -0,0 +1,11 @@
+<div class="flex flex-col items-center justify-center h-full bg-gray-900">
+    <h1 class="text-8xl text-gray-50">
+      Maintenance
+    </h1>
+
+    <h2 class="pt-6 italic text-3xl text-gray-200">
+      We'll be back soon!
+    </h2>
+
+    <slot />
+  </div>

package/resources/layouts/storefront.stx

@@ -0,0 +1,73 @@
+<script server>
+/**
+ * Default storefront layout.
+ *
+ * Pages extend "layouts/storefront" and the framework wires in
+ * the announcement bar, sticky header (with live cart-count badge),
+ * footer, and slide-in cart drawer. To customize the brand, copy this
+ * file to `resources/views/layouts/storefront.stx` in your project and
+ * pass the props you want — the STX layout resolver walks up from the
+ * calling file looking for a `layouts/` directory, so the project
+ * copy wins for any view also under `resources/views/`.
+ *
+ * Note: framework-default pages (cart.stx, checkout/*.stx, orders/
+ * [id].stx) live under storage/framework/defaults/resources/views/, so
+ * they resolve THIS layout by the upward walk — not the project's.
+ * Stick to real STX directives only (if / yield / section / stack);
+ * unrecognized at-directives are scanned even inside script-server
+ * comments and can leave structural mismatches downstream that hang
+ * the request handler.
+ *
+ * The cart count is read from the storefront's session cookie so the
+ * badge is correct on first paint, before any client-side JS runs.
+ */
+
+const Database = require('bun:sqlite').Database
+const path = require('path')
+
+const dbPath = path.resolve(process.cwd(), process.env.DB_DATABASE_PATH || 'database/stacks.sqlite')
+
+let cartCount = 0
+try {
+  const sessionToken = (typeof requestContext !== 'undefined') ? requestContext.cookie('stacks_cart') : null
+  if (sessionToken) {
+    const db = new Database(dbPath, { readonly: true })
+    const cart = db.query(`SELECT total_items FROM carts WHERE session_token = ?1 AND status = 'active' LIMIT 1`).get(sessionToken)
+    if (cart && cart.total_items)
+      cartCount = Number(cart.total_items) || 0
+    db.close()
+  }
+}
+catch { /* schema not migrated yet, or db missing — render an empty header */ }
+</script>
+
+<!DOCTYPE html>
+<html lang="en" class="text-stone-900 bg-stone-50">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>@yield('title', 'Stacks Store')</title>
+  <meta name="description" content="@yield('description', 'A storefront powered by Stacks.')">
+  {{-- Constrain the SPA router to swap only <main>; @stacksjs/stx auto-
+      injects __stxRouterConfig with container:'body', which would erase
+      the header/footer on every navigation. STX_ROUTER_OPTIONS is checked
+      last by the router's Object.assign, so this wins. --}}
+  <script>window.STX_ROUTER_OPTIONS = { container: 'main' };</script>
+</head>
+<body class="antialiased font-serif text-stone-900 bg-stone-50">
+
+  <AnnouncementBar />
+
+  <Header :cartCount="cartCount" />
+
+  <main>
+    @yield('content')
+  </main>
+
+  <Footer />
+
+  <CartDrawer />
+
+  @stack('scripts')
+</body>
+</html>

package/resources/layouts/system-tray/default.stx

@@ -0,0 +1,3 @@
+<main class="bg-neutral-50 dark:bg-neutral-900">
+    <slot />
+  </main>