@stacksjs/defaults 0.70.54

package/resources/emails/password-changed.stx

@@ -0,0 +1,55 @@
+<script server>
+// Password-changed notification — sent after the user's password is
+// updated. Includes a security warning block for the "wasn't me"
+// case. Uses bundled <EmailLayout>/<EmailButton>/<EmailDivider>
+// components (stacksjs/stacks#1901).
+const appName = props.appName || 'Stacks'
+const changedAt = props.changedAt || new Date().toISOString()
+const supportEmail = props.supportEmail || ''
+const primaryColor = props.primaryColor || '#3451b2'
+const subject = props.subject || `Your ${appName} password was changed`
+const year = props.year || new Date().getFullYear()
+</script>
+
+<EmailLayout title="{{ subject }}">
+  <template #header>
+    <tr>
+      <td style="background-color:{{ primaryColor }};padding:30px 40px;text-align:center;">
+        <h1 style="margin:0;color:#ffffff;font-size:24px;font-weight:600;">{{ appName }}</h1>
+      </td>
+    </tr>
+  </template>
+
+  <EmailText size="heading">Password changed successfully</EmailText>
+  <EmailText>Your <strong>{{ appName }}</strong> account password was successfully changed on:</EmailText>
+
+  <p style="margin:0 0 20px 0;padding:15px;background-color:#f3f4f6;border-radius:6px;color:#111827;font-size:16px;font-weight:500;text-align:center;">
+    {{ changedAt }}
+  </p>
+
+  <EmailText>If you made this change, you can safely ignore this email.</EmailText>
+
+  <div style="padding:20px;background-color:#fef2f2;border:1px solid #fecaca;border-radius:6px;margin:20px 0;">
+    <p style="margin:0;color:#991b1b;font-size:14px;font-weight:600;">Didn't make this change?</p>
+    <p style="margin:10px 0 0 0;color:#7f1d1d;font-size:14px;">
+      If you did not change your password, your account may have been compromised. Please contact support immediately@if(supportEmail) at <a href="mailto:{{ supportEmail }}" style="color:#991b1b;">{{ supportEmail }}</a>@endif.
+    </p>
+  </div>
+
+  <EmailText size="lg" color="#111827">Security recommendations</EmailText>
+  <ul style="margin:0;padding:0 0 0 20px;color:#4b5563;font-size:14px;">
+    <li style="margin-bottom:8px;">Use a strong, unique password</li>
+    <li style="margin-bottom:8px;">Enable two-factor authentication if available</li>
+    <li style="margin-bottom:8px;">Review your recent account activity</li>
+    <li style="margin-bottom:8px;">Never share your password with anyone</li>
+  </ul>
+
+  <template #footer>
+    <tr>
+      <td style="padding:20px 40px;background-color:#f9fafb;border-top:1px solid #e5e7eb;">
+        <p style="margin:0;color:#6b7280;font-size:12px;text-align:center;">This is an automated message from {{ appName }}. Please do not reply to this email.</p>
+        <p style="margin:10px 0 0 0;color:#9ca3af;font-size:11px;text-align:center;">&copy; {{ year }} {{ appName }}. All rights reserved.</p>
+      </td>
+    </tr>
+  </template>
+</EmailLayout>

package/resources/emails/password-reset.stx

@@ -0,0 +1,43 @@
+<script server>
+// Password reset email. Uses bundled <EmailLayout>/<EmailButton>
+// components (stacksjs/stacks#1901).
+const appName = props.appName || 'Stacks'
+const resetUrl = props.resetUrl || '#'
+const expireMinutes = props.expireMinutes || 60
+const primaryColor = props.primaryColor || '#3451b2'
+const subject = props.subject || `Reset your ${appName} password`
+const year = props.year || new Date().getFullYear()
+</script>
+
+<EmailLayout title="{{ subject }}">
+  <template #header>
+    <tr>
+      <td style="background-color:{{ primaryColor }};padding:30px 40px;text-align:center;">
+        <h1 style="margin:0;color:#ffffff;font-size:24px;font-weight:600;">{{ appName }}</h1>
+      </td>
+    </tr>
+  </template>
+
+  <EmailText size="heading">Reset your password</EmailText>
+  <EmailText>You recently requested to reset your password for your <strong>{{ appName }}</strong> account. Click the button below to reset it.</EmailText>
+
+  <EmailButton href="{{ resetUrl }}" bg="{{ primaryColor }}">Reset Password</EmailButton>
+
+  <EmailText size="sm" color="#6b7280">This password reset link will expire in <strong>{{ expireMinutes }} minutes</strong>.</EmailText>
+  <EmailText size="sm" color="#6b7280">If you did not request a password reset, please ignore this email or contact support if you have concerns about your account security.</EmailText>
+
+  <EmailDivider />
+  <EmailText size="sm" color="#9ca3af" spacing="8px">If the button above doesn't work, copy and paste the following URL into your browser:</EmailText>
+  <p style="margin:0;word-break:break-all;">
+    <EmailLink href="{{ resetUrl }}" color="{{ primaryColor }}">{{ resetUrl }}</EmailLink>
+  </p>
+
+  <template #footer>
+    <tr>
+      <td style="padding:20px 40px;background-color:#f9fafb;border-top:1px solid #e5e7eb;">
+        <p style="margin:0;color:#6b7280;font-size:12px;text-align:center;">This is an automated message from {{ appName }}. Please do not reply to this email.</p>
+        <p style="margin:10px 0 0 0;color:#9ca3af;font-size:11px;text-align:center;">&copy; {{ year }} {{ appName }}. All rights reserved.</p>
+      </td>
+    </tr>
+  </template>
+</EmailLayout>

package/resources/emails/subscription-confirmation.stx

@@ -0,0 +1,99 @@
+<script server>
+const email = props.email || ''
+const unsubscribeUrl = props.unsubscribeUrl || '#'
+const appName = props.appName || 'Stacks'
+const appUrl = props.appUrl || 'https://stacksjs.com'
+const primaryColor = props.primaryColor || '#3451b2'
+const year = props.year || new Date().getFullYear()
+</script>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Welcome to {{ appName }}</title>
+</head>
+<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #0e0e0e; line-height: 1.6; color: #d4d4d4;">
+  <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse;">
+    <tr>
+      <td style="padding: 40px 20px;">
+        <table role="presentation" cellpadding="0" cellspacing="0" style="max-width: 600px; margin: 0 auto;">
+
+          <!-- Logo -->
+          <tr>
+            <td style="text-align: center; padding-bottom: 32px;">
+              <h1 style="color: #ececec; font-size: 28px; font-weight: 600; margin: 0;">{{ appName }}</h1>
+            </td>
+          </tr>
+
+          <!-- Main Content -->
+          <tr>
+            <td style="background-color: #1a1a1a; border-radius: 12px; padding: 40px;">
+
+              <h2 style="color: #ececec; font-size: 22px; font-weight: 600; margin: 0 0 16px;">Thanks for subscribing!</h2>
+
+              <p style="color: #a0a0a0; font-size: 16px; line-height: 1.6; margin: 0 0 16px;">
+                You're now on the list. We'll keep you in the loop on new releases, features, and framework updates.
+              </p>
+
+              <p style="color: #a0a0a0; font-size: 16px; line-height: 1.6; margin: 0 0 24px;">
+                {{ appName }} is a rapid application development framework that helps you build type-safe web apps, APIs, and cloud infrastructure with ease.
+              </p>
+
+              <!-- CTA Button -->
+              <table role="presentation" cellpadding="0" cellspacing="0" style="margin: 0 0 24px;">
+                <tr>
+                  <td>
+                    <a href="{{ appUrl }}" style="display: inline-block; background-color: {{ primaryColor }}; color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 500;">
+                      Visit {{ appName }}
+                    </a>
+                  </td>
+                </tr>
+              </table>
+
+              <!-- Divider -->
+              <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; margin: 8px 0 24px;">
+                <tr>
+                  <td style="border-top: 1px solid #2a2a2a;"></td>
+                </tr>
+              </table>
+
+              <!-- Links -->
+              <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%;">
+                <tr>
+                  <td style="color: #666; font-size: 13px;">
+                    <a href="https://docs.stacksjs.com" style="color: #888; text-decoration: none;">Docs</a>
+                    &nbsp;&middot;&nbsp;
+                    <a href="https://github.com/stacksjs/stacks" style="color: #888; text-decoration: none;">GitHub</a>
+                    &nbsp;&middot;&nbsp;
+                    <a href="https://discord.gg/stacksjs" style="color: #888; text-decoration: none;">Discord</a>
+                  </td>
+                </tr>
+              </table>
+
+            </td>
+          </tr>
+
+          <!-- Footer -->
+          <tr>
+            <td style="text-align: center; padding-top: 32px;">
+              <p style="color: #555; font-size: 13px; margin: 0 0 8px;">
+                You received this email because {{ email }} subscribed at {{ appUrl }}.
+              </p>
+              <p style="margin: 0;">
+                <a href="{{ unsubscribeUrl }}" style="color: #666; font-size: 12px; text-decoration: underline;">Unsubscribe</a>
+              </p>
+              <p style="color: #444; font-size: 11px; margin: 12px 0 0;">
+                &copy; {{ year }} {{ appName }}. All rights reserved.
+              </p>
+            </td>
+          </tr>
+
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>

package/resources/emails/welcome.stx

@@ -0,0 +1,48 @@
+<script server>
+// Welcome email — sent after a user signs up. Uses the bundled
+// <EmailLayout> + <EmailSection> + ... component library
+// (stacksjs/stacks#1901). All copy / colour can be overridden by
+// passing the matching prop to the Mailable.
+const appName = props.appName || 'Stacks'
+const appUrl = props.appUrl || 'https://stacksjs.com'
+const userName = props.userName || 'there'
+const primaryColor = props.primaryColor || '#3451b2'
+const subject = props.subject || `Welcome to ${appName}`
+const year = props.year || new Date().getFullYear()
+</script>
+
+<EmailLayout title="{{ subject }}">
+  <template #header>
+    <tr>
+      <td style="background-color:{{ primaryColor }};padding:30px 40px;text-align:center;">
+        <h1 style="margin:0;color:#ffffff;font-size:24px;font-weight:600;">{{ appName }}</h1>
+      </td>
+    </tr>
+  </template>
+
+  <EmailText size="heading">Welcome to {{ appName }}!</EmailText>
+  <EmailText>Hi {{ userName }},</EmailText>
+  <EmailText>Thank you for signing up — we're excited to have you on board.</EmailText>
+  <EmailText>Your account has been created successfully. You can sign in and start exploring everything {{ appName }} has to offer.</EmailText>
+
+  <EmailButton href="{{ appUrl }}" bg="{{ primaryColor }}">Get Started</EmailButton>
+
+  <EmailText size="lg" color="#111827">What's next?</EmailText>
+  <ul style="margin:0;padding:0 0 0 20px;color:#4b5563;font-size:14px;">
+    <li style="margin-bottom:8px;">Complete your profile</li>
+    <li style="margin-bottom:8px;">Explore the dashboard</li>
+    <li style="margin-bottom:8px;">Check out our documentation</li>
+  </ul>
+
+  <EmailDivider />
+  <EmailText size="sm" color="#6b7280" spacing="0">If you have any questions, reach out to support — we're here to help.</EmailText>
+
+  <template #footer>
+    <tr>
+      <td style="padding:20px 40px;background-color:#f9fafb;border-top:1px solid #e5e7eb;">
+        <p style="margin:0;color:#6b7280;font-size:12px;text-align:center;">This is an automated message from {{ appName }}. Please do not reply to this email.</p>
+        <p style="margin:10px 0 0 0;color:#9ca3af;font-size:11px;text-align:center;">&copy; {{ year }} {{ appName }}. All rights reserved.</p>
+      </td>
+    </tr>
+  </template>
+</EmailLayout>

package/resources/functions/README.md

@@ -0,0 +1,28 @@
+# The Functions Folder
+
+You may use functions to share on npm or have them run on a server behind one of your `../routes`.
+
+To learn more about Stacks Functions, check out the [documentation](https://stacksjs.com).
+
+> **Note**
+> If your project does not require any functions, you can remove this folder._
+
+## 🚜 Contributing
+
+Please review the [Contributing Guide](https://github.com/stacksjs/contributing) for details.
+
+## 🏝 Community
+
+For help, discussion about best practices, or any other conversation that would benefit from being searchable:
+
+[Discussions on GitHub](https://github.com/stacksjs/stacks/discussions)
+
+For casual chit-chat with others using this package:
+
+[Join the Stacks Discord Server](https://discord.gg/stacksjs)
+
+## 📄 License
+
+The MIT License (MIT). Please see [LICENSE](../LICENSE.md) for more information.
+
+Made with 💙

package/resources/functions/counter.ts

@@ -0,0 +1,13 @@
+// reactive state
+const count = ref(0)
+const now = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')
+
+// functions that mutate state and trigger updates
+function increment() {
+  // eslint-disable-next-line no-console
+  console.log('increment() was last run:', now)
+
+  count.value++
+}
+
+export { count, increment }

package/resources/functions/dark.ts

@@ -0,0 +1,4 @@
+// read the documentation for all the auto-imported APIs
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)
+export const preferredDark = usePreferredDark()

package/resources/functions/dashboard/analytics.ts

@@ -0,0 +1,238 @@
+/**
+ * Aggregator helpers for the Analytics dashboard pages. Each function
+ * pulls from the seeded `Activity` / `Request` / `Order` / `Subscriber`
+ * tables and reduces to the chart-ready shape the page expects.
+ *
+ * No model is required to exist — the helpers fall back to empty data
+ * when the table or column is missing, so analytics pages still render
+ * without errors on an unseeded database.
+ */
+
+import { countBy, groupByDay, loadModel, safeAll, safeGet, sumByDay, topN } from './data'
+
+export interface WebMetrics {
+  totalRequests: number
+  uniqueVisitors: number
+  avgResponseTime: number
+  errorRate: number
+  perDay: Array<{ date: string, count: number }>
+}
+
+/**
+ * Site-traffic aggregations from the `Request` model. Unique visitors
+ * are counted by distinct IP; response time / error rate read the
+ * `duration_ms` and `status_code` columns the seeder populates.
+ */
+export async function getWebMetrics(days = 30): Promise<WebMetrics> {
+  const Request = await loadModel('Request')
+  const rows = await safeAll(Request)
+  const ips = new Set<string>()
+  let totalDuration = 0
+  let durationSamples = 0
+  let errors = 0
+  for (const r of rows) {
+    const ip = String(safeGet(r, 'ip_address', '') || safeGet(r, 'ip', ''))
+    if (ip) ips.add(ip)
+    const dur = Number(safeGet(r, 'duration_ms', 0)) || Number(safeGet(r, 'duration', 0))
+    if (dur > 0) {
+      totalDuration += dur
+      durationSamples++
+    }
+    const status = Number(safeGet(r, 'status_code', 0)) || Number(safeGet(r, 'status', 0))
+    if (status >= 400) errors++
+  }
+  return {
+    totalRequests: rows.length,
+    uniqueVisitors: ips.size,
+    avgResponseTime: durationSamples > 0 ? Math.round(totalDuration / durationSamples) : 0,
+    errorRate: rows.length > 0 ? Math.round((errors / rows.length) * 1000) / 10 : 0,
+    perDay: groupByDay(rows, 'created_at', days),
+  }
+}
+
+/** Top referrer hosts. */
+export async function getTopReferrers(n = 10): Promise<Array<{ value: string, count: number }>> {
+  const Request = await loadModel('Request')
+  const rows = await safeAll(Request)
+  return topN(rows, 'referrer', n)
+}
+
+/** Visitor breakdown by user-agent family (best-effort). */
+export async function getBrowserBreakdown(): Promise<Array<{ value: string, count: number }>> {
+  const Request = await loadModel('Request')
+  const rows = await safeAll(Request)
+  const counts: Record<string, number> = {}
+  for (const r of rows) {
+    const ua = String(safeGet(r, 'user_agent', '') || safeGet(r, 'browser', ''))
+    const fam = parseBrowser(ua)
+    counts[fam] = (counts[fam] || 0) + 1
+  }
+  return Object.entries(counts)
+    .map(([value, count]) => ({ value, count }))
+    .sort((a, b) => b.count - a.count)
+}
+
+/** Visitor breakdown by device type (mobile/tablet/desktop). */
+export async function getDeviceBreakdown(): Promise<Array<{ value: string, count: number }>> {
+  const Request = await loadModel('Request')
+  const rows = await safeAll(Request)
+  const counts: Record<string, number> = { desktop: 0, mobile: 0, tablet: 0, other: 0 }
+  for (const r of rows) {
+    const ua = String(safeGet(r, 'user_agent', '') || safeGet(r, 'device', '')).toLowerCase()
+    if (/tablet|ipad/.test(ua)) counts.tablet++
+    else if (/mobile|iphone|android/.test(ua)) counts.mobile++
+    else if (ua) counts.desktop++
+    else counts.other++
+  }
+  return Object.entries(counts)
+    .filter(([, c]) => c > 0)
+    .map(([value, count]) => ({ value, count }))
+    .sort((a, b) => b.count - a.count)
+}
+
+/** Visitor breakdown by country, using an explicit `country` column. */
+export async function getCountryBreakdown(n = 10): Promise<Array<{ value: string, count: number }>> {
+  const Request = await loadModel('Request')
+  const rows = await safeAll(Request)
+  return topN(rows, 'country', n)
+}
+
+/** Top page paths by request count. */
+export async function getTopPages(n = 10): Promise<Array<{ value: string, count: number }>> {
+  const Request = await loadModel('Request')
+  const rows = await safeAll(Request)
+  return topN(rows, 'path', n)
+}
+
+export interface SalesTimeSeries {
+  perDay: Array<{ date: string, total: number }>
+  totalRevenue: number
+  orderCount: number
+  avgOrderValue: number
+}
+
+/**
+ * Revenue-per-day plus rollups, derived from the `Order` model.
+ * Falls back to zero values if the model isn't loaded.
+ */
+export async function getSalesTimeSeries(days = 30): Promise<SalesTimeSeries> {
+  const Order = await loadModel('Order')
+  const rows = await safeAll(Order)
+  let totalRevenue = 0
+  for (const r of rows) {
+    totalRevenue += Number(safeGet(r, 'total_amount', 0)) || Number(safeGet(r, 'amount', 0)) || 0
+  }
+  return {
+    perDay: sumByDay(rows, 'created_at', 'total_amount', days),
+    totalRevenue,
+    orderCount: rows.length,
+    avgOrderValue: rows.length > 0 ? totalRevenue / rows.length : 0,
+  }
+}
+
+/** Top-selling products by occurrence in OrderItems. */
+export async function getTopProducts(n = 5): Promise<Array<{ value: string, count: number }>> {
+  const OrderItem = await loadModel('OrderItem')
+  const rows = await safeAll(OrderItem)
+  return topN(rows, 'product_name', n)
+}
+
+/** Top customers by order count. */
+export async function getTopCustomers(n = 5): Promise<Array<{ value: string, count: number }>> {
+  const Order = await loadModel('Order')
+  const rows = await safeAll(Order)
+  return topN(rows, 'customer_name', n)
+}
+
+export interface MarketingMetrics {
+  campaignCount: number
+  listCount: number
+  subscriberCount: number
+  socialPostCount: number
+  reviewCount: number
+  campaignsByStatus: Record<string, number>
+  subscribersPerDay: Array<{ date: string, count: number }>
+}
+
+export async function getMarketingMetrics(days = 30): Promise<MarketingMetrics> {
+  const [Campaign, EmailList, Subscriber, SocialPost, Review] = await Promise.all([
+    loadModel('Campaign'),
+    loadModel('EmailList'),
+    loadModel('Subscriber'),
+    loadModel('SocialPost'),
+    loadModel('Review'),
+  ])
+  const [campaigns, lists, subscribers, posts, reviews] = await Promise.all([
+    safeAll(Campaign),
+    safeAll(EmailList),
+    safeAll(Subscriber),
+    safeAll(SocialPost),
+    safeAll(Review),
+  ])
+  return {
+    campaignCount: campaigns.length,
+    listCount: lists.length,
+    subscriberCount: subscribers.length,
+    socialPostCount: posts.length,
+    reviewCount: reviews.length,
+    campaignsByStatus: countBy(campaigns, 'status'),
+    subscribersPerDay: groupByDay(subscribers, 'created_at', days),
+  }
+}
+
+/** Goal/event tracking from the Activity model. */
+export async function getEventStats(): Promise<{
+  total: number
+  byEvent: Record<string, number>
+  perDay: Array<{ date: string, count: number }>
+}> {
+  const Activity = await loadModel('Activity')
+  const rows = await safeAll(Activity)
+  return {
+    total: rows.length,
+    byEvent: countBy(rows, 'event'),
+    perDay: groupByDay(rows, 'created_at', 30),
+  }
+}
+
+/** Blog-content metrics — uses Post + Comment + Tag models. */
+export async function getBlogMetrics(): Promise<{
+  postCount: number
+  publishedCount: number
+  draftCount: number
+  totalViews: number
+  totalComments: number
+  postsPerDay: Array<{ date: string, count: number }>
+}> {
+  const [Post, Comment] = await Promise.all([loadModel('Post'), loadModel('Comment')])
+  const [posts, comments] = await Promise.all([safeAll(Post), safeAll(Comment)])
+  let totalViews = 0
+  let publishedCount = 0
+  let draftCount = 0
+  for (const p of posts) {
+    totalViews += Number(safeGet(p, 'views', 0)) || 0
+    const status = String(safeGet(p, 'status', '')).toLowerCase()
+    if (status === 'published') publishedCount++
+    else if (status === 'draft') draftCount++
+  }
+  return {
+    postCount: posts.length,
+    publishedCount,
+    draftCount,
+    totalViews,
+    totalComments: comments.length,
+    postsPerDay: groupByDay(posts, 'created_at', 30),
+  }
+}
+
+/** Cheap heuristic to bucket a UA string into a browser family. */
+function parseBrowser(ua: string): string {
+  if (!ua) return 'unknown'
+  const u = ua.toLowerCase()
+  if (u.includes('edg/')) return 'Edge'
+  if (u.includes('opr/') || u.includes('opera')) return 'Opera'
+  if (u.includes('chrome')) return 'Chrome'
+  if (u.includes('safari') && !u.includes('chrome')) return 'Safari'
+  if (u.includes('firefox')) return 'Firefox'
+  return 'Other'
+}