gitfor/platform

import { useDemoTimeline } from "~/hooks/use-demo-timeline";
import { cn } from "~/utils/cn";
import { DemoWindow } from "../DemoWindow";

const TYPED = "  if (!query) return items;";
const CHARS_PER_STEP = 3;
const STEPS = Math.ceil(TYPED.length / CHARS_PER_STEP);
const INTERVAL_MS = 160;

const TREE = [
  { name: "src/", depth: 0 },
  { name: "palette/", depth: 1 },
  { name: "rank.ts", depth: 2, active: true },
  { name: "fuzzy.ts", depth: 2, agent: true },
  { name: "README.md", depth: 0 },
] as const;

const BEFORE = ['import { fuzzy } from "./fuzzy";', "", "export function rank(items: Item[], query: string) {"];
const AFTER = ["  return [...exact(items, query), ...fuzzy(items, query)];", "}"];

const INDENT = ["pl-2", "pl-5", "pl-8"] as const;

export function EditorDemo({ className }: { className?: string }) {
  const step = useDemoTimeline(STEPS, INTERVAL_MS);
  const typed = TYPED.slice(0, step * CHARS_PER_STEP);
  return (
    <DemoWindow
      title="acme/web — edit main"
      label="A browser editor where you type while an agent works in another file"
      className={className}
    >
      <div className="grid grid-cols-[9rem_1fr]">
        <ul className="space-y-0.5 border-r border-kumo-hairline bg-kumo-base/40 py-3 font-mono text-xs text-kumo-subtle">
          {TREE.map((file) => (
            <li
              key={file.name}
              className={cn(
                "flex items-center gap-1.5 py-0.5 pr-2",
                INDENT[file.depth],
                "active" in file && "bg-kumo-fill/70 text-kumo-strong",