@softize/opus 8.6.6

package/src/ui/components/primitives/composer.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react'
+import { SendHorizontalIcon } from 'lucide-react'
+import { cn } from '../../lib/cn.ts'
+import { Button } from './button.tsx'
+import { Spinner } from './spinner.tsx'
+import { Textarea } from './textarea.tsx'
+
+export interface ComposerProps {
+  /** Texto (controlado): o dono do estado é o consumidor — o `<Chat>` por dentro, ou o app
+   *  (ex.: o composer de criação de sessão do Maestro, que nem tem histórico). */
+  value: string
+  onChange: (value: string) => void
+  /** Enter (sem Shift) ou o botão enviar. Só dispara quando dá pra enviar (ver `submitDisabled`). */
+  onSubmit: () => void
+  /** Trava o composer enquanto o turno/ação corre — o enviar vira spinner. */
+  busy?: boolean
+  /** Gate EXTRA de envio além de "vazio" e "busy" (ex.: falta escolher o app). Desabilita o
+   *  enviar sem esconder a barra. */
+  submitDisabled?: boolean
+  placeholder?: string
+  rows?: number
+  autoFocus?: boolean
+  /** Controles discretos na barra de ações, à ESQUERDA do enviar (seletores de app, agente,
+   *  contexto…). Presente → o composer vira DUAS LINHAS (textarea em cima, barra limpa
+   *  embaixo); ausente → linha única (textarea + enviar inline), o composer clássico do Chat.
+   *  Estilize os controles como discretos (ghost/sem borda) — a barra não é um formulário. */
+  actions?: React.ReactNode
+  className?: string
+}
+
+/**
+ * <Composer /> — a caixa de escrever da casa: textarea (Enter envia / Shift+Enter quebra
+ * linha) numa pílula elevada (rounded-card + ring-edge + shadow-card), com o enviar dentro.
+ * É o composer do `<Chat>` extraído pra ser reusável SOZINHO — o Maestro cria sessão com
+ * ele (sem chat nenhum), e a GB prende seletores nele. Com `actions`, ganha uma barra
+ * embaixo pros seletores; sem, é a linha única de sempre.
+ */
+export function Composer({
+  value,
+  onChange,
+  onSubmit,
+  busy = false,
+  submitDisabled = false,
+  placeholder = 'Escreva uma mensagem…',
+  rows = 1,
+  autoFocus,
+  actions,
+  className,
+}: ComposerProps): React.ReactElement {
+  const canSubmit = value.trim() !== '' && !busy && !submitDisabled
+  const fire = (): void => {
+    if (canSubmit) onSubmit()
+  }
+  const twoRow = actions !== undefined
+
+  const textarea = (
+    <Textarea
+      autoFocus={autoFocus}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault()
+          fire()
+        }
+      }}
+      placeholder={placeholder}
+      rows={rows}
+      className={cn(
+        // `dark:bg-transparent` sobrescreve o `dark:bg-input/30` do primitivo Textarea —
+        // dentro da pílula do composer a textarea é PLANA (herda o bg-card), sem fundo de
+        // input próprio no escuro (o `bg-transparent` sozinho não pega a variante dark).
+        'max-h-40 min-h-0 resize-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+        twoRow ? 'w-full px-1.5 py-1.5' : 'flex-1 px-0 py-2',
+      )}
+    />
+  )
+  const send = (
+    <Button
+      type="submit"
+      size="icon"
+      variant="ghost"
+      disabled={!canSubmit}
+      aria-label="Enviar"
+      className="shrink-0 text-muted-foreground hover:text-foreground"
+    >
+      {busy ? <Spinner size="sm" /> : <SendHorizontalIcon className="size-4" />}
+    </Button>
+  )
+
+  return (
+    <form
+      data-slot="composer"
+      onSubmit={(e) => {
+        e.preventDefault()
+        fire()
+      }}
+      className={cn(
+        'rounded-card bg-card ring-1 ring-edge shadow-card transition focus-within:ring-2 focus-within:ring-primary/15',
+        twoRow ? 'p-2' : 'relative flex items-end gap-2 p-2 pl-3.5',
+        className,
+      )}
+    >
+      {twoRow ? (
+        <>
+          {textarea}
+          <div data-slot="composer-actions" className="mt-1 flex items-center justify-between gap-2">
+            {/* Seletores à esquerda (discretos), enviar à direita. */}
+            <div className="flex min-w-0 items-center gap-1">{actions}</div>
+            {send}
+          </div>
+        </>
+      ) : (
+        <>
+          {textarea}
+          {send}
+        </>
+      )}
+    </form>
+  )
+}

package/src/ui/components/primitives/copyable.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { CheckIcon, CopyIcon } from 'lucide-react'
+import { cn } from '../../lib/cn.ts'
+
+export interface CopyableProps extends Omit<React.ComponentProps<'button'>, 'value'> {
+  /** O texto que vai pro clipboard no clique. */
+  value: string
+  /** Quanto tempo (ms) o feedback de "copiado" dura. Default 1500. */
+  feedbackMs?: number
+}
+
+/**
+ * Clicar-pra-copiar com feedback: copia `value` pro clipboard e troca o ícone por um
+ * check por ~1.5s. Sem filhos é um botão-ícone (bom pra toolbar/célula); com filhos, o
+ * rótulo visível + o ícone à direita. Pra IDs, tokens, slugs, URLs. No-op silencioso se
+ * o clipboard não estiver disponível (contexto inseguro/SSR).
+ */
+export function Copyable({
+  value,
+  feedbackMs = 1500,
+  children,
+  className,
+  onClick,
+  ...props
+}: CopyableProps): React.ReactElement {
+  const [copied, setCopied] = React.useState(false)
+  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  React.useEffect(() => () => clearTimeout(timer.current), [])
+  return (
+    <button
+      type="button"
+      data-slot="copyable"
+      data-copied={copied || undefined}
+      aria-label={copied ? 'Copiado' : 'Copiar'}
+      onClick={(e) => {
+        onClick?.(e)
+        void navigator.clipboard?.writeText(value).then(() => {
+          setCopied(true)
+          clearTimeout(timer.current)
+          timer.current = setTimeout(() => setCopied(false), feedbackMs)
+        })
+      }}
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    >
+      {children}
+      {copied ? <CheckIcon className="size-3.5 text-emerald-500" /> : <CopyIcon className="size-3.5" />}
+    </button>
+  )
+}

package/src/ui/components/primitives/dialog.tsx

@@ -0,0 +1,147 @@
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+import { cn } from '../../lib/cn.ts'
+
+export function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+export function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+export function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+export function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+export function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'fixed inset-0 z-50 bg-black/30 backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  /** Mostra o "X" de fechar no canto. Desligue pra um modal que exige ação explícita. */
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      {/* Superfície elevada: mantemos bg-card (divergência da casa; o shadcn usa bg-background). */}
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          // Superfície PURA: só a casca (borda/bg/raio/sombra) + coluna flex com teto de
+          // altura. O padding mora nos SLOTS (Header/Body/Footer), não aqui — assim ninguém
+          // precisa negar margem pra escapar de um p-6 embutido.
+          "fixed left-[50%] top-[50%] z-50 flex max-h-[85vh] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-dialog bg-card ring-1 ring-edge shadow-dialog duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Fechar</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+export function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      // Fixo (shrink-0), com divisor embaixo (border-b). p-5: padding igual nos quatro
+      // lados, casando com o body. O :has tira o divisor quando o header é seguido
+      // DIRETO pelo footer (confirm sem body) — senão o border-b dele encostaria no
+      // border-t do footer (2px); aí o divisor é só o do footer.
+      className={cn(
+        'flex shrink-0 flex-col gap-2 border-b p-5 text-center sm:text-left',
+        '[&:has(+[data-slot=dialog-footer])]:border-b-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export function DialogBody({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-body"
+      // O miolo que ROLA: cresce, scrolla e padda a si mesmo. Pra corpo edge-to-edge
+      // (cmdk, iframe de lente) passe `className` zerando o padding.
+      className={cn('min-h-0 flex-1 overflow-y-auto p-5', className)}
+      {...props}
+    />
+  )
+}
+
+export function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      // Faixa destacada (divergência da casa, ao estilo do site do shadcn): borda em cima
+      // + fundo muted. Sangra até as bordas sozinha — o content não tem padding, então não
+      // há -mx pra compensar; o overflow-hidden do content arredonda o canto de baixo.
+      className={cn(
+        'flex shrink-0 flex-col-reverse gap-2 border-t bg-muted/30 px-5 py-4 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg font-semibold leading-none', className)}
+      {...props}
+    />
+  )
+}
+
+export function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}

package/src/ui/components/primitives/drawer.tsx

@@ -0,0 +1,141 @@
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as DrawerPrimitive } from "radix-ui"
+
+import { cn } from '../../lib/cn.ts'
+
+function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/30 backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <DrawerPortal>
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-background shadow-dialog transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+          side === "right" &&
+            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          side === "left" &&
+            "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          side === "top" &&
+            "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          side === "bottom" &&
+            "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DrawerPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </DrawerPrimitive.Close>
+        )}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("font-semibold text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

package/src/ui/components/primitives/empty.tsx

@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from '../../lib/cn.ts'
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-lg font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}