@softize/opus 12.2.1 → 12.4.0

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

@@ -101,11 +101,11 @@ render(
 )
 ```
 
-## Densidade
+## Escala relativa
 
-> A base é 15px: o `html` da casa fixa o rem, e TODA a escala (texto, spacing, radius) deriva
-> dele — a UI densifica ~6% vs o default do browser (16px). Nada de font-size solto em px nos
-> componentes; quem quiser outra densidade sobrescreve o `html` no app.
+> O Opus não define a fonte raiz. Cada `rem` acompanha o documento, portanto o navegador e a
+> aplicação continuam responsáveis pela densidade. Uma aplicação pode ajustar `font-size` em
+> `html`; texto, espaçamento, radius, foco e elevação acompanham a mesma decisão.
 
 ## Radius
 
@@ -118,12 +118,12 @@ render(
 render(
   <div className="flex flex-wrap gap-4">
     {[
-      ['rounded-xs', 'radius − 6px'],
-      ['rounded-sm', 'radius − 4px'],
-      ['rounded-md', 'radius − 2px'],
+      ['rounded-xs', 'radius − 0.375rem'],
+      ['rounded-sm', 'radius − 0.25rem'],
+      ['rounded-md', 'radius − 0.125rem'],
       ['rounded-lg', 'radius (0.75rem)'],
-      ['rounded-xl', 'radius + 4px'],
-      ['rounded-2xl', 'radius + 8px'],
+      ['rounded-xl', 'radius + 0.25rem'],
+      ['rounded-2xl', 'radius + 0.5rem'],
     ].map(([cls, calc]) => (
       <div key={cls} className="flex items-center gap-3">
         <div className={'h-12 w-12 border-2 border-foreground/30 bg-muted ' + cls} />

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

@@ -20,6 +20,32 @@ O mesmo componente, com espaço de sobra: sem tooltip, sem atributo, só o texto
 </div>
 ```
 
+## Corte por esmaecimento
+
+`fade` troca as reticências por um gradiente: o texto segue até a borda da caixa e desaparece
+ali. A medição é a mesma, então o esmaecimento e a dica aparecem juntos, só quando há texto
+escondido.
+
+```tsx preview
+<div className="w-48 rounded-md border p-2">
+  <Truncate fade>relatorio-consolidado-vendas-pos-vendas-2026-julho-final-v3.xlsx</Truncate>
+</div>
+```
+
+Uma composição que precisa do esmaecimento sem o tooltip aplica a utilitária `truncate-fade`,
+que cobre o último `1.5rem` da caixa, e decide quando ligá-la com o hook `useOverflowing` — a
+mesma medição que este componente usa. A máscara pressupõe corte real: em texto que cabe
+inteiro, ela esmaeceria o fim de uma palavra visível. É assim que o rótulo do `SidebarItem`
+funciona.
+
+```tsx
+const { ref, overflowing } = useOverflowing<HTMLSpanElement>(label)
+
+<span ref={ref} className={cn('overflow-hidden whitespace-nowrap', overflowing && 'truncate-fade')}>
+  {label}
+</span>
+```
+
 ## Conteúdo da dica
 
 `tooltip` sobrepõe o conteúdo mostrado no hover (default: os próprios children) — útil

package/src/ui/docs/doc.tsx

@@ -30,7 +30,7 @@ function InlineMd({ text }: { text: string }): React.ReactElement {
       {parts.map((part, i) =>
         i % 2 === 1 ? (
           // eslint-disable-next-line react/no-array-index-key
-          <code key={i} className="rounded-[calc(var(--radius)-4px)] bg-muted px-1.5 py-0.5 font-mono text-[0.85em]">
+          <code key={i} className="rounded-[calc(var(--radius)-0.25rem)] bg-muted px-1.5 py-0.5 font-mono text-[0.85em]">
             {part}
           </code>
         ) : (

package/src/ui/docs/registry.tsx

@@ -50,6 +50,8 @@ import confirmMd from './content/confirm.md?raw'
 import aspectRatioMd from './content/aspect-ratio.md?raw'
 import avatarMd from './content/avatar.md?raw'
 import badgeMd from './content/badge.md?raw'
+import dotMd from './content/dot.md?raw'
+import dockMd from './content/dock.md?raw'
 import breadcrumbMd from './content/breadcrumb.md?raw'
 import buttonMd from './content/button.md?raw'
 import buttonGroupMd from './content/button-group.md?raw'
@@ -357,6 +359,8 @@ export const UI_SECTIONS: DocSection[] = [
         pages: [
           { slug: 'avatar', title: 'Avatar', render: comp('Avatar', 'avatar', avatarMd) },
           { slug: 'badge', title: 'Badge', render: comp('Badge', 'badge', badgeMd) },
+          { slug: 'dot', title: 'Dot', render: comp('Dot', 'dot', dotMd) },
+          { slug: 'dock', title: 'Dock', render: comp('Dock', 'dock', dockMd) },
           { slug: 'carousel', title: 'Carousel', render: comp('Carousel', 'carousel', carouselMd) },
           { slug: 'copyable', title: 'Copyable', render: comp('Copyable', 'copyable', copyableMd) },
           { slug: 'item', title: 'Item', render: comp('Item', 'item', itemMd) },

package/src/ui/lib/overflow.ts

@@ -0,0 +1,34 @@
+import * as React from 'react'
+
+/**
+ * Diz se uma linha única de texto não cabe na própria caixa (`scrollWidth > clientWidth`).
+ * A medida é refeita quando a caixa muda de tamanho e quando o conteúdo passado em `content`
+ * muda — o ResizeObserver enxerga a CAIXA, não o texto que entra nela.
+ *
+ * É o que separa o corte real do corte suposto: quem consome liga o sinal de truncamento
+ * (reticências, esmaecimento, tooltip) só quando existe texto escondido.
+ */
+export function useOverflowing<T extends HTMLElement>(content?: React.ReactNode): {
+  ref: React.RefObject<T | null>
+  overflowing: boolean
+} {
+  const ref = React.useRef<T>(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()
+  }, [measure, content])
+
+  return { ref, overflowing }
+}

package/src/ui/meta.ts

@@ -29,11 +29,23 @@ export const componentMeta = {
     whenToUse:
       'Rótulo curto de status/categoria. `variant` pra intenção (default/secondary/destructive/outline) ou tom de status (success/warning/info, fill tingido). Não-interativo — pra clique, use Button ou `asChild` num <a>.',
   },
+  'dot': {
+    name: 'dot',
+    ancestry: 'opus',
+    whenToUse:
+      'Sinal compacto de estado quando o contexto ou o nome acessível já explica o significado. `variant` segue a intenção semântica (default/secondary/destructive/outline/success/warning/info). Passe `label` quando a cor comunicar informação; sem label, o ponto é decorativo. Para texto visível, use Badge.',
+  },
+  'dock': {
+    name: 'dock',
+    ancestry: 'opus',
+    whenToUse:
+      'Barra de ferramentas ancorada a uma superfície de trabalho — canvas, editor, preview —, quando um cabeçalho empilharia mais uma faixa de chrome sobre a trilha. Compõe Dock > DockGroup > DockAction; o estado da superfície (salvamento, versão) fica no SurfaceStatus, que flutua num canto e não pertence à barra. `position` escolhe a aresta; a divisória entre grupos é do componente. Requer TooltipProvider na raiz. Para ações de uma PÁGINA, use as `actions` do Page; para um conjunto de toggles exclusivos, ToggleGroup.',
+  },
   'button': {
     name: 'button',
     ancestry: 'shadcn',
     whenToUse:
-      'Ação clicável. `variant` define intenção (default/secondary/outline/ghost/destructive/link), `size` define altura (default/sm/lg · icon/icon-sm/icon-xs pros só-ícone, 36/32/24px) e `shape="pill"` troca somente a geometria, sem alterar cor ou hierarquia. `busy` mostra spinner e desabilita. `asChild` renderiza como outro elemento.',
+      'Ação clicável. `variant` define intenção (default/secondary/outline/ghost/destructive/link), `size` define altura (default/sm/lg · icon/icon-sm/icon-xs para os casos só-ícone, 2.25/2/1.5rem) e `shape="pill"` troca somente a geometria, sem alterar cor ou hierarquia. `busy` mostra spinner e desabilita. `asChild` renderiza como outro elemento.',
   },
   'card': {
     name: 'card',
@@ -116,7 +128,7 @@ export const componentMeta = {
     name: 'select',
     ancestry: 'opus',
     whenToUse:
-      'O seletor ÚNICO da casa: toda escolha em lista. Data-driven (`options` = { value, label, hint?, content?, group? }), nunca JSX de item. Modos por prop: `searchable`, `multiple`, `onSearch` e `native`. `variant="default"` é campo de formulário; `outline` abraça o conteúdo com borda; `ghost` abraça o conteúdo sem borda. `size` segue a régua inline (default 36px/sm 32px) e `shape="pill"` troca somente a geometria. Também aceita `icon`, `trailing`, `triggerLabel` e `clearable`.',
+      'Seletor para escolhas em lista. Recebe `options` no formato { value, label, hint?, content?, group? }, sem JSX por item. Os modos são definidos por `searchable`, `multiple`, `onSearch` e `native`. `variant="default"` funciona como campo de formulário; `outline` envolve o conteúdo com borda; `ghost` o envolve sem borda. `size` segue a régua inline (default 2.25rem/sm 2rem), e `shape="pill"` altera somente a geometria. Também aceita `icon`, `trailing`, `triggerLabel` e `clearable`.',
   },
   'separator': {
     name: 'separator',
@@ -137,7 +149,7 @@ export const componentMeta = {
     name: 'table',
     ancestry: 'shadcn',
     whenToUse:
-      'Tabela de dados. Compõe Table > (TableHeader > TableRow > TableHead, TableBody > TableRow > TableCell). Vem SEM borda externa — o datagrid da casa é a Table num wrapper "overflow-hidden rounded-lg border border-border". Pra listagem tabular — pro pattern de search use ActionList (que já monta a tabela emoldurada do spec).',
+      'Tabela de dados. Compõe Table > (TableHeader > TableRow > TableHead, TableBody > TableRow > TableCell). `variant="plain"` vem sem borda externa; `variant="framed"` aplica a moldura canônica, recorta o scroll e destaca o cabeçalho. Pra listagem tabular — pro pattern de search use ActionList.',
   },
   'tabs': {
     name: 'tabs',
@@ -167,7 +179,7 @@ export const componentMeta = {
     name: 'truncate',
     ancestry: 'opus',
     whenToUse:
-      'Texto truncado com tooltip SÓ quando transborda (medição do overflow, re-medida em resize) — substitui a composição `block truncate` + `title` sempre presente, que mostra dica até em texto que não corta. `tooltip` sobrepõe o conteúdo da dica (default: os children). Requer TooltipProvider na raiz. Pra célula de tabela, nome de arquivo, URL — qualquer linha única que pode estourar.',
+      'Texto truncado com tooltip SÓ quando transborda (medição do overflow, re-medida em resize) — substitui a composição `block truncate` + `title` sempre presente, que mostra dica até em texto que não corta. `tooltip` sobrepõe o conteúdo da dica (default: os children); `fade` troca as reticências por um esmaecimento até a borda, ligado pela mesma medição. Requer TooltipProvider na raiz. Pra célula de tabela, nome de arquivo, URL — qualquer linha única que pode estourar.',
   },
   'accordion': {
     name: 'accordion',

package/src/ui/react.tsx

@@ -135,6 +135,7 @@ export {
   TableCell,
   TableCaption,
 } from './components/primitives/table.tsx'
+export type { TableProps } from './components/primitives/table.tsx'
 
 // UM seletor: `native` (menu do SO), `searchable` (busca), `multiple` (chips) e
 // `variant="ghost"` (barra de composer) são PROPS, não componentes. Ver select.tsx.
@@ -172,6 +173,10 @@ export { ToggleGroup, ToggleGroupItem } from './components/primitives/toggle-gro
 export { Truncate } from './components/primitives/truncate.tsx'
 export type { TruncateProps } from './components/primitives/truncate.tsx'
 
+// A medição de transbordo por trás do Truncate, exposta para composições que precisam
+// do sinal de corte sem o tooltip — por exemplo, esmaecer um rótulo com `truncate-fade`.
+export { useOverflowing } from './lib/overflow.ts'
+
 // Patterns (renderizam actions a partir do spec)
 export { ActionForm, ActionFormField, useActionFormContext } from './components/patterns/form.tsx'
 export type { ActionFormProps, ActionFormFieldProps, ActionFormContextValue } from './components/patterns/form.tsx'
@@ -209,8 +214,12 @@ export type { PageProps } from './components/patterns/page.tsx'
 export { Split, Pane } from './components/patterns/split.tsx'
 export type { SplitProps, PaneProps, PaneSize, SplitLayout, SplitLayoutChange } from './components/patterns/split.tsx'
 
+// A barra de ferramentas que flutua sobre uma superfície de trabalho (canvas, editor, preview).
+export { Dock, DockGroup, DockAction, SurfaceStatus } from './components/patterns/dock.tsx'
+export type { DockProps, DockActionProps, SurfaceStatusProps } from './components/patterns/dock.tsx'
+
 // Barra lateral composicional: header/conteúdo/footer e navegação, sem possuir o layout.
-export { PaneHeader, PaneContent, PaneFooter, Sidebar, SidebarItem, SidebarNav } from './components/patterns/sidebar.tsx'
+export { PaneHeader, PaneContent, PaneFooter, Sidebar, SidebarItem, SidebarGroupLabel, SidebarNav } from './components/patterns/sidebar.tsx'
 export type { SidebarProps, SidebarItemProps, SidebarNavGroup, SidebarNavSubgroup, SidebarNavItem } from './components/patterns/sidebar.tsx'
 
 // O menu como primitivo pivotável: recolhe quando composto dentro de Sidebar.
@@ -221,3 +230,5 @@ export type { ShellNavProps, ShellNavGroup, ShellNavItem, ShellNavHeadingProps }
 // reativa da URL + navigate — sem tabela de rotas. Ver src/ui/router.ts.
 export { navigate, usePathname, useSegments, useSearchParams } from './router.ts'
 export type { NavigateOptions } from './router.ts'
+export { Dot, dotVariants } from './components/primitives/dot.tsx'
+export type { DotProps } from './components/primitives/dot.tsx'

package/src/ui/theme.css

@@ -49,7 +49,7 @@
   --destructive-foreground: hsl(0 0% 98%);
   --border: hsl(0 0% 92.5%);
   --input: hsl(0 0% 92.5%);
-  /* Ring de foco LEVE (pedido da casa): aro sutil, não um halo. Com ring-[3px] + /50,
+  /* Ring de foco LEVE (pedido da casa): aro sutil, não um halo. Com ring-[0.1875rem] + /50,
      ~86% encosta na borda (89.8%) — um sussurro de foco. */
   --ring: hsl(0 0% 86%);
   --radius: 0.75rem;
@@ -134,23 +134,23 @@
   --color-input: var(--input);
   --color-ring: var(--ring);
 
-  --radius-xs: calc(var(--radius) - 6px);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
+  --radius-xs: calc(var(--radius) - 0.375rem);
+  --radius-sm: calc(var(--radius) - 0.25rem);
+  --radius-md: calc(var(--radius) - 0.125rem);
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-xl: calc(var(--radius) + 0.25rem);
+  --radius-2xl: calc(var(--radius) + 0.5rem);
 
   /* Escala Tailwind, com receita direta para o compilador preservar modifiers `/opacity`.
      `light-dark()` mantém o peso adequado em cada tema sem uma variável intermediária. */
-  --shadow-2xs: 0 1px 2px -1px light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.12));
-  --shadow-xs: 0 1px 2px -1px light-dark(rgb(15 15 15 / 0.025), rgb(0 0 0 / 0.12)), 0 2px 4px -2px light-dark(rgb(15 15 15 / 0.035), rgb(0 0 0 / 0.18));
-  --shadow-sm: 0 2px 4px -2px light-dark(rgb(15 15 15 / 0.025), rgb(0 0 0 / 0.16)), 0 4px 8px -4px light-dark(rgb(15 15 15 / 0.04), rgb(0 0 0 / 0.28));
-  --shadow: 0 2px 6px -2px light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.16)), 0 6px 14px -6px light-dark(rgb(15 15 15 / 0.05), rgb(0 0 0 / 0.29));
-  --shadow-md: 0 4px 8px -4px light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.16)), 0 10px 28px -8px light-dark(rgb(15 15 15 / 0.065), rgb(0 0 0 / 0.3));
-  --shadow-lg: 0 6px 16px -6px light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.18)), 0 18px 48px -12px light-dark(rgb(15 15 15 / 0.07), rgb(0 0 0 / 0.3));
-  --shadow-xl: 0 8px 24px -10px light-dark(rgb(15 15 15 / 0.04), rgb(0 0 0 / 0.2)), 0 24px 64px -18px light-dark(rgb(15 15 15 / 0.08), rgb(0 0 0 / 0.34));
-  --shadow-2xl: 0 12px 32px -14px light-dark(rgb(15 15 15 / 0.05), rgb(0 0 0 / 0.22)), 0 32px 88px -24px light-dark(rgb(15 15 15 / 0.1), rgb(0 0 0 / 0.38));
+  --shadow-2xs: 0 0.0625rem 0.125rem -0.0625rem light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.12));
+  --shadow-xs: 0 0.0625rem 0.125rem -0.0625rem light-dark(rgb(15 15 15 / 0.025), rgb(0 0 0 / 0.12)), 0 0.125rem 0.25rem -0.125rem light-dark(rgb(15 15 15 / 0.035), rgb(0 0 0 / 0.18));
+  --shadow-sm: 0 0.125rem 0.25rem -0.125rem light-dark(rgb(15 15 15 / 0.025), rgb(0 0 0 / 0.16)), 0 0.25rem 0.5rem -0.25rem light-dark(rgb(15 15 15 / 0.04), rgb(0 0 0 / 0.28));
+  --shadow: 0 0.125rem 0.375rem -0.125rem light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.16)), 0 0.375rem 0.875rem -0.375rem light-dark(rgb(15 15 15 / 0.05), rgb(0 0 0 / 0.29));
+  --shadow-md: 0 0.25rem 0.5rem -0.25rem light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.16)), 0 0.625rem 1.75rem -0.5rem light-dark(rgb(15 15 15 / 0.065), rgb(0 0 0 / 0.3));
+  --shadow-lg: 0 0.375rem 1rem -0.375rem light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.18)), 0 1.125rem 3rem -0.75rem light-dark(rgb(15 15 15 / 0.07), rgb(0 0 0 / 0.3));
+  --shadow-xl: 0 0.5rem 1.5rem -0.625rem light-dark(rgb(15 15 15 / 0.04), rgb(0 0 0 / 0.2)), 0 1.5rem 4rem -1.125rem light-dark(rgb(15 15 15 / 0.08), rgb(0 0 0 / 0.34));
+  --shadow-2xl: 0 0.75rem 2rem -0.875rem light-dark(rgb(15 15 15 / 0.05), rgb(0 0 0 / 0.22)), 0 2rem 5.5rem -1.5rem light-dark(rgb(15 15 15 / 0.1), rgb(0 0 0 / 0.38));
 }
 
 /* Base canônica do consumidor — vem DAQUI, não do entry de cada app. Tailwind v4
@@ -160,15 +160,6 @@
   * {
     border-color: var(--border);
   }
-  /* Base 15px: o rem da casa — TODA a escala rem (texto, spacing, radius) deriva daqui,
-     então a UI densifica ~6% vs o default do browser (16px). Histórico (conferido no git):
-     até a 2.31.4 o pacote NÃO fixava rem (valia o 16px do browser); a 2.31.5 introduziu
-     14px; a 2.35.0 assenta em 15px — valor INÉDITO, não é revert. O 15px veio da prática:
-     a Empresa X escolheu 15px por conta própria em DOIS apps, e a exceção reincidente
-     virou default. Quem quiser mais denso sobrescreve o `html` no próprio entry. */
-  html {
-    font-size: 15px;
-  }
   /* Canvas da casa: quase-branco vem do BODY — o shell é transparente e as
      superfícies (cards, miolo flush) pintam bg-background por cima. Tinte de 25%
      de muted: separa a superfície do canvas sem virar cinza; segue o tema. */
@@ -177,6 +168,18 @@
   }
 }
 
+/* Truncamento por esmaecimento: a linha continua em direção à borda e desaparece num
+ * gradiente, em vez de terminar em reticências. A máscara ocupa o último 1.5rem da caixa,
+ * então só deve ser aplicada quando o texto REALMENTE corta — em texto que cabe, ela
+ * esmaeceria o fim de uma palavra inteira. `Truncate fade` e o rótulo do `SidebarItem`
+ * medem o transbordo antes de ligá-la. */
+@utility truncate-fade {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: clip;
+  mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
+}
+
 /* Scrollbar nativa da casa: todo scroller do documento compartilha o mesmo acabamento,
  * inclusive conteúdo renderizado por portal. Isso elimina a variação do macOS entre raiz,
  * elementos aninhados, mouse e trackpad sem trocar o mecanismo nativo nem adicionar trabalho
@@ -241,7 +244,7 @@
  * regra custom vaza pra dentro do not-prose (o CodeBlock ganhava uma SEGUNDA
  * borda no <pre>, colada na do contêiner — a "borda duplicada"). */
 .prose :where(code):not(:where(pre code, [class~='not-prose'], [class~='not-prose'] *)) {
-  border-radius: calc(var(--radius) - 4px);
+  border-radius: calc(var(--radius) - 0.25rem);
   background: var(--muted);
   padding: 0.125rem 0.375rem;
   font-weight: 400;