@stacksjs/defaults 0.70.54

package/resources/components/Dashboard/SidebarModern.stx

@@ -0,0 +1,249 @@
+<script>
+interface SidebarModernProps {
+  isCollapsed?: boolean
+  searchQuery?: string
+  expandedSections?: boolean
+  currentTeam?: string
+}
+
+const { isCollapsed = false, searchQuery = '', expandedSections = {, currentTeam = { } = defineProps<SidebarModernProps>()
+
+/**
+ * Dashboard Sidebar
+ *
+ * Uses stx native Sidebar components with Craft integration for
+ * true native macOS sidebar rendering when running in Craft.
+ * Dynamically loads models from app/Models directory.
+ */
+
+// Import stx Sidebar components from @stacksjs/components
+import { Sidebar, SidebarHeader, SidebarFooter } from '@stacksjs/components'
+
+// Load models dynamically using synchronous fs
+const fs = require('node:fs')
+const path = require('node:path')
+
+// Get list of models from app/Models directory
+function getModelItems() {
+  const modelsDir = path.join(process.cwd(), 'app', 'Models')
+  const items = []
+
+  try {
+    const files = fs.readdirSync(modelsDir)
+    for (const file of files) {
+      if (file.endsWith('.ts') && !file.startsWith('index') && !file.startsWith('_') && !file.startsWith('README')) {
+        const modelName = file.replace('.ts', '')
+        // Convert PascalCase to kebab-case for URL
+        const urlSlug = modelName
+          .replace(/([a-z])([A-Z])/g, '$1-$2')
+          .toLowerCase()
+        items.push({
+          id: `model-${urlSlug}`,
+          label: modelName,
+          icon: 'i-hugeicons-database-01',
+          href: `/models/${urlSlug}`,
+        }
+      }
+    }
+  } catch (e) {
+    // If directory doesn't exist, return empty array
+  }
+
+  // Sort alphabetically by label
+  items.sort((a, b) => a.label.localeCompare(b.label))
+  return items
+}
+
+const modelItems = getModelItems()
+
+// State
+// Section expansion state
+  library: true,
+  content: false,
+  app: false,
+  models: false,
+  data: false,
+  commerce: false,
+  marketing: false,
+  analytics: false,
+  management: false,
+}
+
+// Current team
+  id: 1,
+  name: 'Stacks',
+  type: 'Professional',
+}
+
+// Navigation sections configuration
+const sections = [
+  {
+    id: 'library',
+    label: 'Library',
+    icon: 'i-hugeicons-book-02',
+    expanded: expandedSections.library,
+    items: [
+      { id: 'components', label: 'Components', icon: 'i-hugeicons-puzzle', href: '/components' },
+      { id: 'functions', label: 'Functions', icon: 'i-hugeicons-function-square', href: '/functions' },
+      { id: 'releases', label: 'Releases', icon: 'i-hugeicons-right-to-left-list-number', href: '/releases' },
+      { id: 'packages', label: 'Packages', icon: 'i-hugeicons-package', href: '/packages' },
+    ],
+  },
+  {
+    id: 'content',
+    label: 'Content',
+    icon: 'i-hugeicons-file-02',
+    expanded: expandedSections.content,
+    items: [
+      { id: 'content-dashboard', label: 'Dashboard', icon: 'i-hugeicons-dashboard-speed-01', href: '/content/dashboard' },
+      { id: 'files', label: 'Files', icon: 'i-hugeicons-apple-finder', href: '/content/files' },
+      { id: 'pages', label: 'Pages', icon: 'i-hugeicons-file-02', href: '/content/pages' },
+      { id: 'posts', label: 'Posts', icon: 'i-hugeicons-message-edit-02', href: '/content/posts' },
+      { id: 'categories', label: 'Categories', icon: 'i-hugeicons-tags', href: '/content/categories' },
+      { id: 'tags', label: 'Tags', icon: 'i-hugeicons-tag-01', href: '/content/tags' },
+      { id: 'comments', label: 'Comments', icon: 'i-hugeicons-comment-01', href: '/content/comments' },
+      { id: 'authors', label: 'Authors', icon: 'i-hugeicons-user-edit-01', href: '/content/authors' },
+      { id: 'seo', label: 'SEO', icon: 'i-hugeicons-seo', href: '/content/seo' },
+    ],
+  },
+  {
+    id: 'models',
+    label: 'Models',
+    icon: 'i-hugeicons-database',
+    expanded: expandedSections.models,
+    items: modelItems,
+  },
+  {
+    id: 'app',
+    label: 'App',
+    icon: 'i-hugeicons-code',
+    expanded: expandedSections.app,
+    items: [
+      { id: 'deployments', label: 'Deployments', icon: 'i-hugeicons-rocket-01', href: '/deployments' },
+      { id: 'requests', label: 'Requests', icon: 'i-hugeicons-api', href: '/requests' },
+      { id: 'realtime', label: 'Realtime', icon: 'i-hugeicons-link-03', href: '/realtime' },
+      { id: 'actions', label: 'Actions', icon: 'i-hugeicons-function-of-x', href: '/actions' },
+      { id: 'commands', label: 'Commands', icon: 'i-hugeicons-command-line', href: '/commands' },
+      { id: 'queue', label: 'Queue', icon: 'i-hugeicons-queue-02', href: '/queue' },
+      { id: 'jobs', label: 'Jobs', icon: 'i-hugeicons-briefcase-01', href: '/jobs' },
+      { id: 'queries', label: 'Queries', icon: 'i-hugeicons-search-area', href: '/queries' },
+      { id: 'errors', label: 'Errors', icon: 'i-hugeicons-bug-01', href: '/monitoring/errors' },
+    ],
+  },
+  {
+    id: 'commerce',
+    label: 'Commerce',
+    icon: 'i-hugeicons-shopping-cart-02',
+    expanded: expandedSections.commerce,
+    items: [
+      { id: 'commerce-dashboard', label: 'Dashboard', icon: 'i-hugeicons-dashboard-speed-01', href: '/commerce/dashboard' },
+      { id: 'pos', label: 'POS', icon: 'i-hugeicons-shopping-cart-02', href: '/commerce/pos' },
+      { id: 'customers', label: 'Customers', icon: 'i-hugeicons-user-account', href: '/commerce/customers' },
+      { id: 'orders', label: 'Orders', icon: 'i-hugeicons-search-list-01', href: '/commerce/orders' },
+      { id: 'products', label: 'Products', icon: 'i-hugeicons-package', href: '/commerce/products' },
+      { id: 'payments', label: 'Payments', icon: 'i-hugeicons-invoice-01', href: '/commerce/payments' },
+      { id: 'delivery', label: 'Delivery', icon: 'i-hugeicons-shipping-truck-01', href: '/commerce/delivery' },
+    ],
+  },
+  {
+    id: 'data',
+    label: 'Data',
+    icon: 'i-hugeicons-database',
+    expanded: expandedSections.data,
+    items: [
+      { id: 'data-dashboard', label: 'Dashboard', icon: 'i-hugeicons-dashboard-speed-01', href: '/data/dashboard' },
+      { id: 'activity', label: 'Activity', icon: 'i-hugeicons-activity-01', href: '/data/activity' },
+      { id: 'users', label: 'Users', icon: 'i-hugeicons-user-group', href: '/data/users' },
+      { id: 'teams', label: 'Teams', icon: 'i-hugeicons-user-multiple', href: '/data/teams' },
+      { id: 'subscribers', label: 'Subscribers', icon: 'i-hugeicons-mail-01', href: '/data/subscribers' },
+    ],
+  },
+  {
+    id: 'marketing',
+    label: 'Marketing',
+    icon: 'i-hugeicons-megaphone-01',
+    expanded: expandedSections.marketing,
+    items: [
+      { id: 'lists', label: 'Lists', icon: 'i-hugeicons-list-setting', href: '/marketing/lists' },
+      { id: 'social-posts', label: 'Social Posts', icon: 'i-hugeicons-time-schedule', href: '/marketing/social-posts' },
+      { id: 'campaigns', label: 'Campaigns', icon: 'i-hugeicons-rocket-01', href: '/marketing/campaigns' },
+      { id: 'reviews', label: 'Reviews', icon: 'i-hugeicons-star', href: '/marketing/reviews' },
+    ],
+  },
+  {
+    id: 'analytics',
+    label: 'Analytics',
+    icon: 'i-hugeicons-chart-line-data-01',
+    expanded: expandedSections.analytics,
+    items: [
+      { id: 'web', label: 'Web', icon: 'i-hugeicons-global', href: '/analytics/web' },
+      { id: 'blog', label: 'Blog', icon: 'i-hugeicons-edit-02', href: '/analytics/blog' },
+      { id: 'commerce-analytics', label: 'Commerce', icon: 'i-hugeicons-shopping-bag-01', href: '/analytics/commerce' },
+      { id: 'events', label: 'Events', icon: 'i-hugeicons-cursor-click-02', href: '/analytics/events' },
+    ],
+  },
+  {
+    id: 'management',
+    label: 'Management',
+    icon: 'i-hugeicons-settings-02',
+    expanded: expandedSections.management,
+    items: [
+      { id: 'cloud', label: 'Cloud', icon: 'i-hugeicons-cloud', href: '/cloud' },
+      { id: 'dns', label: 'DNS', icon: 'i-hugeicons-internet', href: '/dns' },
+      { id: 'permissions', label: 'Permissions', icon: 'i-hugeicons-shield-01', href: '/management/permissions' },
+      { id: 'mailboxes', label: 'Mailboxes', icon: 'i-hugeicons-mailbox-01', href: '/mailboxes' },
+      { id: 'logs', label: 'Logs', icon: 'i-hugeicons-file-search', href: '/logs' },
+      { id: 'health', label: 'Health', icon: 'i-hugeicons-pulse-02', href: '/health' },
+    ],
+  },
+]
+
+// Quick actions for footer
+const footerActions = [
+  { label: 'AI Buddy', icon: 'i-hugeicons-ai-chat-02', href: '/buddy' },
+]
+
+// Handlers
+function handleCollapse(collapsed) {
+  isCollapsed = collapsed
+}
+
+function handleSectionToggle(sectionId) {
+  expandedSections[sectionId] = !expandedSections[sectionId]
+}
+
+function handleSearch(value) {
+  searchQuery = value
+}
+</script>
+<Sidebar
+  :sections="sections"
+  :collapsed="isCollapsed"
+  :collapsible="true"
+  :width="240"
+  :minWidth="64"
+  variant="tahoe"
+  position="left"
+  :bordered="true"
+  @collapse="handleCollapse"
+  @sectionToggle="handleSectionToggle"
+>
+  <template #header>
+    <SidebarHeader
+      :title="currentTeam.name"
+      :subtitle="currentTeam.type"
+      :showSearch="true"
+      :searchValue="searchQuery"
+      :collapsed="isCollapsed"
+      @search="handleSearch"
+    />
+    <template #footer>
+      <SidebarFooter
+        :showSettings="true"
+        :showThemeToggle="true"
+        settingsHref="/settings"
+        :collapsed="isCollapsed"
+        :actions="footerActions"
+      />
+    </template>
+</Sidebar>

package/resources/components/Dashboard/Skeleton/LoadingCard.stx

@@ -0,0 +1,15 @@
+<script>
+interface LoadingCardProps {
+  width?: number
+  height?: number
+}
+
+const { width = 16, height = 4 } = defineProps<LoadingCardProps>()
+</script>
+<div class="mx-auto w-full rounded-md shadow">
+  <div class="flex space-x-4 animate-pulse">
+    <div class="flex-1 space-y-6">
+      <div class="bg-slate-300 rounded-md" style="height: {{ height }}rem"></div>
+    </div>
+  </div>
+</div>

package/resources/components/Dashboard/Skeleton/LoadingDetails.stx

@@ -0,0 +1,26 @@
+<script>
+interface LoadingDetailsProps {
+  width?: number
+  height?: number
+}
+
+const { width = 16, height = 4 } = defineProps<LoadingDetailsProps>()
+</script>
+<div class="mx-auto p-4 w-full rounded-md" style="height: {{ height }}rem">
+  <div class="space-y-12 animate-pulse">
+    <!-- Title -->
+    <div class="h-4 w-3/4 bg-slate-300 rounded-md"></div>
+
+    <!-- Description -->
+    <div class="space-y-2">
+      <div class="h-3 w-full bg-slate-300 rounded-md"></div>
+      <div class="h-3 w-5/6 bg-slate-300 rounded-md"></div>
+    </div>
+
+    <!-- Buttons -->
+    <div class="flex space-x-4">
+      <div class="h-8 w-1/4 bg-slate-300 rounded-md"></div>
+      <div class="h-8 w-1/4 bg-slate-300 rounded-md"></div>
+    </div>
+  </div>
+</div>

package/resources/components/Dashboard/Table.stx

@@ -0,0 +1,82 @@
+<!--
+  Custom Dashboard Table Component
+
+  A reusable table component for dashboard data display.
+
+  Usage:
+  <Table
+    :columns="[{ key: 'name', label: 'Name' }, { key: 'status', label: 'Status' }]"
+    :data="[{ name: 'Item 1', status: 'active' }]"
+  />
+-->
+
+<script>
+interface TableProps {
+  columns: any[]
+  data: any[]
+  striped?: boolean
+  hoverable?: boolean
+}
+
+const { columns, data, striped, hoverable } = defineProps<TableProps>()
+</script>
+<div class="dashboard-table-container">
+    <table class="dashboard-table {{ striped ? 'striped' : '' }} {{ hoverable ? 'hoverable' : '' }}">
+      <thead>
+        <tr>
+          @foreach (columns as column)
+            <th class="{{ column.align ? 'text-' + column.align : '' }}">
+              {{ column.label }}
+            </th>
+          @endforeach
+        </tr>
+      </thead>
+      <tbody>
+        @foreach (data as row)
+          <tr>
+            @foreach (columns as column)
+              <td class="{{ column.align ? 'text-' + column.align : '' }}">
+                @if (column.render)
+                  {{ column.render(row[column.key], row) }}
+                @else
+                  {{ row[column.key] }}
+                @endif
+              </td>
+            @endforeach
+          </tr>
+        @endforeach
+      </tbody>
+    </table>
+  </div>
+<style>
+.dashboard-table-container {
+  overflow-x: auto;
+}
+.dashboard-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.dashboard-table th,
+.dashboard-table td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid var(--color-border);
+}
+.dashboard-table th {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  background: var(--color-bg-subtle);
+}
+.dashboard-table.striped tbody tr:nth-child(even) {
+  background: var(--color-bg-subtle);
+}
+.dashboard-table.hoverable tbody tr:hover {
+  background: var(--color-bg-hover);
+}
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+</style>

package/resources/components/Dashboard/TerminalContainer.stx

@@ -0,0 +1,97 @@
+<script>
+interface TerminalContainerProps {
+  live?: boolean
+  path?: string
+  branch?: string
+  version?: string
+}
+
+const { live = false, path = '~/Code/stacks', branch = 'main', version = 'v1.2.3' } = defineProps<TerminalContainerProps>()
+
+const files = [
+    'CHANGELOG.md', 'LICENSE.md', 'README.md', 'app',
+    'bootstrap', 'buddy', 'cloud', 'commitlint.config.ts',
+    'bun.lock', 'bunfig.toml', 'config', 'database',
+    'docs', 'eslint.config.ts', 'node_modules', 'package.json',
+    'pantry.yaml', 'public', 'resources', 'routes',
+    'storage', 'tests', 'tsconfig.json', '~'
+  ]
+</script>
+<div class="font-mono">
+    <div class="flex flex-col h-full w-full text-[#C9D1D9] bg-[#0D1117] rounded-lg shadow">
+      <!-- Terminal Header -->
+      <header class="flex items-center justify-between px-3 py-2 bg-[#161B22] rounded-t-lg">
+        <div class="flex gap-2 items-center">
+          <div class="h-3 w-3 bg-[#FF5F56] rounded-full"></div>
+          <div class="h-3 w-3 bg-[#FFBD2E] rounded-full"></div>
+          <div class="h-3 w-3 bg-[#27C93F] rounded-full"></div>
+        </div>
+        <div class="absolute left-1/2 text-[#8B949E] text-sm -translate-x-1/2">
+          {{ path }}
+        </div>
+      </header>
+
+      <!-- Terminal Content -->
+      <div class="p-4 leading-6 text-sm">
+        <div class="flex gap-2 items-center text-[#C9D1D9]">
+          <span class="text-[#8B949E]">{{ path }}</span>
+          <span>on</span>
+          <span class="flex gap-1 items-center">
+            <span class="text-[#7EE787]">{{ branch }}</span>
+          </span>
+          <span>via</span>
+          <span class="flex gap-1 items-center">
+            <span class="text-[#8B949E]">🐰</span>
+            <span class="text-[#FF7B72]">{{ version }}</span>
+          </span>
+        </div>
+
+        <div class="flex gap-2 items-center mt-1 text-[#C9D1D9]">
+          <span class="text-[#8B949E]">❯</span>
+          <span>ls</span>
+        </div>
+
+        <div class="grid gap-4 grid-cols-4 mt-2">
+          @foreach(files as file)
+            <div class="text-[#C9D1D9]">{{ file }}</div>
+          @endforeach
+        </div>
+
+        <div class="flex gap-2 items-center mt-4 text-[#C9D1D9]">
+          <span class="text-[#8B949E]">{{ path }}</span>
+          <span>on</span>
+          <span class="flex gap-1 items-center">
+            <span class="text-[#7EE787]">{{ branch }}</span>
+          </span>
+          <span>via</span>
+          <span class="flex gap-1 items-center">
+            <span class="text-[#8B949E]">🐰</span>
+            <span class="text-[#FF7B72]">{{ version }}</span>
+          </span>
+        </div>
+
+        <div class="flex gap-2 items-center mt-1 text-[#C9D1D9]">
+          <span class="text-[#8B949E]">❯</span>
+          <input
+            type="text"
+            class="flex-1 bg-transparent border-0 outline-0 active:outline-0 active:ring-0 focus:outline-0 focus:ring-0"
+            style="-webkit-tap-highlight-color: transparent;"
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+<style>
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+.cli-cursor {
+  opacity: 1;
+}
+
+.cursor-blink {
+  animation: blink 1s step-end infinite;
+}
+</style>

package/resources/components/Dashboard/Tooltip.stx

@@ -0,0 +1,166 @@
+<script>
+interface TooltipProps {
+  label?: string
+  position?: string
+  dark?: boolean
+  alignment?: string
+}
+
+// `label` (was `text`) holds the tooltip body. The original `text` prop
+// collided with the auto-imported text() validator from @stacksjs/validation,
+// which leaked the validator function source into the rendered tooltip.
+const { label = '', position = 'bottom', dark = false, alignment = 'center' } = defineProps<TooltipProps>()
+</script>
+<div
+    class="tooltip-container"
+    data-tooltip
+  >
+    <slot />
+
+    <span
+      class="tooltip {{ position }} {{ dark ? 'dark-tooltip' : '' }} align-{{ alignment }}"
+      data-tooltip-text
+    >
+      {{ label }}
+    </span>
+  </div>
+<style>
+.tooltip-container {
+  position: relative;
+  display: inline-flex;
+}
+
+.tooltip {
+  visibility: hidden;
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  text-align: center;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  z-index: 100;
+  opacity: 0;
+  transition: opacity 0.2s, visibility 0.2s;
+}
+
+.tooltip-container:hover .tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* Position variations */
+.tooltip.bottom {
+  bottom: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.tooltip.bottom.align-left {
+  left: 0;
+  transform: none;
+}
+
+.tooltip.bottom.align-right {
+  left: auto;
+  right: 0;
+  transform: none;
+}
+
+.tooltip.top {
+  top: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.tooltip.top.align-left {
+  left: 0;
+  transform: none;
+}
+
+.tooltip.top.align-right {
+  left: auto;
+  right: 0;
+  transform: none;
+}
+
+.tooltip.left {
+  left: -8px;
+  top: 50%;
+  transform: translate(-100%, -50%);
+}
+
+.tooltip.right {
+  right: -8px;
+  top: 50%;
+  transform: translate(100%, -50%);
+}
+
+/* Arrows for each position */
+.tooltip.bottom::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
+}
+
+.tooltip.top::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
+}
+
+.tooltip.left::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 100%;
+  margin-top: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent transparent rgba(0, 0, 0, 0.8);
+}
+
+.tooltip.right::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  margin-top: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
+}
+
+/* Dark mode adjustments */
+.dark-tooltip {
+  background-color: rgba(255, 255, 255, 0.8);
+  color: #1e293b;
+}
+
+.dark-tooltip.bottom::after {
+  border-bottom-color: rgba(255, 255, 255, 0.8);
+}
+
+.dark-tooltip.top::after {
+  border-top-color: rgba(255, 255, 255, 0.8);
+}
+
+.dark-tooltip.left::after {
+  border-left-color: rgba(255, 255, 255, 0.8);
+}
+
+.dark-tooltip.right::after {
+  border-right-color: rgba(255, 255, 255, 0.8);
+}
+</style>