@focus-reactive/payload-plugin-seo 1.0.0 → 1.0.2

package/dist/ui/CheckRow/CheckVisualization/visualizations/DensityGauge.js

@@ -0,0 +1,72 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../../../../utils/style";
+import { statusVar } from "../../../../components/SeoDrawer/variants";
+function DensityGauge({ bands, markerPct, markerLabel, markerStatus, labels }) {
+  const barRef = useRef(null);
+  const labelRef = useRef(null);
+  const [dims, setDims] = useState({ bar: 0, label: 0 });
+  const markerPx = markerPct / 100 * dims.bar;
+  const halfLabel = dims.label / 2;
+  const labelAlign = dims.label === 0 ? "-translate-x-1/2" : markerPx < halfLabel ? "translate-x-0" : markerPx > dims.bar - halfLabel ? "-translate-x-full" : "-translate-x-1/2";
+  const firstVisibleBand = bands.findIndex((band) => band.endPct > band.startPct);
+  const lastVisibleBand = bands.reduce((acc, band, i) => band.endPct > band.startPct ? i : acc, -1);
+  useLayoutEffect(() => {
+    const bar = barRef.current;
+    const label = labelRef.current;
+    if (!(bar && label))
+      return;
+    const measure = () => setDims({ bar: bar.offsetWidth, label: label.offsetWidth });
+    const observer = new ResizeObserver(measure);
+    measure();
+    observer.observe(bar);
+    observer.observe(label);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { ref: barRef, className: "relative h-[6px] rounded-[3px] mt-[24px] mb-[14px]", children: [
+      bands.map((band, i) => /* @__PURE__ */ jsx(
+        "i",
+        {
+          className: cn("absolute inset-y-0", statusVar({ status: band.status }), i === firstVisibleBand && "rounded-l-[3px]", i === lastVisibleBand && "rounded-r-[3px]"),
+          style: {
+            left: `${band.startPct}%`,
+            width: `${band.endPct - band.startPct}%`,
+            background: "var(--seo-c)"
+          }
+        },
+        `${band.status}-${i}`
+      )),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref: labelRef,
+          className: cn("absolute bottom-[13px] font-mono font-bold text-[11px] whitespace-nowrap", statusVar({ status: markerStatus }), labelAlign),
+          style: { left: `${markerPct}%`, color: "var(--seo-c)" },
+          children: markerLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("absolute -top-[3px] -translate-x-1/2 block w-[12px] h-[12px] rounded-full bg-neutral-0 border-2", statusVar({ status: markerStatus })),
+          style: { left: `${markerPct}%`, borderColor: "var(--seo-c)" }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "relative h-[14px] text-[10px] text-neutral-500", children: labels.map((label, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("absolute whitespace-nowrap", label.pct <= 0 ? "translate-x-0" : label.pct >= 100 ? "-translate-x-full" : "-translate-x-1/2", label.emphasis === "good" && "text-seo-good"),
+        style: { left: `${label.pct}%` },
+        children: label.text
+      },
+      `${label.text}-${i}`
+    )) })
+  ] });
+}
+export {
+  DensityGauge
+};
+//# sourceMappingURL=DensityGauge.js.map

package/dist/ui/CheckRow/CheckVisualization/visualizations/DensityGauge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/ui/CheckRow/CheckVisualization/visualizations/DensityGauge.tsx"],"sourcesContent":["\"use client\";\n\nimport { useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../../../utils/style\";\nimport { statusVar } from \"../../../../components/SeoDrawer/variants\";\nimport type { GaugeModel } from \"../../../../engine/types/visualization\";\n\nexport function DensityGauge({ bands, markerPct, markerLabel, markerStatus, labels }: GaugeModel) {\n  const barRef = useRef<HTMLDivElement>(null);\n  const labelRef = useRef<HTMLSpanElement>(null);\n  const [dims, setDims] = useState({ bar: 0, label: 0 });\n\n  const markerPx = (markerPct / 100) * dims.bar;\n  const halfLabel = dims.label / 2;\n  const labelAlign = dims.label === 0 ? \"-translate-x-1/2\" : markerPx < halfLabel ? \"translate-x-0\" : markerPx > dims.bar - halfLabel ? \"-translate-x-full\" : \"-translate-x-1/2\";\n\n  const firstVisibleBand = bands.findIndex((band) => band.endPct > band.startPct);\n  const lastVisibleBand = bands.reduce((acc, band, i) => (band.endPct > band.startPct ? i : acc), -1);\n\n  useLayoutEffect(() => {\n    const bar = barRef.current;\n    const label = labelRef.current;\n\n    if (!(bar && label)) return;\n\n    const measure = () => setDims({ bar: bar.offsetWidth, label: label.offsetWidth });\n\n    const observer = new ResizeObserver(measure);\n\n    measure();\n    observer.observe(bar);\n    observer.observe(label);\n\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <>\n      <div ref={barRef} className=\"relative h-[6px] rounded-[3px] mt-[24px] mb-[14px]\">\n        {bands.map((band, i) => (\n          <i\n            key={`${band.status}-${i}`}\n            className={cn(\"absolute inset-y-0\", statusVar({ status: band.status }), i === firstVisibleBand && \"rounded-l-[3px]\", i === lastVisibleBand && \"rounded-r-[3px]\")}\n            style={{\n              left: `${band.startPct}%`,\n              width: `${band.endPct - band.startPct}%`,\n              background: \"var(--seo-c)\",\n            }}\n          />\n        ))}\n        <span\n          ref={labelRef}\n          className={cn(\"absolute bottom-[13px] font-mono font-bold text-[11px] whitespace-nowrap\", statusVar({ status: markerStatus }), labelAlign)}\n          style={{ left: `${markerPct}%`, color: \"var(--seo-c)\" }}\n        >\n          {markerLabel}\n        </span>\n        <span\n          className={cn(\"absolute -top-[3px] -translate-x-1/2 block w-[12px] h-[12px] rounded-full bg-neutral-0 border-2\", statusVar({ status: markerStatus }))}\n          style={{ left: `${markerPct}%`, borderColor: \"var(--seo-c)\" }}\n        />\n      </div>\n      <div className=\"relative h-[14px] text-[10px] text-neutral-500\">\n        {labels.map((label, i) => (\n          <span\n            key={`${label.text}-${i}`}\n            className={cn(\"absolute whitespace-nowrap\", label.pct <= 0 ? \"translate-x-0\" : label.pct >= 100 ? \"-translate-x-full\" : \"-translate-x-1/2\", label.emphasis === \"good\" && \"text-seo-good\")}\n            style={{ left: `${label.pct}%` }}\n          >\n            {label.text}\n          </span>\n        ))}\n      </div>\n    </>\n  );\n}\n"],"mappings":";AAqCI,mBAGM,KAFJ,YADF;AAnCJ,SAAS,iBAAiB,QAAQ,gBAAgB;AAClD,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAGnB,SAAS,aAAa,EAAE,OAAO,WAAW,aAAa,cAAc,OAAO,GAAe;AAChG,QAAM,SAAS,OAAuB,IAAI;AAC1C,QAAM,WAAW,OAAwB,IAAI;AAC7C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE,KAAK,GAAG,OAAO,EAAE,CAAC;AAErD,QAAM,WAAY,YAAY,MAAO,KAAK;AAC1C,QAAM,YAAY,KAAK,QAAQ;AAC/B,QAAM,aAAa,KAAK,UAAU,IAAI,qBAAqB,WAAW,YAAY,kBAAkB,WAAW,KAAK,MAAM,YAAY,sBAAsB;AAE5J,QAAM,mBAAmB,MAAM,UAAU,CAAC,SAAS,KAAK,SAAS,KAAK,QAAQ;AAC9E,QAAM,kBAAkB,MAAM,OAAO,CAAC,KAAK,MAAM,MAAO,KAAK,SAAS,KAAK,WAAW,IAAI,KAAM,EAAE;AAElG,kBAAgB,MAAM;AACpB,UAAM,MAAM,OAAO;AACnB,UAAM,QAAQ,SAAS;AAEvB,QAAI,EAAE,OAAO;AAAQ;AAErB,UAAM,UAAU,MAAM,QAAQ,EAAE,KAAK,IAAI,aAAa,OAAO,MAAM,YAAY,CAAC;AAEhF,UAAM,WAAW,IAAI,eAAe,OAAO;AAE3C,YAAQ;AACR,aAAS,QAAQ,GAAG;AACpB,aAAS,QAAQ,KAAK;AAEtB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,CAAC;AAEL,SACE,iCACE;AAAA,yBAAC,SAAI,KAAK,QAAQ,WAAU,sDACzB;AAAA,YAAM,IAAI,CAAC,MAAM,MAChB;AAAA,QAAC;AAAA;AAAA,UAEC,WAAW,GAAG,sBAAsB,UAAU,EAAE,QAAQ,KAAK,OAAO,CAAC,GAAG,MAAM,oBAAoB,mBAAmB,MAAM,mBAAmB,iBAAiB;AAAA,UAC/J,OAAO;AAAA,YACL,MAAM,GAAG,KAAK,QAAQ;AAAA,YACtB,OAAO,GAAG,KAAK,SAAS,KAAK,QAAQ;AAAA,YACrC,YAAY;AAAA,UACd;AAAA;AAAA,QANK,GAAG,KAAK,MAAM,IAAI,CAAC;AAAA,MAO1B,CACD;AAAA,MACD;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAW,GAAG,4EAA4E,UAAU,EAAE,QAAQ,aAAa,CAAC,GAAG,UAAU;AAAA,UACzI,OAAO,EAAE,MAAM,GAAG,SAAS,KAAK,OAAO,eAAe;AAAA,UAErD;AAAA;AAAA,MACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,GAAG,mGAAmG,UAAU,EAAE,QAAQ,aAAa,CAAC,CAAC;AAAA,UACpJ,OAAO,EAAE,MAAM,GAAG,SAAS,KAAK,aAAa,eAAe;AAAA;AAAA,MAC9D;AAAA,OACF;AAAA,IACA,oBAAC,SAAI,WAAU,kDACZ,iBAAO,IAAI,CAAC,OAAO,MAClB;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW,GAAG,8BAA8B,MAAM,OAAO,IAAI,kBAAkB,MAAM,OAAO,MAAM,sBAAsB,oBAAoB,MAAM,aAAa,UAAU,eAAe;AAAA,QACxL,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;AAAA,QAE9B,gBAAM;AAAA;AAAA,MAJF,GAAG,MAAM,IAAI,IAAI,CAAC;AAAA,IAKzB,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/CheckRow/CheckVisualization/visualizations/DistributionBar.d.ts

@@ -0,0 +1,3 @@
+import type { DistributionModel } from "../../../../engine/types/visualization";
+export declare function DistributionBar({ positions }: DistributionModel): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DistributionBar.d.ts.map

package/dist/ui/CheckRow/CheckVisualization/visualizations/DistributionBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DistributionBar.d.ts","sourceRoot":"","sources":["../../../../../src/ui/CheckRow/CheckVisualization/visualizations/DistributionBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAEhF,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAgB/D"}

package/dist/ui/CheckRow/CheckVisualization/visualizations/DistributionBar.js

@@ -0,0 +1,16 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DistributionBar({ positions }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "seo-docbar relative h-[24px] rounded-rs border border-neutral-200", children: positions.map((p, i) => /* @__PURE__ */ jsx("i", { className: "absolute top-[3px] bottom-[3px] w-[3px] rounded-[2px] bg-neutral-800", style: { left: `${p}%` } }, `${p}-${i}`)) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[10px] text-neutral-500 mt-[5px]", children: [
+      /* @__PURE__ */ jsx("span", { children: "start" }),
+      /* @__PURE__ */ jsx("span", { children: "middle" }),
+      /* @__PURE__ */ jsx("span", { children: "end" })
+    ] })
+  ] });
+}
+export {
+  DistributionBar
+};
+//# sourceMappingURL=DistributionBar.js.map

package/dist/ui/CheckRow/CheckVisualization/visualizations/DistributionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/ui/CheckRow/CheckVisualization/visualizations/DistributionBar.tsx"],"sourcesContent":["\"use client\";\n\nimport type { DistributionModel } from \"../../../../engine/types/visualization\";\n\nexport function DistributionBar({ positions }: DistributionModel) {\n  return (\n    <>\n      <div className=\"seo-docbar relative h-[24px] rounded-rs border border-neutral-200\">\n        {positions.map((p, i) => (\n          <i key={`${p}-${i}`} className=\"absolute top-[3px] bottom-[3px] w-[3px] rounded-[2px] bg-neutral-800\" style={{ left: `${p}%` }} />\n        ))}\n      </div>\n\n      <div className=\"flex justify-between text-[10px] text-neutral-500 mt-[5px]\">\n        <span>start</span>\n        <span>middle</span>\n        <span>end</span>\n      </div>\n    </>\n  );\n}\n"],"mappings":";AAMI,mBAGM,KAIJ,YAPF;AAFG,SAAS,gBAAgB,EAAE,UAAU,GAAsB;AAChE,SACE,iCACE;AAAA,wBAAC,SAAI,WAAU,qEACZ,oBAAU,IAAI,CAAC,GAAG,MACjB,oBAAC,OAAoB,WAAU,wEAAuE,OAAO,EAAE,MAAM,GAAG,CAAC,IAAI,KAArH,GAAG,CAAC,IAAI,CAAC,EAA+G,CACjI,GACH;AAAA,IAEA,qBAAC,SAAI,WAAU,8DACb;AAAA,0BAAC,UAAK,mBAAK;AAAA,MACX,oBAAC,UAAK,oBAAM;AAAA,MACZ,oBAAC,UAAK,iBAAG;AAAA,OACX;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/CheckRow/CheckVisualization/visualizations/DrillDown.d.ts

@@ -0,0 +1,3 @@
+import type { DrilldownModel } from "../../../../engine/types/visualization";
+export declare function DrillDown({ items, label }: DrilldownModel): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=DrillDown.d.ts.map

package/dist/ui/CheckRow/CheckVisualization/visualizations/DrillDown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrillDown.d.ts","sourceRoot":"","sources":["../../../../../src/ui/CheckRow/CheckVisualization/visualizations/DrillDown.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAE7E,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,cAAc,kDAiCzD"}

package/dist/ui/CheckRow/CheckVisualization/visualizations/DrillDown.js

@@ -0,0 +1,36 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../../../../utils/style";
+function DrillDown({ items, label }) {
+  const [open, setOpen] = useState(false);
+  if (!items.length)
+    return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "mt-[8px] text-[11px] text-neutral-700 bg-neutral-100 border border-neutral-200 rounded-rs px-[9px] py-[4px] cursor-pointer inline-flex items-center gap-[4px]",
+        onClick: () => setOpen((o) => !o),
+        children: open ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          "Hide ",
+          /* @__PURE__ */ jsx(ChevronUp, { size: 14 })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          label,
+          " ",
+          /* @__PURE__ */ jsx(ChevronDown, { size: 14 })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: cn("mt-[8px] flex-col gap-[4px]", open ? "flex" : "hidden"), children: items.map((it, i) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[11px] text-neutral-700 bg-neutral-50 rounded-rs px-[9px] py-[4px]", children: [
+      /* @__PURE__ */ jsx("span", { children: it.left }),
+      /* @__PURE__ */ jsx("span", { className: "text-neutral-1000", children: it.right })
+    ] }, `${it.left}-${i}`)) })
+  ] });
+}
+export {
+  DrillDown
+};
+//# sourceMappingURL=DrillDown.js.map

package/dist/ui/CheckRow/CheckVisualization/visualizations/DrillDown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/ui/CheckRow/CheckVisualization/visualizations/DrillDown.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChevronDown, ChevronUp } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"../../../../utils/style\";\nimport type { DrilldownModel } from \"../../../../engine/types/visualization\";\n\nexport function DrillDown({ items, label }: DrilldownModel) {\n  const [open, setOpen] = useState(false);\n\n  if (!items.length) return null;\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        className=\"mt-[8px] text-[11px] text-neutral-700 bg-neutral-100 border border-neutral-200 rounded-rs px-[9px] py-[4px] cursor-pointer inline-flex items-center gap-[4px]\"\n        onClick={() => setOpen((o) => !o)}\n      >\n        {open ? (\n          <>\n            Hide <ChevronUp size={14} />\n          </>\n        ) : (\n          <>\n            {label} <ChevronDown size={14} />\n          </>\n        )}\n      </button>\n\n      <div className={cn(\"mt-[8px] flex-col gap-[4px]\", open ? \"flex\" : \"hidden\")}>\n        {items.map((it, i) => (\n          <div className=\"flex justify-between text-[11px] text-neutral-700 bg-neutral-50 rounded-rs px-[9px] py-[4px]\" key={`${it.left}-${i}`}>\n            <span>{it.left}</span>\n            <span className=\"text-neutral-1000\">{it.right}</span>\n          </div>\n        ))}\n      </div>\n    </>\n  );\n}\n"],"mappings":";AAoBU,mBACO,KADP;AAlBV,SAAS,aAAa,iBAAiB;AACvC,SAAS,gBAAgB;AACzB,SAAS,UAAU;AAGZ,SAAS,UAAU,EAAE,OAAO,MAAM,GAAmB;AAC1D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,MAAI,CAAC,MAAM;AAAQ,WAAO;AAE1B,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,QAE/B,iBACC,iCAAE;AAAA;AAAA,UACK,oBAAC,aAAU,MAAM,IAAI;AAAA,WAC5B,IAEA,iCACG;AAAA;AAAA,UAAM;AAAA,UAAC,oBAAC,eAAY,MAAM,IAAI;AAAA,WACjC;AAAA;AAAA,IAEJ;AAAA,IAEA,oBAAC,SAAI,WAAW,GAAG,+BAA+B,OAAO,SAAS,QAAQ,GACvE,gBAAM,IAAI,CAAC,IAAI,MACd,qBAAC,SAAI,WAAU,gGACb;AAAA,0BAAC,UAAM,aAAG,MAAK;AAAA,MACf,oBAAC,UAAK,WAAU,qBAAqB,aAAG,OAAM;AAAA,SAFmE,GAAG,GAAG,IAAI,IAAI,CAAC,EAGlI,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/CheckRow/CheckVisualization/visualizations/SegmentBar.d.ts

@@ -0,0 +1,3 @@
+import type { SegmentModel } from "../../../../engine/types/visualization";
+export declare function SegmentBar({ countLabel, filledPct, filledStatus, legend }: SegmentModel): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SegmentBar.d.ts.map

package/dist/ui/CheckRow/CheckVisualization/visualizations/SegmentBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentBar.d.ts","sourceRoot":"","sources":["../../../../../src/ui/CheckRow/CheckVisualization/visualizations/SegmentBar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAc3E,wBAAgB,UAAU,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,YAAY,2CA0BvF"}

package/dist/ui/CheckRow/CheckVisualization/visualizations/SegmentBar.js

@@ -0,0 +1,32 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../../utils/style";
+import { statusVar } from "../../../../components/SeoDrawer/variants";
+const swatchVariants = cva("w-[8px] h-[8px] rounded-[2px] inline-block", {
+  variants: {
+    tone: {
+      good: "bg-seo-good",
+      warn: "bg-seo-warn",
+      bad: "bg-seo-bad",
+      muted: "bg-neutral-300"
+    }
+  }
+});
+function SegmentBar({ countLabel, filledPct, filledStatus, legend }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    countLabel && /* @__PURE__ */ jsx("div", { className: "text-[10px] text-neutral-500 font-mono mb-[4px] flex justify-end", children: /* @__PURE__ */ jsx("span", { children: countLabel }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex h-[6px] rounded-[3px] overflow-hidden", children: [
+      /* @__PURE__ */ jsx("i", { className: cn("block h-full", statusVar({ status: filledStatus })), style: { width: `${filledPct}%`, background: "var(--seo-c)" } }),
+      /* @__PURE__ */ jsx("i", { className: "block h-full bg-neutral-150", style: { width: `${100 - filledPct}%` } })
+    ] }),
+    legend && /* @__PURE__ */ jsx("div", { className: "flex gap-[14px] text-[11px] mt-[6px]", children: legend.map((l) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-[5px] text-neutral-700", children: [
+      /* @__PURE__ */ jsx("span", { className: swatchVariants({ tone: l.tone }) }),
+      l.label
+    ] }, l.label)) })
+  ] });
+}
+export {
+  SegmentBar
+};
+//# sourceMappingURL=SegmentBar.js.map

package/dist/ui/CheckRow/CheckVisualization/visualizations/SegmentBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/ui/CheckRow/CheckVisualization/visualizations/SegmentBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"../../../../utils/style\";\nimport type { SegmentModel } from \"../../../../engine/types/visualization\";\nimport { statusVar } from \"../../../../components/SeoDrawer/variants\";\n\nconst swatchVariants = cva(\"w-[8px] h-[8px] rounded-[2px] inline-block\", {\n  variants: {\n    tone: {\n      good: \"bg-seo-good\",\n      warn: \"bg-seo-warn\",\n      bad: \"bg-seo-bad\",\n      muted: \"bg-neutral-300\",\n    },\n  },\n});\n\nexport function SegmentBar({ countLabel, filledPct, filledStatus, legend }: SegmentModel) {\n  return (\n    <>\n      {countLabel && (\n        <div className=\"text-[10px] text-neutral-500 font-mono mb-[4px] flex justify-end\">\n          <span>{countLabel}</span>\n        </div>\n      )}\n\n      <div className=\"flex h-[6px] rounded-[3px] overflow-hidden\">\n        <i className={cn(\"block h-full\", statusVar({ status: filledStatus }))} style={{ width: `${filledPct}%`, background: \"var(--seo-c)\" }} />\n        <i className=\"block h-full bg-neutral-150\" style={{ width: `${100 - filledPct}%` }} />\n      </div>\n\n      {legend && (\n        <div className=\"flex gap-[14px] text-[11px] mt-[6px]\">\n          {legend.map((l) => (\n            <span key={l.label} className=\"inline-flex items-center gap-[5px] text-neutral-700\">\n              <span className={swatchVariants({ tone: l.tone })} />\n              {l.label}\n            </span>\n          ))}\n        </div>\n      )}\n    </>\n  );\n}\n"],"mappings":";AAoBI,mBAGM,KAIJ,YAPF;AAlBJ,SAAS,WAAW;AACpB,SAAS,UAAU;AAEnB,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB,IAAI,8CAA8C;AAAA,EACvE,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,MAAM;AAAA,MACN,KAAK;AAAA,MACL,OAAO;AAAA,IACT;AAAA,EACF;AACF,CAAC;AAEM,SAAS,WAAW,EAAE,YAAY,WAAW,cAAc,OAAO,GAAiB;AACxF,SACE,iCACG;AAAA,kBACC,oBAAC,SAAI,WAAU,oEACb,8BAAC,UAAM,sBAAW,GACpB;AAAA,IAGF,qBAAC,SAAI,WAAU,8CACb;AAAA,0BAAC,OAAE,WAAW,GAAG,gBAAgB,UAAU,EAAE,QAAQ,aAAa,CAAC,CAAC,GAAG,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,YAAY,eAAe,GAAG;AAAA,MACtI,oBAAC,OAAE,WAAU,+BAA8B,OAAO,EAAE,OAAO,GAAG,MAAM,SAAS,IAAI,GAAG;AAAA,OACtF;AAAA,IAEC,UACC,oBAAC,SAAI,WAAU,wCACZ,iBAAO,IAAI,CAAC,MACX,qBAAC,UAAmB,WAAU,uDAC5B;AAAA,0BAAC,UAAK,WAAW,eAAe,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;AAAA,MAClD,EAAE;AAAA,SAFM,EAAE,KAGb,CACD,GACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/ui/CheckRow/constants/labels.d.ts

@@ -0,0 +1,6 @@
+import type { CheckId } from "../../../constants/checkIds";
+export declare const LABELS: Record<CheckId, {
+    name: string;
+    tip: string;
+}>;
+//# sourceMappingURL=labels.d.ts.map

package/dist/ui/CheckRow/constants/labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"labels.d.ts","sourceRoot":"","sources":["../../../../src/ui/CheckRow/constants/labels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAE3D,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,OAAO,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAkGjE,CAAC"}

package/dist/ui/CheckRow/constants/labels.js

@@ -0,0 +1,103 @@
+const LABELS = {
+  introductionKeyword: {
+    name: "Keyphrase in introduction",
+    tip: "Whether the focus keyphrase appears in the first paragraph."
+  },
+  keyphraseLength: {
+    name: "Keyphrase length",
+    tip: "Word count of the keyphrase itself."
+  },
+  keyphraseDensity: {
+    name: "Keyphrase density",
+    tip: "Occurrences relative to total words. Ideal 0.5\u20132.5%."
+  },
+  metaDescriptionKeyword: {
+    name: "Keyphrase in meta description",
+    tip: "Whether the keyphrase appears in the meta description."
+  },
+  subheadingsKeyword: {
+    name: "Keyphrase in subheadings",
+    tip: "Whether subheadings (H2+) use the keyphrase."
+  },
+  textCompetingLinks: {
+    name: "Competing links",
+    tip: "Links that use your keyphrase as anchor text."
+  },
+  imageKeyphrase: {
+    name: "Keyphrase in image alts",
+    tip: "How many images reference the keyphrase in alt text."
+  },
+  keyphraseInSEOTitle: {
+    name: "Keyphrase in SEO title",
+    tip: "Whether the keyphrase is in the SEO title, and where."
+  },
+  slugKeyword: {
+    name: "Keyphrase in slug",
+    tip: "Whether the keyphrase appears in the URL slug."
+  },
+  functionWordsInKeyphrase: {
+    name: "Function words in keyphrase",
+    tip: "Your keyphrase is made up only of function words."
+  },
+  keyphraseDistribution: {
+    name: "Keyphrase distribution",
+    tip: "Where the keyphrase occurs across the document."
+  },
+  textLength: {
+    name: "Total word count",
+    tip: "Total words vs the recommended minimum (300)."
+  },
+  metaDescriptionLength: {
+    name: "Meta description length",
+    tip: "Ideal 120\u2013158 characters."
+  },
+  titleWidth: {
+    name: "SEO title width",
+    tip: "Pixel width; over ~580px truncates."
+  },
+  images: { name: "Images", tip: "Whether the text contains images." },
+  externalLinks: {
+    name: "Outbound links",
+    tip: "Follow / nofollow mix of outbound links."
+  },
+  internalLinks: {
+    name: "Internal links",
+    tip: "Follow / nofollow mix of internal links."
+  },
+  singleH1: {
+    name: "Exactly one H1",
+    tip: "There is one H1, correctly positioned."
+  },
+  subheadingsTooLong: {
+    name: "Subheading distribution",
+    tip: "Long sections without a subheading."
+  },
+  textParagraphTooLong: {
+    name: "Paragraph length",
+    tip: "Paragraphs over the recommended length."
+  },
+  textSentenceLength: {
+    name: "Sentence length",
+    tip: "Share of sentences over the recommended length."
+  },
+  textTransitionWords: {
+    name: "Transition words",
+    tip: "Share of sentences using transition words."
+  },
+  passiveVoice: {
+    name: "Passive voice",
+    tip: "Share of sentences in passive voice."
+  },
+  sentenceBeginnings: {
+    name: "Consecutive sentences",
+    tip: "Repetitive sentence beginnings."
+  },
+  fleschReadingEase: {
+    name: "Reading ease",
+    tip: "Flesch Reading Ease (0\u2013100); higher is easier. Aim for 60+."
+  }
+};
+export {
+  LABELS
+};
+//# sourceMappingURL=labels.js.map

package/dist/ui/CheckRow/constants/labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/CheckRow/constants/labels.ts"],"sourcesContent":["import type { CheckId } from \"../../../constants/checkIds\";\n\nexport const LABELS: Record<CheckId, { name: string; tip: string }> = {\n  introductionKeyword: {\n    name: \"Keyphrase in introduction\",\n    tip: \"Whether the focus keyphrase appears in the first paragraph.\",\n  },\n  keyphraseLength: {\n    name: \"Keyphrase length\",\n    tip: \"Word count of the keyphrase itself.\",\n  },\n  keyphraseDensity: {\n    name: \"Keyphrase density\",\n    tip: \"Occurrences relative to total words. Ideal 0.5–2.5%.\",\n  },\n  metaDescriptionKeyword: {\n    name: \"Keyphrase in meta description\",\n    tip: \"Whether the keyphrase appears in the meta description.\",\n  },\n  subheadingsKeyword: {\n    name: \"Keyphrase in subheadings\",\n    tip: \"Whether subheadings (H2+) use the keyphrase.\",\n  },\n  textCompetingLinks: {\n    name: \"Competing links\",\n    tip: \"Links that use your keyphrase as anchor text.\",\n  },\n  imageKeyphrase: {\n    name: \"Keyphrase in image alts\",\n    tip: \"How many images reference the keyphrase in alt text.\",\n  },\n  keyphraseInSEOTitle: {\n    name: \"Keyphrase in SEO title\",\n    tip: \"Whether the keyphrase is in the SEO title, and where.\",\n  },\n  slugKeyword: {\n    name: \"Keyphrase in slug\",\n    tip: \"Whether the keyphrase appears in the URL slug.\",\n  },\n  functionWordsInKeyphrase: {\n    name: \"Function words in keyphrase\",\n    tip: \"Your keyphrase is made up only of function words.\",\n  },\n  keyphraseDistribution: {\n    name: \"Keyphrase distribution\",\n    tip: \"Where the keyphrase occurs across the document.\",\n  },\n  textLength: {\n    name: \"Total word count\",\n    tip: \"Total words vs the recommended minimum (300).\",\n  },\n  metaDescriptionLength: {\n    name: \"Meta description length\",\n    tip: \"Ideal 120–158 characters.\",\n  },\n  titleWidth: {\n    name: \"SEO title width\",\n    tip: \"Pixel width; over ~580px truncates.\",\n  },\n  images: { name: \"Images\", tip: \"Whether the text contains images.\" },\n  externalLinks: {\n    name: \"Outbound links\",\n    tip: \"Follow / nofollow mix of outbound links.\",\n  },\n  internalLinks: {\n    name: \"Internal links\",\n    tip: \"Follow / nofollow mix of internal links.\",\n  },\n  singleH1: {\n    name: \"Exactly one H1\",\n    tip: \"There is one H1, correctly positioned.\",\n  },\n  subheadingsTooLong: {\n    name: \"Subheading distribution\",\n    tip: \"Long sections without a subheading.\",\n  },\n  textParagraphTooLong: {\n    name: \"Paragraph length\",\n    tip: \"Paragraphs over the recommended length.\",\n  },\n  textSentenceLength: {\n    name: \"Sentence length\",\n    tip: \"Share of sentences over the recommended length.\",\n  },\n  textTransitionWords: {\n    name: \"Transition words\",\n    tip: \"Share of sentences using transition words.\",\n  },\n  passiveVoice: {\n    name: \"Passive voice\",\n    tip: \"Share of sentences in passive voice.\",\n  },\n  sentenceBeginnings: {\n    name: \"Consecutive sentences\",\n    tip: \"Repetitive sentence beginnings.\",\n  },\n  fleschReadingEase: {\n    name: \"Reading ease\",\n    tip: \"Flesch Reading Ease (0–100); higher is easier. Aim for 60+.\",\n  },\n};\n"],"mappings":"AAEO,MAAM,SAAyD;AAAA,EACpE,qBAAqB;AAAA,IACnB,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,kBAAkB;AAAA,IAChB,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,wBAAwB;AAAA,IACtB,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,oBAAoB;AAAA,IAClB,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,oBAAoB;AAAA,IAClB,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,qBAAqB;AAAA,IACnB,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,0BAA0B;AAAA,IACxB,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,uBAAuB;AAAA,IACrB,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,uBAAuB;AAAA,IACrB,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,QAAQ,EAAE,MAAM,UAAU,KAAK,oCAAoC;AAAA,EACnE,eAAe;AAAA,IACb,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,eAAe;AAAA,IACb,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,oBAAoB;AAAA,IAClB,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,sBAAsB;AAAA,IACpB,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,oBAAoB;AAAA,IAClB,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,qBAAqB;AAAA,IACnB,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,oBAAoB;AAAA,IAClB,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,mBAAmB;AAAA,IACjB,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;","names":[]}

package/dist/ui/CheckRow/index.d.ts

@@ -0,0 +1,7 @@
+import type { CheckResult } from "../../engine/types/analysis";
+interface CheckRowProps {
+    check: CheckResult;
+}
+export declare function CheckRow({ check }: CheckRowProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/CheckRow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/CheckRow/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAG/D,UAAU,aAAa;IACrB,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,aAAa,2CA4BhD"}

package/dist/ui/CheckRow/index.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CHECK_ICONS } from "../../components/icons";
+import { CheckVisualization } from "./CheckVisualization";
+import { LABELS } from "./constants/labels";
+import { Pill } from "../Pill";
+import { STATUS_PILL_LABEL } from "../../constants";
+import { Tooltip } from "../Tooltip";
+import { cn, ROW_SEPARATOR } from "../../utils/style";
+function CheckRow({ check }) {
+  const meta = LABELS[check.id] ?? {
+    name: check.id,
+    tip: ""
+  };
+  const Icon = CHECK_ICONS[check.id] ?? CHECK_ICONS._default;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative px-[15px] py-[13px] overflow-visible", ROW_SEPARATOR), "data-status": check.status, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[9px] mb-[7px]", children: [
+      /* @__PURE__ */ jsx("span", { className: "w-[26px] h-[26px] rounded-rs bg-neutral-100 text-neutral-600 grid place-items-center flex-none [&_svg]:size-[15px]", children: /* @__PURE__ */ jsx(Icon, { size: 15 }) }),
+      /* @__PURE__ */ jsx("span", { className: "flex-1 font-semibold text-[12.5px]", children: /* @__PURE__ */ jsx(Tooltip, { content: meta.tip, className: "border-0 border-b border-dotted border-neutral-400", children: meta.name }) }),
+      /* @__PURE__ */ jsx(Pill, { variant: check.status, children: STATUS_PILL_LABEL[check.status] })
+    ] }),
+    /* @__PURE__ */ jsx(CheckVisualization, { check }),
+    check.recommendation && /* @__PURE__ */ jsx("div", { className: "text-neutral-600 text-[11.5px]", children: check.recommendation })
+  ] });
+}
+export {
+  CheckRow
+};
+//# sourceMappingURL=index.js.map

package/dist/ui/CheckRow/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/CheckRow/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { CHECK_ICONS } from \"../../components/icons\";\nimport { CheckVisualization } from \"./CheckVisualization\";\nimport { LABELS } from \"./constants/labels\";\nimport { Pill } from \"../Pill\";\nimport { STATUS_PILL_LABEL } from \"../../constants\";\nimport { Tooltip } from \"../Tooltip\";\nimport type { CheckResult } from \"../../engine/types/analysis\";\nimport { cn, ROW_SEPARATOR } from \"../../utils/style\";\n\ninterface CheckRowProps {\n  check: CheckResult;\n}\n\nexport function CheckRow({ check }: CheckRowProps) {\n  const meta = LABELS[check.id as keyof typeof LABELS] ?? {\n    name: check.id,\n    tip: \"\",\n  };\n  const Icon = CHECK_ICONS[check.id] ?? CHECK_ICONS._default;\n\n  return (\n    <div className={cn(\"relative px-[15px] py-[13px] overflow-visible\", ROW_SEPARATOR)} data-status={check.status}>\n      <div className=\"flex items-center gap-[9px] mb-[7px]\">\n        <span className=\"w-[26px] h-[26px] rounded-rs bg-neutral-100 text-neutral-600 grid place-items-center flex-none [&_svg]:size-[15px]\">\n          <Icon size={15} />\n        </span>\n\n        <span className=\"flex-1 font-semibold text-[12.5px]\">\n          <Tooltip content={meta.tip} className=\"border-0 border-b border-dotted border-neutral-400\">\n            {meta.name}\n          </Tooltip>\n        </span>\n\n        <Pill variant={check.status}>{STATUS_PILL_LABEL[check.status]}</Pill>\n      </div>\n\n      <CheckVisualization check={check} />\n\n      {check.recommendation && <div className=\"text-neutral-600 text-[11.5px]\">{check.recommendation}</div>}\n    </div>\n  );\n}\n"],"mappings":";AAwBM,SAEI,KAFJ;AAtBN,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAClC,SAAS,eAAe;AAExB,SAAS,IAAI,qBAAqB;AAM3B,SAAS,SAAS,EAAE,MAAM,GAAkB;AACjD,QAAM,OAAO,OAAO,MAAM,EAAyB,KAAK;AAAA,IACtD,MAAM,MAAM;AAAA,IACZ,KAAK;AAAA,EACP;AACA,QAAM,OAAO,YAAY,MAAM,EAAE,KAAK,YAAY;AAElD,SACE,qBAAC,SAAI,WAAW,GAAG,iDAAiD,aAAa,GAAG,eAAa,MAAM,QACrG;AAAA,yBAAC,SAAI,WAAU,wCACb;AAAA,0BAAC,UAAK,WAAU,sHACd,8BAAC,QAAK,MAAM,IAAI,GAClB;AAAA,MAEA,oBAAC,UAAK,WAAU,sCACd,8BAAC,WAAQ,SAAS,KAAK,KAAK,WAAU,sDACnC,eAAK,MACR,GACF;AAAA,MAEA,oBAAC,QAAK,SAAS,MAAM,QAAS,4BAAkB,MAAM,MAAM,GAAE;AAAA,OAChE;AAAA,IAEA,oBAAC,sBAAmB,OAAc;AAAA,IAEjC,MAAM,kBAAkB,oBAAC,SAAI,WAAU,kCAAkC,gBAAM,gBAAe;AAAA,KACjG;AAEJ;","names":[]}

package/dist/ui/FilterPills.d.ts

@@ -0,0 +1,10 @@
+import type { CheckResult, Status } from "../engine/types/analysis";
+export type Filter = "all" | Status;
+interface FilterPillsProps {
+    checks: CheckResult[];
+    value: Filter;
+    onChange: (f: Filter) => void;
+}
+export declare function FilterPills({ checks, value, onChange }: FilterPillsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FilterPills.d.ts.map

package/dist/ui/FilterPills.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPills.d.ts","sourceRoot":"","sources":["../../src/ui/FilterPills.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGpE,MAAM,MAAM,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAkCpC,UAAU,gBAAgB;IACxB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CASxE"}

package/dist/ui/FilterPills.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../utils/style";
+import { statusVar } from "../components/SeoDrawer/variants";
+const filterPillVariants = cva("inline-flex items-center gap-[5px] px-[10px] py-[4px] rounded-[20px] border text-[11px] font-medium cursor-pointer", {
+  variants: {
+    active: {
+      true: "bg-neutral-1000 text-neutral-0 border-neutral-1000",
+      false: "border-neutral-200 bg-neutral-0 text-neutral-700"
+    }
+  },
+  defaultVariants: { active: false }
+});
+function Pill({ filter, label, count, active, onSelect, dotStatus }) {
+  return /* @__PURE__ */ jsxs("button", { type: "button", className: filterPillVariants({ active }), onClick: () => onSelect(filter), children: [
+    dotStatus && /* @__PURE__ */ jsx("span", { className: cn("w-[6px] h-[6px] rounded-full inline-block", statusVar({ status: dotStatus })), style: { background: "var(--seo-c)" } }),
+    label,
+    " ",
+    /* @__PURE__ */ jsx("span", { className: "font-mono font-bold", children: count })
+  ] });
+}
+function countByStatus(checks, status) {
+  return checks.filter((c) => c.status === status).length;
+}
+function FilterPills({ checks, value, onChange }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-[6px] flex-wrap px-[15px] py-[11px]", children: [
+    /* @__PURE__ */ jsx(Pill, { filter: "all", label: "All", count: checks.length, active: value === "all", onSelect: onChange }),
+    /* @__PURE__ */ jsx(Pill, { filter: "bad", label: "Problems", count: countByStatus(checks, "bad"), active: value === "bad", onSelect: onChange, dotStatus: "bad" }),
+    /* @__PURE__ */ jsx(Pill, { filter: "warn", label: "Needs work", count: countByStatus(checks, "warn"), active: value === "warn", onSelect: onChange, dotStatus: "warn" }),
+    /* @__PURE__ */ jsx(Pill, { filter: "good", label: "Good", count: countByStatus(checks, "good"), active: value === "good", onSelect: onChange, dotStatus: "good" })
+  ] });
+}
+export {
+  FilterPills
+};
+//# sourceMappingURL=FilterPills.js.map

package/dist/ui/FilterPills.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/FilterPills.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"../utils/style\";\nimport type { CheckResult, Status } from \"../engine/types/analysis\";\nimport { statusVar } from \"../components/SeoDrawer/variants\";\n\nexport type Filter = \"all\" | Status;\n\nconst filterPillVariants = cva(\"inline-flex items-center gap-[5px] px-[10px] py-[4px] rounded-[20px] border text-[11px] font-medium cursor-pointer\", {\n  variants: {\n    active: {\n      true: \"bg-neutral-1000 text-neutral-0 border-neutral-1000\",\n      false: \"border-neutral-200 bg-neutral-0 text-neutral-700\",\n    },\n  },\n  defaultVariants: { active: false },\n});\n\ninterface PillProps {\n  filter: Filter;\n  label: string;\n  count: number;\n  active: boolean;\n  onSelect: (f: Filter) => void;\n  dotStatus?: Status;\n}\n\nfunction Pill({ filter, label, count, active, onSelect, dotStatus }: PillProps) {\n  return (\n    <button type=\"button\" className={filterPillVariants({ active })} onClick={() => onSelect(filter)}>\n      {dotStatus && <span className={cn(\"w-[6px] h-[6px] rounded-full inline-block\", statusVar({ status: dotStatus }))} style={{ background: \"var(--seo-c)\" }} />}\n      {label} <span className=\"font-mono font-bold\">{count}</span>\n    </button>\n  );\n}\n\nfunction countByStatus(checks: CheckResult[], status: Status) {\n  return checks.filter((c) => c.status === status).length;\n}\n\ninterface FilterPillsProps {\n  checks: CheckResult[];\n  value: Filter;\n  onChange: (f: Filter) => void;\n}\n\nexport function FilterPills({ checks, value, onChange }: FilterPillsProps) {\n  return (\n    <div className=\"flex gap-[6px] flex-wrap px-[15px] py-[11px]\">\n      <Pill filter=\"all\" label=\"All\" count={checks.length} active={value === \"all\"} onSelect={onChange} />\n      <Pill filter=\"bad\" label=\"Problems\" count={countByStatus(checks, \"bad\")} active={value === \"bad\"} onSelect={onChange} dotStatus=\"bad\" />\n      <Pill filter=\"warn\" label=\"Needs work\" count={countByStatus(checks, \"warn\")} active={value === \"warn\"} onSelect={onChange} dotStatus=\"warn\" />\n      <Pill filter=\"good\" label=\"Good\" count={countByStatus(checks, \"good\")} active={value === \"good\"} onSelect={onChange} dotStatus=\"good\" />\n    </div>\n  );\n}\n"],"mappings":";AA8BI,SACgB,KADhB;AA5BJ,SAAS,WAAW;AACpB,SAAS,UAAU;AAEnB,SAAS,iBAAiB;AAI1B,MAAM,qBAAqB,IAAI,sHAAsH;AAAA,EACnJ,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,QAAQ,MAAM;AACnC,CAAC;AAWD,SAAS,KAAK,EAAE,QAAQ,OAAO,OAAO,QAAQ,UAAU,UAAU,GAAc;AAC9E,SACE,qBAAC,YAAO,MAAK,UAAS,WAAW,mBAAmB,EAAE,OAAO,CAAC,GAAG,SAAS,MAAM,SAAS,MAAM,GAC5F;AAAA,iBAAa,oBAAC,UAAK,WAAW,GAAG,6CAA6C,UAAU,EAAE,QAAQ,UAAU,CAAC,CAAC,GAAG,OAAO,EAAE,YAAY,eAAe,GAAG;AAAA,IACxJ;AAAA,IAAM;AAAA,IAAC,oBAAC,UAAK,WAAU,uBAAuB,iBAAM;AAAA,KACvD;AAEJ;AAEA,SAAS,cAAc,QAAuB,QAAgB;AAC5D,SAAO,OAAO,OAAO,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE;AACnD;AAQO,SAAS,YAAY,EAAE,QAAQ,OAAO,SAAS,GAAqB;AACzE,SACE,qBAAC,SAAI,WAAU,gDACb;AAAA,wBAAC,QAAK,QAAO,OAAM,OAAM,OAAM,OAAO,OAAO,QAAQ,QAAQ,UAAU,OAAO,UAAU,UAAU;AAAA,IAClG,oBAAC,QAAK,QAAO,OAAM,OAAM,YAAW,OAAO,cAAc,QAAQ,KAAK,GAAG,QAAQ,UAAU,OAAO,UAAU,UAAU,WAAU,OAAM;AAAA,IACtI,oBAAC,QAAK,QAAO,QAAO,OAAM,cAAa,OAAO,cAAc,QAAQ,MAAM,GAAG,QAAQ,UAAU,QAAQ,UAAU,UAAU,WAAU,QAAO;AAAA,IAC5I,oBAAC,QAAK,QAAO,QAAO,OAAM,QAAO,OAAO,cAAc,QAAQ,MAAM,GAAG,QAAQ,UAAU,QAAQ,UAAU,UAAU,WAAU,QAAO;AAAA,KACxI;AAEJ;","names":[]}

package/dist/ui/KpiCard.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+interface KpiCardProps {
+    label: string;
+    value: ReactNode;
+    suffix?: string;
+}
+export declare function KpiCard({ label, value, suffix }: KpiCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=KpiCard.d.ts.map

package/dist/ui/KpiCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiCard.d.ts","sourceRoot":"","sources":["../../src/ui/KpiCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,YAAY,2CAa7D"}

package/dist/ui/KpiCard.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SectionWrapper } from "./SectionWrapper";
+function KpiCard({ label, value, suffix }) {
+  return /* @__PURE__ */ jsxs(SectionWrapper, { className: "px-[13px] py-[12px]", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[6px]", children: /* @__PURE__ */ jsx("span", { className: "text-[9.5px] uppercase tracking-[0.05em] text-neutral-500 font-semibold", children: label }) }),
+    /* @__PURE__ */ jsxs("div", { className: "text-[23px] font-bold mt-[5px] leading-none", children: [
+      value,
+      suffix && /* @__PURE__ */ jsxs("small", { className: "text-[11px] font-medium text-neutral-500", children: [
+        " ",
+        suffix
+      ] })
+    ] })
+  ] });
+}
+export {
+  KpiCard
+};
+//# sourceMappingURL=KpiCard.js.map

package/dist/ui/KpiCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/KpiCard.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { SectionWrapper } from \"./SectionWrapper\";\n\ninterface KpiCardProps {\n  label: string;\n  value: ReactNode;\n  suffix?: string;\n}\n\nexport function KpiCard({ label, value, suffix }: KpiCardProps) {\n  return (\n    <SectionWrapper className=\"px-[13px] py-[12px]\">\n      <div className=\"flex items-center gap-[6px]\">\n        <span className=\"text-[9.5px] uppercase tracking-[0.05em] text-neutral-500 font-semibold\">{label}</span>\n      </div>\n\n      <div className=\"text-[23px] font-bold mt-[5px] leading-none\">\n        {value}\n        {suffix && <small className=\"text-[11px] font-medium text-neutral-500\"> {suffix}</small>}\n      </div>\n    </SectionWrapper>\n  );\n}\n"],"mappings":";AAeQ,cAKW,YALX;AAZR,SAAS,sBAAsB;AAQxB,SAAS,QAAQ,EAAE,OAAO,OAAO,OAAO,GAAiB;AAC9D,SACE,qBAAC,kBAAe,WAAU,uBACxB;AAAA,wBAAC,SAAI,WAAU,+BACb,8BAAC,UAAK,WAAU,2EAA2E,iBAAM,GACnG;AAAA,IAEA,qBAAC,SAAI,WAAU,+CACZ;AAAA;AAAA,MACA,UAAU,qBAAC,WAAM,WAAU,4CAA2C;AAAA;AAAA,QAAE;AAAA,SAAO;AAAA,OAClF;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/Pill.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import type { Status } from "../engine/types/analysis";
+interface PillProps {
+    variant: Status | "neutral";
+    children: ReactNode;
+}
+export declare function Pill({ variant, children }: PillProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Pill.d.ts.map

package/dist/ui/Pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../src/ui/Pill.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAcvD,UAAU,SAAS;IACjB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,IAAI,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,SAAS,2CAEpD"}

package/dist/ui/Pill.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+const pillVariants = cva("inline-flex items-center gap-[4px] px-[14px] py-[1px] rounded-[20px] text-[11px] font-semibold", {
+  variants: {
+    variant: {
+      good: "bg-seo-good-100 text-seo-good",
+      warn: "bg-seo-warn-100 text-seo-warn",
+      bad: "bg-seo-bad-100 text-seo-bad",
+      neutral: "bg-neutral-100 text-neutral-500"
+    }
+  }
+});
+function Pill({ variant, children }) {
+  return /* @__PURE__ */ jsx("span", { className: pillVariants({ variant }), children });
+}
+export {
+  Pill
+};
+//# sourceMappingURL=Pill.js.map

package/dist/ui/Pill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/Pill.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport type { Status } from \"../engine/types/analysis\";\nimport { cva } from \"class-variance-authority\";\n\nconst pillVariants = cva(\"inline-flex items-center gap-[4px] px-[14px] py-[1px] rounded-[20px] text-[11px] font-semibold\", {\n  variants: {\n    variant: {\n      good: \"bg-seo-good-100 text-seo-good\",\n      warn: \"bg-seo-warn-100 text-seo-warn\",\n      bad: \"bg-seo-bad-100 text-seo-bad\",\n      neutral: \"bg-neutral-100 text-neutral-500\",\n    },\n  },\n});\n\ninterface PillProps {\n  variant: Status | \"neutral\";\n  children: ReactNode;\n}\n\nexport function Pill({ variant, children }: PillProps) {\n  return <span className={pillVariants({ variant })}>{children}</span>;\n}\n"],"mappings":";AAuBS;AAnBT,SAAS,WAAW;AAEpB,MAAM,eAAe,IAAI,kGAAkG;AAAA,EACzH,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;AAOM,SAAS,KAAK,EAAE,SAAS,SAAS,GAAc;AACrD,SAAO,oBAAC,UAAK,WAAW,aAAa,EAAE,QAAQ,CAAC,GAAI,UAAS;AAC/D;","names":[]}

package/dist/ui/ScoreRing.d.ts

@@ -0,0 +1,8 @@
+import type { Status } from "../engine/types/analysis";
+interface ScoreRingProps {
+    score: number;
+    status: Status;
+}
+export declare function ScoreRing({ score, status }: ScoreRingProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ScoreRing.d.ts.map

package/dist/ui/ScoreRing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScoreRing.d.ts","sourceRoot":"","sources":["../../src/ui/ScoreRing.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAIvD,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,cAAc,2CAa1D"}

package/dist/ui/ScoreRing.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../utils/style";
+import { statusVar } from "../components/SeoDrawer/variants";
+function ScoreRing({ score, status }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("w-[60px] h-[60px] rounded-full flex-none grid place-items-center", statusVar({ status })),
+      style: {
+        background: `conic-gradient(var(--seo-c) ${score}%, var(--theme-elevation-150) 0)`
+      },
+      children: /* @__PURE__ */ jsx("div", { className: "w-[48px] h-[48px] rounded-full bg-neutral-0 grid place-items-center font-bold text-[18px]", style: { color: "var(--seo-c)" }, children: score })
+    }
+  );
+}
+export {
+  ScoreRing
+};
+//# sourceMappingURL=ScoreRing.js.map

package/dist/ui/ScoreRing.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/ScoreRing.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Status } from \"../engine/types/analysis\";\nimport { cn } from \"../utils/style\";\nimport { statusVar } from \"../components/SeoDrawer/variants\";\n\ninterface ScoreRingProps {\n  score: number;\n  status: Status;\n}\n\nexport function ScoreRing({ score, status }: ScoreRingProps) {\n  return (\n    <div\n      className={cn(\"w-[60px] h-[60px] rounded-full flex-none grid place-items-center\", statusVar({ status }))}\n      style={{\n        background: `conic-gradient(var(--seo-c) ${score}%, var(--theme-elevation-150) 0)`,\n      }}\n    >\n      <div className=\"w-[48px] h-[48px] rounded-full bg-neutral-0 grid place-items-center font-bold text-[18px]\" style={{ color: \"var(--seo-c)\" }}>\n        {score}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAmBM;AAhBN,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAOnB,SAAS,UAAU,EAAE,OAAO,OAAO,GAAmB;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,oEAAoE,UAAU,EAAE,OAAO,CAAC,CAAC;AAAA,MACvG,OAAO;AAAA,QACL,YAAY,+BAA+B,KAAK;AAAA,MAClD;AAAA,MAEA,8BAAC,SAAI,WAAU,6FAA4F,OAAO,EAAE,OAAO,eAAe,GACvI,iBACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/ui/SectionCard.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+interface SectionCardProps {
+    title: string;
+    widget?: ReactNode;
+    children: ReactNode;
+}
+export declare function SectionCard({ title, widget, children }: SectionCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SectionCard.d.ts.map

package/dist/ui/SectionCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionCard.d.ts","sourceRoot":"","sources":["../../src/ui/SectionCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAUxE"}