@wix/web5-core 1.56.0

package/dist/cjs/components/placement/PlacementResponseRenderer.css

@@ -0,0 +1,269 @@
+/* PlacementResponseRenderer — placement card chrome (DL #097 —
+   Figma 128:5251 framing / 128:5258 conversation).
+   Renders the streamed answer as a warm card with a FormAI eyebrow and a
+   gradient highlight ring (accent → transparent, top-left → bottom-right)
+   that holds while the answer streams, spins twice once it settles, and then
+   stays put. The conversation variant additionally shows the user's question
+   as a chip.
+   Re-skin via the `--w5-placement-*` tokens below.
+   The loading skeleton's styles live in `../ui/PlacementLoader.css`. */
+
+/* Outer host-page spacing — matches the loader's `--w5-placement-spacing` so
+   the gap to surrounding content doesn't change at swap time. */
+[data-w5-placement-renderer] {
+  margin-block: var(--w5-placement-spacing, 24px);
+}
+
+/* The loader→content swap is height-animated by the PlacementSmoothHeight
+   wrapper (`.w5-placement__body` below); this fade-in covers the paint swap
+   itself so the card doesn't pop in while the height glides. Plays once per
+   renderer mount (so again after each re-submit). */
+[data-w5-placement-renderer] {
+  animation: w5-placement-content-in 240ms ease-out both;
+}
+
+@keyframes w5-placement-content-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+[data-w5-placement-renderer].w5-placement {
+  box-sizing: border-box;
+  padding: var(--w5-placement-card-padding, 30px);
+  border-radius: var(--w5-placement-card-radius, 4px);
+  background: var(--w5-placement-card-bg, #f1f0ee);
+  /* Section components inside the answer use `bg-background`
+     (= var(--color-background), white), which would paint a white block over
+     the card. Re-point that token within the placement so those sections
+     inherit the card colour instead — one shared background across the whole
+     placement. Change --w5-placement-card-bg to re-theme card + sections. */
+  --color-background: var(--w5-placement-card-bg, #f1f0ee);
+  /* Reserve the border box so the conversation highlight ring (the
+     `::before` gradient below) doesn't shift layout when it fades in/out. */
+  border: 2px solid transparent;
+}
+
+/* Height smoothing for the whole placement slot: PlacementSmoothHeight
+   (mounted around the loader/content swap in embed-placement) measures the
+   current child (ResizeObserver) and sets an explicit `height` here, so the
+   loader→content swap and each streamed section appending animate instead
+   of snapping. Until the first measurement lands there's no inline height
+   and the box sizes naturally. */
+.w5-placement__body {
+  overflow: clip;
+  transition: height var(--w5-placement-grow-duration, 350ms) ease-out;
+}
+
+/* flow-root so children's top/bottom margins can't collapse out of the
+   measured inner box (they'd be clipped by the wrapper otherwise). */
+.w5-placement__body-inner {
+  display: flow-root;
+}
+
+/* Height clamp + "Show more" (DL #113) — Google-AI-Overview style. Opt-in via
+   the slot's `data-clamp` attribute; the renderer adds `--clamped` to the card
+   ROOT and caps it directly (no inner wrapper), so the answer sections stay
+   direct children of the placement root — clients lay them out with
+   `:has(> …)` direct-child grids (feature-com's search-overview two-column
+   layout) that a wrapper would break. The cap is also what
+   `PlacementSmoothHeight` then measures, so the slot animates to the capped
+   height rather than the full content. */
+.w5-placement--clamped {
+  position: relative;
+  max-height: var(--w5-placement-clamp-height, 220px);
+  overflow: hidden;
+}
+
+/* The variant highlight ring is a `::before` at `inset: -2px` (outside the
+   padding box) — `overflow: hidden` above would clip it to a stub. Drop it on
+   clamped cards; the clamp + fade is its own treatment. */
+.w5-placement--clamped::before {
+  content: none;
+}
+
+/* Fade the cut-off bottom edge to the card background (a wash, like Google —
+   not a mask that makes text vanish). Rendered only when the content overflows
+   (the renderer omits it otherwise), pinned to the bottom of the capped root. */
+.w5-placement__fade {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: var(--w5-placement-fade-height, 96px);
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    var(--w5-placement-card-bg, #f1f0ee)
+  );
+  pointer-events: none;
+}
+
+/* "Show more" pill, pinned over the fade. Re-skins via the shared
+   `--w5-placement-*` tokens. */
+.w5-placement__show-more {
+  position: absolute;
+  bottom: 14px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 18px;
+  border-radius: 999px;
+  border: 1px solid var(--w5-placement-show-more-border, #d8d5cf);
+  background: var(--w5-placement-show-more-bg, #fff);
+  color: var(--w5-placement-show-more-color, #000);
+  font-size: 14px;
+  line-height: 15px;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.w5-placement__show-more:hover {
+  background: var(--w5-placement-show-more-bg-hover, #f6f5f3);
+}
+
+.w5-placement__show-more:focus-visible {
+  outline: 2px solid var(--w5-placement-accent, #ef1b28);
+  outline-offset: 2px;
+}
+
+.w5-placement__show-more-icon {
+  flex: none;
+}
+
+.w5-placement__eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.w5-placement__eyebrow-icon {
+  flex: none;
+  color: var(--w5-placement-accent, #ef1b28);
+}
+
+.w5-placement__eyebrow-label {
+  font-size: 14px;
+  line-height: 15px;
+  font-weight: 500;
+  color: var(--w5-placement-eyebrow-color, #000);
+}
+
+/* The user's question (conversation variant). */
+.w5-placement__query {
+  display: inline-block;
+  margin: 0 0 20px;
+  padding: 7px 10px;
+  border-radius: 3px;
+  background: var(--w5-placement-query-bg, #e2dfd9);
+  font-size: 14px;
+  line-height: 15px;
+  color: var(--w5-placement-query-color, #000);
+}
+
+/* Placement highlight (conversation + informational): a gradient ring — fully
+   opaque accent at the top-left corner fading to transparent toward the
+   bottom-right. A solid `border-color` can't render a gradient, so the ring
+   is a masked pseudo-element: the gradient paints the whole box, and the
+   mask punches out the padding box so only the 2px border area remains.
+   The ring shows as soon as the placement starts to render, holds for the
+   whole streamed render (the `--streaming` modifier below); once the answer
+   settles the modifier drops and the animation plays — the gradient spins
+   two full counter-clockwise turns, then the ring stays in place. Replays
+   after each re-submit since the renderer remounts via the loader. */
+.w5-placement--conversation,
+.w5-placement--informational {
+  position: relative;
+}
+
+/* Registered so the gradient angle interpolates in the keyframes below.
+   Browsers without `@property` (Firefox < 128) apply custom-property
+   keyframes discretely — harmless here, since -585deg ≡ 135deg (mod 360°)
+   the jump is invisible and only the hold + fade-out remains. */
+@property --w5-placement-highlight-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 135deg;
+}
+
+.w5-placement--conversation::before,
+.w5-placement--informational::before {
+  content: '';
+  position: absolute;
+  /* Cover the reserved 2px transparent border (absolute positioning is
+     relative to the padding box, which excludes it). */
+  inset: -2px;
+  padding: 2px;
+  /* Outer radius of the card's border box: card radius + border width. */
+  border-radius: calc(var(--w5-placement-card-radius, 4px) + 2px);
+  background: linear-gradient(
+    var(--w5-placement-highlight-angle, 135deg),
+    var(--w5-placement-accent, #ef1b28),
+    transparent
+  );
+  /* Keep only the ring: padding-box ⊖ full box. */
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  /* ~9.4s default for the 2.5 counter-clockwise turns (same angular speed as
+     the original 2 turns in 7.5s); the ring then holds its final state
+     (`both` fill mode) and stays visible. */
+  animation: w5-placement-highlight
+    var(--w5-placement-highlight-duration, 9375ms) linear both;
+}
+
+/* Still streaming: hold the ring fully visible; the spin only starts
+   when this class is removed (answer settled) and the animation kicks in. */
+.w5-placement--conversation.w5-placement--streaming::before,
+.w5-placement--informational.w5-placement--streaming::before {
+  animation: none;
+  opacity: 1;
+}
+
+@keyframes w5-placement-highlight {
+  /* Two and a half counter-clockwise turns (135° → -765° ≡ 315°) at constant
+     speed, so the accent settles on the opposite side (bottom-right); the
+     ring stays fully visible throughout and after. */
+  0% {
+    --w5-placement-highlight-angle: 135deg;
+    opacity: 1;
+  }
+  100% {
+    --w5-placement-highlight-angle: -765deg;
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* No spin — show the ring statically in its settled position
+     (accent at the bottom-right). */
+  .w5-placement--conversation::before,
+  .w5-placement--informational::before,
+  .w5-placement--conversation.w5-placement--streaming::before,
+  .w5-placement--informational.w5-placement--streaming::before {
+    animation: none;
+    opacity: 1;
+    --w5-placement-highlight-angle: 315deg;
+  }
+
+  .w5-placement__body {
+    transition: none;
+  }
+
+  [data-w5-placement-renderer] {
+    animation: none;
+  }
+}

package/dist/cjs/components/placement/PlacementResponseRenderer.js

@@ -0,0 +1,259 @@
+"use strict";
+
+exports.__esModule = true;
+exports.PlacementSmoothHeight = exports.PlacementResponseRenderer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _jsxFileName = "/home/builduser/work/c2b6ca0b3fa984ee/packages/web5-core/dist/cjs/components/placement/PlacementResponseRenderer.tsx";
+/**
+ * PlacementResponseRenderer (DL #088 D3.2, DL #097 visual pass).
+ *
+ * Renders the AI response inside a placement slot. Takes already-parsed
+ * sections from the caller's parser and renders the placement chrome
+ * (FormAI eyebrow + optional user-query chip) above them.
+ *
+ * The renderer deliberately does NOT call the parser itself — that's the
+ * caller's job (the placement bundle wires the parser of its choice).
+ *
+ * No post-parse filtering: hero / next-steps exclusion is the **prompt's**
+ * job (the LLM is instructed not to emit them), and there's no
+ * `maxComponents` cap. Placement-specific designs for a section type (e.g. a
+ * tailored rich-text fallback) belong as `{ placement: true }` registry
+ * variants in the client package — `resolveSection(type, { placement: true })`
+ * picks them automatically.
+ *
+ * Visual chrome (Figma 128:5251 framing / 128:5258 conversation):
+ *   - `variant` drives the card; both variants show the highlight border.
+ *   - `eyebrow` renders the FormAI star + label (chrome, opt-in).
+ *   - `query` renders the user's question as a chip (conversation only).
+ * Styles live in `./PlacementResponseRenderer.css` (injected with the client UMD).
+ */
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Minimal section shape the renderer needs. Designed to match
+ * `web50-server-ui`'s `PageSection` shape (with a pre-instantiated `component`)
+ * so the renderer works against today's parser output without modification.
+ */
+
+/**
+ * Placement visual variant → `w5-placement--<variant>` class. Defined in
+ * `../../types/placement` (DL #106 D1: free-form string, no longer a closed
+ * `'informational' | 'conversation'` union) and re-exported here for back-compat
+ * with existing `from '.../PlacementResponseRenderer'` imports.
+ */
+
+/**
+ * Smooths out step-wise height changes in the placement slot: the
+ * loader→content swap and each streamed section appending. `height: auto`
+ * changes aren't CSS-animatable, so we measure the content's natural height
+ * with a ResizeObserver and transition an explicit `height` on the wrapper
+ * (see `.w5-placement__body` in the CSS). Falls back to natural auto-height
+ * when ResizeObserver is unavailable (SSR, old jsdom).
+ *
+ * Mounted by the placement stream app (embed-placement) AROUND the
+ * loader/content swap — not inside this renderer — so the swap itself
+ * animates too.
+ */
+const PlacementSmoothHeight = ({
+  children
+}) => {
+  const innerRef = _react.default.useRef(null);
+  const [height, setHeight] = _react.default.useState(null);
+  _react.default.useEffect(() => {
+    const el = innerRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(() => {
+      setHeight(el.offsetHeight);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "w5-placement__body",
+    style: height != null ? {
+      height
+    } : undefined,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 123,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: innerRef,
+    className: "w5-placement__body-inner",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 128,
+      columnNumber: 7
+    }
+  }, children));
+};
+exports.PlacementSmoothHeight = PlacementSmoothHeight;
+const StarIcon = () => /*#__PURE__*/_react.default.createElement('svg', {
+  className: 'w5-placement__eyebrow-icon',
+  viewBox: '0 0 16 16',
+  width: 13,
+  height: 13,
+  'aria-hidden': true,
+  focusable: false
+}, /*#__PURE__*/_react.default.createElement('path', {
+  d: 'M8 0 L9.6 6.4 L16 8 L9.6 9.6 L8 16 L6.4 9.6 L0 8 L6.4 6.4 Z',
+  fill: 'currentColor'
+}));
+const ChevronIcon = () => /*#__PURE__*/_react.default.createElement('svg', {
+  className: 'w5-placement__show-more-icon',
+  viewBox: '0 0 16 16',
+  width: 14,
+  height: 14,
+  'aria-hidden': true,
+  focusable: false
+}, /*#__PURE__*/_react.default.createElement('path', {
+  d: 'M4 6 L8 10 L12 6',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 1.6,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round'
+}));
+const PlacementResponseRenderer = ({
+  sections,
+  prompt,
+  eyebrow,
+  query,
+  variant,
+  streaming,
+  className,
+  clamp,
+  clampHeight,
+  showMoreHref,
+  showMoreLabel
+}) => {
+  // Overflow detection for the clamp (DL #113). The clamp caps the *root* card
+  // (not a wrapper) so the answer sections stay direct children of the
+  // placement root — clients lay them out with `:has(> …)` direct-child grids
+  // (e.g. feature-com's search-overview two-column layout), which a wrapper
+  // would break. With `max-height` + `overflow: hidden` the root's scrollHeight
+  // is the full content and clientHeight is the capped box; the fade + "Show
+  // more" only appear when the content actually overflows (a fade under a short
+  // answer reads as broken). Re-measure on every section change (streaming) and
+  // on container resize.
+  const rootRef = _react.default.useRef(null);
+  const [overflowing, setOverflowing] = _react.default.useState(false);
+  _react.default.useEffect(() => {
+    if (!clamp) {
+      setOverflowing(false);
+      return;
+    }
+    const el = rootRef.current;
+    if (!el) return;
+    const measure = () => setOverflowing(el.scrollHeight > el.clientHeight + 1);
+    measure();
+    if (typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [clamp, clampHeight, sections]);
+  const rootClass = ['w5-placement', variant ? `w5-placement--${variant}` : '', streaming ? 'w5-placement--streaming' : '', clamp ? 'w5-placement--clamped' : '', className ?? ''].filter(Boolean).join(' ');
+  const sectionNodes = sections.map((section, i) => /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+    key: section.id ?? `${section.sectionType}-${i}`,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 225,
+      columnNumber: 5
+    }
+  }, section.component));
+
+  // The fade + button overlay the bottom of the clamped card. The button only
+  // appears once the content actually overflows and a destination is supplied.
+  const showMore = !!clamp && overflowing && !!showMoreHref;
+  return /*#__PURE__*/_react.default.createElement("section", {
+    ref: rootRef,
+    className: rootClass,
+    "data-w5-placement-renderer": "",
+    style: clamp && clampHeight != null ? {
+      maxHeight: `${clampHeight}px`
+    } : undefined,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 235,
+      columnNumber: 5
+    }
+  }, eyebrow && /*#__PURE__*/_react.default.createElement("div", {
+    className: "w5-placement__eyebrow",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 246,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(StarIcon, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 247,
+      columnNumber: 11
+    }
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "w5-placement__eyebrow-label",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 248,
+      columnNumber: 11
+    }
+  }, eyebrow)), query && /*#__PURE__*/_react.default.createElement("p", {
+    className: "w5-placement__query",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 251,
+      columnNumber: 17
+    }
+  }, query), prompt && /*#__PURE__*/_react.default.createElement("header", {
+    className: "w5-placement__prompt",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 252,
+      columnNumber: 18
+    }
+  }, prompt), sectionNodes, showMore && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "w5-placement__fade",
+    "aria-hidden": "true",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 260,
+      columnNumber: 11
+    }
+  }), /*#__PURE__*/_react.default.createElement("a", {
+    className: "w5-placement__show-more",
+    href: showMoreHref,
+    "aria-label": "See the full answer on the AI page",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 261,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 266,
+      columnNumber: 13
+    }
+  }, showMoreLabel ?? 'Show more'), /*#__PURE__*/_react.default.createElement(ChevronIcon, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 267,
+      columnNumber: 13
+    }
+  }))));
+};
+exports.PlacementResponseRenderer = PlacementResponseRenderer;
+//# sourceMappingURL=PlacementResponseRenderer.js.map

package/dist/cjs/components/placement/PlacementResponseRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PlacementSmoothHeight","children","innerRef","React","useRef","height","setHeight","useState","useEffect","el","current","ResizeObserver","observer","offsetHeight","observe","disconnect","createElement","className","style","undefined","__self","__source","fileName","lineNumber","columnNumber","ref","exports","StarIcon","viewBox","width","focusable","d","fill","ChevronIcon","stroke","strokeWidth","strokeLinecap","strokeLinejoin","PlacementResponseRenderer","sections","prompt","eyebrow","query","variant","streaming","clamp","clampHeight","showMoreHref","showMoreLabel","rootRef","overflowing","setOverflowing","measure","scrollHeight","clientHeight","rootClass","filter","Boolean","join","sectionNodes","map","section","Fragment","key","id","sectionType","component","showMore","maxHeight","href"],"sources":["../../../../src/components/placement/PlacementResponseRenderer.tsx"],"sourcesContent":["/**\n * PlacementResponseRenderer (DL #088 D3.2, DL #097 visual pass).\n *\n * Renders the AI response inside a placement slot. Takes already-parsed\n * sections from the caller's parser and renders the placement chrome\n * (FormAI eyebrow + optional user-query chip) above them.\n *\n * The renderer deliberately does NOT call the parser itself — that's the\n * caller's job (the placement bundle wires the parser of its choice).\n *\n * No post-parse filtering: hero / next-steps exclusion is the **prompt's**\n * job (the LLM is instructed not to emit them), and there's no\n * `maxComponents` cap. Placement-specific designs for a section type (e.g. a\n * tailored rich-text fallback) belong as `{ placement: true }` registry\n * variants in the client package — `resolveSection(type, { placement: true })`\n * picks them automatically.\n *\n * Visual chrome (Figma 128:5251 framing / 128:5258 conversation):\n *   - `variant` drives the card; both variants show the highlight border.\n *   - `eyebrow` renders the FormAI star + label (chrome, opt-in).\n *   - `query` renders the user's question as a chip (conversation only).\n * Styles live in `./PlacementResponseRenderer.css` (injected with the client UMD).\n */\nimport React, { Fragment, type FC, type ReactNode } from 'react';\nimport type { PlacementVariant } from '../../types/placement';\n\n/**\n * Minimal section shape the renderer needs. Designed to match\n * `web50-server-ui`'s `PageSection` shape (with a pre-instantiated `component`)\n * so the renderer works against today's parser output without modification.\n */\nexport interface PlacementSection {\n  /** Stable id for React key. Falls back to `sectionType + index` if absent. */\n  id?: string;\n  /** Section type key (e.g., 'narrative', 'list-items', 'pros-cons'). */\n  sectionType: string;\n  /** Pre-instantiated React element from the parser. */\n  component: ReactNode;\n}\n\n/**\n * Placement visual variant → `w5-placement--<variant>` class. Defined in\n * `../../types/placement` (DL #106 D1: free-form string, no longer a closed\n * `'informational' | 'conversation'` union) and re-exported here for back-compat\n * with existing `from '.../PlacementResponseRenderer'` imports.\n */\nexport type { PlacementVariant };\n\nexport interface PlacementResponseRendererProps {\n  /** Already-parsed sections from `parseMarkdownToComponents`. */\n  sections: readonly PlacementSection[];\n  /** Deprecated plain-text prompt header (kept for back-compat). */\n  prompt?: string;\n  /**\n   * Eyebrow label shown with the accent star at the top (e.g. \"FormAI\").\n   * Chrome — opt-in; omit to render no eyebrow.\n   */\n  eyebrow?: string;\n  /**\n   * The user's question, rendered as a chip above the answer (conversation\n   * variant, DL #097). Omit for the informational variant.\n   */\n  query?: string;\n  /** Visual variant — both add the persistent gradient highlight border. */\n  variant?: PlacementVariant;\n  /**\n   * Clamp the answer body to a max height with a fade-out and a \"Show more\"\n   * affordance (DL #113) — Google-AI-Overview style. Opt-in; used by the\n   * `searchResults` placement. The body is capped at `clampHeight` (or the\n   * `--w5-placement-clamp-height` token); the fade + button appear only once\n   * the content overflows and a `showMoreHref` is supplied.\n   */\n  clamp?: boolean;\n  /** Clamp height in px (DL #113). Overrides `--w5-placement-clamp-height`. */\n  clampHeight?: number;\n  /**\n   * Destination for \"Show more\" (DL #113) — the main Web5 page seeded with the\n   * visitor's search terms (`<mainPage>?initialQuestion=<q>`). When absent the\n   * button is not rendered (clamp + fade still apply).\n   */\n  showMoreHref?: string;\n  /** Label for the \"Show more\" button (DL #113). Default `'Show more'`. */\n  showMoreLabel?: string;\n  /**\n   * True while the answer is still streaming in. The highlight border stays\n   * solid for the whole render and only starts its spin once this flips to\n   * false (answer settled); it remains visible afterwards.\n   */\n  streaming?: boolean;\n  /** Optional extra className for the placement root. */\n  className?: string;\n}\n\n/**\n * Smooths out step-wise height changes in the placement slot: the\n * loader→content swap and each streamed section appending. `height: auto`\n * changes aren't CSS-animatable, so we measure the content's natural height\n * with a ResizeObserver and transition an explicit `height` on the wrapper\n * (see `.w5-placement__body` in the CSS). Falls back to natural auto-height\n * when ResizeObserver is unavailable (SSR, old jsdom).\n *\n * Mounted by the placement stream app (embed-placement) AROUND the\n * loader/content swap — not inside this renderer — so the swap itself\n * animates too.\n */\nexport const PlacementSmoothHeight: FC<{ children: ReactNode }> = ({\n  children,\n}) => {\n  const innerRef = React.useRef<HTMLDivElement | null>(null);\n  const [height, setHeight] = React.useState<number | null>(null);\n\n  React.useEffect(() => {\n    const el = innerRef.current;\n    if (!el || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(() => {\n      setHeight(el.offsetHeight);\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div\n      className=\"w5-placement__body\"\n      style={height != null ? { height } : undefined}\n    >\n      {/* flow-root (in CSS) keeps child margins inside the measured box. */}\n      <div ref={innerRef} className=\"w5-placement__body-inner\">\n        {children}\n      </div>\n    </div>\n  );\n};\n\nconst StarIcon: FC = () =>\n  React.createElement(\n    'svg',\n    {\n      className: 'w5-placement__eyebrow-icon',\n      viewBox: '0 0 16 16',\n      width: 13,\n      height: 13,\n      'aria-hidden': true,\n      focusable: false,\n    },\n    React.createElement('path', {\n      d: 'M8 0 L9.6 6.4 L16 8 L9.6 9.6 L8 16 L6.4 9.6 L0 8 L6.4 6.4 Z',\n      fill: 'currentColor',\n    }),\n  );\n\nconst ChevronIcon: FC = () =>\n  React.createElement(\n    'svg',\n    {\n      className: 'w5-placement__show-more-icon',\n      viewBox: '0 0 16 16',\n      width: 14,\n      height: 14,\n      'aria-hidden': true,\n      focusable: false,\n    },\n    React.createElement('path', {\n      d: 'M4 6 L8 10 L12 6',\n      fill: 'none',\n      stroke: 'currentColor',\n      strokeWidth: 1.6,\n      strokeLinecap: 'round',\n      strokeLinejoin: 'round',\n    }),\n  );\n\nexport const PlacementResponseRenderer: FC<PlacementResponseRendererProps> = ({\n  sections,\n  prompt,\n  eyebrow,\n  query,\n  variant,\n  streaming,\n  className,\n  clamp,\n  clampHeight,\n  showMoreHref,\n  showMoreLabel,\n}) => {\n  // Overflow detection for the clamp (DL #113). The clamp caps the *root* card\n  // (not a wrapper) so the answer sections stay direct children of the\n  // placement root — clients lay them out with `:has(> …)` direct-child grids\n  // (e.g. feature-com's search-overview two-column layout), which a wrapper\n  // would break. With `max-height` + `overflow: hidden` the root's scrollHeight\n  // is the full content and clientHeight is the capped box; the fade + \"Show\n  // more\" only appear when the content actually overflows (a fade under a short\n  // answer reads as broken). Re-measure on every section change (streaming) and\n  // on container resize.\n  const rootRef = React.useRef<HTMLElement | null>(null);\n  const [overflowing, setOverflowing] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!clamp) {\n      setOverflowing(false);\n      return;\n    }\n    const el = rootRef.current;\n    if (!el) return;\n    const measure = (): void =>\n      setOverflowing(el.scrollHeight > el.clientHeight + 1);\n    measure();\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [clamp, clampHeight, sections]);\n\n  const rootClass = [\n    'w5-placement',\n    variant ? `w5-placement--${variant}` : '',\n    streaming ? 'w5-placement--streaming' : '',\n    clamp ? 'w5-placement--clamped' : '',\n    className ?? '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const sectionNodes = sections.map((section, i) => (\n    <Fragment key={section.id ?? `${section.sectionType}-${i}`}>\n      {section.component}\n    </Fragment>\n  ));\n\n  // The fade + button overlay the bottom of the clamped card. The button only\n  // appears once the content actually overflows and a destination is supplied.\n  const showMore = !!clamp && overflowing && !!showMoreHref;\n\n  return (\n    <section\n      ref={rootRef}\n      className={rootClass}\n      data-w5-placement-renderer=\"\"\n      style={\n        clamp && clampHeight != null\n          ? { maxHeight: `${clampHeight}px` }\n          : undefined\n      }\n    >\n      {eyebrow && (\n        <div className=\"w5-placement__eyebrow\">\n          <StarIcon />\n          <span className=\"w5-placement__eyebrow-label\">{eyebrow}</span>\n        </div>\n      )}\n      {query && <p className=\"w5-placement__query\">{query}</p>}\n      {prompt && <header className=\"w5-placement__prompt\">{prompt}</header>}\n      {sectionNodes}\n      {/* Fade + \"Show more\" overlay the bottom of the clamped card. Both are\n          absolutely positioned (out of flow), so they don't disturb the\n          client's grid placement of the sections, and are clipped by the\n          root's `overflow: hidden`. */}\n      {showMore && (\n        <>\n          <div className=\"w5-placement__fade\" aria-hidden=\"true\" />\n          <a\n            className=\"w5-placement__show-more\"\n            href={showMoreHref}\n            aria-label=\"See the full answer on the AI page\"\n          >\n            <span>{showMoreLabel ?? 'Show more'}</span>\n            <ChevronIcon />\n          </a>\n        </>\n      )}\n    </section>\n  );\n};\n"],"mappings":"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","ignoreList":[]}