@obsrviq/widgets 0.3.0

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@obsrviq/widgets",
+  "version": "0.3.0",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Obsrviq embeddable white-label widgets — replay, insights, recommendations, scores, copilot (§12).",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "styles.css"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "lucide-react": "^0.468.0",
+    "@obsrviq/player": "0.3.0",
+    "@obsrviq/ui": "0.3.0",
+    "@obsrviq/types": "0.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.17",
+    "@types/react-dom": "^18.3.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "build": "node scripts/build-embed-css.mjs && tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/ObsrviqCopilot.tsx

@@ -0,0 +1,95 @@
+import { useRef, useState } from 'react';
+import { Send } from 'lucide-react';
+import { ThemeScope, type BaseWidgetProps } from './common.js';
+import { copilotStream } from './client.js';
+
+export interface ObsrviqCopilotProps extends BaseWidgetProps {
+  siteId: string;
+  placeholder?: string;
+}
+
+interface Turn {
+  q: string;
+  a: string;
+  evidence: string[];
+  streaming: boolean;
+}
+
+/** Embeddable copilot — NL Q&A grounded in the tenant's data (§14). */
+export function ObsrviqCopilot({ siteId, apiBaseUrl, apiKey, token, theme, placeholder = 'Ask about your visitors…' }: ObsrviqCopilotProps) {
+  const cfg = { apiBaseUrl, apiKey, token };
+  const [input, setInput] = useState('');
+  const [turns, setTurns] = useState<Turn[]>([]);
+  const [busy, setBusy] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const ask = async () => {
+    const q = input.trim();
+    if (!q || busy) return;
+    setInput('');
+    setBusy(true);
+    const idx = turns.length;
+    setTurns((t) => [...t, { q, a: '', evidence: [], streaming: true }]);
+    try {
+      for await (const chunk of copilotStream(cfg, siteId, q)) {
+        if (chunk.kind === 'token') {
+          setTurns((t) => t.map((x, i) => (i === idx ? { ...x, a: x.a + chunk.text } : x)));
+        } else if (chunk.kind === 'evidence') {
+          setTurns((t) => t.map((x, i) => (i === idx ? { ...x, evidence: chunk.evidence.map((e) => e.ref) } : x)));
+        } else if (chunk.kind === 'error') {
+          setTurns((t) => t.map((x, i) => (i === idx ? { ...x, a: x.a + `\n[error: ${chunk.message}]` } : x)));
+        }
+        scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
+      }
+    } catch (e) {
+      setTurns((t) => t.map((x, i) => (i === idx ? { ...x, a: x.a + `\n[connection error]` } : x)));
+    } finally {
+      setTurns((t) => t.map((x, i) => (i === idx ? { ...x, streaming: false } : x)));
+      setBusy(false);
+    }
+  };
+
+  return (
+    <ThemeScope theme={theme} className="lum-widget--copilot">
+      <div className="lum-w-copilot">
+        <div className="lum-w-copilot__log" ref={scrollRef}>
+          {turns.length === 0 && (
+            <div className="lum-w-copilot__hint lum-muted">
+              Try “Where are users struggling?” or “What's causing errors?”
+            </div>
+          )}
+          {turns.map((t, i) => (
+            <div key={i} className="lum-w-copilot__turn">
+              <div className="lum-w-copilot__q">{t.q}</div>
+              <div className="lum-w-copilot__a">
+                {t.a}
+                {t.streaming && <span className="lum-w-copilot__caret" />}
+                {t.evidence.length > 0 && (
+                  <div className="lum-w-copilot__ev lum-muted">Evidence: {t.evidence.length} session(s)</div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+        <form
+          className="lum-w-copilot__bar"
+          onSubmit={(e) => {
+            e.preventDefault();
+            void ask();
+          }}
+        >
+          <input
+            className="lum-pl-search"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder={placeholder}
+            aria-label="Ask the copilot"
+          />
+          <button className="lum-btn lum-btn--primary lum-btn--sm" type="submit" disabled={busy} aria-label="Send">
+            <Send size={15} />
+          </button>
+        </form>
+      </div>
+    </ThemeScope>
+  );
+}

package/src/ObsrviqInsights.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useState } from 'react';
+import type { InsightCard } from '@obsrviq/types';
+import { Badge, Button, EmptyState, ErrorState, Skeleton, ToastProvider, useToast } from '@obsrviq/ui';
+import { ThemeScope, type BaseWidgetProps } from './common.js';
+import { apiGet, apiPost } from './client.js';
+
+export interface ObsrviqInsightsProps extends BaseWidgetProps {
+  siteId: string;
+  max?: number;
+  onApply?: (card: InsightCard) => void;
+  onDismiss?: (card: InsightCard) => void;
+}
+
+const SEVERITY_TONE: Record<InsightCard['severity'], 'info' | 'warn' | 'error'> = {
+  info: 'info',
+  low: 'info',
+  medium: 'warn',
+  high: 'error',
+};
+
+export function ObsrviqInsights(props: ObsrviqInsightsProps) {
+  return (
+    <ThemeScope theme={props.theme} className="lum-widget--insights">
+      <ToastProvider>
+        <InsightsInner {...props} />
+      </ToastProvider>
+    </ThemeScope>
+  );
+}
+
+function InsightsInner({ siteId, apiBaseUrl, apiKey, token, max = 5, onApply, onDismiss }: ObsrviqInsightsProps) {
+  const cfg = { apiBaseUrl, apiKey, token };
+  const [cards, setCards] = useState<InsightCard[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const toast = useToast();
+
+  useEffect(() => {
+    let alive = true;
+    apiGet<{ items: InsightCard[] }>(cfg, `/v1/insights?siteId=${siteId}`)
+      .then((r) => alive && setCards(r.items))
+      .catch((e) => alive && setError(e.message));
+    return () => {
+      alive = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [siteId]);
+
+  const act = async (card: InsightCard, verb: 'apply' | 'dismiss') => {
+    setCards((cs) => (cs ?? []).map((c) => (c.id === card.id ? { ...c, status: verb === 'apply' ? 'applied' : 'dismissed' } : c)));
+    try {
+      await apiPost(cfg, `/v1/insights/${card.id}/${verb}`);
+      toast(verb === 'apply' ? 'Applied' : 'Dismissed', verb === 'apply' ? 'ok' : 'default');
+      (verb === 'apply' ? onApply : onDismiss)?.(card);
+    } catch {
+      toast('Could not update — try again', 'error');
+    }
+  };
+
+  if (error)
+    return <ErrorState title="We couldn't load insights.">{error}</ErrorState>;
+  if (!cards)
+    return (
+      <div className="lum-w-cards">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div className="lum-w-card" key={i}>
+            <Skeleton width="60%" height={16} />
+            <Skeleton width="100%" height={40} />
+          </div>
+        ))}
+      </div>
+    );
+
+  const visible = cards.filter((c) => c.status !== 'dismissed').slice(0, max);
+  if (visible.length === 0)
+    return <EmptyState title="No insights yet">As soon as visitors arrive, recommendations will appear here.</EmptyState>;
+
+  return (
+    <div className="lum-w-cards">
+      {visible.map((c) => (
+        <article className="lum-w-card" key={c.id}>
+          <header className="lum-w-card__head">
+            <Badge tone={SEVERITY_TONE[c.severity]}>{c.severity}</Badge>
+            <strong>{c.title}</strong>
+          </header>
+          <p className="lum-w-card__what">{c.what}</p>
+          <p className="lum-w-card__why lum-muted">{c.why}</p>
+          <p className="lum-w-card__rec">{c.recommendation}</p>
+          <div className="lum-w-card__meta">
+            {c.expectedImpact && (
+              <Badge tone="ok">
+                {c.expectedImpact.metric} {c.expectedImpact.lift}
+              </Badge>
+            )}
+            <Badge>effort: {c.effort}</Badge>
+            {c.evidence.length > 0 && <span className="lum-muted">{c.evidence.length} sessions</span>}
+          </div>
+          <footer className="lum-w-card__actions">
+            {c.status === 'applied' ? (
+              <Badge tone="ok">Applied</Badge>
+            ) : (
+              <>
+                <Button variant="primary" size="sm" onClick={() => act(c, 'apply')}>
+                  Apply
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => act(c, 'dismiss')}>
+                  Dismiss
+                </Button>
+              </>
+            )}
+          </footer>
+        </article>
+      ))}
+    </div>
+  );
+}

package/src/ObsrviqRecommendations.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+import type { InsightCard } from '@obsrviq/types';
+import { Badge, Button, EmptyState, ErrorState, Skeleton } from '@obsrviq/ui';
+import { ThemeScope, type BaseWidgetProps } from './common.js';
+import { apiGet, apiPost } from './client.js';
+
+export interface ObsrviqRecommendationsProps extends BaseWidgetProps {
+  siteId: string;
+  onAction?: (rec: InsightCard) => void;
+}
+
+/** A prioritized recommendation queue (impact × confidence / effort, §14). */
+export function ObsrviqRecommendations({ siteId, apiBaseUrl, apiKey, token, theme, onAction }: ObsrviqRecommendationsProps) {
+  const cfg = { apiBaseUrl, apiKey, token };
+  const [items, setItems] = useState<InsightCard[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    apiGet<{ items: InsightCard[] }>(cfg, `/v1/insights?siteId=${siteId}`)
+      .then((r) => alive && setItems(r.items))
+      .catch((e) => alive && setError(e.message));
+    return () => {
+      alive = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [siteId]);
+
+  const run = async (rec: InsightCard) => {
+    setItems((xs) => (xs ?? []).filter((x) => x.id !== rec.id));
+    try {
+      await apiPost(cfg, `/v1/insights/${rec.id}/apply`);
+    } catch {
+      /* keep optimistic */
+    }
+    onAction?.(rec);
+  };
+
+  return (
+    <ThemeScope theme={theme} className="lum-widget--recs">
+      {error ? (
+        <ErrorState title="We couldn't load recommendations.">{error}</ErrorState>
+      ) : !items ? (
+        <div className="lum-w-queue">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <Skeleton key={i} height={48} />
+          ))}
+        </div>
+      ) : items.filter((i) => i.status === 'new' || i.status === 'viewed').length === 0 ? (
+        <EmptyState title="You're all caught up">No open recommendations right now.</EmptyState>
+      ) : (
+        <ol className="lum-w-queue">
+          {items
+            .filter((i) => i.status === 'new' || i.status === 'viewed')
+            .map((rec, i) => (
+              <li className="lum-w-queue__item" key={rec.id}>
+                <span className="lum-w-queue__rank lum-mono">{i + 1}</span>
+                <div className="lum-w-queue__body">
+                  <div className="lum-w-queue__title">{rec.title}</div>
+                  <div className="lum-w-queue__meta">
+                    <Badge tone={rec.severity === 'high' ? 'error' : rec.severity === 'medium' ? 'warn' : 'info'}>{rec.severity}</Badge>
+                    {rec.expectedImpact && <Badge tone="ok">{rec.expectedImpact.lift}</Badge>}
+                    <Badge>effort: {rec.effort}</Badge>
+                  </div>
+                </div>
+                <Button size="sm" variant="primary" onClick={() => run(rec)}>
+                  {rec.action.type === 'one_click_apply' ? 'Apply' : rec.action.type === 'open_experiment' ? 'Experiment' : 'Review'}
+                </Button>
+              </li>
+            ))}
+        </ol>
+      )}
+    </ThemeScope>
+  );
+}

package/src/ObsrviqReplay.tsx

@@ -0,0 +1,237 @@
+import { useEffect, useRef, useState } from 'react';
+import { ReplayPlayer } from '@obsrviq/player';
+import { ThemeScope, type BaseWidgetProps } from './common.js';
+
+type ClipBounds = {
+  fromEvent?: string;
+  toEvent?: string;
+  fromMs?: number;
+  toMs?: number;
+  fromUtc?: number;
+  toUtc?: number;
+  loop?: boolean;
+};
+
+/** What to render when the recording can't be shown (not found / load error):
+ *  'message' (default) shows a small note; 'hide' renders nothing so the embed
+ *  collapses on the host page (pair with `onError` to hide your own wrapper). */
+export type UnavailableFallback = 'message' | 'hide';
+
+export interface ObsrviqReplayProps extends BaseWidgetProps {
+  /** The session to play. Optional if `userId` is given — then the session is
+   *  resolved from the user + clip bounds (UTC window / event names). */
+  sessionId?: string;
+  /** Resolve the session from this user instead of a session id. */
+  userId?: string;
+  /** Optional site scope for `userId` resolution; omit to search the whole tenant. */
+  siteId?: string;
+  startAtMs?: number;
+  /** Play only a segment: bound by two custom-event names, our-clock ms, or UTC. */
+  clip?: ClipBounds;
+  /** Focus mode the player opens in ('stage' = Watch). Overrides the site default. */
+  defaultMode?: 'balanced' | 'stage' | 'debug';
+  /** Restrict the focus-mode toggle to this allowlist; a single entry hides it. */
+  allowedModes?: Array<'balanced' | 'stage' | 'debug'>;
+  /** Playback speed the player opens at (clamped to the nearest offered speed). */
+  defaultSpeed?: number;
+  /** Show the fullscreen control + `F` shortcut. Default true. */
+  allowFullscreen?: boolean;
+  /** Base for "Copy link" deep-links (this embed's URL has no session id). A
+   *  `:id` template, or a base we append `/sessions/:id` to. Omit → console host. */
+  shareUrl?: string;
+  onEnded?: () => void;
+  /** Called once when the recording can't be shown — `reason` is 'not_found'
+   *  (no such session / no match for the user) or 'error' (load/network/auth).
+   *  Use it to hide your own container, log, retry, etc. */
+  onError?: (info: { reason: 'not_found' | 'error'; message: string }) => void;
+  /** What to render when unavailable. Default 'message'. Use 'hide' to collapse. */
+  fallback?: UnavailableFallback;
+  height?: number | string;
+}
+
+function authHeaders(token?: string, apiKey?: string): Record<string, string> {
+  if (token) return { authorization: `Bearer ${token}` };
+  if (apiKey) return { authorization: `Bearer ${apiKey}`, 'x-obsrviq-key': apiKey };
+  return {};
+}
+
+interface Resolved {
+  sessionId: string | null;
+  loading: boolean;
+  error: string | null;
+  notFound: boolean;
+}
+
+/** Resolve a session id from a user (+ clip bounds) via /v1/sessions/locate. */
+function useResolvedSession(
+  enabled: boolean,
+  opts: {
+    apiBaseUrl: string;
+    token?: string;
+    apiKey?: string;
+    userId?: string;
+    siteId?: string;
+    clip?: ClipBounds;
+  },
+): Resolved {
+  const { apiBaseUrl, token, apiKey, userId, siteId, clip } = opts;
+  const [state, setState] = useState<Resolved>({
+    sessionId: null,
+    loading: enabled,
+    error: null,
+    notFound: false,
+  });
+  // Stable signature of just the locate inputs (so we don't refetch every render).
+  const sig = JSON.stringify([userId, siteId, clip?.fromUtc, clip?.toUtc, clip?.fromEvent, clip?.toEvent]);
+
+  useEffect(() => {
+    if (!enabled || !userId) return;
+    const ctrl = new AbortController();
+    setState({ sessionId: null, loading: true, error: null, notFound: false });
+    const q = new URLSearchParams({ userId });
+    if (siteId) q.set('siteId', siteId);
+    if (clip?.fromUtc != null && clip?.toUtc != null) {
+      q.set('fromUtc', String(clip.fromUtc));
+      q.set('toUtc', String(clip.toUtc));
+    } else if (clip?.fromEvent) {
+      q.set('fromEvent', clip.fromEvent);
+      if (clip.toEvent) q.set('toEvent', clip.toEvent);
+    }
+    const base = apiBaseUrl.replace(/\/$/, '');
+    fetch(`${base}/v1/sessions/locate?${q.toString()}`, {
+      headers: authHeaders(token, apiKey),
+      signal: ctrl.signal,
+    })
+      .then(async (r) => {
+        if (!r.ok) {
+          const notFound = r.status === 404;
+          throw Object.assign(
+            new Error(notFound ? 'No matching recording for that user.' : `Lookup failed (${r.status}).`),
+            { notFound },
+          );
+        }
+        return r.json() as Promise<{ sessionId: string }>;
+      })
+      .then((j) => {
+        if (!ctrl.signal.aborted) setState({ sessionId: j.sessionId, loading: false, error: null, notFound: false });
+      })
+      .catch((e: unknown) => {
+        if (ctrl.signal.aborted) return;
+        const notFound = !!(e as { notFound?: boolean })?.notFound;
+        setState({
+          sessionId: null,
+          loading: false,
+          error: e instanceof Error ? e.message : 'Lookup failed.',
+          notFound,
+        });
+      });
+    return () => ctrl.abort();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled, sig, apiBaseUrl]);
+
+  return state;
+}
+
+const msgStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  padding: 16,
+  textAlign: 'center',
+  color: 'var(--lum-muted)',
+  fontSize: 14,
+} as const;
+
+/** The replay player itself, embeddable and white-label (§12). */
+export function ObsrviqReplay({
+  sessionId,
+  userId,
+  siteId,
+  apiBaseUrl,
+  apiKey,
+  token,
+  theme,
+  startAtMs,
+  clip,
+  defaultMode,
+  allowedModes,
+  defaultSpeed,
+  allowFullscreen,
+  shareUrl,
+  onEnded,
+  onError,
+  fallback = 'message',
+  height = 560,
+}: ObsrviqReplayProps) {
+  const needResolve = !sessionId && !!userId;
+  const resolved = useResolvedSession(needResolve, { apiBaseUrl, token, apiKey, userId, siteId, clip });
+  const [playerError, setPlayerError] = useState<{ reason: 'not_found' | 'error'; message: string } | null>(null);
+  const effectiveId = sessionId ?? resolved.sessionId;
+
+  // A fresh session id clears any prior player error.
+  useEffect(() => setPlayerError(null), [effectiveId]);
+
+  // Notify the host once per distinct failure — independent of how we render it.
+  const reportedRef = useRef<string | null>(null);
+  useEffect(() => {
+    let info: { reason: 'not_found' | 'error'; message: string } | null = null;
+    if (!sessionId && !userId) info = { reason: 'error', message: 'Provide a sessionId or a userId.' };
+    else if (resolved.error) info = { reason: resolved.notFound ? 'not_found' : 'error', message: resolved.error };
+    else if (playerError) info = playerError;
+    if (info) {
+      if (reportedRef.current !== info.message) {
+        reportedRef.current = info.message;
+        onError?.(info);
+      }
+    } else {
+      reportedRef.current = null;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId, userId, resolved.error, resolved.notFound, playerError]);
+
+  // No session to hand the player (bad config, still resolving, or no match).
+  if (!effectiveId) {
+    if (fallback === 'hide') return null;
+    const msg =
+      !sessionId && !userId
+        ? 'Provide a sessionId or a userId to play a recording.'
+        : needResolve && resolved.loading
+          ? 'Finding the recording…'
+          : (resolved.error ?? 'Recording unavailable.');
+    return (
+      <ThemeScope theme={theme} className="lum-widget--replay">
+        <div style={{ height }}>
+          <div style={msgStyle}>{msg}</div>
+        </div>
+      </ThemeScope>
+    );
+  }
+
+  // We have a session. If it fails to load and we're hiding, collapse the embed;
+  // otherwise keep the player mounted so it shows its own (retry-capable) error UI.
+  if (playerError && fallback === 'hide') return null;
+
+  return (
+    <ThemeScope theme={theme} className="lum-widget--replay">
+      <div style={{ height }}>
+        <ReplayPlayer
+          sessionId={effectiveId}
+          apiBaseUrl={apiBaseUrl}
+          apiKey={apiKey}
+          token={token}
+          startAtMs={startAtMs}
+          clip={clip}
+          defaultMode={defaultMode}
+          allowedModes={allowedModes}
+          defaultSpeed={defaultSpeed}
+          allowFullscreen={allowFullscreen}
+          shareUrl={shareUrl}
+          onEnded={onEnded}
+          onError={(info) => setPlayerError(info)}
+          embedded
+        />
+      </div>
+    </ThemeScope>
+  );
+}

package/src/ObsrviqScore.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+import type { Score, ScoreType } from '@obsrviq/types';
+import { Skeleton } from '@obsrviq/ui';
+import { ThemeScope, type BaseWidgetProps } from './common.js';
+import { apiGet } from './client.js';
+
+export interface ObsrviqScoreProps extends BaseWidgetProps {
+  siteId: string;
+  type: ScoreType;
+  size?: number;
+}
+
+const LABEL: Record<ScoreType, string> = {
+  accessibility: 'Accessibility',
+  performance: 'Performance',
+  'ai-visibility': 'AI Visibility',
+};
+const RATING_COLOR: Record<Score['rating'], string> = {
+  good: 'var(--lum-ok)',
+  'needs-improvement': 'var(--lum-warn)',
+  poor: 'var(--lum-error)',
+};
+
+export function ObsrviqScore({ siteId, type, apiBaseUrl, apiKey, token, theme, size = 120 }: ObsrviqScoreProps) {
+  const cfg = { apiBaseUrl, apiKey, token };
+  const [score, setScore] = useState<Score | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    apiGet<Score>(cfg, `/v1/scores?siteId=${siteId}&type=${type}`)
+      .then((s) => alive && setScore(s))
+      .catch(() => alive && setScore(null));
+    return () => {
+      alive = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [siteId, type]);
+
+  const r = size / 2 - 8;
+  const c = 2 * Math.PI * r;
+  const value = score?.value ?? 0;
+  const color = score ? RATING_COLOR[score.rating] : 'var(--lum-muted)';
+
+  return (
+    <ThemeScope theme={theme} className="lum-widget--score">
+      <div className="lum-w-score" style={{ width: size }}>
+        {!score ? (
+          <Skeleton width={size} height={size} radius={size / 2} />
+        ) : (
+          <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} role="img" aria-label={`${LABEL[type]} score ${value}`}>
+            <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--lum-viz-grid)" strokeWidth={9} />
+            <circle
+              className="lum-w-score__arc"
+              cx={size / 2}
+              cy={size / 2}
+              r={r}
+              fill="none"
+              stroke={color}
+              strokeWidth={9}
+              strokeLinecap="round"
+              strokeDasharray={c}
+              strokeDashoffset={c - (value / 100) * c}
+              transform={`rotate(-90 ${size / 2} ${size / 2})`}
+              style={{ ['--lum-arc-c' as string]: c }}
+            />
+            <text x="50%" y="48%" textAnchor="middle" dominantBaseline="middle" fontSize={size * 0.26} fill="var(--lum-text)" fontWeight="700" fontFamily="var(--lum-font-display)" letterSpacing="-0.02em">
+              {value}
+            </text>
+            <text x="50%" y="68%" textAnchor="middle" fill="var(--lum-muted)" fontSize={size * 0.1}>
+              / 100
+            </text>
+          </svg>
+        )}
+        <div className="lum-w-score__label">{LABEL[type]}</div>
+      </div>
+    </ThemeScope>
+  );
+}