@ciromaciel/dashboard-kit 1.4.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ciromaciel/dashboard-kit",
-    "version": "1.4.0",
+    "version": "1.6.0",
     "license": "MIT",
     "type": "module",
     "description": "The components every dashboard shares: table, empty state, loading state, destructive confirm, danger zone and wordmark.",

package/src/components/ActiveResource.jsx

@@ -52,7 +52,7 @@ export function ActiveResource({ title, subtitle, tone = 'muted', mono = false }
 
             {subtitle && (
                 <Text
-                    fz={9}
+                    fz={10}
                     fw={800}
                     c={tone === 'alert' ? 'red.6' : 'gray.4'}
                     tt="uppercase"

package/src/components/DataTable.jsx

@@ -25,7 +25,7 @@ import { templateFor, ROW_PADDING, HEAD_PADDING } from './table-grid'
  * never injects the table's structure — it only says what each cell shows.
  */
 
-const HEAD = { fz: 10, fw: 800, c: 'gray.5', tt: 'uppercase', ls: '1.5px', lh: 1.4 }
+const HEAD = { fz: 10, fw: 800, c: 'gray.5', tt: 'uppercase', lts: '1.5px', lh: 1.4 }
 
 export function DataTable({ columns, rows, getRowKey, onRowClick, isRowSelected, quietSelection, getRowLabel, toolbar, footer, emptyState, loading, skeleton }) {
     const clickable = typeof onRowClick === 'function'

package/src/components/DeleteModal.jsx

@@ -162,7 +162,7 @@ export function DeleteModal({
                         fw={800}
                         c="red.6"
                         tt="uppercase"
-                        ls="1.5px"
+                        lts="1.5px"
                     >
                         {eyebrow}
                     </Text>
@@ -182,7 +182,7 @@ export function DeleteModal({
                     fz={scale.fz}
                     lh={1.15}
                     mt={12}
-                    ls="-0.04em"
+                    lts="-0.04em"
                     c="gray.9"
                     /*
                      * `break-all` only where the title IS the identifier. On the

package/src/components/EmptyState.jsx

@@ -23,7 +23,7 @@ export function EmptyState({ title, description, actionLabel, onAction }) {
                 fw={800}
                 c="gray.4"
                 tt="uppercase"
-                ls="1.5px"
+                lts="1.5px"
                 ta="center"
             >
                 {title}

package/src/components/HoldToConfirm.jsx

@@ -138,8 +138,13 @@ export function HoldToConfirmButton({ children, holdingLabel, onConfirm, disable
             {...props}
         >
             {active ? (
+                /* The countdown inherits the button's colour. It was gray.6,
+                   which on the filled red.6 variant measured about 1.3:1 —
+                   the number that says how long is left was unreadable.
+                   Explicit `inherit`, because the panel themes give Text a
+                   default colour that would otherwise win. */
                 <Text
-                    c="gray.6"
+                    c="inherit"
                     span
                     inherit
                 >

package/src/components/Metric.jsx

@@ -110,7 +110,7 @@ export function Metric({ label, value, unit, note, hint, delta, deltaSuffix = '%
                         fw={900}
                         c="gray.9"
                         lh={1}
-                        ls="-0.04em"
+                        lts="-0.04em"
                         style={{ overflowWrap: 'anywhere' }}
                     >
                         {value ?? '—'}
@@ -134,7 +134,7 @@ export function Metric({ label, value, unit, note, hint, delta, deltaSuffix = '%
                 fw={800}
                 c="gray.4"
                 tt="uppercase"
-                ls="1.5px"
+                lts="1.5px"
                 lh={1.4}
                 mt={12}
             >

package/src/components/MoreResults.jsx

@@ -77,7 +77,7 @@ export function MoreResults({ loading, hasMore, onLoadMore, shown, total, noun =
                     fw={800}
                     c="gray.4"
                     tt="uppercase"
-                    ls="1.5px"
+                    lts="1.5px"
                 >
                     {total} {total === 1 ? noun : plural} · fim da lista
                 </Text>
@@ -103,7 +103,7 @@ export function MoreResults({ loading, hasMore, onLoadMore, shown, total, noun =
                             fw={800}
                             c="gray.4"
                             tt="uppercase"
-                            ls="1.5px"
+                            lts="1.5px"
                             /* `aria-live` because a scroll-triggered load has no
                                focus: without this, a screen reader would not know
                                the list had grown. */
@@ -127,7 +127,7 @@ export function MoreResults({ loading, hasMore, onLoadMore, shown, total, noun =
                     fw={800}
                     c="gray.4"
                     tt="uppercase"
-                    ls="1.5px"
+                    lts="1.5px"
                 >
                     {shown} de {total}
                 </Text>

package/src/components/PageHeader.jsx

@@ -64,7 +64,7 @@ export function PageHeader({ crumb, title, subtitle, actions, order = 1, mb = 32
                         fw={800}
                         c="gray.4"
                         tt="uppercase"
-                        ls="1.5px"
+                        lts="1.5px"
                         lh={1.4}
                     >
                         {trilha}
@@ -91,7 +91,7 @@ export function PageHeader({ crumb, title, subtitle, actions, order = 1, mb = 32
                      */
                     fw={900}
                     lh={1}
-                    ls="-0.04em"
+                    lts="-0.04em"
                     c="gray.9"
                     style={{ overflowWrap: 'anywhere' }}
                 >

package/src/components/ResourceItem.jsx

@@ -75,7 +75,7 @@ export function ResourceItem({ icon: Icon, title, subtitle, tone = 'muted', mono
 
                 {subtitle && (
                     <Text
-                        fz={9}
+                        fz={10}
                         fw={800}
                         c={tone === 'alert' ? 'red.6' : 'gray.4'}
                         tt="uppercase"

package/src/components/SectionCard.jsx

@@ -56,7 +56,7 @@ export function SectionCard({ eyebrow, title, lead, action, children }) {
                             c="gray.4"
                             tt="uppercase"
                             mb={6}
-                            ls="1.5px"
+                            lts="1.5px"
                         >
                             {eyebrow}
                         </Text>
@@ -66,7 +66,7 @@ export function SectionCard({ eyebrow, title, lead, action, children }) {
                         fz={18}
                         fw={800}
                         lh={1.2}
-                        ls="-0.02em"
+                        lts="-0.02em"
                         c="gray.9"
                     >
                         {title}

package/src/components/SupportModal.jsx

@@ -81,14 +81,13 @@ export function useHealthCheck(enabled, apiUrl) {
 /**
  * The status light.
  *
- * `--rlg-status-up` is the system's only green, and it exists because this is
- * NOT the success of an action (that is gray.9 + IconCheck): it is the measured
- * state of an external system, and it never appears without the word next to
- * it.
+ * Green is the system's success colour (`--rlg-success`), the same one the
+ * notification and the status bars use. It never appears without the word
+ * next to it.
  */
 export function HealthRow({ health, host }) {
     const label = health.status === 'up' ? 'No ar' : health.status === 'down' ? 'Sem resposta' : 'Verificando…'
-    const color = health.status === 'up' ? 'var(--rlg-status-up)' : health.status === 'down' ? 'var(--mantine-color-red-6)' : 'var(--mantine-color-gray-4)'
+    const color = health.status === 'up' ? 'var(--rlg-success)' : health.status === 'down' ? 'var(--mantine-color-red-6)' : 'var(--mantine-color-gray-4)'
 
     return (
         <Group
@@ -111,7 +110,7 @@ export function HealthRow({ health, host }) {
                 />
                 <Text
                     fz={12}
-                    fw={600}
+                    fw={500}
                     c="gray.9"
                     lineClamp={1}
                 >
@@ -198,7 +197,7 @@ export function SupportModal({
                     fz={{ base: 26, sm: 36 }}
                     lh={1.05}
                     mt={12}
-                    ls="-0.04em"
+                    lts="-0.04em"
                     c="gray.9"
                 >
                     {title}{' '}

package/src/components/TableToolbar.jsx

@@ -124,7 +124,7 @@ export function TableToolbar({ value = '', onChange, placeholder = 'Buscar…',
                     fw={800}
                     c="gray.4"
                     tt="uppercase"
-                    ls="1.5px"
+                    lts="1.5px"
                     style={{ flexShrink: 0 }}
                     visibleFrom="sm"
                 >

package/src/components/Wordmark.jsx

@@ -40,7 +40,7 @@ export function Wordmark({ name, variant = 'mark', size, ...props }) {
             fz={size ?? (isLabel ? 11 : 28)}
             fw={isLabel ? 800 : 900}
             tt={isLabel ? 'uppercase' : undefined}
-            ls={isLabel ? '1.5px' : '-0.04em'}
+            lts={isLabel ? '1.5px' : '-0.04em'}
             lh={isLabel ? 1.4 : 1}
             c={isLabel ? 'gray.4' : 'gray.9'}
             ta="center"

package/src/components/ZenLabel.jsx

@@ -19,7 +19,7 @@ export function ZenLabel({ children, ...props }) {
             fz={11}
             fw={800}
             tt="uppercase"
-            ls="1.5px"
+            lts="1.5px"
             c="gray.4"
             lh={1.4}
             {...props}

package/src/components/notify.js

@@ -10,7 +10,7 @@ import { createElement } from 'react'
  * isn't to invent a color: it's to use the two dimensions that remain, color AND
  * glyph.
  *
- *   success  teal + IconCheck          (a confirmation mark)
+ *   success  green.6 + IconCheck       (a confirmation mark)
  *   error    red  + IconAlertCircle    (the system's chromatic exception)
  *   info     gray + IconInfoCircle     (neutral, asks for no action)
  *
@@ -43,20 +43,31 @@ const icon = Component => createElement(Component, { size: 18, stroke: 2, color:
  * 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) =>
+const show = (color, glyph, title, message, options) =>
     notifications.show({
         ...(message === undefined ? { message: title } : { title, message }),
         color,
         icon: glyph,
+        ...options,
     })
 
+/**
+ * An error stays until it is dismissed.
+ *
+ * Apple's rule is to prefer explicit dismissal over views that vanish on a
+ * timer, and WCAG 2.2.1 says the same: an error read in five seconds is an
+ * error missed by whoever looked away. Success and info still leave on their
+ * own — they ask for nothing.
+ */
+const STICKY = { autoClose: false }
+
 export const notify = {
     success(title, message) {
-        show('teal', icon(IconCheck), title, message)
+        show('green.6', icon(IconCheck), title, message)
     },
 
     error(title, message) {
-        show('red', icon(IconAlertCircle), title, message)
+        show('red', icon(IconAlertCircle), title, message, STICKY)
     },
 
     info(title, message) {

package/src/index.js

@@ -64,6 +64,7 @@ export { DangerZone } from './components/DangerZone'
 export { ZenLabel } from './components/ZenLabel'
 export { notify } from './components/notify'
 export { NOTIFICATIONS_PROPS, NOTIFY_DESCRIPTION_CSS, notificationTheme } from './components/notify-theme'
+export { panelTheme } from './theme'
 export { Wordmark } from './components/Wordmark'
 export { SupportModal, HealthRow, useHealthCheck } from './components/SupportModal'
 export { AuthLoader } from './components/AuthLoader'

package/src/theme.js

@@ -0,0 +1,443 @@
+import { createTheme, rem } from '@mantine/core'
+import { notificationTheme } from './components/notify-theme'
+
+/**
+ * The panel theme — one for every dashboard (14/10/2026).
+ *
+ * Until then each panel carried its own `theme.js`: eighteen files, seventeen of
+ * them different, copied from one another at different moments. None held a
+ * real exception — the differences were versions that stopped evolving. They
+ * all agreed on radius and font and diverged on the rest: buttons in two case
+ * styles, h2 bigger than h1, inputs at three sizes.
+ *
+ * A panel now does `export { panelTheme as theme } from '@ciromaciel/dashboard-kit'`,
+ * and an exception that is truly the product's own goes through
+ * `mergeThemeOverrides` with a comment saying why.
+ *
+ * The values come from the Zen design system (ciromaciel.click/design-system),
+ * at the PANEL density: data at 12-14px, screen title at 36px. The ramp is the
+ * same as the components-kit's; the two files must move together.
+ */
+export const panelTheme = createTheme({
+    fontFamily: 'Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    fontFamilyMonospace: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+
+    /**
+     * Radius 0 is an invariant, not a preference. A rounded corner is pure
+     * chrome — it communicates nothing, it only softens, and softening is the
+     * opposite of what massive hierarchy needs.
+     */
+    defaultRadius: 0,
+
+    /**
+     * h1 is 36px because in a panel the title shares the line with the actions
+     * and the width is controlled — it does not need to scale like a landing
+     * page's.
+     *
+     * Allowed tracking: -0.04em (display), 1px (control), 1.5px and 2px (label).
+     * Display needs to regroup; a label needs to breathe.
+     */
+    /**
+     * A ladder, each step clearly below the one above. Until 14/10/2026 every
+     * panel shipped h2 at 48px and h3 at 32px — both BIGGER than the 36px h1,
+     * the opposite of Law 2. It did not show because 29 of the 30 `order={2}`
+     * calls passed `fz` by hand; the one that trusted the theme got 48px.
+     */
+    headings: {
+        fontFamily: 'Montserrat, sans-serif',
+        fontWeight: '900',
+        sizes: {
+            h1: { fontSize: rem(36), lineHeight: '1', letterSpacing: '-0.04em' },
+            h2: { fontSize: rem(24), lineHeight: '1.1', letterSpacing: '-0.04em' },
+            h3: { fontSize: rem(18), lineHeight: '1.2', letterSpacing: '-0.02em', fontWeight: '800' },
+            h4: { fontSize: rem(15), lineHeight: '1.3', letterSpacing: '-0.02em', fontWeight: '800' },
+            h5: { fontSize: rem(13), lineHeight: '1.3', letterSpacing: '-0.02em', fontWeight: '800' },
+        },
+    },
+
+    /**
+     * Mantine's `--mantine-color-text` is `theme.black`, and no panel set it:
+     * every input, table cell and unstyled text came out #000, a black the ramp
+     * does not contain. gray.9 is the system's black.
+     */
+    black: '#11181C',
+
+    colors: {
+        /**
+         * The ramp. Steps 0-3 are surface and structure; 4-9 are ink. None of
+         * them crosses the boundary.
+         *
+         * gray.9 (#11181C) is not #000: pure black on a large screen vibrates and
+         * tires the eye. gray.4 fails AA for body text (2.6:1) — which is why it
+         * only lives in uppercase labels.
+         */
+        gray: [
+            '#FFFFFF', // 0 · App base
+            '#F9FAFB', // 1 · Alternate surface — table header, hover
+            '#F3F4F6', // 2 · Default hairline — EVERY border in the system
+            '#E5E7EB', // 3 · Mute border — quotation, disabled
+            '#9CA3AF', // 4 · Uppercase label ONLY
+            '#6B7280', // 5 · Labels, captions
+            '#4B5563', // 6 · Body — the most used color
+            '#374151', // 7 · Emphatic body, tabular data
+            '#1F2937', // 8 · Rare
+            '#11181C', // 9 · RiLiGar black — titles, metrics, filled button
+        ],
+
+        /**
+         * The system's chromatic exception. The semantics of LOSS and of error —
+         * never decoration, never the same color as success (Law 5).
+         *
+         * Success is green (below). The distinction is colour AND glyph,
+         * legible without reading the text.
+         */
+        /**
+         * Success — the measured "it worked" (14/10/2026). Green, not teal: it
+         * is the green "No ar" already used in every panel, and it separates
+         * from red better for red-green colour blindness. green.6 fills (dot,
+         * disc, bar); green.7 is the ink for text on white (5.0:1). Like red,
+         * it never appears without the word or the glyph beside it.
+         */
+        green: ['#F0FDF4', '#DCFCE7', '#BBF7D0', '#86EFAC', '#4ADE80', '#22C55E', '#16A34A', '#15803D', '#166534', '#14532D'],
+
+        red: ['#FFF5F5', '#FFE3E3', '#FFC9C9', '#FFA8A8', '#FF8787', '#FF6B6B', '#E03131', '#C92A2A', '#B02525', '#962020'],
+    },
+
+    primaryColor: 'gray',
+    primaryShade: 9,
+    autoContrast: true,
+
+    // Zen: shadows exist only for real elevation (Modal, Popover, Menu).
+    // Surfaces use a 1px gray.2 border — never a shadow.
+    shadows: {
+        xs: 'none',
+        sm: 'none',
+        md: '0 4px 20px rgba(0,0,0,0.05)',
+        lg: '0 10px 30px rgba(0,0,0,0.06)',
+        xl: '0 20px 40px rgba(0,0,0,0.08)',
+    },
+
+    other: {
+        // Small Caps Label — the "announcement" of the canonical pair.
+        zenLabel: { fz: 11, fw: 800, tt: 'uppercase', lts: '1.5px', c: 'gray.4' },
+        // Panel geometry (spec §Panel geometry).
+        panel: { sidebar: 300, sidebarCollapsed: 64, px: 48, pt: 40, pb: 80, maw: 1280, headerMb: 32, blockGap: 20 },
+        // Destructive action through persistence, not through a dialog.
+        hold: { holdMs: 3000, tickMs: 50 },
+    },
+
+    components: {
+        // --- SURFACES ---
+        /**
+         * Depth comes from surface contrast and from the 1px hairline — never
+         * from a shadow.
+         *
+         * Paper = a declared surface (the block needs to stand out from the
+         *         stage).
+         * Card  = an invisible grouping (the space is already enough). When in
+         *         doubt, Card.
+         */
+        Paper: {
+            defaultProps: { withBorder: true, shadow: 'none', radius: '0' },
+            vars: () => ({ root: { '--paper-border-color': 'var(--mantine-color-gray-2)' } }),
+        },
+        Card: {
+            defaultProps: { withBorder: true, shadow: 'none', padding: 'lg' },
+            vars: () => ({ root: { '--paper-border-color': 'var(--mantine-color-gray-2)' } }),
+        },
+        Modal: {
+            defaultProps: {
+                centered: true,
+                size: 'md',
+                padding: 'xl',
+                radius: 0,
+                overlayProps: { backgroundOpacity: 0.45 }, // no blur: glassmorphism is chrome
+            },
+            styles: {
+                title: { fontWeight: 800, fontSize: rem(16), letterSpacing: '-0.04em' },
+            },
+        },
+        Menu: {
+            defaultProps: { shadow: 'none', width: 210, withinPortal: true, radius: 0 },
+            styles: theme => ({
+                dropdown: { border: `1px solid ${theme.colors.gray[2]}` },
+                item: { fontSize: rem(13), fontWeight: 500 },
+                label: { fontSize: rem(10), fontWeight: 800, textTransform: 'uppercase', letterSpacing: '1.5px' },
+            }),
+        },
+        Popover: {
+            defaultProps: { shadow: 'none', radius: 0 },
+            styles: theme => ({ dropdown: { border: `1px solid ${theme.colors.gray[2]}` } }),
+        },
+
+        // --- DATA ---
+        /**
+         * The "data" role: 12-14px, gray.7. A 16px paragraph is comfortable; a
+         * 200-row table at 16px is impossible to scan.
+         *
+         * The app's main table is CSS Grid (see components/zen/DataTable) — fr
+         * for content, fixed px for actions, the whole row clickable. These
+         * defaults apply to the simple tables that are left.
+         */
+        Table: {
+            defaultProps: { verticalSpacing: 'sm', horizontalSpacing: 'md', withRowBorders: true },
+            styles: theme => ({
+                th: {
+                    fontSize: rem(10),
+                    fontWeight: 800,
+                    textTransform: 'uppercase',
+                    letterSpacing: '1.5px',
+                    color: theme.colors.gray[5],
+                    borderBottom: `1px solid ${theme.colors.gray[2]}`,
+                    whiteSpace: 'nowrap',
+                },
+                td: { borderBottom: `1px solid ${theme.colors.gray[2]}`, fontSize: rem(13), color: theme.colors.gray[7] },
+            }),
+        },
+        Badge: {
+            defaultProps: { size: 'sm', variant: 'outline', color: 'gray', fw: 800, radius: 0 },
+            styles: { label: { textTransform: 'uppercase', letterSpacing: '1.5px', fontSize: rem(10) } },
+        },
+        Code: {
+            styles: { root: { fontSize: rem(12) } },
+        },
+        Skeleton: {
+            // The Skeleton reproduces the content's real grid — and square
+            // corners, like everything else.
+            defaultProps: { radius: 0 },
+        },
+
+        // --- CONTROLS ---
+        /**
+         * Hierarchy without color — filled (primary) → outline (secondary) →
+         * subtle (tertiary).
+         */
+        /*
+         * This panel follows the design system here where the theme inherited from
+         * Analytics did not: a button is a LABEL in a rectangle — uppercase,
+         * 800, 1px tracking (02-tipografia), as the prototype draws it.
+         */
+        Button: {
+            defaultProps: { size: 'sm', radius: '0' },
+            styles: { root: { textTransform: 'uppercase', fontWeight: 800, letterSpacing: '1px', fontSize: rem(12) } },
+        },
+        /**
+         * `loaderProps` exists because `bars` and `oval` do not occupy the same
+         * space with the same number. The ActionIcon sizes its loader at
+         * `calc(var(--ai-size) * 0.55)` — ~15px at the `md` used here. For the
+         * `oval` that is a thin-stroked ring; for the `bars` it is a FULL 15px
+         * block, three bars painted from end to end.
+         *
+         * Next to 16px glyphs with `stroke={1.5}`, the two numbers are equal and
+         * the two visual masses are not: the loader became the heaviest element
+         * of the row, and the whole row seemed to flicker in size when an audit
+         * started.
+         *
+         * 12px gives the loader back the mass of an outline icon. Here and not
+         * in the screen because the mismatch comes from the geometry of `bars`
+         * with the `ActionIcon` — it applies to every icon button in the panel,
+         * and defined case by case it diverges again on the next one.
+         */
+        ActionIcon: {
+            defaultProps: { size: 'md', variant: 'subtle', color: 'gray', radius: 0, loaderProps: { size: 12 } },
+        },
+        /**
+         * The input's frame is the gray.2 hairline at rest and gray.9 on focus.
+         * The `unstyled` variant (used on the stage) is left out: there only the
+         * bottom border exists.
+         *
+         * THE DESCRIPTION GOES BELOW THE FIELD, not between the label and it.
+         *
+         * Mantine's default order (label → description → input) misaligns any
+         * row of side-by-side fields: a two-line description pushes its own
+         * input 34px down, and the neighbor without a description is left
+         * hanging at the top. That is what happened with "Cor de marca / Fonte /
+         * Tema" on the status page screen — three inputs at three heights.
+         *
+         * Below the field, the top of every single-line input coincides, and the
+         * alignment stops depending on how many lines each text takes up. The
+         * reading also improves: the label says what it is, the field shows the
+         * value, and the note explains — in the order in which one reads and
+         * fills it in.
+         *
+         * It applies to the whole panel, not field by field: defined here, it is
+         * invariant; done in the screen, it diverges again on the next form.
+         */
+        TextInput: {
+            defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
+            styles: (theme, props) => ({
+                label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
+                input: props.variant === 'unstyled' ? {} : { border: `1px solid ${theme.colors.gray[2]}` },
+            }),
+        },
+        /**
+         * The PasswordInput was left out when this block was written, and so it
+         * fell back to Mantine's default (`size: "md"`): on the sign-in screen,
+         * the password field was visibly larger than the e-mail one right above
+         * it — font, height and rounded corners, all different.
+         *
+         * It is not a simple input: it carries the eye button
+         * (`visibilityToggle`) and that is why it has its own component in the
+         * theme. Inheriting from `TextInput` does not happen — in Mantine each
+         * component reads its own key.
+         */
+        PasswordInput: {
+            defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
+            styles: (theme, props) => ({
+                label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
+                input: props.variant === 'unstyled' ? {} : { border: `1px solid ${theme.colors.gray[2]}` },
+            }),
+        },
+        Textarea: {
+            defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
+            styles: (theme, props) => ({
+                label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
+                input: props.variant === 'unstyled' ? {} : { border: `1px solid ${theme.colors.gray[2]}` },
+            }),
+        },
+        Select: {
+            defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
+            styles: (theme, props) => ({
+                label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
+                input: props.variant === 'unstyled' ? {} : { border: `1px solid ${theme.colors.gray[2]}` },
+            }),
+        },
+        NumberInput: {
+            defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
+            styles: theme => ({
+                label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
+                input: { border: `1px solid ${theme.colors.gray[2]}` },
+            }),
+        },
+        Autocomplete: {
+            defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
+            styles: theme => ({
+                label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
+                input: { border: `1px solid ${theme.colors.gray[2]}` },
+            }),
+        },
+        /**
+         * The TagsInput is a PILL BOX, not a simple input — and that is why it
+         * misaligned with the TextInput next to it.
+         *
+         * Mantine sizes that box by its content: empty, it measured 22px against
+         * the TextInput's 36px, and it also got larger internal breathing room.
+         * On a "Nome | Tags" row the two fields started with 6px of difference —
+         * too little to name, enough to make the row look crooked.
+         *
+         * The target of `minHeight` is the FRAME (`.mantine-PillsInput-root`),
+         * not the `input`: in this component `input` names the typing field
+         * INSIDE the pill box, and sizing it does not move the frame. That is
+         * what made the first attempt fix nothing.
+         *
+         * The box keeps growing as the tags come in, which is the right behavior
+         * — the minimum only guarantees the alignment at rest.
+         */
+        TagsInput: {
+            defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
+            styles: theme => ({
+                label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
+                input: {
+                    border: `1px solid ${theme.colors.gray[2]}`,
+                    minHeight: rem(36),
+                    display: 'flex',
+                    alignItems: 'center',
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                },
+            }),
+        },
+        ColorInput: {
+            defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
+            styles: theme => ({
+                label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
+                input: { border: `1px solid ${theme.colors.gray[2]}` },
+            }),
+        },
+        SegmentedControl: {
+            defaultProps: { size: 'xs', radius: 0, color: 'gray.9' },
+            styles: { label: { fontWeight: 700, fontSize: rem(12) } },
+        },
+        Switch: {
+            defaultProps: { size: 'sm', color: 'gray.9', radius: 0 },
+            styles: { label: { fontSize: rem(13), fontWeight: 500 } },
+        },
+        Checkbox: {
+            defaultProps: { size: 'sm', radius: 0, color: 'gray.9' },
+        },
+        // The prototype's tabs: 11px labels, uppercase, 800, 1px tracking.
+        Tabs: {
+            styles: { tab: { fontSize: rem(11), fontWeight: 800, textTransform: 'uppercase', letterSpacing: '1px', borderRadius: 0 } },
+        },
+        Kbd: {
+            defaultProps: { size: 'xs' },
+            styles: theme => ({
+                root: {
+                    fontFamily: 'var(--mantine-font-family-monospace)',
+                    fontSize: rem(10),
+                    fontWeight: 700,
+                    color: theme.colors.gray[5],
+                    backgroundColor: theme.white,
+                    border: `1px solid ${theme.colors.gray[2]}`,
+                    borderBottomColor: theme.colors.gray[2],
+                    boxShadow: 'none',
+                    borderRadius: 0,
+                },
+            }),
+        },
+        ThemeIcon: {
+            // The ThemeIcon is always square, never a circle.
+            defaultProps: { size: 'lg', variant: 'light', color: 'gray', radius: 0 },
+        },
+        Avatar: {
+            // The system's portrait is square, like the ThemeIcon above.
+            defaultProps: { radius: 0, color: 'gray' },
+        },
+        Alert: {
+            defaultProps: { variant: 'light', color: 'gray', radius: 0 },
+            styles: { title: { fontWeight: 800, fontSize: rem(12) }, message: { fontSize: rem(13) } },
+        },
+        Tooltip: {
+            defaultProps: { fz: 'xs', withArrow: false, openDelay: 300, color: 'gray.9', radius: 0 },
+        },
+        Progress: {
+            defaultProps: { size: 'sm', color: 'gray.9', radius: 0 },
+        },
+        /**
+         * `bars` as the system default, and not `oval`.
+         *
+         * This `type` applies to EVERY loader in the panel — including the one
+         * that Button and ActionIcon build on their own when they receive
+         * `loading`. And that is exactly where the `oval` failed: a ring
+         * spinning inside a 16px button is indistinguishable from a still ring,
+         * and the defect showed up side by side on the same table row — the
+         * status indicator (which already used `bars`) moving, and the one on the
+         * button next to it not.
+         *
+         * The three bars change HEIGHT at different times: the silhouette
+         * changes on every frame, so the movement is legible even at 10px and
+         * even at a glance. It is the difference between an equalizer and a
+         * spinning disc — both spin, only one communicates.
+         */
+        Loader: {
+            defaultProps: { color: 'gray', type: 'bars' },
+        },
+        // The notification comes from the kit: one shape across the apps and the SDK.
+        ...notificationTheme,
+
+        // --- TYPOGRAPHY ---
+        Title: { defaultProps: { lh: 1, c: 'gray.9' } },
+        /**
+         * A Text with no colour inherits — and what it inherits from the page is
+         * body gray.6 (`--mantine-color-text`, set in tokens.css). Until
+         * 14/10/2026 that was #000: a paragraph left without a colour came out
+         * darker than the title. A fixed `c: 'gray.6'` here would break
+         * inheritance instead — the label inside a black button, the line inside
+         * the terminal. Title says gray.9; values and emphasis say their colour.
+         */
+        Text: { defaultProps: { lh: 1.6 } },
+        Anchor: { defaultProps: { underline: 'never', fw: 500, c: 'gray.9' } },
+        List: { defaultProps: { spacing: 'xs' } },
+        Divider: { defaultProps: { color: 'gray.2' } },
+    },
+})

package/src/tokens.css

@@ -29,21 +29,18 @@
     --rlg-terminal-rule: rgba(255, 255, 255, 0.08);
 
     /*
-     * The system's only green, used by the SupportModal's status light.
+     * Success — one green for every "it worked" (14/10/2026): the notification
+     * disc, the "No ar" light, the status bars, the inline "Salvo". It used to
+     * be three (teal in notify, teal.7 in the status bars, this green in the
+     * light). `--rlg-success` fills; `--rlg-success-ink` is for text on white.
      *
-     * Five panels declared it with this same value; Auth and Storage did not —
-     * and those are exactly the two that did not yet have the modal. Without
-     * this floor the "No ar" dot would render WITH NO COLOUR at all in those
-     * two: a `var()` with no value and no fallback does not apply the property,
-     * and there is no build error and no console warning. It is the same defect
-     * as the hairline described above.
-     *
-     * It lives outside the gray ramp because this is not the success of an
-     * ACTION (that is gray.9 + IconCheck): it is the measured state of an
-     * external system. The rule that keeps the exception honest is that the
-     * colour never appears without the word beside it.
+     * `--rlg-status-up` is the old name, kept so that panels still reading it
+     * get the same green. As with red, the colour never appears without the
+     * word or the glyph beside it.
      */
-    --rlg-status-up: #16a34a;
+    --rlg-success: var(--mantine-color-green-6, #16a34a);
+    --rlg-success-ink: var(--mantine-color-green-7, #15803d);
+    --rlg-status-up: var(--rlg-success);
 }
 
 /*
@@ -56,3 +53,72 @@
 .rlg-danger:focus-visible {
     outline-color: var(--mantine-color-red-7);
 }
+
+/*
+ * The rules below are the same floor the components-kit ships in its global
+ * stylesheet. The panels don't load that sheet, so they are repeated here — the
+ * two files must move together.
+ */
+
+/*
+ * One focus ring everywhere: gray.9, 2px, 2px away, square like the element it
+ * surrounds. `.rlg-danger` above keeps the shape and changes only the colour.
+ */
+:focus-visible {
+    outline: 2px solid var(--mantine-color-gray-9);
+    outline-offset: 2px;
+}
+
+/*
+ * 44px under a finger. A panel is dense on purpose — 36px search, 36px create
+ * button, `sm` buttons — and that is right for a mouse. A thumb needs Apple's
+ * 44px (WCAG 2.5.5), so only coarse pointers get the floor.
+ */
+@media (pointer: coarse) {
+    .mantine-Button-root,
+    .mantine-ActionIcon-root,
+    .mantine-CloseButton-root {
+        min-height: 44px;
+        min-width: 44px;
+    }
+}
+
+/*
+ * Increased contrast moves the ramp one step darker where it is weakest: the
+ * gray.4 label (2.6:1) becomes gray.6, gray.5 becomes gray.7, and the gray.2
+ * hairline becomes gray.4. `:root:root` beats the `:root` Mantine injects at
+ * runtime, after this sheet.
+ */
+@media (prefers-contrast: more) {
+    :root:root {
+        --mantine-color-gray-2: #9ca3af;
+        --mantine-color-gray-3: #9ca3af;
+        --mantine-color-gray-4: #4b5563;
+        --mantine-color-gray-5: #374151;
+        --mantine-color-gray-6: #374151;
+    }
+}
+
+/*
+ * Reduced motion: the sidebar appears instead of sliding in. Background and
+ * colour fades on rows and menu items stay — a fade is what Apple asks motion
+ * to become, not something to remove.
+ */
+@media (prefers-reduced-motion: reduce) {
+    .mantine-AppShell-navbar,
+    .mantine-AppShell-main,
+    .mantine-AppShell-header {
+        transition: none !important;
+    }
+}
+
+/*
+ * The page's colour is body. `--mantine-color-text` is what every text without
+ * a colour of its own inherits — body, a Text without `c`, a table cell, a list
+ * item. It was #000 (Mantine's default `black`), darker than the title itself.
+ * `:root:root[...]` beats the `:root[...]` Mantine injects after this sheet.
+ * Same rule as the components-kit's global.css.
+ */
+:root:root[data-mantine-color-scheme='light'] {
+    --mantine-color-text: var(--mantine-color-gray-6);
+}