@reblu/site-blocks 0.17.1 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @reblu/site-blocks
 
+## 0.19.0
+
+### Minor Changes
+
+- 38d27c5: Add `ProfessionalFields`, a drop-in for the tenant-defined professional fields on a team profile (`professional.fields`, e.g. a registration number). `ProfileCard` gains an optional `fields` prop that shows the card fields. Additive: existing usage renders as before.
+- 5ef5630: Add `ProductCarousel` on `@reblu/site-blocks/client`, a drop-in product strip for «Productos relacionados». It scrolls natively with scroll-snap, so touch users swipe it, and has previous/next arrows from `sm` up. The arrows are hidden when everything fits and disabled at the end you have reached. The track is a focusable, labelled region and arrow scrolling respects reduced motion. It renders `ProductCard` by default, or your own card through `renderProduct`, and needs no carousel dependency. Additive: no existing export changes.
+
+### Patch Changes
+
+- 5ef5630: Every button the organisms render shows the pointer cursor on hover under Tailwind v4: `AddToCartButton`, the `CartLineList` quantity stepper and remove button, `CheckoutForm`, `CheckoutLoginPrompt`, `Collection` pagination and facet chips, `DataRequestForm`, `OrderConfirmation` and the `ShareButtons` copy button. Disabled buttons show `cursor-not-allowed`. A source guard (`test/button-cursor.test.ts`) fails on any new `<button>` without the pointer cursor.
+- 49384d1: README: document the `MarkdownRenderer` `images` option (URL-prefix allowlist, custom `render`, `<figure>` captions) with a `next/image` example. No code change.
+- Updated dependencies [95f5b5f]
+- Updated dependencies [5ef5630]
+- Updated dependencies [e27e1b0]
+  - @reblu/site-contracts@1.19.0
+  - @reblu/site-ui@0.7.2
+
+## 0.18.0
+
+### Minor Changes
+
+- 801983f: New opt-in `normalizeHeadings` prop on `MarkdownRenderer` and `SafeHtml`: the body's shallowest heading lands at `1 + headingOffset`, every other heading keeps its depth relative to it, and levels clamp at h6. Standard Markdown (`##` sections) then renders `<h2>` under the page `<h1>` just like the Reblu convention (`#` sections), which renders byte-identically. Use it where the body sits directly under the page `<h1>` (a blog post, a legal document); leave it off where the body sits under its own section heading (a product or course description). Default `false`: nothing changes until a SITE opts in.
+
 ## 0.17.1
 
 ### Patch Changes

package/README.md

@@ -26,6 +26,7 @@ colour on the red background. See `docs/theming/theming.md`.
 | `MarkdownRenderer`                                                                                            | `.`        | Canonical Blog renderer: `marked` → **hast-util-sanitize** (XSS) → component map, with a YouTube-domain allowlist. RSC-safe. |
 | `CourseDescription`                                                                                           | `.`        | Drop-in for the rich-text course `description` (`client.academy.bySlug()`). Server Component. See "Rich-text descriptions".  |
 | `Treatment`, `ParentPage`, `ProfileCard`, `ProductCard`                                                       | `.`        | Presentational organisms over the SITE API contracts. RSC-safe. `Specialty`: deprecated alias, see below.                    |
+| `ProfessionalFields`                                                                                          | `.`        | The tenant's own professional fields (`professional.fields`) on a team card or profile. RSC-safe. See below.                 |
 | `ShopFilters`                                                                                                 | `.`        | Plug-and-play shop filter chrome over `GET /api/site/shop/facets`. RSC-safe. See "Shop filters" below.                       |
 | `CartLineList`, `CartSummary`, `CartAdjustmentsNotice`, `AddedToCartToast`, `CheckoutLoginPrompt`, `CheckoutForm`, `OrderConfirmation` | `.`        | Cart & checkout organisms. RSC-safe by construction. See "Cart & checkout" below.                                            |
 | `PageBlocks`, `FaqAccordion`                                                                                  | `.`        | Registry-block renderer (`PageDetail.blocks`) and native `<details>` FAQ. Server Components. See "Page blocks" below.        |
@@ -37,6 +38,7 @@ colour on the red background. See `docs/theming/theming.md`.
 | `ShareButtons`                                                                                                | `./client` | Social share (X / LinkedIn / WhatsApp / copy).                                                                               |
 | `AddToCartButton`, `CartIcon`                                                                                 | `./client` | Add-to-cart feedback (REB-837) — **moved here from `.`**, see below.                                                         |
 | `DataRequestForm`                                                                                             | `./client` | Drop-in public GDPR rights form over `POST /api/site/data-requests` (REB-980). See "GDPR rights form" below.                |
+| `ProductCarousel`                                                                                             | `./client` | Scroll-snap product strip with prev/next arrows («Productos relacionados»). See "Product carousel" below.                     |
 
 ## Boundary
 
@@ -105,6 +107,34 @@ To force a visible break, use any of:
 | A hard break inside one paragraph | Two spaces at the end of the first line     |
 | A hard break, visibly             | A trailing `\` at the end of the first line |
 
+### Heading levels: `headingOffset` and `normalizeHeadings`
+
+`headingOffset` shifts every heading by a fixed amount: with `headingOffset={1}`
+under the page's own `<h1>`, `#` renders `<h2>` and `##` renders `<h3>`. That
+assumes the Reblu convention — `#` is a section — and standard Markdown pasted
+or imported from elsewhere (`##` sections) then renders `<h3>` with no `<h2>`.
+
+`normalizeHeadings` lands the body's **shallowest** heading at
+`1 + headingOffset` instead, keeps every other heading's depth relative to it,
+and clamps at h6:
+
+| Body                        | `headingOffset={1}` | `+ normalizeHeadings` |
+| --------------------------- | ------------------- | --------------------- |
+| `#` / `##` (convention)     | h2 / h3             | h2 / h3 (identical)   |
+| `##` / `###` (standard)     | h3 / h4             | h2 / h3               |
+| no headings                 | —                   | — (identical)         |
+
+```tsx
+// A blog post or legal document directly under the page <h1>:
+<MarkdownRenderer content={post.content} headingOffset={1} normalizeHeadings />
+```
+
+It is **opt-in**, because the renderer cannot see what sits above the body.
+Leave it off where the body sits under its own section heading — e.g. a product
+description under «Sobre este producto» (`h2`), whose `##` subsections must stay
+one level below that heading. `SafeHtml` takes the same prop; `CourseDescription`
+does not use it (its `##` sits below its own heading by contract).
+
 ### `hidden` hides a block — it does not withhold it
 
 An element marked `hidden` is not rendered and is not announced to a screen
@@ -143,6 +173,39 @@ Internal links (`/privacidad`, `#clause-4`) and `mailto:` links open in the same
 tab. External links (`https://…`, `//…`) open in a new tab and always carry
 `rel="noopener noreferrer"`.
 
+### Images: the `images` option
+
+Without `images`, every image the sanitiser keeps renders as a lazy `<img>`
+inside its paragraph. Pass `images` to restrict where they may load from and,
+optionally, how they render:
+
+```tsx
+import Image from 'next/image'
+
+const MEDIA = 'https://<ref>.supabase.co/storage/v1/object/public/blog-media/'
+
+<MarkdownRenderer
+  content={post.content}
+  headingOffset={1}
+  normalizeHeadings
+  images={{
+    // Absolute URL prefixes (ending in `/`); any other image is dropped.
+    allowedUrlPrefixes: [MEDIA],
+    // Optional: render an allowed image yourself. Default: a lazy <img>.
+    render: ({ src, alt }) => <Image src={src} alt={alt} width={1600} height={900} />,
+  }}
+/>
+```
+
+- The prefix is compared on the parsed, normalised URL (`..` resolved, scheme
+  included), so `http://…` never matches an `https://…` prefix.
+- A paragraph holding only an allowed image becomes a `<figure>`; the image
+  title (`![alt](url "caption")`) is its `<figcaption>`.
+- `render` receives `{ src, alt }` only: give `next/image` a size you know
+  (e.g. encoded in the object name) or use `fill` inside a sized box, and allow
+  the host in `images.remotePatterns`.
+- `SafeHtml` has no `images` option: its images keep the default rendering.
+
 ### Which authored attributes survive
 
 The renderer rebuilds each element to apply the tenant's design tokens and to
@@ -736,6 +799,94 @@ export async function ServicesTeaser() {
 }
 ```
 
+## Professional fields — `ProfessionalFields` (REB-1099)
+
+Each tenant defines its own fields for team profiles in nexus › Equipo ›
+«Campos profesionales» — for example a registration number, a licence or a
+membership id — and marks which are public and which also go on the card. The
+SITE API serves the public ones as `professional.fields`
+(`{ label, value, showOnCard }[]`): the list (`client.pages.list`) carries only
+the card fields, the profile (`client.pages.bySlug`) every public one. The
+labels are the tenant's; this package names no field.
+
+On the team card, `ProfileCard` takes them directly:
+
+```tsx
+import { ProfileCard } from '@reblu/site-blocks'
+
+const { data: team } = await client.pages.list({ type: ['team'] })
+
+{team.map((p) => (
+  <ProfileCard
+    key={p.slug}
+    name={p.title}
+    role={p.professional?.role ?? undefined}
+    imageUrl={p.coverImageUrl ?? undefined}
+    fields={p.professional?.fields}
+    href={`/equipo/${p.slug}`}
+  />
+))}
+```
+
+On the profile page, drop in `ProfessionalFields` (a `<dl>`):
+
+```tsx
+import { ProfessionalFields } from '@reblu/site-blocks'
+
+const page = await client.pages.bySlug(slug)
+
+<ProfessionalFields fields={page.professional?.fields} />
+```
+
+`variant='card'` keeps only `showOnCard` fields. It renders nothing when there
+is nothing to show, so it is safe to place unconditionally. Style it with
+`className` or `[data-slot="professional-fields"]`.
+
+## Product carousel — `ProductCarousel` (REB-1120)
+
+A horizontal product strip for «Productos relacionados» or «También te puede
+interesar», with no carousel dependency. The track is a native scroll container
+with CSS scroll-snap, so touch users swipe it. From `sm` up, previous/next
+arrows scroll one visible page. The arrows are not rendered when every product
+fits, and the arrow at the end you have reached is disabled.
+
+```tsx
+'use client'
+import { ProductCarousel } from '@reblu/site-blocks/client'
+
+// `related` is a `ShopProductListItem[]`, e.g. from `client.shop.products({ category })`
+<ProductCarousel
+  products={related}
+  heading='También te puede interesar'
+  productHref={(p) => `/shop/${p.slug}`}
+/>
+```
+
+It renders the package's `ProductCard` by default. To use your own card, pass
+`renderProduct`. Any item with an `id` works:
+
+```tsx
+<ProductCarousel
+  products={related}
+  heading='También te puede interesar'
+  renderProduct={(p) => <MyProductCard product={p} />}
+/>
+```
+
+- **Accessibility.** The track is a focusable `region` with
+  `aria-roledescription="carrusel"`. It is named by `heading` when you pass one,
+  otherwise by `labels.region`. Once the track has focus, the keyboard arrow
+  keys scroll it. The arrows are `<button>`s with `aria-label`s and
+  `aria-controls` pointing at the track. Under `prefers-reduced-motion: reduce`
+  they jump instead of animating.
+- **Copy.** The defaults are Spanish (`DEFAULT_PRODUCT_CAROUSEL_LABELS`).
+  Override them with `labels={{ region, roleDescription, previous, next }}`.
+- **Layout.** About 1.5 cards are visible on mobile, so the next one peeks in,
+  then 3 from `sm` and 4 from `lg`. Change the width with `itemClassName`
+  (e.g. `basis-64`). Style it with `className` or `[data-slot="product-carousel"]`.
+  `headingClassName` replaces the heading's typography (see the className rule
+  above). It renders nothing for an empty list.
+
 ## Page blocks
 
 `PageBlocks` renders a page's registry blocks (`PageDetail.blocks` from

package/dist/_heading-BsNbc1wc.d.cts

@@ -0,0 +1,4 @@
+/** A heading level a caller can configure — `h1`…`h6`. */
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export type { HeadingLevel as H };

package/dist/_heading-BsNbc1wc.d.ts

@@ -0,0 +1,4 @@
+/** A heading level a caller can configure — `h1`…`h6`. */
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export type { HeadingLevel as H };