chore: wip

Author: glennmichael123

resources/components/Button.vue

@@ -1,15 +1,24 @@
 <script setup lang="ts">
+/**
+ * Marketing Button Component
+ *
+ * A simple button designed for marketing pages with solid/outline variants.
+ * NOTE: For dashboard/app UIs, use @stacksjs/stx-ui components instead.
+ */
+import { computed } from 'vue'
+
 const props = defineProps<{
   variant?: 'solid' | 'outline'
-  color?: 'blue' | 'slate' | 'white'
+  color?: 'blue' | 'slate' | 'white' | 'black'
   href?: string
   className?: string
 }>()
 
 const baseStyles = {
   solid:
-    'group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
-  outline: 'group inline-flex ring-1 items-center justify-center rounded-full py-2 px-4 text-sm focus:outline-none',
+    'group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 transition-colors',
+  outline:
+    'group inline-flex ring-1 items-center justify-center rounded-full py-2 px-4 text-sm focus:outline-none transition-colors',
 }
 
 const variantStyles = {
@@ -24,37 +33,36 @@ const variantStyles = {
   outline: {
     slate:
       'ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 active:text-slate-600 focus-visible:outline-blue-600 focus-visible:ring-slate-300',
+    blue: 'ring-blue-200 text-blue-700 hover:text-blue-900 hover:ring-blue-300 active:bg-blue-100 active:text-blue-600 focus-visible:outline-blue-600',
     white:
       'ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 active:text-slate-400 focus-visible:outline-white',
+    black: 'ring-black text-black hover:ring-gray-700 active:bg-gray-100 focus-visible:outline-black',
   },
 }
 
 const className = computed(() => {
-  let classes = baseStyles[props.variant ?? 'solid']
+  const variant = props.variant ?? 'solid'
+  const color = props.color ?? 'slate'
+  let classes = baseStyles[variant]
 
-  if (props.variant === 'outline')
-    classes += ` ${variantStyles.outline[props.color ?? 'slate']}`
-  else if (props.variant === 'solid')
-    classes += ` ${variantStyles.solid[props.color ?? 'slate']}`
+  const colorStyles = variantStyles[variant]?.[color]
+  if (colorStyles) {
+    classes += ` ${colorStyles}`
+  }
 
-  if (props.className)
+  if (props.className) {
     classes += ` ${props.className}`
+  }
 
   return classes
 })
-
-// easily use any of the lifecycle hooks without needing to import them
-onMounted(() => {
-  // eslint-disable-next-line no-console
-  console.log('Button component mounted')
-})
 </script>
 
 <template>
   <button v-if="!props.href" :class="className">
     <slot />
   </button>
-  <a v-else :class="className">
+  <a v-else :href="href" :class="className">
     <slot />
   </a>
 </template>

storage/framework/core/router/src/router.ts

@@ -444,15 +444,16 @@ export class StacksRouter implements RouterInterface {
 
   /**
    * Create a route group with shared attributes
+   * Supports both sync and async callbacks
    */
-  group(options: string | RouteGroupOptions, callback?: () => void): this {
+  group(options: string | RouteGroupOptions, callback?: (() => void) | (() => Promise<void>)): this {
     // Handle string prefix shorthand
     if (typeof options === 'string') {
       options = { prefix: options.startsWith('/') ? options.slice(1) : options }
     }
 
     // Handle function-only call
-    let cb: () => void
+    let cb: (() => void) | (() => Promise<void>)
     if (typeof options === 'function') {
       cb = options
       options = {}
@@ -479,18 +480,33 @@ export class StacksRouter implements RouterInterface {
     // Create temporary routes array to track routes in this group
     this._stacksRoutes = []
 
-    // Execute callback
-    cb()
+    // Execute callback (handle both sync and async)
+    const result = cb()
 
-    // Merge group routes back to main routes
-    for (const route of this._stacksRoutes) {
-      previousRoutes.push(route)
+    // If callback returns a promise, track it for later awaiting
+    if (result instanceof Promise) {
+      const groupPromise = result.then(() => {
+        // Merge group routes back to main routes after async completion
+        for (const route of this._stacksRoutes) {
+          previousRoutes.push(route)
+        }
+        // Restore previous state
+        this._groupPrefix = previousPrefix
+        this._groupMiddleware = previousMiddleware
+        this._stacksRoutes = previousRoutes
+      })
+      this._pendingRoutes.push(groupPromise)
+    }
+    else {
+      // Sync callback - merge immediately
+      for (const route of this._stacksRoutes) {
+        previousRoutes.push(route)
+      }
+      // Restore previous state
+      this._groupPrefix = previousPrefix
+      this._groupMiddleware = previousMiddleware
+      this._stacksRoutes = previousRoutes
     }
-
-    // Restore previous state
-    this._groupPrefix = previousPrefix
-    this._groupMiddleware = previousMiddleware
-    this._stacksRoutes = previousRoutes
 
     return this
   }
@@ -511,10 +527,13 @@ export class StacksRouter implements RouterInterface {
 
   /**
    * Set middleware for the last registered route
+   * Accepts a string name, array of strings, or middleware handlers
    */
-  middleware(middleware: StacksRoute['middleware']): this {
+  middleware(middleware: string | string[] | StacksRoute['middleware']): this {
     if (this._stacksRoutes.length > 0) {
-      this._stacksRoutes[this._stacksRoutes.length - 1].middleware = middleware
+      // Normalize to array if single string
+      const normalizedMiddleware = typeof middleware === 'string' ? [middleware] : middleware
+      this._stacksRoutes[this._stacksRoutes.length - 1].middleware = normalizedMiddleware
     }
     return this
   }
@@ -763,6 +782,10 @@ export class StacksRouter implements RouterInterface {
   prepareUri(path: string): string {
     if (path.startsWith('/')) path = path.slice(1)
     path = `/${path}`
+
+    // Normalize :param syntax to {param} syntax for bun-router compatibility
+    path = path.replace(/:(\w+)/g, '{$1}')
+
     return path.endsWith('/') ? path.slice(0, -1) : path
   }
 

storage/framework/core/stx-ui/build.ts

@@ -0,0 +1,47 @@
+/**
+ * Build script for @stacksjs/stx-ui
+ */
+import { $ } from 'bun'
+
+async function build() {
+  console.log('Building @stacksjs/stx-ui...')
+
+  // Clean dist
+  await $`rm -rf dist`
+
+  // Build web components
+  await Bun.build({
+    entrypoints: ['./src/web-components/index.ts'],
+    outdir: './dist/web-components',
+    target: 'browser',
+    format: 'esm',
+    minify: false,
+  })
+
+  // Build composables
+  await Bun.build({
+    entrypoints: ['./src/composables/index.ts'],
+    outdir: './dist/composables',
+    target: 'browser',
+    format: 'esm',
+    minify: false,
+    external: ['vue'],
+  })
+
+  // Build main index
+  await Bun.build({
+    entrypoints: ['./src/index.ts'],
+    outdir: './dist',
+    target: 'browser',
+    format: 'esm',
+    minify: false,
+    external: ['vue'],
+  })
+
+  // Generate type declarations
+  await $`bunx tsc --emitDeclarationOnly --declaration --outDir dist`
+
+  console.log('Build complete!')
+}
+
+build().catch(console.error)

storage/framework/core/stx-ui/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@stacksjs/stx-ui",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Framework-agnostic UI primitives for Stacks - web components with Vue wrappers",
+  "author": "Chris Breuer",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./web-components": {
+      "types": "./dist/web-components/index.d.ts",
+      "import": "./dist/web-components/index.js"
+    },
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue/index.js"
+    },
+    "./composables": {
+      "types": "./dist/composables/index.d.ts",
+      "import": "./dist/composables/index.js"
+    },
+    "./styles": "./dist/styles/index.css"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist", "README.md"],
+  "scripts": {
+    "build": "bun build.ts",
+    "typecheck": "bun tsc --noEmit"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "vue": "^3.4.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  }
+}

storage/framework/core/stx-ui/src/composables/index.ts

@@ -0,0 +1,42 @@
+/**
+ * STX-UI Composables
+ * Reusable Vue composition functions.
+ */
+
+export {
+  useDarkMode,
+  type ColorMode,
+  type UseDarkModeOptions,
+  type UseDarkModeReturn,
+} from './useDarkMode'
+
+export {
+  useMediaQuery,
+  useIsMobile,
+  useIsTablet,
+  useIsDesktop,
+  usePrefersReducedMotion,
+  usePrefersDark,
+  type UseMediaQueryReturn,
+} from './useMediaQuery'
+
+export {
+  useModal,
+  type UseModalOptions,
+  type UseModalReturn,
+} from './useModal'
+
+export {
+  useClipboard,
+  type UseClipboardOptions,
+  type UseClipboardReturn,
+} from './useClipboard'
+
+export {
+  useLocalStorage,
+  useLocalStorageString,
+  useLocalStorageBoolean,
+  useLocalStorageNumber,
+  type UseLocalStorageOptions,
+  type UseLocalStorageReturn,
+} from './useLocalStorage'