@lindaui/blocks 0.4.2 → 0.5.0

package/src/connection-panel.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { Spinner } from "@lindaui/ui/compound";
+import { AnimatePresence, motion } from "framer-motion";
+import { useRef, useState, type ReactNode } from "react";
+import { DisconnectedPanel } from "./connection-panel/disconnected-panel";
+import { QRPanel } from "./connection-panel/qr-panel";
+import { useQRRefresh } from "./connection-panel/use-qr-refresh";
+
+export { ConnectedPanel } from "./connection-panel/connected-panel";
+export type { ConnectedPanelProps, ConnectedPanelLabels, ConnectionDetail } from "./connection-panel/connected-panel";
+
+export type ConnectionPanelState =
+  | { status: "checking" | "disconnected" | "generating" }
+  | { status: "awaiting_scan"; qrCode: ReactNode; qrFormat?: "ascii" | "image" }
+  | { status: "connected"; content: ReactNode };
+
+export interface ConnectionPanelLabels {
+  checking: ReactNode;
+  generating: ReactNode;
+  waiting: ReactNode;
+  disconnectedDescription: ReactNode;
+  connect: ReactNode;
+  connectError: ReactNode;
+  refresh: ReactNode;
+  expiresSoon: ReactNode;
+  expiresIn: (time: string) => ReactNode;
+  instructions: readonly ReactNode[];
+  disconnectedInstructions: readonly ReactNode[];
+}
+
+export interface ConnectionPanelProps {
+  state: ConnectionPanelState;
+  labels: ConnectionPanelLabels;
+  error?: ReactNode;
+  isActive?: boolean;
+  className?: string;
+  qrExpirySeconds?: number;
+  onConnect: () => Promise<void>;
+  onRefreshQR: () => Promise<void>;
+}
+
+/** Controlled connection presentation. Authentication and automatic connection policy stay in the app. */
+export function ConnectionPanel({
+  state,
+  labels,
+  error,
+  isActive = true,
+  className = "",
+  qrExpirySeconds = 60,
+  onConnect,
+  onRefreshQR,
+}: ConnectionPanelProps) {
+  const [isConnecting, setIsConnecting] = useState(false);
+  const pending = useRef(false);
+  const hasQR = state.status === "awaiting_scan";
+  const qr = useQRRefresh({
+    enabled: hasQR && isActive,
+    expirySeconds: Number.isFinite(qrExpirySeconds) ? Math.max(1, Math.floor(qrExpirySeconds)) : 60,
+    error,
+    errorLabel: labels.connectError,
+    onRefresh: onRefreshQR,
+  });
+  const actionError = error || qr.actionError;
+
+  async function connect() {
+    if (pending.current) return;
+    pending.current = true;
+    setIsConnecting(true);
+    qr.setActionError(null);
+    try {
+      await onConnect();
+    } catch {
+      qr.setActionError(labels.connectError);
+    } finally {
+      pending.current = false;
+      setIsConnecting(false);
+    }
+  }
+
+  if (state.status === "checking") {
+    return (
+      <div className={`flex items-center justify-center gap-3 py-10 text-muted text-sm ${className}`} role="status">
+        <Spinner size="sm" />
+        {labels.checking}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${state.status === "connected" ? "space-y-4" : "mx-auto w-full max-w-sm space-y-6 py-6 text-center"} ${className}`}>
+      <AnimatePresence mode="wait">
+        {state.status === "connected" ? (
+          <motion.div
+            animate={{ opacity: 1, y: 0 }}
+            className="space-y-3"
+            exit={{ opacity: 0, y: -10 }}
+            initial={{ opacity: 0, y: 10 }}
+            key="connected"
+          >
+            {state.content}
+          </motion.div>
+        ) : state.status === "awaiting_scan" ? (
+          <motion.div
+            animate={{ opacity: 1, y: 0 }}
+            className="space-y-4"
+            exit={{ opacity: 0, y: -10 }}
+            initial={{ opacity: 0, y: 10 }}
+            key="qr"
+          >
+            <QRPanel
+              error={actionError}
+              isRefreshing={qr.isRefreshing}
+              labels={labels}
+              onRefresh={qr.refresh}
+              qrCode={state.qrCode}
+              qrFormat={state.qrFormat}
+              timeRemaining={qr.timeRemaining}
+            />
+          </motion.div>
+        ) : (
+          <motion.div
+            animate={{ opacity: 1, y: 0 }}
+            className="space-y-4"
+            exit={{ opacity: 0, y: -10 }}
+            initial={{ opacity: 0, y: 10 }}
+            key="initial"
+          >
+            <DisconnectedPanel
+              error={actionError}
+              generating={state.status === "generating"}
+              labels={labels}
+              onConnect={connect}
+              pending={isConnecting}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/src/conversation-list-item.tsx

@@ -0,0 +1,53 @@
+"use client";
+import type { ReactNode } from "react";
+import { formatRelativeTime } from "@lindaui/ui/date";
+import { ChatAvatar } from "./chat-avatar";
+import type { ConversationSummary } from "./chat-types.js";
+
+export interface ConversationListItemProps {
+  conversation: ConversationSummary;
+  selected?: boolean;
+  onSelect?: () => void;
+  trailing?: ReactNode;
+}
+
+export function ConversationListItem({
+  conversation,
+  selected = false,
+  onSelect,
+  trailing,
+}: ConversationListItemProps) {
+  return (
+    <button
+      type="button"
+      aria-pressed={selected}
+      onClick={onSelect}
+      className={`flex w-full items-center gap-3 border-b border-border px-3 py-3 text-left font-[inherit] text-[inherit] transition-colors ${
+        selected ? "bg-primary/5" : "bg-card hover:bg-accent/50"
+      }`}
+    >
+      <ChatAvatar name={conversation.title} src={conversation.avatarUrl} />
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center justify-between gap-2">
+          <span className="truncate text-sm font-semibold">{conversation.title}</span>
+          {conversation.lastMessageAt != null && (
+            <span className="shrink-0 text-[11px] text-muted-foreground">
+              {formatRelativeTime(conversation.lastMessageAt)}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center justify-between gap-2">
+          {conversation.subtitle != null && (
+            <span className="truncate text-xs text-muted-foreground">{conversation.subtitle}</span>
+          )}
+          {!!conversation.unreadCount && (
+            <span className="grid size-5 shrink-0 place-items-center rounded-full bg-primary text-[10px] font-semibold text-primary-foreground">
+              {conversation.unreadCount}
+            </span>
+          )}
+        </div>
+      </div>
+      {trailing}
+    </button>
+  );
+}

package/src/conversation-list.tsx

@@ -0,0 +1,67 @@
+"use client";
+import type { ReactNode } from "react";
+import { SearchField } from "@lindaui/ui/search-field";
+import { ScrollShadow } from "@lindaui/ui/scroll-shadow";
+import { Spinner } from "@lindaui/ui/spinner";
+import { ConversationListItem } from "./conversation-list-item";
+import type { ConversationSummary } from "./chat-types.js";
+
+export interface ConversationListProps {
+  conversations: ConversationSummary[];
+  selectedId?: string;
+  onSelect?: (id: string) => void;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  searchLabel?: string;
+  searchPlaceholder?: string;
+  loading?: boolean;
+  emptyContent?: ReactNode;
+  filters?: ReactNode;
+}
+
+export function ConversationList({
+  conversations,
+  selectedId,
+  onSelect,
+  searchValue,
+  onSearchChange,
+  searchLabel = "Buscar",
+  searchPlaceholder = "Buscar conversación…",
+  loading = false,
+  emptyContent,
+  filters,
+}: ConversationListProps) {
+  return (
+    <div className="flex h-full flex-col">
+      <div className="border-b border-border p-3">
+        <SearchField
+          aria-label={searchLabel}
+          placeholder={searchPlaceholder}
+          value={searchValue}
+          onChange={onSearchChange}
+        />
+      </div>
+      {filters != null && <div className="border-b border-border px-3 py-2">{filters}</div>}
+      <ScrollShadow className="flex-1">
+        {loading ? (
+          <div className="flex items-center justify-center p-8">
+            <Spinner aria-label="Cargando" />
+          </div>
+        ) : conversations.length === 0 ? (
+          <div className="p-8 text-center text-sm text-muted-foreground">
+            {emptyContent ?? "Sin conversaciones"}
+          </div>
+        ) : (
+          conversations.map((c) => (
+            <ConversationListItem
+              key={c.id}
+              conversation={c}
+              selected={c.id === selectedId}
+              onSelect={() => onSelect?.(c.id)}
+            />
+          ))
+        )}
+      </ScrollShadow>
+    </div>
+  );
+}

package/src/conversation-thread.tsx

@@ -0,0 +1,64 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { ScrollShadow } from "@lindaui/ui/scroll-shadow";
+import { Spinner } from "@lindaui/ui/spinner";
+import { groupByDay } from "@lindaui/ui/time-grouping";
+import { ChatDateDivider } from "./chat-date-divider";
+import { MessageBubble } from "./message-bubble";
+import { EmptyChatView } from "./empty-chat-view";
+import type { GenericMessage } from "./chat-types.js";
+
+export interface ConversationThreadProps {
+  messages: GenericMessage[];
+  loading?: boolean;
+  onImageClick?: (url: string) => void;
+  emptyTitle?: string;
+  emptyDescription?: string;
+}
+
+/** Timeline scrolleable con auto-scroll al último mensaje + agrupado por día. */
+export function ConversationThread({
+  messages,
+  loading = false,
+  onImageClick,
+  emptyTitle = "Sin mensajes",
+  emptyDescription,
+}: ConversationThreadProps) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ block: "end" });
+  }, [messages.length]);
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Spinner aria-label="Cargando mensajes" />
+      </div>
+    );
+  }
+
+  if (messages.length === 0) {
+    return <EmptyChatView title={emptyTitle} description={emptyDescription} />;
+  }
+
+  const groups = groupByDay(messages, (m) => m.sentAt);
+
+  return (
+    <ScrollShadow className="h-full">
+      <div className="flex flex-col gap-1 p-4">
+        {groups.map((group) => (
+          <div key={group.key}>
+            <ChatDateDivider date={group.items[0]!.sentAt} />
+            <div className="flex flex-col gap-1.5">
+              {group.items.map((message) => (
+                <MessageBubble key={message.id} message={message} onImageClick={onImageClick} />
+              ))}
+            </div>
+          </div>
+        ))}
+        <div ref={bottomRef} />
+      </div>
+    </ScrollShadow>
+  );
+}

package/src/detail-panel.tsx

@@ -0,0 +1,123 @@
+"use client";
+import type { ReactNode } from "react";
+import { FileText } from "lucide-react";
+import { Button } from "@lindaui/ui/button";
+import { Card } from "@lindaui/ui/card";
+import { Divider } from "@lindaui/ui/divider";
+
+export interface DetailPanelMetaRow {
+  icon?: ReactNode;
+  label: ReactNode;
+  value: ReactNode;
+}
+
+export interface DetailPanelAction {
+  label: ReactNode;
+  onPress: () => void;
+  icon?: ReactNode;
+}
+
+export interface DetailPanelProps {
+  selected?: boolean;
+  emptyTitle?: string;
+  emptyDescription?: ReactNode;
+  emptyIcon?: ReactNode;
+  title?: string;
+  subtitle?: ReactNode;
+  badges?: ReactNode;
+  media?: ReactNode;
+  meta?: DetailPanelMetaRow[];
+  action?: DetailPanelAction;
+}
+
+export function DetailPanel({
+  selected = false,
+  emptyTitle = "Seleccioná un elemento",
+  emptyDescription,
+  emptyIcon,
+  title,
+  subtitle,
+  badges,
+  media,
+  meta,
+  action,
+}: DetailPanelProps) {
+  if (!selected || title === undefined) {
+    return (
+      <div className="grid h-full place-items-center p-6 sm:p-10">
+        <div className="max-w-[280px] text-center">
+          <div className="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-secondary">
+            {emptyIcon ?? <FileText className="h-7 w-7 text-muted-foreground" strokeWidth={1.6} />}
+          </div>
+          <h3 className="mt-4 text-[15px] font-semibold">{emptyTitle}</h3>
+          {emptyDescription && (
+            <p className="mt-1.5 text-sm text-muted-foreground">{emptyDescription}</p>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-y-auto px-4 py-5 sm:px-8 sm:py-7">
+      <div className="mx-auto max-w-2xl">
+        <div>
+          {badges && (
+            <div className="flex flex-wrap items-center gap-2.5">{badges}</div>
+          )}
+          <h1 className="mt-3 text-xl font-semibold tracking-tight sm:text-2xl">{title}</h1>
+          {subtitle && (
+            <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>
+          )}
+        </div>
+
+        {(media || (meta && meta.length > 0)) && (
+          // Mobile-first: stack (media arriba, meta abajo). Desde `sm` y solo
+          // cuando hay media, split en dos columnas (media fija 200px + meta
+          // 1fr). Sin media la Card de metadata ocupa todo el ancho siempre
+          // (si no, queda atrapada en la columna 1fr con un gutter vacío).
+          <div
+            className={
+              media
+                ? "mt-6 flex flex-col gap-4 sm:grid sm:grid-cols-[200px_1fr] sm:gap-6"
+                : "mt-6"
+            }
+          >
+            {media && <div>{media}</div>}
+            {meta && meta.length > 0 && (
+              <Card>
+                <div className="px-4 py-1">
+                  {meta.map((row, i) => (
+                    <div key={i}>
+                      {i > 0 && <Divider />}
+                      <div className="flex items-start gap-2.5 py-2.5">
+                        {row.icon && (
+                          <div className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground">
+                            {row.icon}
+                          </div>
+                        )}
+                        <div className="flex flex-1 justify-between gap-3">
+                          <span className="text-sm text-muted-foreground">{row.label}</span>
+                          <span className="text-right text-sm font-medium">{row.value}</span>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            )}
+          </div>
+        )}
+
+        {action && (
+          <div className="mt-6">
+            <Button size="lg" onPress={action.onPress} className="w-full sm:w-auto">
+              {action.icon}
+              {action.label}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/document-panel.tsx

@@ -0,0 +1,109 @@
+import type { ReactNode } from "react";
+// @lindaui/ui primitives
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+import { Divider } from "@lindaui/ui/divider";
+import { Skeleton } from "@lindaui/ui/skeleton";
+
+export interface DocumentPanelProps {
+  title: string;
+  subtitle?: ReactNode;
+  meta?: ReactNode;
+  /**
+   * `block` (default) stacks subtitle and meta on their own lines. `inline`
+   * flows them on one wrapping row (subtitle · meta) so a date sits next to the
+   * subtitle instead of forcing a new line.
+   */
+  metaPlacement?: "block" | "inline";
+  statusBadge?: ReactNode;
+  state: "empty" | "loading" | "ready";
+  emptyContent?: ReactNode;
+  loadingLabel?: string;
+  notices?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+}
+
+export function DocumentPanel({
+  title,
+  subtitle,
+  meta,
+  metaPlacement = "block",
+  statusBadge,
+  state,
+  emptyContent,
+  loadingLabel = "Cargando…",
+  notices,
+  children,
+  footer,
+}: DocumentPanelProps) {
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex flex-wrap items-start justify-between gap-3 px-4 pb-3 pt-4 flex-none sm:px-5">
+        <div className="min-w-0">
+          <h2 className="truncate text-lg font-bold leading-tight tracking-tight sm:text-xl">
+            {title}
+          </h2>
+          {metaPlacement === "inline"
+            ? (subtitle || meta) && (
+                <div className="mt-0.5 flex flex-wrap items-center gap-x-2 text-sm text-muted-foreground">
+                  {subtitle && <span>{subtitle}</span>}
+                  {meta && (
+                    <span className="text-xs tabular-nums">
+                      {subtitle ? "· " : ""}
+                      {meta}
+                    </span>
+                  )}
+                </div>
+              )
+            : (
+                <>
+                  {subtitle && (
+                    <p className="mt-0.5 text-sm text-muted-foreground">
+                      {subtitle}
+                    </p>
+                  )}
+                  {meta && (
+                    <p className="mt-0.5 text-xs text-muted-foreground tabular-nums">
+                      {meta}
+                    </p>
+                  )}
+                </>
+              )}
+        </div>
+        {statusBadge && <div className="flex-none">{statusBadge}</div>}
+      </div>
+
+      <Divider />
+
+      {/* Body */}
+      <div className="flex-1 overflow-y-auto px-4 py-4 sm:px-5">
+        {state === "empty" && emptyContent}
+
+        {state === "loading" && (
+          <div role="status" className="flex flex-col gap-3">
+            <span className="text-sm text-muted-foreground">{loadingLabel}</span>
+            <Skeleton className="h-3 w-full" />
+            <Skeleton className="h-3 w-full" />
+            <Skeleton className="h-3 w-3/4" />
+          </div>
+        )}
+
+        {state === "ready" && (
+          <>
+            {notices}
+            {children}
+          </>
+        )}
+      </div>
+
+      {/* Footer */}
+      {footer && (
+        <>
+          <Divider />
+          <div className="flex-none flex flex-wrap gap-2 p-4">{footer}</div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/document-reader.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+
+export interface DocumentReaderProps {
+  content: string;
+}
+
+export function DocumentReader({ content }: DocumentReaderProps) {
+  const blocks = content.trim().split(/\n\s*\n/);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {blocks.map((block, i) => {
+        const lines = block.split("\n");
+        const heading = lines[0];
+        const body = lines.slice(1).join(" ");
+        return (
+          <div key={i}>
+            <div className="text-xs font-semibold tracking-widest uppercase text-muted-foreground">
+              {heading}
+            </div>
+            {body && (
+              <p className="mt-1.5 text-[13px] leading-relaxed text-pretty sm:text-sm">{body}</p>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/empty-chat-view.tsx

@@ -0,0 +1,25 @@
+"use client";
+import type { ReactNode } from "react";
+import { MessageCircle } from "lucide-react";
+
+export interface EmptyChatViewProps {
+  title?: string;
+  description?: ReactNode;
+  icon?: ReactNode;
+}
+
+export function EmptyChatView({
+  title = "Elegí una conversación",
+  description,
+  icon,
+}: EmptyChatViewProps) {
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-3 p-8 text-center text-muted-foreground">
+      <div className="grid size-14 place-items-center rounded-full bg-secondary">
+        {icon ?? <MessageCircle className="size-6" aria-hidden="true" />}
+      </div>
+      <p className="text-sm font-medium text-foreground">{title}</p>
+      {description != null && <p className="max-w-xs text-xs">{description}</p>}
+    </div>
+  );
+}

package/src/entity-card.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import type { UniqueIdentifier } from "@dnd-kit/core";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Card } from "@lindaui/ui/compound";
+import { cn } from "@lindaui/ui/cn";
+import type { ReactNode } from "react";
+
+export interface EntityCardProps<Entity extends object> {
+  id: UniqueIdentifier;
+  entity: Entity;
+  isDragging?: boolean;
+  onActivate?: (entity: Entity) => void;
+  cardClassName?: string;
+  badges?: ReactNode;
+  time?: ReactNode;
+  avatar?: ReactNode;
+  title: ReactNode;
+  subtitle?: ReactNode;
+}
+
+/** Sortable presentation only: metadata, urgency and navigation belong to the caller. */
+export function EntityCard<Entity extends object>({
+  id,
+  entity,
+  isDragging = false,
+  onActivate,
+  cardClassName,
+  badges,
+  time,
+  avatar,
+  title,
+  subtitle,
+}: EntityCardProps<Entity>) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging: isSortableDragging } =
+    useSortable({ data: entity, id });
+  const isCurrentlyDragging = isDragging || isSortableDragging;
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      {...attributes}
+      {...listeners}
+      className={cn("touch-none", isCurrentlyDragging && "scale-105 opacity-50")}
+    >
+      <Card
+        className={cn(
+          "cursor-grab border-none bg-surface transition-all hover:bg-surface-secondary active:cursor-grabbing",
+          "h-full min-w-full shadow-sm hover:shadow-md",
+          cardClassName,
+        )}
+        onClick={() => {
+          if (!isCurrentlyDragging) onActivate?.(entity);
+        }}
+      >
+        <Card.Content className="flex min-h-[96px] min-w-full flex-col justify-between p-3">
+          <div className="mb-2 flex items-start justify-between">
+            <div className="flex flex-1 flex-wrap items-center gap-1 overflow-hidden">{badges}</div>
+            <div className="flex items-center gap-1 text-[10px] text-muted">{time}</div>
+          </div>
+          <div className="mb-2 flex items-center gap-3">
+            {avatar}
+            <div className="min-w-0 flex-1">
+              <p className="truncate font-semibold text-sm">{title}</p>
+              <p className="truncate text-[10px] text-muted">{subtitle}</p>
+            </div>
+          </div>
+        </Card.Content>
+      </Card>
+    </div>
+  );
+}