Makelore 2.0 initial clean snapshot

src/styles/globals.css

@@ -0,0 +1,230 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ──────────────────────────────────────────────────────────────────────────
+ * Makelore 2.0 design tokens — single light-theme CSS variable layer
+ * ──────────────────────────────────────────────────────────────────────────
+ *
+ * This file is the *CSS variable layer only*. HSL channel triplets are
+ * stored without an `hsl()` wrapper — `tailwind.config.js` re-assembles
+ * them through `hsl(var(--xxx))` or `hsl(var(--xxx) / <alpha-value>)`.
+ *
+ * Two groups of variables:
+ *
+ *   1. shadcn semantic tokens (--background / --foreground / --primary
+ *      / ...). The standard shadcn/ui palette — do not rename or remove,
+ *      Radix-driven components read these directly.
+ *
+ *   2. Makelore surface tokens (--surface-modal / --surface-input /
+ *      --surface-sidebar), using white and low-saturation blue-gray layers.
+ *
+ * Usage:
+ *   - Application code should always go through Tailwind utilities, e.g.
+ *       bg-foreground   bg-surface-modal   bg-brand
+ *     Do NOT hand-write `var(--xxx)` or `hsl(var(--xxx))` in components.
+ *   - Adding a new color: define the CSS variable here → map it to a
+ *     utility token in tailwind.config.js → use the utility in code.
+ * ────────────────────────────────────────────────────────────────────────── */
+
+@layer base {
+  :root {
+    /* ── shadcn semantic tokens ─────────────────────────────────── */
+    --background: 0 0% 100%;
+    --foreground: 213 34% 23%;
+    --card: 0 0% 100%;
+    --card-foreground: 213 34% 23%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 213 34% 23%;
+    --primary: 214 35% 35%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 210 38% 94%;
+    --secondary-foreground: 213 34% 23%;
+    --muted: 207 36% 95%;
+    --muted-foreground: 213 14% 48%;
+    --accent: 15 87% 59%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 210 26% 88%;
+    --input: 210 26% 88%;
+    --ring: 214 35% 35%;
+    --radius: 0.75rem;
+
+    /* ── Makelore layered surfaces ─────────────────────────────── */
+    --surface-modal: 0 0% 100%;
+    --surface-input: 210 29% 97%;
+    --surface-sidebar: 207 26% 96%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+/* Custom scrollbar: keep scrollbars visually quiet until the user hovers a scroll area. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+*:hover {
+  scrollbar-color: hsl(var(--border)) transparent;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-transparent rounded-full;
+}
+
+*:hover::-webkit-scrollbar-thumb {
+  @apply bg-border;
+}
+
+*:hover::-webkit-scrollbar-thumb:hover {
+  @apply bg-muted-foreground/30;
+}
+
+/* Keep Monaco aligned with Makelore's white app canvas. */
+:root:not(.dark) .niancode-diff-editor .monaco-diff-editor,
+:root:not(.dark) .niancode-diff-editor .monaco-editor,
+:root:not(.dark) .niancode-diff-editor .monaco-editor-background,
+:root:not(.dark) .niancode-diff-editor .monaco-editor .margin,
+:root:not(.dark) .niancode-diff-editor .monaco-editor .gutter,
+:root:not(.dark) .niancode-diff-editor .diffOverview {
+  background-color: hsl(var(--background)) !important;
+}
+
+/* macOS traffic light spacing */
+.drag-region {
+  -webkit-app-region: drag;
+}
+
+.no-drag {
+  -webkit-app-region: no-drag;
+}
+
+/* Smooth transitions */
+.transition-theme {
+  @apply transition-colors duration-200;
+}
+
+/* Focus ring */
+.focus-ring {
+  @apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
+}
+
+/* Prose styling for markdown */
+.prose {
+  line-height: 1.6;
+}
+
+.prose p {
+  margin-bottom: 0.75em;
+}
+
+.prose p:last-child {
+  margin-bottom: 0;
+}
+
+.prose ul,
+.prose ol {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  padding-left: 1.5em;
+}
+
+.prose li {
+  margin-bottom: 0.25em;
+}
+
+.prose pre {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose blockquote {
+  border-left: 3px solid hsl(var(--border));
+  padding-left: 1em;
+  margin: 0.5em 0;
+  color: hsl(var(--muted-foreground));
+}
+
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.5em 0;
+}
+
+.prose th,
+.prose td {
+  border: 1px solid hsl(var(--border));
+  padding: 0.5em;
+  text-align: left;
+}
+
+.prose th {
+  background: transparent;
+  font-weight: 700;
+}
+
+.dark .prose th {
+  background: hsl(var(--muted));
+}
+
+/* Typing indicator animation */
+@keyframes bounce {
+
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+  }
+
+  30% {
+    transform: translateY(-4px);
+  }
+}
+
+@keyframes niancode-voice-waveform {
+
+  0%,
+  100% {
+    opacity: 0.5;
+    transform: scaleY(0.45);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scaleY(1.35);
+  }
+}
+
+.voice-waveform-bar {
+  animation: niancode-voice-waveform 840ms ease-in-out infinite;
+  transform-origin: center;
+  will-change: opacity, transform;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .voice-waveform-bar {
+    animation: none;
+    opacity: 0.85;
+    transform: scaleY(1);
+  }
+}