cistack 5.5.0 → 6.1.0

package/product-site/components/InstallToggle.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useState } from "react";
+
+import type { Dictionary } from "@/lib/dictionary-types";
+
+type InstallMode = "npx" | "npm";
+
+const installModes: Record<
+  InstallMode,
+  {
+    command: string;
+    badgeClassName: string;
+    badgeLabel: keyof Dictionary["install_toggle"];
+    description: keyof Dictionary["install_toggle"];
+  }
+> = {
+  npx: {
+    command: "$ npx cistack",
+    badgeClassName: "border-emerald-500/20 bg-emerald-500/10 text-emerald-500",
+    badgeLabel: "recommended_badge",
+    description: "npx_desc",
+  },
+  npm: {
+    command: "$ npm install -g cistack",
+    badgeClassName: "border-zinc-700 bg-zinc-500/10 text-zinc-400",
+    badgeLabel: "global_badge",
+    description: "npm_desc",
+  },
+};
+
+export default function InstallToggle({ dict }: { dict: Dictionary }) {
+  const [mode, setMode] = useState<InstallMode>("npx");
+  const selectedMode = installModes[mode];
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center">
+        <button
+          type="button"
+          onClick={() => setMode("npx")}
+          className={`py-1 pr-4 text-[12px] font-semibold transition-colors ${
+            mode === "npx" ? "text-zinc-900" : "text-zinc-400 hover:text-zinc-600"
+          }`}
+        >
+          npx
+          {mode === "npx" && (
+            <span className="ml-1.5 text-[11px] font-normal text-zinc-400">
+              {" "}
+              - {dict.install_toggle.recommended}
+            </span>
+          )}
+        </button>
+        <div className="h-3.5 w-px bg-zinc-200" />
+        <button
+          type="button"
+          onClick={() => setMode("npm")}
+          className={`py-1 pl-4 text-[12px] font-semibold transition-colors ${
+            mode === "npm" ? "text-zinc-900" : "text-zinc-400 hover:text-zinc-600"
+          }`}
+        >
+          {dict.install_toggle.npm_global}
+        </button>
+      </div>
+
+      <div className="relative overflow-hidden rounded-sm bg-zinc-950 px-6 pt-5 pb-6 font-mono text-sm text-zinc-300">
+        <div className="mb-5 flex items-center justify-between">
+          <span
+            className={`px-2 py-0.5 text-[12px] font-black uppercase tracking-widest ${selectedMode.badgeClassName}`}
+          >
+            {dict.install_toggle[selectedMode.badgeLabel]}
+          </span>
+          <span className="text-[12px] font-black uppercase tracking-[0.2em] text-zinc-700">
+            {mode}
+          </span>
+        </div>
+        <code className="text-[15px] tracking-tight text-emerald-400">
+          {selectedMode.command}
+        </code>
+        <div className="my-4 h-px w-full bg-zinc-800" />
+        <p className="font-sans text-[12px] leading-relaxed text-zinc-500">
+          {dict.install_toggle[selectedMode.description]}
+        </p>
+      </div>
+    </div>
+  );
+}

package/product-site/components/MotionRevealClient.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { LazyMotion, domAnimation, m } from "framer-motion";
+
+type MotionTag = "div" | "nav" | "footer";
+
+interface MotionRevealClientProps {
+  as?: MotionTag;
+  children: ReactNode;
+  className?: string;
+  delay?: number;
+  duration?: number;
+  immediate?: boolean;
+  initialScale?: number;
+  initialY?: number;
+}
+
+const motionTags = {
+  div: m.div,
+  nav: m.nav,
+  footer: m.footer,
+} as const;
+
+export default function MotionRevealClient({
+  as = "div",
+  children,
+  className,
+  delay = 0,
+  duration = 0.8,
+  immediate = false,
+  initialScale = 1,
+  initialY = 20,
+}: MotionRevealClientProps) {
+  const MotionTag = motionTags[as];
+  const transition = { duration, delay };
+  const target = { opacity: 1, y: 0, scale: 1 };
+
+  return (
+    <LazyMotion features={domAnimation}>
+      <MotionTag
+        className={className}
+        initial={{ opacity: 0, y: initialY, scale: initialScale }}
+        {...(immediate
+          ? { animate: target }
+          : { whileInView: target, viewport: { once: true, amount: 0.2 } })}
+        transition={transition}
+      >
+        {children}
+      </MotionTag>
+    </LazyMotion>
+  );
+}

package/product-site/components/TerminalCard.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useMemo } from "react";
+import type { Dictionary } from "@/lib/dictionary-types";
+
+function TerminalCardFallback({ version, dict }: { version: string; dict: Dictionary["terminal"] }) {
+  return (
+    <div className="flex h-[300px] w-full flex-col rounded-sm border border-zinc-200 bg-white sm:h-[350px] lg:h-[380px]">
+      <div className="flex shrink-0 items-center justify-between border-b border-zinc-200 bg-white px-4 py-3">
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-600" />
+            <span className="text-[12px] font-bold tracking-[0.14em] text-zinc-600 uppercase">
+              {dict?.processing || "Processing Output..."}
+            </span>
+          </div>
+        </div>
+        <div className="rounded-sm border border-zinc-200 bg-zinc-50 px-2.5 py-1 font-mono text-[13px] font-bold tracking-tight text-zinc-800">
+          npx cistack
+        </div>
+      </div>
+
+      <div
+        className="flex-1 bg-white p-6 pt-4 font-mono text-[12px] leading-relaxed tracking-tight text-zinc-700 sm:text-[13px]"
+        style={{ fontFamily: "var(--font-mono)" }}
+      >
+        <div className="mb-2 flex items-center gap-2">
+          <span className="font-bold text-zinc-600">$</span>
+          <span className="font-bold text-zinc-900">npx cistack</span>
+          <span className="inline-block h-4 w-1.5 animate-pulse bg-emerald-600" />
+        </div>
+        <div className="space-y-1">
+          <div className="font-bold text-zinc-900">cistack v{version}</div>
+          <div>Project scanned</div>
+          <div>Stack detected</div>
+          <div>Detected Stack: Next.js, React, TypeScript</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function TerminalCard({
+  dict,
+  version = "3.0.0",
+}: {
+  dict: Dictionary["terminal"];
+  version?: string;
+}) {
+  const TerminalCardMotion = useMemo(
+    () =>
+      dynamic(() => import("@/components/TerminalCardMotion"), {
+        ssr: false,
+        loading: () => <TerminalCardFallback version={version} dict={dict} />,
+      }),
+    [version, dict]
+  );
+
+  return <TerminalCardMotion dict={dict} version={version} />;
+}

package/product-site/components/TerminalCardMotion.tsx

@@ -0,0 +1,317 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { LazyMotion, domAnimation, m } from "framer-motion";
+import { RefreshCcw } from "lucide-react";
+
+import CopyButton from "@/components/CopyButton";
+import type { Dictionary } from "@/lib/dictionary-types";
+
+const COMMAND = "npx cistack";
+
+interface OutputLine {
+  text: string;
+  type:
+    | "success"
+    | "info"
+    | "heading"
+    | "detail"
+    | "merged"
+    | "bullet"
+    | "written"
+    | "done"
+    | "path"
+    | "blank";
+  delay: number;
+}
+
+const lineColor: Record<OutputLine["type"], string> = {
+  success: "text-emerald-500",
+  info: "text-zinc-700",
+  heading: "font-bold text-zinc-900",
+  detail: "text-zinc-700",
+  merged: "text-amber-500",
+  bullet: "font-medium text-zinc-600",
+  written: "text-emerald-600",
+  done: "font-bold text-zinc-950",
+  path: "text-zinc-600",
+  blank: "",
+};
+
+export default function TerminalCardMotion({
+  dict,
+  version,
+}: {
+  dict: Dictionary["terminal"];
+  version: string;
+}) {
+  const [typedCommand, setTypedCommand] = useState("");
+  const [visibleLines, setVisibleLines] = useState(0);
+  const [phase, setPhase] = useState<"typing" | "output" | "done">("typing");
+  const [animationKey, setAnimationKey] = useState(0);
+
+  const outputLines = useMemo<OutputLine[]>(() => {
+    return [
+      { text: `  cistack v${version}`, type: "heading", delay: 100 },
+      { text: `  ${"─".repeat(24)}`, type: "detail", delay: 200 },
+      { text: "", type: "blank", delay: 250 },
+      { text: dict.project_scanned || "Project scanned", type: "success", delay: 500 },
+      { text: dict.stack_detected || "Stack detected", type: "success", delay: 800 },
+      { text: "", type: "blank", delay: 850 },
+      {
+        text: `  ${dict.detected_stack || "Detected Stack"}`,
+        type: "heading",
+        delay: 1000,
+      },
+      { text: `  ${"─".repeat(48)}`, type: "detail", delay: 1100 },
+      {
+        text: `  ${dict.languages || "Languages:"}           TypeScript`,
+        type: "info",
+        delay: 1300,
+      },
+      {
+        text: `  ${dict.frameworks || "Frameworks:"}          Next.js, React`,
+        type: "info",
+        delay: 1450,
+      },
+      { text: `  ${dict.hosting || "Hosting:"}             Vercel`, type: "info", delay: 1600 },
+      { text: `  ${dict.testing || "Testing:"}             none`, type: "info", delay: 1750 },
+      {
+        text: `  ${dict.release_tool || "Release tool:"}        none`,
+        type: "info",
+        delay: 1900,
+      },
+      { text: "", type: "blank", delay: 1950 },
+      {
+        text:
+          dict.look_correct ||
+          "Does this look correct? Generate pipeline with these settings? Yes",
+        type: "detail",
+        delay: 2200,
+      },
+      {
+        text: dict.generated_workflows || "Generated 3 CI workflow(s)",
+        type: "success",
+        delay: 2600,
+      },
+      {
+        text: `  ${dict.smart_merged || "Smart-merged: ci.yml"}`,
+        type: "merged",
+        delay: 2800,
+      },
+      {
+        text: `    • ${dict.updated_on || 'updated top-level "on"'}`,
+        type: "bullet",
+        delay: 2900,
+      },
+      {
+        text: `    • ${dict.updated_concurrency || 'updated top-level "concurrency"'}`,
+        type: "bullet",
+        delay: 2950,
+      },
+      {
+        text: `    • ${dict.added_lint || 'added job "lint"'}`,
+        type: "bullet",
+        delay: 3000,
+      },
+      {
+        text: `    •   ${dict.updated_build || 'job "build" → updated "name"'}`,
+        type: "bullet",
+        delay: 3050,
+      },
+      {
+        text: `    •   ${dict.updated_needs || 'job "build" → updated "needs"'}`,
+        type: "bullet",
+        delay: 3100,
+      },
+      {
+        text: `    •   ${
+          dict.added_checkout || 'job "build" → added step "Checkout code"'
+        }`,
+        type: "bullet",
+        delay: 3150,
+      },
+      {
+        text: `    •   ${dict.added_node || 'job "build" → added step "Set up Node.js"'}`,
+        type: "bullet",
+        delay: 3200,
+      },
+      {
+        text: `    •   ${dict.updated_step_build || 'job "build" → updated step "Build"'}`,
+        type: "bullet",
+        delay: 3250,
+      },
+      {
+        text: `    •   ${
+          dict.added_upload || 'job "build" → added step "Upload build artifact"'
+        }`,
+        type: "bullet",
+        delay: 3300,
+      },
+      {
+        text: `  ✔ ${dict.written_deploy || "Written:      deploy.yml"}`,
+        type: "written",
+        delay: 3500,
+      },
+      {
+        text: `  ✔ ${dict.written_security || "Written:      security.yml"}`,
+        type: "written",
+        delay: 3650,
+      },
+      {
+        text: `  ✔ ${
+          dict.written_dependabot || "Written:      .github/dependabot.yml"
+        }`,
+        type: "written",
+        delay: 3800,
+      },
+      { text: "", type: "blank", delay: 3850 },
+      {
+        text: `  ${dict.done_msg || "Done! Your GitHub Actions pipeline is ready."}`,
+        type: "done",
+        delay: 4100,
+      },
+      {
+        text: `   ${dict.workflows_path || "Workflows → cistack/.github/workflows"}`,
+        type: "path",
+        delay: 4300,
+      },
+      {
+        text: `   ${
+          dict.dependabot_path || "Dependabot → cistack/.github/dependabot.yml"
+        }`,
+        type: "path",
+        delay: 4450,
+      },
+    ];
+  }, [dict, version]);
+
+  useEffect(() => {
+    if (phase !== "typing") {
+      return;
+    }
+
+    if (typedCommand.length < COMMAND.length) {
+      const timeout = window.setTimeout(() => {
+        setTypedCommand(COMMAND.slice(0, typedCommand.length + 1));
+      }, 60 + Math.random() * 60);
+
+      return () => window.clearTimeout(timeout);
+    }
+
+    const timeout = window.setTimeout(() => setPhase("output"), 400);
+    return () => window.clearTimeout(timeout);
+  }, [typedCommand, phase, animationKey]);
+
+  useEffect(() => {
+    if (phase !== "output") {
+      return;
+    }
+
+    if (visibleLines >= outputLines.length) {
+      const timeout = window.setTimeout(() => setPhase("done"), 0);
+      return () => window.clearTimeout(timeout);
+    }
+
+    const currentDelay =
+      outputLines[visibleLines].delay -
+      (visibleLines > 0 ? outputLines[visibleLines - 1].delay : 0);
+    const timeout = window.setTimeout(() => {
+      setVisibleLines((current) => current + 1);
+    }, Math.max(currentDelay, 30));
+
+    return () => window.clearTimeout(timeout);
+  }, [visibleLines, phase, outputLines]);
+
+  const handleReplay = () => {
+    setTypedCommand("");
+    setVisibleLines(0);
+    setPhase("typing");
+    setAnimationKey((current) => current + 1);
+  };
+
+  return (
+    <LazyMotion features={domAnimation}>
+      <div
+        key={animationKey}
+        className="flex h-[300px] w-full flex-col rounded-sm border border-zinc-100 bg-white sm:h-[350px] lg:h-[380px]"
+      >
+        <div className="flex shrink-0 items-center justify-between border-b border-zinc-100 bg-white px-4 py-3">
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500" />
+              <span className="font-mono text-[12px] font-black tracking-[0.18em] text-zinc-600 uppercase">
+                TERMINAL
+              </span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <div className="flex items-center gap-3 rounded-sm border border-zinc-200 bg-zinc-50 px-2.5 py-1">
+              <span className="font-mono text-[13px] font-bold tracking-tight text-zinc-800">
+                {COMMAND}
+              </span>
+              <div className="h-3 w-px bg-zinc-300" />
+              <CopyButton text={COMMAND} variant="terminal" />
+            </div>
+            <m.button
+              type="button"
+              whileTap={{ scale: 0.9 }}
+              onClick={handleReplay}
+              className="rounded-sm border border-transparent p-1.5 text-zinc-500 transition-colors hover:border-zinc-200 hover:text-zinc-900"
+              aria-label="Replay terminal animation"
+            >
+              <RefreshCcw size={14} />
+            </m.button>
+          </div>
+        </div>
+
+        <div
+          className="custom-scrollbar flex-1 overflow-y-auto bg-white p-6 pt-4 font-mono text-[12px] leading-relaxed tracking-tight selection:bg-zinc-900 selection:text-white sm:text-[13px]"
+          style={{ fontFamily: "var(--font-mono)" }}
+        >
+          <div className="flex flex-col gap-1.5">
+            <div className="mb-2 flex items-center gap-2">
+              <span className="font-bold text-zinc-600">$</span>
+              <span className="font-bold text-zinc-900">{typedCommand}</span>
+              {phase === "typing" && (
+                <m.span
+                  animate={{ opacity: [1, 0] }}
+                  transition={{ duration: 0.8, repeat: Number.POSITIVE_INFINITY }}
+                  className="inline-block h-4 w-1.5 bg-emerald-500"
+                />
+              )}
+            </div>
+
+            {phase !== "typing" && (
+              <div className="space-y-0.5">
+                {outputLines.slice(0, visibleLines).map((line, index) => (
+                  <m.div
+                    key={`${animationKey}-${index}`}
+                    initial={{ opacity: 0, x: -4 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ duration: 0.2 }}
+                    className={`whitespace-pre-wrap break-words ${lineColor[line.type]}`}
+                    style={{
+                      minHeight: line.type === "blank" ? "0.75rem" : undefined,
+                    }}
+                  >
+                    {line.text}
+                  </m.div>
+                ))}
+                {phase === "output" && (
+                  <div className="mt-2 flex items-center gap-2">
+                    <div className="h-3 w-1 animate-pulse bg-zinc-300" />
+                    <span className="text-[12px] font-bold tracking-[0.14em] text-zinc-600 uppercase">
+                      {dict.processing || "Processing Output..."}
+                    </span>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </LazyMotion>
+  );
+}

package/product-site/components/ui/accordion.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/product-site/components/ui/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }