TextSkeleton and HeadingSkeleton baked w-full into their shared base.
Under tailwind-variants/lite (no tailwind-merge) that collided with the
caller's width class and won by stylesheet order, so every skeleton
ignored its width: bars stretched full in column contexts and collapsed
in flex rows.
Drop w-full from the base so the single caller width applies, matching
ButtonSkeleton/AvatarSkeleton. Size the compliance-portal TopBar and
Hero skeleton bars to roughly match their English copy, and add a rule
so skeleton widths are revisited when en-US strings change.
Signed-off-by: Émile Ré <emile@probo.com>
The solid color rules in the Button, IconButton, and Badge variant
matrices had no highContrast condition, so a high-contrast solid element
matched both the base rule and the high-contrast rule. With
tailwind-variants/lite (no tailwind-merge) both classes are emitted, and
a static text-white from the base wins over the theme-aware text step.
That looked fine in light mode but left illegible white text on the
light step-12 background once dark mode was enabled.
Gate the base solid rules on highContrast:false so the self-contained
high-contrast rules are authoritative. The tinted variants are left as
is: their step-11/step-12 text both flip with the theme, so they are
never illegible.
Signed-off-by: Émile Ré <emile@probo.com>
Round out the button family with the two navigational siblings described
in the UI guide: Anchor renders a styled <a> for external links and Link
renders a react-router link for in-app navigation, both sharing Button's
tv styles. Add an `active` look variant so nav items can carry a
persistent selected state without forking structure.
Signed-off-by: Émile Ré <emile@probo.com>
Implement the Card component from the Probo Radix UI Figma: a <div>
container with size 1-5 (padding + radius), the surface/classic/ghost
variants, and an interactive hover/active affordance. Add a CardInset
part that bleeds content (e.g. a cover image) to the card edges,
reading the card size from context so it negates the matching
padding. Includes a paired CardSkeleton. Styling uses
tailwind-variants/lite.
Signed-off-by: Émile Ré <emile@probo.com>
Implement the Dropdown Menu family from the Probo Radix UI Figma on
top of Base UI's Menu primitive, exported as flat Dropdown* parts:
Dropdown (root), DropdownTrigger, DropdownPopup, DropdownItem (with
shortcut and accent/error color), DropdownCheckboxItem,
DropdownRadioGroup/RadioItem, DropdownGroup/GroupLabel,
DropdownSeparator, and DropdownSubmenu/SubmenuTrigger.
The popup carries size (1-2), variant (solid/soft highlight), and
highContrast to its items through a small context. Styling uses
tailwind-variants/lite with data-[highlighted] selectors; item
shortcuts inherit the contrast color on highlight.
Signed-off-by: Émile Ré <emile@probo.com>
Implement the Callout component from the Probo Radix UI Figma: a
short contextual message with a leading icon (defaults to an info
icon), with size 1-3, the soft/surface/outline variants across the
sand/gold/red/green/amber/sky scales, and highContrast. Includes a
paired CalloutSkeleton. Styling uses tailwind-variants/lite slots
(root/icon/text).
Signed-off-by: Émile Ré <emile@probo.com>
Implement the Badge component from the Probo Radix UI Figma: a
non-interactive <span> with size 1-3, the solid/soft/surface/outline
variants across the sand/gold/red/green/amber/sky scales with
highContrast, and an optional iconStart. Corner radius is bound to
size. Includes a paired BadgeSkeleton. Styling uses
tailwind-variants/lite.
Signed-off-by: Émile Ré <emile@probo.com>
Implement the IconButton component from the Probo Radix UI Figma: a
square, icon-only <button> sharing Button's size 1-4 and
variant/color/highContrast matrix, with a loading spinner state. The
single icon is passed as children; callers provide an aria-label.
Corner radius is bound to size. Includes a paired IconButtonSkeleton.
Signed-off-by: Émile Ré <emile@probo.com>
Implement the Button component from the Probo Radix UI Figma: a
<button> with size 1-4, the classic/solid/soft/surface/outline/ghost
variants across the sand/gold/red/green/amber/sky scales with
highContrast, iconStart/iconEnd slots, and a loading state that
shows only a spinner. Corner radius is bound to size per the design
(radius is theme-global, not a per-instance prop). Includes a paired
ButtonSkeleton. Styling uses tailwind-variants/lite.
Signed-off-by: Émile Ré <emile@probo.com>
Implement the Avatar component from the Probo Radix UI Figma on top
of Base UI's avatar primitive (image load + fallback). It supports
size 1-9, solid/soft variants across the sand/gold/red/green/amber/
sky scales with highContrast, a radius scale, and a fallback node
for initials or an icon, plus a paired AvatarSkeleton. Styling uses
tailwind-variants/lite slots (root/image/fallback).
Add @base-ui/react to @probo/ui — the first v2 component built on a
Base UI primitive.
Signed-off-by: Émile Ré <emile@probo.com>
Implement the Heading primitive from the Probo Radix UI Figma: it
renders the semantic h1–h6 chosen by a numeric level prop (driving
the document outline) while size controls the visual scale
independently, defaulting to size 6 / bold weight per the design.
Add a paired HeadingSkeleton and a story.
Factor the shared size/weight/align/color variants and the color ×
highContrast compound variants out of the Text tv so Text and
Heading differ only in their defaults.
Signed-off-by: Émile Ré <emile@probo.com>
The numbered v2 token scales (text-1…9, rounded-1…6, shadow-1…6)
share a prefix with the color/utility namespaces, and tailwind-merge
(which tailwind-variants runs by default) cannot tell a numeric
text-3 from a color step, so it silently dropped the size whenever a
text-<color> was present. Switch the v2 kit to the merge-free
tailwind-variants/lite entrypoint (added in v3): upgrade
tailwind-variants to ^3.2.2, import tv/VariantProps from
tailwind-variants/lite in the typography primitives, and drop the
per-call twMerge:false.
The legacy v1 kit stays on tailwind-variants (merge intact). Document
the rationale in ui.md and add a packages/ui/src/v2 ESLint guard that
forbids tailwind-variants, tailwind-merge, and clsx.
Signed-off-by: Émile Ré <emile@probo.com>
Implement the first v2 typography component from the Probo Radix UI
Figma: a Text primitive rendering a single span with size, weight,
align, color, and highContrast variants (color x highContrast
resolves to the sand/gold/red/green/amber/sky text step 11 or 12),
plus a paired TextSkeleton. Styling is tailwind-variants only, with
the scale shared through a variants module per the kit guides.
Stand up a theme-isolated v2 Storybook (.storybook-v2) loading the
v2 theme with a light/dark toggle, since v1 and v2 cannot share one
Tailwind build; the v1 build now excludes src/v2.
Signed-off-by: Émile Ré <emile@probo.com>
Extract the awaitable useMutation into @probo/relay as a
createUseMutation factory that delegates feedback to an injected
MutationNotifier, keeping the package free of UI and i18n
dependencies. compliance-portal binds it to its Base UI toast +
i18next + formatError stack and imports it by explicit path
(#/lib/relay/useMutation), dropping the lone intra-app barrel; a
compliance-portal-scoped no-restricted-imports rule forbids
react-relay's useMutation.
Bring packages/relay and packages/routes into the shared ESLint
scope and fix the violations that surfaced, and deprecate the
legacy withQueryRef / loaderFromQueryLoader helpers. Document the
shared-hook pattern and the "index.ts for package entrypoints only"
rule in the relay, hooks, and app-arborescence guides.
Signed-off-by: Émile Ré <emile@probo.com>
Add the frontend guides the v2 UI kit and compliance-portal need but
that the first rework left uncovered: forms, routing, client state, and
permission-gated UI.
forms.md documents a tiered approach on Base UI Field/Form -- native
constraints, then a validate function, then zod parsed in onSubmit, and
react-hook-form only for large or dynamic forms -- and drops the custom
useFormWithSchema wrapper. routing.md covers @probo/routes, navigation,
typed params, URL-as-state, redirects, auth/protected routes, and the
folded-in no-outlet-context rule. state-management.md gives a decision
order across Relay, URL, local state, context, and zustand.
permissions.md gates UI on the canUpdate/canDelete permission(action:)
fields without re-encoding authorization in the client.
Rename v2-colors.md to v2-tokens.md and add the typography, radius,
shadow, and native-spacing scales alongside color. Extend ui.md with
user feedback, empty-state, and accessibility sections; standardize
toasts on Base UI's Toast (Toast.useToastManager) and retire the legacy
useToast across ui.md, forms.md, error-handling.md, and relay.md. Add an
Intl formatting section to i18n.md and a non-Relay HTTP / file
upload-download section to ts-style.md. Update the AGENTS.md index and
the v2-color-scale cursor rule for the new and renamed guides.
Signed-off-by: Émile Ré <emile@probo.com>
Add Pylon, OpenRouter, incident.io and Brevo as access-review connectors.
All are API-key, single-tenant providers (Pattern 3): the key identifies
one tenant, so there is no OAuth flow, picker UI, or bootstrap/helm
configuration.
- Pylon: Bearer token, GET /users; resolves each user's opaque role_id to
a role name via GET /user-roles, with cursor pagination.
- OpenRouter: Bearer management key, GET /api/v1/organization/members. The
endpoint requires an organization account -- a personal key authenticates
but returns 404 -- so the connection probe rejects 404 on top of 401/403
(doProbeRequest gained an opt-in extra-reject set) to surface a non-org
key at connect time instead of mid-campaign.
- incident.io: Bearer token, GET /v2/users. Its OAuth is outbound-only, so
the API key is the inbound path; live base_role/custom_roles take
precedence over the deprecated role enum.
- Brevo: API key in the api-key header (Registration.APIKeyHeader), GET
/v3/organization/invited/users. A live recording corrected the documented
schema: is_owner is a JSON boolean (not a string) and an id field is
present, so it is used as the stable ExternalID.
The OpenRouter and Brevo cassettes are anonymized live recordings; Pylon
and incident.io use hand-authored fixtures (no self-serve test tenant). The
shared three-valued active-status mapping is consolidated into
activeFromStatus in driver.go.
Each adds the enum value, migration, GraphQL binding, provider
Registration, a driver with a cassette-driven test, and a brand logo.
Signed-off-by: Aurélien Sibiril <81782+aureliensibiril@users.noreply.github.com>
Add Mercury, Apollo.io, Deepgram, ClickHouse Cloud, and Langfuse as
access-review connectors. All are API-key, single-tenant providers
(Pattern 3): the key identifies one tenant, so there is no OAuth flow,
picker UI, or bootstrap/helm configuration.
- Mercury: Bearer token, GET /api/v1/users, cursor pagination.
- Apollo.io: x-api-key header, GET /api/v1/users/search (teammates).
- Deepgram: Token scheme; lists members across every project and
dedupes by member_id, unioning per-project scopes.
- ClickHouse Cloud: HTTP Basic (keyId:keySecret); discovers the org
via GET /v1/organizations, then lists its members.
- Langfuse: HTTP Basic (publicKey:secretKey); a base-URL setting
selects the regional cloud host or a self-hosted instance.
Each adds the enum value, migration, GraphQL binding, provider
Registration, a driver with a cassette-driven test, and a brand logo.
Signed-off-by: Aurélien Sibiril <81782+aureliensibiril@users.noreply.github.com>
Regenerate the stale package-lock and pin patched versions for the
Dependabot-flagged packages (@vitest/browser, form-data, undici,
brace-expansion, js-yaml, esbuild, dompurify, @babel/core, vite,
@opentelemetry/core via posthog-js). Remove the harmful langsmith
override (it forced the vulnerable 0.5.x line) and the zero-effect
lodash-es override.
Signed-off-by: Sacha Al Himdani <sacha@probo.com>
Move the set and remove alias operations out of the trust center
resource into a dedicated resourceAlias resource so n8n workflows can
alias any resource.
Signed-off-by: Bryan Frimin <bryan@probo.com>
Replace the duplicated per-workspace eslint.config.mjs files in
apps/console, apps/trust, packages/ui, and packages/eslint-config with
one root eslint.config.mjs that reuses the shared @probo/eslint-config
rule sets and scopes them per directory. Linting now runs from the repo
root, so pin the type-checked project service root and broaden the
import-x resolver to every workspace tsconfig (the #/* aliases live in
each app's tsconfig.app.json).
Drop the now-redundant per-package lint scripts and lint-only devDeps,
and add a root lint script that runs eslint over the four dirs with
multithreading restored via --concurrency auto, then lints n8n-node
through a direct workspace call. packages/n8n-node keeps its own
external preset.
Collapse the redundant lint-js -> npm-lint Makefile chain into a single
lint-js target and update the make docs accordingly.
Signed-off-by: Émile Ré <emile@probo.com>
Bump React 19.2, Relay 21, React Router 8, Vite 8 with
@vitejs/plugin-react 6, ESLint 10, GraphQL 17, TypeScript 6,
@types/node 24, and Tailwind 4.3 across the workspaces.
vite-plugin-react 6 (Vite 8) no longer runs Babel, so the Relay
tagged-template transform now runs through @rolldown/plugin-babel
in the console and trust Vite configs.
Relay 21 ships first-party types and enables the ambiguous-alias
check by default; disable that flag to preserve existing queries
and add explicit usePreloadedQuery type arguments where the new
types no longer infer the operation. TypeScript 6 deprecations and
stricter inference are addressed in tsconfigs and call sites.
Keep n8n-node on ESLint 9 and eslint-plugin-react on 7.37.5, the
newest releases compatible with their toolchains.
Signed-off-by: Émile Ré <emile@probo.com>
Local storage, IndexedDB, and cache storage have no expiry yet
persist until explicitly cleared, so a missing max-age should read
as "persistent", not "session" (the latter only fits cookies and
session storage, which end with the session or tab).
Thread the tracker type through humanizeSeconds (helpers) and
humanizeDuration (cookie-banner, with a localized persistent label)
and pass it at every console and banner call site. The consent
record query now selects trackerType so its duration column can
make the same distinction. This mirrors the Go HumanizedDuration
helper that already renders these types as persistent.
Signed-off-by: Émile Ré <emile@probo.com>
Surface every CookieSource value in the console: the trackers page
filter was missing the HTTP option and the source badge helper had no
EXTENSION case, so HTTP-sourced rows could not be filtered and
extension-sourced rows rendered the raw enum string.
On the backend, the mark-first-party verdict now blanks the stale
description on both the catalog row and its uncategorised org tracker
patterns. A terminal non-third-party row keeps no vendor link, so a
description naming the (now-cleared) vendor would be misleading; the
mapping worker only copies descriptions into empty rows and never
clears them, so clearing is done explicitly here.
Signed-off-by: Émile Ré <emile@probo.com>
Replace the immediate per-document approval email and the manual
"send signing notifications" action with a single debounced worker that
batches pending requests per recipient and organization.
The worker (go.gearno.de/kit/worker) polls on an interval (default 5m)
and claims one (organization, recipient) group at a time, sending one
consolidated signing email and/or one approval email per recipient/org
that lists every document awaiting their signature or approval. The
claim is a conditional UPDATE that doubles as concurrency-safe dedup, so
several workers never email the same group twice.
Each request is notified once it has been pending past the debounce
delay (default 15m), then reminded at 1x, 2x and 3x the reminder
interval (default 1 day) after the previous email, after which it stops.
New last_notified_at and notification_count columns on signatures and
approval decisions drive the debounce, the widening reminder cadence and
the four-email cap.
Email copy lists each document with its title, type and a deep link to
the employee page. Removed the inline approval-on-publish email, the
SendSigningNotifications service method/mutation/MCP tool, its IAM action,
and the related console UI and n8n operation.
Signed-off-by: Sacha Al Himdani <sacha@probo.com>
Make shadow-1 a subtle drop shadow instead of Radix's inset one, so
shadow-1 ... shadow-6 form a single composable drop-elevation ramp
in Tailwind's --tw-shadow slot. Steps 2-6 remain the Radix shadows
(gray mapped to sand).
Add a numeric inset-shadow-1 ... inset-shadow-3 ramp in the separate
inset-shadow-* slot, mirroring the depth of Tailwind's 2xs/xs/sm
defaults but sand-tinted so it adapts to dark mode. Reset both
--shadow-* and --inset-shadow-* so only the v2 scales are exposed;
inset-shadow-none stays available as a static utility.
Signed-off-by: Émile Ré <emile@probo.com>
Apply font smoothing (antialiased / grayscale) and overflow-wrap on
the document base, mirroring the root defaults Radix Themes sets.
Placed in @layer base so any utility can override it. The body font
is left to Tailwind's preflight, which already applies --font-sans.
Signed-off-by: Émile Ré <emile@probo.com>
Move each token layer of the v2 theme into its own file under
packages/ui/src/v2/theme (colors, typography, radius, shadows) and
reduce theme.css to an entry that imports them. The public import
path (@probo/ui/src/v2/theme.css) is unchanged, so adopters and the
docs keep working; this only improves navigability as the theme
grows. No token values change.
Signed-off-by: Émile Ré <emile@probo.com>
Expose the translucent neutral scale as bg-/text-/border-sand-a1
... sand-a12, mapped to the imported --sand-a* variables so they
switch light/dark like the solid steps. Enables overlays, scrims,
and layered tints without hardcoded rgba. Limited to sand; the
other hues keep only their solid steps for now.
Signed-off-by: Émile Ré <emile@probo.com>
Self-host the Inter variable font through @fontsource-variable/inter
rather than a CDN, so the v2 type scale renders in Inter with no
third-party request. Import it from the theme and point --font-sans
at the "Inter Variable" family the package registers.
Add --font-mono as a Radix-style system stack: the design specifies
Menlo, an Apple system font that cannot be self-hosted, so it falls
back per OS (Consolas, Liberation Mono, Monaco, monospace).
Signed-off-by: Émile Ré <emile@probo.com>
Source both token scales from Radix: rounded-1 ... rounded-6 (the
Radix "Medium" radius set, 3-16px) and shadow-1 ... shadow-6
(ported from @radix-ui/themes tokens/shadow.css with the gray
neutral mapped to sand).
Import the sand/black alpha color scales that the shadow layers
reference, and register the shadows via @theme inline so those
alpha tokens carry light/dark switching automatically, the same
way the color scale works. Each scale resets its Tailwind
namespace (--radius-* / --shadow-*) to initial so a v2 build
exposes only the numeric Radix scale.
Signed-off-by: Émile Ré <emile@probo.com>
Define the v2 typography tokens sourced from the Probo Radix UI
Figma file: font sizes 1-9 with paired line-height and
letter-spacing, the Inter sans family, and the light/regular/
medium/bold weights, exposed as text-1 ... text-9 utilities.
Reset Tailwind's default t-shirt type scale (--text-*: initial)
so a v2 build exposes only the numeric Radix scale, mirroring how
the color block wipes --color-*. Letter-spacing is kept in em so
tracking scales with font size, per the Radix specification.
Signed-off-by: Émile Ré <emile@probo.com>
Turn the v2 theme into a build-level standalone color system instead
of a runtime-scoped add-on. Reset Tailwind's default palette and keep
only transparent, black, white, and the Radix scales, so an app opts
into v2 by importing it in place of the v1 theme.
Drop the redundant [data-theme="v2"] block: isolation now comes from
the separate import, and the inline utilities never read those tokens.
Update the v2 color guide to describe build-level isolation.
Signed-off-by: Émile Ré <emile@probo.com>
Introduce a new v2 theme system in packages/ui/src/v2/ using
@radix-ui/colors for sand, gold, red, green, amber, and sky scales.
Colors are imported from the library (with P3 wide-gamut support),
mapped to Tailwind via @theme inline, and scoped under
[data-theme="v2"] for isolation from the existing v1 theme. Dark mode
activates via the .dark class on <html>.
Includes contributor docs (contrib/claude/v2-colors.md) and a Cursor
rule (.cursor/rules/v2-color-scale.mdc) for the color system.
Signed-off-by: Émile Ré <emile@probo.com>
Replace the deprecated @react-email/components dependency (and its
deprecated sub-packages) with the unified react-email package per the
React Email 6 migration, updating all component and render imports across
the email templates from "@react-email/components" to "react-email".
This removes the npm deprecation warnings emitted by the old
@react-email/* packages while keeping the template build output
unchanged.
Signed-off-by: Sacha Al Himdani <sacha@probo.com>
Brand assets served at /api/files/v1/static had no cache headers.
Introduce brand.Assets to own the embedded filesystem, content-hash
ETags, and HTTP serving. Responses now carry Cache-Control and ETag
so clients can cache and revalidate; stable email URLs stay
revalidatable (max-age=3600, no immutable).
Replace hardcoded Default*Path constants with StaticPathPrefix,
logical filename constants, and StaticPath(). NewAssets validates
required assets at startup so a rename fails fast instead of 404ing
in sent emails. The files handler keeps routing and 404 rendering;
ServeAssets sets cache headers and serves the file.
Signed-off-by: Ludovic Vielle <ludovic@probo.com>
The preference panel scroll lock relied on `overflow: hidden` on the
document element, which JS-driven smooth-scroll libraries such as Lenis
(used by Framer, e.g. getbluejay.ai) bypass entirely since they
intercept wheel/touch events and scroll programmatically.
Pin the body with `position: fixed` (saving and restoring the scroll
position) so the viewport has no scroll distance left to animate, even
for libraries that capture wheel events on the window before us. Keep
capture-phase wheel/touch cancellation as defense-in-depth for sites
that scroll an inner container, while still letting the panel's own
list scroll.
Signed-off-by: Émile Ré <emile@probo.com>
Replace Organization.logoUrl and horizontalLogoUrl with nested File
objects whose downloadUrl points at /api/files/v1/public/{id}, matching
the Console migration.
Org logos are FileVisibilityPublic and served without HTTP auth, so
Connect File.downloadUrl is built eagerly in NewFile with no field-level
authorize. Logo loading moves to iam.OrganizationService.LogoFile and
HorizontalLogoFile; the old URL generators are removed.
Sync IAM Relay components and n8n organization operations. Add an e2e
test for Connect multipart logo upload and ExecuteConnectWithFile.
Signed-off-by: Ludovic Vielle <ludovic@probo.com>
Replace the bare `getprobo.com` domain and the `www.getprobo.com`
marketing host with `probo.com` / `www.probo.com` across the codebase.
Functional subdomains (app, console, notification, custom, test,
cookie-banner, compliance) keep their existing `getprobo.com` hosts,
and changelog entries are left untouched.
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
The Select content class listed overflow-y-auto twice. Drop the
redundant copy; the remaining one keeps scrolling behavior unchanged.
Signed-off-by: Émile Ré <emile@probo.com>
