kcg-code 0.0.0-stage → 0.2.0

package/styles/globals.css

@@ -0,0 +1,311 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");
+
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-sans: "Noto Sans", sans-serif;
+  --font-mono: "Source Code Pro", monospace;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --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);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 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: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 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.556 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: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  /* Scrollbar bertema: tipis dengan track transparan agar menyatu dengan UI.
+     Chrome 121+, Safari 18.2+, dan Firefox memakai properti standar; blok
+     ::-webkit-scrollbar di bawah hanya berlaku sebagai fallback browser lama
+     (diabaikan otomatis saat scrollbar-width/color standar aktif). */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border) transparent;
+  }
+  *::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  *::-webkit-scrollbar-track,
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  /* Thumb "mengambang" (border transparan + background-clip) agar ujung
+     thumb tidak menempel/menembus sudut rounded card. */
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--color-border);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+  }
+}
+
+/* Bar progres indeterminate notifikasi instalasi skill. */
+@keyframes install-progress {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(300%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-\[install-progress_1\.4s_ease-in-out_infinite\] {
+    animation: none;
+    width: 100%;
+    opacity: 0.4;
+  }
+}
+
+/* Getaran lock screen saat PIN/password salah. */
+@keyframes lock-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  20%,
+  60% {
+    transform: translateX(-8px);
+  }
+  40%,
+  80% {
+    transform: translateX(8px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-\[lock-shake_0\.45s\] {
+    animation: none;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   View Transition homepage -> Session (`navigate(..., { transition: "to-session" })`)
+   — pola "container transform": kotak composer homepage MELUAS menjadi
+   seluruh area Session view, lalu isi Session muncul di dalamnya.
+
+   - Nama view-transition hanya dipasang selama transisi berjalan
+     (`data-vt` di <html>), jadi tidak pernah bentrok di halaman lain.
+   - Grup `session-surface`: bentuk kartu (latar card + border + sudut
+     membulat) yang tumbuh dari ukuran composer ke ukuran area Session;
+     sudutnya ikut mengecil agar mendarat rapi di tepi layar.
+   - Isi lama (teks composer) memudar cepat di awal; isi baru (header +
+     pesan + composer Session) muncul setelah kartu hampir penuh.
+   - Logo + headline homepage memudar & menjauh sedikit; sisa halaman
+     (sidebar) diganti tanpa animasi karena identik di kedua sisi.
+   Reduced motion / browser tanpa dukungan: `navigate` tanpa animasi.
+   --------------------------------------------------------------------------- */
+:root[data-vt="to-session"] [data-vt-name="session-surface"] {
+  view-transition-name: session-surface;
+}
+
+:root[data-vt="to-session"] [data-vt-name="home-headline"] {
+  view-transition-name: home-headline;
+}
+
+/* Grup: animasi posisi/ukuran bawaan browser, hanya durasi & kurva diatur. */
+:root[data-vt="to-session"]::view-transition-group(session-surface) {
+  animation-duration: 560ms;
+  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+/* Image pair = selalu seukuran grup: dipakai sebagai "kartu" yang tumbuh
+   (latar, border, bayangan, sudut membulat -> 0) dan memotong isinya. */
+:root[data-vt="to-session"]::view-transition-image-pair(session-surface) {
+  overflow: clip;
+  background: var(--card);
+  border: 1px solid var(--border);
+  box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.45);
+  animation: vt-surface-shape 560ms cubic-bezier(0.32, 0.72, 0, 1) both;
+}
+
+/* Snapshot diisi penuh ke ukuran grup (bukan diregangkan ala default). */
+:root[data-vt="to-session"]::view-transition-old(session-surface),
+:root[data-vt="to-session"]::view-transition-new(session-surface) {
+  width: 100%;
+  height: 100%;
+  object-fit: none;
+  object-position: top center;
+}
+
+:root[data-vt="to-session"]::view-transition-old(session-surface) {
+  animation: vt-fade-out 160ms ease-out both;
+}
+
+:root[data-vt="to-session"]::view-transition-new(session-surface) {
+  animation: vt-rise-in 320ms cubic-bezier(0.32, 0.72, 0, 1) 240ms both;
+}
+
+/* Logo + headline homepage memudar sambil sedikit mengecil & naik. */
+:root[data-vt="to-session"]::view-transition-old(home-headline) {
+  animation: vt-recede 280ms cubic-bezier(0.4, 0, 1, 1) both;
+}
+
+/* Sisa halaman (sidebar, latar) identik di kedua sisi: ganti tanpa animasi
+   agar sidebar tidak berkedip. */
+:root[data-vt="to-session"]::view-transition-old(root),
+:root[data-vt="to-session"]::view-transition-new(root) {
+  animation: none;
+}
+
+@keyframes vt-surface-shape {
+  from {
+    border-radius: 1rem;
+  }
+  to {
+    border-radius: 0;
+    border-color: transparent;
+    background: var(--background);
+    box-shadow: none;
+  }
+}
+
+@keyframes vt-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes vt-recede {
+  to {
+    opacity: 0;
+    transform: translateY(-12px) scale(0.97);
+  }
+}
+
+@keyframes vt-rise-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+}
+
+/* ---- Scrollbar gutter (dipakai timeline & footer composer) ----
+   Didefinisikan manual: tailwindcss yang ter-bundle di `bun-plugin-tailwind`
+   (4.1.14) belum mengenal utility `scrollbar-gutter-*`, sehingga kelas itu
+   diam-diam tidak menghasilkan CSS di build produksi. Tanpa gutter yang
+   SAMA di keduanya, titik tengah composer bergeser dari kolom chat selebar
+   scrollbar. */
+.scrollbar-gutter-stable {
+  scrollbar-gutter: stable;
+}
+
+/* ---- Syntax highlighting (Shiki dual theme, lihat src/lib/highlight.ts) ----
+   Tiap token membawa `--shiki-light` & `--shiki-dark`; warna dipilih dari
+   kelas `.dark` aplikasi sehingga ganti tema tidak perlu highlight ulang.
+   Latar blok tetap milik sistem desain (bg-muted), bukan latar tema Shiki. */
+.shiki-code span[style] {
+  color: var(--shiki-light);
+}
+.dark .shiki-code span[style] {
+  color: var(--shiki-dark);
+}

package/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "types": ["bun", "react"],
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  },
+
+  // reverse-proxy/ = submodule kcgcode-rp (VPS API) dengan deps & tsconfig sendiri.
+  "exclude": ["dist", "node_modules", "reverse-proxy"]
+}