@softize/opus 12.2.1 → 12.4.0

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

@@ -81,7 +81,7 @@ export function DialogHeader({ className, ...props }: React.ComponentProps<'div'
       // 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.
+      // A compensação coincide com a soma das hairlines; o divisor fica no 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',

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

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/cn.ts'
+
+export const dotVariants = cva('inline-block size-1.5 shrink-0 rounded-full', {
+  variants: {
+    variant: {
+      default: 'bg-primary',
+      secondary: 'bg-muted-foreground/45',
+      destructive: 'bg-destructive',
+      outline: 'border border-border bg-transparent',
+      success: 'bg-emerald-500',
+      warning: 'bg-amber-500',
+      info: 'bg-blue-500',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+export interface DotProps extends React.ComponentProps<'span'>, VariantProps<typeof dotVariants> {
+  /** Nome acessível quando a cor comunica estado; sem label, o ponto é decorativo. */
+  label?: string
+}
+
+/** Indicador compacto de estado; use Badge quando o texto precisar permanecer visível. */
+export function Dot({ className, variant, label, ...props }: DotProps): React.ReactElement {
+  return (
+    <span
+      data-slot="dot"
+      role={label === undefined ? undefined : 'img'}
+      aria-label={label}
+      aria-hidden={label === undefined ? true : undefined}
+      className={cn(dotVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}

package/src/ui/components/primitives/input-group.tsx

@@ -24,7 +24,7 @@ function InputGroup({ className, shape = 'default', ...props }: React.ComponentP
         "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
 
         // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[0.1875rem] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
 
         // Error state.
         "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
@@ -37,7 +37,7 @@ function InputGroup({ className, shape = 'default', ...props }: React.ComponentP
 }
 
 const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-0.3125rem)] [&>svg:not([class*='size-'])]:size-4",
   {
     variants: {
       align: {
@@ -84,10 +84,10 @@ const inputGroupButtonVariants = cva(
   {
     variants: {
       size: {
-        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-0.3125rem)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
         sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
         "icon-xs":
-          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+          "size-6 rounded-[calc(var(--radius)-0.3125rem)] p-0 has-[>svg]:p-0",
         "icon-sm": "size-8 p-0 has-[>svg]:p-0",
       },
     },

package/src/ui/components/primitives/input-otp.tsx

@@ -49,7 +49,7 @@ function InputOTPSlot({
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[0.1875rem] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}

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

@@ -14,7 +14,7 @@ export interface InputProps extends React.ComponentProps<"input"> {
 
 // O <input> CRU (sem adorno): ELE é o campo — borda, foco, ref e className moram nele.
 const bareInput =
-  "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40"
+  "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40"
 
 function Input({ className, type, icon, trailing, ...props }: InputProps) {
   // Sem adorno: o <input> cru de sempre — retrocompatível (refs, forms, InputGroupInput).
@@ -24,7 +24,7 @@ function Input({ className, type, icon, trailing, ...props }: InputProps) {
   // Adornado: o MESMO modelo flex do InputGroup/Select. A borda e o anel moram no WRAPPER
   // (disparados pelo `:focus-visible` do input interno — foco de teclado); o <input> fica
   // SEM borda e CRESCE (flex-1), e os adornos são IRMÃOS ao lado. Sem conta de pl-9/pr-9: o
-  // `px-3` + `gap` posicionam sozinhos (o trailing fica a 12px da borda, como no Select). O
+  // `px-3` + `gap` posicionam sozinhos (o trailing fica a 0.75rem da borda, como no Select). O
   // `className` estiliza o CAMPO (largura, raio, fundo, fonte), como no Select — e a fonte/
   // cor cascateiam pro <input> (um `text-xs`/`font-mono` aqui alcança o texto digitado).
   return (
@@ -32,7 +32,7 @@ function Input({ className, type, icon, trailing, ...props }: InputProps) {
       data-slot="input-wrapper"
       className={cn(
         "flex h-9 w-full min-w-0 items-center gap-1.5 rounded-md border border-input bg-transparent px-3 text-base transition-[color,box-shadow] outline-none md:text-sm dark:bg-input/30",
-        "has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-ring/50",
+        "has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-[0.1875rem] has-[input:focus-visible]:ring-ring/50",
         "has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]]:ring-destructive/20 dark:has-[input[aria-invalid=true]]:ring-destructive/40",
         "has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50",
         className,
@@ -59,8 +59,7 @@ function Input({ className, type, icon, trailing, ...props }: InputProps) {
       {trailing !== undefined && (
         // Interativo (AÇÃO, não decoração): sem pointer-events-none. O tom muted (ação
         // secundária) mora no slot — o botão ghost herda, sem sprinklar no call site. Se o
-        // trailing é BOTÃO, puxa ~6px pra o inset direito casar com o vertical (botão
-        // quadrado no canto, não flutuando a 12px), como o InputGroup.
+        // trailing é botão: aproxima 0.375rem para casar o inset horizontal com o vertical.
         <span data-slot="input-trailing" className="flex shrink-0 items-center text-muted-foreground has-[button]:-mr-1.5">
           {trailing}
         </span>

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

@@ -31,7 +31,7 @@ function ItemSeparator({
 }
 
 const itemVariants = cva(
-  "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50",
+  "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50",
   {
     variants: {
       variant: {

package/src/ui/components/primitives/radio-group.tsx

@@ -25,7 +25,7 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        "aspect-square size-4 shrink-0 rounded-full border border-input text-primary transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        "aspect-square size-4 shrink-0 rounded-full border border-input text-primary transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}

package/src/ui/components/primitives/scroll-area.tsx

@@ -16,7 +16,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>

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

@@ -52,6 +52,7 @@ interface SelectBaseProps {
   /** Texto do campo vazio. */
   placeholder?: string
   disabled?: boolean
+  /** Classes da raiz do controle, incluindo campo, ícones e ações. */
   className?: string
   id?: string
   /** Ícone LEADING dentro do campo — identifica o filtro sem jogar o ícone ao lado. */
@@ -133,7 +134,10 @@ function NativeSelect({
 }: SelectNativeProps): React.ReactElement {
   const groups = byGroup(options)
   return (
-    <div className="group/select relative w-full min-w-0 has-[select:disabled]:opacity-50" data-slot="select-wrapper">
+    <div
+      className={cn('group/select relative w-full min-w-0 has-[select:disabled]:opacity-50', className)}
+      data-slot="select-wrapper"
+    >
       {icon ? (
         <span
           className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground select-none [&_svg]:size-4"
@@ -154,10 +158,9 @@ function NativeSelect({
         onChange={(e) => onChange(e.target.value)}
         className={cn(
           "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 data-[shape=pill]:rounded-full dark:bg-input/30 dark:hover:bg-input/50",
-          'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+          'focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50',
           'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
           icon ? 'pl-9' : '',
-          className,
         )}
       >
         {placeholder !== undefined && (
@@ -468,7 +471,7 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                   // Ação no fim do campo é SECUNDÁRIA: o tom muted mora no slot (o botão
                   // ghost herda), pra não sprinklar `text-muted-foreground` em cada call
                   // site. O hover acende via o próprio `hover:text-accent-foreground` do ghost.
-                  // Botão trailing na BORDA (buscável, sem chevron): puxa ~6px pra o inset
+                  // Botão trailing na borda: aproxima 0.375rem para equilibrar o inset.
                   // direito casar com o vertical (botão quadrado no canto), como o InputGroup.
                   // Com chevron, NÃO puxa — senão cola no chevron (o `gap-1.5` do control).
                   className={cn('flex shrink-0 items-center text-muted-foreground', canSearch && 'has-[button]:-mr-1.5')}

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

@@ -15,7 +15,7 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
         className
       )}
       {...props}

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

@@ -2,11 +2,21 @@ import * as React from "react"
 
 import { cn } from '../../lib/cn.ts'
 
-function Table({ className, ...props }: React.ComponentProps<"table">) {
+export interface TableProps extends React.ComponentProps<"table"> {
+  /** `framed` aplica a moldura canônica de datagrid no contêiner da tabela. */
+  variant?: 'plain' | 'framed'
+}
+
+function Table({ className, variant = 'plain', ...props }: TableProps) {
   return (
     <div
       data-slot="table-container"
-      className="relative w-full overflow-x-auto"
+      data-variant={variant}
+      className={cn(
+        "relative w-full overflow-x-auto",
+        variant === 'framed' &&
+          'rounded-lg border border-border [&_[data-slot=table-header]]:bg-muted/20',
+      )}
     >
       <table
         data-slot="table"
@@ -68,7 +78,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[0.125rem]",
         className
       )}
       {...props}
@@ -81,7 +91,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
     <td
       data-slot="table-cell"
       className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[0.125rem]",
         className
       )}
       {...props}

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

@@ -5,7 +5,7 @@ import { Tabs as TabsPrimitive } from "radix-ui"
 import { cn } from '../../lib/cn.ts'
 
 // Divergência da casa (ejetado): o Tabs ganhou `size` — Button e Select têm `sm`, o Tabs
-// não tinha, e uma fileira densa (o header do Maestro) ficava com o segmento 4px mais alto
+// não tinha, e uma fileira densa ficava com o segmento 0.25rem mais alto
 // que os irmãos. O tamanho flui pra TabsList via contexto (a altura é dela).
 type TabsSize = "default" | "sm"
 const TabsSizeContext = React.createContext<TabsSize>("default")
@@ -37,7 +37,7 @@ const tabsListVariants = cva(
   // A altura horizontal entra como classe simples no componente (abaixo), para que um
   // `className="h-full"` do consumidor consiga substituí-la via tailwind-merge. Seletores
   // condicionais por data-size têm especificidade maior e tornavam a altura inextensível.
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none data-[variant=line]:p-0",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[0.1875rem] text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none data-[variant=line]:p-0",
   {
     variants: {
       variant: {
@@ -78,7 +78,7 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
         "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-1px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",

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

@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}

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

@@ -5,7 +5,7 @@ import { Toggle as TogglePrimitive } from "radix-ui"
 import { cn } from '../../lib/cn.ts'
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {

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

@@ -46,7 +46,7 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[0.125rem] bg-foreground fill-foreground" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )

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

@@ -1,10 +1,13 @@
 import * as React from 'react'
 import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip.tsx'
+import { useOverflowing } from '../../lib/overflow.ts'
 import { cn } from '../../lib/cn.ts'
 
 export interface TruncateProps extends React.ComponentProps<'span'> {
   /** Conteúdo do tooltip quando transborda. Default: os próprios children. */
   tooltip?: React.ReactNode
+  /** Sinaliza o corte esmaecendo o fim da linha, no lugar das reticências. */
+  fade?: boolean
 }
 
 /**
@@ -12,29 +15,15 @@ export interface TruncateProps extends React.ComponentProps<'span'> {
  * `scrollWidth > clientWidth`, re-medido em resize). Substitui a composição
  * `block truncate` + `title` sempre presente — title em texto que não corta é ruído.
  * Requer `<TooltipProvider>` na raiz do app (o esqueleto do `opus create` já monta).
+ * Com `fade`, a mesma medição decide quando esmaecer o fim da linha em vez de cortar
+ * em reticências — sem transbordo, nada é aplicado.
  */
-export function Truncate({ tooltip, children, className, ...props }: TruncateProps): React.ReactElement {
-  const ref = React.useRef<HTMLSpanElement>(null)
-  const [overflowing, setOverflowing] = React.useState(false)
-
-  const measure = React.useCallback(() => {
-    const el = ref.current
-    if (el === null) return
-    setOverflowing(el.scrollWidth > el.clientWidth)
-  }, [])
-
-  React.useLayoutEffect(() => {
-    measure()
-    const el = ref.current
-    if (el === null || typeof ResizeObserver === 'undefined') return
-    const ro = new ResizeObserver(measure)
-    ro.observe(el)
-    return () => ro.disconnect()
-    // children na dependência: texto novo re-mede (o RO só vê mudança de CAIXA).
-  }, [measure, children])
+export function Truncate({ tooltip, fade = false, children, className, ...props }: TruncateProps): React.ReactElement {
+  const { ref, overflowing } = useOverflowing<HTMLSpanElement>(children)
+  const cut = fade ? (overflowing ? 'truncate-fade' : 'overflow-hidden whitespace-nowrap') : 'truncate'
 
   const span = (
-    <span ref={ref} data-slot="truncate" className={cn('block truncate', className)} {...props}>
+    <span ref={ref} data-slot="truncate" className={cn('block', cut, className)} {...props}>
       {children}
     </span>
   )

package/src/ui/docs/DocBrowser.tsx

@@ -86,7 +86,7 @@ export function DocBrowser({
       items: g.pages.map((p) => ({
         id: p.slug,
         label: p.title,
-        badge: p.badge === undefined ? undefined : <span className="rounded border border-border/60 px-1 font-mono text-[10px] leading-tight text-muted-foreground/60">{p.badge}</span>,
+        badge: p.badge === undefined ? undefined : <span className="rounded border border-border/60 px-1 font-mono text-[0.625rem] leading-tight text-muted-foreground/60">{p.badge}</span>,
       })),
     })),
   }))

package/src/ui/docs/content/button.md

@@ -14,7 +14,7 @@ quando destrói de verdade.
 
 ## Tamanhos
 
-size icon exige aria-label (não tem texto pra ler). Os só-ícone vêm em três: `icon` (36px), `icon-sm` (32px, pra fileira densa como o header) e `icon-xs` (24px, pra ação DENTRO de um campo — o `trailing` do Input/Select).
+O tamanho icon exige `aria-label`, porque não há texto visível. Os botões só-ícone vêm em três tamanhos: `icon` (2.25rem), `icon-sm` (2rem, para uma fileira densa como o cabeçalho) e `icon-xs` (1.5rem, para uma ação dentro de um campo, como o `trailing` de Input ou Select).
 
 ```tsx preview
 <Button size="sm">Pequeno</Button>
@@ -54,7 +54,7 @@ buttonVariants serve pro caso sem filho único.
 | Prop | Tipo | Default | Descrição |
 |---|---|---|---|
 | `variant` | `'default' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive' \| 'link'` | `'default'` | A intenção da ação — define cor e peso visual. |
-| `size` | `'default' \| 'sm' \| 'lg' \| 'icon' \| 'icon-sm' \| 'icon-xs'` | `'default'` | O tamanho. Os icon* são quadrados (36/32/24px), pra botão só de ícone (com aria-label). |
+| `size` | `'default' \| 'sm' \| 'lg' \| 'icon' \| 'icon-sm' \| 'icon-xs'` | `'default'` | O tamanho. Os icon* são quadrados (2.25/2/1.5rem) para botões só de ícone, com `aria-label`. |
 | `asChild` | `boolean` | `false` | Renderiza como o filho (Radix Slot) em vez de `<button>` — pra âncoras e afins. |
 | `busy` | `boolean` | `false` | Ação em andamento (depois do clique): mostra Spinner + desabilita. Não é "carregando" de conteúdo (que é Spinner/Skeleton num nível de página). |
 | `icon` | `React.ElementType` | | Ícone à esquerda (ex.: icon={Plus}). No busy é trocado pelo Spinner — não soma. |

package/src/ui/docs/content/customization.md

@@ -28,6 +28,11 @@ divergência declarada), pra valer pra casa toda.
 O Opus deriva de `rounded-xs` a `rounded-2xl` dessa base. Assim, a marca muda a presença dos
 cantos sem substituir as utilities escolhidas pelos componentes nem criar tokens por papel.
 
+O tema não define `font-size` em `html`: a fonte raiz pertence ao navegador e à aplicação.
+Quando o produto precisa de outra densidade, declare essa escolha no CSS do app. Por exemplo,
+`html { font-size: 93.75%; }` conserva a proporção que uma raiz de 15 teria sobre a base usual
+de 16, sem transformar esse valor em uma regra da biblioteca.
+
 ## 2 · className em tudo
 
 > Todo componente termina em `cn(base, className)` com tailwind-merge: o utilitário do consumidor

package/src/ui/docs/content/dock.md

@@ -0,0 +1,69 @@
+# Dock
+
+Ferramentas ancoradas à superfície de trabalho. Um canvas ou um editor raramente comporta mais
+uma faixa de chrome no topo: a trilha da aplicação já ocupa esse papel, e um segundo cabeçalho
+empilha duas faixas com a mesma função. A Dock coloca as ações sobre a própria superfície,
+agrupadas e sempre alcançáveis.
+
+```tsx preview
+<div className="relative h-40 w-full rounded-lg border border-border bg-muted/20">
+  <Dock label="Ferramentas do fluxo">
+    <DockGroup>
+      <DockAction icon={<MousePointer2 />} label="Selecionar e mover" pressed onClick={() => {}} />
+    </DockGroup>
+    <DockGroup>
+      <DockAction icon={<Plus />} label="Adicionar etapa" onClick={() => {}} />
+      <DockAction icon={<GitBranch />} label="Adicionar condição" onClick={() => {}} />
+    </DockGroup>
+    <DockGroup>
+      <DockAction icon={<Sparkles />} label="Revisar com IA" onClick={() => {}} />
+    </DockGroup>
+  </Dock>
+  <SurfaceStatus>Salvo</SurfaceStatus>
+</div>
+```
+
+O contêiner precisa ser `relative` — a Dock se ancora nele, não na janela. `position` escolhe a
+aresta: `bottom` (centro), `bottom-left` e `bottom-right`. Uma superfície pode ter mais de uma
+barra quando os papéis são distintos, como ferramentas ao centro e controles de viewport à
+esquerda.
+
+## Grupos e divisórias
+
+A divisória entre grupos pertence ao componente: o consumidor declara `DockGroup` e a linha
+aparece entre grupos consecutivos, nunca antes do primeiro. Agrupe por intenção — modo, criação,
+IA, publicação — em vez de espalhar ícones numa fileira única.
+
+## Estado da superfície
+
+Estado não é ferramenta, e por isso não mora na barra: `SurfaceStatus` flutua num canto da mesma
+superfície — `top-right` por padrão — e recebe salvamento, versão publicada, execução percorrida.
+A região é `role="status"` com `aria-live="polite"`, então a mudança é anunciada sem roubar o foco.
+Separar os dois preserva a barra como toolbar navegável e dá ao estado um lugar estável, que não
+muda de posição conforme o número de ferramentas.
+
+Mensagem de sucesso é transitória por natureza — some depois de confirmar — enquanto falha
+permanece até o estado mudar. Essa decisão é da aplicação, que conhece o ciclo; o componente
+apenas reserva o lugar.
+
+`actions` recebe o que o recurso aberto permite fazer — em geral o mesmo menu que a linha dele
+tem na navegação. Assim a superfície deixa de ser o único lugar onde renomear ou excluir não
+alcançam o item que está na tela. Apenas o texto é região viva: anunciar o menu a cada mudança de
+estado seria ruído para quem usa leitor de tela.
+
+## Modo e execução
+
+`DockAction` sem `pressed` executa uma ação. Com `pressed`, comunica um modo ligado — o botão
+assume o preenchimento e expõe `aria-pressed`. Use `hint` quando o tooltip precisar dizer mais que
+o rótulo, que também é o nome acessível.
+
+## Teclado
+
+A barra é uma `toolbar`: as setas andam entre as ações e Home/End vão às pontas. Cada ação nomeia-se
+por tooltip, então `<TooltipProvider>` precisa existir na raiz do app — o esqueleto do `opus create`
+já monta.
+
+| Prop | Tipo | Default | O que faz |
+| --- | --- | --- | --- |
+| `position` | `'bottom' \| 'bottom-left' \| 'bottom-right'` | `'bottom'` | Aresta do contêiner onde a barra se ancora. |
+| `label` | `string` | | Nome acessível da barra. |

package/src/ui/docs/content/dot.md

@@ -0,0 +1,17 @@
+# Dot
+
+Indicador visual compacto para estados que já têm contexto. O tamanho permanece fixo; `variant`
+seleciona somente a intenção semântica. Quando a cor carrega significado, `label` fornece o nome
+acessível. Sem `label`, o ponto é decorativo.
+
+```tsx preview
+<div className="flex items-center gap-4">
+  <Dot variant="success" label="Ativo" />
+  <Dot variant="warning" label="Atenção" />
+  <Dot variant="destructive" label="Falhou" />
+  <Dot variant="info" label="Publicado" />
+  <Dot variant="secondary" aria-hidden />
+</div>
+```
+
+Use `Badge` quando o estado precisar permanecer legível sem depender do contexto ao redor.

package/src/ui/docs/content/select.md

@@ -340,3 +340,4 @@ render(
 | `size` | `'default' \| 'sm'` | `'default'` | Altura: default (h-9, a do Input e do Button) ou sm (h-8) pra toolbar densa. |
 | `disabled` | `boolean` | `false` | Esmaece e trava o controle. |
 | `id` | `string` | | Vai pro campo — pra parear com o `htmlFor` do Label. |
+| `className` | `string` | | Classes da raiz do controle, incluindo campo, ícones e ações, em todos os modos. |

package/src/ui/docs/content/sidebar.md

@@ -29,6 +29,27 @@ render(
 
 `collapsed` pertence à própria `Sidebar`; `SidebarItem`, `SidebarNav` e `ShellNav` adaptam-se automaticamente para botões `size-9` centralizados, ícones e tooltips. `PaneHeader`, `PaneContent` e `PaneFooter` são os slots do pane: a aplicação mantém a identidade e ações que lhe pertencem sem atribuí-las artificialmente à sidebar.
 
+`SidebarItem` também é a linha de árvores de navegação. `actions` e o controle formado por
+`onToggle`/`expanded` são irmãos do botão principal, portanto menus e chevrons não criam
+controles interativos aninhados. No modo recolhido, a linha conserva somente o destino com
+ícone e tooltip. No modo aberto, o chevron ocupa o lugar do ícone da pasta durante o hover da própria linha ou
+foco, e as ações ficam sobrepostas à extremidade direita: controles invisíveis não reduzem o
+espaço disponível para o rótulo. O foco comum no destino não mantém o chevron aberto;
+somente o foco visível no próprio controle o revela para navegação por teclado.
+As ações aparecem no hover da própria linha, no foco visível do próprio controle ou enquanto o menu está
+aberto; focar o destino da linha não revela as reticências.
+O rótulo que não cabe na linha desaparece num gradiente até a borda, em vez de terminar em
+reticências; a linha mede o próprio transbordo, então o rótulo que cabe inteiro fica intacto.
+O foco visível usa o mesmo anel do `Button` (`ring-2 ring-ring/50`), na linha aberta, no botão do
+rail recolhido e no chevron — sem ele a navegação por teclado cairia no anel padrão do navegador,
+que destoa do tema.
+Durante drag-and-drop, `dropPosition="before"` e `"after"` desenham uma linha sobreposta ao
+limite do item; `"inside"` realça a superfície da pasta. O indicador nunca reserva espaço.
+
+Árvores montadas por composição usam `SidebarGroupLabel` para os mesmos rótulos discretos
+que o `SidebarNav` desenha automaticamente. O heading permanece `text-sm`; hierarquia vem
+do peso médio e da cor atenuada, não de reduzir legibilidade.
+
 ```tsx
 <Sidebar collapsed={collapsed}>
   <PaneHeader><MySidebarHeader onToggle={() => setCollapsed(!collapsed)} /></PaneHeader>

package/src/ui/docs/content/table.md

@@ -38,32 +38,33 @@ A Table vem SEM borda externa — só as divisórias de linha (a última o Table
 
 ## Moldura (o datagrid da casa)
 
-A borda externa NÃO é do componente: é um wrapper `overflow-hidden rounded-lg border border-border` por fora — o estilo padrão de datagrid do back-office. O `overflow-hidden` recorta os cantos e contém o scroll horizontal; a última linha já vem sem divisória, então o quadro fecha limpo. O ActionList aplica a moldura sozinho na tabela derivada; em tabela montada à mão, é você quem embrulha.
+A variante `framed` aplica no próprio contêiner a borda externa, os cantos arredondados, o
+scroll horizontal contido e o fundo discreto do cabeçalho. A última linha já vem sem divisória,
+então o quadro fecha limpo. O ActionList continua sendo o pattern indicado para coleções
+pesquisáveis derivadas de actions `kind: 'list'`.
 
 ```tsx preview col
-<div className="w-full overflow-hidden rounded-lg border border-border">
-  <Table>
-    <TableHeader>
-      <TableRow>
-        <TableHead>Sessão</TableHead>
-        <TableHead>Agente</TableHead>
-        <TableHead className="text-right">Duração</TableHead>
-      </TableRow>
-    </TableHeader>
-    <TableBody>
-      <TableRow>
-        <TableCell className="font-medium">Importar pedidos da transportadora</TableCell>
-        <TableCell>developer</TableCell>
-        <TableCell className="text-right">42 min</TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell className="font-medium">Revisar contrato de rastreio</TableCell>
-        <TableCell>reviewer</TableCell>
-        <TableCell className="text-right">18 min</TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-</div>
+<Table variant="framed">
+  <TableHeader>
+    <TableRow>
+      <TableHead>Sessão</TableHead>
+      <TableHead>Agente</TableHead>
+      <TableHead className="text-right">Duração</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell className="font-medium">Importar pedidos da transportadora</TableCell>
+      <TableCell>developer</TableCell>
+      <TableCell className="text-right">42 min</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell className="font-medium">Revisar contrato de rastreio</TableCell>
+      <TableCell>reviewer</TableCell>
+      <TableCell className="text-right">18 min</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
 ```
 
 ## Com rodapé (TableFooter)

package/src/ui/docs/content/tabs.md

@@ -69,7 +69,7 @@ orientation=vertical no Tabs: a lista vira coluna e o traço da variante line mi
 
 ## Densidade (size)
 
-`size="sm"` no `Tabs` baixa a lista de h-9 (36px) pra h-8 (32px) — o par do `sm` que Button e Select já têm, pra uma fileira densa (toolbar, header) onde o segmento não pode ficar mais alto que os irmãos.
+`size="sm"` no `Tabs` reduz a lista de `h-9` (2.25rem) para `h-8` (2rem). É o par do `sm` de Button e Select para uma fileira densa, como uma toolbar ou um cabeçalho, em que o segmento não deve ficar mais alto que os elementos vizinhos.
 
 ```tsx preview col
 <Tabs defaultValue="preview" size="sm">