@locusai/web 0.1.7 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @locusai/web
 
+## 0.2.2
+
+### Patch Changes
+
+- Fix package builds
+- Updated dependencies
+  - @locusai/sdk@0.2.2
+  - @locusai/shared@0.2.2
+
+## 0.2.1
+
+### Patch Changes
+
+- Update app versions
+- Updated dependencies
+  - @locusai/sdk@0.2.1
+  - @locusai/shared@0.2.1
+
+## 0.1.8
+
+### Patch Changes
+
+- Updated dependencies [52d35dd]
+  - @locusai/sdk@0.2.0
+  - @locusai/shared@0.2.0
+
 ## 0.1.7
 
 ### Patch Changes

package/next.config.js

@@ -1,10 +1,23 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: "export",
-  transpilePackages: ["@locusai/shared"],
+  transpilePackages: ["@locusai/shared", "@locusai/sdk"],
   images: {
     unoptimized: true,
   },
+  webpack: (config, { isServer }) => {
+    // Externalize Node.js-only dependencies from browser bundle
+    if (!isServer) {
+      config.resolve.fallback = {
+        ...config.resolve.fallback,
+        fs: false,
+        child_process: false,
+        "node:fs": false,
+        "node:child_process": false,
+        "node:path": false,
+      };
+    }
+    return config;
+  },
 };
 
 export default nextConfig;

package/package.json

@@ -1,34 +1,57 @@
 {
   "name": "@locusai/web",
-  "version": "0.1.7",
+  "version": "0.2.2",
   "type": "module",
   "scripts": {
-    "dev": "next dev -p 3081",
+    "dev": "next dev -p 3000",
     "build": "next build",
     "start": "next start",
     "lint": "biome lint .",
     "typecheck": "tsc -b --noEmit"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@locusai/sdk": "workspace:*",
     "@locusai/shared": "workspace:*",
+    "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-query": "^5.90.18",
     "@tanstack/react-query-devtools": "^5.91.2",
-    "@uiw/react-md-editor": "^4.0.4",
+    "@tiptap/extension-code-block": "^3.15.3",
+    "@tiptap/extension-code-block-lowlight": "^3.15.3",
+    "@tiptap/extension-color": "^3.15.3",
+    "@tiptap/extension-highlight": "^3.15.3",
+    "@tiptap/extension-link": "^3.15.3",
+    "@tiptap/extension-placeholder": "^3.15.3",
+    "@tiptap/extension-task-item": "^3.15.3",
+    "@tiptap/extension-task-list": "^3.15.3",
+    "@tiptap/extension-text-style": "^3.15.3",
+    "@tiptap/extension-typography": "^3.15.3",
+    "@tiptap/pm": "^3.15.3",
+    "@tiptap/react": "^3.15.3",
+    "@tiptap/starter-kit": "^3.15.3",
     "axios": "^1.13.2",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "framer-motion": "^12.26.2",
+    "html-react-parser": "^5.2.11",
+    "lowlight": "^3.3.0",
     "lucide-react": "^0.453.0",
     "next": "15.4.10",
     "react": "^19.0.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^19.0.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
+    "tiptap-markdown": "^0.9.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.18",
     "@types/node": "^22.10.7",
     "@types/react": "^19.0.0",
+    "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^19.0.0",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",

package/src/app/(auth)/invite/page.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { Suspense } from "react";
+import {
+  InviteEmailDisplay,
+  InviteErrorState,
+  InviteExistingUserForm,
+  InviteFooter,
+  InviteHeader,
+  InviteLoadingState,
+  InviteLoggedInMessage,
+  InviteNewAccountForm,
+  InviteUserExistsMessage,
+} from "@/components/auth/InviteSteps";
+import { Spinner } from "@/components/ui";
+import { useInviteForm } from "@/hooks/useInviteForm";
+
+function InviteContent() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const token = searchParams.get("token");
+
+  const {
+    invitation,
+    userExists,
+    loading,
+    error,
+    name,
+    isSubmitting,
+    isLoggingInAsInvitedUser,
+    setName,
+    handleJoin,
+  } = useInviteForm(token);
+
+  if (loading) {
+    return <InviteLoadingState />;
+  }
+
+  if (error) {
+    return <InviteErrorState error={error} onGoHome={() => router.push("/")} />;
+  }
+
+  if (!invitation) {
+    return (
+      <InviteErrorState
+        error="Invitation not found"
+        onGoHome={() => router.push("/")}
+      />
+    );
+  }
+
+  return (
+    <div className="max-w-sm mx-auto py-10 px-4">
+      <InviteHeader />
+
+      <div className="bg-card border border-border/40 rounded-3xl p-6 shadow-xl space-y-5">
+        <InviteEmailDisplay email={invitation.email} />
+
+        {userExists && !isLoggingInAsInvitedUser ? (
+          <InviteUserExistsMessage
+            onSignIn={() =>
+              router.push(
+                `/login?email=${encodeURIComponent(invitation.email)}&redirect=${encodeURIComponent(window.location.href)}`
+              )
+            }
+          />
+        ) : (
+          <>
+            {!userExists && (
+              <InviteNewAccountForm
+                name={name}
+                loading={isSubmitting}
+                onNameChange={setName}
+                onSubmit={handleJoin}
+              />
+            )}
+
+            {userExists && isLoggingInAsInvitedUser && (
+              <>
+                <InviteLoggedInMessage userName={invitation.email} />
+                <InviteExistingUserForm
+                  loading={isSubmitting}
+                  onSubmit={handleJoin}
+                />
+              </>
+            )}
+          </>
+        )}
+      </div>
+
+      <InviteFooter />
+    </div>
+  );
+}
+
+export default function InvitePage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex items-center justify-center min-h-screen">
+          <Spinner size="lg" />
+        </div>
+      }
+    >
+      <InviteContent />
+    </Suspense>
+  );
+}

package/src/app/(auth)/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { AuthLayoutUI } from "@/components";
+import { LoadingPage } from "@/components/ui";
+import { useAuthLayoutLogic } from "@/hooks";
+
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { isLoading } = useAuthLayoutLogic();
+
+  if (isLoading) {
+    return <LoadingPage />;
+  }
+
+  return <AuthLayoutUI>{children}</AuthLayoutUI>;
+}

package/src/app/(auth)/login/page.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import Link from "next/link";
+import { LoginEmailStep, LoginOtpStep } from "@/components/auth/LoginSteps";
+import { useLoginForm } from "@/hooks/useLoginForm";
+
+export default function LoginPage() {
+  const {
+    step,
+    email,
+    otp,
+    loading,
+    setEmail,
+    setOtp,
+    handleSendOtp,
+    handleVerify,
+    goBackToEmail,
+  } = useLoginForm();
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div className="space-y-2 text-center">
+        <h2 className="text-2xl font-bold tracking-tight text-foreground">
+          Sign in
+        </h2>
+        <p className="text-sm text-muted-foreground/80">
+          {step === "email"
+            ? "Enter your email to access your workspace"
+            : `We've sent a code to ${email}`}
+        </p>
+      </div>
+
+      {/* Steps */}
+      {step === "email" ? (
+        <LoginEmailStep
+          email={email}
+          loading={loading}
+          onEmailChange={setEmail}
+          onSubmit={handleSendOtp}
+        />
+      ) : (
+        <LoginOtpStep
+          email={email}
+          otp={otp}
+          loading={loading}
+          onOtpChange={setOtp}
+          onSubmit={handleVerify}
+          onBack={goBackToEmail}
+        />
+      )}
+
+      {/* Footer */}
+      <div className="text-center text-sm text-muted-foreground/50">
+        Don&apos;t have an account?{" "}
+        <Link
+          href="/register"
+          className="font-medium text-primary hover:underline transition-colors"
+        >
+          Create an account
+        </Link>
+      </div>
+    </div>
+  );
+}

package/src/app/(auth)/onboarding/workspace/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Button, Input } from "@/components/ui";
+import { useWorkspaceCreateForm } from "@/hooks/useWorkspaceCreateForm";
+
+export default function OnboardingWorkspacePage() {
+  const { name, isLoading, setName, handleSubmit } = useWorkspaceCreateForm();
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="text-center space-y-2">
+        <h1 className="text-2xl font-bold tracking-tight">
+          Create your workspace
+        </h1>
+        <p className="text-sm text-muted-foreground">
+          You need at least one workspace to get started.
+        </p>
+      </div>
+
+      {/* Form */}
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Workspace Name
+          </label>
+          <Input
+            placeholder="e.g. Acme Corp, My Projects"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+            autoFocus
+          />
+        </div>
+
+        <Button
+          type="submit"
+          className="w-full"
+          disabled={!name.trim() || isLoading}
+        >
+          {isLoading ? "Creating..." : "Get Started"}
+        </Button>
+      </form>
+    </div>
+  );
+}

package/src/app/(auth)/register/page.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import Link from "next/link";
+import {
+  RegisterEmailStep,
+  RegisterInviteStep,
+  RegisterOrganizationStep,
+  RegisterOtpStep,
+  RegisterProfileStep,
+  RegisterWorkspaceStep,
+} from "@/components/auth/RegisterSteps";
+import { StepProgress } from "@/components/onboarding";
+import { useRegisterForm } from "@/hooks/useRegisterForm";
+
+export default function RegisterPage() {
+  const {
+    step,
+    loading,
+    email,
+    otp,
+    name,
+    companyName,
+    teamSize,
+    userRole,
+    workspaceName,
+    invitedEmails,
+    currentInviteEmail,
+    currentStepIndex,
+    setEmail,
+    setOtp,
+    setName,
+    setCompanyName,
+    setTeamSize,
+    setUserRole,
+    setWorkspaceName,
+    setCurrentInviteEmail,
+    goToStep,
+    handleSendOtp,
+    handleVerifyOtp,
+    handleAddInvite,
+    handleRemoveInvite,
+    handleCompleteRegistration,
+  } = useRegisterForm();
+
+  const renderStep = () => {
+    switch (step) {
+      case "email":
+        return (
+          <RegisterEmailStep
+            email={email}
+            loading={loading}
+            onEmailChange={setEmail}
+            onSubmit={handleSendOtp}
+          />
+        );
+
+      case "otp":
+        return (
+          <RegisterOtpStep
+            email={email}
+            otp={otp}
+            loading={loading}
+            onOtpChange={setOtp}
+            onSubmit={handleVerifyOtp}
+            onBack={() => goToStep("email")}
+          />
+        );
+
+      case "profile":
+        return (
+          <RegisterProfileStep
+            name={name}
+            userRole={userRole}
+            onNameChange={setName}
+            onRoleChange={setUserRole}
+            onSubmit={(e) => {
+              e.preventDefault();
+              goToStep("organization");
+            }}
+          />
+        );
+
+      case "organization":
+        return (
+          <RegisterOrganizationStep
+            companyName={companyName}
+            teamSize={teamSize}
+            onCompanyNameChange={setCompanyName}
+            onTeamSizeChange={setTeamSize}
+            onSubmit={(e) => {
+              e.preventDefault();
+              goToStep("workspace");
+            }}
+          />
+        );
+
+      case "workspace":
+        return (
+          <RegisterWorkspaceStep
+            workspaceName={workspaceName}
+            onWorkspaceNameChange={setWorkspaceName}
+            onSubmit={(e) => {
+              e.preventDefault();
+              goToStep("invite");
+            }}
+          />
+        );
+
+      case "invite":
+        return (
+          <RegisterInviteStep
+            invitedEmails={invitedEmails}
+            currentInviteEmail={currentInviteEmail}
+            loading={loading}
+            onCurrentEmailChange={setCurrentInviteEmail}
+            onAddInvite={handleAddInvite}
+            onRemoveInvite={handleRemoveInvite}
+            onSkip={() => handleCompleteRegistration()}
+            onSubmit={() => handleCompleteRegistration()}
+            onKeyDown={(e) => e.key === "Enter" && handleAddInvite()}
+          />
+        );
+    }
+  };
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div className="space-y-2 text-center">
+        <h2 className="text-2xl font-bold tracking-tight text-foreground">
+          {step === "invite" ? "Bring your team" : "Create your account"}
+        </h2>
+        <p className="text-sm text-muted-foreground/80">
+          {step === "email" && "Experience the future of task management."}
+          {step === "otp" && "We've sent a 6-digit code to your email."}
+          {step === "profile" && "Let's personalize your experience."}
+          {step === "organization" && "Tell us about your company."}
+          {step === "workspace" && "Create your first collaborative space."}
+          {step === "invite" && "Collaboration is better together."}
+        </p>
+      </div>
+
+      {/* Progress indicator for main steps (not email/otp) */}
+      {step !== "email" && step !== "otp" && (
+        <StepProgress currentStep={currentStepIndex - 2} totalSteps={4} />
+      )}
+
+      {/* Render current step */}
+      {renderStep()}
+
+      {/* Footer for email step */}
+      {step === "email" && (
+        <div className="text-center text-sm text-muted-foreground/50 mt-8">
+          Already have an account?{" "}
+          <Link
+            href="/login"
+            className="font-medium text-primary hover:underline transition-colors"
+          >
+            Sign in
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/app/(dashboard)/activity/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { ActivityView } from "@/views/ActivityView";
+
+export default function ActivityPage() {
+  return <ActivityView />;
+}