@stacksjs/defaults 0.70.54

package/resources/components/Dashboard/CreateRecordModal.stx

@@ -0,0 +1,363 @@
+<script server>
+/**
+ * Create Record Modal
+ * Native-styled dialog for creating new model records
+ *
+ * Props passed from parent via attributes:
+ * - modalId: Unique identifier for the modal
+ * - modelName: Display name of the model (e.g., "User")
+ * - tableName: Database table name (e.g., "users")
+ * - columns: Array of column definitions from PRAGMA table_info
+ *
+ * These are passed directly as template variables, no need to redeclare.
+ */
+
+// Use the passed variables directly (they're already in scope from props)
+// Just ensure defaults for safety
+const _modalId = typeof modalId !== 'undefined' ? modalId : 'create-record-modal'
+const _modelName = typeof modelName !== 'undefined' ? modelName : 'Record'
+const _tableName = typeof tableName !== 'undefined' ? tableName : ''
+const _columns = typeof columns !== 'undefined' ? columns : []
+
+// Filter out auto-generated columns that shouldn't be in the form
+const formColumns = _columns.filter(col => {
+  const name = col.name.toLowerCase()
+  // Skip auto-generated fields
+  if (name === 'id') return false
+  if (name === 'created_at' || name === 'updated_at') return false
+  if (name === 'deleted_at') return false
+  return true
+}
+
+// Determine input type based on column type and name
+function getInputType(col) {
+  const name = col.name.toLowerCase()
+  const type = (col.type || '').toUpperCase()
+
+  // Name-based detection
+  if (name.includes('email')) return 'email'
+  if (name.includes('password')) return 'password'
+  if (name.includes('phone') || name.includes('tel')) return 'tel'
+  if (name.includes('url') || name.includes('website') || name.includes('link')) return 'url'
+  if (name.includes('date') && !name.includes('_at')) return 'date'
+  if (name.includes('time') && !name.includes('_at')) return 'time'
+  if (name.includes('color')) return 'color'
+
+  // Type-based detection
+  if (type.includes('INT') || type.includes('NUMERIC') || type.includes('REAL') || type.includes('FLOAT') || type.includes('DOUBLE')) {
+    return 'number'
+  }
+  if (type.includes('BOOL')) return 'checkbox'
+  if (type.includes('TEXT') && (name.includes('description') || name.includes('content') || name.includes('body') || name.includes('bio'))) {
+    return 'textarea'
+  }
+
+  return 'text'
+}
+
+// Check if field should be a select/dropdown
+function isSelectField(col) {
+  const name = col.name.toLowerCase()
+  return name === 'status' || name === 'type' || name === 'role' || name.includes('_type') || name.includes('_status')
+}
+</script>
+<!-- Native-styled Modal Dialog -->
+<div ref="pageRoot">
+<dialog
+  id="{{ modalId }}"
+  class="p-0 max-w-lg w-full bg-white backdrop:bg-black/50 dark:bg-neutral-900 border-0 rounded-xl shadow-2xl backdrop:backdrop-blur-sm modal-dialog"
+>
+  <form method="dialog" class="modal-form">
+    <!-- Header - macOS style with vibrancy effect -->
+    <div class="flex items-center justify-between px-5 py-4 bg-neutral-50/80 dark:bg-neutral-800/80 border-b border-neutral-200 rounded-t-xl dark:border-neutral-700">
+      <div>
+        <h2 class="font-semibold text-base text-neutral-900 dark:text-white">
+          Create {{ modelName }}
+        </h2>
+        <p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">
+          Add a new record to {{ tableName }}
+        </p>
+      </div>
+      <button
+        type="button"
+        class="p-1.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded-lg transition-colors modal-close-btn"
+        aria-label="Close"
+      >
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+        </svg>
+      </button>
+    </div>
+
+    <!-- Body - Form Fields -->
+    <div class="overflow-y-auto px-5 py-4 space-y-4 max-h-[60vh]">
+      @foreach(formColumns as col)
+        <div class="form-field">
+          <label
+            for="{{ modalId }}-{{ col.name }}"
+            class="block mb-1.5 font-medium text-neutral-700 text-sm dark:text-neutral-300"
+          >
+            {{ col.label }}
+            @if(col.notnull && col.dflt_value === null)
+              <span class="ml-0.5 text-red-500">*</span>
+            @endif
+          </label>
+
+          @if(isSelectField(col))
+            <!-- Select dropdown for status/type fields -->
+            <select
+              id="{{ modalId }}-{{ col.name }}"
+              name="{{ col.name }}"
+              class="px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-neutral-300 rounded-lg dark:border-neutral-600 focus:border-transparent focus:ring-2 focus:ring-blue-500 transition-shadow"
+              {{ col.notnull && col.dflt_value === null ? 'required' : '' }}
+            >
+              <option value="">Select {{ col.label }}</option>
+              @if(col.name === 'status')
+                <option value="active">Active</option>
+                <option value="inactive">Inactive</option>
+                <option value="pending">Pending</option>
+                <option value="draft">Draft</option>
+              @elseif(col.name === 'role')
+                <option value="user">User</option>
+                <option value="admin">Admin</option>
+                <option value="moderator">Moderator</option>
+              @else
+                <option value="default">Default</option>
+              @endif
+            </select>
+
+          @elseif(getInputType(col) === 'textarea')
+            <!-- Textarea for long text -->
+            <textarea
+              id="{{ modalId }}-{{ col.name }}"
+              name="{{ col.name }}"
+              rows="3"
+              class="px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-neutral-300 rounded-lg dark:border-neutral-600 focus:border-transparent focus:ring-2 focus:ring-blue-500 transition-shadow resize-none"
+              placeholder="Enter {{ col.label.toLowerCase() }}"
+              {{ col.notnull && col.dflt_value === null ? 'required' : '' }}
+            ></textarea>
+
+          @elseif(getInputType(col) === 'checkbox')
+            <!-- Checkbox toggle -->
+            <label class="flex gap-3 items-center cursor-pointer">
+              <input
+                type="checkbox"
+                id="{{ modalId }}-{{ col.name }}"
+                name="{{ col.name }}"
+                value="1"
+                class="h-4 w-4 text-blue-600 border-neutral-300 rounded dark:border-neutral-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-0"
+              />
+              <span class="text-neutral-600 text-sm dark:text-neutral-400">Enable {{ col.label.toLowerCase() }}</span>
+            </label>
+
+          @else
+            <!-- Standard input -->
+            <input
+              type="{{ getInputType(col) }}"
+              id="{{ modalId }}-{{ col.name }}"
+              name="{{ col.name }}"
+              class="px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-neutral-300 rounded-lg dark:border-neutral-600 focus:border-transparent focus:ring-2 focus:ring-blue-500 transition-shadow"
+              placeholder="Enter {{ col.label.toLowerCase() }}"
+              {{ col.notnull && col.dflt_value === null ? 'required' : '' }}
+              {{ getInputType(col) === 'number' ? 'step="any"' : '' }}
+            />
+          @endif
+
+          @if(col.dflt_value !== null)
+            <p class="mt-1 text-neutral-400 text-xs dark:text-neutral-500">
+              Default: {{ col.dflt_value }}
+            </p>
+          @endif
+        </div>
+      @endforeach
+
+      @if(formColumns.length === 0)
+        <div class="py-8 text-center text-neutral-500 dark:text-neutral-400">
+          <p>No editable fields available for this model.</p>
+        </div>
+      @endif
+    </div>
+
+    <!-- Footer - Action buttons -->
+    <div class="flex gap-3 items-center justify-end px-5 py-4 bg-neutral-50/50 dark:bg-neutral-800/50 border-neutral-200 border-t rounded-b-xl dark:border-neutral-700">
+      <button
+        type="button"
+        class="px-4 py-2 font-medium text-neutral-700 text-sm dark:text-neutral-300 bg-white dark:bg-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-600 border border-neutral-300 rounded-lg dark:border-neutral-600 transition-colors modal-close-btn"
+      >
+        Cancel
+      </button>
+      <button
+        type="submit"
+        class="px-4 py-2 font-medium text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-900 disabled:opacity-50 transition-colors disabled:cursor-not-allowed modal-submit-btn"
+        {{ formColumns.length === 0 ? 'disabled' : '' }}
+      >
+        Create {{ modelName }}
+      </button>
+    </div>
+  </form>
+</dialog>
+</div>
+<script client>
+var _root = useRef('pageRoot')
+onMount(function() {
+  var el = _root.current;
+  if (!el) return;
+  // Initialize all create record modals
+  el.querySelectorAll('.modal-dialog').forEach(dialog => {
+    const form = dialog.querySelector('.modal-form');
+    const closeButtons = dialog.querySelectorAll('.modal-close-btn');
+    const submitBtn = dialog.querySelector('.modal-submit-btn');
+
+    // Close on close button click
+    closeButtons.forEach(btn => {
+      btn.addEventListener('click', () => {
+        dialog.close();
+      });
+    });
+
+    // Close on backdrop click
+    dialog.addEventListener('click', (e) => {
+      if (e.target === dialog) {
+        dialog.close();
+      }
+    });
+
+    // Close on Escape key
+    dialog.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        dialog.close();
+      }
+    });
+
+    // Handle form submission
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+
+      const formData = new FormData(form);
+      const data = Object.fromEntries(formData.entries());
+
+      // Get table name from the modal's data attribute or hidden field
+      const tableName = dialog.dataset.table || '';
+      const modelName = dialog.dataset.model || 'Record';
+
+      // Show loading state
+      submitBtn.disabled = true;
+      submitBtn.innerHTML = `
+        <svg class="inline -ml-1 mr-2 h-4 w-4 text-white animate-spin" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        Creating...
+      `;
+
+      try {
+        // Post to API endpoint
+        const response = await fetch(`/api/data/${tableName}`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(data),
+        });
+
+        if (response.ok) {
+          // Show success via Craft native alert if available
+          if (window.webkit?.messageHandlers?.craft) {
+            window.webkit.messageHandlers.craft.postMessage({
+              type: 'dialog',
+              action: 'showAlert',
+              data: {
+                title: `${modelName} Created`,
+                message: 'The record was created successfully.',
+                style: 'info'
+              }
+            });
+          }
+
+          dialog.close();
+          form.reset();
+
+          // Reload the page to show the new record
+          location.reload();
+        } else {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.message || 'Failed to create record');
+        }
+      } catch (error) {
+        // Show error via Craft native alert if available
+        if (window.webkit?.messageHandlers?.craft) {
+          window.webkit.messageHandlers.craft.postMessage({
+            type: 'dialog',
+            action: 'showAlert',
+            data: {
+              title: 'Error',
+              message: error.message || 'Failed to create the record.',
+              style: 'critical'
+            }
+          });
+        } else {
+          alert('Error: ' + (error.message || 'Failed to create the record.'));
+        }
+      } finally {
+        // Reset button state
+        submitBtn.disabled = false;
+        submitBtn.innerHTML = `Create ${modelName}`;
+      }
+    });
+  });
+});
+</script>
+
+<style>
+/* Native macOS-style dialog animations */
+.modal-dialog {
+  animation: modal-appear 0.2s ease-out;
+}
+
+.modal-dialog::backdrop {
+  animation: backdrop-fade 0.2s ease-out;
+}
+
+@keyframes modal-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes backdrop-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Focus styles for accessibility */
+.modal-dialog:focus {
+  outline: none;
+}
+
+/* Scrollbar styling for the form area */
+.modal-dialog .max-h-\[60vh\]::-webkit-scrollbar {
+  width: 6px;
+}
+
+.modal-dialog .max-h-\[60vh\]::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.modal-dialog .max-h-\[60vh\]::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.dark .modal-dialog .max-h-\[60vh\]::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+</style>

package/resources/components/Dashboard/DashboardLayout.stx

@@ -0,0 +1,155 @@
+<script>
+interface DashboardLayoutProps {
+  isMobileMenuOpen?: boolean
+  isMobile?: boolean
+  currentPath?: string
+  isDark?: boolean
+  fullWidth?: boolean
+  pageTitle?: string
+  pageDescription?: string
+  noPadding?: boolean
+  showSidebar?: boolean
+  showNavbar?: boolean
+  showWindowControls?: boolean
+  isSidebarCollapsed?: boolean
+}
+
+const { isMobileMenuOpen, isMobile, currentPath = '/', isDark = false, fullWidth, pageTitle, pageDescription, noPadding, showSidebar = true, showNavbar = true, showWindowControls = false, isSidebarCollapsed = false } = defineProps<DashboardLayoutProps>()
+
+/**
+ * Dashboard Layout Component
+ * A unified layout wrapper that combines the modern sidebar and navbar
+ * for consistent dashboard page structure.
+ *
+ * When running inside Craft with --native-sidebar, the native macOS
+ * sidebar is rendered by Craft - we skip the web sidebar in that case.
+ */
+
+// Sidebar width calculation (matches Sidebar width)
+function getSidebarWidth() {
+  if (isMobile) return 0
+  return isSidebarCollapsed ? 64 : 240
+}
+
+function getMainContentStyle() {
+  if (!showSidebar || isMobile) return ''
+  return `padding-left: ${getSidebarWidth()}px`
+}
+
+// Determine if we should show the web sidebar
+function shouldShowWebSidebar() {
+  return showSidebar
+}
+</script>
+<script>
+(function() {
+  if (typeof window === 'undefined') return;
+
+  // Detect native sidebar via multiple signals:
+  // 1. Craft bridge flag (WKUserScript injection)
+  // 2. Craft window API
+  // 3. URL parameter (reliable fallback when WKUserScript timing is off)
+  var hasNativeSidebarFlag = Boolean(window.__craftNativeSidebar);
+  var hasCraftWindowApi = Boolean(window.craft && window.craft.window);
+  var hasUrlParam = window.location.search.indexOf('native-sidebar=1') !== -1;
+  var hasNativeSidebar = hasNativeSidebarFlag || hasCraftWindowApi || hasUrlParam;
+
+  if (hasNativeSidebar) {
+    window.__craftNativeSidebar = true;
+    document.documentElement.setAttribute('data-craft-native-sidebar', 'true');
+  }
+})();
+</script>
+<!-- macOS-inspired layout with subtle background -->
+<div class="min-h-screen bg-white dark:bg-neutral-950">
+  <!-- Mobile sidebar overlay -->
+  @if(isMobileMenuOpen && isMobile)
+    <div
+      class="lg:hidden fixed inset-0 z-40 bg-black/50 backdrop-blur-sm duration-300 transition-opacity"
+      data-action="close-mobile-menu"
+    ></div>
+  @endif
+
+  <!-- Mobile sidebar (web-based, only when no native sidebar) -->
+  @if(isMobileMenuOpen && isMobile && shouldShowWebSidebar())
+    <div class="lg:hidden fixed inset-y-0 left-0 z-50 w-64 duration-300 transition-transform dashboard-web-sidebar">
+      <Sidebar />
+    </div>
+  @endif
+
+  <!-- Desktop sidebar (web-based, only when no native sidebar) -->
+  @if(shouldShowWebSidebar() && !isMobile)
+    <div class="dashboard-web-sidebar">
+      <Sidebar />
+    </div>
+  @endif
+
+  <!-- Main content area -->
+  <div
+    class="flex flex-col min-h-screen duration-300 transition-all dashboard-main-content"
+    style="{{ getMainContentStyle() }}"
+  >
+    <!-- Navbar -->
+    @if(showNavbar)
+      <NavbarModern
+        showWindowControls="{{ showWindowControls }}"
+        currentPath="{{ currentPath || '/' }}"
+        isDark="{{ isDark || false }}"
+      />
+    @endif
+
+    <!-- Page header slot -->
+    @if($slots.header)
+      <div class="bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800">
+        <div class="px-4 lg:px-6 py-4 {{ fullWidth ? '' : 'max-w-7xl mx-auto' }}">
+          <slot name="header">
+            <!-- Default page header -->
+            @if(pageTitle)
+              <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                <div>
+                  <h1 class="font-semibold text-2xl text-neutral-900 dark:text-white">
+                    {{ pageTitle }}
+                  </h1>
+                  @if(pageDescription)
+                    <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">
+                      {{ pageDescription }}
+                    </p>
+                  @endif
+                </div>
+                <slot name="header-actions" />
+              </div>
+            @endif
+          </slot>
+        </div>
+      </div>
+    @endif
+
+    <!-- Main content -->
+    <main class="{{ noPadding ? '' : 'px-4 lg:px-6 py-6' }} flex-1">
+      <div class="{{ fullWidth ? '' : 'max-w-7xl mx-auto' }}">
+        <slot />
+      </div>
+    </main>
+
+    <!-- Footer slot -->
+    @if($slots.footer)
+      <footer class="bg-white dark:bg-neutral-900 border-neutral-200 border-t dark:border-neutral-800">
+        <div class="px-4 lg:px-6 py-4 {{ fullWidth ? '' : 'max-w-7xl mx-auto' }}">
+          <slot name="footer" />
+        </div>
+      </footer>
+    @endif
+  </div>
+
+  <!-- Global overlays/modals slot -->
+  <slot name="overlays" />
+</div>
+<style>
+html[data-craft-native-sidebar='true'] .dashboard-web-sidebar {
+  display: none !important;
+}
+
+html[data-craft-native-sidebar='true'] .dashboard-main-content {
+  padding-left: 0 !important;
+}
+</style>

package/resources/components/Dashboard/Deployments/ActivityFeed.stx

@@ -0,0 +1,54 @@
+<script>
+interface ActivityFeedProps {
+  commits?: any[]
+}
+
+const { commits = [] } = defineProps<ActivityFeedProps>()
+
+function getTimeDifference(dateString) {
+    const date = new Date(dateString)
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffMins = Math.floor(diffMs / (1000 * 60))
+    const diffHours = Math.floor(diffMins / 60)
+    const diffDays = Math.floor(diffHours / 24)
+
+    if (diffDays > 0) return `${diffDays}d ago`
+    if (diffHours > 0) return `${diffHours}h ago`
+    if (diffMins > 0) return `${diffMins}m ago`
+    return 'Just now'
+  }
+</script>
+<aside class="lg:bottom-0 lg:fixed lg:overflow-y-auto lg:right-0 lg:top-16 lg:w-96 bg-black/2 lg:border-l lg:border-white/5">
+    <header class="flex items-center justify-between px-4 py-4 sm:px-6 sm:py-6 lg:px-8 border-b border-white/5">
+      <h2 class="font-semibold leading-7 text-base dark:text-white">
+        Activity feed
+      </h2>
+    </header>
+
+    @if(commits.length > 0)
+      <ul role="list" class="divide-gray-200 divide-y">
+        @foreach(commits as commit, index)
+          <li class="px-4 py-4 sm:px-6 lg:px-8">
+            <div class="flex gap-x-3 items-center">
+              <a target="_new" href="{{ commit.author.html_url }}">
+                <img src="{{ commit.author.avatar_url }}" alt="" class="flex-none h-6 w-6 bg-gray-800 rounded-full">
+              </a>
+              <a target="_new" href="{{ commit.author.html_url }}" class="flex-auto font-semibold leading-6 text-sm truncate dark:text-white">
+                {{ commit.author.login }}
+              </a>
+              <time datetime="{{ commit.commit.committer.date }}" class="flex-none text-gray-600 text-xs">
+                {{ getTimeDifference(commit.commit.committer.date) }}
+              </time>
+            </div>
+            <p class="mt-3 text-gray-500 text-sm">
+              <a href="{{ commit.commit.url }}" class="font-mono text-gray-400 truncate hover:text-gray-500">
+                {{ commit.sha.slice(0, 10) }}
+              </a>
+              on <span class="text-gray-400">main</span>
+            </p>
+          </li>
+        @endforeach
+      </ul>
+    @endif
+  </aside>

package/resources/components/Dashboard/Deployments/DeployScript.stx

@@ -0,0 +1,23 @@
+<div class="pt-12 px-4 sm:px-6 lg:px-8">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="font-semibold leading-6 text-base text-gray-900">
+          Deploy Script
+        </h1>
+
+        <p class="mt-2 text-gray-700 text-sm">
+          If you need a custom deploy script, you may specify it here.
+        </p>
+      </div>
+    </div>
+
+    <div class="flow-root mt-8">
+      <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+        <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+          <div class="overflow-hidden">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>