@ciromaciel/dashboard-kit 1.0.0

package/src/components/TableToolbar.jsx

@@ -0,0 +1,136 @@
+import { useEffect, useRef } from 'react'
+import { ActionIcon, Group, Kbd, Text, TextInput, Tooltip } from '@mantine/core'
+import { IconSearch, IconX } from '@tabler/icons-react'
+
+/**
+ * A list's search — the DataTable's `toolbar`.
+ *
+ * WHERE IT LIVES, AND WHY THAT MATTERS
+ *
+ * Inside the Card, above the header, as the table's first band. The Storage put
+ * the field OUTSIDE the Card, in a `<Box>` with `borderBottom: 'none'` to fake
+ * being inside — a false frame that went out of alignment at the first
+ * breakpoint. The DataTable's `toolbar` exists precisely for this: the search is
+ * part of the table, not a loose block above it.
+ *
+ * IT STAYS ON SCREEN EVEN WITH AN EMPTY LIST. If the search disappeared along
+ * with the results, someone who typed a term with no matches would lose the
+ * very field they had just typed into and would have no way to fix it — short
+ * of reloading.
+ *
+ * THE SUPERSET OF THREE SEARCHES
+ *
+ * This is the fourth implementation, and the last: it replaces the Monitors'
+ * `BarraFerramentas` and the `Filter` components from auth and storage. Each of
+ * them had something the others didn't:
+ *
+ *   - from Monitors come `Escape` to clear and the "X de Y" label
+ *   - from the `Filter` components comes the ⌘K shortcut with focus, and the
+ *     `Kbd` that announces it
+ *   - the icon is 16px in all three (Functions used 14 in a hand-written search)
+ *
+ * ONLY ONE COMPONENT PER SCREEN MAY REGISTER ⌘K. Two listeners compete for
+ * focus and the outcome depends on mount order. On a screen with a global
+ * search (`PageHeader withSearch`), this search comes with `shortcut={false}`.
+ *
+ * @param {string}   value        - The term. Controlled by the consumer.
+ * @param {function} onChange     - Receives the new term, and '' on clear.
+ * @param {string}   placeholder  - Say WHICH fields the search runs over
+ *                                  ("Buscar por nome ou e-mail…"); "Buscar…"
+ *                                  leaves nobody knowing what to try.
+ * @param {string}   label        - The field's `aria-label`.
+ * @param {boolean}  shortcut     - Registers ⌘K. See the paragraph above.
+ * @param {number}   shown/total  - The "X de Y". Only appears when it filters
+ *                                  something.
+ * @param {node}     children     - The screen's filters (a sort Select, state
+ *                                  chips). They sit to the right of the field.
+ */
+export function TableToolbar({ value = '', onChange, placeholder = 'Buscar…', label = 'Buscar', shortcut = true, shown, total, children }) {
+    const inputRef = useRef(null)
+
+    useEffect(() => {
+        if (!shortcut) return
+        const aoTeclar = e => {
+            if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+                e.preventDefault()
+                inputRef.current?.focus()
+            }
+        }
+        window.addEventListener('keydown', aoTeclar)
+        return () => window.removeEventListener('keydown', aoTeclar)
+    }, [shortcut])
+
+    const limpar = () => {
+        onChange('')
+        inputRef.current?.focus()
+    }
+
+    // The "X de Y" only informs when the two numbers DISAGREE. Equal, it
+    // repeats what the list already shows and becomes noise in place of data.
+    const showsCount = Number.isFinite(shown) && Number.isFinite(total) && shown !== total
+
+    return (
+        <Group
+            px={{ base: 14, sm: 24 }}
+            py={12}
+            justify="space-between"
+            wrap="nowrap"
+            gap={16}
+            style={{ borderBottom: 'var(--rlg-border)' }}
+        >
+            <TextInput
+                ref={inputRef}
+                value={value}
+                onChange={e => onChange(e?.currentTarget?.value ?? '')}
+                onKeyDown={e => e.key === 'Escape' && limpar()}
+                placeholder={placeholder}
+                aria-label={label}
+                flex={1}
+                miw={0}
+                leftSection={
+                    <IconSearch
+                        size={16}
+                        stroke={1.5}
+                    />
+                }
+                rightSection={
+                    value ? (
+                        <Tooltip label="Limpar (Esc)">
+                            <ActionIcon
+                                size="sm"
+                                variant="transparent"
+                                color="gray"
+                                onClick={limpar}
+                                aria-label="Limpar busca"
+                            >
+                                <IconX
+                                    size={16}
+                                    stroke={1.5}
+                                />
+                            </ActionIcon>
+                        </Tooltip>
+                    ) : shortcut ? (
+                        <Kbd>⌘K</Kbd>
+                    ) : null
+                }
+                styles={{ input: { fontSize: 13 } }}
+            />
+
+            {children}
+
+            {showsCount && (
+                <Text
+                    fz={11}
+                    fw={800}
+                    c="gray.4"
+                    tt="uppercase"
+                    ls="1.5px"
+                    style={{ flexShrink: 0 }}
+                    visibleFrom="sm"
+                >
+                    {shown} de {total}
+                </Text>
+            )}
+        </Group>
+    )
+}

package/src/components/Terminal.jsx

@@ -0,0 +1,217 @@
+import { Box, Group, CopyButton, Tooltip, ActionIcon } from '@mantine/core'
+import { IconCopy, IconCheck } from '@tabler/icons-react'
+
+/**
+ * Terminal — a superfície escura onde o código vive.
+ *
+ * VEIO DE CINCO CÓPIAS, E DUAS ERAM BYTE-IDÊNTICAS.
+ *
+ * Storage e Messages tinham o mesmo arquivo, `md5` a `md5`. Payments diferia em
+ * ZERO linhas de código (só comentários em PT vs EN). Hoster e Auth eram a
+ * mesma coisa sem o `TerminalOutput`, e o Hoster trazia a única evolução real:
+ * `line` como token em vez de literal.
+ *
+ * Este arquivo é o superset — a versão com `TerminalOutput` e com o token.
+ *
+ * Espelha o `CodeTerminal` de @ciromaciel/components-kit (o mesmo que a landing
+ * usa em FeaturesGrid layout="split"), para que painel e site mostrem código
+ * com a mesma cara. Os valores vieram de lá, não foram escolhidos aqui.
+ *
+ * O fundo é gray.9 — a única superfície escura do sistema. Ela se justifica
+ * porque código é conteúdo citado, não interface: o contraste invertido marca
+ * "isto é a máquina falando", e é o mesmo tratamento de qualquer terminal que
+ * o desenvolvedor já tem aberto ao lado.
+ */
+const DARK = {
+    shell: 'var(--mantine-color-gray-9)',
+    bar: 'rgba(255, 255, 255, 0.06)',
+    /*
+     * O token vem de `tokens.css` do kit, com fallback ao literal que as
+     * cópias usavam. `var()` sem valor e sem fallback simplesmente não aplica
+     * a propriedade — o filete sumiria em silêncio no painel que ainda não
+     * define a variável, que é como o `--rlg-border` já quase se perdeu.
+     */
+    line: 'var(--rlg-terminal-rule, rgba(255, 255, 255, 0.10))',
+    dot: 'rgba(255, 255, 255, 0.22)',
+    label: 'rgba(255, 255, 255, 0.55)',
+    text: 'rgba(255, 255, 255, 0.92)',
+}
+
+export function Terminal({ children, label, copy = true, actions, style }) {
+    const code = typeof children === 'string' ? children : String(children ?? '')
+
+    // Linhas de shell (`$ …`) copiam só o comando: quem cola no terminal não
+    // quer o prompt junto. Sem prompt, copia tudo.
+    const prompts = code
+        .split('\n')
+        .filter(l => l.trimStart().startsWith('$ '))
+        .map(l => l.trimStart().slice(2))
+    const copyValue = prompts.length ? prompts.join('\n') : code
+
+    return (
+        <Box
+            style={{
+                border: '1px solid var(--mantine-color-gray-9)',
+                background: DARK.shell,
+                overflow: 'hidden',
+                ...style,
+            }}
+        >
+            <Group
+                justify="space-between"
+                wrap="nowrap"
+                px={14}
+                py={8}
+                style={{ borderBottom: `1px solid ${DARK.line}`, background: DARK.bar }}
+            >
+                <Group
+                    gap={6}
+                    wrap="nowrap"
+                    miw={0}
+                >
+                    {[0, 1, 2].map(i => (
+                        <Box
+                            key={i}
+                            w={9}
+                            h={9}
+                            style={{ borderRadius: '50%', background: DARK.dot, flex: 'none' }}
+                        />
+                    ))}
+                    {label && (
+                        <Box
+                            component="span"
+                            ml={8}
+                            style={{
+                                fontFamily: 'var(--mantine-font-family-monospace)',
+                                fontSize: 11,
+                                letterSpacing: '0.5px',
+                                color: DARK.label,
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                            }}
+                        >
+                            {label}
+                        </Box>
+                    )}
+                </Group>
+
+                <Group
+                    gap={4}
+                    wrap="nowrap"
+                    style={{ flex: 'none' }}
+                >
+                    {actions}
+                    {copy && (
+                        <CopyButton
+                            value={copyValue}
+                            timeout={1600}
+                        >
+                            {({ copied, copy: doCopy }) => (
+                                <Tooltip
+                                    label={copied ? 'Copiado' : 'Copiar'}
+                                    withArrow
+                                    position="left"
+                                >
+                                    <ActionIcon
+                                        variant="subtle"
+                                        size="sm"
+                                        radius="0"
+                                        onClick={doCopy}
+                                        aria-label="Copiar código"
+                                        style={{ color: copied ? DARK.text : DARK.label }}
+                                    >
+                                        {copied ? (
+                                            <IconCheck
+                                                size={14}
+                                                stroke={1.5}
+                                            />
+                                        ) : (
+                                            <IconCopy
+                                                size={14}
+                                                stroke={1.5}
+                                            />
+                                        )}
+                                    </ActionIcon>
+                                </Tooltip>
+                            )}
+                        </CopyButton>
+                    )}
+                </Group>
+            </Group>
+
+            <Box
+                component="pre"
+                m={0}
+                px={18}
+                py={16}
+                style={{
+                    fontFamily: 'var(--mantine-font-family-monospace)',
+                    fontSize: 12.5,
+                    lineHeight: 1.65,
+                    color: DARK.text,
+                    whiteSpace: 'pre',
+                    overflowX: 'auto',
+                    tabSize: 2,
+                }}
+            >
+                {code}
+            </Box>
+        </Box>
+    )
+}
+
+/** Painel de saída, sob o terminal: mesma família, tinta de resultado. */
+export function TerminalOutput({ children, label = 'output', tone = 'default' }) {
+    const color = tone === 'error' ? 'var(--mantine-color-red-4)' : DARK.text
+
+    return (
+        <Box
+            style={{
+                border: '1px solid var(--mantine-color-gray-9)',
+                borderTop: 'none',
+                background: DARK.shell,
+                overflow: 'hidden',
+            }}
+        >
+            <Box
+                px={14}
+                py={8}
+                style={{ borderBottom: `1px solid ${DARK.line}`, background: DARK.bar }}
+            >
+                <Box
+                    component="span"
+                    style={{
+                        fontFamily: 'var(--mantine-font-family-monospace)',
+                        fontSize: 10,
+                        fontWeight: 800,
+                        letterSpacing: '1.5px',
+                        textTransform: 'uppercase',
+                        color: tone === 'error' ? 'var(--mantine-color-red-4)' : DARK.label,
+                    }}
+                >
+                    {label}
+                </Box>
+            </Box>
+
+            <Box
+                component="pre"
+                m={0}
+                px={18}
+                py={14}
+                mah={180}
+                style={{
+                    fontFamily: 'var(--mantine-font-family-monospace)',
+                    fontSize: 11.5,
+                    lineHeight: 1.6,
+                    color,
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-word',
+                    overflowY: 'auto',
+                }}
+            >
+                {children}
+            </Box>
+        </Box>
+    )
+}

package/src/components/Wordmark.jsx

@@ -0,0 +1,52 @@
+import { Text } from '@mantine/core'
+
+/**
+ * The product's wordmark, in two roles.
+ *
+ * `variant="mark"` is the large signature — the waiting screen, the top of an
+ * empty page. `variant="label"` is the small label in the sidebar, which says
+ * WHERE you are without competing with the content.
+ *
+ * THE NAME COMES IN AS A PROP, and that is the only difference from the four
+ * copies this component replaces. In those, the name was a literal in the JSX —
+ * which forced every dashboard to maintain the whole file just to change one
+ * word, and that is how the four diverged in quotes, comments and styling
+ * details.
+ *
+ * `name` IS REQUIRED, and the component shouts when it's missing. Without that
+ * warning, an undefined `name` renders an empty <Text>: no build error, no
+ * console error, and the wordmark simply vanishes from the top of the sidebar.
+ * That is what happened in four dashboards when the kit's re-export replaced the
+ * local copies, which carried the literal name — and it was only discovered by
+ * looking at the screen.
+ *
+ * This also replaces the `logotipo.webp` image some sidebars were loading. The
+ * `<Image>` carries a fixed `alt`, so any load failure printed the raw word at
+ * the top of the dashboard. With no image there is no alt to leak — and the
+ * wordmark follows the theme instead of being a fixed-size bitmap.
+ */
+export function Wordmark({ name, variant = 'mark', size, ...props }) {
+    const isLabel = variant === 'label'
+
+    // A warning, not an exception: taking down the whole dashboard over the
+    // wordmark would be worse than the wordmark being missing. But it can't go
+    // by in silence either.
+    if (!name && typeof console !== 'undefined') {
+        console.warn('[dashboard-kit] <Wordmark> without `name`: the wordmark renders empty. Pass the product name.')
+    }
+
+    return (
+        <Text
+            fz={size ?? (isLabel ? 11 : 28)}
+            fw={isLabel ? 800 : 900}
+            tt={isLabel ? 'uppercase' : undefined}
+            ls={isLabel ? '1.5px' : '-0.04em'}
+            lh={isLabel ? 1.4 : 1}
+            c={isLabel ? 'gray.4' : 'gray.9'}
+            ta="center"
+            {...props}
+        >
+            {name}
+        </Text>
+    )
+}

package/src/components/ZenLabel.jsx

@@ -0,0 +1,30 @@
+import { Text } from '@mantine/core'
+
+/**
+ * The uppercase label — the light half of the canonical pair.
+ *
+ * Spec v1.0.0 (§Tokens — Typography, the "Label" role):
+ *   11px · fw 800 · uppercase · ls 1.5px · gray.4 · lh 1.4
+ *
+ * gray.4 fails AA for body text (2.6:1) and is therefore only legitimate here:
+ * short text, in caps and weight 800, redundant with the title right below it.
+ * Never in a paragraph — the audit checks exactly that.
+ *
+ * The color is NOT parameterizable on purpose: when it was, three screens
+ * started using gray.5 and the label stopped having a single color.
+ */
+export function ZenLabel({ children, ...props }) {
+    return (
+        <Text
+            fz={11}
+            fw={800}
+            tt="uppercase"
+            ls="1.5px"
+            c="gray.4"
+            lh={1.4}
+            {...props}
+        >
+            {children}
+        </Text>
+    )
+}

package/src/components/notify-theme.js

@@ -0,0 +1,103 @@
+/**
+ * The shape of a notification — what used to live copy-pasted across five theme.js files.
+ *
+ * Three pieces, meant to be used together:
+ *
+ *   NOTIFICATIONS_PROPS   the props for <Notifications /> (position and duration)
+ *   notificationTheme     the `Notification` override in the Mantine theme
+ *   NOTIFY_DESCRIPTION_CSS  the CSS rule that inline `styles` cannot express
+ *
+ * Consumers wire it up like this:
+ *
+ *   import { NOTIFICATIONS_PROPS, notificationTheme } from '@ciromaciel/dashboard-kit'
+ *   createTheme({ components: { ...notificationTheme } })
+ *   <Notifications {...NOTIFICATIONS_PROPS} />
+ */
+
+/**
+ * Where the stack appears and how long it stays.
+ *
+ * `bottom-right` for the whole stack. The top-right corner is where the header
+ * lives — the user card in the dashboards, the menu on the landings — and the
+ * notification used to be born right on top of it. Bottom-right competes with
+ * nothing, and it is where the eye already looks for confirmation of an action.
+ *
+ * The 5s is a system decision, not something inherited from the lib: Mantine's
+ * default is 4s, too short for a full sentence in Portuguese. Where the prop was
+ * missing — auth and storage — the message vanished a second before the rest of
+ * the house.
+ */
+export const NOTIFICATIONS_PROPS = {
+    position: 'bottom-right',
+    autoClose: 5000,
+}
+
+/**
+ * The surface: 1px hairline, square corners, no shadow. The card does not float.
+ *
+ * The icon disc stays FILLED — `backgroundColor` is deliberately left untouched
+ * here so that Mantine paints it with the state color. The white glyph comes
+ * from notify.js. An earlier version of this file forced
+ * `backgroundColor: transparent`; if anyone reintroduces that, the white glyph
+ * becomes invisible against the card's white.
+ *
+ * `withCloseButton` is Mantine's default and stays on: an error is the case
+ * where someone wants to read at their own pace and dismiss when done, without
+ * waiting out the 5s.
+ */
+export const notificationTheme = {
+    Notification: {
+        defaultProps: {
+            withBorder: true,
+            radius: 0,
+            classNames: { description: 'rlg-notification-description' },
+        },
+        styles: theme => ({
+            root: {
+                boxShadow: 'none',
+                border: `1px solid ${theme.colors.gray[2]}`,
+                '--notification-radius': '0',
+            },
+            icon: {
+                width: 28,
+                height: 28,
+                marginInlineEnd: 'var(--mantine-spacing-sm)',
+                /*
+                 * The glyph is white HERE, and not only in notify.js, because
+                 * not every notification goes through it: dozens of legacy calls
+                 * hand-build `notifications.show({ icon: <IconX size={16} /> })`
+                 * with no color. Without this line the SVG inherits the state
+                 * color and turns into an icon the same color as its own disc —
+                 * the ~1:1 contrast this file exists to prevent.
+                 *
+                 * `currentColor` is what Tabler uses by default for `stroke`, so
+                 * painting the inherited color is enough.
+                 */
+                color: 'var(--mantine-color-white)',
+            },
+            title: {
+                fontWeight: 800,
+                fontSize: '13px',
+                letterSpacing: '-0.02em',
+                color: theme.colors.gray[9],
+            },
+            description: {
+                fontSize: '13px',
+                color: theme.colors.gray[6],
+            },
+        }),
+    },
+}
+
+/**
+ * With no title, Mantine treats the message as a description and paints it with
+ * `--mantine-color-black` — the pure black that the system ramp does not
+ * contain. It is an attribute selector, which inline `styles` cannot reach; that
+ * is why it ships as a string, for the app to paste into its global CSS.
+ *
+ * The weight does NOT go up to 600: the message is usually a whole sentence, and
+ * a whole sentence in bold shouts.
+ */
+export const NOTIFY_DESCRIPTION_CSS = `.rlg-notification-description:not([data-with-title]) {
+    color: var(--mantine-color-gray-9);
+}`

package/src/components/notify.js

@@ -0,0 +1,65 @@
+import { notifications } from '@mantine/notifications'
+import { IconAlertCircle, IconCheck, IconInfoCircle } from '@tabler/icons-react'
+import { createElement } from 'react'
+
+/**
+ * State feedback, in the only pair of colors the system has.
+ *
+ * The spec forbids color outside the gray ramp — there is no green. But Law 5
+ * requires error and success to be distinguishable WITHOUT READING. The way out
+ * isn't to invent a color: it's to use the two dimensions that remain, color AND
+ * glyph.
+ *
+ *   success  teal + IconCheck          (a confirmation mark)
+ *   error    red  + IconAlertCircle    (the system's chromatic exception)
+ *   info     gray + IconInfoCircle     (neutral, asks for no action)
+ *
+ * THE GLYPH IS WHITE, AND THE DISC CARRIES THE STATE COLOR. That pairing is the
+ * whole point, and the two halves live in different files: the filled disc comes
+ * from `notify-theme.js` (which deliberately does NOT touch `backgroundColor`,
+ * so Mantine paints it with the state color), and the white glyph comes from
+ * here.
+ *
+ * An earlier version passed the SAME color to the icon's disc (the `color` prop,
+ * which becomes --notification-color) and to the glyph drawn inside it — success
+ * came out #11181C on #141414 (1.03:1) and error, #E03131 on #E03131 (1.00:1).
+ * The two states that matter most arrived as an empty circle: the
+ * distinction-without-reading that Law 5 requires simply did not exist.
+ *
+ * So the two files must move together. Painting the glyph the state color here,
+ * or forcing `backgroundColor: transparent` there, brings the ~1:1 contrast
+ * straight back.
+ *
+ * The value of `color` also can't be 'dark': that ramp doesn't exist in
+ * theme.colors and falls back to Mantine's stock palette (#141414), exactly what
+ * this file was written to eliminate.
+ */
+const icon = Component => createElement(Component, { size: 18, stroke: 2, color: 'var(--mantine-color-white)' })
+
+/**
+ * Half the calls pass only one argument (`notify.info('Copiado')`). That text is
+ * the MESSAGE, not the title: sending it as `title` leaves the description
+ * empty, and Mantine then paints the text with the `:not([data-with-title])`
+ * rule — `--mantine-color-black`, a pure black the system's ramp does not
+ * contain (gray.9 is #11181C precisely to avoid it).
+ */
+const show = (color, glyph, title, message) =>
+    notifications.show({
+        ...(message === undefined ? { message: title } : { title, message }),
+        color,
+        icon: glyph,
+    })
+
+export const notify = {
+    success(title, message) {
+        show('teal', icon(IconCheck), title, message)
+    },
+
+    error(title, message) {
+        show('red', icon(IconAlertCircle), title, message)
+    },
+
+    info(title, message) {
+        show('gray', icon(IconInfoCircle), title, message)
+    },
+}

package/src/components/table-grid.js

@@ -0,0 +1,27 @@
+/**
+ * The table's geometry — values from spec §Table.
+ *
+ * It lives outside DataTable.jsx so that file exports only components (a Fast
+ * Refresh requirement) and, above all, so the skeleton derives the grid from the
+ * SAME source as the table: the two have no way to diverge if they read the same
+ * expression.
+ */
+export const ROW_PADDING = '14px var(--rlg-table-px, 24px)'
+export const HEAD_PADDING = '12px var(--rlg-table-px, 24px)'
+
+/**
+ * The column widths become the gridTemplateColumns string.
+ *
+ * Each flexible track becomes `minmax(0, Nfr)`: without the zero minimum, an
+ * `fr` track never shrinks below its own content (a <Code> or a date won't
+ * wrap), and the grid overflows the Card's width — which has overflow hidden and
+ * cuts off the actions column. Fixed widths (`44px`) pass through untouched.
+ */
+export function templateFor(columns) {
+    return columns
+        .map(c => {
+            const width = c.width || '1fr'
+            return width.endsWith('fr') ? `minmax(0, ${width})` : width
+        })
+        .join(' ')
+}

package/src/hooks/useExclusiveModal.js

@@ -0,0 +1,49 @@
+import { useCallback, useMemo, useState } from 'react'
+
+/**
+ * Um modal de cada vez.
+ *
+ * VEIO DE SETE CÓPIAS, TRÊS DELAS BYTE-IDÊNTICAS.
+ *
+ * A única diferença de CÓDIGO entre as sete era `export function` (cinco) vs
+ * `export default function` (Storage e Auth) — o resto era o mesmo comentário
+ * traduzido. O do Monitors chegava a dizer, sobre a própria cópia: "copiado sem
+ * mudança dos painéis do Hoster, Payments e Messages — se o controlador de
+ * modal aqui divergisse do deles, o sistema teria dois".
+ *
+ * Cada modal como seu próprio booleano (`docsOpened`, `supportOpened`, …) deixa
+ * a exclusão por conta de quem escreve a próxima tela: basta abrir um sem
+ * fechar o outro e os dois empilham, com o de baixo aparecendo pelas beiradas
+ * do de cima. Aconteceu com Docs e Suporte — dois cartões sobrepostos, dois
+ * overlays somando escuro, e o Esc fechando só o de cima.
+ *
+ * Aqui o estado não é "quais estão abertos", é "qual está aberto": um `id` ou
+ * `null`. Abrir o segundo substitui o primeiro em vez de somar, porque não há
+ * onde somar. A regra vale por construção, não por disciplina.
+ *
+ * @returns {{
+ *   current: string | null,
+ *   isOpen: (id: string) => boolean,
+ *   open: (id: string) => void,
+ *   close: () => void,
+ *   modalProps: (id: string) => { opened: boolean, onClose: () => void },
+ * }}
+ */
+export function useExclusiveModal() {
+    const [current, setCurrent] = useState(null)
+
+    const open = useCallback(id => setCurrent(id), [])
+    const close = useCallback(() => setCurrent(null), [])
+    const isOpen = useCallback(id => current === id, [current])
+
+    /**
+     * O par `opened`/`onClose` que todo Modal do Mantine pede.
+     *
+     * Espalhar isto (`{...modalProps('docs')}`) em vez de escrever os dois à
+     * mão tira o descuido mais fácil de cometer: `onClose` que zera o booleano
+     * errado, ou que esquece de zerar.
+     */
+    const modalProps = useCallback(id => ({ opened: current === id, onClose: close }), [current, close])
+
+    return useMemo(() => ({ current, isOpen, open, close, modalProps }), [current, isOpen, open, close, modalProps])
+}