@genispace/geniapp 0.1.0

package/dist/styles/base.css

@@ -0,0 +1,616 @@
+/**
+ * GeniSpace Base Styles
+ *
+ * Single shared stylesheet imported by every sub-application.
+ * Contains: CSS variables, base resets, component classes, utility classes,
+ * glassmorphism styles, keyframes, and theme-transition setup.
+ */
+
+/* Font system */
+@import '../fonts.css';
+@import './reduced-motion.css';
+@import '../components/ui/calendar.css';
+
+/* Tailwind layers */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* =========================================================================
+   BASE LAYER – CSS Variables & Resets
+   ========================================================================= */
+
+@layer base {
+  :root {
+    font-size: 14px;
+
+    /* Core semantic colors (light mode) */
+    --background: 0 0% 100%;
+    --foreground: 0 0% 9%;                /* #171717 */
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 9%;
+    --primary: 217 91% 60%;               /* #3B82F6 (blue-500) */
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 96.1%;              /* #F5F5F5 */
+    --secondary-foreground: 0 0% 14.9%;   /* #262626 */
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 0 0% 25.1%;       /* #404040 (ink-medium) */
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;         /* #ef4444 */
+    --destructive-foreground: 0 0% 100%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 217 91% 60%;
+    --radius: 0.5rem;
+
+    /* Status semantic colors (light mode) — consumed via the Tailwind preset
+       as `text-status-warning`, `bg-status-warning/10`, `border-status-info/40`, etc. */
+    --status-warning: 38 92% 50%;               /* #f59e0b (amber-500) */
+    --status-warning-foreground: 26 83% 14%;    /* amber-950 – dark text on amber fill */
+    --status-success: 161 94% 30%;              /* #059669 (emerald-600) */
+    --status-success-foreground: 0 0% 100%;
+    --status-info: 200 98% 39%;                 /* #0284c7 (sky-600) */
+    --status-info-foreground: 0 0% 100%;
+    --status-error: 0 84.2% 60.2%;              /* mirrors --destructive */
+    --status-error-foreground: 0 0% 100%;
+
+    /* Font size scale (14px root) */
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-base: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+    --font-size-3xl: 1.75rem;
+    --font-size-4xl: 2rem;
+
+    /* Line height */
+    --line-height-tight: 1.1;
+    --line-height-normal: 1.3;
+    --line-height-relaxed: 1.5;
+
+    /* Sidebar */
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 0 0% 9%;
+    --sidebar-primary: 0 0% 9%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 0 0% 96.1%;
+    --sidebar-accent-foreground: 0 0% 9%;
+    --sidebar-border: 0 0% 89.8%;
+    --sidebar-ring: 0 0% 9%;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+
+    /* Status semantic colors (dark mode) — brighter hues for dark surfaces */
+    --status-warning: 43 96% 56%;               /* #fbbf24 (amber-400) */
+    --status-warning-foreground: 26 83% 14%;
+    --status-success: 158 64% 52%;              /* #34d399 (emerald-400) */
+    --status-success-foreground: 165 91% 9%;    /* emerald-950 */
+    --status-info: 198 93% 60%;                 /* #38bdf8 (sky-400) */
+    --status-info-foreground: 204 80% 16%;      /* sky-950 */
+    --status-error: 0 84.2% 60.2%;
+    --status-error-foreground: 0 0% 100%;
+
+    --sidebar-background: 0 0% 9%;
+    --sidebar-foreground: 0 0% 98%;
+    --sidebar-primary: 0 0% 98%;
+    --sidebar-primary-foreground: 0 0% 9%;
+    --sidebar-accent: 0 0% 14.9%;
+    --sidebar-accent-foreground: 0 0% 98%;
+    --sidebar-border: 0 0% 14.9%;
+    --sidebar-ring: 0 0% 83.1%;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-size: 14px;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-semibold tracking-tight;
+  }
+
+  /* Date-input browser reset */
+  input[type="date"] {
+    -webkit-appearance: none;
+    appearance: none;
+    /* Keep the full-size calendar indicator inside its own input. Without a
+       positioning context, Chromium can stretch the pseudo-element across a
+       surrounding drawer and intercept clicks on unrelated controls. */
+    position: relative;
+  }
+
+  input[type="date"]::-webkit-calendar-picker-indicator {
+    background: transparent;
+    bottom: 0;
+    color: transparent;
+    cursor: pointer;
+    height: auto;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: auto;
+  }
+}
+
+/* =========================================================================
+   COMPONENTS LAYER
+   ========================================================================= */
+
+@layer components {
+
+  /* ---- Glassmorphism ---- */
+
+  .glass-card {
+    @apply backdrop-blur-lg bg-white/70 dark:bg-neutral-900/70
+           border border-white/20 dark:border-white/10
+           shadow-lg dark:shadow-xl dark:shadow-black/30
+           rounded-2xl transition-all duration-300;
+  }
+
+  .glass-card-strong {
+    @apply backdrop-blur-xl bg-white/80 dark:bg-neutral-900/80
+           border border-white/30 dark:border-white/20
+           shadow-xl dark:shadow-xl dark:shadow-black/40
+           rounded-2xl transition-all duration-300;
+  }
+
+  .glass-card-light {
+    @apply backdrop-blur-md bg-white/60 dark:bg-neutral-900/60
+           border border-white/10 dark:border-white/5
+           shadow-md dark:shadow-lg dark:shadow-black/20
+           rounded-xl transition-all duration-300;
+  }
+
+  .glass-nav {
+    @apply backdrop-blur-2xl bg-white/80 dark:bg-neutral-950/80
+           border-b border-white/20 dark:border-white/10
+           shadow-sm dark:shadow-md dark:shadow-black/20;
+  }
+
+  .glass-button-primary {
+    @apply backdrop-blur-lg bg-gradient-to-br from-brand-primary/90 to-brand-primary-light/90
+           hover:from-brand-primary/95 hover:to-brand-primary-light/95
+           text-white border border-white/20
+           shadow-md hover:shadow-lg
+           dark:from-neutral-50/90 dark:to-neutral-100/90
+           dark:hover:from-neutral-50/95 dark:hover:to-neutral-100/95
+           transition-all duration-300 rounded-xl px-5 py-2 font-medium;
+  }
+
+  .glass-button-secondary {
+    @apply backdrop-blur-lg bg-white/60 dark:bg-neutral-800/60
+           hover:bg-white/80 dark:hover:bg-neutral-700/80
+           border border-white/30 dark:border-white/20
+           text-neutral-900 dark:text-neutral-100
+           shadow-sm hover:shadow-md
+           transition-all duration-300 rounded-xl px-5 py-2 font-medium;
+  }
+
+  .glass-input {
+    @apply backdrop-blur-lg bg-white/50 dark:bg-neutral-900/50
+           border border-white/30 dark:border-white/20
+           focus:border-brand-primary/50 dark:focus:border-neutral-50/50
+           focus:ring-1 focus:ring-brand-primary/20 dark:focus:ring-neutral-50/20
+           text-neutral-900 dark:text-neutral-100
+           placeholder:text-neutral-500 dark:placeholder:text-neutral-400
+           shadow-sm focus:shadow-md
+           transition-all duration-300 rounded-xl px-3 py-2;
+  }
+
+  .glass-badge {
+    @apply backdrop-blur-md bg-white/40 dark:bg-neutral-800/40
+           border border-white/30 dark:border-white/20
+           text-neutral-900 dark:text-neutral-100
+           rounded-full px-2.5 py-0.5 text-xs font-medium;
+  }
+
+  .glass-hover {
+    @apply hover:backdrop-blur-xl hover:bg-white/80 dark:hover:bg-neutral-900/80
+           hover:border-white/40 dark:hover:border-white/30
+           hover:shadow-lg hover:scale-[1.01]
+           transition-all duration-300;
+  }
+
+  .frosted-glass {
+    @apply backdrop-blur-2xl bg-gradient-to-br from-white/60 via-white/40 to-white/60
+           dark:from-neutral-900/60 dark:via-neutral-900/40 dark:to-neutral-900/60
+           border border-white/30 dark:border-white/10
+           shadow-xl dark:shadow-black/30
+           rounded-3xl;
+  }
+
+  .glass-border-shine {
+    @apply relative overflow-hidden;
+  }
+
+  .glass-border-shine::before {
+    content: '';
+    @apply absolute inset-0 rounded-[inherit] p-[1px]
+           bg-gradient-to-br from-white/40 via-transparent to-white/40
+           dark:from-white/20 dark:via-transparent dark:to-white/20
+           -z-10;
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+  }
+
+  /* ---- Button system ---- */
+
+  .btn {
+    @apply inline-flex items-center justify-center whitespace-nowrap rounded-xl
+           h-9 px-4 py-2 text-sm font-medium
+           transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
+           disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed
+           focus-visible:ring-offset-2 dark:focus-visible:ring-offset-neutral-950;
+  }
+
+  .btn-primary {
+    @apply bg-blue-500 dark:bg-neutral-50 text-white dark:text-neutral-950
+           shadow-sm hover:shadow-md hover:bg-blue-600 dark:hover:bg-white
+           active:bg-blue-700 dark:active:bg-neutral-100 transition-all duration-300;
+  }
+
+  .btn-secondary {
+    @apply bg-neutral-100 dark:bg-neutral-800 text-neutral-800 dark:text-neutral-50
+           shadow-sm hover:shadow-md hover:bg-neutral-200 dark:hover:bg-neutral-700
+           active:bg-neutral-300 dark:active:bg-neutral-900
+           hover:text-neutral-900 dark:hover:text-neutral-50
+           active:text-neutral-950 dark:active:text-neutral-50 transition-all duration-300;
+  }
+
+  .btn-outline {
+    @apply border border-neutral-300 dark:border-neutral-700
+           text-neutral-700 dark:text-neutral-300
+           hover:bg-neutral-100 dark:hover:bg-neutral-800
+           active:bg-neutral-200 dark:active:bg-neutral-700
+           transition-all duration-300;
+  }
+
+  .btn-ghost {
+    @apply text-neutral-700 dark:text-neutral-300
+           hover:bg-neutral-100 dark:hover:bg-neutral-800
+           active:bg-neutral-200 dark:active:bg-neutral-700
+           transition-all duration-300;
+  }
+
+  .btn-subtle {
+    @apply bg-transparent text-neutral-600 dark:text-neutral-400
+           hover:bg-neutral-50 dark:hover:bg-neutral-800/50
+           active:bg-neutral-100 dark:active:bg-neutral-700/50
+           transition-all duration-300;
+  }
+
+  .btn-destructive {
+    @apply bg-red-600 dark:bg-red-700 text-white
+           shadow-sm hover:shadow-md hover:bg-red-700 dark:hover:bg-red-600
+           active:bg-red-800 dark:active:bg-red-800
+           transition-all duration-300;
+  }
+
+  .btn-danger {
+    @apply bg-red-600 dark:bg-red-700 text-white
+           shadow-sm hover:shadow-md hover:bg-red-700 dark:hover:bg-red-600
+           active:bg-red-800 dark:active:bg-red-800
+           transition-all duration-300;
+  }
+
+  .btn-link {
+    @apply text-blue-600 dark:text-blue-400 underline-offset-4 hover:underline
+           transition-all duration-300;
+  }
+
+  /* Button sizes */
+  .btn-sm { @apply h-8 rounded-lg px-3 text-xs; }
+  .btn-lg { @apply h-10 rounded-xl px-8; }
+  .btn-icon { @apply h-9 w-9 p-0; }
+  /* 小尺寸图标按钮，用于 sidebar 折叠等需要紧凑样式的场景 */
+  .btn-icon-sm { @apply h-6 w-6 p-0; }
+
+  /* ---- Card ---- */
+
+  .card {
+    @apply p-6 rounded-lg border border-neutral-200 dark:border-neutral-800
+           bg-white dark:bg-neutral-900 shadow-sm dark:shadow-neutral-900/30;
+  }
+
+  /* ---- Input ---- */
+  /* 与 .btn 统一为 h-9 (36px)，保证与同排按钮、.btn-icon 等高对齐 */
+  .input {
+    @apply flex h-9 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm
+           placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2
+           focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50
+           dark:bg-neutral-900 dark:border-neutral-800 dark:focus-visible:ring-neutral-700;
+  }
+
+  /* ---- Toolbar row: 输入框 + 按钮同一行时使用 flex items-center gap-2，input/btn 已统一 h-9 ---- */
+
+  /* ---- 视图切换 (Grid/List) ---- */
+  /* 无外框，与工具栏其他按钮视觉统一 */
+  .view-toggle {
+    @apply flex items-center gap-0.5;
+  }
+
+  .view-toggle-active {
+    @apply bg-neutral-100 dark:bg-neutral-800 text-blue-600 dark:text-blue-400;
+  }
+
+  /* ---- Layout ---- */
+
+  .section {
+    @apply py-16 md:py-24 relative;
+  }
+
+  .container {
+    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
+  }
+
+  /* ---- Typography helpers ---- */
+
+  .title {
+    @apply text-4xl font-bold tracking-tight sm:text-5xl
+           bg-clip-text text-transparent bg-gradient-to-br from-neutral-900 to-neutral-600
+           dark:from-white dark:to-neutral-400;
+  }
+
+  .subtitle {
+    @apply text-xl text-neutral-600 dark:text-neutral-400;
+  }
+
+  .highlight {
+    @apply font-bold;
+    background: linear-gradient(104deg, #2563eb 0%, #7c3aed 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  /* ---- Status semantic colors ----
+     Token-driven via the Tailwind preset (`status.*` colors + --status-* CSS vars above).
+     Usage: `text-status-warning`, `border-status-info/40`, `bg-status-success/10` (tint),
+     `bg-status-warning` (solid fill, pair with `text-status-warning-foreground`).
+     The legacy tint classes previously defined here are superseded by the tokens. */
+
+  /* @deprecated Legacy filled variants — prefer `bg-status-*` + `text-status-*-foreground`. */
+  .bg-status-error-filled   { background-color: hsl(var(--status-error)); }
+  .bg-status-info-filled    { background-color: hsl(var(--status-info)); }
+  .bg-status-success-filled { background-color: hsl(var(--status-success)); }
+
+  /* ---- Select arrow override (Admin / forms) ---- */
+
+  select.input,
+  select.rounded-md {
+    appearance: none;
+    -webkit-appearance: none;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 0.75rem center;
+    background-repeat: no-repeat;
+    background-size: 1.5em 1.5em;
+    padding-right: 2.5rem;
+  }
+
+  .dark select.input,
+  .dark select.rounded-md {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  }
+
+  /* ---- Modal dialog form contrast ---- */
+
+  [role="dialog"] input:not([type="checkbox"]):not([type="radio"]),
+  [data-radix-dialog-content] input:not([type="checkbox"]):not([type="radio"]),
+  [role="dialog"] textarea,
+  [data-radix-dialog-content] textarea,
+  [role="dialog"] select,
+  [data-radix-dialog-content] select {
+    @apply dark:bg-neutral-900 dark:border-neutral-600;
+  }
+
+  [role="dialog"] [data-radix-select-trigger],
+  [data-radix-dialog-content] [data-radix-select-trigger] {
+    @apply dark:bg-neutral-900 dark:border-neutral-600;
+  }
+}
+
+/* =========================================================================
+   UTILITIES LAYER
+   ========================================================================= */
+
+@layer utilities {
+  .animation-delay-2000 {
+    animation-delay: 2s;
+  }
+  .animation-delay-4000 {
+    animation-delay: 4s;
+  }
+
+  /* Custom scrollbar */
+  .custom-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb {
+    background-color: rgba(156, 163, 175, 0.5);
+    border-radius: 3px;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(156, 163, 175, 0.7);
+  }
+
+  .dark .custom-scrollbar {
+    scrollbar-color: rgba(115, 115, 115, 0.3) transparent;
+  }
+
+  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
+    background-color: rgba(75, 85, 99, 0.5);
+  }
+
+  .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(75, 85, 99, 0.7);
+  }
+
+  .dark .custom-scrollbar::-webkit-scrollbar-corner {
+    background-color: rgba(75, 85, 99, 0.5);
+  }
+
+  /* Audio player */
+  audio::-webkit-media-controls-panel {
+    background-color: hsl(var(--background));
+    border-radius: 0.5rem;
+  }
+
+  audio::-webkit-media-controls-current-time-display,
+  audio::-webkit-media-controls-time-remaining-display {
+    color: hsl(var(--muted-foreground));
+    text-shadow: none;
+  }
+
+  audio::-webkit-media-controls-play-button,
+  audio::-webkit-media-controls-mute-button {
+    filter: brightness(0.7);
+  }
+
+  audio::-webkit-media-controls-timeline {
+    border-radius: 0.25rem;
+  }
+
+  .dark audio::-webkit-media-controls-panel {
+    background-color: hsl(var(--muted) / 0.8);
+    border: 1px solid hsl(var(--border) / 0.3);
+  }
+
+  .dark audio::-webkit-media-controls-current-time-display,
+  .dark audio::-webkit-media-controls-time-remaining-display {
+    color: hsl(var(--muted-foreground) / 0.9);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  }
+
+  .dark audio::-webkit-media-controls-play-button,
+  .dark audio::-webkit-media-controls-mute-button {
+    filter: brightness(1.2) contrast(1.1);
+  }
+
+  .dark audio::-webkit-media-controls-timeline {
+    filter: brightness(0.9);
+  }
+
+  audio { color-scheme: light; }
+  .dark audio { color-scheme: dark; }
+
+  /* Markdown code wrapping */
+  .markdown-content pre {
+    white-space: pre-wrap !important;
+    word-break: break-word !important;
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+    overflow-x: visible !important;
+  }
+
+  .markdown-content pre code {
+    white-space: pre-wrap !important;
+    word-break: break-word !important;
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+  }
+}
+
+/* =========================================================================
+   KEYFRAMES (outside layers – always included)
+   ========================================================================= */
+
+@keyframes blob {
+  0%   { transform: translate(0px, 0px) scale(1); }
+  33%  { transform: translate(30px, -50px) scale(1.1); }
+  66%  { transform: translate(-20px, 20px) scale(0.9); }
+  100% { transform: translate(0px, 0px) scale(1); }
+}
+
+.animate-blob {
+  animation: blob 7s infinite;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes scaleUp {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+
+.animate-scale-up {
+  animation: scaleUp 0.3s ease-out;
+}
+
+/* Theme-switch transition */
+* {
+  @apply transition-colors duration-300;
+}
+
+.bg-grid-white {
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+                    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+}
+
+/* Date picker helper */
+.date-picker {
+  @apply pr-10;
+}
+
+.date-picker::-webkit-calendar-picker-indicator {
+  @apply opacity-0 w-full h-full absolute left-0 cursor-pointer;
+}
+
+/* Recharts tooltip cursor */
+.chart-container .recharts-tooltip-cursor {
+  fill: hsl(var(--muted));
+  opacity: 0.5;
+}
+
+.dark .chart-container .recharts-tooltip-cursor {
+  fill: hsl(var(--muted));
+  opacity: 0.5;
+}

package/dist/styles/reduced-motion.css

@@ -0,0 +1,14 @@
+/**
+ * prefers-reduced-motion 无障碍支持
+ * 符合 GeniSpace Design Guideline - WCAG 2.1
+ * 尊重用户减少动画偏好设置
+ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}