@reblu/site-blocks 0.18.0 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @reblu/site-blocks
 
+## 0.20.0
+
+### Minor Changes
+
+- 4ca8816: New `CourseSyllabus` on `@reblu/site-blocks/client`: the programme of a public course page over `AcademyCourseDetail.modules`. The header shows the number of modules and lessons. Each module with lessons is an expandable button (`aria-expanded`, `aria-controls`) showing its lesson count and total duration, and lists its published lessons in order with their duration and free-preview badge. Modules without lessons render as a plain row. Spanish default copy, overridable through `labels` (`DEFAULT_COURSE_SYLLABUS_LABELS`).
+- 25d8189: Automatic staff discount (REB-1131). When the buyer has a server-validated staff session, base-api applies the active «Solo personal» code that gives the largest discount, with no code typed. Buyers without a staff session see no change.
+  - `@reblu/site-contracts`: adds the `ShopStaffAutoDiscount` type, `{ code, label, amount }`. It is an optional `autoDiscount` field on `ShopCartValidation`, `ShopDiscountApplication` and `ShopCheckoutSession`, and is absent for everyone else.
+  - `@reblu/site-next`: `createShopValidateCartRoute()` now forwards the `sb-*` auth cookies, the same as checkout and apply-discount. Opt out with `{ forwardAuthCookies: false }`. `validateCart()` returns `outcome.autoDiscount` when the server applied one.
+  - `@reblu/site-blocks`: `CartSummary` and `CheckoutForm` accept `autoDiscount` and show «Descuento de personal aplicado» with its amount. `CheckoutForm` shows no remove action for it, and the code field stays available. The text can be changed with `labels.staffDiscountApplied`. Without the prop, both components render exactly as before.
+
+### Patch Changes
+
+- 6a0f8e6: `OrderConfirmation`: the default `foundDescription` now reads «Te hemos enviado un email con tu acceso.» Every shop buyer gets a customer account, and the order confirmation email carries a one-time link into it, where paid digital downloads live. The confirmation page never serves files. A SITE that passes its own `labels.foundDescription` is unaffected.
+- Updated dependencies [25d8189]
+  - @reblu/site-contracts@1.20.0
+
+## 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

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,8 @@ 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.                     |
+| `CourseSyllabus`, `DEFAULT_COURSE_SYLLABUS_LABELS`                                                            | `./client` | A course's programme: expandable modules listing their lessons (`client.academy.bySlug()`). See "Course programme" below.   |
 
 ## Boundary
 
@@ -171,6 +174,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
@@ -289,13 +325,31 @@ for the wiring steps and a full example app).
 | `AddedToCartToast`    | `.`        | `productName`, `cartHref`, `status?`, `quantity?`, `imageUrl?`                                                          | Yes                                                                               |
 | `CartLineList`        | `.`        | `items`, `onQuantityChange?`, `onRemove?`, `liveMessage?`, `notice?`, `lineMessage?`                                    | Yes                                                                               |
 | `CartAdjustmentsNotice` | `.`      | `removed?`, `quantityChanges?`, `priceChanges?`, `labels?`                                                              | Yes                                                                               |
-| `CartSummary`         | `.`        | `subtotal`, `discount?`, `shipping?`, `shippingEnabled?`, `total`, `notice?`                                            | Yes                                                                               |
+| `CartSummary`         | `.`        | `subtotal`, `discount?`, `autoDiscount?`, `shipping?`, `shippingEnabled?`, `total`, `notice?`                           | Yes                                                                               |
 | `CheckoutLoginPrompt` | `.`        | `open`, `email`, `onEmailChange`, `onClose`, `onSubmitEmail`, `onContinueAsGuest`                                       | Yes (renders `null` when `open` is false)                                         |
-| `CheckoutForm`        | `.`        | `contact`, `onContactChange`, `discountCode`, `onDiscountCodeChange`, `onApplyDiscount`, `onRemoveDiscount`, `onSubmit` | Yes                                                                               |
+| `CheckoutForm`        | `.`        | `contact`, `onContactChange`, `discountCode`, `onDiscountCodeChange`, `onApplyDiscount`, `onRemoveDiscount`, `onSubmit`, `autoDiscount?` | Yes                                                                               |
 | `OrderConfirmation`   | `.`        | `status`, `order`, `cartHref?`, `onRecheck?`                                                                            | Yes                                                                               |
 | `OrderInvoiceLink`    | `.`        | `invoice` (`order.invoice`), `labels?`                                                                                  | Yes (renders `null` without an invoice)                                           |
 | `FullInvoiceFields`   | `.`        | `value`, `onChange`, `overCap`, `errors?`, `countries?`, `labels?`                                                      | Yes (controlled, no hooks)                                                        |
 
+**Automatic staff discount (REB-1131).** For a signed-in staff member,
+base-api applies the best «Solo personal» code by itself and reports it as
+`autoDiscount` on validate-cart, apply-discount and checkout. Pass it to both
+components and they show «Descuento de personal aplicado» with its amount
+(override with `labels.staffDiscountApplied`). `CheckoutForm` offers no remove
+action for it and keeps the code field: a typed code replaces it only when the
+server finds it larger. Without `autoDiscount`, both render exactly as before.
+
+```tsx
+const outcome = await validateCart() // @reblu/site-next/cart
+// After an apply-discount call, prefer its `autoDiscount` (absent when the
+// typed code won).
+const autoDiscount = discountResponse?.autoDiscount ?? outcome.autoDiscount ?? null
+
+<CartSummary subtotal={subtotal} autoDiscount={autoDiscount} total={subtotal - (autoDiscount?.amount ?? 0)} />
+<CheckoutForm {...checkoutProps} autoDiscount={autoDiscount} />
+```
+
 **REB-837 breaking move**: `AddToCartButton` and `CartIcon` now carry real
 internal state (the confirmed/error timer, the bump-on-add guard) and ship
 from `@reblu/site-blocks/client` instead of the root `.` entry. Update the
@@ -764,6 +818,129 @@ 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.
+
+## Course programme — `CourseSyllabus` (REB-1134)
+
+The programme of a public course page: every module, and inside each module the
+lessons that make it up. The header reads «Programa» and «3 módulos · 12
+lecciones». Each module row shows its lesson count and, when every lesson in it
+has a duration, the module's total («4 lecciones · 1 h 20 min»). Opening a
+module lists its lessons in order, with each lesson's duration and a «Vista
+previa gratuita» badge on free-preview lessons.
+
+```tsx
+import { CourseSyllabus } from '@reblu/site-blocks/client'
+
+// `course` is an `AcademyCourseDetail` from `client.academy.bySlug(slug)`.
+// It works from a Server Component page: every prop is serialisable.
+<CourseSyllabus modules={course.modules} />
+```
+
+- **Public data only.** It renders what the API serves. The API returns
+  published lessons only, and never a video, playback or attachment id, a
+  signed URL or the lesson content.
+- **Accessibility.** The block is a `region` named by its heading. A module
+  with lessons is a `<button>` with `aria-expanded` and `aria-controls`
+  pointing at its lesson list. Tab reaches it; Enter and Space open and close
+  it. Modules open independently and start closed.
+- **Modules without lessons** render as a plain row with the title, not a
+  button. A payload without `lessons` renders the same way.
+- **Copy.** The defaults are Spanish (`DEFAULT_COURSE_SYLLABUS_LABELS`).
+  Override any of them with `labels={{ heading, moduleSingular, modulePlural,
+  lessonSingular, lessonPlural, freePreview, hours, minutes }}`.
+- **Styling.** `headingLevel` (default `2`), `headingClassName` (replaces the
+  heading's typography, see the className rule above) and `className`. Style
+  the parts with `[data-slot="course-syllabus"]`, `course-syllabus-module`,
+  `course-syllabus-lessons` and `course-syllabus-lesson`. It renders nothing
+  for a course without modules.
+
 ## 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 };