@nocobase/app-template-default 1.0.0-beta.57 → 1.0.0-beta.59

package/client/styles.css

@@ -8,6 +8,21 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* The stationary brand and a constant orbit read as loading at every size. */
+@keyframes nocobase-loading-orbit {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.nocobase-loading-orbit {
+  transform-origin: 32px 32px;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .nocobase-loading-orbit {
+    animation: nocobase-loading-orbit 1.1s linear infinite;
+  }
+}
+
 @theme {
   --font-heading: var(--font-sans);
   /* These names are implemented below as runtime-variable utilities. */
@@ -120,3 +135,232 @@
 [data-slot='toast-viewport'] {
   z-index: 100;
 }
+
+/* Application-wide interaction and badge treatment, outside generated primitives. */
+@layer base {
+  :is(
+      button,
+      [role='button'],
+      [role='menuitem'],
+      [role='option'],
+      [role='tab'],
+      [role='checkbox'],
+      [role='radio'],
+      [role='switch'],
+      [role='combobox'],
+      a[href]
+    ):not(:disabled):not([aria-disabled='true']):not([data-disabled]) {
+    cursor: pointer;
+  }
+}
+
+[data-slot='badge'] {
+  border-radius: var(--radius-md);
+  min-height: calc(var(--spacing) * 7);
+  height: auto;
+  padding-inline: calc(var(--spacing) * 2.5);
+  line-height: 1.4;
+}
+
+/* Shared overlay treatment lives outside generated shadcn primitives. */
+:is(
+  [data-slot='dialog-overlay'],
+  [data-slot='alert-dialog-overlay'],
+  [data-slot='sheet-overlay']
+) {
+  background: var(--overlay-backdrop);
+}
+:is(
+  [data-slot='dialog-content'],
+  [data-slot='alert-dialog-content'],
+  [data-slot='route-overlay-content']
+) {
+  border: 1px solid var(--border);
+  box-shadow: var(--overlay-shadow);
+}
+[data-slot='route-overlay-content'][data-presentation='dialog'] {
+  border-radius: var(--radius-xl);
+}
+:is([data-slot='dialog-title'], [data-slot='alert-dialog-title']) {
+  font-size: var(--text-lg);
+  font-weight: 600;
+  line-height: 1.4;
+}
+:is([data-slot='dialog-description'], [data-slot='alert-dialog-description']) {
+  line-height: 1.65;
+}
+:is(
+    [data-slot='dialog-footer'],
+    [data-slot='alert-dialog-footer'],
+    [data-slot='route-overlay-footer']
+  )
+  > button {
+  min-height: calc(var(--spacing) * 10);
+  padding-inline: calc(var(--spacing) * 4);
+}
+[data-slot='dialog-content'] > [data-slot='dialog-close'] {
+  top: calc(var(--spacing) * 4);
+  right: calc(var(--spacing) * 4);
+}
+[data-slot='dialog-header'] {
+  padding-right: calc(var(--spacing) * 8);
+}
+[data-slot='alert-dialog-media'] {
+  border-radius: var(--radius-lg);
+  width: calc(var(--spacing) * 12);
+  height: calc(var(--spacing) * 12);
+}
+[data-slot='alert'] {
+  padding: calc(var(--spacing) * 4);
+  row-gap: calc(var(--spacing) * 1.5);
+  column-gap: calc(var(--spacing) * 3);
+  border-radius: var(--radius-lg);
+}
+[data-slot='alert'][data-tone='info'] {
+  background: color-mix(in srgb, var(--primary) 5%, var(--card));
+  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
+}
+[data-slot='alert'][data-tone='info'] > svg {
+  color: var(--primary);
+}
+[data-slot='alert-action'] {
+  top: calc(var(--spacing) * 4);
+  right: calc(var(--spacing) * 4);
+}
+[data-slot='toast'] {
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-lg);
+}
+[data-slot='toast-content'] {
+  padding: calc(var(--spacing) * 4);
+  align-items: center;
+  gap: calc(var(--spacing) * 3);
+}
+[data-slot='toast-viewport'] {
+  width: 22rem;
+  max-width: calc(100vw - 2rem);
+}
+[data-slot='toast-content']:has([data-slot='toast-description']:not(:empty)) {
+  align-items: flex-start;
+}
+:is([data-slot='toast-title'], [data-slot='toast-description']) {
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+[data-slot='toast-close'] {
+  width: calc(var(--spacing) * 6);
+  height: calc(var(--spacing) * 6);
+  opacity: 0.55;
+  transition:
+    opacity 150ms ease,
+    background-color 150ms ease;
+}
+[data-slot='toast-close']:is(:hover, :focus-visible) {
+  opacity: 1;
+}
+
+[data-slot='toast-icon'] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--spacing) * 7);
+  height: calc(var(--spacing) * 7);
+  border-radius: var(--radius-lg);
+  background: var(--accent);
+  color: var(--primary);
+}
+[data-slot='toast-icon']:has(.lucide-circle-check) {
+  background: var(--status-success-background);
+  color: var(--status-success);
+}
+[data-slot='toast-icon']:has(.lucide-octagon-x) {
+  background: color-mix(in srgb, var(--destructive) 10%, var(--popover));
+  color: var(--destructive);
+}
+[data-slot='toast-icon']:has(.lucide-triangle-alert) {
+  background: var(--status-warning-background);
+  color: var(--status-warning);
+}
+[data-slot='alert'].text-destructive {
+  background: color-mix(in srgb, var(--destructive) 5%, var(--card));
+  border-color: color-mix(in srgb, var(--destructive) 20%, var(--border));
+}
+[data-slot='alert-dialog-header']:has([data-slot='alert-dialog-media']) {
+  grid-template-columns: max-content minmax(0, 1fr);
+  column-gap: calc(var(--spacing) * 4);
+  align-items: start;
+  justify-items: start;
+  text-align: left;
+}
+[data-slot='alert-dialog-header'] > [data-slot='alert-dialog-media'] {
+  grid-column: 1;
+  grid-row: 1 / span 2;
+  margin-bottom: 0;
+}
+[data-slot='alert-dialog-header']:has([data-slot='alert-dialog-media'])
+  > :is(
+    [data-slot='alert-dialog-title'],
+    [data-slot='alert-dialog-description']
+  ) {
+  grid-column: 2;
+}
+[data-slot='alert']:has([data-slot='alert-action']) {
+  padding-right: calc(var(--spacing) * 24);
+}
+
+/* Compact content can stay dense while the primary navigation remains comfortable.
+   The primitive's important icon-mode sizes still control the collapsed rail. */
+:root[data-theme='compact'] .app-navigation [data-slot='sidebar-menu-button'] {
+  height: calc(var(--spacing) * 12);
+  padding-inline: calc(var(--spacing) * 4);
+}
+:root[data-theme='compact'] .app-navigation [data-slot='sidebar-menu'] {
+  gap: calc(var(--spacing) * 1.5);
+}
+
+/* Brand tint belongs to the application shell, independent of each page's content. */
+.app-brand-surface {
+  background-image: radial-gradient(
+    ellipse at 100% 0%,
+    color-mix(in srgb, var(--primary) 6%, transparent),
+    transparent 70%
+  );
+  background-size: 100% 18rem;
+  background-repeat: no-repeat;
+}
+
+/* Shared table hierarchy stays neutral so semantic status colors remain distinct. */
+[data-slot='table-header'] {
+  background: color-mix(in srgb, var(--muted) 70%, var(--card));
+}
+[data-slot='table-header'] [data-slot='table-row']:hover {
+  background: transparent;
+}
+[data-slot='table-head'] {
+  height: calc(var(--spacing) * 12);
+  padding-inline: calc(var(--spacing) * 3);
+  color: color-mix(in srgb, var(--foreground) 80%, var(--muted-foreground));
+  font-weight: 600;
+}
+[data-slot='table-cell'] {
+  padding-inline: calc(var(--spacing) * 3);
+}
+[data-slot='table-head'][aria-sort]:not([aria-sort='none']) {
+  color: var(--primary);
+}
+[data-slot='table-head'] button {
+  font-weight: inherit;
+}
+[data-slot='table-head'] button:hover {
+  color: var(--primary);
+}
+
+/* Nested items keep a comfortable rhythm independently of compact content. */
+.app-navigation [data-slot='sidebar-menu-sub-button'] {
+  height: calc(var(--spacing) * 10);
+  padding-inline: calc(var(--spacing) * 3);
+}
+.app-navigation [data-slot='sidebar-menu-sub'] {
+  gap: calc(var(--spacing) * 1.5);
+  padding-block: calc(var(--spacing) * 1.5);
+}

package/client/theme/theme-settings.tsx

@@ -3,6 +3,7 @@ import { useTheme } from 'next-themes';
 import { useTranslation } from '@nocobase/i18n/client';
 import { useId, type ReactElement } from 'react';
 import { Button } from '#components/ui/button';
+import { RadioGroup, RadioGroupItem } from '#components/ui/radio-group';
 import {
   Popover,
   PopoverTrigger,
@@ -56,7 +57,13 @@ export function ThemeSettings(): ReactElement {
           <legend className='text-xs font-medium text-muted-foreground'>
             {t('appearance.mode', { defaultValue: 'Color mode' })}
           </legend>
-          <div className='grid grid-cols-3 gap-1 rounded-lg bg-muted/70 p-1'>
+          <RadioGroup
+            name={id + '-mode'}
+            value={theme}
+            onValueChange={(value) => setTheme(String(value))}
+            aria-label={t('appearance.mode', { defaultValue: 'Color mode' })}
+            className='grid-cols-3 gap-1 rounded-lg bg-muted/70 p-1'
+          >
             {COLOR_MODES.map(({ id: mode, icon: ModeIcon }) => {
               const isSelected = theme === mode;
               return (
@@ -69,14 +76,7 @@ export function ThemeSettings(): ReactElement {
                       : 'text-muted-foreground hover:bg-background/40 hover:text-foreground',
                   )}
                 >
-                  <input
-                    type='radio'
-                    name={id + '-mode'}
-                    value={mode}
-                    checked={isSelected}
-                    onChange={() => setTheme(mode)}
-                    className='sr-only'
-                  />
+                  <RadioGroupItem value={mode} className='sr-only' />
                   <ModeIcon aria-hidden='true' className='size-3.5 shrink-0' />
                   <span className='whitespace-nowrap'>
                     {t('appearance.' + mode, {
@@ -86,14 +86,23 @@ export function ThemeSettings(): ReactElement {
                 </label>
               );
             })}
-          </div>
+          </RadioGroup>
         </fieldset>
 
         <fieldset className='space-y-2'>
           <legend className='text-xs font-medium text-muted-foreground'>
             {t('appearance.preset', { defaultValue: 'Theme' })}
           </legend>
-          <div className='grid grid-cols-2 gap-2.5'>
+          <RadioGroup
+            name={id + '-preset'}
+            value={preset}
+            onValueChange={(value) => {
+              const selected = themePresets.find((item) => item.id === value);
+              if (selected) setPreset(selected.id);
+            }}
+            aria-label={t('appearance.preset', { defaultValue: 'Theme' })}
+            className='grid-cols-2 gap-2.5'
+          >
             {themePresets.map((item) => {
               const isSelected = preset === item.id;
               return (
@@ -106,14 +115,7 @@ export function ThemeSettings(): ReactElement {
                       : 'border-border/70 hover:border-border hover:bg-muted/30',
                   )}
                 >
-                  <input
-                    type='radio'
-                    name={id + '-preset'}
-                    value={item.id}
-                    checked={isSelected}
-                    onChange={() => setPreset(item.id)}
-                    className='sr-only'
-                  />
+                  <RadioGroupItem value={item.id} className='sr-only' />
                   <div className='mb-2 h-16 w-full'>
                     <div
                       aria-hidden='true'
@@ -168,7 +170,7 @@ export function ThemeSettings(): ReactElement {
                 </label>
               );
             })}
-          </div>
+          </RadioGroup>
         </fieldset>
       </PopoverContent>
     </Popover>

package/client/theme/themes/compact.css

@@ -50,20 +50,31 @@
   --foreground: oklch(0.16 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.16 0 0);
+  --overlay-backdrop: rgb(15 23 42 / 0.28);
+  --overlay-shadow:
+    0 24px 64px -16px rgb(15 23 42 / 0.22),
+    0 8px 24px -12px rgb(15 23 42 / 0.16);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.16 0 0);
-  --primary: oklch(0.18 0 0);
-  --primary-foreground: oklch(0.985 0 0);
+  --primary: #002ad1;
+  --auth-brand-background: #101c3b;
+  --auth-brand-highlight: #8ca9ff;
+  --auth-brand-muted: #b8c4df;
+  --status-success: rgb(21 112 70);
+  --status-success-background: rgb(236 249 241);
+  --status-warning: rgb(150 79 10);
+  --status-warning-background: rgb(255 246 229);
+  --primary-foreground: rgb(255 255 255);
   --secondary: oklch(0.96 0 0);
   --secondary-foreground: oklch(0.22 0 0);
   --muted: oklch(0.96 0 0);
   --muted-foreground: oklch(0.52 0 0);
-  --accent: oklch(0.94 0 0);
-  --accent-foreground: oklch(0.22 0 0);
+  --accent: rgb(237 242 255);
+  --accent-foreground: rgb(0 42 209);
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.9 0 0);
   --input: oklch(0.9 0 0);
-  --ring: oklch(0.55 0 0);
+  --ring: var(--primary);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -71,10 +82,10 @@
   --chart-5: oklch(0.769 0.188 70.08);
   --sidebar: var(--card);
   --sidebar-foreground: var(--card-foreground);
-  --sidebar-primary: color-mix(in oklch, var(--primary) 10%, var(--sidebar));
+  --sidebar-primary: color-mix(in srgb, var(--primary) 8%, var(--sidebar));
   --sidebar-primary-foreground: var(--primary);
-  --sidebar-accent: var(--muted);
-  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
   --sidebar-border: var(--border);
   --sidebar-ring: var(--ring);
 }
@@ -85,20 +96,27 @@
   --foreground: oklch(0.96 0 0);
   --card: oklch(0.18 0 0);
   --card-foreground: oklch(0.985 0 0);
+  --overlay-backdrop: rgb(0 0 0 / 0.58);
+  --overlay-shadow:
+    0 24px 64px -16px rgb(0 0 0 / 0.6), 0 8px 24px -12px rgb(0 0 0 / 0.4);
   --popover: oklch(0.18 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.94 0 0);
-  --primary-foreground: oklch(0.16 0 0);
+  --primary: #8ca9ff;
+  --status-success: rgb(119 216 160);
+  --status-success-background: rgb(23 49 37);
+  --status-warning: rgb(242 190 103);
+  --status-warning-background: rgb(57 43 24);
+  --primary-foreground: rgb(10 24 64);
   --secondary: oklch(0.24 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.23 0 0);
   --muted-foreground: oklch(0.7 0 0);
-  --accent: oklch(0.27 0 0);
-  --accent-foreground: oklch(0.985 0 0);
+  --accent: rgb(30 42 72);
+  --accent-foreground: rgb(174 194 255);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.62 0 0);
+  --ring: var(--primary);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
@@ -106,10 +124,10 @@
   --chart-5: oklch(0.645 0.246 16.439);
   --sidebar: var(--card);
   --sidebar-foreground: var(--card-foreground);
-  --sidebar-primary: color-mix(in oklch, var(--primary) 10%, var(--sidebar));
+  --sidebar-primary: color-mix(in srgb, var(--primary) 8%, var(--sidebar));
   --sidebar-primary-foreground: var(--primary);
-  --sidebar-accent: var(--muted);
-  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
   --sidebar-border: var(--border);
   --sidebar-ring: var(--ring);
 }

package/client/theme/themes/default.css

@@ -51,20 +51,31 @@
   --foreground: oklch(0.16 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.16 0 0);
+  --overlay-backdrop: rgb(15 23 42 / 0.28);
+  --overlay-shadow:
+    0 24px 64px -16px rgb(15 23 42 / 0.22),
+    0 8px 24px -12px rgb(15 23 42 / 0.16);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.16 0 0);
-  --primary: oklch(0.18 0 0);
-  --primary-foreground: oklch(0.985 0 0);
+  --primary: #002ad1;
+  --auth-brand-background: #101c3b;
+  --auth-brand-highlight: #8ca9ff;
+  --auth-brand-muted: #b8c4df;
+  --status-success: rgb(21 112 70);
+  --status-success-background: rgb(236 249 241);
+  --status-warning: rgb(150 79 10);
+  --status-warning-background: rgb(255 246 229);
+  --primary-foreground: rgb(255 255 255);
   --secondary: oklch(0.96 0 0);
   --secondary-foreground: oklch(0.22 0 0);
   --muted: oklch(0.96 0 0);
   --muted-foreground: oklch(0.52 0 0);
-  --accent: oklch(0.94 0 0);
-  --accent-foreground: oklch(0.22 0 0);
+  --accent: rgb(237 242 255);
+  --accent-foreground: rgb(0 42 209);
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.9 0 0);
   --input: oklch(0.9 0 0);
-  --ring: oklch(0.55 0 0);
+  --ring: var(--primary);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -72,10 +83,10 @@
   --chart-5: oklch(0.769 0.188 70.08);
   --sidebar: var(--card);
   --sidebar-foreground: var(--card-foreground);
-  --sidebar-primary: color-mix(in oklch, var(--primary) 10%, var(--sidebar));
+  --sidebar-primary: color-mix(in srgb, var(--primary) 8%, var(--sidebar));
   --sidebar-primary-foreground: var(--primary);
-  --sidebar-accent: var(--muted);
-  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
   --sidebar-border: var(--border);
   --sidebar-ring: var(--ring);
 }
@@ -87,20 +98,27 @@
   --foreground: oklch(0.96 0 0);
   --card: oklch(0.18 0 0);
   --card-foreground: oklch(0.985 0 0);
+  --overlay-backdrop: rgb(0 0 0 / 0.58);
+  --overlay-shadow:
+    0 24px 64px -16px rgb(0 0 0 / 0.6), 0 8px 24px -12px rgb(0 0 0 / 0.4);
   --popover: oklch(0.18 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.94 0 0);
-  --primary-foreground: oklch(0.16 0 0);
+  --primary: #8ca9ff;
+  --status-success: rgb(119 216 160);
+  --status-success-background: rgb(23 49 37);
+  --status-warning: rgb(242 190 103);
+  --status-warning-background: rgb(57 43 24);
+  --primary-foreground: rgb(10 24 64);
   --secondary: oklch(0.24 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.23 0 0);
   --muted-foreground: oklch(0.7 0 0);
-  --accent: oklch(0.27 0 0);
-  --accent-foreground: oklch(0.985 0 0);
+  --accent: rgb(30 42 72);
+  --accent-foreground: rgb(174 194 255);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.62 0 0);
+  --ring: var(--primary);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
@@ -108,10 +126,10 @@
   --chart-5: oklch(0.645 0.246 16.439);
   --sidebar: var(--card);
   --sidebar-foreground: var(--card-foreground);
-  --sidebar-primary: color-mix(in oklch, var(--primary) 10%, var(--sidebar));
+  --sidebar-primary: color-mix(in srgb, var(--primary) 8%, var(--sidebar));
   --sidebar-primary-foreground: var(--primary);
-  --sidebar-accent: var(--muted);
-  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
   --sidebar-border: var(--border);
   --sidebar-ring: var(--ring);
 }

package/config.example.yml

@@ -84,22 +84,6 @@ notification:
     #   provider: dingtalk-webhook
     #   webhookUrl: https://oapi.dingtalk.com/robot/send?access_token=replace-with-the-token
 
-# Declarative LLM services are loaded from application config, keyed by service name.
-# The server reads this when it starts: restart it after editing, which `pnpm dev` does on its own.
-# Keep the key out of this file. Write it into config.yml with
-# `pnpm nocobase config set --from-env ai.llmServices.openai.options.apiKey=OPENAI_API_KEY`,
-# or map an injected environment variable onto that path in server/config/ai.ts.
-# ai:
-#   llmServices:
-#     openai:
-#       title: OpenAI
-#       provider: openai
-#       enabledModels:
-#         - label: GPT-4.1
-#           value: gpt-4.1
-#       enabled: true
-#       sort: 10
-
 # DB_DIALECT, DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, DB_PASSWORD, DB_SSL and DB_FILENAME override the main
 # connection's fields from the environment.
 database:

package/eslint.config.js

@@ -8,17 +8,4 @@ export default createApplicationConfig({
     'public/r/**',
     'storage/**',
   ],
-  overrides: [
-    {
-      // Top-level workflow definitions and handlers use the server project.
-      files: ['workflows/**/*.ts'],
-      ignores: ['workflows/*/client/**'],
-      languageOptions: {
-        parserOptions: {
-          projectService: false,
-          project: './tsconfig.server.json',
-        },
-      },
-    },
-  ],
 });

package/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#171717" />
+    <meta name="theme-color" content="#002ad1" />
     <meta name="description" content="NocoBase administration console" />
     <meta data-rh="true" property="og:image" content="/assets/logo-mark.png" />
     <meta data-rh="true" name="twitter:image" content="/assets/logo-mark.png" />
@@ -16,16 +16,24 @@
         align-items: center;
         justify-content: center;
         background: oklch(0.985 0 0);
-        color: oklch(0.18 0 0);
+        color: #002ad1;
+        flex-direction: column;
+        gap: 0.75rem;
+        font:
+          14px system-ui,
+          sans-serif;
       }
 
       .app-bootstrap-loading [data-slot='loading-indicator'] {
-        width: 1.75rem;
-        height: 1.75rem;
-        opacity: 0;
-        animation:
-          app-bootstrap-reveal 0s 200ms forwards,
-          app-bootstrap-spin 1s linear 200ms infinite;
+        width: 3rem;
+        height: 3rem;
+      }
+      .app-bootstrap-loading .nocobase-loading-orbit {
+        transform-origin: 32px 32px;
+        animation: app-bootstrap-spin 1.1s linear infinite;
+      }
+      .app-bootstrap-loading span {
+        color: oklch(0.556 0 0);
       }
 
       html,
@@ -48,14 +56,18 @@
       @media (prefers-color-scheme: dark) {
         .app-bootstrap-loading {
           background: oklch(0.145 0 0);
-          color: oklch(0.9 0 0);
+          color: #8ca9ff;
         }
       }
 
+      @media (prefers-color-scheme: dark) {
+        .app-bootstrap-loading span {
+          color: oklch(0.708 0 0);
+        }
+      }
       @media (prefers-reduced-motion: reduce) {
-        .app-bootstrap-loading [data-slot='loading-indicator'] {
+        .app-bootstrap-loading .nocobase-loading-orbit {
           animation: none;
-          opacity: 0.65;
         }
       }
     </style>
@@ -71,18 +83,38 @@
       >
         <svg
           data-slot="loading-indicator"
-          viewBox="0 0 24 24"
+          viewBox="0 0 64 64"
           fill="none"
           aria-hidden="true"
         >
-          <path
-            d="M21 12a9 9 0 1 1-6.219-8.56"
+          <circle
+            cx="32"
+            cy="32"
+            r="28"
             stroke="currentColor"
             stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            opacity=".12"
           />
+          <g class="nocobase-loading-orbit">
+            <path
+              d="M32 4a28 28 0 0 1 28 28"
+              stroke="currentColor"
+              stroke-width="3"
+              stroke-linecap="round"
+            />
+          </g>
+          <g
+            transform="translate(15 17.176475219726562) scale(.34)"
+            fill="currentColor"
+          >
+            <g transform="translate(0 -6.401886463165283)">
+              <path
+                d="M99.876 55.369c-.025-.045-.076-.072-.109-.111-.066-.078-.125-.168-.217-.221l-.014-.008-.001-.002h-.001L80.368 43.648v-24.67a.92.92 0 0 0-.124-.459c-.026-.045-.075-.072-.108-.111-.066-.08-.126-.168-.218-.221l-.014-.008-.001-.002h-.002L60.286 6.531a.92.92 0 0 0-.94 0L20.099 29.834h-.002l-.001.002-.014.006c-.092.055-.151.143-.218.221-.033.041-.082.068-.108.113a.907.907 0 0 0-.124.457v1.361L.466 43.373H.465l-.001.002c-.098.055-.162.143-.23.227-.034.041-.084.068-.109.113a.898.898 0 0 0-.125.457v25.195c0 .324.171.625.45.791l39.264 23.311c.002.002.006 0 .008.002l.007.008a.924.924 0 0 0 .911 0c.003-.002.004-.006.008-.008.001-.002.005 0 .007-.002l19.161-11.377 19.162 11.377c.002.002.006 0 .008.002.004.002.004.006.007.008a.924.924 0 0 0 .911 0c.003-.002.004-.006.008-.008.002-.002.005 0 .007-.002L99.55 81.812a.916.916 0 0 0 .45-.791V55.828a.92.92 0 0 0-.124-.459zM41.104 65.867V42.812l37.424-22.219v23.055L41.104 65.867zM59.815 8.391l17.83 10.588L59.82 29.561 40.185 41.219l-17.83-10.586 37.46-22.242zM39.264 42.812V65.866L21.472 55.305V32.248l17.792 10.564z"
+              />
+            </g>
+          </g>
         </svg>
+        <span>Loading application…</span>
       </div>
     </div>
     <script type="module" src="/client/index.tsx"></script>