@sensiblestats/widget-react 0.26.2 → 0.27.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sensiblestats/widget-react
 
+## 0.27.0
+
+### Minor Changes
+
+- Entity-card stat-strip redesign: the player/team card renders as a horizontal stat strip instead of vertical stat rows, a W-D-L stat renders as a bar with the record as its label, competition scope tabs move above the strip, and the season chip is pinned to the top-right of the header.
+
 ## 0.26.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -853,8 +853,15 @@ function initials(name) {
 function shortSeason(season) {
   return season.replace(/\d{4}/g, (year) => year.slice(2));
 }
-function Crest({ image }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-crest", style: { backgroundImage: `url(${image})` }, "aria-hidden": "true" });
+function Crest({ image, label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "span",
+    {
+      className: "ss-w-ecard-crest",
+      style: { backgroundImage: `url(${image})` },
+      ...label ? { role: "img", title: label, "aria-label": label } : { "aria-hidden": "true" }
+    }
+  );
 }
 function FormBar({ w, d, l }) {
   if (w + d + l === 0) return null;
@@ -864,73 +871,73 @@ function FormBar({ w, d, l }) {
     l > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-form-l", style: { flexGrow: l } }) : null
   ] });
 }
-function StatRows({ stats }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ss-w-ecard-stats", children: stats.map((s) => {
-    const m = RECORD_RE.exec(s.value);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-rlabel", children: s.label }),
-      m ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormBar, { w: Number(m[1]), d: Number(m[2]), l: Number(m[3]) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", {}),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-rval", children: s.value })
-    ] }, s.label);
-  }) });
-}
-function CardBody({ c }) {
-  const [active, setActive] = (0, import_react3.useState)(0);
-  if (c.scopes.length === 0) return null;
-  const season = c.season ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-season", children: shortSeason(c.season) }) : null;
-  if (c.scopes.length === 1) {
-    const only = c.scopes[0];
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-body", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-tabs ss-w-ecard-tabs-static", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-ecard-lead", title: only.label, children: [
-          only.image ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Crest, { image: only.image }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-lead-txt", children: only.label })
-        ] }),
-        season
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatRows, { stats: only.stats })
+function StatCellView({ s }) {
+  const m = RECORD_RE.exec(s.value);
+  if (m) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-cell", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-cval", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormBar, { w: Number(m[1]), d: Number(m[2]), l: Number(m[3]) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-clabel", children: s.value })
     ] });
   }
-  const current = c.scopes[active] ?? c.scopes[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-body", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-tabs", role: "tablist", children: [
-      c.scopes.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        "button",
-        {
-          type: "button",
-          role: "tab",
-          className: "ss-w-ecard-tab",
-          "aria-selected": i === active,
-          "aria-label": s.label,
-          title: s.label,
-          onClick: () => setActive(i),
-          children: s.image ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Crest, { image: s.image }) : s.label
-        },
-        String(s.competitionId ?? "all")
-      )),
-      season
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-cell", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-cval", children: s.value }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-clabel", children: s.label })
+  ] });
+}
+function StatStrip({ stats }) {
+  if (stats.length === 0) return null;
+  const cols = Math.min(stats.length, 4);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ss-w-ecard-strip", style: { gridTemplateColumns: `repeat(${cols}, 1fr)` }, children: stats.map((s) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatCellView, { s }, s.label + s.value)) });
+}
+function CardHeader({ c, showScopeCrest }) {
+  const onlyScope = c.scopes.length === 1 ? c.scopes[0] : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-hd", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
+      {
+        className: c.kind === "team" ? "ss-w-thumb ss-w-team" : "ss-w-thumb",
+        style: c.image ? { backgroundImage: `url(${c.image})` } : void 0,
+        children: c.image ? "" : initials(c.name)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-ecard-idtext", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-nm", children: c.name }),
+      c.sub ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-sub", children: c.sub }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatRows, { stats: current.stats }, String(current.competitionId ?? "all"))
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-ecard-meta", children: [
+      showScopeCrest && onlyScope?.image ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Crest, { image: onlyScope.image, label: onlyScope.label }) : null,
+      c.season ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-season", children: shortSeason(c.season) }) : null
+    ] })
   ] });
 }
+function ScopeTabs({ scopes, active, onSelect }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ss-w-ecard-scopes", role: "tablist", children: scopes.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      className: "ss-w-ecard-scope",
+      "aria-selected": i === active,
+      "aria-label": s.label,
+      title: s.label,
+      onClick: () => onSelect(i),
+      children: s.image ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Crest, { image: s.image }) : s.label
+    },
+    String(s.competitionId ?? "all")
+  )) });
+}
 function EntityCardItem({ c }) {
+  const [active, setActive] = (0, import_react3.useState)(0);
   const hasBody = c.scopes.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: hasBody ? "ss-w-ecard" : "ss-w-ecard ss-w-ecard-bare", "data-kind": c.kind, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-id", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        "span",
-        {
-          className: c.kind === "team" ? "ss-w-thumb ss-w-team" : "ss-w-thumb",
-          style: c.image ? { backgroundImage: `url(${c.image})` } : void 0,
-          children: c.image ? "" : initials(c.name)
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-ecard-idtext", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-nm", children: c.name }),
-        c.sub ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-sub", children: c.sub }) : null
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardBody, { c })
+  if (!hasBody) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ss-w-ecard ss-w-ecard-bare", "data-kind": c.kind, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardHeader, { c, showScopeCrest: false }) });
+  }
+  const multi = c.scopes.length > 1;
+  const scope = c.scopes[multi ? c.scopes[active] ? active : 0 : 0];
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard", "data-kind": c.kind, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardHeader, { c, showScopeCrest: !multi }),
+    multi ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ScopeTabs, { scopes: c.scopes, active, onSelect: setActive }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatStrip, { stats: scope.stats })
   ] });
 }
 function EntityCardList({ cards, disabled, showLessLabel = "Show less", showMoreLabel = (n) => `Show ${n} more` }) {
@@ -1085,7 +1092,7 @@ function Crest2({ url, name, kind }) {
 
 // src/components/BettingInsightList.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function StatRows2({ stats }) {
+function StatRows({ stats }) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ss-w-bi-rows", children: stats.map((s) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ss-w-bi-row", children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ss-w-bi-row-lbl", children: s.label }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ss-w-bi-row-num", children: s.value })
@@ -1096,7 +1103,7 @@ function ScopedStats({ scopes }) {
   const current = scopes[active] ?? scopes[0] ?? { key: "", label: "", stats: [] };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ss-w-bi-scoped", children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ss-w-bi-scopes", role: "group", children: scopes.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: "ss-w-bi-chip", "aria-pressed": i === active, onClick: () => setActive(i), children: s.label }, s.key)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StatRows2, { stats: current.stats }, current.key)
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StatRows, { stats: current.stats }, current.key)
   ] });
 }
 function hasStatsContent(it) {
@@ -1113,7 +1120,7 @@ function ReasonStrip({ it, ui }) {
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ss-w-bi-chart", "aria-hidden": "true" }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ss-w-bi-reason-body", children: [
       hasText ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: `ss-w-bi-text${open ? "" : " ss-w-bi-text-clamp"}`, children: it.text }) : null,
-      open && hasStats ? hasScopes ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScopedStats, { scopes: it.scopes }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StatRows2, { stats: it.stats }) : null
+      open && hasStats ? hasScopes ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScopedStats, { scopes: it.scopes }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StatRows, { stats: it.stats }) : null
     ] }),
     expandable ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "button",
@@ -2088,10 +2095,9 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* entity cards */
 .ss-w-cards { display: flex; flex-direction: column; gap: 8px; }
 
-/* Identity Hero: crest-led identity block | tabbed stats panel */
-.ss-w-ecard { display: grid; grid-template-columns: 112px 1fr; align-items: stretch; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; text-align: left; }
+/* Entity card: identity header row over a horizontal stat strip */
+.ss-w-ecard { display: flex; flex-direction: column; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; text-align: left; }
 
-.ss-w-ecard-id { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 13px 10px; border-right: 1px solid var(--ss-w-line); background: linear-gradient(158deg, var(--ss-w-bubble), color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-bubble))); }
 .ss-w-ecard-idtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }
 .ss-w-thumb { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; color: #fff; background-color: var(--ss-w-nav); background-size: cover; background-position: center; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
 .ss-w-thumb.ss-w-team { border-radius: 12px; }
@@ -2101,27 +2107,31 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 
 /* bare card (no stat scopes): simple avatar + name row */
 .ss-w-ecard-bare { display: flex; align-items: center; }
-.ss-w-ecard-bare .ss-w-ecard-id { flex-direction: row; text-align: left; gap: 11px; background: none; border-right: none; padding: 10px 12px; }
-.ss-w-ecard-bare .ss-w-thumb { width: 40px; height: 40px; font-size: 13px; box-shadow: none; }
-.ss-w-ecard-bare .ss-w-thumb.ss-w-team { border-radius: 10px; }
-
-.ss-w-ecard-body { min-width: 0; padding: 9px 12px 12px; display: flex; flex-direction: column; }
-
-/* tab strip seated on the stats panel's top edge; active tab underlined in accent */
-.ss-w-ecard-tabs { display: flex; align-items: stretch; gap: 3px; border-bottom: 1px solid var(--ss-w-line); margin-bottom: 9px; flex-wrap: wrap; }
-.ss-w-ecard-tab { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 620; color: var(--ss-w-faint); background: none; border: none; cursor: pointer; padding: 5px 8px 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
-.ss-w-ecard-tab[aria-selected="true"] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }
-.ss-w-ecard-tabs-static { align-items: center; flex-wrap: nowrap; }
-.ss-w-ecard-lead { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 640; color: var(--ss-w-ink); padding: 4px 2px 8px; min-width: 0; flex: 1; }
-.ss-w-ecard-lead-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-ecard-bare .ss-w-ecard-hd { padding: 10px 12px; }
+
+.ss-w-ecard-hd { display: flex; align-items: center; gap: 11px; padding: 11px 13px; }
+.ss-w-ecard-hd .ss-w-thumb { width: 40px; height: 40px; font-size: 13px; box-shadow: none; }
+.ss-w-ecard-hd .ss-w-thumb.ss-w-team { border-radius: 10px; }
+.ss-w-ecard-meta { display: inline-flex; align-items: center; gap: 7px; flex: none; align-self: flex-start; margin-left: auto; }
+.ss-w-ecard-meta .ss-w-ecard-season { margin: 0; }
+
+/* scope tabs: reuse the underline pattern, relocated above the strip */
+.ss-w-ecard-scopes { display: flex; align-items: stretch; gap: 2px; padding: 0 11px; border-top: 1px solid var(--ss-w-line); flex-wrap: wrap; }
+.ss-w-ecard-scope { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 620; color: var(--ss-w-faint); background: none; border: none; cursor: pointer; padding: 7px 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
+.ss-w-ecard-scope[aria-selected="true"] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }
+.ss-w-ecard-scope .ss-w-ecard-crest { width: 14px; height: 14px; }
+.ss-w-ecard-scopes + .ss-w-ecard-strip { border-top: none; }
+
 .ss-w-ecard-crest { width: 15px; height: 15px; flex: none; display: block; border-radius: 4px; background-size: cover; background-position: center; }
 .ss-w-ecard-season { flex: none; margin-left: auto; align-self: center; margin-bottom: 5px; font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
-.ss-w-ecard-tabs-static .ss-w-ecard-season { margin-bottom: 4px; }
 
-.ss-w-ecard-stats { display: flex; flex-direction: column; gap: 4px; }
-.ss-w-ecard-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
-.ss-w-ecard-rlabel { font-size: 9.5px; text-transform: uppercase; letter-spacing: .045em; color: var(--ss-w-faint); font-weight: 600; }
-.ss-w-ecard-rval { justify-self: end; font-size: 15px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
+/* stat strip: 1px gap over a line-colored ground paints hairlines between cells, wrap-safe */
+.ss-w-ecard-strip { display: grid; gap: 1px; background: var(--ss-w-line); border-top: 1px solid var(--ss-w-line); }
+.ss-w-ecard-cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 10px 4px 11px; background: var(--ss-w-panel); }
+.ss-w-ecard-cval { height: 20px; display: flex; align-items: center; font-size: 17px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
+.ss-w-ecard-cval .ss-w-form { width: 42px; }
+.ss-w-ecard-clabel { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--ss-w-faint); font-weight: 600; font-variant-numeric: tabular-nums; }
+
 .ss-w-form { justify-self: end; display: flex; height: 6px; width: 48px; border-radius: 4px; overflow: hidden; gap: 2px; }
 .ss-w-form span { display: block; border-radius: 2px; }
 .ss-w-form-w { background: var(--ss-w-pos); }