@tleblancureta/proto 0.1.0

package/core-web/src/components/shell/Toolbar.tsx

@@ -0,0 +1,233 @@
+import { useState, useCallback, type ReactNode } from 'react'
+import { useMountEffect } from '../../hooks/useMountEffect'
+import { Button } from '../ui/button'
+import { PlusIcon, RotateCcwIcon, SunIcon, MoonIcon, MonitorIcon, UserIcon, LogOutIcon, Building2Icon, ChevronDownIcon, CheckIcon, XIcon, HomeIcon, SettingsIcon, LayoutGridIcon } from 'lucide-react'
+import { useTheme, type Theme } from '../../hooks/useTheme'
+import type { ActiveEntity, WidgetType } from './types'
+
+interface CatalogEntry {
+  type: WidgetType
+  title: string
+  icon: string
+}
+
+interface Props {
+  widgetCount: number
+  cockpitMode: boolean
+  activeEntity: ActiveEntity | null | undefined
+  onDeactivateEntity: (() => void) | undefined
+  onReset: () => void
+  onAddWidget: (type: WidgetType) => void
+  widgetCatalog: CatalogEntry[]
+  onOpenSettings?: () => void
+  editingLayout?: boolean
+  onToggleEditLayout?: () => void
+  openEntities?: ActiveEntity[]
+  onSelectEntity?: (e: ActiveEntity) => void
+  onCloseTab?: (e: ActiveEntity) => void
+  role?: string | null
+  companies?: Array<{ id: string; name: string }>
+  effectiveCompanyId?: string
+  setCompanyId?: (id: string) => void
+  onSignOut?: () => void
+  userEmail?: string
+  rightActions?: ReactNode
+}
+
+export function Toolbar({
+  widgetCount, cockpitMode, activeEntity, onDeactivateEntity, onReset, onAddWidget,
+  widgetCatalog, onOpenSettings, editingLayout, onToggleEditLayout,
+  openEntities, onSelectEntity, onCloseTab,
+  role, companies, effectiveCompanyId, setCompanyId, onSignOut, userEmail,
+  rightActions,
+}: Props) {
+  type Dropdown = 'catalog' | 'profile' | 'company' | null
+  const [openDropdown, setOpenDropdown] = useState<Dropdown>(null)
+  const showCatalog = openDropdown === 'catalog'
+  const showProfile = openDropdown === 'profile'
+  const showCompany = openDropdown === 'company'
+  const toggleDropdown = (d: Dropdown) => setOpenDropdown(prev => prev === d ? null : d)
+
+  useMountEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpenDropdown(null)
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  })
+  const currentCompany = companies?.find(c => c.id === effectiveCompanyId)
+
+  return (
+    <div className="sticky top-0 z-20 bg-background/80 backdrop-blur border-b border-border px-3 py-1.5 flex items-center justify-between gap-2">
+      <div className="flex items-center gap-1 min-w-0 flex-1">
+        <button
+          onClick={onDeactivateEntity}
+          className={`p-1.5 rounded-md transition-colors shrink-0 ${!cockpitMode ? 'bg-accent text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-accent'}`}
+          aria-label="Inicio"
+          title="Inicio"
+        >
+          <HomeIcon className="w-3.5 h-3.5" />
+        </button>
+        {openEntities && openEntities.length > 0 ? (
+          <div className="flex items-center gap-0.5 min-w-0 overflow-x-auto scrollbar-thin">
+            {openEntities.map(e => {
+              const isActive = !!(cockpitMode && activeEntity && activeEntity.type === e.type && activeEntity.id === e.id)
+              return (
+                <button
+                  key={`${e.type}-${e.id}`}
+                  role="tab"
+                  aria-selected={isActive}
+                  className={`group flex items-center gap-1.5 pl-2 pr-1 py-1 rounded-md border text-[11px] cursor-pointer transition-colors shrink-0 max-w-[200px] ${
+                    isActive
+                      ? 'bg-primary/10 border-primary/40 text-foreground'
+                      : 'bg-background border-border text-muted-foreground hover:text-foreground hover:bg-accent/50'
+                  }`}
+                  onClick={() => onSelectEntity?.(e)}
+                >
+                  <div className={`w-1.5 h-1.5 rounded-full shrink-0 ${isActive ? 'bg-primary animate-pulse' : 'bg-muted-foreground/40'}`} />
+                  <span className="truncate">{e.label}</span>
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    onClick={(ev) => { ev.stopPropagation(); onCloseTab?.(e) }}
+                    onKeyDown={(ev) => { if (ev.key === 'Enter' || ev.key === ' ') { ev.stopPropagation(); onCloseTab?.(e) } }}
+                    className={`p-0.5 rounded-full hover:text-foreground hover:bg-accent shrink-0 transition-opacity ${isActive ? 'text-muted-foreground/60' : 'text-muted-foreground/50 opacity-0 group-hover:opacity-100'}`}
+                    aria-label={`Close ${e.label}`}
+                  >
+                    <XIcon className="w-3 h-3" />
+                  </span>
+                </button>
+              )
+            })}
+          </div>
+        ) : (
+          <span className="text-xs text-muted-foreground pl-1">{widgetCount} widgets</span>
+        )}
+      </div>
+
+      <div className="flex items-center gap-1">
+        <Button variant="ghost" size="sm" className="h-7 text-xs gap-1" onClick={onReset}>
+          <RotateCcwIcon className="w-3 h-3" /> Reset
+        </Button>
+        {onToggleEditLayout && !cockpitMode && (
+          <Button
+            variant={editingLayout ? 'default' : 'ghost'}
+            size="sm"
+            className={`h-7 text-xs gap-1 ${editingLayout ? 'bg-primary text-primary-foreground' : ''}`}
+            onClick={onToggleEditLayout}
+          >
+            {editingLayout ? <><CheckIcon className="w-3 h-3" /> Listo</> : <><LayoutGridIcon className="w-3 h-3" /> Editar</>}
+          </Button>
+        )}
+        {role === 'admin' && companies && companies.length > 1 && setCompanyId && (
+          <div className="relative">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs gap-1.5 max-w-[180px]"
+              onClick={() => toggleDropdown('company')}
+            >
+              <Building2Icon className="w-3 h-3 shrink-0" />
+              <span className="truncate">{currentCompany?.name || 'Empresa'}</span>
+              <ChevronDownIcon className="w-3 h-3 shrink-0 opacity-60" />
+            </Button>
+            {showCompany && (
+              <>
+                <div className="fixed inset-0 z-20" onClick={() => setOpenDropdown(null)} />
+                <div className="absolute right-0 top-8 bg-card border border-border rounded-lg shadow-lg p-1 z-30 w-60 max-h-80 overflow-y-auto scrollbar-thin">
+                  <div className="px-2 py-1 text-[10px] uppercase tracking-wide text-muted-foreground/60">Empresas</div>
+                  {companies.map(c => {
+                    const active = c.id === effectiveCompanyId
+                    return (
+                      <button
+                        key={c.id}
+                        onClick={() => { setCompanyId(c.id); setOpenDropdown(null) }}
+                        className={`w-full text-left px-2 py-1.5 text-sm rounded hover:bg-accent transition-colors flex items-center gap-2 ${active ? 'bg-accent/50' : ''}`}
+                      >
+                        <Building2Icon className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
+                        <span className="flex-1 truncate">{c.name}</span>
+                        {active && <CheckIcon className="w-3.5 h-3.5 text-primary shrink-0" />}
+                      </button>
+                    )
+                  })}
+                </div>
+              </>
+            )}
+          </div>
+        )}
+        {rightActions}
+        <div className="relative">
+          <Button variant="ghost" size="sm" className="h-7 text-xs gap-1" onClick={() => toggleDropdown('catalog')}>
+            <PlusIcon className="w-3 h-3" /> Agregar
+          </Button>
+          {showCatalog && (
+            <>
+            <div className="fixed inset-0 z-20" onClick={() => setOpenDropdown(null)} />
+            <div className="absolute right-0 top-8 bg-card border border-border rounded-lg shadow-lg p-1 z-30 w-40">
+              {widgetCatalog.map(w => (
+                <button
+                  key={w.type}
+                  onClick={() => { onAddWidget(w.type); setOpenDropdown(null) }}
+                  className="w-full text-left px-3 py-1.5 text-sm rounded hover:bg-accent transition-colors flex items-center gap-2"
+                >
+                  <span>{w.icon}</span> {w.title}
+                </button>
+              ))}
+            </div>
+            </>
+          )}
+        </div>
+        {onSignOut && (
+          <div className="relative ml-1">
+            <Button variant="ghost" size="sm" className="h-7 w-7 p-0" onClick={() => toggleDropdown('profile')} aria-label="Perfil">
+              <UserIcon className="w-3.5 h-3.5" />
+            </Button>
+            {showProfile && (
+              <>
+                <div className="fixed inset-0 z-20" onClick={() => setOpenDropdown(null)} />
+                <div className="absolute right-0 top-8 bg-card border border-border rounded-lg shadow-lg p-1 z-30 w-48">
+                  {userEmail && (
+                    <div className="px-3 py-1.5 text-[11px] text-muted-foreground truncate border-b border-border/50 mb-1">{userEmail}</div>
+                  )}
+                  {onOpenSettings && (
+                    <button
+                      onClick={() => { setOpenDropdown(null); onOpenSettings() }}
+                      className="w-full text-left px-3 py-1.5 text-sm rounded hover:bg-accent transition-colors flex items-center gap-2"
+                    >
+                      <SettingsIcon className="w-3.5 h-3.5" /> Configuracion
+                    </button>
+                  )}
+                  <ThemeToggleRow />
+                  <div className="border-t border-border/50 mt-1 pt-1">
+                    <button
+                      onClick={() => { setOpenDropdown(null); onSignOut() }}
+                      className="w-full text-left px-3 py-1.5 text-sm rounded hover:bg-accent transition-colors flex items-center gap-2"
+                    >
+                      <LogOutIcon className="w-3.5 h-3.5" /> Salir
+                    </button>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function ThemeToggleRow() {
+  const { theme, setTheme } = useTheme()
+  const next: Record<Theme, Theme> = { light: 'dark', dark: 'system', system: 'light' }
+  const Icon = theme === 'dark' ? MoonIcon : theme === 'light' ? SunIcon : MonitorIcon
+  const label = theme === 'dark' ? 'Oscuro' : theme === 'light' ? 'Claro' : 'Auto'
+
+  return (
+    <button
+      onClick={() => setTheme(next[theme])}
+      className="w-full text-left px-3 py-1.5 text-sm rounded hover:bg-accent transition-colors flex items-center gap-2"
+    >
+      <Icon className="w-3.5 h-3.5" /> Tema: {label}
+    </button>
+  )
+}

package/core-web/src/components/shell/persistence.ts

@@ -0,0 +1,20 @@
+import type { WidgetInstance } from './types'
+
+const KEY = 'proto-shell'
+
+export function loadShellState(): { widgets: WidgetInstance[]; layouts: any } | null {
+  try {
+    const raw = localStorage.getItem(KEY)
+    return raw ? JSON.parse(raw) : null
+  } catch { return null }
+}
+
+export function saveShellState(widgets: WidgetInstance[], layouts: any) {
+  try {
+    localStorage.setItem(KEY, JSON.stringify({ widgets, layouts }))
+  } catch {}
+}
+
+export function clearShellState() {
+  localStorage.removeItem(KEY)
+}

package/core-web/src/components/shell/types.ts

@@ -0,0 +1,14 @@
+export type WidgetType = string
+
+export interface WidgetInstance {
+  id: string
+  type: WidgetType
+  title: string
+  props?: Record<string, any>
+}
+
+export interface ActiveEntity {
+  type: string
+  id: string
+  label: string
+}

package/core-web/src/components/ui/avatar.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+const Avatar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('relative flex h-8 w-8 shrink-0 overflow-hidden rounded-full', className)} {...props} />
+  )
+)
+Avatar.displayName = 'Avatar'
+
+const AvatarFallback = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)} {...props} />
+  )
+)
+AvatarFallback.displayName = 'AvatarFallback'
+
+export { Avatar, AvatarFallback }

package/core-web/src/components/ui/badge.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+const variantStyles = {
+  default: 'bg-primary text-primary-foreground',
+  secondary: 'bg-secondary text-secondary-foreground',
+  destructive: 'bg-destructive/10 text-destructive',
+  outline: 'border border-border text-foreground',
+}
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: keyof typeof variantStyles
+}
+
+function Badge({ className, variant = 'default', ...props }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+        variantStyles[variant],
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Badge }

package/core-web/src/components/ui/button.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+const variantStyles = {
+  default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+  destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+  outline: 'border border-border bg-background hover:bg-accent hover:text-accent-foreground',
+  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+  ghost: 'hover:bg-accent hover:text-accent-foreground',
+  link: 'text-primary underline-offset-4 hover:underline',
+}
+
+const sizeStyles = {
+  default: 'h-9 px-4 py-2',
+  sm: 'h-8 rounded-md px-3 text-xs',
+  lg: 'h-11 rounded-md px-8',
+  icon: 'h-9 w-9',
+}
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: keyof typeof variantStyles
+  size?: keyof typeof sizeStyles
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'default', size = 'default', ...props }, ref) => (
+    <button
+      className={cn(
+        'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:w-4 [&_svg]:h-4',
+        variantStyles[variant],
+        sizeStyles[size],
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+)
+Button.displayName = 'Button'
+export { Button }

package/core-web/src/components/ui/card.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('rounded-xl border bg-card text-card-foreground', className)} {...props} />
+  )
+)
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-4', className)} {...props} />
+  )
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-4 pt-0', className)} {...props} />
+  )
+)
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-4 pt-0', className)} {...props} />
+  )
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardContent, CardFooter }

package/core-web/src/components/ui/inline-edit.tsx

@@ -0,0 +1,120 @@
+import { useCallback, useRef, useState } from 'react'
+import { Pencil, Check, X } from 'lucide-react'
+
+interface InlineEditProps {
+  value: string | null | undefined
+  onSave: (next: string) => Promise<void> | void
+  placeholder?: string
+  className?: string
+  inputClassName?: string
+  /** Render the display value when not editing. Defaults to plain text. */
+  display?: (value: string) => React.ReactNode
+  /** Allow empty string to clear the field. Defaults to true. */
+  allowEmpty?: boolean
+  /** Input type (text, date, number). Defaults to text. */
+  type?: 'text' | 'date' | 'number'
+}
+
+/**
+ * Hover to reveal a pencil icon, click to edit inline. Enter or check icon
+ * saves, Escape or X discards. Keeps display markup flexible via `display`.
+ */
+export function InlineEdit({
+  value,
+  onSave,
+  placeholder = '—',
+  className = '',
+  inputClassName = '',
+  display,
+  allowEmpty = true,
+  type = 'text',
+}: InlineEditProps) {
+  const [editing, setEditing] = useState(false)
+  const [draft, setDraft] = useState(value ?? '')
+  const [saving, setSaving] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // Sync draft when value changes externally while not editing
+  const prevValueRef = useRef(value)
+  if (prevValueRef.current !== value) {
+    prevValueRef.current = value
+    if (!editing) setDraft(value ?? '')
+  }
+
+  // Callback ref: auto-focus and select when the input mounts (editing starts)
+  const inputCallbackRef = useCallback((node: HTMLInputElement | null) => {
+    (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node
+    if (node) {
+      node.focus()
+      node.select()
+    }
+  }, [])
+
+  const commit = async () => {
+    const next = draft.trim()
+    if (!allowEmpty && next === '') { setEditing(false); return }
+    if (next === (value ?? '')) { setEditing(false); return }
+    try {
+      setSaving(true)
+      await onSave(next)
+      setEditing(false)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const cancel = () => {
+    setDraft(value ?? '')
+    setEditing(false)
+  }
+
+  if (editing) {
+    return (
+      <span className={`inline-flex items-center gap-1 ${className}`}>
+        <input
+          ref={inputCallbackRef}
+          type={type}
+          value={draft}
+          disabled={saving}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') commit()
+            if (e.key === 'Escape') cancel()
+          }}
+          onBlur={commit}
+          className={`bg-background border border-primary/50 rounded px-1.5 py-0.5 outline-none focus:border-primary ${inputClassName}`}
+        />
+        <button
+          onMouseDown={(e) => { e.preventDefault(); commit() }}
+          className="text-emerald-600 hover:text-emerald-500 shrink-0"
+          disabled={saving}
+          aria-label="Guardar"
+        >
+          <Check className="h-3 w-3" />
+        </button>
+        <button
+          onMouseDown={(e) => { e.preventDefault(); cancel() }}
+          className="text-muted-foreground hover:text-foreground shrink-0"
+          disabled={saving}
+          aria-label="Cancelar"
+        >
+          <X className="h-3 w-3" />
+        </button>
+      </span>
+    )
+  }
+
+  const shown = value && value.trim() !== '' ? value : placeholder
+  return (
+    <span
+      className={`group inline-flex items-center gap-1 cursor-text ${className}`}
+      onClick={() => setEditing(true)}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => { if (e.key === 'Enter') setEditing(true) }}
+    >
+      <span className="truncate">{display && value ? display(value) : shown}</span>
+      <Pencil className="h-3 w-3 opacity-0 group-hover:opacity-60 transition-opacity shrink-0" />
+    </span>
+  )
+}

package/core-web/src/components/ui/input.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      className={cn(
+        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+)
+Input.displayName = 'Input'
+export { Input }

package/core-web/src/components/ui/scroll-area.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+const ScrollArea = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => (
+    <div ref={ref} className={cn('relative overflow-auto', className)} {...props}>
+      {children}
+    </div>
+  )
+)
+ScrollArea.displayName = 'ScrollArea'
+export { ScrollArea }

package/core-web/src/components/ui/separator.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical'
+}
+
+const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
+  ({ className, orientation = 'horizontal', ...props }, ref) => (
+    <div
+      ref={ref}
+      role="separator"
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = 'Separator'
+export { Separator }

package/core-web/src/components/ui/shell-dialog.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { XIcon } from 'lucide-react'
+import { cn } from '../../lib/utils'
+
+interface ShellDialogProps {
+  open: boolean
+  onClose: () => void
+  title?: ReactNode
+  description?: ReactNode
+  children: ReactNode
+  className?: string
+}
+
+/**
+ * Dialog scoped to the shell (#shell-root) instead of the full viewport,
+ * so the chat panel stays visible. Backdrop-blur + fade-in, shadcn vibes.
+ */
+export function ShellDialog({ open, onClose, title, description, children, className }: ShellDialogProps) {
+  const [mounted, setMounted] = useState(false)
+  const [target, setTarget] = useState<HTMLElement | null>(null)
+
+  useEffect(() => {
+    setTarget(document.getElementById('shell-root'))
+  }, [open])
+
+  useEffect(() => {
+    if (!open) { setMounted(false); return }
+    const id = requestAnimationFrame(() => setMounted(true))
+    return () => cancelAnimationFrame(id)
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [open, onClose])
+
+  if (!open || !target) return null
+
+  return createPortal(
+    <div
+      className={cn(
+        'absolute inset-0 z-50 flex items-center justify-center p-6',
+        'bg-background/60 backdrop-blur-sm transition-opacity duration-150',
+        mounted ? 'opacity-100' : 'opacity-0'
+      )}
+      onClick={onClose}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className={cn(
+          'relative bg-card border border-border rounded-lg shadow-lg',
+          'w-full max-w-lg max-h-[90%] flex flex-col',
+          'transition-all duration-150',
+          mounted ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0',
+          className
+        )}
+      >
+        <button
+          onClick={onClose}
+          className="absolute right-3 top-3 text-muted-foreground/60 hover:text-foreground"
+          aria-label="Cerrar"
+        >
+          <XIcon className="w-4 h-4" />
+        </button>
+        {(title || description) && (
+          <div className="px-5 pt-5 pb-3 border-b border-border/50 shrink-0">
+            {title && <h2 className="text-base font-semibold">{title}</h2>}
+            {description && <p className="text-xs text-muted-foreground mt-1">{description}</p>}
+          </div>
+        )}
+        <div className="p-5 flex-1 min-h-0 overflow-y-auto scrollbar-thin">{children}</div>
+      </div>
+    </div>,
+    target
+  )
+}

package/core-web/src/components/ui/skeleton.tsx

@@ -0,0 +1,9 @@
+import { cn } from '../../lib/utils'
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />
+  )
+}
+
+export { Skeleton }

package/core-web/src/components/ui/textarea.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      className={cn(
+        'flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+)
+Textarea.displayName = 'Textarea'
+export { Textarea }