2d:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2e:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2f:T1489,"use client"; import { useState } from "react"; import { Button } from "@/components/scalar-ui/button"; import { Stepper } from "@/components/scalar-ui/stepper"; import { Brand } from "@/components/scalar-ui/onboarding/onboarding-ui"; import { WorkspacePreview } from "@/components/scalar-ui/onboarding/preview"; import { ConnectStep, DoneStep, EMPTY, InviteStep, ProfileStep, UseCaseStep, WorkspaceStep, type Answers } from "@/components/scalar-ui/onboarding/steps"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@/lib/utils"; const STEPS = [ { title: "Profile", description: "About you" }, { title: "Workspace", description: "Name and URL" }, { title: "Use case", description: "Pick a start" }, { title: "Invite", description: "Your team", optional: true }, { title: "Connect", description: "Your tools", optional: true }, ]; export interface OnboardingWizardProps { initial?: Partial; defaultStep?: number; onFinish?: (answers: Answers) => void; className?: string; } /** * The first-run wizard: profile, workspace with a URL check, a use case that picks a template, invites with roles, * and connected tools, beside a live preview of the workspace taking shape. Answers are kept when going back. */ export function OnboardingWizard({ initial, defaultStep = 0, onFinish, className }: OnboardingWizardProps) { const [step, setStep] = useState(defaultStep); const [dir, setDir] = useState(1); const [answers, setAnswers] = useState({ ...EMPTY, ...initial }); const set = (patch: Partial) => setAnswers((a) => ({ ...a, ...patch })); const done = step >= STEPS.length; const can = [answers.name.trim().length > 1, answers.workspace.trim().length > 1 && answers.slug.length > 1, !!answers.useCase, true, true][step] ?? true; const move = (to: number) => (setDir(to > step ? 1 : -1), setStep(to)); const props = { answers, set }; const body = [, , , , ][step] ?? ; return (

{!done && ( )}

move(i)} />

{body}

); } export default OnboardingWizard; 30:Tdd24,

"use client";

import { useState } from "react";
import { Button } from "@/components/scalar-ui/button";
import { Stepper } from "@/components/scalar-ui/stepper";
import { Brand } from "@/components/scalar-ui/onboarding/onboarding-ui";
import { WorkspacePreview } from "@/components/scalar-ui/onboarding/preview";
import { ConnectStep, DoneStep, EMPTY, InviteStep, ProfileStep, UseCaseStep, WorkspaceStep, type Answers } from "@/components/scalar-ui/onboarding/steps";
import { AnimatePresence, motion } from "motion/react";
import { cn } from "@/lib/utils";

const STEPS = [
  { title: "Profile", description: "About you" },
  { title: "Workspace", description: "Name and URL" },
  { title: "Use case", description: "Pick a start" },
  { title: "Invite", description: "Your team", optional: true },
  { title: "Connect", description: "Your tools", optional: true },
];

export interface OnboardingWizardProps {
  initial?: Partial<Answers>;
  defaultStep?: number;
  onFinish?: (answers: Answers) => void;
  className?: string;
}

/**
 * The first-run wizard: profile, workspace with a URL check, a use case that picks a template, invites with roles,
 * and connected tools, beside a live preview of the workspace taking shape. Answers are kept when going back.
 */
export function OnboardingWizard({ initial, defaultStep = 0, onFinish, className }: OnboardingWizardProps) {
  const [step, setStep] = useState(defaultStep);
  const [dir, setDir] = useState(1);
  const [answers, setAnswers] = useState<Answers>({ ...EMPTY, ...initial });
  const set = (patch: Partial<Answers>) => setAnswers((a) => ({ ...a, ...patch }));
  const done = step >= STEPS.length;
  const can = [answers.name.trim().length > 1, answers.workspace.trim().length > 1 && answers.slug.length > 1, !!answers.useCase, true, true][step] ?? true;
  const move = (to: number) => (setDir(to > step ? 1 : -1), setStep(to));
  const props = { answers, set };
  const body = [<ProfileStep key="p" {...props} />, <WorkspaceStep key="w" {...props} />, <UseCaseStep key="u" {...props} />, <InviteStep key="i" {...props} />, <ConnectStep key="c" {...props} />][step] ?? <DoneStep answers={answers} />;

  return (
    <div className={cn("@container flex h-full min-h-[600px] w-full bg-white dark:bg-neutral-950", className)}>
      <div className="flex min-w-0 flex-1 flex-col">
        <header className="flex h-16 shrink-0 items-center justify-between px-6">
          <Brand />
          {!done && (
            <button type="button" onClick={() => move(STEPS.length)} className="rounded-[8px] px-2 py-1 text-[12.5px] text-neutral-500 outline-none hover:text-neutral-900 focus-visible:bg-neutral-950/[0.05] dark:hover:text-white">
              Skip setup
            </button>
          )}
        </header>
        <div className="min-h-0 flex-1 overflow-y-auto">
          <div className="mx-auto w-full max-w-[500px] px-6 pb-8 pt-2">
            <div className="mb-8">
              <div className="hidden @[560px]:block">
                <Stepper steps={STEPS} current={step} onStepClick={(i) => move(i)} />
              </div>
              <div className="@[560px]:hidden">
                <Stepper variant="compact" steps={STEPS} current={Math.min(step, STEPS.length - 1)} />
              </div>
            </div>
            <AnimatePresence mode="wait" initial={false} custom={dir}>
              <motion.div key={step} custom={dir} initial={{ opacity: 0, x: dir * 16 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: dir * -16 }} transition={{ type: "spring", bounce: 0, duration: 0.32 }}>
                {body}
              </motion.div>
            </AnimatePresence>
          </div>
        </div>
        <footer className="flex shrink-0 items-center justify-between gap-2 border-t border-black/[0.06] px-6 py-3 dark:border-white/[0.08]">
          {done ? (
            <>
              <Button variant="ghost" onClick={() => move(0)}>
                Start over
              </Button>
              <Button onClick={() => onFinish?.(answers)}>Open {answers.workspace || "your workspace"}</Button>
            </>
          ) : (
            <>
              <Button variant="ghost" onClick={() => move(step - 1)} disabled={step === 0}>
                Back
              </Button>
              <div className="flex gap-2">
                {STEPS[step].optional && (
                  <Button variant="ghost" onClick={() => move(step + 1)}>
                    Skip
                  </Button>
                )}
                <Button onClick={() => move(step + 1)} disabled={!can}>
                  {step === STEPS.length - 1 ? "Finish" : "Continue"}
                </Button>
              </div>
            </>
          )}
        </footer>
      </div>
      <aside className="hidden w-[48%] shrink-0 p-3 @[980px]:block">
        <div className="flex h-full items-center justify-center rounded-[22px] bg-neutral-100 bg-[radial-gradient(rgb(0_0_0/0.06)_1px,transparent_1px)] p-10 [background-size:16px_16px] dark:bg-neutral-900 dark:bg-[radial-gradient(rgb(255_255_255/0.06)_1px,transparent_1px)]">
          <WorkspacePreview answers={answers} step={done ? -1 : step} />
        </div>
      </aside>
    </div>
  );
}

export default OnboardingWizard;

31:T120c,/** Fake data for the onboarding demo. Swap the async functions for your own API. */ export type Role = "Engineering" | "Design" | "Product" | "Marketing" | "Operations" | "Other"; export type TeamSize = "Just me" | "2–10" | "11–50" | "51–200" | "200+"; export type Template = { id: string; name: string; blurb: string; sections: string[]; cards: string[]; tint: string }; export type Integration = { id: string; name: string; blurb: string; tint: string }; export type Invitee = { email: string; role: "Member" | "Admin" }; export const ROLES: Role[] = ["Engineering", "Design", "Product", "Marketing", "Operations", "Other"]; export const TEAM_SIZES: TeamSize[] = ["Just me", "2–10", "11–50", "51–200", "200+"]; export const TEMPLATES: Template[] = [ { id: "roadmap", name: "Product roadmap", blurb: "Ideas, a now / next / later board and release notes.", sections: ["Roadmap", "Ideas", "Releases"], cards: ["Now", "Next", "Later"], tint: "bg-violet-500" }, { id: "sprints", name: "Engineering sprints", blurb: "Two-week sprints, a bug queue and on-call notes.", sections: ["Sprint 24", "Bugs", "On-call"], cards: ["To do", "In progress", "Review"], tint: "bg-sky-500" }, { id: "campaigns", name: "Marketing campaigns", blurb: "A content calendar, campaign briefs and assets.", sections: ["Calendar", "Campaigns", "Assets"], cards: ["Drafting", "Scheduled", "Live"], tint: "bg-rose-500" }, { id: "clients", name: "Client projects", blurb: "One space per client with a timeline and approvals.", sections: ["Clients", "Timeline", "Approvals"], cards: ["Brief", "In progress", "With client"], tint: "bg-amber-500" }, { id: "blank", name: "Start blank", blurb: "An empty workspace. Add what you need as you go.", sections: ["Home"], cards: ["Untitled"], tint: "bg-neutral-400" }, ]; export const USE_CASES: { label: string; template: string }[] = [ { label: "Plan a product", template: "roadmap" }, { label: "Run sprints", template: "sprints" }, { label: "Marketing", template: "campaigns" }, { label: "Client work", template: "clients" }, { label: "Something else", template: "blank" }, ]; export const INTEGRATIONS: Integration[] = [ { id: "slack", name: "Slack", blurb: "Updates in your channels", tint: "bg-[#4A154B] text-white" }, { id: "github", name: "GitHub", blurb: "Link pull requests to tasks", tint: "bg-neutral-900 text-white dark:bg-white dark:text-neutral-900" }, { id: "drive", name: "Google Drive", blurb: "Attach docs and sheets", tint: "bg-[#1FA463] text-white" }, { id: "figma", name: "Figma", blurb: "Live previews of frames", tint: "bg-[#A259FF] text-white" }, ]; const TAKEN = new Set(["acme", "northwind", "studio", "team", "app"]); export const wait = (ms: number) => new Promise((r) => setTimeout(r, ms)); export const slugify = (s: string) => s .toLowerCase() .trim() .replace(/[^a-z0-9]+/g, "-") .replace(/^-+|-+$/g, "") .slice(0, 32); /** Whether a workspace URL is free, with suggestions when it isn't. */ export async function checkSlug(slug: string) { await wait(450); if (TAKEN.has(slug)) return { available: false, suggestions: [`${slug}-hq`, `${slug}-team`, `get${slug}`] }; return { available: true, suggestions: [] }; } export async function connect(_id: string) { await wait(1100); return true; } export type Task = { id: string; title: string; hint: string; action: string }; export const TASKS: Task[] = [ { id: "profile", title: "Add your photo", hint: "So teammates know who's who.", action: "Upload" }, { id: "project", title: "Create your first project", hint: "Start from a template or a blank page.", action: "Create" }, { id: "invite", title: "Invite your team", hint: "Work is better together. Add 2 people.", action: "Invite" }, { id: "connect", title: "Connect Slack", hint: "Get updates where you already talk.", action: "Connect" }, { id: "mobile", title: "Get the mobile app", hint: "Reply to comments on the go.", action: "Get app" }, ]; export type Release = { id: string; date: string; title: string; body: string; tag: "New" | "Improved" | "Fixed" }; export const RELEASES: Release[] = [ { id: "r1", date: "Oct 9", title: "Recurring tasks", body: "Set a task to repeat daily, weekly or on the last Friday of the month. Edits can apply to one or all.", tag: "New" }, { id: "r2", date: "Oct 2", title: "Faster search", body: "Search now finds comments and attachments, and opens in half the time.", tag: "Improved" }, { id: "r3", date: "Sep 25", title: "Timeline zoom", body: "Pinch or ⌘-scroll to zoom the roadmap from days to quarters.", tag: "New" }, ]; 32:Tb54b,

/** Fake data for the onboarding demo. Swap the async functions for your own API. */

export type Role = "Engineering" | "Design" | "Product" | "Marketing" | "Operations" | "Other";
export type TeamSize = "Just me" | "2–10" | "11–50" | "51–200" | "200+";
export type Template = { id: string; name: string; blurb: string; sections: string[]; cards: string[]; tint: string };
export type Integration = { id: string; name: string; blurb: string; tint: string };
export type Invitee = { email: string; role: "Member" | "Admin" };

export const ROLES: Role[] = ["Engineering", "Design", "Product", "Marketing", "Operations", "Other"];
export const TEAM_SIZES: TeamSize[] = ["Just me", "2–10", "11–50", "51–200", "200+"];

export const TEMPLATES: Template[] = [
  { id: "roadmap", name: "Product roadmap", blurb: "Ideas, a now / next / later board and release notes.", sections: ["Roadmap", "Ideas", "Releases"], cards: ["Now", "Next", "Later"], tint: "bg-violet-500" },
  { id: "sprints", name: "Engineering sprints", blurb: "Two-week sprints, a bug queue and on-call notes.", sections: ["Sprint 24", "Bugs", "On-call"], cards: ["To do", "In progress", "Review"], tint: "bg-sky-500" },
  { id: "campaigns", name: "Marketing campaigns", blurb: "A content calendar, campaign briefs and assets.", sections: ["Calendar", "Campaigns", "Assets"], cards: ["Drafting", "Scheduled", "Live"], tint: "bg-rose-500" },
  { id: "clients", name: "Client projects", blurb: "One space per client with a timeline and approvals.", sections: ["Clients", "Timeline", "Approvals"], cards: ["Brief", "In progress", "With client"], tint: "bg-amber-500" },
  { id: "blank", name: "Start blank", blurb: "An empty workspace. Add what you need as you go.", sections: ["Home"], cards: ["Untitled"], tint: "bg-neutral-400" },
];

export const USE_CASES: { label: string; template: string }[] = [
  { label: "Plan a product", template: "roadmap" },
  { label: "Run sprints", template: "sprints" },
  { label: "Marketing", template: "campaigns" },
  { label: "Client work", template: "clients" },
  { label: "Something else", template: "blank" },
];

export const INTEGRATIONS: Integration[] = [
  { id: "slack", name: "Slack", blurb: "Updates in your channels", tint: "bg-[#4A154B] text-white" },
  { id: "github", name: "GitHub", blurb: "Link pull requests to tasks", tint: "bg-neutral-900 text-white dark:bg-white dark:text-neutral-900" },
  { id: "drive", name: "Google Drive", blurb: "Attach docs and sheets", tint: "bg-[#1FA463] text-white" },
  { id: "figma", name: "Figma", blurb: "Live previews of frames", tint: "bg-[#A259FF] text-white" },
];

const TAKEN = new Set(["acme", "northwind", "studio", "team", "app"]);

export const wait = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));

export const slugify = (s: string) =>
  s
    .toLowerCase()
    .trim()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-+|-+$/g, "")
    .slice(0, 32);

/** Whether a workspace URL is free, with suggestions when it isn't. */
export async function checkSlug(slug: string) {
  await wait(450);
  if (TAKEN.has(slug)) return { available: false, suggestions: [`${slug}-hq`, `${slug}-team`, `get${slug}`] };
  return { available: true, suggestions: [] };
}

export async function connect(_id: string) {
  await wait(1100);
  return true;
}

export type Task = { id: string; title: string; hint: string; action: string };

export const TASKS: Task[] = [
  { id: "profile", title: "Add your photo", hint: "So teammates know who's who.", action: "Upload" },
  { id: "project", title: "Create your first project", hint: "Start from a template or a blank page.", action: "Create" },
  { id: "invite", title: "Invite your team", hint: "Work is better together. Add 2 people.", action: "Invite" },
  { id: "connect", title: "Connect Slack", hint: "Get updates where you already talk.", action: "Connect" },
  { id: "mobile", title: "Get the mobile app", hint: "Reply to comments on the go.", action: "Get app" },
];

export type Release = { id: string; date: string; title: string; body: string; tag: "New" | "Improved" | "Fixed" };

export const RELEASES: Release[] = [
  { id: "r1", date: "Oct 9", title: "Recurring tasks", body: "Set a task to repeat daily, weekly or on the last Friday of the month. Edits can apply to one or all.", tag: "New" },
  { id: "r2", date: "Oct 2", title: "Faster search", body: "Search now finds comments and attachments, and opens in half the time.", tag: "Improved" },
  { id: "r3", date: "Sep 25", title: "Timeline zoom", body: "Pinch or ⌘-scroll to zoom the roadmap from days to quarters.", tag: "New" },
];

33:Tded,"use client"; import { motion } from "motion/react"; import { Check } from "lucide-react"; import type { ComponentProps, ReactNode } from "react"; import { cn } from "@/lib/utils"; export function StepHeading({ title, description, className }: { title: ReactNode; description?: ReactNode; className?: string }) { return (

{title}

{description &&

{description}

}

); } /** A pill you can pick. Use `role="radio"` groups for one choice and `aria-pressed` for many. */ export function Chip({ selected, className, children, ...props }: ComponentProps<"button"> & { selected: boolean }) { return ( ); } export function FieldLabel({ children, htmlFor, hint }: { children: ReactNode; htmlFor?: string; hint?: ReactNode }) { return (

{children} {hint && {hint}}

); } /** A coloured square with a letter, for workspaces, templates and apps without a logo. */ export function LetterTile({ name, tint, size = 32, className, src }: { name: string; tint: string; size?: number; className?: string; src?: string | null }) { return src ? (

) : ( {(name.trim()[0] ?? "?").toUpperCase()} ); } export function Brand({ className }: { className?: string }) { return ( Northwind ); } 34:T8b9d,

"use client";

import { motion } from "motion/react";
import { Check } from "lucide-react";
import type { ComponentProps, ReactNode } from "react";
import { cn } from "@/lib/utils";

export function StepHeading({ title, description, className }: { title: ReactNode; description?: ReactNode; className?: string }) {
  return (
    <div className={cn("mb-6", className)}>
      <h2 className="text-[22px] font-semibold tracking-[-0.025em] text-neutral-950 dark:text-white">{title}</h2>
      {description && <p className="mt-1.5 text-[13.5px] leading-relaxed text-neutral-500 dark:text-neutral-400">{description}</p>}
    </div>
  );
}

/** A pill you can pick. Use `role="radio"` groups for one choice and `aria-pressed` for many. */
export function Chip({ selected, className, children, ...props }: ComponentProps<"button"> & { selected: boolean }) {
  return (
    <button
      type="button"
      className={cn(
        "relative flex h-9 items-center gap-1.5 rounded-full px-3.5 text-[13px] font-medium outline-none transition-[background-color,color,box-shadow] duration-150",
        selected
          ? "bg-neutral-950 text-white shadow-[0_1px_2px_rgb(0_0_0/0.2)] dark:bg-white dark:text-neutral-950"
          : "bg-white text-neutral-700 ring-1 ring-inset ring-black/[0.1] hover:bg-neutral-50 hover:ring-black/[0.18] focus-visible:ring-2 focus-visible:ring-neutral-950/25 dark:bg-white/[0.04] dark:text-neutral-300 dark:ring-white/[0.12] dark:hover:bg-white/[0.07] dark:focus-visible:ring-white/30",
        className,
      )}
      {...props}
    >
      {selected && (
        <motion.span initial={{ scale: 0, width: 0 }} animate={{ scale: 1, width: "auto" }} transition={{ type: "spring", bounce: 0.35, duration: 0.3 }} className="-ml-0.5 flex">
          <Check className="size-3.5" strokeWidth={2.5} />
        </motion.span>
      )}
      {children}
    </button>
  );
}

export function FieldLabel({ children, htmlFor, hint }: { children: ReactNode; htmlFor?: string; hint?: ReactNode }) {
  return (
    <div className="mb-1.5 flex items-baseline justify-between gap-3">
      <label htmlFor={htmlFor} className="text-[13px] font-medium text-neutral-800 dark:text-neutral-200">
        {children}
      </label>
      {hint && <span className="text-[12px] text-neutral-400">{hint}</span>}
    </div>
  );
}

/** A coloured square with a letter, for workspaces, templates and apps without a logo. */
export function LetterTile({ name, tint, size = 32, className, src }: { name: string; tint: string; size?: number; className?: string; src?: string | null }) {
  return src ? (
    <img src={src} alt="" className={cn("shrink-0 rounded-[28%] object-cover", className)} style={{ width: size, height: size }} />
  ) : (
    <span className={cn("flex shrink-0 items-center justify-center rounded-[28%] font-semibold", tint, className)} style={{ width: size, height: size, fontSize: size * 0.42 }}>
      {(name.trim()[0] ?? "?").toUpperCase()}
    </span>
  );
}

export function Brand({ className }: { className?: string }) {
  return (
    <span className={cn("flex items-center gap-2 text-[15px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white", className)}>
      <svg viewBox="0 0 24 24" className="size-6" aria-hidden>
        <rect width="24" height="24" rx="7" className="fill-neutral-950 dark:fill-white" />
        <path d="M7 16.5V7.5l10 9V7.5" fill="none" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" className="stroke-white dark:stroke-neutral-950" />
      </svg>
      Northwind
    </span>
  );
}

35:T3cc6,"use client"; import { AnimatePresence, motion } from "motion/react"; import { Check, Loader2, Plus, X } from "lucide-react"; import { useEffect, useId, useState, type KeyboardEvent } from "react"; import { AvatarUpload } from "@/components/scalar-ui/avatar-upload"; import { Button } from "@/components/scalar-ui/button"; import { CopyField } from "@/components/scalar-ui/copy-field"; import { Input } from "@/components/scalar-ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/scalar-ui/select"; import { INTEGRATIONS, ROLES, TEAM_SIZES, TEMPLATES, USE_CASES, checkSlug, connect, slugify, type Invitee, type Role, type TeamSize } from "@/components/scalar-ui/onboarding/data"; import { Chip, FieldLabel, LetterTile, StepHeading } from "@/components/scalar-ui/onboarding/onboarding-ui"; import { cn } from "@/lib/utils"; export type Answers = { photo: string | null; name: string; role: Role | null; workspace: string; slug: string; slugTouched: boolean; logo: string | null; useCase: string | null; template: string; size: TeamSize | null; invites: Invitee[]; connected: string[]; }; export const EMPTY: Answers = { photo: null, name: "", role: null, workspace: "", slug: "", slugTouched: false, logo: null, useCase: null, template: "roadmap", size: null, invites: [], connected: [] }; export type StepProps = { answers: Answers; set: (patch: Partial) => void }; const isEmail = (v: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim()); export function ProfileStep({ answers, set }: StepProps) { const id = useId(); return (

set({ photo })} name={answers.name || "You"} label="Photo" size={64} hint="Optional. A face makes comments friendlier." />

Your name set({ name: e.target.value })} />

What do you do?

{ROLES.map((r) => ( set({ role: r })}> {r} ))}

); } export function WorkspaceStep({ answers, set }: StepProps) { const nameId = useId(); const slugId = useId(); const [status, setStatus] = useState<"idle" | "checking" | "available" | "taken">("idle"); const [suggestions, setSuggestions] = useState([]); useEffect(() => { if (!answers.slug) return setStatus("idle"); setStatus("checking"); let live = true; const t = setTimeout(async () => { const r = await checkSlug(answers.slug); if (!live) return; setStatus(r.available ? "available" : "taken"); setSuggestions(r.suggestions); }, 300); return () => { live = false; clearTimeout(t); }; }, [answers.slug]); return (

Workspace name set({ workspace: e.target.value, ...(answers.slugTouched ? {} : { slug: slugify(e.target.value) }) })} />

Workspace URL set({ slug: slugify(e.target.value), slugTouched: true })} leading={northwind.app/} trailing={ status === "checking" ? : status === "available" ? : status === "taken" ? : null } aria-describedby={`${slugId}-s`} />

{status === "taken" ? ( That URL is taken. Try {suggestions.map((s) => ( ))} ) : status === "available" ? ( Nice, it's yours. ) : ( Lowercase letters, numbers and dashes. )}

set({ logo })} name={answers.workspace || "W"} shape="square" size={52} label="Logo" hint="Optional. Square, at least 256 px." />

); } export function UseCaseStep({ answers, set }: StepProps) { const template = TEMPLATES.find((t) => t.id === answers.template)!; return (

{USE_CASES.map((u) => ( set({ useCase: u.label, template: u.template })}> {u.label} ))}

How big is your team?

{TEAM_SIZES.map((s) => ( set({ size: s })}> {s} ))}

{answers.useCase && (

We'll start you with {template.name}: {template.blurb.charAt(0).toLowerCase() + template.blurb.slice(1)}

)}

); } export function InviteStep({ answers, set }: StepProps) { const [draft, setDraft] = useState(""); const [error, setError] = useState(null); const inputId = useId(); const add = (raw: string) => { const emails = raw.split(/[\s,;]+/).filter(Boolean); const bad = emails.filter((e) => !isEmail(e)); const good = emails.filter((e) => isEmail(e) && !answers.invites.some((i) => i.email === e.toLowerCase())); if (good.length) set({ invites: [...answers.invites, ...good.map((email) => ({ email: email.toLowerCase(), role: "Member" as const }))] }); setError(bad.length ? `${bad.join(", ")} ${bad.length === 1 ? "isn't" : "aren't"} a valid email` : null); setDraft(bad.join(" ")); }; const onKey = (e: KeyboardEvent) => { if (["Enter", ",", " "].includes(e.key) && draft.trim()) e.preventDefault(), add(draft); if (e.key === "Backspace" && !draft && answers.invites.length) set({ invites: answers.invites.slice(0, -1) }); }; return (

Email addresses

(setDraft(e.target.value), setError(null))} onKeyDown={onKey} onPaste={(e) => (e.preventDefault(), add(draft + " " + e.clipboardData.getData("text")))} />

{error ?? "Press Enter to add. Paste a list to add them all."}

{answers.invites.map((inv) => (

{inv.email[0]} {inv.email}

))}

); } export function ConnectStep({ answers, set }: StepProps) { const [busy, setBusy] = useState(null); const toggle = async (id: string) => { if (answers.connected.includes(id)) return set({ connected: answers.connected.filter((x) => x !== id) }); setBusy(id); await connect(id); setBusy(null); set({ connected: [...answers.connected, id] }); }; return (

{INTEGRATIONS.map((app) => { const on = answers.connected.includes(app.id); return (

{app.name} {app.blurb}

); })}

); } export function DoneStep({ answers }: { answers: Answers }) { const template = TEMPLATES.find((t) => t.id === answers.template)!; const rows = [ ["Workspace", `${answers.workspace || "Your workspace"} · northwind.app/${answers.slug || "your-team"}`], ["Started with", template.name], ["Invites", answers.invites.length ? `${answers.invites.length} sent` : "None yet"], ["Connected", answers.connected.length ? INTEGRATIONS.filter((i) => answers.connected.includes(i.id)).map((i) => i.name).join(", ") : "Nothing yet"], ]; return (

{k}: {v}

); } 36:T2aa85,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { Check, Loader2, Plus, X } from "lucide-react";
import { useEffect, useId, useState, type KeyboardEvent } from "react";
import { AvatarUpload } from "@/components/scalar-ui/avatar-upload";
import { Button } from "@/components/scalar-ui/button";
import { CopyField } from "@/components/scalar-ui/copy-field";
import { Input } from "@/components/scalar-ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/scalar-ui/select";
import { INTEGRATIONS, ROLES, TEAM_SIZES, TEMPLATES, USE_CASES, checkSlug, connect, slugify, type Invitee, type Role, type TeamSize } from "@/components/scalar-ui/onboarding/data";
import { Chip, FieldLabel, LetterTile, StepHeading } from "@/components/scalar-ui/onboarding/onboarding-ui";
import { cn } from "@/lib/utils";

export type Answers = {
  photo: string | null;
  name: string;
  role: Role | null;
  workspace: string;
  slug: string;
  slugTouched: boolean;
  logo: string | null;
  useCase: string | null;
  template: string;
  size: TeamSize | null;
  invites: Invitee[];
  connected: string[];
};

export const EMPTY: Answers = { photo: null, name: "", role: null, workspace: "", slug: "", slugTouched: false, logo: null, useCase: null, template: "roadmap", size: null, invites: [], connected: [] };

export type StepProps = { answers: Answers; set: (patch: Partial<Answers>) => void };

const isEmail = (v: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim());

export function ProfileStep({ answers, set }: StepProps) {
  const id = useId();
  return (
    <div>
      <StepHeading title="Tell us about you" description="This is how you'll appear to teammates. You can change it later in Settings." />
      <div className="flex flex-col gap-5">
        <AvatarUpload value={answers.photo} onChange={(photo) => set({ photo })} name={answers.name || "You"} label="Photo" size={64} hint="Optional. A face makes comments friendlier." />
        <div>
          <FieldLabel htmlFor={id}>Your name</FieldLabel>
          <Input id={id} autoFocus autoComplete="name" placeholder="Maya Chen" value={answers.name} onChange={(e) => set({ name: e.target.value })} />
        </div>
        <div>
          <FieldLabel>What do you do?</FieldLabel>
          <div role="radiogroup" aria-label="Your role" className="flex flex-wrap gap-2">
            {ROLES.map((r) => (
              <Chip key={r} role="radio" aria-checked={answers.role === r} selected={answers.role === r} onClick={() => set({ role: r })}>
                {r}
              </Chip>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export function WorkspaceStep({ answers, set }: StepProps) {
  const nameId = useId();
  const slugId = useId();
  const [status, setStatus] = useState<"idle" | "checking" | "available" | "taken">("idle");
  const [suggestions, setSuggestions] = useState<string[]>([]);
  useEffect(() => {
    if (!answers.slug) return setStatus("idle");
    setStatus("checking");
    let live = true;
    const t = setTimeout(async () => {
      const r = await checkSlug(answers.slug);
      if (!live) return;
      setStatus(r.available ? "available" : "taken");
      setSuggestions(r.suggestions);
    }, 300);
    return () => {
      live = false;
      clearTimeout(t);
    };
  }, [answers.slug]);
  return (
    <div>
      <StepHeading title="Create your workspace" description="A workspace is where your team's projects live." />
      <div className="flex flex-col gap-5">
        <div>
          <FieldLabel htmlFor={nameId}>Workspace name</FieldLabel>
          <Input id={nameId} autoFocus placeholder="Northwind" value={answers.workspace} onChange={(e) => set({ workspace: e.target.value, ...(answers.slugTouched ? {} : { slug: slugify(e.target.value) }) })} />
        </div>
        <div>
          <FieldLabel htmlFor={slugId}>Workspace URL</FieldLabel>
          <Input
            id={slugId}
            value={answers.slug}
            invalid={status === "taken"}
            onChange={(e) => set({ slug: slugify(e.target.value), slugTouched: true })}
            leading={<span className="text-[13px] text-neutral-400">northwind.app/</span>}
            trailing={
              status === "checking" ? <Loader2 className="animate-spin" /> : status === "available" ? <Check className="text-emerald-600 dark:text-emerald-400" /> : status === "taken" ? <X className="text-red-600 dark:text-red-400" /> : null
            }
            aria-describedby={`${slugId}-s`}
          />
          <div id={`${slugId}-s`} aria-live="polite" className="mt-1.5 min-h-5 text-[12px]">
            {status === "taken" ? (
              <span className="flex flex-wrap items-center gap-1.5 text-red-600 dark:text-red-400">
                That URL is taken. Try
                {suggestions.map((s) => (
                  <button key={s} type="button" onClick={() => set({ slug: s, slugTouched: true })} className="rounded-full bg-neutral-950/[0.05] px-2 py-0.5 font-medium text-neutral-800 hover:bg-neutral-950/[0.09] dark:bg-white/[0.08] dark:text-neutral-200">
                    {s}
                  </button>
                ))}
              </span>
            ) : status === "available" ? (
              <span className="text-emerald-600 dark:text-emerald-400">Nice, it's yours.</span>
            ) : (
              <span className="text-neutral-500">Lowercase letters, numbers and dashes.</span>
            )}
          </div>
        </div>
        <AvatarUpload value={answers.logo} onChange={(logo) => set({ logo })} name={answers.workspace || "W"} shape="square" size={52} label="Logo" hint="Optional. Square, at least 256 px." />
      </div>
    </div>
  );
}

export function UseCaseStep({ answers, set }: StepProps) {
  const template = TEMPLATES.find((t) => t.id === answers.template)!;
  return (
    <div>
      <StepHeading title="What brings you here?" description="We'll set up your first space to match. Nothing is locked in." />
      <div className="flex flex-col gap-6">
        <div role="radiogroup" aria-label="Use case" className="flex flex-wrap gap-2">
          {USE_CASES.map((u) => (
            <Chip key={u.label} role="radio" aria-checked={answers.useCase === u.label} selected={answers.useCase === u.label} onClick={() => set({ useCase: u.label, template: u.template })}>
              {u.label}
            </Chip>
          ))}
        </div>
        <div>
          <FieldLabel>How big is your team?</FieldLabel>
          <div role="radiogroup" aria-label="Team size" className="flex flex-wrap gap-2">
            {TEAM_SIZES.map((s) => (
              <Chip key={s} role="radio" aria-checked={answers.size === s} selected={answers.size === s} onClick={() => set({ size: s })}>
                {s}
              </Chip>
            ))}
          </div>
        </div>
        <AnimatePresence initial={false}>
          {answers.useCase && (
            <motion.div initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} className="flex items-start gap-3 rounded-[16px] bg-neutral-50 p-3.5 ring-1 ring-black/[0.05] dark:bg-white/[0.03] dark:ring-white/[0.07]">
              <span className={cn("mt-0.5 size-2.5 shrink-0 rounded-full", template.tint)} />
              <p className="text-[13px] leading-relaxed text-neutral-600 dark:text-neutral-400">
                We'll start you with <b className="font-medium text-neutral-900 dark:text-white">{template.name}</b>: {template.blurb.charAt(0).toLowerCase() + template.blurb.slice(1)}
              </p>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
}

export function InviteStep({ answers, set }: StepProps) {
  const [draft, setDraft] = useState("");
  const [error, setError] = useState<string | null>(null);
  const inputId = useId();
  const add = (raw: string) => {
    const emails = raw.split(/[\s,;]+/).filter(Boolean);
    const bad = emails.filter((e) => !isEmail(e));
    const good = emails.filter((e) => isEmail(e) && !answers.invites.some((i) => i.email === e.toLowerCase()));
    if (good.length) set({ invites: [...answers.invites, ...good.map((email) => ({ email: email.toLowerCase(), role: "Member" as const }))] });
    setError(bad.length ? `${bad.join(", ")} ${bad.length === 1 ? "isn't" : "aren't"} a valid email` : null);
    setDraft(bad.join(" "));
  };
  const onKey = (e: KeyboardEvent<HTMLInputElement>) => {
    if (["Enter", ",", " "].includes(e.key) && draft.trim()) e.preventDefault(), add(draft);
    if (e.key === "Backspace" && !draft && answers.invites.length) set({ invites: answers.invites.slice(0, -1) });
  };
  return (
    <div>
      <StepHeading title="Invite your team" description="They'll get an email and land straight in your workspace." />
      <FieldLabel htmlFor={inputId} hint="Separate with commas">
        Email addresses
      </FieldLabel>
      <div className="flex gap-2">
        <Input id={inputId} autoFocus type="email" placeholder="jon@company.com, priya@company.com" value={draft} invalid={!!error} onChange={(e) => (setDraft(e.target.value), setError(null))} onKeyDown={onKey} onPaste={(e) => (e.preventDefault(), add(draft + " " + e.clipboardData.getData("text")))} />
        <Button variant="outline" onClick={() => add(draft)} disabled={!draft.trim()} aria-label="Add">
          <Plus />
          Add
        </Button>
      </div>
      <p className={cn("mt-1.5 min-h-5 text-[12px]", error ? "text-red-600 dark:text-red-400" : "text-neutral-500")}>{error ?? "Press Enter to add. Paste a list to add them all."}</p>
      <ul className="mt-2 flex flex-col">
        <AnimatePresence initial={false}>
          {answers.invites.map((inv) => (
            <motion.li key={inv.email} layout initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }} exit={{ opacity: 0, height: 0 }} transition={{ type: "spring", bounce: 0, duration: 0.3 }} className="overflow-hidden">
              <div className="flex items-center gap-3 border-b border-black/[0.05] py-2 dark:border-white/[0.06]">
                <span className="flex size-8 items-center justify-center rounded-full bg-neutral-950/[0.05] text-[12px] font-semibold uppercase text-neutral-600 dark:bg-white/[0.08] dark:text-neutral-300">{inv.email[0]}</span>
                <span className="min-w-0 flex-1 truncate text-[13px] text-neutral-900 dark:text-white">{inv.email}</span>
                <Select value={inv.role} onValueChange={(role) => set({ invites: answers.invites.map((x) => (x.email === inv.email ? { ...x, role: role as Invitee["role"] } : x)) })}>
                  <SelectTrigger size="sm" variant="ghost" aria-label={`Role for ${inv.email}`} className="w-[104px]">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Member" description="Can create and edit">
                      Member
                    </SelectItem>
                    <SelectItem value="Admin" description="Can also manage people and billing">
                      Admin
                    </SelectItem>
                  </SelectContent>
                </Select>
                <button type="button" aria-label={`Remove ${inv.email}`} onClick={() => set({ invites: answers.invites.filter((x) => x.email !== inv.email) })} className="flex size-7 items-center justify-center rounded-[8px] text-neutral-400 outline-none hover:bg-neutral-950/[0.05] hover:text-neutral-900 focus-visible:bg-neutral-950/[0.06] dark:hover:bg-white/[0.08] dark:hover:text-white">
                  <X className="size-3.5" />
                </button>
              </div>
            </motion.li>
          ))}
        </AnimatePresence>
      </ul>
      <CopyField className="mt-5" size="sm" label="Or share an invite link" value={`https://northwind.app/join/${answers.slug || "your-team"}-7Fq2`} buttonLabel="Copy" description="Anyone with the link joins as a Member. It expires in 7 days." />
    </div>
  );
}

export function ConnectStep({ answers, set }: StepProps) {
  const [busy, setBusy] = useState<string | null>(null);
  const toggle = async (id: string) => {
    if (answers.connected.includes(id)) return set({ connected: answers.connected.filter((x) => x !== id) });
    setBusy(id);
    await connect(id);
    setBusy(null);
    set({ connected: [...answers.connected, id] });
  };
  return (
    <div>
      <StepHeading title="Bring your tools" description="Connect what your team already uses. You can add more from Settings." />
      <div className="grid gap-2.5 @[440px]:grid-cols-2">
        {INTEGRATIONS.map((app) => {
          const on = answers.connected.includes(app.id);
          return (
            <div key={app.id} className={cn("flex items-center gap-3 rounded-[16px] p-3 ring-1 transition-colors", on ? "bg-emerald-500/[0.04] ring-emerald-500/30" : "ring-black/[0.08] dark:ring-white/[0.1]")}>
              <LetterTile name={app.name} tint={app.tint} size={36} />
              <span className="min-w-0 flex-1">
                <span className="block text-[13px] font-medium text-neutral-950 dark:text-white">{app.name}</span>
                <span className="block truncate text-[11.5px] text-neutral-500">{app.blurb}</span>
              </span>
              <Button size="sm" variant={on ? "ghost" : "outline"} onClick={() => toggle(app.id)} disabled={busy === app.id} aria-label={on ? `Disconnect ${app.name}` : `Connect ${app.name}`} className={on ? "text-emerald-700 dark:text-emerald-400" : undefined}>
                {busy === app.id ? <Loader2 className="animate-spin" /> : on ? <Check /> : null}
                {busy === app.id ? "" : on ? "Connected" : "Connect"}
              </Button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export function DoneStep({ answers }: { answers: Answers }) {
  const template = TEMPLATES.find((t) => t.id === answers.template)!;
  const rows = [
    ["Workspace", `${answers.workspace || "Your workspace"} · northwind.app/${answers.slug || "your-team"}`],
    ["Started with", template.name],
    ["Invites", answers.invites.length ? `${answers.invites.length} sent` : "None yet"],
    ["Connected", answers.connected.length ? INTEGRATIONS.filter((i) => answers.connected.includes(i.id)).map((i) => i.name).join(", ") : "Nothing yet"],
  ];
  return (
    <div>
      <motion.span initial={{ scale: 0.5, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} transition={{ type: "spring", bounce: 0.45, duration: 0.5 }} className="mb-4 flex size-12 items-center justify-center rounded-full bg-emerald-500 text-white shadow-[0_6px_16px_-6px_rgb(16_185_129/0.6)]">
        <Check className="size-6" strokeWidth={2.5} />
      </motion.span>
      <StepHeading title={`You're all set${answers.name ? `, ${answers.name.split(" ")[0]}` : ""}`} description="Here's what we set up. Everything can be changed later." />
      <dl className="divide-y divide-black/[0.05] rounded-[16px] ring-1 ring-black/[0.07] dark:divide-white/[0.06] dark:ring-white/[0.08]">
        {rows.map(([k, v], i) => (
          <motion.div key={k} initial={{ opacity: 0, x: -6 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.1 + i * 0.06 }} className="flex gap-4 px-4 py-2.5 text-[13px]">
            <dt className="w-24 shrink-0 text-neutral-500">{k}</dt>
            <dd className="min-w-0 truncate text-neutral-900 dark:text-white">{v}</dd>
          </motion.div>
        ))}
      </dl>
    </div>
  );
}

37:T1ccb,"use client"; import { AnimatePresence, motion } from "motion/react"; import { Bell, Home, Inbox, Search } from "lucide-react"; import type { ReactNode } from "react"; import { INTEGRATIONS, TEMPLATES } from "@/components/scalar-ui/onboarding/data"; import { LetterTile } from "@/components/scalar-ui/onboarding/onboarding-ui"; import type { Answers } from "@/components/scalar-ui/onboarding/steps"; import { cn } from "@/lib/utils"; function Spot({ on, children, className }: { on: boolean; children: ReactNode; className?: string }) { return (

{children}

); } const Bar = ({ w, className }: { w: string; className?: string }) => ; /** A small live picture of the workspace that fills in as the wizard is answered, with the current step outlined. */ export function WorkspacePreview({ answers, step }: { answers: Answers; step: number }) { const template = TEMPLATES.find((t) => t.id === answers.template)!; const first = answers.name.split(" ")[0]; const people = [answers.name || "You", ...answers.invites.map((i) => i.email)]; return (

{[0, 1, 2].map((i) => ( ))}

{answers.workspace || "Your workspace"}

Home Inbox Search

Spaces

{template.sections.map((s) => ( {s} ))}

Members · {people.length}

{answers.photo ?

: null} {people.slice(answers.photo ? 1 : 0, 6).map((p) => ( {p[0]} ))}

{answers.photo ?

: {(first || "Y")[0]}} Good morning{first ? `, ${first}` : ""} {answers.role && {answers.role}}

{template.cards.map((c, i) => (

{c}

{[0, 1, 2].slice(0, 3 - (i % 2)).map((k) => (

))} ))} Apps {INTEGRATIONS.map((app) => ( ))}

); } 38:T11e56,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { Bell, Home, Inbox, Search } from "lucide-react";
import type { ReactNode } from "react";
import { INTEGRATIONS, TEMPLATES } from "@/components/scalar-ui/onboarding/data";
import { LetterTile } from "@/components/scalar-ui/onboarding/onboarding-ui";
import type { Answers } from "@/components/scalar-ui/onboarding/steps";
import { cn } from "@/lib/utils";

function Spot({ on, children, className }: { on: boolean; children: ReactNode; className?: string }) {
  return (
    <div className={cn("relative rounded-[10px] transition-shadow duration-300", on && "shadow-[0_0_0_2px_rgb(10_10_10),0_0_0_6px_rgb(10_10_10/0.08)] dark:shadow-[0_0_0_2px_rgb(255_255_255),0_0_0_6px_rgb(255_255_255/0.1)]", className)}>
      {children}
    </div>
  );
}

const Bar = ({ w, className }: { w: string; className?: string }) => <span className={cn("block h-1.5 rounded-full bg-neutral-950/[0.08] dark:bg-white/[0.1]", className)} style={{ width: w }} />;

/** A small live picture of the workspace that fills in as the wizard is answered, with the current step outlined. */
export function WorkspacePreview({ answers, step }: { answers: Answers; step: number }) {
  const template = TEMPLATES.find((t) => t.id === answers.template)!;
  const first = answers.name.split(" ")[0];
  const people = [answers.name || "You", ...answers.invites.map((i) => i.email)];
  return (
    <div aria-hidden className="pointer-events-none w-full max-w-[520px] select-none overflow-hidden rounded-[16px] bg-white text-left shadow-[0_24px_60px_-24px_rgb(0_0_0/0.3),0_2px_6px_rgb(0_0_0/0.05)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]">
      <div className="flex h-7 items-center gap-1.5 border-b border-black/[0.05] px-3 dark:border-white/[0.06]">
        {[0, 1, 2].map((i) => (
          <span key={i} className="size-2 rounded-full bg-neutral-200 dark:bg-neutral-700" />
        ))}
      </div>
      <div className="flex h-[340px]">
        <div className="flex w-[150px] shrink-0 flex-col gap-3 border-r border-black/[0.05] bg-neutral-50/70 p-2.5 dark:border-white/[0.06] dark:bg-white/[0.02]">
          <Spot on={step === 1} className="p-1">
            <div className="flex items-center gap-2">
              <LetterTile name={answers.workspace || "W"} tint="bg-neutral-950 text-white dark:bg-white dark:text-neutral-950" src={answers.logo} size={22} />
              <span className={cn("truncate text-[11.5px] font-semibold", answers.workspace ? "text-neutral-900 dark:text-white" : "text-neutral-400")}>{answers.workspace || "Your workspace"}</span>
            </div>
          </Spot>
          <div className="flex flex-col gap-1.5 px-1 text-[10.5px] text-neutral-500">
            <span className="flex items-center gap-1.5">
              <Home className="size-3" /> Home
            </span>
            <span className="flex items-center gap-1.5">
              <Inbox className="size-3" /> Inbox
            </span>
            <span className="flex items-center gap-1.5">
              <Search className="size-3" /> Search
            </span>
          </div>
          <Spot on={step === 2} className="p-1">
            <p className="mb-1 text-[9.5px] font-medium uppercase tracking-wider text-neutral-400">Spaces</p>
            <AnimatePresence mode="popLayout" initial={false}>
              {template.sections.map((s) => (
                <motion.p key={`${template.id}-${s}`} initial={{ opacity: 0, x: -4 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0 }} className="flex items-center gap-1.5 py-0.5 text-[10.5px] text-neutral-700 dark:text-neutral-300">
                  <span className={cn("size-1.5 rounded-full", template.tint)} />
                  {s}
                </motion.p>
              ))}
            </AnimatePresence>
          </Spot>
          <Spot on={step === 3} className="mt-auto p-1">
            <p className="mb-1.5 text-[9.5px] font-medium uppercase tracking-wider text-neutral-400">Members · {people.length}</p>
            <div className="flex -space-x-1.5">
              {answers.photo ? <img src={answers.photo} alt="" className="size-5 rounded-full object-cover ring-2 ring-white dark:ring-neutral-900" /> : null}
              <AnimatePresence initial={false}>
                {people.slice(answers.photo ? 1 : 0, 6).map((p) => (
                  <motion.span key={p} initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }} transition={{ type: "spring", bounce: 0.4, duration: 0.35 }} className="flex size-5 items-center justify-center rounded-full bg-neutral-200 text-[8.5px] font-semibold uppercase text-neutral-600 ring-2 ring-white dark:bg-neutral-700 dark:text-neutral-200 dark:ring-neutral-900">
                    {p[0]}
                  </motion.span>
                ))}
              </AnimatePresence>
            </div>
          </Spot>
        </div>
        <div className="flex min-w-0 flex-1 flex-col gap-3 p-3.5">
          <div className="flex items-center gap-2">
            <Spot on={step === 0} className="flex flex-1 items-center gap-2 p-1">
              {answers.photo ? <img src={answers.photo} alt="" className="size-6 rounded-full object-cover" /> : <span className="flex size-6 items-center justify-center rounded-full bg-neutral-200 text-[10px] font-semibold text-neutral-600 dark:bg-neutral-700 dark:text-neutral-200">{(first || "Y")[0]}</span>}
              <span className="text-[12.5px] font-semibold text-neutral-900 dark:text-white">Good morning{first ? `, ${first}` : ""}</span>
              {answers.role && <span className="rounded-full bg-neutral-950/[0.05] px-1.5 text-[9.5px] text-neutral-500 dark:bg-white/[0.08]">{answers.role}</span>}
            </Spot>
            <Bell className="size-3.5 text-neutral-400" />
          </div>
          <Spot on={step === 2} className="grid flex-1 grid-cols-3 gap-2 p-1">
            {template.cards.map((c, i) => (
              <motion.div key={`${template.id}-${c}`} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.05 }} className="flex flex-col gap-1.5 rounded-[9px] bg-neutral-50 p-2 dark:bg-white/[0.03]">
                <p className="text-[10px] font-medium text-neutral-600 dark:text-neutral-300">{c}</p>
                {[0, 1, 2].slice(0, 3 - (i % 2)).map((k) => (
                  <div key={k} className="rounded-[6px] bg-white p-1.5 shadow-[0_1px_1px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.04] dark:bg-white/[0.05] dark:ring-white/[0.05]">
                    <Bar w={`${60 + ((k * 17 + i * 11) % 35)}%`} />
                    <Bar w="40%" className="mt-1 bg-neutral-950/[0.05]" />
                  </div>
                ))}
              </motion.div>
            ))}
          </Spot>
          <Spot on={step === 4} className="flex items-center gap-1.5 p-1">
            <span className="text-[9.5px] font-medium uppercase tracking-wider text-neutral-400">Apps</span>
            {INTEGRATIONS.map((app) => (
              <motion.span key={app.id} animate={{ opacity: answers.connected.includes(app.id) ? 1 : 0.25, scale: answers.connected.includes(app.id) ? 1 : 0.9 }} className="flex">
                <LetterTile name={app.name} tint={app.tint} size={18} />
              </motion.span>
            ))}
          </Spot>
        </div>
      </div>
    </div>
  );
}

39:T1602,"use client"; import { AnimatePresence, motion } from "motion/react"; import { useState } from "react"; import { Button } from "@/components/scalar-ui/button"; import { TEMPLATES, type Template } from "@/components/scalar-ui/onboarding/data"; import { Chip } from "@/components/scalar-ui/onboarding/onboarding-ui"; import { cn } from "@/lib/utils"; const FILTERS: { label: string; ids: string[] | null }[] = [ { label: "All", ids: null }, { label: "Product", ids: ["roadmap", "sprints"] }, { label: "Marketing", ids: ["campaigns"] }, { label: "Agencies", ids: ["clients"] }, ]; function TemplatePreview({ template }: { template: Template }) { return (

{template.sections.map((s, i) => ( {s} ))}

{template.cards.map((c, i) => (

{c}

{Array.from({ length: 3 - (i % 2) }, (_, k) => (

))}

); } /** Templates in a list with filters, and a preview of the selected one. */ export function TemplatePicker({ defaultValue = "roadmap", onUse }: { defaultValue?: string; onUse: (template: Template) => void }) { const [filter, setFilter] = useState("All"); const [value, setValue] = useState(defaultValue); const ids = FILTERS.find((f) => f.label === filter)?.ids; const list = TEMPLATES.filter((t) => !ids || ids.includes(t.id) || t.id === "blank"); const current = TEMPLATES.find((t) => t.id === value) ?? TEMPLATES[0]; return (

{FILTERS.map((f) => ( setFilter(f.label)} className="h-8 px-3 text-[12.5px]"> {f.label} ))}

{list.map((t) => ( setValue(t.id)} onDoubleClick={() => onUse(t)} className={cn("flex items-start gap-3 rounded-[14px] p-3 text-left outline-none transition-colors focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/25", value === t.id ? "bg-neutral-950/[0.05] ring-1 ring-black/[0.08] dark:bg-white/[0.07] dark:ring-white/[0.1]" : "hover:bg-neutral-950/[0.03] dark:hover:bg-white/[0.04]")} > {t.name} {t.blurb} ))}

{current.sections.length} spaces · {current.cards.length} columns

); } 3a:Te0bb,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { useState } from "react";
import { Button } from "@/components/scalar-ui/button";
import { TEMPLATES, type Template } from "@/components/scalar-ui/onboarding/data";
import { Chip } from "@/components/scalar-ui/onboarding/onboarding-ui";
import { cn } from "@/lib/utils";

const FILTERS: { label: string; ids: string[] | null }[] = [
  { label: "All", ids: null },
  { label: "Product", ids: ["roadmap", "sprints"] },
  { label: "Marketing", ids: ["campaigns"] },
  { label: "Agencies", ids: ["clients"] },
];

function TemplatePreview({ template }: { template: Template }) {
  return (
    <div className="flex h-full flex-col gap-3 rounded-[16px] bg-white p-4 shadow-[0_12px_32px_-16px_rgb(0_0_0/0.2)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]">
      <div className="flex gap-1.5">
        {template.sections.map((s, i) => (
          <span key={s} className={cn("rounded-full px-2 py-0.5 text-[10.5px] font-medium", i === 0 ? "bg-neutral-950 text-white dark:bg-white dark:text-neutral-950" : "text-neutral-500")}>
            {s}
          </span>
        ))}
      </div>
      <div className="grid flex-1 grid-cols-3 gap-2">
        {template.cards.map((c, i) => (
          <div key={c} className="flex flex-col gap-1.5 rounded-[10px] bg-neutral-50 p-2 dark:bg-white/[0.03]">
            <p className="flex items-center gap-1.5 text-[10.5px] font-medium text-neutral-600 dark:text-neutral-300">
              <span className={cn("size-1.5 rounded-full", template.tint)} />
              {c}
            </p>
            {Array.from({ length: 3 - (i % 2) }, (_, k) => (
              <div key={k} className="rounded-[7px] bg-white p-2 ring-1 ring-black/[0.04] dark:bg-white/[0.05] dark:ring-white/[0.05]">
                <span className="block h-1.5 rounded-full bg-neutral-950/[0.1] dark:bg-white/[0.12]" style={{ width: `${55 + ((k * 23 + i * 13) % 40)}%` }} />
                <span className="mt-1 block h-1.5 w-1/3 rounded-full bg-neutral-950/[0.05] dark:bg-white/[0.06]" />
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

/** Templates in a list with filters, and a preview of the selected one. */
export function TemplatePicker({ defaultValue = "roadmap", onUse }: { defaultValue?: string; onUse: (template: Template) => void }) {
  const [filter, setFilter] = useState("All");
  const [value, setValue] = useState(defaultValue);
  const ids = FILTERS.find((f) => f.label === filter)?.ids;
  const list = TEMPLATES.filter((t) => !ids || ids.includes(t.id) || t.id === "blank");
  const current = TEMPLATES.find((t) => t.id === value) ?? TEMPLATES[0];
  return (
    <div className="@container flex h-full flex-col">
      <div role="radiogroup" aria-label="Filter" className="mb-4 flex flex-wrap gap-2">
        {FILTERS.map((f) => (
          <Chip key={f.label} role="radio" aria-checked={filter === f.label} selected={filter === f.label} onClick={() => setFilter(f.label)} className="h-8 px-3 text-[12.5px]">
            {f.label}
          </Chip>
        ))}
      </div>
      <div className="grid min-h-0 flex-1 gap-4 @[640px]:grid-cols-[260px_1fr]">
        <div role="radiogroup" aria-label="Templates" className="flex flex-col gap-1.5 overflow-y-auto">
          <AnimatePresence initial={false} mode="popLayout">
            {list.map((t) => (
              <motion.button
                layout
                key={t.id}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                type="button"
                role="radio"
                aria-checked={value === t.id}
                onClick={() => setValue(t.id)}
                onDoubleClick={() => onUse(t)}
                className={cn("flex items-start gap-3 rounded-[14px] p-3 text-left outline-none transition-colors focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/25", value === t.id ? "bg-neutral-950/[0.05] ring-1 ring-black/[0.08] dark:bg-white/[0.07] dark:ring-white/[0.1]" : "hover:bg-neutral-950/[0.03] dark:hover:bg-white/[0.04]")}
              >
                <span className={cn("mt-1 size-2.5 shrink-0 rounded-full", t.tint)} />
                <span className="min-w-0">
                  <span className="block text-[13px] font-medium text-neutral-950 dark:text-white">{t.name}</span>
                  <span className="block text-[12px] leading-snug text-neutral-500">{t.blurb}</span>
                </span>
              </motion.button>
            ))}
          </AnimatePresence>
        </div>
        <div className="hidden min-h-0 flex-col gap-3 rounded-[20px] bg-neutral-100 p-4 @[640px]:flex dark:bg-white/[0.03]">
          <AnimatePresence mode="wait" initial={false}>
            <motion.div key={current.id} initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -8 }} transition={{ type: "spring", bounce: 0, duration: 0.3 }} className="min-h-0 flex-1">
              <TemplatePreview template={current} />
            </motion.div>
          </AnimatePresence>
          <div className="flex items-center justify-between gap-3">
            <p className="text-[12.5px] text-neutral-500">
              {current.sections.length} spaces · {current.cards.length} columns
            </p>
            <Button size="sm" onClick={() => onUse(current)}>
              Use {current.id === "blank" ? "a blank workspace" : "this template"}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

3b:T1c3a,"use client"; import { AnimatePresence, motion } from "motion/react"; import { Check, ChevronRight, PartyPopper, X } from "lucide-react"; import { useState } from "react"; import { Button } from "@/components/scalar-ui/button"; import type { Task } from "@/components/scalar-ui/onboarding/data"; import { cn } from "@/lib/utils"; function Ring({ value, total, size = 40 }: { value: number; total: number; size?: number }) { const r = size / 2 - 3.5; const c = 2 * Math.PI * r; return ( {value}/{total} ); } export interface ChecklistProps { tasks: Task[]; done: string[]; onAction: (task: Task) => void; onDismiss?: () => void; /** card: the full list with the next task open · compact: a sidebar widget with progress and the next task. */ variant?: "card" | "compact"; title?: string; className?: string; } /** Getting started tasks that tick off as they happen, with the next one opened up and a progress ring. */ export function GettingStartedChecklist({ tasks, done, onAction, onDismiss, variant = "card", title = "Get started", className }: ChecklistProps) { const next = tasks.find((t) => !done.includes(t.id)); const [open, setOpen] = useState(null); const expanded = open ?? next?.id; const count = tasks.filter((t) => done.includes(t.id)).length; if (variant === "compact") return (

{title}

{count} of {tasks.length}

{tasks.map((t) => ( ))}

{next ? ( ) : (

All done

)}

); return (

{next ? title : "You're all set up"}

{next ? `${tasks.length - count} quick ${tasks.length - count === 1 ? "step" : "steps"} to get the most out of Northwind.` : "Nice work. You can hide this now."}

{onDismiss && ( )}

{isOpen && (

{t.hint}

)}

); } 3c:T112b6,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { Check, ChevronRight, PartyPopper, X } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/scalar-ui/button";
import type { Task } from "@/components/scalar-ui/onboarding/data";
import { cn } from "@/lib/utils";

function Ring({ value, total, size = 40 }: { value: number; total: number; size?: number }) {
  const r = size / 2 - 3.5;
  const c = 2 * Math.PI * r;
  return (
    <span className="relative shrink-0" style={{ width: size, height: size }}>
      <svg viewBox={`0 0 ${size} ${size}`} className="size-full -rotate-90">
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" strokeWidth="3.5" className="stroke-neutral-950/[0.08] dark:stroke-white/[0.1]" />
        <motion.circle cx={size / 2} cy={size / 2} r={r} fill="none" strokeWidth="3.5" strokeLinecap="round" strokeDasharray={c} initial={false} animate={{ strokeDashoffset: c * (1 - value / total) }} transition={{ type: "spring", bounce: 0, duration: 0.7 }} className="stroke-emerald-500" />
      </svg>
      <span className="absolute inset-0 flex items-center justify-center text-[11px] font-semibold tabular-nums text-neutral-900 dark:text-white">
        {value}/{total}
      </span>
    </span>
  );
}

export interface ChecklistProps {
  tasks: Task[];
  done: string[];
  onAction: (task: Task) => void;
  onDismiss?: () => void;
  /** card: the full list with the next task open · compact: a sidebar widget with progress and the next task. */
  variant?: "card" | "compact";
  title?: string;
  className?: string;
}

/** Getting started tasks that tick off as they happen, with the next one opened up and a progress ring. */
export function GettingStartedChecklist({ tasks, done, onAction, onDismiss, variant = "card", title = "Get started", className }: ChecklistProps) {
  const next = tasks.find((t) => !done.includes(t.id));
  const [open, setOpen] = useState<string | null>(null);
  const expanded = open ?? next?.id;
  const count = tasks.filter((t) => done.includes(t.id)).length;

  if (variant === "compact")
    return (
      <div className={cn("rounded-[14px] bg-white p-3 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.07] dark:bg-white/[0.04] dark:ring-white/[0.08]", className)}>
        <div className="flex items-center justify-between">
          <p className="text-[12.5px] font-medium text-neutral-900 dark:text-white">{title}</p>
          <span className="text-[11.5px] tabular-nums text-neutral-500">
            {count} of {tasks.length}
          </span>
        </div>
        <div className="mt-2 flex gap-[3px]">
          {tasks.map((t) => (
            <span key={t.id} className={cn("h-1 flex-1 rounded-full transition-colors duration-500", done.includes(t.id) ? "bg-emerald-500" : "bg-neutral-950/[0.08] dark:bg-white/[0.1]")} />
          ))}
        </div>
        {next ? (
          <button type="button" onClick={() => onAction(next)} className="group mt-2.5 flex w-full items-center gap-2 rounded-[9px] px-1.5 py-1 text-left text-[12.5px] text-neutral-700 outline-none hover:bg-neutral-950/[0.04] focus-visible:bg-neutral-950/[0.05] dark:text-neutral-300 dark:hover:bg-white/[0.06]">
            <span className="size-3.5 shrink-0 rounded-full ring-[1.5px] ring-inset ring-neutral-950/25 dark:ring-white/30" />
            <span className="min-w-0 flex-1 truncate">{next.title}</span>
            <ChevronRight className="size-3.5 text-neutral-400 transition-transform group-hover:translate-x-0.5" />
          </button>
        ) : (
          <p className="mt-2.5 flex items-center gap-1.5 text-[12.5px] text-emerald-700 dark:text-emerald-400">
            <PartyPopper className="size-3.5" /> All done
          </p>
        )}
      </div>
    );

  return (
    <div className={cn("overflow-hidden rounded-[20px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04),0_12px_32px_-16px_rgb(0_0_0/0.14)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]", className)}>
      <div className="flex items-center gap-3 border-b border-black/[0.05] p-4 dark:border-white/[0.06]">
        <Ring value={count} total={tasks.length} />
        <div className="min-w-0 flex-1">
          <p className="text-[14px] font-semibold text-neutral-950 dark:text-white">{next ? title : "You're all set up"}</p>
          <p className="text-[12.5px] text-neutral-500">{next ? `${tasks.length - count} quick ${tasks.length - count === 1 ? "step" : "steps"} to get the most out of Northwind.` : "Nice work. You can hide this now."}</p>
        </div>
        {onDismiss && (
          <button type="button" aria-label="Hide checklist" onClick={onDismiss} className="flex size-7 items-center justify-center rounded-[8px] text-neutral-400 outline-none hover:bg-neutral-950/[0.05] hover:text-neutral-900 focus-visible:bg-neutral-950/[0.06] dark:hover:bg-white/[0.08] dark:hover:text-white">
            <X className="size-4" />
          </button>
        )}
      </div>
      <ul className="p-1.5">
        {tasks.map((t) => {
          const isDone = done.includes(t.id);
          const isOpen = expanded === t.id && !isDone;
          return (
            <li key={t.id}>
              <button type="button" onClick={() => setOpen(isOpen ? "__none" : t.id)} aria-expanded={isOpen} className="flex w-full items-center gap-3 rounded-[12px] px-2.5 py-2 text-left outline-none hover:bg-neutral-950/[0.03] focus-visible:bg-neutral-950/[0.04] dark:hover:bg-white/[0.04]">
                <span className={cn("flex size-5 shrink-0 items-center justify-center rounded-full transition-colors duration-300", isDone ? "bg-emerald-500 text-white" : "ring-[1.5px] ring-inset ring-neutral-950/20 dark:ring-white/25")}>
                  <AnimatePresence initial={false}>
                    {isDone && (
                      <motion.span initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ type: "spring", bounce: 0.5, duration: 0.4 }}>
                        <Check className="size-3" strokeWidth={3} />
                      </motion.span>
                    )}
                  </AnimatePresence>
                </span>
                <span className={cn("flex-1 text-[13px] transition-colors", isDone ? "text-neutral-400 line-through decoration-neutral-300 dark:decoration-neutral-600" : "font-medium text-neutral-900 dark:text-white")}>{t.title}</span>
              </button>
              <AnimatePresence initial={false}>
                {isOpen && (
                  <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ type: "spring", bounce: 0, duration: 0.3 }} className="overflow-hidden">
                    <div className="flex items-center gap-3 pb-2.5 pl-[42px] pr-2.5">
                      <p className="flex-1 text-[12.5px] text-neutral-500">{t.hint}</p>
                      <Button size="sm" onClick={() => onAction(t)}>
                        {t.action}
                      </Button>
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

3d:T1ec5,"use client"; import { AnimatePresence, motion } from "motion/react"; import { X } from "lucide-react"; import { useCallback, useEffect, useLayoutEffect, useState, type ReactNode, type RefObject } from "react"; import { Button } from "@/components/scalar-ui/button"; import { cn } from "@/lib/utils"; export type TourStep = { /** A CSS selector inside the container, e.g. [data-tour="search"]. */ target: string; title: ReactNode; body: ReactNode; placement?: "top" | "bottom" | "left" | "right"; }; type Rect = { x: number; y: number; w: number; h: number }; const PAD = 6; const CARD = 280; export interface ProductTourProps { steps: TourStep[]; open: boolean; onOpenChange: (open: boolean) => void; /** The element the tour lives in; targets are found and measured inside it. */ containerRef: RefObject; onFinish?: () => void; } /** * A short guided tour: dims everything but one element, with a card that says what it is. Next, Back and Skip, the * arrow keys and Esc all work. Keep tours to three to five steps. */ export function ProductTour({ steps, open, onOpenChange, containerRef, onFinish }: ProductTourProps) { const [index, setIndex] = useState(0); const [rect, setRect] = useState(null); const [box, setBox] = useState({ w: 0, h: 0 }); const step = steps[index]; const measure = useCallback(() => { const root = containerRef.current; const el = root?.querySelector(step?.target ?? ""); if (!root || !el) return setRect(null); const a = root.getBoundingClientRect(); const b = el.getBoundingClientRect(); setBox({ w: a.width, h: a.height }); setRect({ x: b.left - a.left - PAD, y: b.top - a.top - PAD, w: b.width + PAD * 2, h: b.height + PAD * 2 }); }, [containerRef, step?.target]); useLayoutEffect(() => { if (open) measure(); }, [open, measure]); useEffect(() => { if (!open) return; const root = containerRef.current; const ro = new ResizeObserver(measure); if (root) ro.observe(root); return () => ro.disconnect(); }, [open, measure, containerRef]); useEffect(() => { if (open) setIndex(0); }, [open]); const close = () => onOpenChange(false); const next = () => (index === steps.length - 1 ? (close(), onFinish?.()) : setIndex(index + 1)); const back = () => setIndex(Math.max(0, index - 1)); useEffect(() => { if (!open) return; const key = (e: KeyboardEvent) => { if (e.key === "Escape") close(); if (e.key === "ArrowRight") next(); if (e.key === "ArrowLeft") back(); }; window.addEventListener("keydown", key); return () => window.removeEventListener("keydown", key); }); let card = { x: 0, y: 0 }; if (rect) { const place = step.placement ?? (rect.y + rect.h + 180 < box.h ? "bottom" : "top"); const gap = 12; card = place === "bottom" ? { x: rect.x, y: rect.y + rect.h + gap } : place === "top" ? { x: rect.x, y: rect.y - gap - 168 } : place === "right" ? { x: rect.x + rect.w + gap, y: rect.y } : { x: rect.x - gap - CARD, y: rect.y }; card.x = Math.max(12, Math.min(box.w - CARD - 12, card.x)); card.y = Math.max(12, Math.min(box.h - 180, card.y)); } return ( {open && rect && (

{step.title}

{step.body}

{steps.map((_, i) => ( ))}

{index > 0 && ( )}

{index + 1} of {steps.length}

)} ); } /** A single static hint dot that opens a short tip. It never pulses; it just sits there until it's read. */ export function TourHint({ title, body, className }: { title: string; body: ReactNode; className?: string }) { const [open, setOpen] = useState(false); const [seen, setSeen] = useState(false); if (seen && !open) return null; return ( {open && ( )} ); } 3e:T14c18,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { X } from "lucide-react";
import { useCallback, useEffect, useLayoutEffect, useState, type ReactNode, type RefObject } from "react";
import { Button } from "@/components/scalar-ui/button";
import { cn } from "@/lib/utils";

export type TourStep = {
  /** A CSS selector inside the container, e.g. [data-tour="search"]. */
  target: string;
  title: ReactNode;
  body: ReactNode;
  placement?: "top" | "bottom" | "left" | "right";
};

type Rect = { x: number; y: number; w: number; h: number };

const PAD = 6;
const CARD = 280;

export interface ProductTourProps {
  steps: TourStep[];
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** The element the tour lives in; targets are found and measured inside it. */
  containerRef: RefObject<HTMLElement | null>;
  onFinish?: () => void;
}

/**
 * A short guided tour: dims everything but one element, with a card that says what it is. Next, Back and Skip, the
 * arrow keys and Esc all work. Keep tours to three to five steps.
 */
export function ProductTour({ steps, open, onOpenChange, containerRef, onFinish }: ProductTourProps) {
  const [index, setIndex] = useState(0);
  const [rect, setRect] = useState<Rect | null>(null);
  const [box, setBox] = useState({ w: 0, h: 0 });
  const step = steps[index];

  const measure = useCallback(() => {
    const root = containerRef.current;
    const el = root?.querySelector(step?.target ?? "");
    if (!root || !el) return setRect(null);
    const a = root.getBoundingClientRect();
    const b = el.getBoundingClientRect();
    setBox({ w: a.width, h: a.height });
    setRect({ x: b.left - a.left - PAD, y: b.top - a.top - PAD, w: b.width + PAD * 2, h: b.height + PAD * 2 });
  }, [containerRef, step?.target]);

  useLayoutEffect(() => {
    if (open) measure();
  }, [open, measure]);
  useEffect(() => {
    if (!open) return;
    const root = containerRef.current;
    const ro = new ResizeObserver(measure);
    if (root) ro.observe(root);
    return () => ro.disconnect();
  }, [open, measure, containerRef]);
  useEffect(() => {
    if (open) setIndex(0);
  }, [open]);

  const close = () => onOpenChange(false);
  const next = () => (index === steps.length - 1 ? (close(), onFinish?.()) : setIndex(index + 1));
  const back = () => setIndex(Math.max(0, index - 1));

  useEffect(() => {
    if (!open) return;
    const key = (e: KeyboardEvent) => {
      if (e.key === "Escape") close();
      if (e.key === "ArrowRight") next();
      if (e.key === "ArrowLeft") back();
    };
    window.addEventListener("keydown", key);
    return () => window.removeEventListener("keydown", key);
  });

  let card = { x: 0, y: 0 };
  if (rect) {
    const place = step.placement ?? (rect.y + rect.h + 180 < box.h ? "bottom" : "top");
    const gap = 12;
    card =
      place === "bottom" ? { x: rect.x, y: rect.y + rect.h + gap } : place === "top" ? { x: rect.x, y: rect.y - gap - 168 } : place === "right" ? { x: rect.x + rect.w + gap, y: rect.y } : { x: rect.x - gap - CARD, y: rect.y };
    card.x = Math.max(12, Math.min(box.w - CARD - 12, card.x));
    card.y = Math.max(12, Math.min(box.h - 180, card.y));
  }

  return (
    <AnimatePresence>
      {open && rect && (
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.2 }} className="absolute inset-0 z-40" role="dialog" aria-modal="true" aria-labelledby="tour-title">
          <div className="absolute inset-0" onClick={close} />
          <motion.div
            className="pointer-events-none absolute rounded-[12px] shadow-[0_0_0_9999px_rgb(10_10_10/0.45)] ring-2 ring-white/90 dark:shadow-[0_0_0_9999px_rgb(0_0_0/0.6)]"
            initial={false}
            animate={{ left: rect.x, top: rect.y, width: rect.w, height: rect.h }}
            transition={{ type: "spring", bounce: 0.12, duration: 0.5 }}
          />
          <motion.div
            initial={false}
            animate={{ left: card.x, top: card.y }}
            transition={{ type: "spring", bounce: 0.12, duration: 0.5 }}
            className="absolute rounded-[16px] bg-white p-4 shadow-[0_16px_40px_-12px_rgb(0_0_0/0.35)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.1]"
            style={{ width: CARD }}
          >
            <button type="button" aria-label="Close tour" onClick={close} className="absolute right-2.5 top-2.5 flex size-7 items-center justify-center rounded-full text-neutral-400 outline-none hover:bg-neutral-950/[0.05] hover:text-neutral-900 dark:hover:bg-white/[0.08] dark:hover:text-white">
              <X className="size-3.5" />
            </button>
            <AnimatePresence mode="wait" initial={false}>
              <motion.div key={index} initial={{ opacity: 0, y: 4 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -4 }} transition={{ duration: 0.15 }}>
                <p id="tour-title" className="pr-6 text-[14px] font-semibold text-neutral-950 dark:text-white">
                  {step.title}
                </p>
                <p className="mt-1 text-[12.5px] leading-relaxed text-neutral-500 dark:text-neutral-400">{step.body}</p>
              </motion.div>
            </AnimatePresence>
            <div className="mt-4 flex items-center gap-2">
              <div className="flex flex-1 gap-1">
                {steps.map((_, i) => (
                  <span key={i} className={cn("h-1.5 rounded-full transition-all duration-300", i === index ? "w-4 bg-neutral-950 dark:bg-white" : "w-1.5 bg-neutral-950/15 dark:bg-white/20")} />
                ))}
              </div>
              {index > 0 && (
                <Button size="sm" variant="ghost" onClick={back}>
                  Back
                </Button>
              )}
              <Button size="sm" onClick={next} autoFocus>
                {index === steps.length - 1 ? "Done" : "Next"}
              </Button>
            </div>
            <p className="mt-2 text-[11px] tabular-nums text-neutral-400">
              {index + 1} of {steps.length}
            </p>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

/** A single static hint dot that opens a short tip. It never pulses; it just sits there until it's read. */
export function TourHint({ title, body, className }: { title: string; body: ReactNode; className?: string }) {
  const [open, setOpen] = useState(false);
  const [seen, setSeen] = useState(false);
  if (seen && !open) return null;
  return (
    <span className={cn("absolute", className)}>
      <button type="button" aria-label={`Tip: ${title}`} aria-expanded={open} onClick={() => setOpen((o) => !o)} className="relative flex size-4 items-center justify-center rounded-full outline-none">
        <span className="absolute inset-0 rounded-full bg-sky-500/25" />
        <span className="relative size-2 rounded-full bg-sky-500 ring-2 ring-white dark:ring-neutral-900" />
      </button>
      <AnimatePresence>
        {open && (
          <motion.span role="tooltip" initial={{ opacity: 0, y: 4, scale: 0.97 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, scale: 0.98 }} transition={{ type: "spring", bounce: 0.15, duration: 0.3 }} className="absolute left-1/2 top-6 z-30 block w-[220px] -translate-x-1/2 rounded-[12px] bg-neutral-950 p-3 text-left text-white shadow-lg dark:bg-white dark:text-neutral-950">
            <span className="block text-[12.5px] font-semibold">{title}</span>
            <span className="mt-0.5 block text-[12px] leading-snug opacity-75">{body}</span>
            <button type="button" onClick={() => (setOpen(false), setSeen(true))} className="mt-2 text-[11.5px] font-semibold underline underline-offset-4">
              Got it
            </button>
          </motion.span>
        )}
      </AnimatePresence>
    </span>
  );
}

3f:T145b,"use client"; import { Megaphone, MousePointerClick, Users, Zap } from "lucide-react"; import { Badge } from "@/components/scalar-ui/badge"; import { Button } from "@/components/scalar-ui/button"; import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/scalar-ui/dialog"; import type { Release } from "@/components/scalar-ui/onboarding/data"; export interface WelcomeDialogProps { open: boolean; onOpenChange: (open: boolean) => void; name: string; onTour: () => void; } /** A first-visit welcome. Open it once the first screen has loaded, not before, so it has something to point at. */ export function WelcomeDialog({ open, onOpenChange, name, onTour }: WelcomeDialogProps) { const points = [ { icon: , title: "Everything is a click away", body: "Press ⌘K anywhere to jump to a project, person or doc." }, { icon: , title: "Built for teams", body: "Mention someone with @ and they'll get it right away." }, { icon: , title: "Automate the busywork", body: "Rules move tasks along when their status changes." }, ]; return ( ); } /** What changed since the last visit, newest first, with a Megaphone and a tag per release. */ export function WhatsNewDialog({ open, onOpenChange, releases }: { open: boolean; onOpenChange: (open: boolean) => void; releases: Release[] }) { const tone = { New: "blue", Improved: "emerald", Fixed: "neutral" } as const; return ( ); } 40:Tba2b,

"use client";

import { Megaphone, MousePointerClick, Users, Zap } from "lucide-react";
import { Badge } from "@/components/scalar-ui/badge";
import { Button } from "@/components/scalar-ui/button";
import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/scalar-ui/dialog";
import type { Release } from "@/components/scalar-ui/onboarding/data";

export interface WelcomeDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  name: string;
  onTour: () => void;
}

/** A first-visit welcome. Open it once the first screen has loaded, not before, so it has something to point at. */
export function WelcomeDialog({ open, onOpenChange, name, onTour }: WelcomeDialogProps) {
  const points = [
    { icon: <MousePointerClick />, title: "Everything is a click away", body: "Press ⌘K anywhere to jump to a project, person or doc." },
    { icon: <Users />, title: "Built for teams", body: "Mention someone with @ and they'll get it right away." },
    { icon: <Zap />, title: "Automate the busywork", body: "Rules move tasks along when their status changes." },
  ];
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[460px] overflow-hidden p-0" showClose={false}>
        <div className="relative h-36 overflow-hidden bg-neutral-950 dark:bg-neutral-800">
          <div aria-hidden className="absolute inset-0 bg-[radial-gradient(rgb(255_255_255/0.14)_1px,transparent_1px)] [background-size:14px_14px]" />
          <div aria-hidden className="absolute bottom-0 left-1/2 flex -translate-x-1/2 translate-y-3 gap-2">
            {["w-24", "w-32", "w-20"].map((w, i) => (
              <span key={i} className={`h-16 ${w} rounded-t-[12px] bg-white/[0.09] ring-1 ring-white/10`} style={{ transform: `translateY(${[8, 0, 12][i]}px)` }} />
            ))}
          </div>
        </div>
        <div className="p-6">
          <DialogTitle>Welcome to Northwind, {name}</DialogTitle>
          <DialogDescription className="mt-1">Three things worth knowing before you start.</DialogDescription>
          <ul className="mt-5 flex flex-col gap-3.5">
            {points.map((p) => (
              <li key={p.title} className="flex gap-3">
                <span className="flex size-8 shrink-0 items-center justify-center rounded-[10px] bg-neutral-950/[0.05] text-neutral-700 dark:bg-white/[0.08] dark:text-neutral-200 [&_svg]:size-4">{p.icon}</span>
                <span>
                  <span className="block text-[13px] font-medium text-neutral-950 dark:text-white">{p.title}</span>
                  <span className="block text-[12.5px] text-neutral-500">{p.body}</span>
                </span>
              </li>
            ))}
          </ul>
          <div className="mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
            <Button variant="ghost" onClick={() => onOpenChange(false)}>
              Explore on my own
            </Button>
            <Button onClick={() => (onOpenChange(false), onTour())}>Take the 1-minute tour</Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}

/** What changed since the last visit, newest first, with a Megaphone and a tag per release. */
export function WhatsNewDialog({ open, onOpenChange, releases }: { open: boolean; onOpenChange: (open: boolean) => void; releases: Release[] }) {
  const tone = { New: "blue", Improved: "emerald", Fixed: "neutral" } as const;
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[440px]">
        <div className="mb-5 flex items-center gap-3 pr-8">
          <span className="flex size-10 items-center justify-center rounded-[12px] bg-neutral-950/[0.05] text-neutral-700 dark:bg-white/[0.08] dark:text-neutral-200">
            <Megaphone className="size-[18px]" />
          </span>
          <div>
            <DialogTitle>What's new</DialogTitle>
            <DialogDescription>Since your last visit</DialogDescription>
          </div>
        </div>
        <ol className="relative flex flex-col gap-5 border-l border-black/[0.08] pl-5 dark:border-white/[0.1]">
          {releases.map((r) => (
            <li key={r.id} className="relative">
              <span className="absolute -left-[25px] top-1.5 size-2 rounded-full bg-neutral-300 ring-4 ring-white dark:bg-neutral-600 dark:ring-neutral-900" />
              <div className="flex items-center gap-2">
                <p className="text-[13.5px] font-semibold text-neutral-950 dark:text-white">{r.title}</p>
                <Badge size="sm" tone={tone[r.tag]}>
                  {r.tag}
                </Badge>
                <span className="ml-auto text-[11.5px] text-neutral-400">{r.date}</span>
              </div>
              <p className="mt-1 text-[12.5px] leading-relaxed text-neutral-500">{r.body}</p>
            </li>
          ))}
        </ol>
        <div className="mt-6 flex justify-between">
          <Button variant="ghost" size="sm">
            Full changelog
          </Button>
          <Button size="sm" onClick={() => onOpenChange(false)}>
            Got it
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}

41:T1849,"use client"; import { AnimatePresence, motion } from "motion/react"; import { FileUp, FolderPlus, LayoutTemplate, Boxes, Trash2 } from "lucide-react"; import { useState, type ReactNode } from "react"; import { Badge } from "@/components/scalar-ui/badge"; import { Button } from "@/components/scalar-ui/button"; import { wait } from "@/components/scalar-ui/onboarding/data"; import { cn } from "@/lib/utils"; const SAMPLE = [ { name: "Website relaunch", owner: "Maya Chen", due: "Nov 14", progress: 64, tint: "bg-violet-500" }, { name: "Q4 hiring plan", owner: "Jon Park", due: "Nov 30", progress: 22, tint: "bg-amber-500" }, { name: "Customer interviews", owner: "Priya Raman", due: "Oct 28", progress: 90, tint: "bg-emerald-500" }, ]; function Option({ icon, title, body, onClick, busy }: { icon: ReactNode; title: string; body: string; onClick: () => void; busy?: boolean }) { return ( ); } /** The first empty screen: three clear ways to start, including sample data that's labelled and easy to clear. */ export function FirstRun({ onCreate, onImport, onTemplate }: { onCreate?: () => void; onImport?: () => void; onTemplate?: () => void }) { const [sample, setSample] = useState(false); const [busy, setBusy] = useState(false); const load = async () => { setBusy(true); await wait(700); setBusy(false); setSample(true); }; return (

Projects

{sample ? "Sample projects, so you can click around." : "Nothing here yet."}

{sample && ( )}

{sample ? ( {SAMPLE.map((p, i) => ( {p.name} Sample {p.owner} · due {p.due} ))} ) : (

Start your first project

Pick whichever is quickest. You can always import more later.

)}

); } 42:Tdc62,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { FileUp, FolderPlus, LayoutTemplate, Boxes, Trash2 } from "lucide-react";
import { useState, type ReactNode } from "react";
import { Badge } from "@/components/scalar-ui/badge";
import { Button } from "@/components/scalar-ui/button";
import { wait } from "@/components/scalar-ui/onboarding/data";
import { cn } from "@/lib/utils";

const SAMPLE = [
  { name: "Website relaunch", owner: "Maya Chen", due: "Nov 14", progress: 64, tint: "bg-violet-500" },
  { name: "Q4 hiring plan", owner: "Jon Park", due: "Nov 30", progress: 22, tint: "bg-amber-500" },
  { name: "Customer interviews", owner: "Priya Raman", due: "Oct 28", progress: 90, tint: "bg-emerald-500" },
];

function Option({ icon, title, body, onClick, busy }: { icon: ReactNode; title: string; body: string; onClick: () => void; busy?: boolean }) {
  return (
    <button type="button" onClick={onClick} disabled={busy} className="group flex flex-col items-start gap-2 rounded-[16px] bg-white p-4 text-left shadow-[0_1px_2px_rgb(0_0_0/0.04)] outline-none ring-1 ring-black/[0.07] transition-[box-shadow,transform] duration-200 hover:-translate-y-0.5 hover:shadow-[0_8px_20px_-10px_rgb(0_0_0/0.2)] focus-visible:ring-2 focus-visible:ring-neutral-950/25 disabled:opacity-60 dark:bg-white/[0.03] dark:ring-white/[0.08] dark:focus-visible:ring-white/30">
      <span className="flex size-9 items-center justify-center rounded-[11px] bg-neutral-950/[0.05] text-neutral-700 transition-colors group-hover:bg-neutral-950 group-hover:text-white dark:bg-white/[0.08] dark:text-neutral-200 dark:group-hover:bg-white dark:group-hover:text-neutral-950 [&_svg]:size-4">{icon}</span>
      <span className="text-[13.5px] font-medium text-neutral-950 dark:text-white">{title}</span>
      <span className="text-[12px] leading-snug text-neutral-500">{body}</span>
    </button>
  );
}

/** The first empty screen: three clear ways to start, including sample data that's labelled and easy to clear. */
export function FirstRun({ onCreate, onImport, onTemplate }: { onCreate?: () => void; onImport?: () => void; onTemplate?: () => void }) {
  const [sample, setSample] = useState(false);
  const [busy, setBusy] = useState(false);
  const load = async () => {
    setBusy(true);
    await wait(700);
    setBusy(false);
    setSample(true);
  };
  return (
    <div className="@container flex h-full flex-col">
      <div className="mb-5 flex items-end justify-between gap-3">
        <div>
          <p className="text-[18px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">Projects</p>
          <p className="text-[12.5px] text-neutral-500">{sample ? "Sample projects, so you can click around." : "Nothing here yet."}</p>
        </div>
        {sample && (
          <Button size="sm" variant="ghost" onClick={() => setSample(false)}>
            <Trash2 />
            Clear sample data
          </Button>
        )}
      </div>
      <AnimatePresence mode="wait" initial={false}>
        {sample ? (
          <motion.ul key="list" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="flex flex-col gap-2">
            {SAMPLE.map((p, i) => (
              <motion.li key={p.name} initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.07, type: "spring", bounce: 0, duration: 0.4 }} className="flex items-center gap-3 rounded-[14px] p-3 ring-1 ring-black/[0.07] dark:ring-white/[0.08]">
                <span className={cn("size-8 shrink-0 rounded-[9px]", p.tint)} />
                <span className="min-w-0 flex-1">
                  <span className="flex items-center gap-2 text-[13px] font-medium text-neutral-950 dark:text-white">
                    {p.name}
                    <Badge size="sm" variant="outline">
                      Sample
                    </Badge>
                  </span>
                  <span className="block text-[12px] text-neutral-500">
                    {p.owner} · due {p.due}
                  </span>
                </span>
                <span className="hidden w-28 @[480px]:block">
                  <span className="block h-1.5 overflow-hidden rounded-full bg-neutral-950/[0.07] dark:bg-white/[0.1]">
                    <motion.span className="block h-full rounded-full bg-neutral-950 dark:bg-white" initial={{ width: 0 }} animate={{ width: `${p.progress}%` }} transition={{ delay: 0.2 + i * 0.07, type: "spring", bounce: 0, duration: 0.8 }} />
                  </span>
                </span>
              </motion.li>
            ))}
          </motion.ul>
        ) : (
          <motion.div key="empty" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="flex flex-1 flex-col items-center justify-center rounded-[22px] border-[1.5px] border-dashed border-black/[0.1] p-6 text-center dark:border-white/[0.12]">
            <p className="text-[15px] font-semibold text-neutral-950 dark:text-white">Start your first project</p>
            <p className="mb-5 mt-1 max-w-[340px] text-[12.5px] text-neutral-500">Pick whichever is quickest. You can always import more later.</p>
            <div className="grid w-full max-w-[620px] gap-2.5 @[560px]:grid-cols-3">
              <Option icon={<FolderPlus />} title="Blank project" body="A clean board with three columns." onClick={() => onCreate?.()} />
              <Option icon={<LayoutTemplate />} title="From a template" body="Roadmaps, sprints, campaigns and more." onClick={() => onTemplate?.()} />
              <Option icon={<FileUp />} title="Import a CSV" body="Bring tasks from a spreadsheet." onClick={() => onImport?.()} />
            </div>
            <button type="button" onClick={load} disabled={busy} className="mt-5 flex items-center gap-1.5 text-[12.5px] font-medium text-neutral-600 underline decoration-neutral-950/20 underline-offset-4 outline-none hover:text-neutral-950 dark:text-neutral-400 dark:hover:text-white">
              <Boxes className="size-3" />
              {busy ? "Adding sample data…" : "Just exploring? Add sample data"}
            </button>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

43:T3466,"use client"; import { AnimatePresence, motion } from "motion/react"; import { AlertCircle, Check, Download, FileSpreadsheet } from "lucide-react"; import { useEffect, useMemo, useState } from "react"; import { Button } from "@/components/scalar-ui/button"; import { Dropzone } from "@/components/scalar-ui/file-upload"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/scalar-ui/select"; import { Stepper } from "@/components/scalar-ui/stepper"; import { Switch } from "@/components/scalar-ui/switch"; import { cn } from "@/lib/utils"; const SAMPLE = `Full name,E-mail,Company,Job title Maya Chen,maya@northwind.co,Northwind,Head of Product Jon Park,jon@studio.dev,Studio,Engineer Priya Raman,priya@fieldnote,Fieldnote,Designer Daniel Okafor,daniel@lumen.io,Lumen,Founder ,sam@halcyon.so,Halcyon,Marketing Ana Souza,ana@pathfinder.ai,Pathfinder,Ops lead Lee Wong,lee@acme.com,Acme,Sales`; type Field = { id: string; label: string; required?: boolean; match: RegExp; check?: (v: string) => string | null }; const FIELDS: Field[] = [ { id: "name", label: "Name", required: true, match: /name/i, check: (v) => (v.trim() ? null : "Name is empty") }, { id: "email", label: "Email", required: true, match: /mail/i, check: (v) => (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) ? null : "Email looks wrong") }, { id: "company", label: "Company", match: /company|org/i }, { id: "role", label: "Role", match: /title|role/i }, ]; /** Splits CSV text into rows, handling quoted cells with commas and escaped quotes. */ export function parseCsv(text: string) { const rows: string[][] = []; let row: string[] = []; let cell = ""; let quoted = false; for (let i = 0; i < text.length; i++) { const c = text[i]; if (quoted) { if (c === '"' && text[i + 1] === '"') (cell += '"'), i++; else if (c === '"') quoted = false; else cell += c; } else if (c === '"') quoted = true; else if (c === ",") row.push(cell), (cell = ""); else if (c === "\n" || c === "\r") { if (c === "\r" && text[i + 1] === "\n") i++; row.push(cell); rows.push(row); row = []; cell = ""; } else cell += c; } if (cell || row.length) row.push(cell), rows.push(row); return rows.filter((r) => r.some((x) => x.trim())); } const NONE = "__skip"; /** Upload a CSV, match its columns to fields (guessed from the headers), review rows with problems, then import. */ export function CsvImport({ onDone }: { onDone?: (count: number) => void }) { const [step, setStep] = useState(0); const [file, setFile] = useState<{ name: string; rows: string[][] } | null>(null); const [map, setMap] = useState>({}); const [skipBad, setSkipBad] = useState(true); const [progress, setProgress] = useState(0); const load = (name: string, text: string) => { const rows = parseCsv(text); setFile({ name, rows }); const headers = rows[0] ?? []; setMap(Object.fromEntries(FIELDS.map((f) => [f.id, String(headers.findIndex((h) => f.match.test(h)))]).map(([k, v]) => [k, v === "-1" ? NONE : v]))); setStep(1); }; const headers = file?.rows[0] ?? []; const body = file?.rows.slice(1) ?? []; const records = useMemo( () => body.map((r) => { const values = Object.fromEntries(FIELDS.map((f) => [f.id, map[f.id] && map[f.id] !== NONE ? (r[Number(map[f.id])] ?? "") : ""])); const errors = FIELDS.map((f) => (map[f.id] !== NONE ? f.check?.(values[f.id]) : f.required ? `${f.label} isn't mapped` : null)).filter(Boolean) as string[]; return { values, errors }; }), [body, map], ); const bad = records.filter((r) => r.errors.length).length; const missing = FIELDS.filter((f) => f.required && (!map[f.id] || map[f.id] === NONE)); const count = skipBad ? records.length - bad : records.length; useEffect(() => { if (step !== 3) return; setProgress(0); const id = setInterval(() => setProgress((p) => Math.min(100, p + 9 + Math.random() * 12)), 140); return () => clearInterval(id); }, [step]); return (

= 100 ? 4 : step} errors={step === 1 && missing.length ? [1] : undefined} className="mb-6" /> {step === 0 && (

f.text().then((t) => load(f.name, t))} className="flex-1"> {(dragging) => ( <>

{dragging ? "Drop your CSV" : "Drop a CSV or browse"}

One row per person, with a header row. Up to 10,000 rows.

)}

No file handy?{" "}

)} {step === 1 && file && (

We matched what we could from {file.name}. Check each field.

{FIELDS.map((f) => (

{f.label} {f.required && *} ←

))}

{missing.length > 0 &&

Choose a column for {missing.map((f) => f.label).join(" and ")}.

}

)} {step === 2 && (

{records.length - bad} ready {bad > 0 && ( <> {" · "} {bad} with problems )}

{bad > 0 && ( Skip rows with problems )}

{FIELDS.filter((f) => map[f.id] !== NONE).map((f) => ( ))} {records.map((r, i) => ( {FIELDS.filter((f) => map[f.id] !== NONE).map((f) => ( ))} ))}

{f.label}
{r.values[f.id] \|\| empty}	{r.errors.length ? : }

)} {step === 3 && (

{progress < 100 ? ( <>

Importing…

{Math.round((count * progress) / 100)} of {count}

) : ( <>

{count} people imported

{skipBad && bad ? `${bad} skipped because of problems.` : "Everything came through."}

{skipBad && bad > 0 && ( )}

)}

); } 44:T23624,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { AlertCircle, Check, Download, FileSpreadsheet } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { Button } from "@/components/scalar-ui/button";
import { Dropzone } from "@/components/scalar-ui/file-upload";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/scalar-ui/select";
import { Stepper } from "@/components/scalar-ui/stepper";
import { Switch } from "@/components/scalar-ui/switch";
import { cn } from "@/lib/utils";

const SAMPLE = `Full name,E-mail,Company,Job title
Maya Chen,maya@northwind.co,Northwind,Head of Product
Jon Park,jon@studio.dev,Studio,Engineer
Priya Raman,priya@fieldnote,Fieldnote,Designer
Daniel Okafor,daniel@lumen.io,Lumen,Founder
,sam@halcyon.so,Halcyon,Marketing
Ana Souza,ana@pathfinder.ai,Pathfinder,Ops lead
Lee Wong,lee@acme.com,Acme,Sales`;

type Field = { id: string; label: string; required?: boolean; match: RegExp; check?: (v: string) => string | null };

const FIELDS: Field[] = [
  { id: "name", label: "Name", required: true, match: /name/i, check: (v) => (v.trim() ? null : "Name is empty") },
  { id: "email", label: "Email", required: true, match: /mail/i, check: (v) => (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) ? null : "Email looks wrong") },
  { id: "company", label: "Company", match: /company|org/i },
  { id: "role", label: "Role", match: /title|role/i },
];

/** Splits CSV text into rows, handling quoted cells with commas and escaped quotes. */
export function parseCsv(text: string) {
  const rows: string[][] = [];
  let row: string[] = [];
  let cell = "";
  let quoted = false;
  for (let i = 0; i < text.length; i++) {
    const c = text[i];
    if (quoted) {
      if (c === '"' && text[i + 1] === '"') (cell += '"'), i++;
      else if (c === '"') quoted = false;
      else cell += c;
    } else if (c === '"') quoted = true;
    else if (c === ",") row.push(cell), (cell = "");
    else if (c === "\n" || c === "\r") {
      if (c === "\r" && text[i + 1] === "\n") i++;
      row.push(cell);
      rows.push(row);
      row = [];
      cell = "";
    } else cell += c;
  }
  if (cell || row.length) row.push(cell), rows.push(row);
  return rows.filter((r) => r.some((x) => x.trim()));
}

const NONE = "__skip";

/** Upload a CSV, match its columns to fields (guessed from the headers), review rows with problems, then import. */
export function CsvImport({ onDone }: { onDone?: (count: number) => void }) {
  const [step, setStep] = useState(0);
  const [file, setFile] = useState<{ name: string; rows: string[][] } | null>(null);
  const [map, setMap] = useState<Record<string, string>>({});
  const [skipBad, setSkipBad] = useState(true);
  const [progress, setProgress] = useState(0);

  const load = (name: string, text: string) => {
    const rows = parseCsv(text);
    setFile({ name, rows });
    const headers = rows[0] ?? [];
    setMap(Object.fromEntries(FIELDS.map((f) => [f.id, String(headers.findIndex((h) => f.match.test(h)))]).map(([k, v]) => [k, v === "-1" ? NONE : v])));
    setStep(1);
  };
  const headers = file?.rows[0] ?? [];
  const body = file?.rows.slice(1) ?? [];
  const records = useMemo(
    () =>
      body.map((r) => {
        const values = Object.fromEntries(FIELDS.map((f) => [f.id, map[f.id] && map[f.id] !== NONE ? (r[Number(map[f.id])] ?? "") : ""]));
        const errors = FIELDS.map((f) => (map[f.id] !== NONE ? f.check?.(values[f.id]) : f.required ? `${f.label} isn't mapped` : null)).filter(Boolean) as string[];
        return { values, errors };
      }),
    [body, map],
  );
  const bad = records.filter((r) => r.errors.length).length;
  const missing = FIELDS.filter((f) => f.required && (!map[f.id] || map[f.id] === NONE));
  const count = skipBad ? records.length - bad : records.length;

  useEffect(() => {
    if (step !== 3) return;
    setProgress(0);
    const id = setInterval(() => setProgress((p) => Math.min(100, p + 9 + Math.random() * 12)), 140);
    return () => clearInterval(id);
  }, [step]);

  return (
    <div className="@container flex h-full flex-col">
      <Stepper steps={[{ title: "Upload" }, { title: "Match columns" }, { title: "Review" }, { title: "Import" }]} current={progress >= 100 ? 4 : step} errors={step === 1 && missing.length ? [1] : undefined} className="mb-6" />
      <AnimatePresence mode="wait" initial={false}>
        <motion.div key={step} initial={{ opacity: 0, x: 12 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -12 }} transition={{ type: "spring", bounce: 0, duration: 0.3 }} className="flex min-h-0 flex-1 flex-col">
          {step === 0 && (
            <div className="flex flex-1 flex-col gap-3">
              <Dropzone accept=".csv,text/csv" multiple={false} onFiles={([f]) => f.text().then((t) => load(f.name, t))} className="flex-1">
                {(dragging) => (
                  <>
                    <span className="mb-2 flex size-11 items-center justify-center rounded-[13px] bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
                      <FileSpreadsheet className="size-5" />
                    </span>
                    <p className="text-[13.5px] font-medium text-neutral-900 dark:text-white">{dragging ? "Drop your CSV" : "Drop a CSV or browse"}</p>
                    <p className="text-[12px] text-neutral-500">One row per person, with a header row. Up to 10,000 rows.</p>
                  </>
                )}
              </Dropzone>
              <p className="text-center text-[12.5px] text-neutral-500">
                No file handy?{" "}
                <button type="button" onClick={() => load("contacts-sample.csv", SAMPLE)} className="font-medium text-neutral-900 underline decoration-neutral-950/20 underline-offset-4 dark:text-white">
                  Use a sample file
                </button>
              </p>
            </div>
          )}
          {step === 1 && file && (
            <div className="flex flex-1 flex-col">
              <p className="mb-3 text-[13px] text-neutral-500">
                We matched what we could from <b className="font-medium text-neutral-900 dark:text-white">{file.name}</b>. Check each field.
              </p>
              <div className="divide-y divide-black/[0.05] rounded-[16px] ring-1 ring-black/[0.07] dark:divide-white/[0.06] dark:ring-white/[0.08]">
                {FIELDS.map((f) => (
                  <div key={f.id} className="flex items-center gap-3 px-3.5 py-2.5">
                    <span className="w-24 shrink-0 text-[13px] font-medium text-neutral-900 dark:text-white">
                      {f.label}
                      {f.required && <span className="text-red-500"> *</span>}
                    </span>
                    <span className="text-neutral-300 dark:text-neutral-600">←</span>
                    <Select value={map[f.id] ?? NONE} onValueChange={(v) => setMap((m) => ({ ...m, [f.id]: v }))}>
                      <SelectTrigger size="sm" aria-label={`Column for ${f.label}`} invalid={f.required && map[f.id] === NONE} className="flex-1">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value={NONE}>Don't import</SelectItem>
                        {headers.map((h, i) => (
                          <SelectItem key={i} value={String(i)} description={`e.g. ${body[0]?.[i] || "—"}`}>
                            {h}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                ))}
              </div>
              {missing.length > 0 && <p className="mt-2 text-[12px] text-red-600 dark:text-red-400">Choose a column for {missing.map((f) => f.label).join(" and ")}.</p>}
              <div className="mt-auto flex justify-between pt-5">
                <Button variant="ghost" onClick={() => setStep(0)}>
                  Back
                </Button>
                <Button onClick={() => setStep(2)} disabled={missing.length > 0}>
                  Review {body.length} rows
                </Button>
              </div>
            </div>
          )}
          {step === 2 && (
            <div className="flex min-h-0 flex-1 flex-col">
              <div className="mb-3 flex flex-wrap items-center gap-x-4 gap-y-2">
                <p className="text-[13px] text-neutral-700 dark:text-neutral-300">
                  <b className="font-semibold">{records.length - bad}</b> ready
                  {bad > 0 && (
                    <>
                      {" · "}
                      <b className="font-semibold text-red-600 dark:text-red-400">{bad}</b> with problems
                    </>
                  )}
                </p>
                {bad > 0 && (
                  <label className="ml-auto flex items-center gap-2 text-[12.5px] text-neutral-600 dark:text-neutral-400">
                    Skip rows with problems
                    <Switch size="sm" checked={skipBad} onCheckedChange={setSkipBad} />
                  </label>
                )}
              </div>
              <div className="min-h-0 flex-1 overflow-auto rounded-[14px] ring-1 ring-black/[0.07] dark:ring-white/[0.08]">
                <table className="w-full text-left text-[12.5px]">
                  <thead className="sticky top-0 bg-neutral-50 text-neutral-500 dark:bg-neutral-900">
                    <tr>
                      {FIELDS.filter((f) => map[f.id] !== NONE).map((f) => (
                        <th key={f.id} className="px-3 py-2 font-medium">
                          {f.label}
                        </th>
                      ))}
                      <th className="w-8" />
                    </tr>
                  </thead>
                  <tbody>
                    {records.map((r, i) => (
                      <tr key={i} className={cn("border-t border-black/[0.05] dark:border-white/[0.06]", r.errors.length && "bg-red-50/70 dark:bg-red-500/[0.07]", r.errors.length && skipBad && "opacity-50")}>
                        {FIELDS.filter((f) => map[f.id] !== NONE).map((f) => (
                          <td key={f.id} className={cn("max-w-[160px] truncate px-3 py-2 text-neutral-800 dark:text-neutral-200", f.check?.(r.values[f.id]) && "text-red-600 dark:text-red-400")}>
                            {r.values[f.id] || <span className="text-neutral-400">empty</span>}
                          </td>
                        ))}
                        <td className="px-2">{r.errors.length ? <AlertCircle className="size-3.5 text-red-500" aria-label={r.errors.join(", ")} /> : <Check className="size-3.5 text-emerald-500" />}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <div className="flex justify-between pt-4">
                <Button variant="ghost" onClick={() => setStep(1)}>
                  Back
                </Button>
                <Button onClick={() => setStep(3)} disabled={count === 0}>
                  Import {count} {count === 1 ? "person" : "people"}
                </Button>
              </div>
            </div>
          )}
          {step === 3 && (
            <div className="flex flex-1 flex-col items-center justify-center text-center">
              {progress < 100 ? (
                <>
                  <p className="text-[14px] font-semibold text-neutral-950 dark:text-white">Importing…</p>
                  <div className="mt-3 h-1.5 w-full max-w-[280px] overflow-hidden rounded-full bg-neutral-950/[0.07] dark:bg-white/[0.1]">
                    <motion.div className="h-full rounded-full bg-neutral-950 dark:bg-white" animate={{ width: `${progress}%` }} transition={{ type: "spring", bounce: 0, duration: 0.3 }} />
                  </div>
                  <p className="mt-2 text-[12px] tabular-nums text-neutral-500">
                    {Math.round((count * progress) / 100)} of {count}
                  </p>
                </>
              ) : (
                <>
                  <motion.span initial={{ scale: 0.5, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} transition={{ type: "spring", bounce: 0.45, duration: 0.5 }} className="mb-3 flex size-11 items-center justify-center rounded-full bg-emerald-500 text-white">
                    <Check className="size-5" strokeWidth={2.5} />
                  </motion.span>
                  <p className="text-[15px] font-semibold text-neutral-950 dark:text-white">{count} people imported</p>
                  <p className="mt-1 text-[12.5px] text-neutral-500">{skipBad && bad ? `${bad} skipped because of problems.` : "Everything came through."}</p>
                  <div className="mt-5 flex gap-2">
                    {skipBad && bad > 0 && (
                      <Button variant="outline" size="sm">
                        <Download />
                        Skipped rows
                      </Button>
                    )}
                    <Button size="sm" onClick={() => (onDone?.(count), setStep(0), setFile(null))}>
                      Done
                    </Button>
                  </div>
                </>
              )}
            </div>
          )}
        </motion.div>
      </AnimatePresence>
    </div>
  );
}

45:Tf1f,"use client"; import { Download, Monitor, Puzzle, Smartphone } from "lucide-react"; import type { ReactNode } from "react"; import { Button } from "@/components/scalar-ui/button"; function hash(s: string) { let h = 2166136261; for (const c of s) h = Math.imul(h ^ c.charCodeAt(0), 16777619); return h >>> 0; } /** A QR-looking pattern for mockups. Use a real QR library for a code people will scan. */ export function FakeQr({ value, size = 112 }: { value: string; size?: number }) { const n = 21; let seed = hash(value); const rand = () => ((seed = Math.imul(seed ^ (seed >>> 15), 2246822507) >>> 0), seed / 4294967296); const cells: [number, number][] = []; for (let y = 0; y < n; y++) for (let x = 0; x < n; x++) { const inFinder = (x < 8 && y < 8) || (x > n - 9 && y < 8) || (x < 8 && y > n - 9); if (!inFinder && rand() > 0.52) cells.push([x, y]); } const eye = (x: number, y: number) => ( ); return ( ); } function Card({ icon, title, body, children }: { icon: ReactNode; title: string; body: string; children: ReactNode }) { return (

{icon}

{title}

{body}

{children}

); } /** Desktop, phone and browser extension downloads, with a code to scan from the phone. */ export function GetApps() { return (

} title="Desktop" body="Notifications and ⌘K from anywhere on your computer.">

} title="Phone" body="Reply to comments and approve requests on the go.">

Point your phone's camera here to get the app.

} title="Browser extension" body="Save any page or email as a task in one click.">

); } 46:Tca6d,

"use client";

import { Download, Monitor, Puzzle, Smartphone } from "lucide-react";
import type { ReactNode } from "react";
import { Button } from "@/components/scalar-ui/button";

function hash(s: string) {
  let h = 2166136261;
  for (const c of s) h = Math.imul(h ^ c.charCodeAt(0), 16777619);
  return h >>> 0;
}

/** A QR-looking pattern for mockups. Use a real QR library for a code people will scan. */
export function FakeQr({ value, size = 112 }: { value: string; size?: number }) {
  const n = 21;
  let seed = hash(value);
  const rand = () => ((seed = Math.imul(seed ^ (seed >>> 15), 2246822507) >>> 0), seed / 4294967296);
  const cells: [number, number][] = [];
  for (let y = 0; y < n; y++)
    for (let x = 0; x < n; x++) {
      const inFinder = (x < 8 && y < 8) || (x > n - 9 && y < 8) || (x < 8 && y > n - 9);
      if (!inFinder && rand() > 0.52) cells.push([x, y]);
    }
  const eye = (x: number, y: number) => (
    <g key={`${x}-${y}`}>
      <rect x={x} y={y} width={7} height={7} rx={1.6} className="fill-neutral-950 dark:fill-white" />
      <rect x={x + 1} y={y + 1} width={5} height={5} rx={1.1} className="fill-white dark:fill-neutral-900" />
      <rect x={x + 2} y={y + 2} width={3} height={3} rx={0.7} className="fill-neutral-950 dark:fill-white" />
    </g>
  );
  return (
    <svg viewBox={`-1 -1 ${n + 2} ${n + 2}`} width={size} height={size} role="img" aria-label="QR code">
      {cells.map(([x, y]) => (
        <rect key={`${x}.${y}`} x={x + 0.08} y={y + 0.08} width={0.84} height={0.84} rx={0.25} className="fill-neutral-950 dark:fill-white" />
      ))}
      {eye(0, 0)}
      {eye(n - 7, 0)}
      {eye(0, n - 7)}
    </svg>
  );
}

function Card({ icon, title, body, children }: { icon: ReactNode; title: string; body: string; children: ReactNode }) {
  return (
    <div className="flex flex-col rounded-[18px] bg-white p-4 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.07] dark:bg-white/[0.03] dark:ring-white/[0.08]">
      <span className="mb-3 flex size-9 items-center justify-center rounded-[11px] bg-neutral-950/[0.05] text-neutral-700 dark:bg-white/[0.08] dark:text-neutral-200 [&_svg]:size-4">{icon}</span>
      <p className="text-[13.5px] font-semibold text-neutral-950 dark:text-white">{title}</p>
      <p className="mb-4 mt-0.5 text-[12.5px] text-neutral-500">{body}</p>
      <div className="mt-auto">{children}</div>
    </div>
  );
}

/** Desktop, phone and browser extension downloads, with a code to scan from the phone. */
export function GetApps() {
  return (
    <div className="@container">
      <div className="grid gap-3 @[640px]:grid-cols-3">
        <Card icon={<Monitor />} title="Desktop" body="Notifications and ⌘K from anywhere on your computer.">
          <div className="flex flex-col gap-2">
            <Button size="sm" className="w-full">
              <Download />
              Download for Mac
            </Button>
            <Button size="sm" variant="ghost" className="w-full">
              Windows and Linux
            </Button>
          </div>
        </Card>
        <Card icon={<Smartphone />} title="Phone" body="Reply to comments and approve requests on the go.">
          <div className="flex items-center gap-3">
            <span className="rounded-[12px] bg-white p-1.5 ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.1]">
              <FakeQr value="northwind-mobile" size={84} />
            </span>
            <span className="text-[12px] leading-snug text-neutral-500">Point your phone's camera here to get the app.</span>
          </div>
        </Card>
        <Card icon={<Puzzle />} title="Browser extension" body="Save any page or email as a task in one click.">
          <Button size="sm" variant="outline" className="w-full">
            Add to browser
          </Button>
        </Card>
      </div>
    </div>
  );
}

47:Tb40,

"use client";

import { OnboardingWizard } from "@/components/scalar-ui/onboarding";

export default function Demo() {
  return (
    <div className="h-[760px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <OnboardingWizard className="h-full" />
    </div>
  );
}

48:T10de,

"use client";

import { OnboardingWizard } from "@/components/scalar-ui/onboarding";

export default function Example() {
  return (
    <div className="mx-auto h-[720px] w-[390px] max-w-full overflow-hidden rounded-[36px] ring-[6px] ring-neutral-900 dark:ring-neutral-700">
      <OnboardingWizard className="h-full" defaultStep={2} initial={{ name: "Maya Chen", role: "Product", workspace: "Northwind", slug: "northwind-hq", slugTouched: true }} />
    </div>
  );
}

49:T1d68,

"use client";

import { useState } from "react";
import { TemplatePicker } from "@/components/scalar-ui/onboarding/template-picker";

export default function Example() {
  const [used, setUsed] = useState<string | null>(null);
  return (
    <div className="flex h-[520px] w-full flex-col rounded-[22px] bg-white p-5 ring-1 ring-black/[0.06] dark:bg-neutral-950 dark:ring-white/[0.08]">
      <p className="text-[18px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">Start with a template</p>
      <p className="mb-4 text-[12.5px] text-neutral-500">{used ? `Creating “${used}”…` : "Pick one to see it. Double-click to use it straight away."}</p>
      <div className="min-h-0 flex-1">
        <TemplatePicker onUse={(t) => setUsed(t.name)} />
      </div>
    </div>
  );
}

4a:T58d,"use client"; import { useState } from "react"; import { GettingStartedChecklist } from "@/components/scalar-ui/onboarding/checklist"; import { TASKS } from "@/components/scalar-ui/onboarding/data"; export default function Example() { const [done, setDone] = useState(["profile"]); const [hidden, setHidden] = useState(false); const act = (id: string) => setTimeout(() => setDone((d) => (d.includes(id) ? d : [...d, id])), 500); return (

{hidden ? ( ) : ( act(t.id)} onDismiss={() => setHidden(true)} /> )}

In the sidebar

act(t.id)} />

); } 4b:T3fdc,

"use client";

import { useState } from "react";
import { GettingStartedChecklist } from "@/components/scalar-ui/onboarding/checklist";
import { TASKS } from "@/components/scalar-ui/onboarding/data";

export default function Example() {
  const [done, setDone] = useState<string[]>(["profile"]);
  const [hidden, setHidden] = useState(false);
  const act = (id: string) => setTimeout(() => setDone((d) => (d.includes(id) ? d : [...d, id])), 500);
  return (
    <div className="grid w-[min(100%,720px)] items-start gap-5 sm:grid-cols-[1fr_220px]">
      {hidden ? (
        <button type="button" onClick={() => setHidden(false)} className="rounded-[16px] border-[1.5px] border-dashed border-black/[0.12] p-6 text-[13px] text-neutral-500 dark:border-white/[0.14]">
          Checklist hidden. Show it again
        </button>
      ) : (
        <GettingStartedChecklist tasks={TASKS} done={done} onAction={(t) => act(t.id)} onDismiss={() => setHidden(true)} />
      )}
      <div className="flex flex-col gap-2">
        <p className="px-1 text-[11.5px] font-medium text-neutral-400">In the sidebar</p>
        <GettingStartedChecklist variant="compact" tasks={TASKS} done={done} onAction={(t) => act(t.id)} />
        <button type="button" onClick={() => setDone([])} className="self-start px-1 text-[12px] text-neutral-500 underline underline-offset-4">
          Reset
        </button>
      </div>
    </div>
  );
}

4c:T1035,"use client"; import { Bell, Home, Inbox, Plus, Search, Settings } from "lucide-react"; import { useRef, useState } from "react"; import { Button } from "@/components/scalar-ui/button"; import { ProductTour, TourHint, type TourStep } from "@/components/scalar-ui/onboarding/tour"; const STEPS: TourStep[] = [ { target: '[data-tour="search"]', title: "Find anything", body: "Search projects, people and docs. Press ⌘K from anywhere to open it." }, { target: '[data-tour="new"]', title: "Start a project", body: "Create a blank board or start from one of the templates." }, { target: '[data-tour="inbox"]', title: "Your inbox", body: "Mentions, assignments and approvals land here, newest first." }, { target: '[data-tour="board"]', title: "Your board", body: "Drag cards between columns. Everyone sees changes as they happen." }, ]; export default function Example() { const ref = useRef(null); const [open, setOpen] = useState(true); return (

Website relaunch

{["To do", "Doing", "Done"].map((c, i) => (

{c}

{Array.from({ length: 3 - i }, (_, k) => (

))}

{!open && (

)}

); } 4d:T82e5,

"use client";

import { Bell, Home, Inbox, Plus, Search, Settings } from "lucide-react";
import { useRef, useState } from "react";
import { Button } from "@/components/scalar-ui/button";
import { ProductTour, TourHint, type TourStep } from "@/components/scalar-ui/onboarding/tour";

const STEPS: TourStep[] = [
  { target: '[data-tour="search"]', title: "Find anything", body: "Search projects, people and docs. Press ⌘K from anywhere to open it." },
  { target: '[data-tour="new"]', title: "Start a project", body: "Create a blank board or start from one of the templates." },
  { target: '[data-tour="inbox"]', title: "Your inbox", body: "Mentions, assignments and approvals land here, newest first." },
  { target: '[data-tour="board"]', title: "Your board", body: "Drag cards between columns. Everyone sees changes as they happen." },
];

export default function Example() {
  const ref = useRef<HTMLDivElement>(null);
  const [open, setOpen] = useState(true);
  return (
    <div ref={ref} className="relative flex h-[520px] w-full overflow-hidden rounded-[18px] bg-white ring-1 ring-black/[0.08] dark:bg-neutral-950 dark:ring-white/[0.1]">
      <aside className="flex w-[200px] shrink-0 flex-col gap-1 border-r border-black/[0.06] bg-neutral-50/70 p-3 text-[13px] dark:border-white/[0.08] dark:bg-white/[0.02]">
        <p className="mb-2 px-2 font-semibold text-neutral-950 dark:text-white">Northwind</p>
        <div data-tour="search" className="flex h-8 items-center gap-2 rounded-[9px] bg-white px-2 text-neutral-400 ring-1 ring-black/[0.07] dark:bg-white/[0.05] dark:ring-white/[0.08]">
          <Search className="size-3.5" /> Search
        </div>
        <span className="flex h-8 items-center gap-2 rounded-[9px] bg-neutral-950/[0.05] px-2 font-medium text-neutral-900 dark:bg-white/[0.08] dark:text-white">
          <Home className="size-4" /> Home
        </span>
        <span data-tour="inbox" className="flex h-8 items-center gap-2 rounded-[9px] px-2 text-neutral-600 dark:text-neutral-400">
          <Inbox className="size-4" /> Inbox <span className="ml-auto rounded-full bg-neutral-950 px-1.5 text-[10.5px] text-white dark:bg-white dark:text-neutral-950">3</span>
        </span>
        <span className="flex h-8 items-center gap-2 rounded-[9px] px-2 text-neutral-600 dark:text-neutral-400">
          <Settings className="size-4" /> Settings
        </span>
      </aside>
      <main className="flex min-w-0 flex-1 flex-col">
        <header className="flex h-12 items-center justify-between border-b border-black/[0.06] px-4 dark:border-white/[0.08]">
          <p className="text-[14px] font-semibold text-neutral-950 dark:text-white">Website relaunch</p>
          <div className="flex items-center gap-2">
            <span className="relative">
              <Bell className="size-4 text-neutral-500" />
              <TourHint title="Notifications" body="Choose what you hear about in Settings → Notifications." className="-right-2 -top-2" />
            </span>
            <span data-tour="new">
              <Button size="sm">
                <Plus />
                New project
              </Button>
            </span>
          </div>
        </header>
        <div data-tour="board" className="grid flex-1 grid-cols-3 gap-3 p-4">
          {["To do", "Doing", "Done"].map((c, i) => (
            <div key={c} className="flex flex-col gap-2 rounded-[14px] bg-neutral-50 p-2.5 dark:bg-white/[0.03]">
              <p className="px-1 text-[12px] font-medium text-neutral-500">{c}</p>
              {Array.from({ length: 3 - i }, (_, k) => (
                <div key={k} className="h-14 rounded-[10px] bg-white ring-1 ring-black/[0.05] dark:bg-white/[0.05] dark:ring-white/[0.06]" />
              ))}
            </div>
          ))}
        </div>
        {!open && (
          <div className="absolute bottom-4 right-4">
            <Button size="sm" variant="outline" onClick={() => setOpen(true)}>
              Replay tour
            </Button>
          </div>
        )}
      </main>
      <ProductTour steps={STEPS} open={open} onOpenChange={setOpen} containerRef={ref} />
    </div>
  );
}

4e:T7bb,"use client"; import { Megaphone } from "lucide-react"; import { useEffect, useState } from "react"; import { Button } from "@/components/scalar-ui/button"; import { RELEASES } from "@/components/scalar-ui/onboarding/data"; import { WelcomeDialog, WhatsNewDialog } from "@/components/scalar-ui/onboarding/welcome"; export default function Example() { const [welcome, setWelcome] = useState(false); const [news, setNews] = useState(false); const [toured, setToured] = useState(false); useEffect(() => { const t = setTimeout(() => setWelcome(true), 600); return () => clearTimeout(t); }, []); return (

Northwind

{[0, 1, 2].map((i) => (

))}

{toured ? "The tour would start here." : ( )}

setToured(true)} />

); } 4f:T50d4,

"use client";

import { Megaphone } from "lucide-react";
import { useEffect, useState } from "react";
import { Button } from "@/components/scalar-ui/button";
import { RELEASES } from "@/components/scalar-ui/onboarding/data";
import { WelcomeDialog, WhatsNewDialog } from "@/components/scalar-ui/onboarding/welcome";

export default function Example() {
  const [welcome, setWelcome] = useState(false);
  const [news, setNews] = useState(false);
  const [toured, setToured] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setWelcome(true), 600);
    return () => clearTimeout(t);
  }, []);
  return (
    <div className="flex h-[620px] w-full flex-col overflow-hidden rounded-[18px] bg-white ring-1 ring-black/[0.08] dark:bg-neutral-950 dark:ring-white/[0.1]">
      <header className="flex h-12 items-center justify-between border-b border-black/[0.06] px-4 dark:border-white/[0.08]">
        <p className="text-[14px] font-semibold text-neutral-950 dark:text-white">Northwind</p>
        <Button size="sm" variant="ghost" onClick={() => setNews(true)}>
          <Megaphone />
          What's new
          <span className="size-1.5 rounded-full bg-sky-500" />
        </Button>
      </header>
      <div className="grid flex-1 grid-cols-3 gap-3 p-5">
        {[0, 1, 2].map((i) => (
          <div key={i} className="rounded-[14px] bg-neutral-50 ring-1 ring-black/[0.04] dark:bg-white/[0.03] dark:ring-white/[0.06]" />
        ))}
      </div>
      <p className="pb-4 text-center text-[12px] text-neutral-500">
        {toured ? "The tour would start here." : (
          <button type="button" onClick={() => setWelcome(true)} className="underline underline-offset-4">
            Show the welcome again
          </button>
        )}
      </p>
      <WelcomeDialog open={welcome} onOpenChange={setWelcome} name="Maya" onTour={() => setToured(true)} />
      <WhatsNewDialog open={news} onOpenChange={setNews} releases={RELEASES} />
    </div>
  );
}

50:Ta7c,

"use client";

import { FirstRun } from "@/components/scalar-ui/onboarding/first-run";

export default function Example() {
  return (
    <div className="h-[460px] w-full rounded-[22px] bg-white p-6 ring-1 ring-black/[0.06] dark:bg-neutral-950 dark:ring-white/[0.08]">
      <FirstRun />
    </div>
  );
}

51:T129c,

"use client";

import { CsvImport } from "@/components/scalar-ui/onboarding/csv-import";

export default function Example() {
  return (
    <div className="h-[560px] w-[min(100%,680px)] rounded-[22px] bg-white p-6 shadow-[0_1px_2px_rgb(0_0_0/0.04),0_12px_32px_-16px_rgb(0_0_0/0.12)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]">
      <p className="text-[16px] font-semibold text-neutral-950 dark:text-white">Import contacts</p>
      <p className="mb-5 text-[12.5px] text-neutral-500">Bring your people in from a spreadsheet.</p>
      <div className="h-[calc(100%-64px)]">
        <CsvImport />
      </div>
    </div>
  );
}

52:Tf32,

"use client";

import { GetApps } from "@/components/scalar-ui/onboarding/get-apps";

export default function Example() {
  return (
    <div className="w-[min(100%,760px)]">
      <p className="text-[16px] font-semibold text-neutral-950 dark:text-white">Get Northwind everywhere</p>
      <p className="mb-4 text-[12.5px] text-neutral-500">Your work syncs across all of them.</p>
      <GetApps />
    </div>
  );
}

29:["$","section","onboarding",{"id":"onboarding","aria-labelledby":"onboarding-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"onboarding-title","className":"sr-only","children":"Onboarding"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · motion · lucide-react"}]]}],false]}],["$","$L2d",null,{"children":["$","$L2e",null,{"slug":"onboarding","gated":{"unlocked":true,"files":[{"name":"onboarding.tsx","code":"$2f","html":"$30"},{"name":"onboarding/data.ts","code":"$31","html":"$32"},{"name":"onboarding/onboarding-ui.tsx","code":"$33","html":"$34"},{"name":"onboarding/steps.tsx","code":"$35","html":"$36"},{"name":"onboarding/preview.tsx","code":"$37","html":"$38"},{"name":"onboarding/template-picker.tsx","code":"$39","html":"$3a"},{"name":"onboarding/checklist.tsx","code":"$3b","html":"$3c"},{"name":"onboarding/tour.tsx","code":"$3d","html":"$3e"},{"name":"onboarding/welcome.tsx","code":"$3f","html":"$40"},{"name":"onboarding/first-run.tsx","code":"$41","html":"$42"},{"name":"onboarding/csv-import.tsx","code":"$43","html":"$44"},{"name":"onboarding/get-apps.tsx","code":"$45","html":"$46"},{"name":"demo.tsx","code":"\"use client\";\n\nimport { OnboardingWizard } from \"@/components/scalar-ui/onboarding\";\n\nexport default function Demo() {\n return (\n

\n \n

\n );\n}\n","html":"$47"}],"examples":{"phone":{"name":"phone.tsx","code":"\"use client\";\n\nimport { OnboardingWizard } from \"@/components/scalar-ui/onboarding\";\n\nexport default function Example() {\n return (\n

\n \n

\n );\n}\n","html":"$48"},"template-picker":{"name":"template-picker.tsx","code":"\"use client\";\n\nimport { useState } from \"react\";\nimport { TemplatePicker } from \"@/components/scalar-ui/onboarding/template-picker\";\n\nexport default function Example() {\n const [used, setUsed] = useState(null);\n return (\n

Start with a template

{used ? `Creating “${used}”…` : \"Pick one to see it. Double-click to use it straight away.\"}

\n setUsed(t.name)} />\n

\n );\n}\n","html":"$49"},"checklist":{"name":"checklist.tsx","code":"$4a","html":"$4b"},"product-tour":{"name":"product-tour.tsx","code":"$4c","html":"$4d"},"welcome":{"name":"welcome.tsx","code":"$4e","html":"$4f"},"first-run":{"name":"first-run.tsx","code":"\"use client\";\n\nimport { FirstRun } from \"@/components/scalar-ui/onboarding/first-run\";\n\nexport default function Example() {\n return (\n

\n \n

\n );\n}\n","html":"$50"},"csv-import":{"name":"csv-import.tsx","code":"\"use client\";\n\nimport { CsvImport } from \"@/components/scalar-ui/onboarding/csv-import\";\n\nexport default function Example() {\n return (\n

Import contacts

Bring your people in from a spreadsheet.

\n \n

\n );\n}\n","html":"$51"},"get-apps":{"name":"get-apps.tsx","code":"\"use client\";\n\nimport { GetApps } from \"@/components/scalar-ui/onboarding/get-apps\";\n\nexport default function Example() {\n return (\n

Get Northwind everywhere

Your work syncs across all of them.

\n \n

\n );\n}\n","html":"$52"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add onboarding","shadcn":"npx shadcn@latest add https://scalarui.com/r/onboarding.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui motion lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L53","toolbar":"$L54"}]}],["$L55","$L56","$L57","$L58","$L59","$L5a","$L5b","$L5c"]]}]