@cogentic-co/ds 0.5.5 → 0.6.1

package/dist/index.js

@@ -2,12 +2,7 @@
 export { HeroSection, heroVariants } from './chunk-XQYFQ6PU.js';
 import { Input, Label } from './chunk-LW6GAWZM.js';
 export { AuthForm, Input, Label } from './chunk-LW6GAWZM.js';
-export { AreaChart, BarChart, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, LineChart, PieChart, RadialChart } from './chunk-U4EPKN7G.js';
-export { AnimationSopMapping } from './chunk-65Z2VEKG.js';
-export { AnimationTeamRouting } from './chunk-BZSA47MS.js';
-export { AnimationTeamsNotification } from './chunk-IKATDPHG.js';
-export { AnimationVaspIdentification } from './chunk-EFLWU2JP.js';
-export { AnimationWebhooks } from './chunk-KUOF3XRZ.js';
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from './chunk-GJAWCIGE.js';
 export { FadeIn, PricingTable, Switch } from './chunk-VWSX75RB.js';
 import { Button, buttonVariants } from './chunk-BNFSXNP2.js';
 export { Button, buttonVariants } from './chunk-BNFSXNP2.js';
@@ -15,25 +10,9 @@ export { StatCard } from './chunk-7HRPF2N2.js';
 import { Card, CardContent, CardFooter } from './chunk-CG5JA7FM.js';
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-CG5JA7FM.js';
 export { FeatureSection } from './chunk-4NEQV6H2.js';
-export { AnimationPricingPreview } from './chunk-H7VUIMEL.js';
-export { AnimationRealtimeUpdates } from './chunk-FKPK3CB7.js';
-export { AnimationRestApi } from './chunk-I26ZXVSY.js';
-export { AnimationRiskScoring } from './chunk-HTYR73ON.js';
-export { AnimationSandbox } from './chunk-N7PBUY7G.js';
-export { AnimationScheduledReports } from './chunk-4YD3YS4B.js';
-export { AnimationSecureMessaging } from './chunk-NAPDFVBI.js';
-export { AnimationSlackNotification } from './chunk-F7REPQOA.js';
-export { AnimationAIAnalysis as AnimationAiAnalysis } from './chunk-BTFYV3TI.js';
-export { AnimationAuditTrail } from './chunk-SNOJLZP4.js';
-export { AnimationComplianceReports } from './chunk-5OOO6TRA.js';
-export { AnimationCustomRules } from './chunk-RZZTDJHG.js';
-export { AnimationJiraTicket } from './chunk-BTZB4JRC.js';
 export { EASE_OUT, FADE_UP, SLIDE_UP_VARIANT, STAGGER_CHILDREN, TRANSITION_DEFAULT, TRANSITION_FAST, VIEWPORT_ONCE } from './chunk-TAPJEVUA.js';
-export { AnimationJurisdictionDetection } from './chunk-5JLZ42JT.js';
 export { useCycleIndex } from './chunk-6RWCZUAD.js';
-import { useAnimationTimer } from './chunk-RXV2XUDZ.js';
 export { useAnimationTimer } from './chunk-RXV2XUDZ.js';
-export { AnimationMultiProtocol } from './chunk-RTK7R4KZ.js';
 import { cn, __objRest, __spreadValues, __spreadProps, timeAgo } from './chunk-GZNLQE3I.js';
 export { cn, timeAgo } from './chunk-GZNLQE3I.js';
 import { Calendar, ArrowUpRight, Linkedin, ChevronDownIcon, ChevronUpIcon, XIcon, ArrowUpIcon, CheckIcon, ChevronRightIcon, MoreHorizontalIcon, ChevronLeftIcon, LightbulbIcon, AlertCircleIcon, TriangleAlertIcon, InfoIcon, AlertTriangle, ArrowLeftRight, ClipboardIcon, SearchIcon, ArrowDown, ArrowUp, ChevronsUpDown, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, Settings2, PlusCircle, CalendarIcon, UploadIcon, PlusCircleIcon, X, PencilIcon, MinusIcon, Loader2Icon, PlusIcon, Search, PanelLeftIcon, OctagonXIcon, CircleCheckIcon, TrendingUpIcon, TrendingDownIcon, User, LogOut } from 'lucide-react';
@@ -78,7 +57,6 @@ import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import { Slider as Slider$1 } from '@base-ui/react/slider';
 import { Toaster as Toaster$1 } from 'sonner';
-import { LazyMotion, domAnimation, AnimatePresence, m } from 'motion/react';
 import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
 import { Toggle as Toggle$1 } from '@base-ui/react/toggle';
 import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
@@ -191,7 +169,7 @@ function AspectRatio(_a) {
     }, props)
   );
 }
-function TeamCard({ name, role, imageUrl, linkedinUrl, className }) {
+function TeamCard({ name, role, imageUrl, linkedinUrl, className, children }) {
   const initials = name.split(" ").map((n) => n[0]).join("");
   return /* @__PURE__ */ jsxs(
     Card,
@@ -224,7 +202,8 @@ function TeamCard({ name, role, imageUrl, linkedinUrl, className }) {
             /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-xs", children: role })
           ] }),
           linkedinUrl && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(Linkedin, { className: "size-4 text-muted-foreground" }) })
-        ] })
+        ] }),
+        children
       ]
     }
   );
@@ -754,6 +733,7 @@ function ApprovalDialog({
 }
 function ApprovalButton({
   action,
+  showDialog = false,
   requireReason = false,
   onAction,
   disabled
@@ -766,7 +746,7 @@ function ApprovalButton({
       config.label
     ] });
   }
-  if (!requireReason) {
+  if (!showDialog) {
     return /* @__PURE__ */ jsxs(Button, { className: config.triggerClassName, disabled, onClick: () => onAction(), children: [
       /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
       config.label
@@ -786,15 +766,18 @@ function ApprovalActions({
   onApprove,
   onReject,
   onEscalate,
+  confirm: confirmProp,
   requireReason = false,
   disabled,
   className
 }) {
+  const showDialog = confirmProp != null ? confirmProp : requireReason;
   return /* @__PURE__ */ jsxs("div", { "data-slot": "approval-actions", className: cn("flex items-center gap-2", className), children: [
     /* @__PURE__ */ jsx(
       ApprovalButton,
       {
         action: "approve",
+        showDialog,
         requireReason,
         onAction: onApprove,
         disabled
@@ -804,6 +787,7 @@ function ApprovalActions({
       ApprovalButton,
       {
         action: "reject",
+        showDialog,
         requireReason,
         onAction: onReject,
         disabled
@@ -813,6 +797,7 @@ function ApprovalActions({
       ApprovalButton,
       {
         action: "escalate",
+        showDialog,
         requireReason,
         onAction: onEscalate,
         disabled
@@ -926,6 +911,7 @@ function AsciiShader(_a) {
     "canvas",
     __spreadValues({
       ref: canvasRef,
+      "aria-hidden": "true",
       "data-slot": "ascii-shader",
       className: cn("absolute inset-0 h-full w-full", className)
     }, props)
@@ -938,38 +924,22 @@ function AuditLog(_a) {
     __spreadValues({
       "data-slot": "audit-log",
       role: "log",
+      "aria-live": "polite",
       className: cn("space-y-0 divide-y divide-border", className)
     }, props)
   );
 }
-var auditLogEntryVariants = cva(
-  "flex items-start gap-3 px-4 py-3 text-sm transition-colors hover:bg-muted/50",
-  {
-    variants: {
-      action: {
-        create: "",
-        update: "",
-        delete: "",
-        approve: "",
-        reject: "",
-        login: "",
-        export: "",
-        default: ""
-      }
-    },
-    defaultVariants: {
-      action: "default"
-    }
-  }
-);
 function AuditLogEntry(_a) {
-  var _b = _a, { action, className } = _b, props = __objRest(_b, ["action", "className"]);
+  var _b = _a, { action = "default", className } = _b, props = __objRest(_b, ["action", "className"]);
   return /* @__PURE__ */ jsx(
     "div",
     __spreadValues({
       "data-slot": "audit-log-entry",
-      "data-action": action != null ? action : "default",
-      className: cn(auditLogEntryVariants({ action }), className)
+      "data-action": action,
+      className: cn(
+        "flex items-start gap-3 px-4 py-3 text-sm transition-colors hover:bg-muted/50",
+        className
+      )
     }, props)
   );
 }
@@ -1123,7 +1093,7 @@ var badgeVariants = cva(
         outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
         ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
         link: "text-primary underline-offset-4 hover:underline",
-        tagline: "h-auto rounded-full border-border text-foreground [a]:hover:bg-accent [a]:hover:text-accent-foreground font-semibold text-base px-3 mx-auto flex mb-2"
+        tagline: "h-auto rounded-full border-border bg-background text-foreground [a]:hover:bg-accent [a]:hover:text-accent-foreground font-semibold text-base px-3 mx-auto flex mb-2"
       }
     },
     defaultVariants: {
@@ -1178,32 +1148,16 @@ var BAYER = [
 ];
 var BAYER_SCALE = 4;
 var DOWNSAMPLE = 4;
-function parseCssColor(value) {
-  const match = value.match(/[\d.]+/g);
-  if (match && match.length >= 3) {
-    return [
-      Math.round(Number(match[0])),
-      Math.round(Number(match[1])),
-      Math.round(Number(match[2]))
-    ];
-  }
-  return null;
-}
-function resolveColors() {
-  const probe = document.createElement("div");
-  probe.style.display = "none";
-  probe.style.color = "var(--foreground)";
-  probe.style.backgroundColor = "var(--background)";
-  document.body.appendChild(probe);
-  const probeStyle = getComputedStyle(probe);
-  const fgRgb = parseCssColor(probeStyle.color);
-  const bgRgb = parseCssColor(probeStyle.backgroundColor);
-  document.body.removeChild(probe);
-  const fg = fgRgb != null ? fgRgb : [220, 223, 227];
-  const bg = bgRgb != null ? bgRgb : [250, 250, 250];
-  return { fg, bg };
-}
-function BgShader({ className }) {
+var DEFAULT_COLORS = {
+  light: { fg: [220, 223, 227], bg: [250, 250, 250] },
+  dark: { fg: [26, 35, 52], bg: [58, 74, 92] }
+};
+function isDark2() {
+  return document.documentElement.classList.contains("dark");
+}
+function BgShader({ className, colors = DEFAULT_COLORS }) {
+  const colorsRef = useRef(colors);
+  colorsRef.current = colors;
   const canvasRef = useRef(null);
   const rafRef = useRef(0);
   const visibleRef = useRef(false);
@@ -1212,12 +1166,20 @@ function BgShader({ className }) {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const reducedMotion = mq.matches;
+    let reducedMotion = mq.matches;
+    const onMotionChange = (e) => {
+      reducedMotion = e.matches;
+    };
+    mq.addEventListener("change", onMotionChange);
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
-    let { fg, bg } = resolveColors();
+    const resolve = () => {
+      const c = colorsRef.current;
+      return isDark2() ? c.dark : c.light;
+    };
+    let { fg, bg } = resolve();
     const updateColors = () => {
-      const resolved = resolveColors();
+      const resolved = resolve();
       fg = resolved.fg;
       bg = resolved.bg;
     };
@@ -1239,6 +1201,9 @@ function BgShader({ className }) {
     );
     ioObs.observe(canvas);
     const startTime = performance.now();
+    let cachedImageData = null;
+    let cachedW = 0;
+    let cachedH = 0;
     const render = (now) => {
       if (!visibleRef.current || reducedMotion) return;
       frameCount.current++;
@@ -1258,8 +1223,12 @@ function BgShader({ className }) {
         canvas.width = cw;
         canvas.height = ch;
       }
-      const imageData = ctx.createImageData(cw, ch);
-      const data = imageData.data;
+      if (!cachedImageData || cachedW !== cw || cachedH !== ch) {
+        cachedImageData = ctx.createImageData(cw, ch);
+        cachedW = cw;
+        cachedH = ch;
+      }
+      const data = cachedImageData.data;
       const time = (now - startTime) / 1e3 * 0.5;
       const t3 = time / 3;
       const aspect = w / h;
@@ -1281,23 +1250,18 @@ function BgShader({ className }) {
           const by = Math.floor(oy / BAYER_SCALE) & 3;
           const threshold = BAYER[bx + by * 4];
           const idx = (py * cw + px) * 4;
-          if (gray > threshold) {
-            data[idx] = fg[0];
-            data[idx + 1] = fg[1];
-            data[idx + 2] = fg[2];
-          } else {
-            data[idx] = bg[0];
-            data[idx + 1] = bg[1];
-            data[idx + 2] = bg[2];
-          }
+          const c = gray > threshold ? fg : bg;
+          data[idx] = c[0];
+          data[idx + 1] = c[1];
+          data[idx + 2] = c[2];
           data[idx + 3] = 255;
         }
       }
-      ctx.putImageData(imageData, 0, 0);
+      ctx.putImageData(cachedImageData, 0, 0);
       rafRef.current = requestAnimationFrame(render);
     };
     if (reducedMotion) {
-      requestAnimationFrame(() => {
+      rafRef.current = requestAnimationFrame(() => {
         visibleRef.current = true;
         frameCount.current = 1;
         const w = canvas.clientWidth;
@@ -1340,21 +1304,30 @@ function BgShader({ className }) {
       ioObs.disconnect();
       mutObs.disconnect();
       darkMq.removeEventListener("change", updateColors);
+      mq.removeEventListener("change", onMotionChange);
     };
   }, []);
-  return /* @__PURE__ */ jsx("section", { className: cn("absolute inset-0 opacity-50", className), "data-slot": "bg-shader", children: /* @__PURE__ */ jsx(
-    "canvas",
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      ref: canvasRef,
-      className: "block h-full w-full",
-      style: { imageRendering: "pixelated" }
+      "aria-hidden": "true",
+      className: cn("absolute inset-0 opacity-50", className),
+      "data-slot": "bg-shader",
+      children: /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          className: "block h-full w-full",
+          style: { imageRendering: "pixelated" }
+        }
+      )
     }
-  ) });
+  );
 }
 var CHARS2 = " .:-=+*#%@";
 var CELL2 = 14;
 var FONT_SIZE2 = 12;
-function isDark2() {
+function isDark3() {
   return document.documentElement.classList.contains("dark");
 }
 function BlockyShader(_a) {
@@ -1373,9 +1346,9 @@ function BlockyShader(_a) {
     if (!ctx) return;
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
     if (mq.matches) return;
-    let fg = isDark2() ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.07)";
+    let fg = isDark3() ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.07)";
     const updateColors = () => {
-      fg = isDark2() ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.07)";
+      fg = isDark3() ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.07)";
     };
     const darkMq = window.matchMedia("(prefers-color-scheme: dark)");
     darkMq.addEventListener("change", updateColors);
@@ -1453,6 +1426,7 @@ function BlockyShader(_a) {
     "canvas",
     __spreadValues({
       ref: canvasRef,
+      "aria-hidden": "true",
       "data-slot": "blocky-shader",
       className: cn("absolute inset-0 h-full w-full", className)
     }, props)
@@ -3164,6 +3138,7 @@ function ComplianceScore(_a) {
       setAnimatedScore(clampedScore);
       return;
     }
+    let rafId;
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (!entry.isIntersecting || hasAnimated.current) return;
@@ -3174,14 +3149,17 @@ function ComplianceScore(_a) {
           const progress = Math.min((now - start) / duration, 1);
           const eased = 1 - (1 - progress) ** 3;
           setAnimatedScore(Math.round(clampedScore * eased));
-          if (progress < 1) requestAnimationFrame(tick);
+          if (progress < 1) rafId = requestAnimationFrame(tick);
         }
-        requestAnimationFrame(tick);
+        rafId = requestAnimationFrame(tick);
       },
       { threshold: 0.5 }
     );
     observer.observe(el);
-    return () => observer.disconnect();
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(rafId);
+    };
   }, [clampedScore]);
   const dashOffset = circumference - animatedScore / 100 * circumference;
   const scoreColor = color != null ? color : getScoreColor(clampedScore);
@@ -3191,6 +3169,11 @@ function ComplianceScore(_a) {
     __spreadProps(__spreadValues({
       ref,
       "data-slot": "compliance-score",
+      role: "meter",
+      "aria-valuenow": score,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": label ? `${label}: ${score}%` : `Compliance score: ${score}%`,
       className: cn(complianceScoreVariants({ size }), className)
     }, props), {
       children: [
@@ -4743,12 +4726,19 @@ function DeadlineCountdown(_a) {
     "showDot",
     "className"
   ]);
+  const [, setTick] = React4.useState(0);
+  React4.useEffect(() => {
+    const id = setInterval(() => setTick((t) => t + 1), 6e4);
+    return () => clearInterval(id);
+  }, []);
   const urgency = urgencyOverride != null ? urgencyOverride : getAutoUrgency(deadline, warningDays, criticalDays);
   const timeText = formatTimeRemaining(deadline);
   return /* @__PURE__ */ jsxs(
     "span",
     __spreadProps(__spreadValues({
       "data-slot": "deadline-countdown",
+      "aria-live": "polite",
+      "aria-atomic": "true",
       className: cn(deadlineCountdownVariants({ urgency }), className)
     }, props), {
       children: [
@@ -5455,7 +5445,7 @@ function FilterChip(_a) {
       )
     }, props), {
       children: [
-        /* @__PURE__ */ jsx(PlusCircleIcon, { className: "size-3.5 text-muted-foreground" }),
+        !value && /* @__PURE__ */ jsx(PlusCircleIcon, { className: "size-3.5 text-muted-foreground" }),
         /* @__PURE__ */ jsx("span", { className: "font-medium", children: label }),
         value && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("span", { className: "mx-0.5 h-4 w-px bg-border" }),
@@ -5958,10 +5948,27 @@ function KbdGroup(_a) {
     }, props)
   );
 }
+function LinesSpinner(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, props), {
+      children: /* @__PURE__ */ jsx("path", { d: "M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48 2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48 2.83-2.83" })
+    })
+  );
+}
 function Spinner(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, { variant = "circle", className } = _b, props = __objRest(_b, ["variant", "className"]);
+  const Icon = variant === "lines" ? LinesSpinner : Loader2Icon;
   return /* @__PURE__ */ jsx(
-    Loader2Icon,
+    Icon,
     __spreadValues({
       role: "status",
       "aria-label": "Loading",
@@ -6743,7 +6750,7 @@ function Progress(_a) {
       const id = requestAnimationFrame(() => setMountedValue(value));
       return () => cancelAnimationFrame(id);
     }
-    setMountedValue(value);
+    setMountedValue((prev) => prev === value ? prev : value);
   }, [animate, value]);
   return /* @__PURE__ */ jsxs(
     Progress$1.Root,
@@ -6977,6 +6984,11 @@ function RiskGauge(_a) {
     __spreadProps(__spreadValues({
       ref,
       "data-slot": "risk-gauge",
+      role: "meter",
+      "aria-valuenow": score,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": label != null ? label : `Risk score: ${score}/100`,
       className: cn("flex flex-col gap-1.5", className)
     }, props), {
       children: [
@@ -8333,6 +8345,7 @@ function StepProgress(_a) {
     __spreadValues({
       "data-slot": "step-progress",
       "data-orientation": orientation != null ? orientation : "vertical",
+      role: "list",
       className: cn(stepProgressVariants({ orientation }), className)
     }, props)
   );
@@ -8344,6 +8357,8 @@ function StepProgressItem(_a) {
     __spreadValues({
       "data-slot": "step-progress-item",
       "data-status": status,
+      role: "listitem",
+      "aria-current": status === "current" ? "step" : void 0,
       className: cn(
         "relative flex",
         // Vertical: row layout, bottom padding
@@ -8437,60 +8452,6 @@ function StepProgressDescription(_a) {
     }, props)
   );
 }
-var EASE_OUT2 = [0.22, 0.61, 0.36, 1];
-function StreamingCards({
-  children,
-  maxVisible = 3,
-  interval = 2800,
-  fadeOlder = true,
-  className
-}) {
-  const [timerRef, tick] = useAnimationTimer(interval);
-  const count = Math.min(tick + 1, maxVisible);
-  const startIdx = Math.max(0, tick + 1 - count);
-  const visibleIndices = Array.from({ length: count }, (_, i) => (startIdx + i) % children.length);
-  const scrollRef = useRef(null);
-  useEffect(() => {
-    if (scrollRef.current) {
-      scrollRef.current.scrollTo({
-        top: scrollRef.current.scrollHeight,
-        behavior: "smooth"
-      });
-    }
-  }, []);
-  return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: timerRef,
-      "data-slot": "streaming-cards",
-      className: cn("flex flex-col overflow-hidden", className),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: scrollRef,
-          className: "scrollbar-none flex flex-1 flex-col gap-2.5 overflow-y-auto",
-          children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: visibleIndices.map((childIdx, i) => {
-            const isLatest = i === visibleIndices.length - 1;
-            return /* @__PURE__ */ jsx(
-              m.div,
-              {
-                initial: { opacity: 0, y: 16 },
-                animate: {
-                  opacity: fadeOlder ? isLatest ? 1 : 0.5 : 1,
-                  y: 0
-                },
-                exit: { opacity: 0, y: -8 },
-                transition: { duration: 0.4, ease: EASE_OUT2 },
-                children: children[childIdx]
-              },
-              `${i}-${childIdx}`
-            );
-          }) })
-        }
-      )
-    }
-  ) });
-}
 var waffleChartVariants = cva("w-full text-foreground", {
   variants: {
     mode: {
@@ -8572,9 +8533,13 @@ function WaffleChart(_a) {
     }
     return cells;
   }, [segments, totalCells, mode]);
-  const barBlockData = React4.useMemo(() => {
+  const { barBlocks: barBlockData, barDividerCount } = React4.useMemo(() => {
     var _a2;
-    if (mode !== "bar") return [];
+    if (mode !== "bar")
+      return {
+        barBlocks: [],
+        barDividerCount: 0
+      };
     const blocks = [];
     for (const seg of segments) {
       const count = Math.round(seg.value / 100 * stripes);
@@ -8597,7 +8562,7 @@ function WaffleChart(_a) {
     if (blocks.length > 0) {
       blocks[blocks.length - 1].dividerAfter = false;
     }
-    return blocks;
+    return { barBlocks: blocks, barDividerCount: blocks.filter((b) => b.dividerAfter).length };
   }, [segments, stripes, dividers, mode]);
   React4.useEffect(() => {
     const container = containerRef.current;
@@ -8660,7 +8625,7 @@ function WaffleChart(_a) {
       const rowGap = gap;
       const colGap = gap;
       const dividerGap = 10;
-      const dividerCount = barBlockData.filter((b) => b.dividerAfter).length;
+      const dividerCount = barDividerCount;
       const targetSize = 4;
       const barRows = Math.max(1, Math.floor((h + rowGap) / (targetSize + rowGap)));
       const blockH = (h - (barRows - 1) * rowGap) / barRows;
@@ -8719,13 +8684,17 @@ function WaffleChart(_a) {
     const w = rect.width;
     const h = rect.height;
     if (w === 0 || h === 0) return;
-    canvas.width = w * dpr;
-    canvas.height = h * dpr;
-    canvas.style.width = `${w}px`;
-    canvas.style.height = `${h}px`;
+    const newW = Math.round(w * dpr);
+    const newH = Math.round(h * dpr);
+    if (canvas.width !== newW || canvas.height !== newH) {
+      canvas.width = newW;
+      canvas.height = newH;
+      canvas.style.width = `${w}px`;
+      canvas.style.height = `${h}px`;
+    }
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
-    ctx.scale(dpr, dpr);
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.clearRect(0, 0, w, h);
     if (mode === "grid") {
       drawGrid(ctx, w, h);
@@ -8769,11 +8738,14 @@ function WaffleChart(_a) {
       clearTimeout(timeout);
     };
   }, [draw]);
+  const ariaLabel = segments.filter((s) => s.label).map((s) => `${s.label} ${s.value}%`).join(", ") || "Chart";
   return /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues({
       ref: containerRef,
       "data-slot": "waffle-chart",
+      role: "img",
+      "aria-label": ariaLabel,
       className: cn(waffleChartVariants({ mode, size }), className)
     }, props), {
       children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "block size-full" })
@@ -8862,9 +8834,9 @@ function SubtleShader(_a) {
         return;
       }
       const t = (now - startTime) * 8e-5;
-      const isDark3 = document.documentElement.classList.contains("dark");
-      const baseAlpha = isDark3 ? 0.06 : 0.04;
-      const colors = isDark3 ? PALETTES[palette].dark : PALETTES[palette].light;
+      const isDark4 = document.documentElement.classList.contains("dark");
+      const baseAlpha = isDark4 ? 0.06 : 0.04;
+      const colors = isDark4 ? PALETTES[palette].dark : PALETTES[palette].light;
       ctx.clearRect(0, 0, w, h);
       const blobs = [
         {
@@ -8905,6 +8877,7 @@ function SubtleShader(_a) {
     "canvas",
     __spreadValues({
       ref: canvasRef,
+      "aria-hidden": "true",
       "data-slot": "subtle-shader",
       className: cn("absolute inset-0 h-full w-full", className),
       style: { imageRendering: "auto", filter: "blur(40px)" }
@@ -9664,6 +9637,6 @@ function AppShell({
   ] });
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnimatedCounter, AppShell, ApprovalActions, ApprovalButton, ApprovalDialog, ArticleCard, AsciiShader, AspectRatio, AuditLog, AuditLogContent, AuditLogDetail, AuditLogEntry, AuditLogIcon, AuditLogMessage, AuditLogMeta, AuditLogTime, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BgShader, Blockquote, BlockyShader, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar2 as Calendar, CalendarDayButton, Callout, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CaseCard, Checkbox, CodeBlock, Col, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Comment, CommentActions, CommentAuthor, CommentAvatar, CommentBody, CommentContent, CommentHeader, CommentThread, CommentTime, ComplianceScore, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableToolbar, DataTableViewOptions, DatePicker, DateRangePicker, DeadlineCountdown, DescriptionList, DescriptionListDetail, DescriptionListItem, DescriptionListTerm, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EntityHeader, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileUpload, FilterBar, FilterChip, FilterClear, Grid, H1, H2, H3, H4, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, InlineEdit, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Large, Lead, List, LoadingOverlay, LogoVasp, Marquee, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Muted, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, NumberInput, P, PageCta, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PolicyBanner, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Prose, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RiskGauge, ScrollArea, ScrollBar, SearchInput, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Small, Spinner, SplitPane, SplitPaneDivider, SplitPanePanel, Stat, StatLabel, StatTrend, StatValue, StatusIndicator, StepProgress, StepProgressConnector, StepProgressContent, StepProgressDescription, StepProgressIndicator, StepProgressItem, StepProgressTitle, StreamingCards, StripedBar, SubtleShader, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TeamCard, Textarea, ThemeScript, Timeline, TimelineContent, TimelineDot, TimelineItem, TimelineTime, TimelineTitle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, VisuallyHidden, WaffleChart, auditLogEntryVariants, badgeVariants, buttonGroupVariants, calloutVariants, complianceScoreVariants, deadlineCountdownVariants, headerVariants as entityHeaderVariants, logoVaspVariants, navigationMenuTriggerStyle, policyBannerVariants, TIER_COLORS as riskGaugeTierColors, statusIndicatorVariants, stepProgressVariants, tabsListVariants, tagVariants, toggleVariants, trendVariants, useCarousel, useCarouselState, useClipboard, useComboboxAnchor, useDataTable, useDebounce, useDisclosure, useIntersectionObserver, useIsMobile, useLocalStorage, useMediaQuery, useSidebar, waffleChartVariants };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnimatedCounter, AppShell, ApprovalActions, ApprovalButton, ApprovalDialog, ArticleCard, AsciiShader, AspectRatio, AuditLog, AuditLogContent, AuditLogDetail, AuditLogEntry, AuditLogIcon, AuditLogMessage, AuditLogMeta, AuditLogTime, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BgShader, Blockquote, BlockyShader, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar2 as Calendar, CalendarDayButton, Callout, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CaseCard, Checkbox, CodeBlock, Col, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Comment, CommentActions, CommentAuthor, CommentAvatar, CommentBody, CommentContent, CommentHeader, CommentThread, CommentTime, ComplianceScore, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableToolbar, DataTableViewOptions, DatePicker, DateRangePicker, DeadlineCountdown, DescriptionList, DescriptionListDetail, DescriptionListItem, DescriptionListTerm, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EntityHeader, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileUpload, FilterBar, FilterChip, FilterClear, Grid, H1, H2, H3, H4, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, InlineEdit, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Large, Lead, List, LoadingOverlay, LogoVasp, Marquee, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Muted, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, NumberInput, P, PageCta, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PolicyBanner, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Prose, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RiskGauge, ScrollArea, ScrollBar, SearchInput, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Small, Spinner, SplitPane, SplitPaneDivider, SplitPanePanel, Stat, StatLabel, StatTrend, StatValue, StatusIndicator, StepProgress, StepProgressConnector, StepProgressContent, StepProgressDescription, StepProgressIndicator, StepProgressItem, StepProgressTitle, StripedBar, SubtleShader, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TeamCard, Textarea, ThemeScript, Timeline, TimelineContent, TimelineDot, TimelineItem, TimelineTime, TimelineTitle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, VisuallyHidden, WaffleChart, badgeVariants, buttonGroupVariants, calloutVariants, complianceScoreVariants, deadlineCountdownVariants, headerVariants as entityHeaderVariants, logoVaspVariants, navigationMenuTriggerStyle, policyBannerVariants, TIER_COLORS as riskGaugeTierColors, statusIndicatorVariants, stepProgressVariants, tabsListVariants, tagVariants, toggleVariants, trendVariants, useCarousel, useCarouselState, useClipboard, useComboboxAnchor, useDataTable, useDebounce, useDisclosure, useIntersectionObserver, useIsMobile, useLocalStorage, useMediaQuery, useSidebar, waffleChartVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map