[Foxhoundn]

What

Nine knobs the qorus.cloud redesign needs, in one PR (the redesign spec's R1–R9). The landing page uses an interim for each today (marked TODO(reqore) there); these replace them. Filip's rule for the site: "If a look needs a knob Reqore lacks, add the knob upstream instead of a local component."

Every knob is opt-in and renders nothing differently without its prop, except R1, which is a font bug fix: buttons and inputs inherit the page font; tags and textareas are unchanged (see "Snapshots" below).

Changes after review (7 Oct)

Per Filip's review ("OK without the tag change please"), R1 no longer touches tags or textareas:

• ReqoreTag (and every badge) and the ReqoreKeyboardShortcut keys keep their hard-coded system-ui, exactly as on develop.
• ReqoreTextarea stays monospace by default, as on develop (the IDE relies on it). The "no longer monospace" behaviour change and its note are gone. ReqoreExportModal and ReqoreTree are back to develop's code, since the default already gives them monospace, and BROWSER_MONOSPACE_FONT is removed.
• Kept: buttons and inputs inherit the page font (the real fix), and theme.fontFamily, which the layout wrapper and the portal set. Tags, shortcut keys and textareas are excluded from it, and theme.ts / COMPONENTS.md say so.
• R2–R9 are unchanged.

Develop released 0.77.7 (#697) while this PR was open. It is merged in. With the tier work below (a new component), this PR ships as 0.78.0.

Tiers: a modern appearance, and a 3D stack on phones (7 Oct)

Filip: "We need to improve the look and feel of the ReqoreTier, I don't like them that much. On mobile I would also like to improve the presentation, like 3D stacked cards, one is always at the top, and others are behind it on each side and you switch between them with swiping."

Both are opt-in. A tier without appearance renders exactly as before: the four existing Tier snapshots are byte-identical (md5) to their captures before this change, and the classic code path is untouched apart from a reqore-tier class on its root.

What was weak in the classic tier

• Everything is centred: a feature's text is centred while its icon sits at the card's left edge, so the list is ragged and hard to scan.
• The name, the period and the button label are forced into upper case; the period is a 12px line under the price at 1.6:1.
• Each button sits wherever its description ended, so a row of tiers has its buttons at different heights; the highlighted tier is scaled to 1.05 (it overflows its column) and its gradient animates.
• On a light theme the minimal button's label is light blue on light blue.
• The price is a heading (a ReqoreH1 its control group sizes into an <h3>), one per plan.

ReqoreTier appearance="modern"

Modelled on the pricing pages of Linear, Vercel, Supabase and Clerk:

• A left-aligned card on the panel's flat surface with a hairline border, radiusSize big, padding from size (24px at normal).
• The name is a heading (<h3>; labelSize sets the level) with its badge beside it as a soft pill. The price is 40px (32 / 48 at small / big) and never a heading. The period sits on its baseline, as written, in a muted colour kept at 4.5:1, and wraps under the price when there is no room. A sale strikes the original price through (<del>).
• The description is muted at 4.5:1. The features are a list (<ul>), each icon held on its feature's first line.
• The button is pinned to the bottom edge, so stretched tiers share one button line: in a ReqoreTierGroup, or in any grid that stretches its items, such as ReqoreColumns.
• A highlighted tier gets its badge, a border, a faint wash and a soft shadow in its intent (info by default), and a filled button. It is not scaled and not animated. The other buttons are neutral; an active tier's is a read-only success button with a check.
• labelEffect / descriptionEffect style the name and the description; priceDetailEffect / priceDetailProps, contentEffect and actionButtonProps still apply over the defaults.

ReqoreTierGroup (new component)

• Wide: a row of equal-height columns (minColumnWidth 240px, maxColumnWidth 1fr, gapSize big).
• Narrow (the group's own width at or below mobileBreakpoint, 480px): the same row wrapped to one column (mobileLayout="columns", the default), or a 3D stack (mobileLayout="stack"). The stack shows one tier in front (the highlighted one at first) and its neighbours behind it on either side, scaled to 0.9, turned 12° and dimmed by brightness, peeking 20px past its edges. Dimming uses brightness rather than opacity because faded dark cards vanish into a dark page.
• Switching: a swipe (touch or mouse drag; the tiers follow the finger, and a drag past an end gives a little and springs back), the arrow keys and Home / End, the previous / next buttons (disabled at the ends), a dot per tier, or a tap on a neighbour. The switch is a CSS transition on a curve that overshoots slightly, so it settles like a spring. A capture with animations disabled shows the end state.
• prefers-reduced-motion: the tiers switch at once, do not follow the finger and are not turned.
• Ends: clamped by default, because the order of the plans means something. loop wraps round.
• Never widens the page: the stack clips at its sides (overflow-x: clip) and handles only horizontal swipes (touch-action: pan-y). The stories assert no overflow at 360px.
• Accessibility: the stack is a labelled carousel region (stackLabel, "Plans"), focusable with a focus ring. Each tier is a slide named "Pro, 2 of 3" (stackItemLabel), and the tiers behind the front are inert. A polite live line names the new front tier. Focus that would be lost moves to the carousel. Each dot is named after its tier and the front one has aria-current.
• Hands appearance and size to tiers that do not set their own, and cascades its customTheme. intent colours the front dot, the focus ring and the buttons.

Component	Prop	Type	Default
ReqoreTier	appearance	'classic' | 'modern'	'classic'
ReqoreTierGroup	appearance	TReqoreTierAppearance	each tier's own
	mobileLayout	'columns' | 'stack'	'columns'
	mobileBreakpoint	number (px, the group's own width)	480
	activeIndex / defaultActiveIndex	number	the first highlighted tier, else 0
	onActiveIndexChange	(index: number) => void	—
	loop	boolean	false
	minColumnWidth / maxColumnWidth / gapSize	string / string / TSizes	'240px' / '1fr' / 'big'
	stackLabel / previousLabel / nextLabel	string	'Plans' / 'Previous plan' / 'Next plan'
	stackItemLabel	(name, index, count) => string	'Pro, 2 of 3'
	size, intent, customTheme, inheritCustomTheme, tooltip, ref, div attributes	standard

The arithmetic is pure and exported: normalizeTierIndex, getTierStackOffset, getInitialTierIndex, getTierSwipeStep, getTierStackItemStyle, and getTierColors for the modern tier.

Supporting changes

• useNarrowContainer now measures before the first paint (a layout effect), so a narrow container is never painted once in its wide layout first. EntityRow and SeverityRow captures are byte-identical with and without the change (42 of 42).
• isTextEntry (from ButtonRail) and prefersReducedMotion / usePrefersReducedMotion (from useCountUp, and now kept current) are shared helpers rather than private copies.

Stories (all new; each has a description and a play test)

Story	What it shows
Other/Tier · Modern	Three modern plans in a plain ReqoreColumns: equal heights, one button line, the period on the baseline, a highlighted Pro
Other/Tier · Modern Light	The same on a light theme
Other/Tier · Modern States	An active plan, a sale, an <h2> name with a detail and an orange badge, an excluded feature and a right icon
Other/Tier · Modern Sizes	small / normal / big
Other/Tier Group · Row	Four plans in one row
Other/Tier Group · Stack	A 360px phone: Pro in front, the neighbours on both sides, the controls
Other/Tier Group · Stack Light	The same on a light theme
Other/Tier Group · Stack Swipe	After a swipe to the left: Enterprise in front, next disabled; a swipe past the end springs back
Other/Tier Group · Stack Keyboard	After the arrows, Home / End, the buttons and a dot: Starter in front, the focus ring on the carousel
Other/Tier Group · Stack Reduced Motion	The switch at once, the stack flat
Other/Tier Group · Stack Loop	Four plans with loop: Enterprise behind Starter on the left
Other/Tier Group · Stack Themed	The group's customTheme, intent and size reaching its tiers and controls
Other/Tier Group · Narrow Columns	360px with the default mobileLayout: one column

The play tests assert: equal heights and one button line (±1px); the period on the price's line or wrapped to the next; no tier scaled; the name a heading and no <h1>; muted lines at 4.5:1 or better; the front tier and the dots after swipes, keys, buttons and dots; clamping and wrapping; inert tiers; no transitions under reduced motion; no horizontal overflow at 360px.

Tests

tier.test.tsx (4 → 18: the modern structure, heading level, period, sale, currency, features, active, highlight, effects, and contrast on dark and light themes); tierGroup.test.tsx (new, 23: index arithmetic, swipe decisions, stack geometry, row / stack, the breakpoint, keyboard, loop, buttons and dots, a controlled index, translated labels, reduced motion, customTheme, tiers arriving late, the first-paint measurement); hooks/usePrefersReducedMotion.test.tsx (new, 3). yarn precheck: 1358 tests, green.

Snapshots (tiers)

Qlip build #337 (head 0578ab9): 0 changed, 13 new, 1112 unchanged. The four classic Tier stories (Default, Group, Price Detail Effect and its Light variant) are byte-identical to their baselines: the same sha256 blob, 0 diff pixels. The 13 new stories are the ones in the table above and are left for Filip; nothing was accepted. On #336, Narrow Columns was captured at 205×1080 (a 1900px-tall viewport, scaled down to the window) and denied. #337 captures it at 360×1080. Stack Keyboard varies by 2 anti-aliased pixels on its focus ring's corner between runs.

Adopting it on the landing page (once published)

The prerelease 0.78.0-pr.696.g0578ab9 is on npm for trying this locally (never committed to a consumer).

<ReqoreTierGroup appearance='modern' mobileLayout='stack' minColumnWidth='250px' data-catalog-version={…}>
  {plans.map(({ plan, copy }) => (
    <ReqoreTier
      key={plan.code}
      name={copy.name}
      price={formatMoney(…)}
      currency=''
      priceDetail={price ? perPeriod : undefined}
      description={copy.tagline}
      featureList={planFeatures(…)}
      highlight={copy.highlighted}
      badge={copy.highlighted ? l.popular : undefined}
      actionLabel={action}
      actionButtonProps={{ icon: 'ArrowRightLine', 'data-track-click': 'join-waitlist', … }}
      customTheme={cardTheme}
    />
  ))}
</ReqoreTierGroup>

This drops the interims: the period goes back to priceDetail instead of the description fragment, and the contentEffect={{ gradient: undefined }}, labelEffect and minimal: false overrides are no longer needed.

The knobs

#	Component	Prop	Type	What it does
R1	ReqoreButton, ReqoreInput	(no prop: a fix)	—	font-family: inherit. Buttons and inputs were left to the browser, which draws form controls in its control face (-webkit-small-control: system-ui on macOS, the system sans on Linux). They now use the page's font, and effect.fontFamily still picks one. Tags and textareas are unchanged: ReqoreTag (badges included) and the ReqoreKeyboardShortcut keys keep system-ui, and ReqoreTextarea keeps the browser's monospace.
R1	ReqoreUIProvider	theme.fontFamily	'mono' | 'system' | string	The font Reqore renders in. The layout wrapper and the portal both set it, and text, buttons and inputs inherit it. Tags, shortcut keys and textareas are excluded (system-ui / monospace). Unset (default): the wrapper and the portal name no font.
R2	ReqoreStatistic	valueAs	'h1' … 'h6' | 'p' | 'div' | 'span'	The whole value (prefix, number, suffix) is ONE element of that kind instead of three headings, drawn exactly as before (same size from size, bold, no margins).
R3	ReqoreUIProvider	layoutWrapperProps	Omit<IReqoreLayoutWrapperProps, 'children' | 'withSidebar'> & TReqoreDataAttributes	Props for .reqore-layout-wrapper: transparent, className (merged), style, aria-*, data-*.
R3	ReqoreLayoutWrapper	transparent	boolean	No surface: the page's own background shows through, no seam. Text colour kept.
R4	ReqoreTier	priceDetailEffect	IReqoreEffect	Spread over the "/ month" defaults ({ uppercase: false } keeps the case; colour / opacity make it readable).
R4	ReqoreTier	priceDetailProps	Partial<IReqoreParagraphProps> & TReqoreDataAttributes	Spread over the paragraph's intent: 'muted', size: 'small'; its effect merges under priceDetailEffect.
R5	ReqorePanel	media	string | ReactNode	A cover drawn edge to edge, clipped to the panel's inner curve (also with a sticky header). A URL renders an <img>. Hidden while collapsed.
R5	ReqorePanel	mediaPosition	'top' | 'bottom' (default 'top')	Above the title bar, or under the bottom actions.
R5	ReqorePanel	mediaAlt	string (default '')	The image text of a URL (empty = decorative).
R5	ReqorePanel	mediaAspectRatio	string | number	Fixes the frame (aspect-ratio); the media covers it.
R5	ReqorePanel	mediaProps	HTMLAttributes<HTMLDivElement> & TReqoreDataAttributes	Props for the frame.
R6	ReqoreFeatureCard	actions	IReqoreFeatureCardAction[] (Omit<IReqoreButtonProps, 'children'> & { label?: string })	Buttons in a footer pinned to the card's bottom edge (buttons of stretched cards share one line). They take the card's size, intent, customTheme and disabled; a click never reaches the card's onClick.
R6	ReqoreFeatureCard	footer	ReactNode	Footer content before the actions; text at the description's size.
R6	ReqoreFeatureCard	footerProps	Partial<IReqoreControlGroupProps> & TReqoreDataAttributes	Restyles the footer row (horizontalAlign, vertical, gapSize, …).
R7	ReqoreTimeline item	highlighted	boolean	Halo round the marker in the item's colour, bolder title, aria-current="step".
R7	ReqoreTimeline item	pending	boolean	Spinning LoaderLine in place of the icon or dot (still under reduced motion), aria-busy.
R8	ReqoreStatistic	countUp	boolean | { duration?: number; from?: number; threshold?: number; format?: (n: number) => string }	Counts up once threshold (0.35) of the value is in view, over duration (1000 ms), keeping the value's own format; ends on the value as given. Not-one-number values and reduced motion: shown at once. The moving number is aria-hidden; the value is read instead.
R9	ReqoreSegmentedControl item	props	TReqoreSegmentedControlItemProps (ReqoreButton props minus onClick/role/tabIndex/aria-checked/label/children, plus data-*)	data-*, aria-*, id, style, className for one segment's button; the control keeps the radio-group props. Folded segments pass them to their menu item.

New shared type: TReqoreDataAttributes (types/global), an index signature for data-* keys, so a props bag written as an object can carry data-* attributes. New hook: hooks/useCountUp (useCountUp, parseCountUpValue, formatCountUpValue), internal.

Snapshots (R1)

The font fix is the only change without a new prop, so it is the only one that can touch existing snapshots. Button and input text is now in the page's font, which in the story suite is the Helvetica Neue / Helvetica / Arial stack from .storybook/preview-body.html. In CI's Chromium on Linux the browser's control font resolves to the same face, so button and input labels barely move there. Tag, badge, shortcut-key and textarea snapshots are unchanged against develop. The other eight knobs add stories only.

Qlip build #332 (head 65842e7): 0 changed, 20 new, 1092 unchanged.

• Tag, badge and shortcut-key stories, all 18 Form/Textarea stories, Export Modal and Tree are unchanged against develop's baselines.
• The 82 tag-font accepts on build [ENHANCEMENT] Allow ReqoreModals to be managed via new addModal | removeModal | updateModal context method #328 and the 1 on Fix message / notification transparency #327 were reset after the review. They had become this branch's baselines; with the reset, those stories compare against develop again.
• The 20 new stories (R2–R9 and the UI Provider stories) need a human baseline.

One real change Qlip did not surface. Its perceptual-hash shortcut auto-passed it, so I compared every image with develop's own capture to find it. In ReqoreDataView, the "+ Add item" / "+ Add property" buttons inside a value cell now inherit the cell's MONO_FONT and render in monospace (before, the browser's control font overrode it). It shows in Collections/Dataview · Editable Array Ops and · Editable Open Api Schema, and there are comments on both snapshots. This needs a decision: keep it (buttons follow the surrounding font), or scope DataView's monospace to the value text. Everything else that differed was flaky (image loads, a per-run stack trace) or sub-threshold anti-aliasing.

Stories (all new; each has a description and a play test)

Story	What it shows
Utilities/UI Provider · Page Font	Panel, tags, input, textarea, buttons and a shortcut key on a serif page. Title, paragraph, input and buttons are in the page font; tags and the key stay system-ui, and the textarea stays monospace
Utilities/UI Provider · Theme Font Family	The same under theme.fontFamily: 'mono'. The theme font reaches the text, input and buttons, not the tags, the key or the textarea
Utilities/UI Provider · Transparent Layout	Default wrapper (a box of the theme colour on the page) vs layoutWrapperProps.transparent, dark and light pages
Display/Statistic · Value As	Four identical-looking tiles: default (3 headings), p, div, h3 (1 heading)
Display/Statistic · Count Up	$48,200, 99.9 + %, 1.2M counting up; 2–4 shown at once
Display/Statistic · Count Up When In View	A tile below the fold of a scroll box: 0 until scrolled to, then 12,345
Other/Tier · Price Detail Effect (+ Light)	Default "/ MONTH", as written, readable
Layout/Panel · Media (+ Light, Mobile)	Article card with a top cover, a 4:3 photo card, a 21:9 bottom cover
Display/Feature Card · Actions (+ Light, Mobile)	Three stretched problem cards whose buttons share one line; fluid buttons on a phone
Display/Feature Card · Footer	Tags + action, price + Buy right-aligned, text footer
Utilities/Timeline · Highlighted And Pending (+ Horizontal, Light, Mobile)	A run with a highlighted current step and a running step
Form/SegmentedControl · Item Props	data-track-* on billing-cycle segments; aria-label on icon-only segments

Tests

New tests:

• fontFamily.test.tsx reproduces the browser's control-font and textarea-monospace rules, so it fails without the fix. It checks both sides: buttons and inputs follow the page font, the body font and theme.fontFamily, while tags and shortcut keys stay system-ui and textareas stay monospace under all three.
• statisticValue.test.tsx, hooks/useCountUp.test.ts, tier.test.tsx, panelMedia.test.tsx.

Additions to layout, FeatureCard, Timeline and segmentedControl. tag.test.tsx is back to develop's version, which asserts system-ui.

yarn precheck is green after merging develop: 1316 tests. The UI Provider, Tag, TextArea and KeyboardShortcut story files run locally and pass (46 stories).

Not changed (noted for later)

• The classic ReqoreTier still renders the price as a heading: a ReqoreH1 that its control group sizes into an <h3> (this note said <h1> before; the tests now show which), one per plan. The same class of issue as R2. appearance="modern" (below) fixes it for tiers that opt in: the name is the heading and the price is a paragraph. The classic look is unchanged.
• ReqoreProvider reports isMobile: false under NODE_ENV=test, so no story can show a viewport-width branch (e.g. the Timeline's horizontal → vertical fallback); the Timeline phone story shows both directions explicitly instead.

Version

0.77.7 → 0.78.0. This is a minor release because of a new component, ReqoreTierGroup; the rest are new props on existing components and a bug fix. The branch was at 0.77.8, and before that 0.77.6, and neither was ever published. The other open PRs are at 0.77.9 (#708) and 0.77.10 (#709). The notes in COMPONENTS.md that said "new in 0.77.8" now say 0.78.0.

🤖 Generated with Claude Code

[github-actions]

📦 Prerelease published for this PR:

@qoretechnologies/reqore@0.78.0-pr.696.g0578ab9

Install it in a consumer (updates package.json + lockfile):

yarn add @qoretechnologies/reqore@0.78.0-pr.696.g0578ab9

Published under the pr dist-tag — latest/beta are untouched. Repoint consumers to the released version once this PR merges.

[qlip-qore-technologies]

qlip visual regression

🔍 0 changed, 13 new of 1125 snapshots.
✅ All changes approved.

Review build 20261007-100642 in the dashboard →