@stacksjs/defaults 0.70.160 → 0.70.161

package/app/Actions/Buddy/CommandsAction.ts

@@ -270,7 +270,7 @@ export default new Action({
         },
         {
           signature: 'buddy build:components',
-          description: 'Builds Vue component library & Web Component library',
+          description: 'Builds the STX component library and Web Component library',
           notes: '',
           synopsis: 'buddy build:components',
           aliases: [],
@@ -607,15 +607,6 @@ export default new Action({
           arguments: [],
           options: [],
         },
-        {
-          signature: 'buddy example:vue',
-          description: 'Runs the Vue example',
-          notes: '',
-          synopsis: 'buddy example:vue',
-          aliases: [],
-          arguments: [],
-          options: [],
-        },
         {
           signature: 'buddy example:web-components',
           description: 'Runs the Web Component example',

package/app/Models/Tag.ts

@@ -32,7 +32,7 @@ export default defineModel({
         },
       },
       factory: faker => faker.helpers.arrayElement([
-        'javascript', 'typescript', 'vue', 'react', 'nodejs',
+        'javascript', 'typescript', 'stx', 'react', 'nodejs',
         'database', 'performance', 'security', 'api', 'testing',
         'devops', 'cloud', 'frontend', 'backend', 'mobile',
       ]),

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.70.160",
+  "version": "0.70.161",
   "description": "Default Stacks scaffold resources (views, layouts, components, preloader) — shipped so apps consuming the framework from node_modules get the same fallback resources a vendored checkout provides. Source of truth: storage/framework/defaults.",
   "author": "Chris Breuer",
   "license": "MIT",

package/resources/components/Dashboard/CodeEditor.stx

@@ -25,7 +25,7 @@ cp`
     @endif
   </header>
 
-  <div class="bg-[#0d1117] rounded-b-lg vue-ace-editor" style="height: 300px; font-size: 14px;">
+  <div class="bg-[#0d1117] rounded-b-lg stx-code-editor" style="height: 300px; font-size: 14px;">
     <pre class="p-4 font-mono text-[#c9d1d9] text-sm">{{ content }}</pre>
   </div>
 <style>
@@ -33,7 +33,7 @@ select {
   margin-right: 15px;
 }
 
-.vue-ace-editor {
+.stx-code-editor {
   font-size: 14px;
   flex: 1;
   font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;

package/resources/components/Dashboard/FileViewer/MediaCard.stx

@@ -1,7 +1,7 @@
 <!--
   MediaCard — Meema-style visual file preview
 
-  Ported from meemalabs/file-manager (MediaCard/{Image,Video,Audio,Document}.vue)
+  Ported from the meemalabs/file-manager media card components.
   to stx + Crosswind. Presentational: it renders the preview + label for one
   file item and derives the media "kind" from `mime_type` (preferred) or the
   file extension in `type`. Real thumbnails render when the item carries a

package/resources/components/Dashboard/FileViewer/MediaInfoPanel.stx

@@ -1,8 +1,8 @@
 <!--
   MediaInfoPanel — file preview + metadata
 
-  Ported from meemalabs/file-manager (MediaInformation/{FilePreviewSection,
-  MetaDataSection,SharingSection}.vue) to stx + Crosswind. Presentational: it
+  Ported from the meemalabs/file-manager file preview, metadata, and sharing
+  sections to STX and Crosswind. Presentational: it
   renders a large preview and a metadata list for one selected file. The parent
   owns the slide-over shell (visibility, positioning, close button) and passes
   the current item in.

package/resources/components/Dashboard/Settings/Forms/LibraryForm.stx

@@ -189,10 +189,10 @@ const { libraryName = 'hello-world', libraryOwner = '@stacksjs', libraryReposito
         <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
           <div>
             <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
-              Vue Components Configurations
+              STX Component Configuration
             </h2>
             <p class="mt-1 leading-6 text-gray-600 text-sm">
-              Update your Vue Components Configuration
+              Update your STX component package
             </p>
           </div>
 
@@ -223,15 +223,15 @@ const { libraryName = 'hello-world', libraryOwner = '@stacksjs', libraryReposito
                 <div class="flex justify-between mb-4">
                   <div>
                     <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
-                      Vue Components Tags
+                      STX Component Tags
                     </h2>
                     <p class="mt-1 leading-6 text-gray-600 text-sm">
-                      Update Vue Components Tags, click on the button to show modal to add new tag
+                      Update STX component tags or add a new custom element tag
                     </p>
                   </div>
 
                   <div class="sm:flex-none mt-4 sm:ml-16 sm:mt-0">
-                    <button type="button" class="block px-3 py-2 font-semibold text-center text-sm text-white bg-gray-600 hover:bg-indigo-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 shadow-sm" data-action="add-vue-tag">
+                    <button type="button" class="block px-3 py-2 font-semibold text-center text-sm text-white bg-gray-600 hover:bg-indigo-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 shadow-sm" data-action="add-stx-tag">
                       Add Tag
                     </button>
                   </div>

package/resources/components/Dashboard/Settings/SettingsFormManager.stx

@@ -5,177 +5,28 @@ interface SettingsFormManagerProps {
 
 const { name = '' } = defineProps<SettingsFormManagerProps>()
 
-import AIForm from './Forms/AIForm.vue'
-import AnalyticsForm from './Forms/AnalyticsForm.vue'
-import AppForm from './Forms/AppForm.vue'
-import CacheForm from './Forms/CacheForm.vue'
-import CliForm from './Forms/CLIForm.vue'
-import CloudForm from './Forms/CloudForm.vue'
-import DatabaseForm from './Forms/DatabaseForm.vue'
-import DNSForm from './Forms/DNSForm.vue'
-import EmailForm from './Forms/EmailForm.vue'
-import FileSystemForm from './Forms/FileSystemForm.vue'
-import HashingForm from './Forms/HashingForm.vue'
-import LibraryForm from './Forms/LibraryForm.vue'
-import QueueForm from './Forms/QueueForm.vue'
-import SearchEngineForm from './Forms/SearchEngineForm.vue'
-import SecurityForm from './Forms/SecurityForm.vue'
-import ServicesForm from './Forms/ServicesForm.vue'
-import StorageForm from './Forms/StorageForm.vue'
-import TeamsForm from './Forms/TeamsForm.vue'
-
-const options = [
-  {
-    key: 'ai',
-    label: 'AI',
-  },
-  {
-    key: 'analytics',
-    label: 'Analytics',
-  },
-  {
-    key: 'app',
-    label: 'App',
-  },
-  {
-    key: 'cache',
-    label: 'Cache',
-  },
-  {
-    key: 'cli',
-    label: 'CLI',
-  },
-  {
-    key: 'cloud',
-    label: 'Cloud',
-  },
-  {
-    key: 'database',
-    label: 'Database',
-  },
-  {
-    key: 'dns',
-    label: 'DNS',
-  },
-  {
-    key: 'email',
-    label: 'Email',
-  },
-  {
-    key: 'file-system',
-    label: 'File System',
-  },
-  {
-    key: 'hashing',
-    label: 'Hashing',
-  },
-  {
-    key: 'languages',
-    label: 'Languages',
-  },
-  {
-    key: 'library',
-    label: 'Library',
-  },
-  {
-    key: 'native',
-    label: 'Native',
-  },
-  {
-    key: 'mail',
-    label: 'Mail',
-  },
-  {
-    key: 'queue',
-    label: 'Queue',
-  },
-  {
-    key: 'search-engine',
-    label: 'Search Engine',
-  },
-  {
-    key: 'security',
-    label: 'Security',
-  },
-  {
-    key: 'services',
-    label: 'Services',
-  },
-  {
-    key: 'storage',
-    label: 'Storage',
-  },
-  {
-    key: 'team',
-    label: 'Team',
-  },
-  {
-    key: 'ui',
-    label: 'UI',
-  },
-]
-function pageTitle() { return options.find(option => option.key === name }?.label || name)
+function title(): string {
+  return name
+    .split(/[-_]/)
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+}
 </script>
-<main>
-  <div class="md:col-span-2 px-4 py-6 sm:px-6 lg:px-8 bg-white ring-1 ring-gray-900/5 sm:rounded-xl shadow-sm">
-    <h2 class="font-semibold leading-7 text-base text-gray-900">
-      {{ pageTitle }} Configuration
-    </h2>
-    <p class="mt-1 leading-6 text-gray-600 text-sm">
-      This configuration defines all of your {{ pageTitle }} options.
-    </p>
 
-    <div class="mt-10">
-      @if(name === 'ai')
-        <AIForm />
-      @elseif(name === 'analytics')
-        <AnalyticsForm />
-      @elseif(name === 'app')
-        <AppForm />
-      @elseif(name === 'cache')
-        <CacheForm />
-      @elseif(name === 'cli')
-        <CliForm />
-      @elseif(name === 'cloud')
-        <CloudForm />
-      @elseif(name === 'database')
-        <DatabaseForm />
-      @elseif(name === 'dns')
-        <DNSForm />
-      @elseif(name === 'email')
-        <EmailForm />
-      @elseif(name === 'file-system')
-        <FileSystemForm />
-      @elseif(name === 'hashing')
-        <HashingForm />
-      @elseif(name === 'library')
-        <LibraryForm />
-      @elseif(name === 'queue')
-        <QueueForm />
-      @elseif(name === 'search-engine')
-        <SearchEngineForm />
-      @elseif(name === 'security')
-        <SecurityForm />
-      @elseif(name === 'services')
-        <ServicesForm />
-      @elseif(name === 'storage')
-        <StorageForm />
-      @elseif(name === 'team')
-        <TeamsForm />
-      @else
-        <div class="text-center">
-          <div class="h-12 w-12 text-gray-400 dark:text-neutral-200 duration-150 ease-in-out transition-all i-hugeicons-cog-8-tooth" />
-          <h3 class="mt-2 font-semibold text-gray-900 text-sm">
-            Settings <span class="font-bold">{{ pageTitle }}</span> Form not created yet
-          </h3>
-          <p class="mt-1 text-gray-500 text-sm">
-            Please ask the maintenance team to fix.
-          </p>
-        </div>
-      @endif
+<Card variant="default" padding="lg">
+  <div class="flex gap-4 items-start">
+    <div class="flex flex-none items-center justify-center h-10 w-10 text-blue-600 dark:text-blue-400 bg-blue-500/10 rounded-lg">
+      <span class="h-5 w-5 i-hugeicons-settings-02"></span>
+    </div>
+    <div class="flex-1 min-w-0">
+      <h2 class="font-semibold text-neutral-900 dark:text-white">{{ title() }} configuration</h2>
+      <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">
+        Configuration editing now lives in the unified Settings workspace.
+      </p>
+      <a href="/settings" class="inline-flex gap-2 items-center mt-4 font-medium text-blue-600 text-sm dark:text-blue-400 hover:underline">
+        Open Settings
+        <span class="h-4 w-4 i-hugeicons-arrow-right-02"></span>
+      </a>
     </div>
   </div>
-</main>
-<style scoped>
-
-</style>
+</Card>

package/resources/components/Dashboard/UI/RouterLink.stx

@@ -1,13 +1,13 @@
 <script server>
 /**
- * RouterLink — bridge component for templates that use Vue Router-style
+ * RouterLink bridge component for templates that use declarative
  * `<RouterLink to="…">` syntax. The dashboard is server-rendered MPA, so
  * there's no actual client router; this just maps the `to` prop to a
  * standard `href` and forwards the rest. Keeps existing pages from
  * breaking with `[Error loading component: 'router-link']` while we
  * migrate them off the syntax.
  *
- * `replace` is accepted for parity with Vue's RouterLink; it has no
+ * `replace` is accepted for API compatibility; it has no
  * effect under MPA navigation but makes drop-in usage error-free.
  */
 interface RouterLinkProps {

package/resources/components/Docs/Demo/ComboboxCode.md

@@ -1,4 +1,4 @@
-```vue
+```html
 <script lang="ts" setup>
 import { ref, computed } from '@stacksjs/stx'
 import {

package/resources/components/Docs/Demo/DialogCode.md

@@ -1,5 +1,5 @@
-```vue
-<!-- App.vue -->
+```html
+<!-- App.stx -->
 <script lang="ts" setup>
 import { Dialog, DialogPanel } from '@stacksjs/dialog'
 

package/resources/components/Docs/Demo/DropdownCode.md

@@ -1,4 +1,4 @@
-```vue
+```html
 <script lang="ts" setup>
 import { ref } from '@stacksjs/stx'
 import { Dropdown, DropdownButton, DropdownItem, DropdownItems } from '@stacksjs/dropdown'

package/resources/components/Docs/Demo/ListboxCode.md

@@ -1,4 +1,4 @@
-```vue
+```html
 <script lang="ts" setup>
 import { ref } from '@stacksjs/stx'
 import {

package/resources/components/Docs/Demo/NotificationCode.md

@@ -1,4 +1,4 @@
-```vue
+```html
 <script lang="ts" setup>
 import { ref } from '@stacksjs/stx'
 import { Notification, notification } from '@stacksjs/notifications'

package/resources/components/Docs/Demo/PopoverCode.md

@@ -1,4 +1,4 @@
-```vue
+```html
 
 <script lang="ts" setup>
 import { Popover, PopoverButton, PopoverPanel } from '@stacksjs/popover'

package/resources/components/Docs/Demo/RadioGroupCode.md

@@ -1,4 +1,4 @@
-```vue
+```html
 <script lang="ts" setup>
 import { ref } from '@stacksjs/stx'
 import { RadioGroup, RadioGroupLabel, RadioGroupOption, RadioGroupDescription } from '@stacksjs/radio-group'

package/resources/components/Docs/Demo/StepperCode.md

@@ -1,4 +1,4 @@
-```vue
+```html
 <script setup>
 import { ref, computed } from '@stacksjs/stx'
 import { Stepper } from '@stacksjs/stepper'

package/resources/components/Docs/Demo/SwitchCode.md

@@ -1,4 +1,4 @@
-```vue
+```html
 <script lang="ts" setup>
 import { ref } from '@stacksjs/stx'
 import { Switch } from '@stacksjs/switch'

package/resources/components/HelloWorld.stx

@@ -69,7 +69,7 @@ console.log('HelloWorld component mounted & the greeting is', greeting)
             <div class="ml-12">
               <div class="mt-2 leading-6 text-gray-600 text-sm dark:text-neutral-400">
                 The easiest way to build component libraries and distribute them on npm. Stacks automatically imports all of your components & makes them available to you in your templates.
-                And it automatically builds framework agnostic (e.g. Web & Vue Components) component libraries out of those.
+                And it automatically builds framework agnostic (e.g. Web and STX components) component libraries out of those.
               </div>
             </div>
           </div>

package/resources/components/README.md

@@ -1,87 +1,17 @@
-# The Components Folder
+# Components
 
-This is where you create your components.
+Create reusable STX components in this directory. Components are discovered by
+the STX build pipeline and can be used directly from pages and other templates.
 
-> **Note**
-> If your project does not require any UI components, you can remove this folder. If your library does include components, you may use this readme as the boilerplate of your component library.
-
-## 💡 Get Started
-
-It's easy to get started. The only prerequisite is a basic understanding of HTML, sprinkled with *minimal* JavaScript. In other words, there is virtually no learning curve.
-
-```bash
-# you may use this GitHub template or the following command
-bunx stacks new hello-world
-cd hello-world
-
-buddy install # install deps for all packages
-buddy dev:components # starts the component dev server
-buddy build:components # builds the component library for production-ready use
-```
-
-Additionally, the `package.json` contains some useful snippets you likely want to be aware of.
-
-## 🤖 Usage
-
-Because this project is optimized toward the development of easily reusable & composable component libraries, it’s very easy to use (and distribute):
-
-```vue
-<script setup lang="ts">
-import HelloWorld from 'hello-world-stack'
+```html
+<script server lang="ts">
+const props = defineProps<{ name: string }>()
 </script>
 
 <template>
-  <HelloWorld name="J Doe" />
+  <p>Hello, {{ props.name }}.</p>
 </template>
 ```
 
-### Tips
-
-This project also includes a simple way to handle your versioning. Through semantic commit names, it will also generate the two changelogs: one as part of the GitHub releases & the one markdown file that's stored within the root of the project.
-
-```bash
-# how to create a git commit
-git add . # select the changes you want to commit
-buddy commit # then simply follow the prompts
-
-# after you successfully committed, you may create a "release"
-buddy release # automates git commits, versioning, and CHANGELOG generation
-```
-
-Read more about these tips in the docs.
-
-### Coding Style
-
-You may want to consider using the "Composition API" with [`<script setup>` SFC syntax](https://github.com/vuejs/rfcs/pull/227), as it is perfectly suited for building component libraries via Stacks. [ESLint](https://github.com/eslint) also comes pre-configured to statically analyze, fix and format your code without the need for Prettier.
-
-When using this template, feel free to adjust it to your needs. It is a framework to help you quickly & efficiently bootstrap and design component libraries using industry best practices.
-
-## 🧪 Testing
-
-```bash
-bun test
-```
-
-## 📈 Changelog
-
-Please see our [releases](https://github.com/stacksjs/stacks/releases) page for more information on what has changed recently.
-
-## 🚜 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](https://github.com/stacksjs/stacks/tree/main/LICENSE.md) for more information.
-
-Made with 💙
+Run `buddy dev:components` while developing the component library and
+`buddy build:components` to produce its distributable output.

package/resources/components/index.ts

@@ -4,10 +4,5 @@
  * Complete dashboard components for building modern admin interfaces.
  */
 
-// Layout Components
-export { default as DashboardLayout } from './DashboardLayout.vue'
-export { default as SidebarModern } from './SidebarModern.vue'
-export { default as NavbarModern } from './NavbarModern.vue'
-
 // UI Components (re-export from UI folder)
 export * from './UI'

package/resources/functions/dashboard/library.ts

@@ -35,7 +35,7 @@ export interface ComponentEntry {
 
 /**
  * Scan the dashboard component directory plus any user component
- * directories. Returns one entry per `.stx` / `.vue` file with the file
+ * directories. Returns one entry per `.stx` file with the file
  * size (so the UI can show "small", "medium", "large" hints).
  */
 export function listComponents(): ComponentEntry[] {
@@ -49,7 +49,7 @@ export function listComponents(): ComponentEntry[] {
     const abs = resolve(root, dir)
     if (!existsSync(abs)) continue
     walkSync(abs, (file) => {
-      if (!/\.(?:stx|vue|tsx|jsx)$/.test(file)) return
+      if (!file.endsWith('.stx')) return
       try {
         const stat = statSync(file)
         out.push({

package/resources/functions/dashboard/sidebar.ts

@@ -525,7 +525,7 @@ export function buildNavSections(
       { to: '/buddy', icon: 'terminal', text: 'Buddy CLI' },
       { to: '/environment', icon: 'settings', text: 'Environment' },
       { to: '/access-tokens', icon: 'lock', text: 'Access Tokens' },
-      { to: '/settings/billing', icon: 'invoice', text: 'Billing' },
+      { to: '/settings', icon: 'settings', text: 'Settings' },
       { to: '/settings/mail', icon: 'mail', text: 'Mail Settings' },
     ]])
   }
@@ -652,7 +652,7 @@ export function buildWebSidebarSections(): WebSidebarSection[] {
     {
       id: 'system',
       label: '',
-      items: [{ id: 'settings', label: 'Settings', icon: NAV_ICON_CLASSES.settings, iconColor: 'blue', href: '/settings/billing' }],
+      items: [{ id: 'settings', label: 'Settings', icon: NAV_ICON_CLASSES.settings, iconColor: 'blue', href: '/settings' }],
     },
   ]
 }
@@ -671,6 +671,6 @@ export function buildSidebarChunks(): { top: string, nav: string, bottom: string
   return {
     top: `<a href="/" class="sidebar-link sidebar-link-home"><span class="sidebar-icon">${svg('home')}</span><span>Home</span></a>`,
     nav: buildSidebarNavHtml(manifest.models, manifest.sections),
-    bottom: `<a href="/settings/billing" class="sidebar-link"><span class="sidebar-icon">${svg('settings')}</span><span>Settings</span></a>`,
+    bottom: `<a href="/settings" class="sidebar-link"><span class="sidebar-icon">${svg('settings')}</span><span>Settings</span></a>`,
   }
 }

package/resources/functions/system-tray.ts

@@ -0,0 +1,81 @@
+interface TrayMenuItem {
+  label?: string
+  type?: 'normal' | 'separator' | 'submenu'
+  action?: string
+  submenu?: TrayMenuItem[]
+}
+
+interface CraftTrayBridge {
+  setTitle(title: string): Promise<void>
+  setTooltip(tooltip: string): Promise<void>
+  setMenu(items: TrayMenuItem[]): Promise<void>
+  onClickToggleWindow(): () => void
+}
+
+interface CraftBridge {
+  tray?: CraftTrayBridge
+}
+
+type TrayActionHandler = (action: string) => void | Promise<void>
+
+function bridge(): CraftBridge | undefined {
+  return (globalThis as typeof globalThis & { craft?: CraftBridge }).craft
+}
+
+export function buildTrayMenu(projects: string[]): TrayMenuItem[] {
+  const projectItems = projects.map((project) => {
+    const name = project.split('/').filter(Boolean).pop() || project
+    return {
+      label: name,
+      type: 'submenu' as const,
+      submenu: [
+        { label: 'Open Terminal', action: `open-terminal::${project}` },
+        { label: 'Copy IP Address', action: `copy-ip::${project}` },
+        { label: 'Open Dashboard', action: `open-dashboard::${project}` },
+        { label: 'Buddy Commands', action: `buddy-commands::${project}` },
+        { label: 'Deploy', action: `deploy::${project}` },
+        { type: 'separator' as const },
+        { label: 'Deploy Logs', action: `deploy-logs::${project}` },
+        { label: 'Site Logs', action: `site-logs::${project}` },
+        { label: 'Error Logs', action: `error-logs::${project}` },
+        { type: 'separator' as const },
+        { label: 'Edit .env', action: `edit-env::${project}` },
+        { label: 'Edit DNS', action: `edit-dns::${project}` },
+        { label: 'Edit Email Addresses', action: `edit-email::${project}` },
+        { label: 'Ask Buddy', action: `ask-buddy::${project}` },
+      ],
+    }
+  })
+
+  return [
+    { label: 'Refresh', action: 'refresh' },
+    { label: 'Open Terminal', action: 'open-terminal' },
+    { label: 'Environment Check', action: 'env-check' },
+    { label: 'Settings', action: 'settings' },
+    { label: 'Check for Updates', action: 'check-updates' },
+    { type: 'separator' },
+    { label: 'Projects', type: 'submenu', submenu: projectItems },
+    { type: 'separator' },
+    { label: 'Quit', action: 'quit' },
+  ]
+}
+
+export async function installTrayMenu(projects: string[], onAction: TrayActionHandler): Promise<() => void> {
+  const craft = bridge()
+  if (!craft?.tray)
+    return () => {}
+
+  await craft.tray.setTitle('Stacks')
+  await craft.tray.setTooltip('Stacks project shortcuts')
+  await craft.tray.setMenu(buildTrayMenu(projects))
+  const removeClick = craft.tray.onClickToggleWindow()
+  const listener = (event: Event) => {
+    const action = (event as CustomEvent<{ action?: string }>).detail?.action
+    if (action && action !== 'quit') void onAction(action)
+  }
+  globalThis.addEventListener('craft:tray:menuAction', listener)
+  return () => {
+    removeClick()
+    globalThis.removeEventListener('craft:tray:menuAction', listener)
+  }
+}

package/resources/layouts/README.md

@@ -1,14 +1,17 @@
-## Layouts
+# Layouts
 
-Vue components in this dir are used as layouts.
+STX layouts wrap pages with shared navigation, metadata, and structure.
 
-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:
+`default.stx` is used when a page does not select another layout. A page can
+choose a named layout with the STX layout directive:
 
 ```html
-<route lang="yaml">
-meta:
-  layout: home
-</route>
+@layout('home')
+
+<main>
+  <h1>{{ title }}</h1>
+</main>
 ```
+
+Layouts live in this directory and use the same STX template syntax as pages
+and components.

package/resources/views/index.stx

@@ -550,12 +550,6 @@ Sponsor Here</div>
       <div class="package-desc">WebSocket & real-time features</div>
     </div>
 
-    <div class="package-item">
-      <div class="package-emoji">🔬</div>
-      <div class="package-title">X-Ray</div>
-      <div class="package-desc">Debugging & monitoring tools</div>
-    </div>
-
     <div class="package-item">
       <div class="package-emoji">💳</div>
       <div class="package-title">Payments</div>
@@ -613,7 +607,7 @@ Sponsor Here</div>
                   <div class="folder-item-icon">🏗️</div>
                   <div class="folder-item-content">
                     <div class="folder-item-name">stx</div>
-                    <div class="folder-item-desc">A fast & powerful UI framework. Templating inspired by Laravel Blade & Vue.</div>
+                    <div class="folder-item-desc">A fast & powerful UI framework. Templating inspired by Laravel Blade and modern component systems.</div>
                   </div>
                 </a>
             </div>