@aiready/components 0.1.21 → 0.1.24

package/dist/index.js

@@ -1,9 +1,10 @@
 import * as React2 from 'react';
-import React2__default, { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
+import React2__default, { createContext, forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle, useMemo, useContext } from 'react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { getRating as getRating$1 } from '@aiready/core/client';
 import * as d33 from 'd3';
 
 // src/components/button.tsx
@@ -433,6 +434,366 @@ var Select = React2.forwardRef(
   }
 );
 Select.displayName = "Select";
+function dedentCode(code) {
+  let normalized = code.replace(/\t/g, "  ").replace(/[ \t]+$/gm, "");
+  const lines = normalized.split("\n");
+  if (lines.length <= 1) return normalized.trim();
+  let start = 0;
+  while (start < lines.length && lines[start].trim() === "") start++;
+  let end = lines.length - 1;
+  while (end >= 0 && lines[end].trim() === "") end--;
+  if (start > end) return "";
+  const relevantLines = lines.slice(start, end + 1);
+  const nonEmpty = relevantLines.filter((l) => l.trim() !== "");
+  const minIndent = nonEmpty.reduce((min, line) => {
+    const m = line.match(/^\s*/)?.[0].length ?? 0;
+    return Math.min(min, m);
+  }, Infinity);
+  const dedented = minIndent === Infinity || minIndent === 0 ? relevantLines.join("\n") : relevantLines.map((l) => l.startsWith(" ".repeat(minIndent)) ? l.slice(minIndent) : l).join("\n");
+  return dedented;
+}
+function CopyButton({ code }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = code;
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  }, [code]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: handleCopy,
+      className: "rounded-md p-1.5 text-slate-400 hover:text-slate-200 hover:bg-slate-700/50 transition-colors",
+      title: copied ? "Copied!" : "Copy code",
+      children: copied ? /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 12.75l6 6 9-13.5" }) }) : /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" }) })
+    }
+  );
+}
+function CodeBlock({
+  children,
+  language = "typescript",
+  showCopy = true,
+  showHeader = true,
+  className = ""
+}) {
+  const codeString = useMemo(() => {
+    if (typeof children === "string") {
+      return dedentCode(children);
+    }
+    try {
+      const raw = React2__default.Children.toArray(children).map((c) => typeof c === "string" ? c : typeof c === "number" ? String(c) : "").join("");
+      return dedentCode(raw);
+    } catch {
+      return "";
+    }
+  }, [children]);
+  return /* @__PURE__ */ jsxs("div", { className: `group relative my-4 overflow-hidden rounded-xl border border-slate-700 bg-slate-900 shadow-lg ${className}`, children: [
+    showHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-slate-700 bg-slate-800/50 px-4 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-red-500/50" }),
+          /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-amber-500/50" }),
+          /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-emerald-500/50" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs font-semibold uppercase tracking-wider text-slate-500 font-mono", children: language })
+      ] }),
+      showCopy && /* @__PURE__ */ jsx(CopyButton, { code: codeString })
+    ] }),
+    /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto p-4 text-sm leading-relaxed", children: /* @__PURE__ */ jsx("code", { className: "font-mono block whitespace-pre text-slate-300", children: codeString }) })
+  ] });
+}
+function InlineCode({ children, className = "" }) {
+  return /* @__PURE__ */ jsx("code", { className: `rounded-md bg-slate-100 px-1.5 py-0.5 text-sm font-mono text-slate-800 ${className}`, children });
+}
+var DefaultSeparator = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "h-4 w-4 text-slate-400",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    stroke: "currentColor",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" })
+  }
+);
+function Breadcrumb({ items, separator, className }) {
+  const Separator2 = separator || /* @__PURE__ */ jsx(DefaultSeparator, {});
+  return /* @__PURE__ */ jsx("nav", { className: cn("flex items-center gap-1 text-sm", className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-1", children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
+      index > 0 && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: Separator2 }),
+      item.href && !isLast ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: item.href,
+          className: "text-slate-600 hover:text-slate-900 transition-colors",
+          children: item.label
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: isLast ? "font-medium text-slate-900" : "text-slate-600", children: item.label })
+    ] }, index);
+  }) }) });
+}
+var ratingConfig = {
+  excellent: { color: "bg-green-500", bgColor: "bg-green-100", label: "Excellent" },
+  good: { color: "bg-emerald-500", bgColor: "bg-emerald-100", label: "Good" },
+  fair: { color: "bg-amber-500", bgColor: "bg-amber-100", label: "Fair" },
+  "needs-work": { color: "bg-orange-500", bgColor: "bg-orange-100", label: "Needs Work" },
+  critical: { color: "bg-red-500", bgColor: "bg-red-100", label: "Critical" }
+};
+function getRating(score) {
+  const coreRating = getRating$1(score);
+  const ratingMap = {
+    "Excellent": "excellent",
+    "Good": "good",
+    "Fair": "fair",
+    "Needs Work": "needs-work",
+    "Critical": "critical"
+  };
+  return ratingMap[coreRating] || "critical";
+}
+var sizeConfig = {
+  sm: { height: "h-1.5", text: "text-xs", score: "text-sm" },
+  md: { height: "h-2", text: "text-sm", score: "text-base" },
+  lg: { height: "h-3", text: "text-base", score: "text-lg" }
+};
+function ScoreBar({
+  score,
+  maxScore = 100,
+  label,
+  showScore = true,
+  size = "md",
+  className
+}) {
+  const percentage = Math.min(100, Math.max(0, score / maxScore * 100));
+  const rating = getRating(percentage);
+  const config = ratingConfig[rating];
+  const sizes = sizeConfig[size];
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: cn("text-slate-700", sizes.text), children: label }),
+      showScore && /* @__PURE__ */ jsxs("span", { className: cn("font-bold text-slate-900", sizes.score), children: [
+        score,
+        "/",
+        maxScore
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn("w-full rounded-full bg-slate-200", sizes.height), children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("rounded-full transition-all duration-500", config.color, sizes.height),
+        style: { width: `${percentage}%` }
+      }
+    ) })
+  ] });
+}
+function ScoreCard({ score, title, breakdown, className }) {
+  const rating = getRating(score);
+  const config = ratingConfig[rating];
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border-2 border-slate-200 bg-white p-6 shadow-lg", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-4xl font-black text-slate-900", children: [
+        score,
+        "/100"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: cn("text-lg font-bold", `text-${rating === "excellent" ? "green" : rating === "good" ? "emerald" : rating === "fair" ? "amber" : rating === "needs-work" ? "orange" : "red"}-600`), children: [
+        config.label,
+        " Rating"
+      ] }),
+      title && /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-600 mt-1", children: title })
+    ] }),
+    breakdown && breakdown.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-3", children: breakdown.map((item, index) => /* @__PURE__ */ jsx(
+      ScoreBar,
+      {
+        score: item.score,
+        label: item.label,
+        size: "sm"
+      },
+      index
+    )) }),
+    breakdown && breakdown.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4 text-xs text-slate-600 bg-slate-50 p-3 rounded-lg", children: [
+      /* @__PURE__ */ jsx("strong", { children: "Formula:" }),
+      " ",
+      breakdown.map(
+        (item) => `${item.score}\xD7${item.weight || 1}`
+      ).join(" + "),
+      " / 100 = ",
+      score
+    ] })
+  ] });
+}
+var sizeClasses = {
+  sm: "h-4 w-4",
+  md: "h-8 w-8",
+  lg: "h-12 w-12"
+};
+function LoadingSpinner({ size = "md", className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: `flex items-center justify-center ${className}`, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${sizeClasses[size]} animate-spin rounded-full border-2 border-slate-300 border-t-blue-600`
+    }
+  ) });
+}
+function LoadingOverlay({ message = "Loading..." }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center min-h-[200px] gap-4", children: [
+    /* @__PURE__ */ jsx(LoadingSpinner, { size: "lg" }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500 animate-pulse", children: message })
+  ] });
+}
+function ErrorDisplay({
+  title = "Something went wrong",
+  message,
+  retry,
+  retryLabel = "Try again"
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center min-h-[200px] gap-4 p-8", children: [
+    /* @__PURE__ */ jsx("div", { className: "rounded-full bg-red-100 p-3", children: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "h-6 w-6 text-red-600",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        strokeWidth: "1.5",
+        stroke: "currentColor",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-slate-900", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-slate-500", children: message })
+    ] }),
+    retry && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: retry,
+        className: "mt-2 inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+            }
+          ) }),
+          retryLabel
+        ]
+      }
+    )
+  ] });
+}
+function EmptyState({ title, description, icon, action }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center min-h-[200px] gap-4 p-8", children: [
+    icon && /* @__PURE__ */ jsx("div", { className: "rounded-full bg-slate-100 p-3", children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-slate-900", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-slate-500", children: description })
+    ] }),
+    action && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: action.onClick,
+        className: "mt-2 inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors",
+        children: action.label
+      }
+    )
+  ] });
+}
+var ThemeContext = createContext(void 0);
+var STORAGE_KEY = "aiready-theme";
+function getSystemTheme() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function getStoredTheme() {
+  if (typeof window === "undefined") return "system";
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "dark" || stored === "light" || stored === "system") {
+      return stored;
+    }
+  } catch {
+  }
+  return "system";
+}
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = STORAGE_KEY
+}) {
+  const [theme, setThemeState] = useState(defaultTheme);
+  const [effectiveTheme, setEffectiveTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    const storedTheme = getStoredTheme();
+    setThemeState(storedTheme);
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!mounted) return;
+    const updateEffectiveTheme = () => {
+      if (theme === "system") {
+        setEffectiveTheme(getSystemTheme());
+      } else {
+        setEffectiveTheme(theme);
+      }
+    };
+    updateEffectiveTheme();
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      if (theme === "system") {
+        setEffectiveTheme(getSystemTheme());
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [theme, mounted]);
+  useEffect(() => {
+    if (!mounted) return;
+    const root = document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(effectiveTheme);
+  }, [effectiveTheme, mounted]);
+  const setTheme = (newTheme) => {
+    setThemeState(newTheme);
+    try {
+      localStorage.setItem(storageKey, newTheme);
+    } catch {
+    }
+  };
+  if (!mounted) {
+    return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme: defaultTheme, setTheme: () => {
+    }, effectiveTheme: "light" }, children });
+  }
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, setTheme, effectiveTheme }, children });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
 
 // src/utils/colors.ts
 var severityColors = {
@@ -579,6 +940,40 @@ function formatRange(min, max) {
 function formatDecimal(value, decimals = 2) {
   return value.toFixed(decimals);
 }
+
+// src/utils/score.ts
+function scoreColor(score) {
+  if (score == null) return "text-slate-400";
+  if (score >= 75) return "text-emerald-400";
+  if (score >= 50) return "text-amber-400";
+  return "text-red-400";
+}
+function scoreBg(score) {
+  if (score == null) return "bg-slate-800/50 border-slate-700";
+  if (score >= 75) return "bg-emerald-900/30 border-emerald-500/30";
+  if (score >= 50) return "bg-amber-900/30 border-amber-500/30";
+  return "bg-red-900/30 border-red-500/30";
+}
+function scoreLabel(score) {
+  if (score == null) return "Not analyzed";
+  if (score >= 75) return "AI-Ready";
+  if (score >= 50) return "Needs Improvement";
+  return "Critical Issues";
+}
+function scoreGlow(score) {
+  if (score == null) return "";
+  if (score >= 75) return "shadow-emerald-500/20";
+  if (score >= 50) return "shadow-amber-500/20";
+  return "shadow-red-500/20";
+}
+function getScoreRating(score) {
+  if (score == null) return "critical";
+  if (score >= 90) return "excellent";
+  if (score >= 75) return "good";
+  if (score >= 60) return "fair";
+  if (score >= 40) return "needs-work";
+  return "critical";
+}
 function useDebounce(value, delay = 300) {
   const [debouncedValue, setDebouncedValue] = useState(value);
   useEffect(() => {
@@ -1058,8 +1453,8 @@ var ForceDirectedGraph = forwardRef(
     }, [enableDrag]);
     const nodes = React2__default.useMemo(() => {
       if (!initialNodes || !initialNodes.length) return initialNodes;
-      const cx = width / 2;
-      const cy = height / 2;
+      const centerX = width / 2;
+      const centerY = height / 2;
       if (layout === "force") {
         return initialNodes.map((n) => ({
           ...n,
@@ -1071,8 +1466,8 @@ var ForceDirectedGraph = forwardRef(
         const radius = Math.min(width, height) * 0.35;
         return initialNodes.map((n, i) => ({
           ...n,
-          x: cx + Math.cos(2 * Math.PI * i / initialNodes.length) * radius,
-          y: cy + Math.sin(2 * Math.PI * i / initialNodes.length) * radius
+          x: centerX + Math.cos(2 * Math.PI * i / initialNodes.length) * radius,
+          y: centerY + Math.sin(2 * Math.PI * i / initialNodes.length) * radius
         }));
       }
       if (layout === "hierarchical") {
@@ -1097,14 +1492,14 @@ var ForceDirectedGraph = forwardRef(
     useEffect(() => {
       if (!nodes || nodes.length === 0) return;
       const applyLayout = () => {
-        const cx = width / 2;
-        const cy = height / 2;
+        const centerX = width / 2;
+        const centerY = height / 2;
         if (layout === "circular") {
           const radius = Math.min(width, height) * 0.35;
           nodes.forEach((node, i) => {
             const angle = 2 * Math.PI * i / nodes.length;
-            node.fx = cx + Math.cos(angle) * radius;
-            node.fy = cy + Math.sin(angle) * radius;
+            node.fx = centerX + Math.cos(angle) * radius;
+            node.fy = centerY + Math.sin(angle) * radius;
           });
         } else if (layout === "hierarchical") {
           const groups = /* @__PURE__ */ new Map();
@@ -1633,6 +2028,6 @@ var GraphControls = ({
 };
 GraphControls.displayName = "GraphControls";
 
-export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Container, ForceDirectedGraph, GraphControls, Grid, Input, Label, RadioGroup, Select, Separator, Stack, Switch, Textarea, badgeVariants, buttonVariants, chartColors, cn, domainColors, formatCompactNumber, formatDate, formatDateTime, formatDecimal, formatDuration, formatFileSize, formatMetric, formatNumber, formatPercentage, formatRange, formatRelativeTime, getDomainColor, getSeverityColor, hexToRgba, severityColors, useD3, useD3WithResize, useDebounce, useDrag, useForceSimulation };
+export { Badge, Breadcrumb, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CodeBlock, Container, EmptyState, ErrorDisplay, ForceDirectedGraph, GraphControls, Grid, InlineCode, Input, Label, LoadingOverlay, LoadingSpinner, RadioGroup, ScoreBar, ScoreCard, Select, Separator, Stack, Switch, Textarea, ThemeProvider, badgeVariants, buttonVariants, chartColors, cn, domainColors, formatCompactNumber, formatDate, formatDateTime, formatDecimal, formatDuration, formatFileSize, formatMetric, formatNumber, formatPercentage, formatRange, formatRelativeTime, getDomainColor, getScoreRating, getSeverityColor, hexToRgba, scoreBg, scoreColor, scoreGlow, scoreLabel, severityColors, useD3, useD3WithResize, useDebounce, useDrag, useForceSimulation, useTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map