@breathe-ds/ui 0.6.7 → 0.6.9

package/README.md

@@ -162,6 +162,8 @@ files (`public/brand`) in the repositories, split into two components so the
 
 ```tsx
 <Curtain logo={<TtcabSymbol />} name={<TtcabWordmark />} wordmarkRatio={TTCAB_LOCKUP.wordmarkPerSymbol} tagline="…" />
+// once per session: the head script, from its own module (callable in a server layout, 0.6.8)
+// import { curtainHeadScript } from "@breathe-ds/ui/components/curtainHeadScript";
 <Lockup variant="horizontal" size="md" logo={<CreetaSymbol />} wordmark={<CreetaWordmark />} wordmarkRatio={CREETA_LOCKUP.wordmarkPerSymbol} name="creeta" />
 ```
 
@@ -196,6 +198,10 @@ from color, not from extra markup.
   portrait on the left (photo or `living`, the team pages' living portrait), then
   eyebrow, name, role, registration, bio and `actions`. `variant` `plain` (on the page
   color) or `card` (white card). Stacks on phones.
+- **FounderSpotlight**: the family founder (Mariangela, creator of RTA and TTCAB) in one
+  block: `ProfileSpotlight` card + living portrait on hover, filled with the text validated
+  on ttcab (pt/en/es), her Instagram and the courses link. `<FounderSpotlight locale="pt" />`.
+  Media live in each site's `public/` (`/images/mariangela.png`, `/equipe/vivas/mariangela.mp4|.webp`).
 - **Texture & rhythm (opt-in)**: `.cg-grain` adds a barely-there paper grain (noise in
   the ink color) to any background — the body, a band. `bg-surface-alt` (token
   `--cg-surface-alt`, falls back to `surface`) is a band one step deeper than the page,
@@ -306,6 +312,12 @@ from color, not from extra markup.
   the page-level pause contract (`CARD_VIDEOS_PAUSE_EVENT` / `CARD_VIDEOS_PAUSED_ATTR`).
 - **TestimonialCard**: clip with a play button on the left, quote + author +
   outbound link on the right ("Famílias contam").
+  **Rule (0.6.8): in a grid of testimonials with `panel`, the card is ONLY a quote**
+  — a short excerpt in the person's own words, large, with the drawn quote mark;
+  the whole testimonial (and its video or photo) opens in the panel on click. Pass
+  the `excerpt` the client chose (`excerptMarks={false}` for a context line that is
+  not the person's speech); without one, the card takes the first sentence.
+  Never show the long text clamped on the card.
 - **MapCard**: the Mapa of novo.creeta — a still preview fading into the card,
   the address, "View the map" and the outbound "Directions" link; Google is only
   called after the tap (no consent banner, lighter page). Open, the map fills

package/components/Curtain.tsx

@@ -98,16 +98,11 @@ export function Curtain({ name, tagline, logo, wordmarkRatio, symbolSide = "left
 }
 
 /**
- * Script for the <head> (before paint): marks the curtain as seen in this
- * session, so it does not repeat on navigation or reload. Without it, the
- * curtain shows on every load.
- *   // Next (app/layout):
- *   <script dangerouslySetInnerHTML={{ __html: curtainHeadScript("cg-curtain") }} />
+ * Script for the <head>: moved to `components/curtainHeadScript.ts` (2026-11-05)
+ * so a server layout can call it (this file is "use client"). Kept here for old
+ * imports from client code.
  */
-export function curtainHeadScript(storageKey = "cg-curtain") {
-  const k = JSON.stringify(storageKey);
-  return `try{var d=document.documentElement;if(sessionStorage.getItem(${k})){d.setAttribute('data-cg-curtain','seen')}else{sessionStorage.setItem(${k},'1')}}catch(e){}`;
-}
+export { curtainHeadScript } from "./curtainHeadScript";
 
 const CURTAIN_CSS = `
 .cg-curtain{

package/components/FounderSpotlight.tsx

@@ -0,0 +1,109 @@
+import type { ReactNode } from "react";
+import { ProfileSpotlight } from "./ProfileSpotlight";
+import { IconGraduationCap, IconInstagram } from "./icons";
+
+/**
+ * The founder of the family: Mariangela Pinheiro de Lima, who created the RTA
+ * Method and TTCAB. One block, one text, for every site of the family (ttcab,
+ * metodorta, creeta…), so she reads the same everywhere. The text is the one
+ * validated on the ttcab site (06/11/2026), in pt, en and es.
+ *
+ * Media stay in each site's `public/` (the package ships no binaries); copy them
+ * from the ttcab site, or pass your own paths:
+ *   /images/mariangela.png               still portrait (4:5)
+ *   /equipe/vivas/mariangela.mp4 + .webp living portrait (plays on hover)
+ */
+export const FOUNDER = {
+  name: "Mariangela Pinheiro de Lima",
+  registration: "CREFITO-10/2894-F",
+  instagram: "https://www.instagram.com/mariangela.rta/",
+  courses: "https://metodorta.com.br/cursos-e-eventos/",
+  pt: {
+    eyebrow: "Idealizadora",
+    role: "Criadora do método Reequilíbrio Toracoabdominal e fundadora da Escola Brasileira de RTA e Biomecânica Respiratória",
+    roleShort: "Criadora do Método RTA e do TTCAB",
+    bio: "Mariangela tem mais de 40 anos de carreira na Fisioterapia, com experiências marcantes na área pediátrica e respiratória. Iniciou como professora na PUCPR e atuou por sete anos nos hospitais Pequeno Príncipe e César Pernetta, em Curitiba. Especializou-se no Método Bobath, com influência de Oacy Veronesi e Sherry Arndt. Seu interesse em Fisioterapia Respiratória a levou a criar o Método Reequilíbrio Toracoabdominal (RTA), difundido há mais de três décadas por todo o Brasil. Também idealizou o TTCAB, a formação para o tratamento do torcicolo congênito e de outras assimetrias no bebê.",
+    instagram: "Instagram da Mariangela",
+    courses: "Cursos no site do Método RTA",
+    newTab: "(abre em nova aba)",
+  },
+  en: {
+    eyebrow: "Founder",
+    role: "Creator of the Reequilíbrio Toracoabdominal method and founder of the Escola Brasileira de RTA e Biomecânica Respiratória",
+    roleShort: "Creator of the RTA Method and of TTCAB",
+    bio: "Mariangela has a career of more than 40 years in Physiotherapy, with remarkable experience in paediatrics and respiratory care. She began as a lecturer at PUCPR and worked for seven years at the Pequeno Príncipe and César Pernetta hospitals in Curitiba. She specialised in the Bobath Concept, influenced by Oacy Veronesi and Sherry Arndt. Her interest in Respiratory Physiotherapy led her to create the Thoracoabdominal Rebalancing Method (RTA), taught across Brazil for more than three decades. She also created TTCAB, the training in the treatment of congenital torticollis and other asymmetries in babies.",
+    instagram: "Mariangela's Instagram",
+    courses: "Courses on the Método RTA website",
+    newTab: "(opens in a new tab)",
+  },
+  es: {
+    eyebrow: "Idealizadora",
+    role: "Creadora del método Reequilíbrio Toracoabdominal y fundadora de la Escola Brasileira de RTA e Biomecânica Respiratória",
+    roleShort: "Creadora del Método RTA y del TTCAB",
+    bio: "Mariangela tiene más de 40 años de carrera en la Fisioterapia, con experiencias destacadas en el área pediátrica y respiratoria. Comenzó como profesora en la PUCPR y trabajó durante siete años en los hospitales Pequeno Príncipe y César Pernetta, en Curitiba. Se especializó en el Método Bobath, con influencia de Oacy Veronesi y Sherry Arndt. Su interés por la Fisioterapia Respiratoria la llevó a crear el Método Reequilibrio Toracoabdominal (RTA), difundido desde hace más de tres décadas en todo Brasil. También ideó el TTCAB, la formación para el tratamiento de la tortícolis congénita y otras asimetrías en el bebé.",
+    instagram: "Instagram de Mariangela",
+    courses: "Cursos en el sitio del Método RTA",
+    newTab: "(se abre en una pestaña nueva)",
+  },
+} as const;
+
+export type FounderLocale = "pt" | "en" | "es";
+
+type Props = {
+  locale?: FounderLocale;
+  /** Where "courses" points (default: the Método RTA courses page). */
+  coursesHref?: string;
+  /** Media paths in the site's public/ (defaults above). */
+  photo?: string;
+  living?: { src: string; poster: string } | false;
+  /** Your own image element (e.g. next/image) in place of the photo. */
+  media?: ReactNode;
+  /** Links or buttons at the foot, after the text. */
+  actions?: ReactNode;
+  variant?: "plain" | "card";
+  headingLevel?: "h2" | "h3";
+  id?: string;
+  className?: string;
+};
+
+/**
+ * Founder spotlight: `ProfileSpotlight` (card, living portrait on hover) filled
+ * with the founder's validated text, her Instagram and the courses link. Sites
+ * only drop it in: `<FounderSpotlight locale="pt" />`.
+ */
+export function FounderSpotlight({
+  locale = "pt",
+  coursesHref = FOUNDER.courses,
+  photo = "/images/mariangela.png",
+  living = { src: "/equipe/vivas/mariangela.mp4", poster: "/equipe/vivas/mariangela.webp" },
+  media,
+  actions,
+  variant = "card",
+  headingLevel = "h2",
+  id,
+  className,
+}: Props) {
+  const t = FOUNDER[locale];
+  return (
+    <ProfileSpotlight
+      variant={variant}
+      headingLevel={headingLevel}
+      id={id}
+      className={className}
+      eyebrow={t.eyebrow}
+      name={FOUNDER.name}
+      role={t.role}
+      registration={FOUNDER.registration}
+      bio={t.bio}
+      photo={{ src: photo, alt: FOUNDER.name }}
+      living={living || undefined}
+      media={media}
+      actions={actions}
+      social={[
+        { label: t.instagram, href: FOUNDER.instagram, Icon: IconInstagram },
+        { label: t.courses, href: coursesHref, Icon: IconGraduationCap },
+      ]}
+      newTabLabel={t.newTab}
+    />
+  );
+}

package/components/TestimonialCard.tsx

@@ -79,7 +79,11 @@ type Props = {
    *  or only in the panel — the card stays a clean quote with the avatar. */
   mediaPlacement?: "card" | "panel";
   /** The card shows only this excerpt, large, as a pull quote (the person's own
-   *  words, never rewritten); the whole `quote` goes to the panel. */
+   *  words, never rewritten); the whole `quote` goes to the panel.
+   *  RULE (2026-11-05, Felipe): with `panel`, the card is ONLY a quote — never
+   *  the long text clamped. Pass the excerpt the client chose; without one, the
+   *  card takes the first sentence of a string `quote` (cut at a word, with "…",
+   *  when it runs long). The whole testimonial always opens in the panel. */
   excerpt?: ReactNode;
   /** Quote marks around the excerpt. false for a context line that is not the
    *  person's speech (e.g. the description of a video). Default: true. */
@@ -179,8 +183,21 @@ function TapVideo({ src, youtubeId, poster: posterProp, description, withSound =
 // whole class names, so Tailwind generates them
 const CLAMP: Record<number, string> = { 3: "line-clamp-3", 4: "line-clamp-4", 5: "line-clamp-5", 6: "line-clamp-6", 8: "line-clamp-8" };
 
+/** First sentence of a testimonial, for the card when no excerpt was chosen.
+ *  Long sentences are cut at a word (≤ 140 characters) with "…". */
+export function firstSentence(text: string, max = 140): string {
+  const clean = text.replace(/\s+/g, " ").trim();
+  const m = /^(.+?[.!?])(\s|$)/.exec(clean);
+  const s = m ? m[1] : clean;
+  if (s.length <= max) return s;
+  const cut = s.slice(0, max);
+  return `${cut.slice(0, cut.lastIndexOf(" ")).replace(/[,;:\s]+$/, "")}…`;
+}
+
 export function TestimonialCard({ quote, author, authorPhoto, authorAvatar, authors, link, video, photo, mediaPlacement = "card", role, joiners, panel, excerpt, excerptMarks = true, clampLines, as: Root = "div", labels, className = "" }: Props) {
   const t = { ...EN, ...labels };
+  // with a panel the card is only a quote: the given excerpt, or the first sentence
+  const shownExcerpt = excerpt ?? (panel && typeof quote === "string" ? firstSentence(quote) : undefined);
   const watch = (d: string) => (typeof t.watch === "function" ? t.watch(d) : t.watch.replace("{description}", d));
   const people = authors ?? [{ name: author ?? "", photo: authorPhoto, avatar: authorAvatar }];
   const cardPhoto = mediaPlacement === "card" ? photo : undefined;
@@ -227,7 +244,7 @@ export function TestimonialCard({ quote, author, authorPhoto, authorAvatar, auth
       ) : null}
       <figure className={`flex flex-1 flex-col justify-between gap-5 ${cardVideo || cardPhoto ? "p-5 md:p-7" : "p-6 md:p-8"}`}>
         <div>
-          {excerpt ? (
+          {shownExcerpt ? (
             <blockquote className="m-0">
               {/* the family's drawn mark (same as PullQuote) above the line; the line itself stays clean */}
               {excerptMarks && (
@@ -235,7 +252,7 @@ export function TestimonialCard({ quote, author, authorPhoto, authorAvatar, auth
                   <path d="M0 36V22C0 10.5 6 2.6 18.2 0l2.3 5.2C14.6 7.4 11.4 11 11 16h8.6v20H0Zm27.4 0V22c0-11.5 6-19.4 18.2-22l2.3 5.2C42 7.4 38.8 11 38.4 16H47v20H27.4Z" />
                 </svg>
               )}
-              <p className="m-0 font-heading text-[1.3rem] leading-snug font-semibold text-balance text-ink md:text-[1.5rem]">{excerpt}</p>
+              <p className="m-0 font-heading text-[1.3rem] leading-snug font-semibold text-balance text-ink md:text-[1.5rem]">{shownExcerpt}</p>
             </blockquote>
           ) : (
             <blockquote

package/components/curtainHeadScript.ts

@@ -0,0 +1,13 @@
+/**
+ * Script for the <head> (before paint) of the Curtain: marks the curtain as seen
+ * in this session, so it does not repeat on navigation or reload. Without it, the
+ * curtain shows on every load. Plain module (no "use client"): a server layout
+ * can call it.
+ *   // Next (app/layout):
+ *   import { curtainHeadScript } from "@breathe-ds/ui/components/curtainHeadScript";
+ *   <script dangerouslySetInnerHTML={{ __html: curtainHeadScript("cg-curtain") }} />
+ */
+export function curtainHeadScript(storageKey = "cg-curtain") {
+  const k = JSON.stringify(storageKey);
+  return `try{var d=document.documentElement;if(sessionStorage.getItem(${k})){d.setAttribute('data-cg-curtain','seen')}else{sessionStorage.setItem(${k},'1')}}catch(e){}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breathe-ds/ui",
-  "version": "0.6.7",
+  "version": "0.6.9",
   "description": "Breathe DS — the design system of the Cuidado Global family of sites (creeta, ttcab, metodorta). Themeable tokens + React components.",
   "license": "MIT",
   "type": "module",
@@ -50,6 +50,7 @@
     "./components/BottomNav": "./components/BottomNav.tsx",
     "./components/BreatheMark": "./components/BreatheMark.tsx",
     "./components/Curtain": "./components/Curtain.tsx",
+    "./components/curtainHeadScript": "./components/curtainHeadScript.ts",
     "./components/Lockup": "./components/Lockup.tsx",
     "./tokens/neutral.css": {
       "style": "./tokens/neutral.css",
@@ -99,6 +100,7 @@
     "./components/SidePanel": "./components/SidePanel.tsx",
     "./components/PullQuote": "./components/PullQuote.tsx",
     "./components/ProfileSpotlight": "./components/ProfileSpotlight.tsx",
+    "./components/FounderSpotlight": "./components/FounderSpotlight.tsx",
     "./components/FilterBar": "./components/FilterBar.tsx",
     "./components/Callout": "./components/Callout.tsx",
     "./components/KenBurnsImage": "./components/KenBurnsImage.tsx"