create-caspian-app 1.5.8 → 1.6.0

package/dist/settings/run-postcss.ts

@@ -130,7 +130,7 @@ async function cleanupStaleWatcher(): Promise<void> {
   }
 
   console.warn(
-    `[tailwind] Found stale PostCSS watcher (PID ${pid}), stopping it before restart.`,
+    `[css] Found stale PostCSS watcher (PID ${pid}), stopping it before restart.`,
   );
   await killProcessTree(pid);
   await rmAsync(watcherPidFile, { force: true });
@@ -185,31 +185,35 @@ function createWatchers(rebuildWorker: DebouncedWorker): ClosableWatcher[] {
     rebuildWorker.schedule(relPath);
   };
 
+  // Tailwind scans markup for class names, so any authored file can change the
+  // generated CSS. Plain CSS has no such scan: only stylesheets matter.
   const watchers: ClosableWatcher[] = [
     createSrcWatcher(join(process.cwd(), "src", "**", "*"), {
-      exts: [".css", ".html", ".js", ".py"],
+      exts: caspianConfig.tailwindcss
+        ? [".css", ".html", ".js", ".py"]
+        : [".css"],
       ignored: WATCH_IGNORES,
       awaitWriteFinish: DEFAULT_AWF,
-      logPrefix: "tailwind:src",
+      logPrefix: "css:src",
       onEvent: scheduleRebuild,
     }),
     createSrcWatcher(join(process.cwd(), "postcss.config.js"), {
       exts: [".js"],
       ignored: WATCH_IGNORES,
       awaitWriteFinish: DEFAULT_AWF,
-      logPrefix: "tailwind:config",
+      logPrefix: "css:config",
       onEvent: scheduleRebuild,
     }),
   ];
 
   const tsRoot = join(process.cwd(), "ts");
-  if (caspianConfig.typescript && existsSync(tsRoot)) {
+  if (caspianConfig.tailwindcss && caspianConfig.typescript && existsSync(tsRoot)) {
     watchers.push(
       createSrcWatcher(join(tsRoot, "**", "*"), {
         exts: [".js", ".jsx", ".ts", ".tsx"],
         ignored: WATCH_IGNORES,
         awaitWriteFinish: DEFAULT_AWF,
-        logPrefix: "tailwind:ts",
+        logPrefix: "css:ts",
         onEvent: scheduleRebuild,
       }),
     );
@@ -235,13 +239,13 @@ async function runWatchMode(): Promise<void> {
 
       if (exitCode !== 0) {
         console.error(
-          `[tailwind] PostCSS exited with code ${exitCode}. Watching for the next change...`,
+          `[css] PostCSS exited with code ${exitCode}. Watching for the next change...`,
         );
       }
     } catch (error) {
       console.error(error);
     }
-  }, 150, "tailwind");
+  }, 150, "css");
 
   sourceWatchers.push(...createWatchers(rebuildWorker));
 
@@ -250,7 +254,7 @@ async function runWatchMode(): Promise<void> {
 
     if (exitCode !== 0) {
       console.error(
-        `[tailwind] Initial PostCSS build exited with code ${exitCode}. Watching for the next change...`,
+        `[css] Initial PostCSS build exited with code ${exitCode}. Watching for the next change...`,
       );
     }
   } catch (error) {

package/dist/settings/utils.ts

@@ -143,17 +143,29 @@ export class DebouncedWorker {
  * period has elapsed. `onSettled` only runs when no newer work is pending, so
  * callers can safely perform one user-visible action (such as a browser
  * reload) after the final batch instead of after every intermediate batch.
+ *
+ * An optional `shouldDefer` predicate suspends draining entirely without losing
+ * work: pending items keep accumulating and the quiet period re-arms, so once
+ * the predicate clears, everything collected in the meantime drains as a single
+ * batch with a single settle. That is what lets an agent's whole editing run
+ * cost one restart and one reload instead of one of each per edit.
  */
 export class SettledBatchWorker<T> {
   private timer: NodeJS.Timeout | null = null;
   private pending = new Set<T>();
   private running = false;
+  private deferring = false;
 
   constructor(
     private work: (items: ReadonlySet<T>) => Promise<void> | void,
     private onSettled: () => Promise<void> | void,
     private quietMs = 1200,
     private name = "batch",
+    private shouldDefer?: (pending: ReadonlySet<T>) => boolean,
+    private onDeferStateChange?: (
+      deferring: boolean,
+      pending: ReadonlySet<T>,
+    ) => void,
   ) {}
 
   schedule(item: T) {
@@ -173,6 +185,15 @@ export class SettledBatchWorker<T> {
     if (this.running) return;
     if (this.pending.size === 0) return;
 
+    // Checked before anything is consumed, so a deferred batch keeps every
+    // queued item and simply waits for another quiet period to re-test.
+    if (this.shouldDefer?.(this.pending)) {
+      this.setDeferring(true);
+      this.armQuietPeriod();
+      return;
+    }
+    this.setDeferring(false);
+
     const batch = new Set(this.pending);
     this.pending.clear();
     this.running = true;
@@ -196,6 +217,13 @@ export class SettledBatchWorker<T> {
       console.error(`[${this.name}] settle error:`, err);
     }
   }
+
+  /** Reports edges only, so a long hold logs once instead of every quiet period. */
+  private setDeferring(deferring: boolean) {
+    if (this.deferring === deferring) return;
+    this.deferring = deferring;
+    this.onDeferStateChange?.(deferring, this.pending);
+  }
 }
 
 export function createRestartableProcess(spec: {

package/dist/src/app/globals.css

@@ -5,17 +5,26 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --border: oklch(92.8% 0.006 264.531);
+  --muted: oklch(96.7% 0.003 264.542);
+  --muted-foreground: oklch(55.1% 0.027 264.364);
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-border: var(--border);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
+    --border: oklch(100% 0 0 / 12%);
+    --muted: oklch(26.9% 0 0);
+    --muted-foreground: oklch(70.8% 0 0);
   }
 }
 

package/dist/src/app/globals.plain.css

@@ -0,0 +1,502 @@
+/*
+ * globals.css - the only stylesheet you edit.
+ *
+ * `npm run dev` and `npm run build` compile this file to public/css/styles.css,
+ * which the layout links. Never edit public/css/styles.css: it is generated
+ * and overwritten on every build.
+ *
+ * This project was created without Tailwind CSS, so the rules below are plain
+ * CSS that you own. They cover the starter pages; add, rename or delete
+ * whatever you like.
+ */
+
+/* ---------------------------------------------------------------- tokens */
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+  --border: oklch(92.8% 0.006 264.531);
+  --muted: oklch(96.7% 0.003 264.542);
+  --muted-foreground: oklch(55.1% 0.027 264.364);
+
+  --gray-50: oklch(98.5% 0.002 247.839);
+  --gray-100: oklch(96.7% 0.003 264.542);
+  --gray-200: oklch(92.8% 0.006 264.531);
+  --gray-500: oklch(55.1% 0.027 264.364);
+  --gray-600: oklch(44.6% 0.03 256.802);
+  --gray-700: oklch(37.3% 0.034 259.733);
+  --gray-800: oklch(27.8% 0.033 256.848);
+  --gray-900: oklch(21% 0.034 264.665);
+  --red-600: oklch(57.7% 0.245 27.325);
+  --blue-600: oklch(54.6% 0.245 262.881);
+  --indigo-600: oklch(51.1% 0.262 276.966);
+  --indigo-700: oklch(45.7% 0.24 277.023);
+
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+    --border: oklch(100% 0 0 / 12%);
+    --muted: oklch(26.9% 0 0);
+    --muted-foreground: oklch(70.8% 0 0);
+  }
+}
+
+/* ------------------------------------------------------------- base reset */
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border: 0 solid var(--border);
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  line-height: 1.5;
+}
+
+body {
+  margin: 0;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+h1,
+h2,
+h3,
+p,
+figure,
+pre {
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+code,
+pre {
+  font-family: var(--font-mono);
+  font-size: 1em;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+button {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+img,
+svg {
+  display: block;
+  vertical-align: middle;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* ---------------------------------------------------------------- layout */
+
+.container {
+  width: 100%;
+}
+.flex {
+  display: flex;
+}
+.grid {
+  display: grid;
+}
+.hidden {
+  display: none;
+}
+.inline-block {
+  display: inline-block;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-px {
+  gap: 1px;
+}
+.gap-2 {
+  gap: 0.5rem;
+}
+.gap-4 {
+  gap: 1rem;
+}
+.gap-16 {
+  gap: 4rem;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+.mx-auto {
+  margin-inline: auto;
+}
+.overflow-auto {
+  overflow: auto;
+}
+.object-contain {
+  object-fit: contain;
+}
+
+/* --------------------------------------------------------------- spacing */
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+.mt-3 {
+  margin-top: 0.75rem;
+}
+.mt-4 {
+  margin-top: 1rem;
+}
+.mt-5 {
+  margin-top: 1.25rem;
+}
+.mt-6 {
+  margin-top: 1.5rem;
+}
+.mt-8 {
+  margin-top: 2rem;
+}
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+.p-6 {
+  padding: 1.5rem;
+}
+
+.px-2 {
+  padding-inline: 0.5rem;
+}
+.px-3 {
+  padding-inline: 0.75rem;
+}
+.px-4 {
+  padding-inline: 1rem;
+}
+.px-5 {
+  padding-inline: 1.25rem;
+}
+.px-6 {
+  padding-inline: 1.5rem;
+}
+
+.py-1 {
+  padding-block: 0.25rem;
+}
+.py-1\.5 {
+  padding-block: 0.375rem;
+}
+.py-2 {
+  padding-block: 0.5rem;
+}
+.py-3 {
+  padding-block: 0.75rem;
+}
+.py-8 {
+  padding-block: 2rem;
+}
+.py-10 {
+  padding-block: 2.5rem;
+}
+
+/* ---------------------------------------------------------------- sizing */
+
+.size-5 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.size-20 {
+  width: 5rem;
+  height: 5rem;
+}
+.h-10 {
+  height: 2.5rem;
+}
+.w-10 {
+  width: 2.5rem;
+}
+.max-w-md {
+  max-width: 28rem;
+}
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+/* ------------------------------------------------------------ typography */
+
+.font-mono {
+  font-family: var(--font-mono);
+}
+.font-medium {
+  font-weight: 500;
+}
+.font-semibold {
+  font-weight: 600;
+}
+.font-bold {
+  font-weight: 700;
+}
+.font-black {
+  font-weight: 900;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1.33333;
+}
+.text-\[11px\] {
+  font-size: 11px;
+}
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.42857;
+}
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 1.33333;
+}
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+.text-9xl {
+  font-size: 8rem;
+  line-height: 1;
+}
+
+.leading-relaxed {
+  line-height: 1.625;
+}
+.tracking-tight {
+  letter-spacing: -0.025em;
+}
+.tracking-\[0\.18em\] {
+  letter-spacing: 0.18em;
+}
+.tracking-\[-0\.04em\] {
+  letter-spacing: -0.04em;
+}
+.uppercase {
+  text-transform: uppercase;
+}
+.text-center {
+  text-align: center;
+}
+.text-pretty {
+  text-wrap: pretty;
+}
+
+/* ---------------------------------------------------------------- colors */
+
+.bg-background {
+  background-color: var(--background);
+}
+.bg-border {
+  background-color: var(--border);
+}
+.bg-transparent {
+  background-color: transparent;
+}
+.bg-white {
+  background-color: #fff;
+}
+.bg-gray-50 {
+  background-color: var(--gray-50);
+}
+.bg-gray-100 {
+  background-color: var(--gray-100);
+}
+.bg-blue-600 {
+  background-color: var(--blue-600);
+}
+.bg-indigo-600 {
+  background-color: var(--indigo-600);
+}
+
+.text-foreground {
+  color: var(--foreground);
+}
+.text-muted-foreground {
+  color: var(--muted-foreground);
+}
+.text-black {
+  color: #000;
+}
+.text-white {
+  color: #fff;
+}
+.text-red-600 {
+  color: var(--red-600);
+}
+.text-gray-200 {
+  color: var(--gray-200);
+}
+.text-gray-500 {
+  color: var(--gray-500);
+}
+.text-gray-600 {
+  color: var(--gray-600);
+}
+.text-gray-700 {
+  color: var(--gray-700);
+}
+.text-gray-800 {
+  color: var(--gray-800);
+}
+.text-gray-900 {
+  color: var(--gray-900);
+}
+
+/* --------------------------------------------------------------- borders */
+
+.border {
+  border-width: 1px;
+}
+.border-border {
+  border-color: var(--border);
+}
+.border-gray-200 {
+  border-color: var(--gray-200);
+}
+.rounded {
+  border-radius: 0.25rem;
+}
+.shadow-sm {
+  box-shadow:
+    0 1px 3px 0 rgb(0 0 0 / 0.1),
+    0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
+/* ------------------------------------------------------ motion and focus */
+
+.transition-colors {
+  transition:
+    color var(--transition),
+    background-color var(--transition),
+    border-color var(--transition);
+}
+
+.transition-transform {
+  transition: transform var(--transition);
+}
+
+.focus\:outline-none:focus {
+  outline: none;
+}
+.focus\:ring:focus {
+  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.5);
+}
+
+.hover\:text-foreground:hover {
+  color: var(--foreground);
+}
+.hover\:bg-gray-200:hover {
+  background-color: var(--gray-200);
+}
+.hover\:bg-indigo-700:hover {
+  background-color: var(--indigo-700);
+}
+.hover\:bg-muted\/50:hover {
+  background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+}
+
+.group:hover .group-hover\:translate-x-1 {
+  transform: translateX(0.25rem);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .motion-reduce\:transform-none {
+    transform: none;
+  }
+}
+
+/* ----------------------------------------------------------- breakpoints */
+
+@media (width >= 40rem) {
+  .container {
+    max-width: 40rem;
+  }
+  .sm\:inline {
+    display: inline;
+  }
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .sm\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 1.11111;
+  }
+}
+
+@media (width >= 48rem) {
+  .container {
+    max-width: 48rem;
+  }
+  .md\:size-24 {
+    width: 6rem;
+    height: 6rem;
+  }
+  .md\:px-12 {
+    padding-inline: 3rem;
+  }
+  .md\:py-12 {
+    padding-block: 3rem;
+  }
+  .md\:text-7xl {
+    font-size: 4.5rem;
+    line-height: 1;
+  }
+}
+
+@media (width >= 64rem) {
+  .container {
+    max-width: 64rem;
+  }
+  .lg\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}