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

package/client/theme/theme-preferences.ts

@@ -0,0 +1,84 @@
+import { readAppClientRuntimeConfig } from '@nocobase/app-client/runtime';
+
+// Shared preference helpers for normal client startup and the React provider.
+export function themeStorageKeys(base: string): {
+  mode: string;
+  preset: string;
+} {
+  const path = base.replace(/^\/+|\/+$/g, '');
+  const scope = path ? encodeURIComponent(path) : '%2F';
+  return {
+    mode: `nocobase:${scope}:theme:color-scheme`,
+    preset: `nocobase:${scope}:theme:preset`,
+  };
+}
+
+export function readThemePreference(key: string): string | null {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+export function initializeTheme(
+  base: string,
+  presets: readonly string[],
+): void {
+  const defaults = readThemeDefaults(presets);
+  const keys = themeStorageKeys(base);
+  const savedMode = readThemePreference(keys.mode);
+  const mode =
+    savedMode && ['light', 'dark', 'system'].includes(savedMode)
+      ? savedMode
+      : defaults.mode;
+  const savedPreset = readThemePreference(keys.preset);
+  const preset =
+    savedPreset && presets.includes(savedPreset)
+      ? savedPreset
+      : defaults.preset;
+  const resolved =
+    mode === 'system'
+      ? window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light'
+      : mode;
+  document.documentElement.classList.remove('light', 'dark');
+  document.documentElement.classList.add(resolved);
+  document.documentElement.dataset.theme = preset;
+  document.documentElement.style.colorScheme = resolved;
+  // next-themes reads storage itself; normalize invalid modes before it mounts.
+  if (savedMode && !['light', 'dark', 'system'].includes(savedMode)) {
+    try {
+      localStorage.removeItem(keys.mode);
+    } catch {
+      /* Storage can be unavailable. */
+    }
+  }
+}
+
+// Read the same server-injected config at startup and Provider mount without
+// coupling the shared client runtime to application-owned theme presets.
+export function readThemeDefaults(presets: readonly string[]): {
+  mode: string;
+  preset: string;
+} {
+  const config = readAppClientRuntimeConfig() as { app?: unknown };
+  const app = config.app;
+  const values =
+    typeof app === 'object' && app !== null
+      ? (app as Record<string, unknown>)
+      : {};
+  const mode = values.defaultColorScheme;
+  const preset = values.defaultTheme;
+  return {
+    mode:
+      mode === 'light' || mode === 'dark' || mode === 'system'
+        ? mode
+        : 'system',
+    preset:
+      typeof preset === 'string' && presets.includes(preset)
+        ? preset
+        : presets[0],
+  };
+}

package/client/theme/theme-presets.ts

@@ -0,0 +1,7 @@
+export const themePresets = [
+  { id: 'compact', labelKey: 'appearance.themes.compact' },
+  { id: 'default', labelKey: 'appearance.themes.default' },
+] as const;
+
+export type ThemePresetId = (typeof themePresets)[number]['id'];
+export const defaultThemePreset: ThemePresetId = 'compact';

package/client/theme/theme-provider.tsx

@@ -0,0 +1,106 @@
+import { PresetContext } from './theme-context';
+import { resolveAppBase } from '@nocobase/app-client';
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from 'next-themes';
+import { useEffect, useState, type ReactElement } from 'react';
+import {
+  readThemeDefaults,
+  readThemePreference,
+  themeStorageKeys,
+} from './theme-preferences';
+import { themePresets, type ThemePresetId } from './theme-presets';
+
+const validPreset = (
+  value: string | null,
+  fallback: ThemePresetId,
+): ThemePresetId =>
+  themePresets.find((item) => item.id === value)?.id ?? fallback;
+
+function ModeStorageSync({
+  storageKey,
+  defaultTheme,
+}: {
+  storageKey: string;
+  defaultTheme: string;
+}): null {
+  useEffect(() => {
+    const sync = (event: StorageEvent) => {
+      if (
+        event.key === null ||
+        (event.key === storageKey &&
+          event.newValue !== defaultTheme &&
+          !['light', 'dark', 'system'].includes(event.newValue ?? ''))
+      ) {
+        // Consume invalid mode events before next-themes can persist its fallback.
+        // Re-dispatch a valid value for its state-only synchronization path.
+        // Let clear events through so the preset listener also resets.
+        if (event.key === storageKey) event.stopImmediatePropagation();
+        queueMicrotask(() => {
+          window.dispatchEvent(
+            new StorageEvent('storage', {
+              key: storageKey,
+              newValue: defaultTheme,
+            }),
+          );
+        });
+      }
+    };
+    window.addEventListener('storage', sync, true);
+    return () => window.removeEventListener('storage', sync, true);
+  }, [defaultTheme, storageKey]);
+  return null;
+}
+
+export function AppThemeProvider({
+  children,
+  attribute = 'class',
+  defaultTheme,
+  enableSystem = true,
+  storageKey = themeStorageKeys(resolveAppBase()).mode,
+  ...props
+}: ThemeProviderProps): ReactElement {
+  const [defaults] = useState(() =>
+    readThemeDefaults(themePresets.map(({ id }) => id)),
+  );
+  const mode = defaultTheme ?? defaults.mode;
+  const fallbackPreset = defaults.preset as ThemePresetId;
+  const presetKey = themeStorageKeys(resolveAppBase()).preset;
+  const [preset, setPreset] = useState(() =>
+    validPreset(readThemePreference(presetKey), fallbackPreset),
+  );
+  const selectPreset = (value: ThemePresetId) => {
+    setPreset(value);
+    try {
+      localStorage.setItem(presetKey, value);
+    } catch {
+      /* Keep the in-memory selection. */
+    }
+  };
+  useEffect(() => {
+    document.documentElement.dataset.theme = preset;
+  }, [preset]);
+  useEffect(() => {
+    const sync = (event: StorageEvent) => {
+      if (event.key === presetKey || event.key === null)
+        setPreset(validPreset(event.newValue, fallbackPreset));
+    };
+    window.addEventListener('storage', sync, true);
+    return () => window.removeEventListener('storage', sync, true);
+  }, [presetKey, fallbackPreset]);
+  return (
+    <NextThemesProvider
+      {...props}
+      attribute={attribute}
+      defaultTheme={mode}
+      enableSystem={enableSystem}
+      storageKey={storageKey}
+    >
+      <ModeStorageSync storageKey={storageKey} defaultTheme={mode} />
+      <PresetContext.Provider value={{ preset, setPreset: selectPreset }}>
+        {children}
+      </PresetContext.Provider>
+    </NextThemesProvider>
+  );
+}

package/client/theme/theme-settings.tsx

@@ -0,0 +1,176 @@
+import { Check, Monitor, Moon, Palette, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { useTranslation } from '@nocobase/i18n/client';
+import { useId, type ReactElement } from 'react';
+import { Button } from '#components/ui/button';
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverTitle,
+} from '#components/ui/popover';
+import { cn } from 'cn';
+import { useThemePreset } from './theme-context';
+import { themePresets } from './theme-presets';
+
+const COLOR_MODES = [
+  { id: 'light', icon: Sun },
+  { id: 'dark', icon: Moon },
+  { id: 'system', icon: Monitor },
+] as const;
+
+export function ThemeSettings(): ReactElement {
+  const { theme, setTheme } = useTheme();
+  const { preset, setPreset } = useThemePreset();
+  const { t } = useTranslation();
+  const id = useId();
+  const title = t('appearance.title', { defaultValue: 'Appearance' });
+  return (
+    <Popover>
+      <PopoverTrigger
+        openOnHover
+        delay={0}
+        render={
+          <Button
+            aria-label={title}
+            size='icon'
+            variant='outline'
+            className='size-10 rounded-xl border-border/70 bg-background/60 hover:bg-accent/50'
+          />
+        }
+      >
+        <Palette aria-hidden='true' className='size-5' />
+      </PopoverTrigger>
+      {/* Keep the panel width independent of density; its content still uses theme tokens. */}
+      <PopoverContent
+        align='end'
+        className='w-xs max-w-[calc(100vw-2rem)] gap-4 p-4'
+      >
+        <div className='flex items-center justify-between'>
+          <PopoverTitle className='text-sm font-semibold text-foreground'>
+            {title}
+          </PopoverTitle>
+        </div>
+
+        <fieldset className='space-y-2'>
+          <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'>
+            {COLOR_MODES.map(({ id: mode, icon: ModeIcon }) => {
+              const isSelected = theme === mode;
+              return (
+                <label
+                  key={mode}
+                  className={cn(
+                    'relative flex min-w-0 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition-colors select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-ring',
+                    isSelected
+                      ? 'bg-background text-foreground shadow-xs'
+                      : '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'
+                  />
+                  <ModeIcon aria-hidden='true' className='size-3.5 shrink-0' />
+                  <span className='whitespace-nowrap'>
+                    {t('appearance.' + mode, {
+                      defaultValue: mode[0].toUpperCase() + mode.slice(1),
+                    })}
+                  </span>
+                </label>
+              );
+            })}
+          </div>
+        </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'>
+            {themePresets.map((item) => {
+              const isSelected = preset === item.id;
+              return (
+                <label
+                  key={item.id}
+                  className={cn(
+                    'group relative flex cursor-pointer flex-col rounded-xl border p-2 text-left transition-all select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-ring',
+                    isSelected
+                      ? 'border-primary ring-2 ring-primary/20 bg-primary/5 shadow-xs'
+                      : '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'
+                  />
+                  <div className='mb-2 h-16 w-full'>
+                    <div
+                      aria-hidden='true'
+                      data-theme={item.id}
+                      className='theme-preview relative flex h-full overflow-hidden rounded-lg border border-border/80 bg-background shadow-2xs'
+                    >
+                      {/* Mini Sidebar */}
+                      <div className='flex w-6 flex-col gap-1 border-r border-sidebar-border/50 bg-sidebar p-1'>
+                        <div className='size-2 rounded-xs bg-sidebar-primary-foreground' />
+                        <div className='h-1 w-full rounded-xs bg-sidebar-foreground/30' />
+                        <div className='h-1 w-full rounded-xs bg-sidebar-foreground/20' />
+                      </div>
+                      {/* Mini Main Content Area */}
+                      <div className='flex flex-1 flex-col p-1.5'>
+                        <div className='mb-1 flex items-center justify-between border-b border-border/40 pb-1'>
+                          <div className='h-1 w-7 rounded-xs bg-foreground/70' />
+                          <div className='size-1.5 rounded-full bg-primary' />
+                        </div>
+                        <div className='flex flex-1 flex-col justify-between'>
+                          <div className='h-1 w-full rounded-xs bg-muted' />
+                          <div className='flex items-center justify-between pt-1'>
+                            <div className='h-1 w-6 rounded-xs bg-muted' />
+                            <div className='h-3 w-5 rounded-xs bg-primary shadow-xs' />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className='mt-auto flex min-h-5 items-center justify-between gap-2 px-0.5'>
+                    <span
+                      className={cn(
+                        'text-xs transition-colors',
+                        isSelected
+                          ? 'font-medium text-foreground'
+                          : 'text-muted-foreground group-hover:text-foreground',
+                      )}
+                    >
+                      {t(item.labelKey, {
+                        defaultValue:
+                          item.id.charAt(0).toUpperCase() + item.id.slice(1),
+                      })}
+                    </span>
+                    {isSelected && (
+                      <span
+                        aria-hidden='true'
+                        className='flex size-3.5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground'
+                      >
+                        <Check className='size-2 stroke-[3]' />
+                      </span>
+                    )}
+                  </div>
+                </label>
+              );
+            })}
+          </div>
+        </fieldset>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/client/theme/themes/compact.css

@@ -0,0 +1,140 @@
+:root[data-theme='compact'],
+.theme-preview[data-theme='compact'] {
+  --font-sans:
+    ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
+    'Microsoft YaHei', sans-serif;
+  --font-serif:
+    ui-serif, Georgia, Cambria, 'Times New Roman', 'Songti SC', SimSun, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  --font-heading: var(--font-sans);
+  --spacing: 0.2rem;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-sm: 0.875rem;
+  --text-sm--line-height: calc(1.2 / 0.875);
+  --text-base: 1rem;
+  --text-base--line-height: calc(1.4 / 1);
+  --text-lg: 1.125rem;
+  --text-lg--line-height: calc(1.6 / 1.125);
+  --text-xl: 1.25rem;
+  --text-xl--line-height: calc(1.6 / 1.25);
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: calc(1.8 / 1.5);
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: calc(2.1 / 1.875);
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: calc(2.3 / 2.25);
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl:
+    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --radius: 0.375rem;
+  --background: oklch(0.985 0 0);
+  --foreground: oklch(0.16 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.16 0 0);
+  --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);
+  --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);
+  --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);
+  --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);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --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-foreground: var(--primary);
+  --sidebar-accent: var(--muted);
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+}
+
+:root.dark[data-theme='compact'],
+:root.dark .theme-preview[data-theme='compact'] {
+  --background: oklch(0.13 0 0);
+  --foreground: oklch(0.96 0 0);
+  --card: oklch(0.18 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --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);
+  --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);
+  --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);
+  --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);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --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-foreground: var(--primary);
+  --sidebar-accent: var(--muted);
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+}
+
+/* The Switch track is fixed in pixels while its thumb follows `--spacing`, so this preset's
+   smaller spacing leaves the checked knob short of the end. The literal values equal 4.6/8
+   (sm 3.5/6) times the default spacing; deriving the track from the token restores the
+   geometry. A descendant selector, so the token comparison only sees the declarations above. */
+:root[data-theme='compact'] [data-slot='switch'][data-size='default'],
+.theme-preview[data-theme='compact'] [data-slot='switch'][data-size='default'] {
+  width: calc(var(--spacing) * 8);
+  height: calc(var(--spacing) * 4.6);
+}
+
+:root[data-theme='compact'] [data-slot='switch'][data-size='sm'],
+.theme-preview[data-theme='compact'] [data-slot='switch'][data-size='sm'] {
+  width: calc(var(--spacing) * 6);
+  height: calc(var(--spacing) * 3.5);
+}
+
+/* Recharts draws a pie from fixed-pixel radii (`innerRadius={50}`) while the chart box height
+   follows `--spacing`, so this preset leaves the ring visibly thinner. Rendering the pie's
+   subtree at the spacious density restores the ring and the legend it sits beside; `:has`
+   limits the override to pie charts, leaving the h-72 trend chart scaled. */
+:root[data-theme='compact'] [data-slot='chart']:has(.recharts-pie),
+.theme-preview[data-theme='compact'] [data-slot='chart']:has(.recharts-pie) {
+  --spacing: 0.25rem;
+}

package/client/theme/themes/default.css

@@ -0,0 +1,117 @@
+:root,
+:root[data-theme='default'],
+.theme-preview[data-theme='default'] {
+  --font-sans:
+    ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
+    'Microsoft YaHei', sans-serif;
+  --font-serif:
+    ui-serif, Georgia, Cambria, 'Times New Roman', 'Songti SC', SimSun, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  --font-heading: var(--font-sans);
+  --spacing: 0.25rem;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-sm: 0.875rem;
+  --text-sm--line-height: calc(1.25 / 0.875);
+  --text-base: 1rem;
+  --text-base--line-height: calc(1.5 / 1);
+  --text-lg: 1.125rem;
+  --text-lg--line-height: calc(1.75 / 1.125);
+  --text-xl: 1.25rem;
+  --text-xl--line-height: calc(1.75 / 1.25);
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: calc(2 / 1.5);
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: calc(2.25 / 1.875);
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: calc(2.5 / 2.25);
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl:
+    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --radius: 0.5rem;
+  --background: oklch(0.985 0 0);
+  --foreground: oklch(0.16 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.16 0 0);
+  --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);
+  --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);
+  --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);
+  --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);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --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-foreground: var(--primary);
+  --sidebar-accent: var(--muted);
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+}
+
+:root.dark,
+:root.dark[data-theme='default'],
+:root.dark .theme-preview[data-theme='default'] {
+  --background: oklch(0.13 0 0);
+  --foreground: oklch(0.96 0 0);
+  --card: oklch(0.18 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --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);
+  --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);
+  --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);
+  --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);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --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-foreground: var(--primary);
+  --sidebar-accent: var(--muted);
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+}

package/client/vite-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="vite/client" />
+
+interface Window {
+  [key: string]: unknown;
+}

package/components.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "client/styles.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "#components",
+    "utils": "#lib/utils",
+    "ui": "#components/ui",
+    "lib": "#lib",
+    "hooks": "#hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {
+    "@nocobase": "https://ui.nocobase.com/r/{name}.json"
+  }
+}