@softize/opus 12.5.4 → 12.6.0

package/src/ui/components/primitives/icon-picker.tsx

@@ -106,6 +106,8 @@ export interface IconPickerProps {
   disabled?: boolean
   className?: string
   id?: string
+  'aria-invalid'?: boolean
+  'aria-describedby'?: string
 }
 
 /**
@@ -122,6 +124,8 @@ export function IconPicker({
   disabled,
   className,
   id,
+  'aria-invalid': ariaInvalid,
+  'aria-describedby': ariaDescribedBy,
 }: IconPickerProps): React.ReactElement {
   const [open, setOpen] = React.useState(false)
   const Current = value !== '' ? icons[value] : undefined
@@ -133,6 +137,8 @@ export function IconPicker({
           type="button"
           id={id}
           disabled={disabled}
+          aria-invalid={ariaInvalid}
+          aria-describedby={ariaDescribedBy}
           data-slot="icon-picker"
           className={cn(
             'flex h-10 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',

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

@@ -5,14 +5,36 @@ import { Slot } from "radix-ui"
 import { cn } from '../../lib/cn.ts'
 import { Separator } from './separator.tsx'
 
-function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+const itemGroupVariants = cva("group/item-group @container/item-group flex flex-col", {
+  variants: {
+    variant: {
+      plain: "",
+      framed:
+        "overflow-hidden rounded-xl border border-border bg-card text-card-foreground [&>[data-slot=item]]:rounded-none [&>[data-slot=item-container]>[data-slot=item]]:rounded-none",
+    },
+  },
+  defaultVariants: {
+    variant: "plain",
+  },
+})
+
+const ItemGroupContext = React.createContext(false)
+
+function ItemGroup({
+  className,
+  variant = "plain",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemGroupVariants>) {
   return (
-    <div
-      role="list"
-      data-slot="item-group"
-      className={cn("group/item-group flex flex-col", className)}
-      {...props}
-    />
+    <ItemGroupContext.Provider value>
+      <div
+        role="list"
+        data-slot="item-group"
+        data-variant={variant}
+        className={cn(itemGroupVariants({ variant, className }))}
+        {...props}
+      />
+    </ItemGroupContext.Provider>
   )
 }
 
@@ -56,12 +78,16 @@ function Item({
   variant = "default",
   size = "default",
   asChild = false,
+  role,
   ...props
 }: React.ComponentProps<"div"> &
   VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const grouped = React.useContext(ItemGroupContext)
   const Comp = asChild ? Slot.Root : "div"
-  return (
+
+  const content = (
     <Comp
+      role={role ?? (!asChild && grouped ? "listitem" : undefined)}
       data-slot="item"
       data-variant={variant}
       data-size={size}
@@ -69,6 +95,18 @@ function Item({
       {...props}
     />
   )
+
+  if (asChild && grouped) {
+    return (
+      <div role="listitem" data-slot="item-container">
+        {content}
+      </div>
+    )
+  }
+
+  return (
+    content
+  )
 }
 
 const itemMediaVariants = cva(

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

@@ -57,6 +57,8 @@ interface SelectBaseProps {
   id?: string
   /** Ícone LEADING dentro do campo — identifica o filtro sem jogar o ícone ao lado. */
   icon?: React.ReactNode
+  'aria-invalid'?: boolean
+  'aria-describedby'?: string
   /** Altura: `default` (h-9, a do Input/Button) ou `sm` (h-8) pra toolbar densa. */
   size?: 'sm' | 'default'
   /** Geometria do controle; `pill` preserva a variante visual escolhida. */
@@ -155,6 +157,8 @@ function NativeSelect({
         disabled={disabled}
         value={value}
         aria-label={rest['aria-label']}
+        aria-invalid={rest['aria-invalid']}
+        aria-describedby={rest['aria-describedby']}
         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",
@@ -345,6 +349,7 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
               data-size={size}
               data-shape={shape}
               data-variant={variant}
+              aria-invalid={props['aria-invalid']}
               onClick={() => {
                 if (disabled !== true) {
                   setOpen(true)
@@ -417,6 +422,8 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                 role="combobox"
                 aria-expanded={open}
                 aria-label={props['aria-label']}
+                aria-invalid={props['aria-invalid']}
+                aria-describedby={props['aria-describedby']}
                 value={props.multiple ? '' : triggerText}
                 onChange={() => {}}
                 onFocus={() => {

package/src/ui/docs/content/action-list.md

@@ -12,6 +12,25 @@ render(
 )
 ```
 
+## Barra de filtros compartilhada
+
+`ActionFilterBar` expõe a mesma linguagem declarativa de busca, filtros e período para
+superfícies que não são listagens, como relatórios. O estado é controlado pelo consumidor;
+`onRefresh` refaz sua consulta sem alterar o recorte vigente.
+
+```tsx
+<ActionFilterBar
+  action={{ text, filters, periods }}
+  state={filterState}
+  onStateChange={setFilterState}
+  onRefresh={refetch}
+  refreshing={isLoading}
+/>
+```
+
+Busca e filtros são renderizados somente quando declarados. Períodos incluem os presets do
+contrato e o intervalo personalizado no mesmo calendário usado pela `ActionList`.
+
 ## Células custom (cells)
 
 As colunas do contrato descrevem DADOS; apresentação especial entra por cima com `cells` (chave = key da coluna). É onde vivem chips coloridos por dict, links e a coluna de ações.
@@ -49,7 +68,7 @@ periods: [
 
 ## Paginação e loading
 
-O pattern manda `limit` (= `pageSize`, default 50) e `page` no input; o handler implementa o OFFSET e devolve `total` no Paginated. O rodapé (Página X de Y · páginas numeradas com reticências · "N itens no total") aparece sempre que há total; mudar filtro/busca/sort/período volta pra página 1 (a página vive na URL: `?page=2`). No refetch com a lista já na tela, o corpo esmaece (`aria-busy`) até os dados chegarem — o skeleton é só do primeiro load.
+O pattern manda `limit` (= `pageSize`, default 50) e `page` no input; o handler implementa o OFFSET e devolve `total` no Paginated. O rodapé (Página X de Y · páginas numeradas com reticências · "N itens no total") aparece sempre que há total; mudar filtro/busca/sort/período volta pra página 1 (a página vive na URL: `?page=2`). No primeiro carregamento, `DataState` centraliza o spinner; no refetch com a lista já na tela, o corpo esmaece (`aria-busy`) até os dados chegarem.
 
 ## Multi-seleção com can (batch)
 

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

@@ -17,12 +17,12 @@ A composição completa: ItemMedia à esquerda, ItemContent (ItemTitle + ItemDes
 </Item>
 ```
 
-## Lista
+## Lista emoldurada
 
-Empilhe vários Item num ItemGroup e separe com ItemSeparator — o padrão pra listas de repositórios, agentes ou sessões.
+`ItemGroup variant="framed"` aplica a superfície canônica. Os divisores continuam explícitos com `ItemSeparator`, tanto no modo `framed` quanto no `plain` — o padrão pra listas de repositórios, agentes ou sessões.
 
 ```tsx preview col
-<ItemGroup>
+<ItemGroup variant="framed">
   <Item>
     <ItemMedia variant="icon">
       <GitBranch />
@@ -78,6 +78,7 @@ asChild funde o Item num <a> — a linha inteira vira alvo (hover no fundo). siz
 
 | Prop | Tipo | Default | Descrição |
 |---|---|---|---|
+| `variant` (ItemGroup) | `'plain' \| 'framed'` | `'plain'` | `framed` aplica moldura e superfície; `plain` mantém a composição livre. Os divisores são explícitos nos dois modos. |
 | `variant` (Item) | `'default' \| 'outline' \| 'muted'` | `'default'` | O fundo da linha — default transparente, outline com borda, muted levemente tingido. |
 | `size` (Item) | `'default' \| 'sm'` | `'default'` | O respiro interno — sm aperta o padding pra listas densas. |
 | `asChild` (Item) | `boolean` | `false` | Funde o Item no filho (ex.: <a> ou <button>) — a linha inteira vira o alvo. |

package/src/ui/meta.ts

@@ -83,6 +83,12 @@ export const componentMeta = {
     whenToUse:
       'A caixa de escrever da casa (o composer do Chat, extraído): textarea numa pílula elevada, Enter envia / Shift+Enter quebra linha, enviar dentro. Use SOZINHO quando há entrada de texto mas não um chat — ex.: o composer de criação de sessão do Maestro (sem histórico). Com `actions`, ganha uma barra embaixo pra seletores discretos à esquerda (app, agente, contexto…) — o mesmo lugar onde o Maestro põe app/task e a GB poria o agente. Sem `actions`, é a linha única de sempre. Controlado (`value`/`onChange`/`onSubmit`); `submitDisabled` gateia além de vazio/busy. Pra um chat completo (mensagens + este composer), use Chat.',
   },
+  'content-header': {
+    name: 'content-header',
+    ancestry: 'opus',
+    whenToUse:
+      'Cabeçalho semântico de uma seção de conteúdo: título, descrição, meta e ações na mesma composição. Use `variant="section"` dentro de páginas e painéis; `Page` já fornece o cabeçalho principal e não deve receber outro ContentHeader equivalente. O `level` controla a hierarquia do heading sem alterar a hierarquia visual.',
+  },
   'copyable': {
     name: 'copyable',
     ancestry: 'opus',
@@ -269,7 +275,7 @@ export const componentMeta = {
     name: 'item',
     ancestry: 'shadcn',
     whenToUse:
-      'Linha de conteúdo composta — mídia + título/descrição + ações numa linha clicável ou estática. Item é o container (`variant` default/outline/muted, `size` default/sm, `asChild` pra virar link/botão); componha ItemMedia (`variant` icon/image), ItemContent (ItemTitle + ItemDescription), ItemActions e, na borda, ItemHeader/ItemFooter. Empilhe vários num ItemGroup separados por ItemSeparator — o padrão pra listas de workspaces, agentes, repositórios e sessões.',
+      'Linha de conteúdo composta — mídia + título/descrição + ações numa linha clicável ou estática. Item é o container (`variant` default/outline/muted, `size` default/sm, `asChild` pra virar link/botão); componha ItemMedia (`variant` icon/image), ItemContent (ItemTitle + ItemDescription), ItemActions e, na borda, ItemHeader/ItemFooter. Empilhe vários num ItemGroup: `variant="framed"` aplica a moldura e a superfície; ItemSeparator declara os divisores internos tanto no modo framed quanto no plain. É o padrão pra listas de workspaces, agentes, repositórios e sessões.',
   },
   'kbd': {
     name: 'kbd',

package/src/ui/react.tsx

@@ -187,8 +187,8 @@ export type { ActionFormDialogProps } from './components/patterns/form-dialog.ts
 export { ActionFormCard } from './components/patterns/action-form-card.tsx'
 export type { ActionFormCardProps } from './components/patterns/action-form-card.tsx'
 
-export { ActionList, emptyListState, presetRange, listParamsToState, listStateToParams } from './components/patterns/list.tsx'
-export type { ActionListProps, ActionListColumn, ActionListState, ActionListView, ActionListBatchAction, ListActionLike } from './components/patterns/list.tsx'
+export { ActionFilterBar, ActionList, emptyListState, presetRange, listParamsToState, listStateToParams } from './components/patterns/list.tsx'
+export type { ActionFilterBarProps, ActionFilterState, ActionListProps, ActionListColumn, ActionListState, ActionListView, ActionListBatchAction, ListActionLike } from './components/patterns/list.tsx'
 
 export { ActionView } from './components/patterns/view.tsx'
 export type { ActionViewProps } from './components/patterns/view.tsx'
@@ -210,6 +210,14 @@ export type { DataStateProps } from './components/patterns/data-state.tsx'
 export { Page } from './components/patterns/page.tsx'
 export type { PageProps } from './components/patterns/page.tsx'
 
+// Cabeçalho de conteúdo em duas hierarquias visuais, sem impor espaçamento externo.
+export { ContentHeader } from './components/patterns/content-header.tsx'
+export type {
+  ContentHeaderProps,
+  ContentHeaderLevel,
+  ContentHeaderVariant,
+} from './components/patterns/content-header.tsx'
+
 // Layout composicional: Split decide a relação espacial; Pane carrega conteúdo com inset.
 export { Split, Pane } from './components/patterns/split.tsx'
 export type { SplitProps, PaneProps, PaneSize, SplitLayout, SplitLayoutChange } from './components/patterns/split.tsx'