@softize/opus 16.0.0 → 17.0.0

package/src/ui/components/patterns/surface-header.tsx

@@ -1,7 +1,7 @@
 /**
  * Cabeçalho de superfície (interno): a anatomia que Page e Content compartilham.
  *
- * Um título, metadata opcional, uma descrição e uma região de ações que vai para o extremo oposto
+ * Um título, metadata opcional e uma região de ações que vai para o extremo oposto
  * em larguras amplas e empilha abaixo do contexto nas estreitas. Cada família escolhe quais slots
  * expõe; layout, validação e classes vivem aqui, uma vez.
  */
@@ -42,7 +42,7 @@ interface SurfaceHeaderSlots {
   leading?: ElementType | readonly ElementType[];
   title: ElementType;
   count?: ElementType;
-  description: ElementType;
+  description?: ElementType;
   actions: ElementType;
 }
 
@@ -93,7 +93,8 @@ export function SurfaceHeader({
   const leading = leadingTypes.flatMap(of);
   const titles = of(slots.title);
   const counts = slots.count === undefined ? [] : of(slots.count);
-  const descriptions = of(slots.description);
+  const descriptions =
+    slots.description === undefined ? [] : of(slots.description);
   const actionSlots = of(slots.actions);
   const recognized =
     leading.length +

package/src/ui/components/patterns/trigger.tsx

@@ -13,7 +13,7 @@
  */
 
 import type { ReactNode } from 'react'
-import { useId, useState } from 'react'
+import { useEffect, useId, useState } from 'react'
 import type { SimpleContract } from '../../../core/index.ts'
 import { useTriggerAction } from '../../drivers/react.tsx'
 import { toast } from '../primitives/sonner.tsx'
@@ -66,6 +66,8 @@ export interface ActionTriggerProps<TInput, TData> {
   }
   /** Callback adicional pós-sucesso (cache já foi invalidado). */
   onSuccess?: (data: TData) => void
+  /** Notifica o renderer que coordena bloqueio entre várias actions. */
+  onLoadingChange?: (loading: boolean) => void
   /** Ícone: o botão vira icon-only, com o `label` no tooltip e no aria-label. É a forma
    *  da ação que mora DENTRO de um item (linha, card) — o clique não vaza pro item. */
   icon?: ReactNode
@@ -85,6 +87,7 @@ export function ActionTrigger<TInput, TData>({
   disabled = false,
   confirm: confirmProp,
   onSuccess,
+  onLoadingChange,
   icon,
   itemLabel,
   className,
@@ -105,6 +108,10 @@ export function ActionTrigger<TInput, TData>({
       )
     },
   })
+  useEffect(() => {
+    onLoadingChange?.(isLoading)
+    return () => onLoadingChange?.(false)
+  }, [isLoading, onLoadingChange])
 
   const buttonLabel = label ?? (typeof action.label === 'string' ? action.label : action.name)
 

package/src/ui/components/patterns/view.tsx

@@ -7,14 +7,14 @@
  */
 
 import type { ReactNode } from 'react'
-import type { ViewAction } from '../../../core/index.ts'
+import type { ViewContract } from '../../../core/index.ts'
 import { useViewAction } from '../../drivers/react.tsx'
 import { isBusinessError, isRetryable } from '../../lib/action-errors.ts'
 import { Skeleton } from '../primitives/skeleton.tsx'
 import { EmptySurface, ErrorSurface } from './state-surface.tsx'
 
 export interface ActionViewProps<TInput, TData> {
-  action: ViewAction<TInput, TData>
+  action: ViewContract<TInput, TData>
   input: TInput
   /** Renderiza o "tem dado" — o layout é de quem compõe (composição, como no ActionForm). */
   children?: (data: TData, refetch: () => Promise<void>) => ReactNode

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

@@ -1,110 +1,144 @@
-import * as React from 'react'
-import { Command as CommandPrimitive } from 'cmdk'
-import { SearchIcon } from 'lucide-react'
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
 
-import { cn } from '../../lib/cn.ts'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from './dialog.tsx'
+import { cn } from "../../lib/cn.ts";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./dialog.tsx";
 
-function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
   return (
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CommandDialog({
-  title = 'Paleta de comandos',
-  description = 'Busque um comando para executar…',
+  title = "Paleta de comandos",
+  description = "Busque um comando para executar…",
   children,
   className,
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-  className?: string
-  showCloseButton?: boolean
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
 }) {
-  const descriptionId = React.useId()
+  const descriptionId = React.useId();
   return (
     <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <p id={descriptionId}>{description}</p>
-      </DialogHeader>
       <DialogContent
-        className={cn('overflow-hidden p-0', className)}
+        className={cn("overflow-hidden p-0", className)}
         showCloseButton={showCloseButton}
         aria-describedby={descriptionId}
       >
+        <DialogHeader className="border-b-0 px-3 py-2">
+          <DialogTitle className="text-sm">{title}</DialogTitle>
+          <p id={descriptionId} className="sr-only">
+            {description}
+          </p>
+        </DialogHeader>
         <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
     </Dialog>
-  )
+  );
 }
 
-function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
-    <div data-slot="command-input-wrapper" className="flex h-9 items-center gap-2 border-b px-3">
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
       <SearchIcon className="size-4 shrink-0 opacity-50" />
       <CommandPrimitive.Input
         data-slot="command-input"
         className={cn(
-          'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         {...props}
       />
     </div>
-  )
+  );
 }
 
-function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
   return (
     <CommandPrimitive.List
       data-slot="command-list"
-      className={cn('max-h-[18.75rem] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
+      className={cn(
+        "max-h-[18.75rem] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return <CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
 }
 
-function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
   return (
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn('-mx-1 h-px bg-border', className)}
+      className={cn("-mx-1 h-px bg-border", className)}
       {...props}
     />
-  )
+  );
 }
 
-function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
   return (
     <CommandPrimitive.Item
       data-slot="command-item"
@@ -114,17 +148,23 @@ function CommandItem({ className, ...props }: React.ComponentProps<typeof Comman
       )}
       {...props}
     />
-  )
+  );
 }
 
-function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="command-shortcut"
-      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -137,4 +177,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-}
+};