larkup 0.4.12 → 0.4.14

package/.next/standalone/apps/web/app/globals.css

@@ -0,0 +1,406 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import 'shadcn/tailwind.css';
+@import './themes.css';
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  /* Keep builds self-contained: next/font/google downloads at build time. */
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-panel: var(--panel);
+  --color-panel-foreground: var(--panel-foreground);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: #fafafa;
+  --foreground: oklch(0.15 0.01 50);
+  --card: #ffffff;
+  --card-foreground: oklch(0.15 0.01 50);
+  --panel: #f6f6f6;
+  --panel-foreground: oklch(0.15 0.01 50);
+  --popover: #ffffff;
+  --popover-foreground: oklch(0.15 0.01 50);
+  --primary: oklch(0 0 0);
+  --primary-foreground: #ffffff;
+  --secondary: #f4f4f5;
+  --secondary-foreground: oklch(0.2 0.01 50);
+  --muted: #f4f4f5;
+  --muted-foreground: oklch(0.5 0.02 55);
+  --accent: #e4e4e7;
+  --accent-foreground: oklch(0.2 0.02 50);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: #e4e4e7;
+  --input: #e4e4e7;
+  --ring: oklch(0.5 0.05 50);
+  --sidebar: #fafafa;
+  --sidebar-foreground: oklch(0.45 0.02 55);
+  --sidebar-primary: oklch(0 0 0);
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-border: #e4e4e7;
+  --sidebar-accent: #f4f4f5;
+  --sidebar-accent-foreground: oklch(0.2 0.02 50);
+  --sidebar-ring: oklch(0 0 0);
+  --radius: 0.625rem;
+  --chart-1: #6e56cf;
+  --chart-2: oklch(0.6 0.13 220);
+  --chart-3: oklch(0.68 0.15 145);
+  --chart-4: oklch(0.7 0.16 60);
+  --chart-5: oklch(0.62 0.2 25);
+}
+
+.dark {
+  --background: #0a0a0a;
+  --foreground: #fafafa;
+  --card: #1c1c1c;
+  --card-foreground: #fafafa;
+  --panel: #141414;
+  --panel-foreground: #fafafa;
+  --popover: #1c1c1c;
+  --popover-foreground: #ffffff;
+  --primary: #ffffff;
+  --primary-foreground: #000000;
+  --secondary: #1a1a1a;
+  --secondary-foreground: #fafafa;
+  --muted: #1a1a1a;
+  --muted-foreground: #a1a1a1;
+  --accent: #1a1a1a;
+  --accent-foreground: #fafafa;
+  --border: #2e2e2e;
+  --input: #2e2e2e;
+  --ring: #ffffff;
+  --sidebar: #141414;
+  --sidebar-foreground: #a1a1a1;
+  --sidebar-primary: #ffffff;
+  --sidebar-primary-foreground: #000000;
+  --sidebar-border: #2e2e2e;
+  --sidebar-accent: #1a1a1a;
+  --sidebar-accent-foreground: #fafafa;
+  --sidebar-ring: #ffffff;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklch, var(--muted-foreground) 45%, transparent) transparent;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  html {
+    @apply font-sans;
+  }
+}
+
+@layer base {
+  *::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    border-radius: 9999px;
+    background-color: color-mix(in oklch, var(--muted-foreground) 45%, transparent);
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklch, var(--muted-foreground) 65%, transparent);
+  }
+}
+
+/* Darker, thinner scrollbar for dropdown/select popups. */
+@layer base {
+  [data-slot='dropdown-menu-content'],
+  [data-slot='select-content'] {
+    scrollbar-width: thin;
+    scrollbar-color: var(--muted-foreground) transparent;
+  }
+  [data-slot='dropdown-menu-content']::-webkit-scrollbar,
+  [data-slot='select-content']::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  [data-slot='dropdown-menu-content']::-webkit-scrollbar-track,
+  [data-slot='select-content']::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  [data-slot='dropdown-menu-content']::-webkit-scrollbar-thumb,
+  [data-slot='select-content']::-webkit-scrollbar-thumb {
+    border-radius: 9999px;
+    background-color: color-mix(in oklch, var(--foreground) 45%, transparent);
+  }
+  [data-slot='dropdown-menu-content']::-webkit-scrollbar-thumb:hover,
+  [data-slot='select-content']::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklch, var(--foreground) 65%, transparent);
+  }
+}
+
+/* ── Mesh gradient + noise utility (same as landing) ── */
+
+/* Apply on the layout root div to get the mesh gradient backdrop */
+.bg-mesh-light {
+  position: relative;
+  background-image: radial-gradient(
+      ellipse 55% 45% at 8% 4%,
+      color-mix(in oklch, var(--primary) 6%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      ellipse 45% 40% at 94% 92%,
+      color-mix(in oklch, oklch(0.62 0.08 30) 5%, transparent),
+      transparent 65%
+    ),
+    radial-gradient(
+      ellipse 70% 55% at 50% 50%,
+      color-mix(in oklch, var(--primary) 2%, transparent),
+      transparent 80%
+    );
+}
+
+.dark .bg-mesh-light {
+  background-image: radial-gradient(
+    circle at 20% 0%,
+    color-mix(in oklch, var(--primary) 8%, transparent),
+    transparent 40%
+  );
+}
+
+[data-sonner-toaster] {
+  z-index: 999999 !important;
+}
+
+@layer base {
+  button,
+  a,
+  [role='button'] {
+    transition: all 0.2s ease;
+  }
+}
+
+/* ── Premium Chat Message Styles ── */
+
+.assistant-text-content {
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--foreground);
+  opacity: 0.92;
+}
+
+.assistant-text-content p,
+.assistant-text-content .msg-p {
+  margin: 0.5em 0;
+}
+
+/* Headings */
+.assistant-text-content .msg-h1 {
+  font-size: 1.15rem;
+  font-weight: 650;
+  color: var(--foreground);
+  letter-spacing: -0.01em;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  padding-bottom: 0.35em;
+  border-bottom: 1px solid var(--border);
+}
+
+.assistant-text-content .msg-h2 {
+  font-size: 1rem;
+  font-weight: 650;
+  color: var(--foreground);
+  letter-spacing: -0.01em;
+  margin-top: 1.4em;
+  margin-bottom: 0.4em;
+  padding-bottom: 0.3em;
+  border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
+}
+
+.assistant-text-content .msg-h3 {
+  font-size: 0.925rem;
+  font-weight: 600;
+  color: var(--foreground);
+  letter-spacing: -0.005em;
+  margin-top: 1.2em;
+  margin-bottom: 0.35em;
+  padding-bottom: 0.25em;
+  border-bottom: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
+}
+
+/* Bold */
+.assistant-text-content .msg-bold {
+  font-weight: 600;
+  color: var(--foreground);
+}
+
+/* Lists */
+.assistant-text-content .msg-ul,
+.assistant-text-content .msg-ol {
+  margin: 0.6em 0;
+  padding-left: 1.25em;
+}
+
+.assistant-text-content .msg-ul {
+  list-style-type: disc;
+}
+
+.assistant-text-content .msg-ol {
+  list-style-type: decimal;
+}
+
+.assistant-text-content .msg-li,
+.assistant-text-content .msg-li-ordered {
+  margin: 0.3em 0;
+  padding-left: 0.25em;
+  line-height: 1.6;
+}
+
+.assistant-text-content .msg-li::marker,
+.assistant-text-content .msg-li-ordered::marker {
+  color: var(--muted-foreground);
+}
+
+/* Inline code */
+.assistant-text-content .msg-inline-code {
+  border-radius: 0.375rem;
+  background: var(--muted);
+  padding: 0.15em 0.4em;
+  font-size: 0.85em;
+  font-weight: 500;
+  font-family: var(--font-mono);
+  color: var(--foreground);
+}
+
+/* Code blocks */
+.assistant-text-content .msg-code-block {
+  border-radius: 0.625rem;
+  border: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
+  background: color-mix(in oklch, var(--muted) 30%, transparent);
+  padding: 1rem;
+  font-size: 0.8rem;
+  line-height: 1.6;
+  overflow-x: auto;
+  margin: 0.75em 0;
+}
+
+.assistant-text-content .msg-code-block code {
+  font-family: var(--font-mono);
+}
+
+/* Links */
+.assistant-text-content .msg-link {
+  font-weight: 500;
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  transition: opacity 0.15s ease;
+}
+
+.assistant-text-content .msg-link:hover {
+  opacity: 0.75;
+}
+
+/* Live tool progress
+   -----------------
+   A video pass runs for minutes with long gaps between real updates, so the
+   waiting state has to carry the sense of ongoing work by itself. The label
+   sweeps a highlight across its own text, and once progress passes the point
+   where a percentage is meaningful the bar stops claiming a position and
+   shuttles instead. Both are paused for reduced-motion. */
+
+@keyframes larkup-shimmer-sweep {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0% 0;
+  }
+}
+
+.larkup-shimmer-text {
+  background-image: linear-gradient(
+    100deg,
+    var(--muted-foreground) 0%,
+    var(--muted-foreground) 38%,
+    var(--foreground) 50%,
+    var(--muted-foreground) 62%,
+    var(--muted-foreground) 100%
+  );
+  background-size: 220% 100%;
+  background-repeat: no-repeat;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: larkup-shimmer-sweep 2.6s linear infinite;
+}
+
+@keyframes larkup-progress-shuttle {
+  0% {
+    transform: translateX(-105%) scaleX(0.55);
+  }
+  50% {
+    transform: translateX(35%) scaleX(1);
+  }
+  100% {
+    transform: translateX(190%) scaleX(0.55);
+  }
+}
+
+.larkup-progress-shuttle {
+  width: 55%;
+  transform-origin: left center;
+  animation: larkup-progress-shuttle 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .larkup-shimmer-text {
+    animation: none;
+    background-image: none;
+    color: var(--foreground);
+  }
+
+  .larkup-progress-shuttle {
+    width: 100%;
+    animation: none;
+  }
+}

package/.next/standalone/apps/web/app/themes.css

@@ -0,0 +1,234 @@
+/* Larkup brand themes. */
+
+/* ── Larkup Light ── */
+.theme-larkup {
+  --background: #fcf7ef;
+  --foreground: #1a1813;
+  --card: #ffffff;
+  --card-foreground: #1a1813;
+  --panel: #f5ede4;
+  --panel-foreground: #1a1813;
+  --popover: #ffffff;
+  --popover-foreground: #1a1813;
+  --primary: #1a1813;
+  --primary-foreground: #fcf7ef;
+  --secondary: #fee9bc;
+  --secondary-foreground: #4c4234;
+  --muted: #f5ede4;
+  --muted-foreground: #665641;
+  --accent: #fee9bc;
+  --accent-foreground: #4c4234;
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: #dcd0bd;
+  --input: #dcd0bd;
+  --ring: #1a1813;
+  --sidebar: #f5ede4;
+  --sidebar-foreground: #665641;
+  --sidebar-primary: #1a1813;
+  --sidebar-primary-foreground: #fcf7ef;
+  --sidebar-border: #dcd0bd;
+  --sidebar-accent: #fee9bc;
+  --sidebar-accent-foreground: #4c4234;
+  --sidebar-ring: #1a1813;
+  --chart-1: #1a1813;
+  --chart-2: #f3c751;
+  --chart-3: #665641;
+  --chart-4: #dcd0bd;
+  --chart-5: #4c4234;
+}
+
+.theme-larkup [data-slot="dialog-content"] {
+  background-color: #f9f9f4;
+}
+
+/* ── Larkup Dark ── */
+.dark.theme-larkup,
+.theme-larkup .dark {
+  --background: #1e1b16;
+  --foreground: #fcf7ef;
+  --card: #2a2520;
+  --card-foreground: #fcf7ef;
+  --panel: #221e19;
+  --panel-foreground: #fcf7ef;
+  --popover: #2a2520;
+  --popover-foreground: #fcf7ef;
+  --primary: #fcf7ef;
+  --primary-foreground: #1a1813;
+  --secondary: #3d3529;
+  --secondary-foreground: #fcf7ef;
+  --muted: #2a2520;
+  --muted-foreground: #ae9f8a;
+  --accent: #3d3529;
+  --accent-foreground: #fcf7ef;
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: #3d3529;
+  --input: #3d3529;
+  --ring: #fcf7ef;
+  --sidebar: #1e1b16;
+  --sidebar-foreground: #ae9f8a;
+  --sidebar-primary: #fcf7ef;
+  --sidebar-primary-foreground: #1a1813;
+  --sidebar-border: #3d3529;
+  --sidebar-accent: #3d3529;
+  --sidebar-accent-foreground: #fcf7ef;
+  --sidebar-ring: #fcf7ef;
+  --chart-1: #fcf7ef;
+  --chart-2: #f3c751;
+  --chart-3: #dcd0bd;
+  --chart-4: #665641;
+  --chart-5: #fee9bc;
+}
+
+/* ── Gaia Theme ── */
+.theme-gaia {
+  --background: #faf9f5;
+  --foreground: #0a0a0a;
+  --card: #ffffff;
+  --card-foreground: #0a0a0a;
+  --panel: #f5f4ed;
+  --panel-foreground: #0a0a0a;
+  --popover: #ffffff;
+  --popover-foreground: #0a0a0a;
+  --primary: #0a0a0a;
+  --primary-foreground: #faf9f5;
+  --secondary: #f5f4ed;
+  --secondary-foreground: #0a0a0a;
+  --muted: #f5f4ed;
+  --muted-foreground: #555555;
+  --accent: #f5f4ed;
+  --accent-foreground: #0a0a0a;
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: #e8e6dd;
+  --input: #e8e6dd;
+  --ring: #0a0a0a;
+  --sidebar: #f5f4ed;
+  --sidebar-foreground: #555555;
+  --sidebar-primary: #0a0a0a;
+  --sidebar-primary-foreground: #faf9f5;
+  --sidebar-border: #e8e6dd;
+  --sidebar-accent: #e8e6dd;
+  --sidebar-accent-foreground: #0a0a0a;
+  --sidebar-ring: #0a0a0a;
+  --chart-1: #0a0a0a;
+  --chart-2: #555555;
+  --chart-3: #888888;
+  --chart-4: #bbbbbb;
+  --chart-5: #e8e6dd;
+}
+
+.dark.theme-gaia,
+.theme-gaia .dark {
+  --background: #0a0a0a;
+  --foreground: #faf9f5;
+  --card: #111111;
+  --card-foreground: #faf9f5;
+  --panel: #1a1a1a;
+  --panel-foreground: #faf9f5;
+  --popover: #111111;
+  --popover-foreground: #faf9f5;
+  --primary: #faf9f5;
+  --primary-foreground: #0a0a0a;
+  --secondary: #222222;
+  --secondary-foreground: #faf9f5;
+  --muted: #222222;
+  --muted-foreground: #aaaaaa;
+  --accent: #222222;
+  --accent-foreground: #faf9f5;
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: #333333;
+  --input: #333333;
+  --ring: #faf9f5;
+  --sidebar: #111111;
+  --sidebar-foreground: #aaaaaa;
+  --sidebar-primary: #faf9f5;
+  --sidebar-primary-foreground: #0a0a0a;
+  --sidebar-border: #333333;
+  --sidebar-accent: #222222;
+  --sidebar-accent-foreground: #faf9f5;
+  --sidebar-ring: #faf9f5;
+  --chart-1: #faf9f5;
+  --chart-2: #aaaaaa;
+  --chart-3: #777777;
+  --chart-4: #444444;
+  --chart-5: #222222;
+}
+
+/* ── White Theme ── */
+.theme-linear {
+  --background: #ffffff;
+  --foreground: #0a0a0a;
+  --card: #ffffff;
+  --card-foreground: #0a0a0a;
+  --panel: #f9f9f9;
+  --panel-foreground: #0a0a0a;
+  --popover: #ffffff;
+  --popover-foreground: #0a0a0a;
+  --primary: #0a0a0a;
+  --primary-foreground: #ffffff;
+  --secondary: #f9f9f9;
+  --secondary-foreground: #0a0a0a;
+  --muted: #f9f9f9;
+  --muted-foreground: #737373;
+  --accent: #f9f9f9;
+  --accent-foreground: #0a0a0a;
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: #e5e5e5;
+  --input: #e5e5e5;
+  --ring: #0a0a0a;
+  --sidebar: #f9f9f9;
+  --sidebar-foreground: #737373;
+  --sidebar-primary: #0a0a0a;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-border: #e5e5e5;
+  --sidebar-accent: #e5e5e5;
+  --sidebar-accent-foreground: #0a0a0a;
+  --sidebar-ring: #0a0a0a;
+  --chart-1: #0a0a0a;
+  --chart-2: #555555;
+  --chart-3: #888888;
+  --chart-4: #bbbbbb;
+  --chart-5: #e8e6dd;
+}
+
+.dark.theme-linear,
+.theme-linear .dark {
+  --background: #000000;
+  --foreground: #fafafa;
+  --card: #0a0a0a;
+  --card-foreground: #fafafa;
+  --panel: #111111;
+  --panel-foreground: #fafafa;
+  --popover: #0a0a0a;
+  --popover-foreground: #fafafa;
+  --primary: #fafafa;
+  --primary-foreground: #0a0a0a;
+  --secondary: #222222;
+  --secondary-foreground: #fafafa;
+  --muted: #222222;
+  --muted-foreground: #a3a3a3;
+  --accent: #222222;
+  --accent-foreground: #fafafa;
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: #262626;
+  --input: #262626;
+  --ring: #fafafa;
+  --sidebar: #111111;
+  --sidebar-foreground: #a3a3a3;
+  --sidebar-primary: #fafafa;
+  --sidebar-primary-foreground: #000000;
+  --sidebar-border: #262626;
+  --sidebar-accent: #222222;
+  --sidebar-accent-foreground: #fafafa;
+  --sidebar-ring: #fafafa;
+  --chart-1: #fafafa;
+  --chart-2: #a3a3a3;
+  --chart-3: #737373;
+  --chart-4: #404040;
+  --chart-5: #262626;
+}