@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/layouts/default.stx

@@ -0,0 +1,565 @@
+<script server>
+// Web sidebar for the dashboard. Framework-owned nav chrome: the markup is
+// built server-side in resources/functions/dashboard/sidebar.ts and the look
+// lives in the plain-CSS <style> block below (stx does not expand Crosswind
+// @apply in a layout <style>, so it is hand-written). Sections come
+// from the discovered-models manifest + config/dashboard.ts toggles.
+// Project-root-anchored (`~/`), not relative. The stx client bundler resolves a
+// relative import against the PAGE that extends this layout, not against this
+// file, so `../../..` silently pointed somewhere different for every page depth
+// and the bundle failed for any page more than one level under views/dashboard.
+import { buildSidebarChunks } from '~/storage/framework/defaults/resources/functions/dashboard/sidebar'
+
+// Pre-rendered, self-contained sidebar HTML (home link, section nav, settings
+// link), built server-side and interpolated raw below. This intentionally does
+// NOT depend on `@stacksjs/components`' <Sidebar>: 0.2.9x stopped shipping
+// tag-resolvable .stx sources (only hashed dist/ output), so the component
+// fatal-errored the whole dashboard with an ENOENT (stacksjs/stacks#1989). Each
+// rendered <a> already carries data-required-roles, which the applyRoleFilter
+// effect below reads directly for role gating.
+export const sidebarChunks = buildSidebarChunks()
+</script>
+
+<!-- Dashboard icon stylesheet. Most dashboard icons are applied via dynamic
+    `:class="…"` bindings whose class names live in <script> state, which the stx
+    Crosswind extractor can't see — so their CSS is never generated inline and they
+    render as empty boxes. The dev server generates the full icon set once and serves
+    it here (browser-cached), instead of inlining ~260KB into every page. Route:
+    `/__deps/dashboard-icons.css` in storage/framework/core/actions/src/dev/dashboard.ts. -->
+<link rel="stylesheet" href="/__deps/dashboard-icons.css">
+
+<style>
+/*
+ * Make every chart canvas fill its wrapper. @stacksjs/charts sizes its
+ * bitmap from `getBoundingClientRect()`, so without CSS dimensions the
+ * canvas stays at the intrinsic 300x150 default and the chart renders
+ * cropped (bar charts lose right-side bars; doughnuts overflow because
+ * the parent grid cell is sized but the canvas isn't).
+ */
+canvas[id$="_chart"] {
+  display: block;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/*
+ * Dashboard body + sidebar. Plain CSS on purpose: stx serves a layout's raw
+ * style rules verbatim, but it does NOT expand Crosswind @apply here, so these
+ * are hand-written. Class names match the markup built in
+ * resources/functions/dashboard/sidebar.ts. Fixed 250px pane: Home pinned top,
+ * sections scroll in the middle, Settings pinned bottom.
+ */
+/*
+ * The window background is owned by the main content pane, not the body element.
+ * In the native Craft window the WKWebView is transparent and an
+ * NSVisualEffectView (real macOS vibrancy) sits behind the sidebar strip; a
+ * solid body background would paint over it. So the body stays clear and the
+ * content color lives on the scrolling pane, which lets the frosted material
+ * read through the translucent sidebar. (Do not write angle-bracket tag names in
+ * a layout style-block comment — stx parses them as elements and breaks out.)
+ */
+body {
+  background: transparent;
+}
+[data-stx-content] {
+  min-height: 100vh;
+  background: #f4f4f5;
+}
+.dark [data-stx-content] {
+  background: #0a0a0a;
+}
+.dashboard-sidebar {
+  position: fixed;
+  inset: 0 auto 0 0;
+  width: 250px;
+  display: flex;
+  flex-direction: column;
+  padding: 0 12px 10px;
+  overflow: hidden;
+  /* Translucent so the native NSVisualEffectView vibrancy reads through in the
+     Craft window; the blur is the frosted-glass fallback in a plain browser,
+     where there is no material behind the pane. */
+  background: rgba(255, 255, 255, 0.55);
+  -webkit-backdrop-filter: saturate(180%) blur(24px);
+  backdrop-filter: saturate(180%) blur(24px);
+  /* No hard border: a soft cast shadow to the right lifts the translucent pane
+     ABOVE the content, so it reads as a glass layer laid on top (Finder-style)
+     rather than a flat column butted beside it. The 1px inset is the hairline. */
+  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.05), 12px 0 34px -10px rgba(0, 0, 0, 0.18);
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  z-index: 40;
+}
+.sidebar-header {
+  flex-shrink: 0;
+  height: 38px;
+}
+.sidebar-nav {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+.sidebar-nav::-webkit-scrollbar {
+  width: 0;
+}
+.sidebar-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  height: 30px;
+  padding: 0 10px;
+  border-radius: 6px;
+  color: #3a3a3c;
+  font-size: 13px;
+  font-weight: 450;
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: background-color 0.12s ease, color 0.12s ease;
+}
+.sidebar-link:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+.sidebar-link[data-active="true"] {
+  background: #007aff;
+  color: #fff;
+}
+.sidebar-link-home {
+  font-weight: 550;
+}
+.sidebar-nav .sidebar-link {
+  margin-top: 1px;
+}
+.sidebar-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  opacity: 0.82;
+}
+.sidebar-icon svg {
+  width: 18px;
+  height: 18px;
+}
+.sidebar-link[data-active="true"] .sidebar-icon {
+  opacity: 1;
+}
+.sidebar-section {
+  margin-top: 12px;
+}
+.sidebar-section-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 22px;
+  padding: 0 10px;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  color: #8a8a8e;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+.sidebar-section-label:hover {
+  color: #6a6a6e;
+}
+.sidebar-section-list {
+  list-style: none;
+  margin: 2px 0 0;
+  padding: 0;
+}
+.sidebar-section.collapsed .sidebar-section-list {
+  display: none;
+}
+.sidebar-chevron {
+  width: 7px;
+  height: 7px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(45deg);
+  transition: transform 0.15s ease;
+  opacity: 0.7;
+}
+.sidebar-section.collapsed .sidebar-chevron {
+  transform: rotate(-45deg);
+}
+.dark .dashboard-sidebar {
+  background: rgba(28, 28, 30, 0.55);
+  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.06), 12px 0 34px -10px rgba(0, 0, 0, 0.55);
+}
+.dark .sidebar-link {
+  color: #d1d1d6;
+}
+.dark .sidebar-link:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+.dark .sidebar-link[data-active="true"] {
+  background: #0a84ff;
+  color: #fff;
+}
+.dark .sidebar-section-label {
+  color: #8d8d92;
+}
+.dark .sidebar-section-label:hover {
+  color: #aeaeb2;
+}
+</style>
+
+<script>
+// Dynamic import map injection. Pages do `await import('@stacksjs/charts')`
+// in their `<script client>` blocks, which the browser refuses to resolve
+// without an import map. Writing a literal `<script type="importmap">` here
+// would be the obvious fix, but STX's layout-script processor strips the
+// `type` attribute and wraps the body in an IIFE — destroying it. Instead
+// we inject the import map programmatically via DOM, synchronously, before
+// any page-level script (and therefore before any dynamic import) runs.
+// The matching `/__deps/charts.js` route lives in dev/dashboard.ts.
+;(function () {
+  if (typeof document === 'undefined') return
+  // SPA fragment swaps re-execute scripts — only install once.
+  if (document.querySelector('script[data-stx-importmap]')) return
+  var s = document.createElement('script')
+  s.type = 'importmap'
+  s.setAttribute('data-stx-importmap', '')
+  s.textContent = '{"imports":{"@stacksjs/charts":"/__deps/charts.js"}}'
+  ;(document.head || document.documentElement).prepend(s)
+})();
+</script>
+
+<script>
+// Dashboard-wide chart helpers exposed on window so feature pages can call
+// `useChart(...)` / `useCharts(...)` without importing the composables
+// module. The page's `<script client>` blocks run inside a non-module
+// `<script data-stx-scoped>` tag, so an ES `import` at the top of the
+// file is a syntax error. Exposing these globals here lets every page
+// drop the import and call the helper directly.
+;(function () {
+  if (typeof window === 'undefined') return
+  if (window.useChart) return
+
+  function useChart(opts) {
+    if (typeof document === 'undefined')
+      return { instance: null, destroy: function () {} }
+    var el = document.getElementById(opts.id)
+    if (!el) {
+      console.warn('[useChart] no element with id "' + opts.id + '" — chart not initialised')
+      return { instance: null, destroy: function () {} }
+    }
+    var instance = new opts.Chart(el, { type: opts.type, data: opts.data, options: opts.options })
+    return {
+      instance: instance,
+      destroy: function () { instance.destroy() },
+    }
+  }
+
+  function useCharts(specs) {
+    var handles = specs.map(useChart)
+    return {
+      handles: handles,
+      destroyAll: function () { handles.forEach(function (h) { h.destroy() }) },
+    }
+  }
+
+  window.useChart = useChart
+  window.useCharts = useCharts
+})()
+</script>
+
+<script client>
+// Craft native sidebar integration
+// Maps sidebar itemIds to STX page routes for SPA navigation
+const sidebarRoutes = {
+  'home': '/',
+  'dependencies': '/dependencies',
+  'services': '/health',
+  'ci': '/ci',
+  'components': '/components',
+  'functions': '/functions',
+  'releases': '/releases',
+  'packages': '/packages',
+  'content-dashboard': '/content/dashboard',
+  'files': '/content/files',
+  'blog': '/content/blog',
+  'pages': '/content/pages',
+  'posts': '/content/posts',
+  'categories': '/content/categories',
+  'tags': '/content/tags',
+  'comments': '/content/comments',
+  'authors': '/content/authors',
+  'seo': '/content/seo',
+  'deployments': '/deployments',
+  'requests': '/requests',
+  'realtime': '/realtime',
+  'actions': '/actions',
+  'commands': '/commands',
+  'queue': '/queue',
+  'jobs': '/jobs',
+  'inbox': '/inbox',
+  'queries': '/queries',
+  'notifications': '/notifications/dashboard',
+  'data-dashboard': '/data/dashboard',
+  'activity': '/data/activity',
+  'users': '/data/users',
+  'teams': '/data/teams',
+  'subscribers': '/data/subscribers',
+  'commerce-dashboard': '/commerce/dashboard',
+  'pos': '/commerce/pos',
+  'customers': '/commerce/customers',
+  'orders': '/commerce/orders',
+  'products': '/commerce/products',
+  'coupons': '/commerce/coupons',
+  'gift-cards': '/commerce/gift-cards',
+  'payments': '/commerce/payments',
+  'delivery': '/commerce/delivery',
+  'taxes': '/commerce/taxes',
+  'lists': '/marketing/lists',
+  'social-posts': '/marketing/social-posts',
+  'campaigns': '/marketing/campaigns',
+  'marketing-reviews': '/marketing/reviews',
+  'analytics-web': '/analytics/web',
+  'analytics-blog': '/analytics/blog',
+  'analytics-goals': '/analytics/goals',
+  'analytics-commerce': '/analytics/commerce/web',
+  'analytics-sales': '/analytics/commerce/sales',
+  'analytics-marketing': '/analytics/marketing',
+  'cloud': '/cloud',
+  'servers': '/servers',
+  'serverless': '/serverless',
+  'dns': '/dns',
+  'permissions': '/management/permissions',
+  'kanban': '/kanban',
+  'mailboxes': '/mailboxes',
+  'logs': '/logs',
+  'buddy': '/buddy',
+  'environment': '/environment',
+  'access-tokens': '/access-tokens',
+  'settings': '/settings',
+}
+
+// Handle Craft native sidebar selection events
+window.craft = window.craft || {}
+window.craft._sidebarSelectHandler = (event) => {
+  const url = sidebarRoutes[event.itemId]
+    || (event.itemId && event.itemId.startsWith('model-') ? '/models/' + event.itemId.slice(6) : null)
+  if (url) {
+    navigate(url)
+  }
+}
+
+// Global toast queue. Composables across the dashboard call
+// `pushToast(...)` (defined in defaults/functions/toasts.ts) when
+// network requests fail or succeed; that signal is rendered in the
+// fixed-position container below the <main> slot. Mounted in the
+// layout so every dashboard page picks it up without opting in.
+// `~/`-anchored for the same reason as the sidebar import above.
+import { useToasts, dismissToast } from '~/storage/framework/defaults/functions/toasts'
+const { toasts } = useToasts()
+
+// Helpers below return COMPLETE class strings (static + dynamic) and are
+// applied via `:class="fn(...)"` because stx's `{{ ... }}` placeholder is
+// not reactively bound inside a `class` attribute — only inside text content.
+const toastIconClass = (type) => `flex-shrink-0 h-5 w-5 mt-0.5 ${({
+  success: 'i-hugeicons-checkmark-circle-02 text-green-500 dark:text-green-400',
+  error: 'i-hugeicons-alert-02 text-red-500 dark:text-red-400',
+  warning: 'i-hugeicons-alert-circle text-yellow-500 dark:text-yellow-400',
+  info: 'i-hugeicons-information-circle text-blue-500 dark:text-blue-400',
+}[type] || 'i-hugeicons-information-circle text-gray-500 dark:text-neutral-400')}`
+
+const toastWrapperClass = (type) => `pointer-events-auto overflow-hidden bg-white dark:bg-neutral-800 ring-1 ${({
+  success: 'ring-green-500/20',
+  error: 'ring-red-500/30',
+  warning: 'ring-yellow-500/20',
+  info: 'ring-blue-500/20',
+}[type] || 'ring-black/5 dark:ring-white/10')} rounded-lg shadow-lg`
+
+// Role-gated sidebar filter (stacksjs/stacks#1843).
+//
+// The server emits sidebar `<a>` items with `data-required-roles="…"` for
+// any model that declares `dashboard.roles: ['admin', 'dev', …]`. We
+// walk those nodes on hydration and on auth-store changes, hiding rows
+// the current viewer can't access.
+//
+// Permissive default: when the viewer is unauthenticated (the localhost
+// dev dashboard) `isDev()` returns true so every gated row stays visible.
+// In production deployments where `/api/dashboard/*` sits behind auth,
+// the endpoint returns real role data and the filter hides what the
+// viewer can't reach.
+// Guarded: `useStore('auth')` THROWS when the store was never registered, and a
+// throw here aborts scope registration for the entire page, leaving every signal
+// on every dashboard page unbound. A missing auth store must degrade to the
+// permissive default described above, not take the dashboard down with it.
+const auth = (() => {
+  try {
+    const store = useStore('auth')
+    store.load()
+    return store
+  }
+  catch {
+    return null
+  }
+})()
+
+function applyRoleFilter() {
+  // No auth store means no role data, which is the unauthenticated case: show
+  // every gated row rather than hiding the whole sidebar.
+  const roleList = auth ? auth.roles() : []
+  const unauth = auth ? auth.unauthenticated() : true
+  const nodes = document.querySelectorAll('[data-required-roles]')
+  for (const el of nodes) {
+    const required = (el.getAttribute('data-required-roles') || '')
+      .split(',').map(s => s.trim()).filter(Boolean)
+    if (required.length === 0) continue
+    // Unauthenticated viewers (no auth wired) see everything — keeps the
+    // dev dashboard usable. Once authenticated, role membership becomes
+    // the authoritative answer.
+    const allowed = unauth || required.some(r => roleList.includes(r))
+    // Hide the parent <li> when the link is inside one; otherwise the
+    // link itself. Either way the row disappears from the rendered
+    // sidebar; CSS `display: none` keeps the DOM intact for SPA nav so
+    // a later role change can re-show without a re-render.
+    const target = el.closest('li') || el
+    target.style.display = allowed ? '' : 'none'
+  }
+}
+
+effect(() => {
+  // `effect` re-runs whenever `auth.roles()` / `auth.unauthenticated()`
+  // change. Includes the first run, which executes after hydration once
+  // the auth fetch resolves.
+  applyRoleFilter()
+})
+</script>
+
+<aside data-stx-sidebar class="dashboard-sidebar" role="navigation" aria-label="Sidebar">
+  <!-- Traffic lights are native (titlebarHidden window) — this strip reserves
+      their space at the top of the pane so the first nav row clears them. -->
+  <div class="sidebar-header"></div>
+  {{{ sidebarChunks.top }}}
+  <nav class="sidebar-nav">{{{ sidebarChunks.nav }}}</nav>
+  {{{ sidebarChunks.bottom }}}
+</aside>
+
+<script>
+// Web sidebar wiring: collapse restore, active highlight, SPA navigation.
+// Runs as a plain <script> IIFE (like the import-map script above), NOT via
+// onMount: stx gives a LAYOUT no reactive scope of its own, so its onMount /
+// effect callbacks never fire ("global mountCallbacks: 0") — the previous
+// onMount version silently never ran, which is why no link was ever highlighted.
+// A DOMContentLoaded IIFE plus the stx:navigate event cover hard loads and every
+// SPA route change without depending on a scope mount.
+;(function () {
+  if (typeof document === 'undefined') return
+
+  // Highlight the sidebar link for the CURRENT route. Longest-prefix match, so a
+  // nested/detail page (e.g. /commerce/products/42) still lights up its section
+  // link (/commerce/products); the root link (/) only ever matches the home page.
+  function syncActive(url) {
+    var pane = document.querySelector('[data-stx-sidebar]')
+    if (!pane) return
+    var path
+    try { path = new URL(url || location.href, location.origin).pathname }
+    catch (e) { path = location.pathname }
+    var norm = function (p) { return (p || '/').replace(/\/+$/, '') || '/' }
+    var cur = norm(path)
+    var best = null
+    var bestLen = -1
+    var links = pane.querySelectorAll('a.sidebar-link[href]')
+    for (var i = 0; i < links.length; i++) {
+      var href = links[i].getAttribute('href') || ''
+      if (href.indexOf('http') === 0) continue
+      var h = norm(href)
+      // `${cur}/`.startsWith(`${h}/`) catches an exact hit and any child path,
+      // while the trailing slash stops /health matching /health-check.
+      if ((cur + '/').indexOf(h + '/') === 0 && h.length > bestLen) {
+        best = links[i]
+        bestLen = h.length
+      }
+    }
+    var actives = pane.querySelectorAll('a.sidebar-link[data-active]')
+    for (var j = 0; j < actives.length; j++) actives[j].removeAttribute('data-active')
+    if (best) best.setAttribute('data-active', 'true')
+  }
+
+  function init() {
+    var pane = document.querySelector('[data-stx-sidebar]')
+    if (!pane) return
+
+    // Restore per-section collapsed state persisted by the section toggle
+    // (the inline onclick in renderSection writes localStorage['sidebar-collapsed']).
+    try {
+      var saved = JSON.parse(localStorage.getItem('sidebar-collapsed') || '{}')
+      var sections = pane.querySelectorAll('.sidebar-section')
+      for (var i = 0; i < sections.length; i++) {
+        if (saved[sections[i].getAttribute('data-section')]) sections[i].classList.add('collapsed')
+      }
+    } catch (e) {}
+
+    syncActive()
+
+    // Bind route + click listeners once. This script can re-run on SPA fragment
+    // swaps, so guard against stacking duplicate handlers on the persistent pane.
+    if (!pane.__sidebarWired) {
+      pane.__sidebarWired = true
+
+      // Follow EVERY route change, not just sidebar clicks. navigate() dispatches
+      // stx:navigate (content links, programmatic navigate, and popstate
+      // back/forward all route through it), so the highlight tracks the real
+      // route instead of only updating when a sidebar item is clicked.
+      window.addEventListener('stx:navigate', function (event) {
+        syncActive(event && event.detail && event.detail.url)
+      })
+
+      // SPA-navigate sidebar links; fall back to full loads when the router isn't
+      // available or the target is external. The highlight is driven by the
+      // stx:navigate listener above, so we don't toggle data-active here.
+      pane.addEventListener('click', function (event) {
+        var link = event.target.closest('a.sidebar-link')
+        if (!link) return
+        var href = link.getAttribute('href')
+        if (!href || href.indexOf('http') === 0 || typeof navigate !== 'function') return
+        event.preventDefault()
+        navigate(href)
+      })
+    }
+  }
+
+  if (document.querySelector('[data-stx-sidebar]')) init()
+  else document.addEventListener('DOMContentLoaded', init)
+})();
+</script>
+
+<main data-stx-content style="margin-left: 250px">
+  @slot('content')
+</main>
+
+<!-- Global toast container. Top-right stack, newest at the bottom.
+    Pointer-events-none on the wrapper + auto on individual toasts so
+    surrounding UI stays clickable while a toast is up. -->
+<div class="flex fixed right-4 top-4 z-[60] flex-col gap-2 max-w-sm w-full pointer-events-none">
+  <template :for="toast in toasts">
+    <div role="alert" aria-live="assertive" :class="toastWrapperClass(toast.type)">
+      <div class="flex gap-3 items-start p-4">
+        <div :class="toastIconClass(toast.type)"></div>
+        <div class="flex-1 min-w-0">
+          <p class="font-medium text-gray-900 text-sm dark:text-neutral-100">{{ toast.title }}</p>
+          @if(toast.detail)
+            <p class="mt-1 break-words text-gray-500 text-xs dark:text-neutral-400">{{ toast.detail }}</p>
+          @endif
+        </div>
+        <button type="button" @click="dismissToast({{ toast.id }})" class="flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-neutral-200" aria-label="Dismiss">
+          <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </template>
+</div>

package/views/dashboard/layouts/guest.stx

@@ -0,0 +1,10 @@
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Stacks Dashboard</title>
+</head>
+<body class="min-h-screen bg-neutral-100 dark:bg-neutral-950">
+  @yield('content')
+</body>
+</html>

package/views/dashboard/login.stx

@@ -0,0 +1,48 @@
+@extends('layouts/guest')
+
+@section('content')
+<script client>
+// Login form (stacksjs/stacks#1838). Previously a `<script server>` block
+// that tried to reassign `const isLoading = false` at runtime — which
+// throws in strict-mode JS, so the form's loading/error state never
+// actually updated. Now uses `state(...)` signals for proper reactivity
+// and the auto-imported `navigate()` for SPA navigation instead of the
+// nonexistent `useRouter()`.
+import { useAuth } from '../../functions/auth'
+
+const { login } = useAuth()
+
+const isLoading = state(false)
+const error = state('')
+
+async function handleLogin(credentials) {
+  isLoading.set(true)
+  error.set('')
+
+  try {
+    const result = await login(credentials)
+
+    if (result && 'errors' in result) {
+      error.set(result.message || 'Invalid credentials')
+      return
+    }
+
+    navigate('/')
+  }
+  catch (err) {
+    error.set(err.message || 'An error occurred during login')
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+</script>
+
+@title('Login - Stacks Dashboard')
+<Login
+  @submit="handleLogin"
+  :isLoading="isLoading()"
+  :error="error()"
+/>
+
+@endsection