larkup 0.1.14 → 0.1.21

package/components/chat/tools/visual-placement-modal.tsx

@@ -0,0 +1,316 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { ChevronLeft, ChevronRight, Loader2, Save } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { toast } from 'sonner';
+
+export interface Placement {
+  pageIndex: number;
+  x: number;
+  y: number;
+  scale: number;
+}
+
+interface VisualPlacementModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  fileBase64: string;
+  totalPages: number;
+  placements: Placement[];
+  onSave: (placements: Placement[]) => void;
+  mode: 'type' | 'draw' | 'upload';
+  imagePayload: string | null;
+  text: string;
+  font: string;
+  color: string;
+  scale: number;
+}
+
+export function VisualPlacementModal({
+  open,
+  onOpenChange,
+  fileBase64,
+  totalPages,
+  placements,
+  onSave,
+  mode,
+  imagePayload,
+  text,
+  font,
+  color,
+  scale,
+}: VisualPlacementModalProps) {
+  const [currentPage, setCurrentPage] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [pdfDoc, setPdfDoc] = useState<any>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Keep local track of placements while editing
+  const [localPlacements, setLocalPlacements] = useState<Placement[]>([]);
+  const [pdfScale, setPdfScale] = useState(1);
+
+  useEffect(() => {
+    if (open) {
+      setLocalPlacements([...placements]);
+    }
+  }, [open, placements]);
+
+  // Load PDF document
+  useEffect(() => {
+    if (!open || !fileBase64) return;
+
+    let isMounted = true;
+    const loadPdf = async () => {
+      try {
+        setIsLoading(true);
+        const pdfjsLib = await import('pdfjs-dist');
+        pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.mjs`;
+
+        const pdfData = atob(fileBase64);
+        const bytes = new Uint8Array(pdfData.length);
+        for (let i = 0; i < pdfData.length; i++) {
+          bytes[i] = pdfData.charCodeAt(i);
+        }
+
+        const loadingTask = pdfjsLib.getDocument({ data: bytes });
+        const pdf = await loadingTask.promise;
+        if (isMounted) {
+          setPdfDoc(pdf);
+        }
+      } catch (err: any) {
+        toast.error('Failed to load PDF for visual placement');
+        console.error(err);
+      }
+    };
+
+    loadPdf();
+    return () => {
+      isMounted = false;
+    };
+  }, [open, fileBase64]);
+
+  // Render current page
+  useEffect(() => {
+    if (!pdfDoc || !canvasRef.current) return;
+
+    let isMounted = true;
+    const renderPage = async () => {
+      try {
+        setIsLoading(true);
+        const page = await pdfDoc.getPage(currentPage + 1);
+
+        const viewport = page.getViewport({ scale: 1 });
+
+        // Let the PDF be as wide as the modal to make it large enough, allow vertical scrolling
+        const availableWidth = Math.min(window.innerWidth * 0.95 - 64, 1136); // max-w-1200px minus padding
+
+        const scaleX = availableWidth / viewport.width;
+        const targetScale = Math.min(scaleX, 1.5); // Cap scale at 1.5x so it doesn't get ridiculously large
+
+        setPdfScale(targetScale);
+        const scaledViewport = page.getViewport({ scale: targetScale });
+
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+
+        const context = canvas.getContext('2d');
+        if (!context) return;
+
+        canvas.height = scaledViewport.height;
+        canvas.width = scaledViewport.width;
+
+        const renderContext = {
+          canvasContext: context,
+          viewport: scaledViewport,
+        };
+
+        await page.render(renderContext).promise;
+      } catch (err) {
+        console.error('Error rendering page:', err);
+      } finally {
+        if (isMounted) setIsLoading(false);
+      }
+    };
+
+    renderPage();
+    return () => {
+      isMounted = false;
+    };
+  }, [pdfDoc, currentPage]);
+
+  const currentPlacement = localPlacements.find((p) => p.pageIndex === currentPage);
+
+  // Default centered position if not set
+  const [dragPos, setDragPos] = useState({ x: 150, y: 150 });
+
+  useEffect(() => {
+    if (currentPlacement && containerRef.current) {
+      const { width, height } = containerRef.current.getBoundingClientRect();
+      setDragPos({
+        x: (currentPlacement.x / 100) * width,
+        y: (currentPlacement.y / 100) * height,
+      });
+    } else if (containerRef.current) {
+      const { width, height } = containerRef.current.getBoundingClientRect();
+      setDragPos({ x: width / 2 - 50, y: height / 2 - 25 });
+    }
+  }, [currentPlacement, currentPage, isLoading]);
+
+  const handleDragEnd = (e: any, info: any) => {
+    if (!containerRef.current) return;
+    const { width, height } = containerRef.current.getBoundingClientRect();
+
+    // Convert final px position to percentages
+    const newX = Math.max(0, Math.min(100, (dragPos.x / width) * 100));
+    const newY = Math.max(0, Math.min(100, (dragPos.y / height) * 100));
+
+    const existingIdx = localPlacements.findIndex((p) => p.pageIndex === currentPage);
+    const newPlacement: Placement = {
+      pageIndex: currentPage,
+      x: newX,
+      y: newY,
+      scale, // Save the current scale when the user updates placement
+    };
+
+    if (existingIdx >= 0) {
+      const copy = [...localPlacements];
+      copy[existingIdx] = newPlacement;
+      setLocalPlacements(copy);
+    } else {
+      setLocalPlacements([...localPlacements, newPlacement]);
+    }
+  };
+
+  const handleRemoveCurrent = () => {
+    setLocalPlacements((prev) => prev.filter((p) => p.pageIndex !== currentPage));
+  };
+
+  const handleSave = () => {
+    // If there's no placement for the current page but the user moved the signature, auto-add it?
+    // The handleDragEnd automatically adds it.
+    onSave(localPlacements);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-[95vw] max-w-[1000px] sm:max-w-[1000px] h-[95vh] max-h-[95vh] bg-white/80 backdrop-blur-md overflow-hidden flex flex-col p-4">
+        <DialogHeader className="mb-2 shrink-0">
+          <DialogTitle>Visual Signature Placement</DialogTitle>
+          <div className="flex items-center justify-between mt-2">
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
+                disabled={currentPage === 0 || isLoading}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <span className="text-sm font-medium">
+                Page {currentPage + 1} of {totalPages}
+              </span>
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
+                disabled={currentPage === totalPages - 1 || isLoading}
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </div>
+
+            {currentPlacement && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleRemoveCurrent}
+                className="text-muted-foreground"
+              >
+                Remove from this page
+              </Button>
+            )}
+          </div>
+        </DialogHeader>
+
+        <div className="relative flex-1 overflow-auto flex items-center justify-center bg-muted/40 border rounded-lg">
+          {isLoading && (
+            <div className="absolute inset-0 flex items-center justify-center bg-background/50 z-10 backdrop-blur-md">
+              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            </div>
+          )}
+
+          <div ref={containerRef} className="relative shadow-sm bg-white overflow-hidden shrink-0">
+            <canvas ref={canvasRef} className="block w-full h-auto" />
+
+            {!isLoading && (
+              <motion.div
+                drag
+                dragMomentum={false}
+                dragConstraints={containerRef}
+                onDrag={(e, info) => {
+                  setDragPos({ x: dragPos.x + info.delta.x, y: dragPos.y + info.delta.y });
+                }}
+                onDragEnd={handleDragEnd}
+                style={{
+                  x: dragPos.x,
+                  y: dragPos.y,
+                  scale: (scale / 100) * pdfScale,
+                  transformOrigin: 'top left',
+                }}
+                className="absolute top-0 left-0 cursor-move border border-primary/50 border-dashed hover:border-primary transition-colors w-max"
+              >
+                {mode === 'type' ? (
+                  <span
+                    style={{
+                      fontFamily: font === 'Cursive' ? 'cursive' : 'sans-serif',
+                      color: color === 'black' ? '#000' : color === 'blue' ? '#0000ff' : '#ff0000',
+                      fontSize: '24px',
+                      lineHeight: 1,
+                      display: 'block',
+                    }}
+                  >
+                    {text || 'Your Signature'}
+                  </span>
+                ) : imagePayload ? (
+                  <img
+                    src={imagePayload}
+                    alt="Signature"
+                    className="max-h-[60px] pointer-events-none"
+                  />
+                ) : (
+                  <span className="text-muted-foreground text-sm">No signature</span>
+                )}
+              </motion.div>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter className="mt-4 shrink-0 flex items-center justify-between">
+          <div className="text-xs text-muted-foreground">
+            {localPlacements.length} placement(s) set.
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleSave}>
+              <Save className="h-4 w-4 mr-2" />
+              Save Placements
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/chat/tools/visualization-tabs.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useState } from "react";
+
+export function VisualizationTabs({
+  tabs,
+}: {
+  tabs: { label: string; content: React.ReactNode }[];
+}) {
+  const [active, setActive] = useState(0);
+
+  if (tabs.length === 1) return <>{tabs[0].content}</>;
+
+  return (
+    <div className="space-y-4 pt-2">
+      <div className="flex items-center gap-2 border-b border-border/40 pb-0 px-1">
+        {tabs.map((tab, i) => (
+          <button
+            key={i}
+            type="button"
+            onClick={() => setActive(i)}
+            className={`flex items-center gap-1.5 border-b-2 px-3 py-2 text-xs font-medium transition-colors ${
+              active === i
+                ? "border-foreground text-foreground"
+                : "border-transparent text-muted-foreground hover:text-foreground hover:border-border"
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div className="animate-in fade-in slide-in-from-bottom-1 duration-500">
+        {tabs[active]?.content}
+      </div>
+    </div>
+  );
+}

package/components/client-layout-wrapper.tsx

@@ -1,128 +1,73 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import {
-  useThemeCustomizer,
-  PanelBgVariant,
-} from "./theme-customizer-provider";
-import { AppSidebar } from "./app-sidebar";
-import { AppTopNav } from "./app-topnav";
-import { usePathname } from "next/navigation";
-import { WorkspaceTopBar } from "@/components/workspace/workspace-top-bar";
-import { cn } from "@/lib/utils";
-import { useWorkspace } from "@/components/workspace/workspace-provider";
-import { WelcomeScreen } from "@/components/onboarding/welcome-screen";
-import { TechSetup } from "@/components/onboarding/tech-setup";
-import { SimpleSetup } from "@/components/onboarding/simple-setup";
-import { SimpleSidebar } from "@/components/simple/simple-sidebar";
+import { useThemeCustomizer, PanelBgVariant } from './theme-customizer-provider';
+import { UnifiedSidebar } from './unified-sidebar';
+import { AppTopNav } from './app-topnav';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/lib/utils';
+import { useWorkspace } from '@/components/workspace/workspace-provider';
+import { WelcomeScreen } from '@/components/onboarding/welcome-screen';
 
 const PANEL_BG_COLORS: Record<PanelBgVariant, string | null> = {
-  "panel-default": "#FAFAFA",
-  "panel-white": "#FFFFFF",
-  "panel-fafafa": "#F4F4F4",
-  "panel-warm": "#F7F1EA",
-  "panel-soft": "#FBFAF8",
-  "panel-silver": "#F8F8F8",
-  "panel-stone": "#F5F5F2",
+  'panel-default': '#FAFAFA',
+  'panel-white': '#FFFFFF',
+  'panel-fafafa': '#FAFAFA',
+  'panel-warm': '#F7F1EA',
+  'panel-soft': '#FBFAF8',
+  'panel-silver': '#F8F8F8',
+  'panel-stone': '#F5F5F2',
 };
 
-type OnboardingStep = "welcome" | "tech-setup" | "simple-setup"
-
-export function ClientLayoutWrapper({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const { layout, pageStyle, panelBg } = useThemeCustomizer();
+export function ClientLayoutWrapper({ children }: { children: React.ReactNode }) {
+  const { pageStyle, panelBg, layout } = useThemeCustomizer();
   const pathname = usePathname();
-  const isChatPage = pathname?.includes("/chat");
-  const { isFirstRun, isLoading, mode } = useWorkspace();
-
-  // Local onboarding step state — only used during the onboarding flow
-  const [onboardingStep, setOnboardingStep] = useState<OnboardingStep>("welcome")
+  const isChatPage = pathname?.includes('/chat');
+  const { isFirstRun, isLoading } = useWorkspace();
 
   const panelColor = PANEL_BG_COLORS[panelBg];
   const panelStyle = panelColor ? { backgroundColor: panelColor } : undefined;
 
-  // ── Onboarding: full-page screens ──────────────────────────────────
-  // Show onboarding when it's first run (no servers) OR no mode has been chosen yet
-  const needsOnboarding = !isLoading && (isFirstRun || (!mode && !isLoading))
-
-  if (needsOnboarding) {
-    if (onboardingStep === "welcome") {
-      return (
-        <WelcomeScreen
-          onSelectTech={() => setOnboardingStep("tech-setup")}
-          onSelectSimple={() => setOnboardingStep("simple-setup")}
-        />
-      )
-    }
-    if (onboardingStep === "tech-setup") {
-      return <TechSetup onBack={() => setOnboardingStep("welcome")} />
-    }
-    if (onboardingStep === "simple-setup") {
-      return <SimpleSetup onBack={() => setOnboardingStep("welcome")} />
-    }
+  if (!isLoading && isFirstRun) {
+    return <WelcomeScreen />;
   }
 
-  // ── Loading state ──────────────────────────────────────────────────
   if (isLoading) {
     return (
       <div className="flex h-screen items-center justify-center">
         <div className="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
       </div>
-    )
+    );
   }
 
-  // ── Shared layout classes ──────────────────────────────────────────
-  const containerClasses =
-    pageStyle === "fused"
-      ? "h-[calc(100vh-8rem)] bg-background text-foreground overflow-hidden"
-      : "h-[calc(100vh-8rem)] rounded-2xl border border-border bg-panel text-panel-foreground overflow-hidden";
+  const mainClasses = 'min-w-0 flex-1 overflow-hidden';
 
-  const sidebarContainerClasses =
-    pageStyle === "fused"
-      ? "h-[calc(100vh-1.5rem)] flex flex-col bg-background text-foreground overflow-hidden"
-      : "h-[calc(100vh-1.5rem)] flex flex-col rounded-2xl border border-border bg-panel text-panel-foreground overflow-hidden";
+  const containerClasses =
+    pageStyle === 'fused'
+      ? 'h-screen flex flex-col bg-background text-foreground overflow-hidden'
+      : 'h-screen flex flex-col md:rounded-l-2xl border-l border-border bg-panel text-panel-foreground overflow-hidden';
 
-  // ── Simple mode layout ─────────────────────────────────────────────
-  if (mode === "simple") {
-    // TopNav layout for simple mode
-    if (layout === "topnav") {
-      return (
-        <div className="flex h-screen flex-col overflow-hidden">
-          <AppTopNav />
-          <main
-            className={cn("flex-1 min-h-0 overflow-hidden p-4 md:p-6 lg:p-8")}
-          >
-            <div
-              className={cn(containerClasses, "container mx-auto flex flex-col")}
-              style={panelStyle}
-            >
-              {children}
-            </div>
-          </main>
-        </div>
-      );
-    }
+  const isTopNav = layout === 'topnav';
 
-    // Default sidebar layout for simple mode
+  if (isTopNav) {
     return (
-      <div className="flex h-screen overflow-hidden">
-        <SimpleSidebar />
-        <main className="min-w-0 flex-1 p-3 pl-3 md:pl-0 overflow-hidden">
-          <div className={sidebarContainerClasses} style={panelStyle}>
-            <WorkspaceTopBar />
+      <div className="flex flex-col h-screen overflow-hidden">
+        <AppTopNav />
+        <main className="min-w-0 flex-1 overflow-hidden">
+          <div className="h-full flex flex-col bg-background text-foreground" style={panelStyle}>
             <div
               className={cn(
-                "flex-1 min-h-0",
-                isChatPage ? "overflow-hidden flex flex-col" : "overflow-auto",
+                'flex-1 min-h-0',
+                isChatPage || pathname?.includes('/settings') || pathname?.includes('/analytics')
+                  ? 'overflow-hidden flex flex-col'
+                  : 'overflow-auto',
               )}
             >
               <div
                 className={cn(
-                  "container mx-auto",
-                  isChatPage ? "flex-1 min-h-0 flex flex-col" : "pb-8",
+                  'h-full w-full',
+                  isChatPage || pathname?.includes('/settings') || pathname?.includes('/analytics')
+                    ? 'flex-1 min-h-0 flex flex-col'
+                    : 'container mx-auto pb-8',
                 )}
               >
                 {children}
@@ -134,42 +79,25 @@ export function ClientLayoutWrapper({
     );
   }
 
-  // ── Tech mode layout (existing) ────────────────────────────────────
-  if (layout === "topnav") {
-    return (
-      <div className="flex h-screen flex-col overflow-hidden">
-        <AppTopNav />
-        <main
-          className={cn("flex-1 min-h-0 overflow-hidden p-4 md:p-6 lg:p-8")}
-        >
-          <div
-            className={cn(containerClasses, "container mx-auto flex flex-col")}
-            style={panelStyle}
-          >
-            {children}
-          </div>
-        </main>
-      </div>
-    );
-  }
-
-  // Default Sidebar Layout
   return (
     <div className="flex h-screen overflow-hidden">
-      <AppSidebar />
-      <main className="min-w-0 flex-1 p-3 pl-3 md:pl-0 overflow-hidden">
-        <div className={sidebarContainerClasses} style={panelStyle}>
-          <WorkspaceTopBar />
+      <UnifiedSidebar />
+      <main className={mainClasses}>
+        <div className={containerClasses} style={panelStyle}>
           <div
             className={cn(
-              "flex-1 min-h-0",
-              isChatPage ? "overflow-hidden flex flex-col" : "overflow-auto",
+              'flex-1 min-h-0',
+              isChatPage || pathname?.includes('/settings') || pathname?.includes('/analytics')
+                ? 'overflow-hidden flex flex-col'
+                : 'overflow-auto',
             )}
           >
             <div
               className={cn(
-                "container mx-auto",
-                isChatPage ? "flex-1 min-h-0 flex flex-col" : "pb-8",
+                'h-full w-full',
+                isChatPage || pathname?.includes('/settings') || pathname?.includes('/analytics')
+                  ? 'flex-1 min-h-0 flex flex-col'
+                  : 'container mx-auto pb-8',
               )}
             >
               {children}