@syntrologie/adapt-faq 2.28.0 → 2.29.0

package/dist/faq-styles.d.ts

@@ -29,7 +29,9 @@ export declare const baseStyles: {
         readonly gap: "var(--sc-content-item-gap, 6px)";
     };
     readonly item: {
-        readonly borderRadius: "var(--sc-content-border-radius, 8px)";
+        readonly borderRadius: "var(--sc-content-item-border-radius, 10px)";
+        readonly border: "var(--sc-content-item-border, 1px solid rgba(0, 0, 0, 0.08))";
+        readonly background: "var(--sc-content-item-background, rgba(255, 255, 255, 0.5))";
         readonly overflow: "hidden";
         readonly transition: "box-shadow 0.15s ease";
     };
@@ -98,6 +100,69 @@ export declare const baseStyles: {
         readonly borderColor: "rgba(0, 0, 0, 0.2)";
         readonly backgroundColor: "rgba(0, 0, 0, 0.04)";
     };
+    readonly detail: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: "0";
+        readonly minHeight: "0";
+        readonly padding: "var(--sc-content-item-padding, 10px 16px)";
+    };
+    readonly detailBack: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly gap: "4px";
+        readonly alignSelf: "flex-start";
+        readonly background: "none";
+        readonly border: "none";
+        readonly padding: "4px 0";
+        readonly marginBottom: "6px";
+        readonly cursor: "pointer";
+        readonly fontSize: "13px";
+        readonly fontWeight: 600;
+        readonly opacity: 0.85;
+    };
+    readonly detailQuestion: {
+        readonly fontSize: "var(--sc-content-item-font-size, 16px)";
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.4;
+        readonly marginBottom: "4px";
+    };
+    readonly detailAnswer: {
+        readonly fontSize: "var(--sc-content-body-font-size, 14px)";
+        readonly lineHeight: 1.6;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly flex: "1 1 auto";
+        readonly minHeight: "0";
+    };
+    readonly detailAnswerClamp: {
+        readonly margin: "0";
+        readonly display: "-webkit-box";
+        readonly WebkitLineClamp: "var(--sc-faq-answer-clamp, 3)";
+        readonly WebkitBoxOrient: "vertical";
+        readonly overflow: "hidden";
+        readonly flex: "1 1 auto";
+        readonly minHeight: "0";
+    };
+    readonly detailFooter: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "flex-end";
+        readonly gap: "8px";
+        readonly marginTop: "6px";
+        readonly flexShrink: 0;
+    };
+    readonly detailDiveDeeper: {
+        readonly flex: "0 0 auto";
+        readonly padding: "4px 10px";
+        readonly borderRadius: "9999px";
+        readonly border: "1px solid var(--sc-color-border, rgba(0,0,0,0.14))";
+        readonly background: "transparent";
+        readonly cursor: "pointer";
+        readonly font: "600 12px/1.2 var(--sc-font-family, inherit)";
+        readonly color: "var(--sc-color-primary, #3d8a5e)";
+        readonly whiteSpace: "nowrap";
+    };
     readonly emptyState: {
         readonly textAlign: "center";
         readonly padding: "48px 24px";

package/dist/faq-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"faq-styles.d.ts","sourceRoot":"","sources":["../src/faq-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAQH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGb,CAAC;AAMX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFvB,CAAC"}
+{"version":3,"file":"faq-styles.d.ts","sourceRoot":"","sources":["../src/faq-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAQH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8Mb,CAAC;AAMX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFvB,CAAC"}

package/dist/renderHealth.d.ts

@@ -0,0 +1,81 @@
+/**
+ * renderHealth — runtime self-detection of blank render and undeclared clipping
+ * for the FAQ accordion.
+ *
+ * A tile can look correct in tests yet paint blank on a real host (a device
+ * compositing quirk, a font that measures wider, a broken image CDN). After the
+ * accordion paints, this module re-measures it and emits a PostHog signal via
+ * the ONE consent-gated door (`window.SynOS.runtime.events.emit`) when it finds a
+ * blank tile or an undeclared clip. Field-RUM for "the FAQ broke on a customer's
+ * page".
+ *
+ * This is a lean, package-LOCAL copy of the pattern adaptive-product owns:
+ * `@syntrologie/adapt-faq` does not (and should not) depend on
+ * `@syntrologie/adapt-product`, and the two share no runtime-util package. The
+ * blank check is identical; the clip check is the generic text-overflow subset
+ * (the FAQ has no `[data-critical-text]` identity nodes, so the product card's
+ * Tier-1 identity rule does not apply here).
+ *   Follow-up: extract a shared runtime-util package so both adaptives import one
+ *   copy.
+ *
+ * COE-051 lesson: `publish()` only notifies in-process canvas subscribers — it
+ * NEVER reaches PostHog. `emit()` is the sanctioned capture path (the EventBus
+ * forwards emit()'d events to its consent-gated posthogCapture sink). The event
+ * name MUST satisfy validateEventName (`app:{category}:{action}`, colon segments)
+ * or the bus silently drops it.
+ *
+ * NON-PII discipline: only element tag/class PATHS and pixel numbers ever leave
+ * the widget — never text content, never customer copy.
+ */
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export interface ClipFinding {
+    /** Structural path to the offending node (NON-PII), e.g. `div.faq>button`. */
+    path: string;
+    /** Horizontal overflow in px, rounded. */
+    over_px: number;
+}
+export interface RenderHealth {
+    /** Undeclared clips found inside the tile (empty = clean). */
+    clips: ClipFinding[];
+    /** True when the tile occupies real area but painted no text and no complete
+     *  image (a blank tile). */
+    blank: boolean;
+}
+/**
+ * Measure the render health of a tile root. Pure DOM read — no side effects, no
+ * telemetry. Safe to call any time after paint.
+ *   - text-clip: an element with its own text whose scrollWidth exceeds
+ *     clientWidth by >1px, with no textOverflow:ellipsis, not under [data-clip-ok].
+ *   - blank: the tile has real area but no painted text and no complete image.
+ */
+export declare function measureRenderHealth(root: Element): RenderHealth;
+export interface RenderHealthReportOptions {
+    /** Event category: emits `app:<category>:blank` / `:clipped`. */
+    category: string;
+    /** `widget_kind` tag included in every payload. */
+    widgetKind: string;
+    /** Extra NON-PII context merged into every payload. */
+    context?: Record<string, unknown>;
+}
+/** Measure `root` and, if it clips or paints blank, emit the self-detection
+ *  event via the consent-gated emit() path. Returns the measured health. Never
+ *  throws. */
+export declare function reportRenderHealth(root: Element, opts: RenderHealthReportOptions): RenderHealth;
+/** What the widget's probe returns for one measurement pass. */
+export interface RenderHealthProbe extends RenderHealthReportOptions {
+    /** The element to measure, or `null` to SKIP this pass (unsettled state). */
+    root: Element | null;
+    /** Stable key for the current visual state; a state reports AT MOST ONCE. */
+    stateKey: string;
+}
+/**
+ * Lit ReactiveController that runs a widget's render-health probe after each
+ * paint settles (rAF then a 0ms timeout), at most once per visual state.
+ */
+export declare class RenderHealthController implements ReactiveController {
+    #private;
+    constructor(host: ReactiveControllerHost, probe: () => RenderHealthProbe | null);
+    hostUpdated(): void;
+    hostDisconnected(): void;
+}
+//# sourceMappingURL=renderHealth.d.ts.map

package/dist/renderHealth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderHealth.d.ts","sourceRoot":"","sources":["../src/renderHealth.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEtE,MAAM,WAAW,WAAW;IAC1B,8EAA8E;IAC9E,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,8DAA8D;IAC9D,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB;gCAC4B;IAC5B,KAAK,EAAE,OAAO,CAAC;CAChB;AAoCD;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,OAAO,GAAG,YAAY,CA6C/D;AAwBD,MAAM,WAAW,yBAAyB;IACxC,iEAAiE;IACjE,QAAQ,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,UAAU,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACnC;AAID;;cAEc;AACd,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,yBAAyB,GAAG,YAAY,CAqB/F;AAED,gEAAgE;AAChE,MAAM,WAAW,iBAAkB,SAAQ,yBAAyB;IAClE,6EAA6E;IAC7E,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACrB,6EAA6E;IAC7E,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,qBAAa,sBAAuB,YAAW,kBAAkB;;gBAKnD,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAE,MAAM,iBAAiB,GAAG,IAAI;IAK/E,WAAW,IAAI,IAAI;IAInB,gBAAgB,IAAI,IAAI;CAyCzB"}