@aiready/components 0.11.11 → 0.11.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiready/components",
-  "version": "0.11.11",
+  "version": "0.11.15",
   "description": "Unified shared components library (UI, charts, hooks, utilities) for AIReady",
   "type": "module",
   "main": "./dist/index.js",
@@ -62,8 +62,10 @@
     "clsx": "^2.1.1",
     "d3": "^7.9.0",
     "d3-force": "^3.0.0",
+    "framer-motion": "^12.35.0",
+    "lucide-react": "^0.577.0",
     "tailwind-merge": "^3.0.0",
-    "@aiready/core": "0.21.11"
+    "@aiready/core": "0.21.14"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.5",

package/src/charts/ForceDirectedGraph.tsx

@@ -344,10 +344,7 @@ export const ForceDirectedGraph = forwardRef<
             svg
               .transition()
               .duration(300)
-              .call(
-                d3.zoom<SVGSVGElement, unknown>().transform as any,
-                newTransform
-              );
+              .call((d3 as any).zoom().transform as any, newTransform);
             setTransform(newTransform);
           }
         },
@@ -384,10 +381,10 @@ export const ForceDirectedGraph = forwardRef<
       const svg = d3.select(svgRef.current);
       const g = d3.select(gRef.current);
 
-      const zoom = d3
-        .zoom<SVGSVGElement, unknown>()
+      const zoom = (d3 as any)
+        .zoom()
         .scaleExtent([0.1, 10])
-        .on('zoom', (event) => {
+        .on('zoom', (event: any) => {
           g.attr('transform', event.transform);
           transformRef.current = event.transform;
           setTransform(event.transform);
@@ -406,9 +403,7 @@ export const ForceDirectedGraph = forwardRef<
       if (!gRef.current) return;
       try {
         const g = d3.select(gRef.current);
-        g.selectAll<SVGGElement, any>('g.node').each(function (
-          this: SVGGElement
-        ) {
+        g.selectAll('g.node').each(function (this: any) {
           const datum = d3.select(this).datum() as any;
           if (!datum) return;
           d3.select(this).attr(
@@ -417,9 +412,7 @@ export const ForceDirectedGraph = forwardRef<
           );
         });
 
-        g.selectAll<SVGLineElement, any>('line').each(function (
-          this: SVGLineElement
-        ) {
+        g.selectAll('line').each(function (this: any) {
           const l = d3.select(this).datum() as any;
           if (!l) return;
           const s: any =
@@ -513,9 +506,9 @@ export const ForceDirectedGraph = forwardRef<
     useEffect(() => {
       if (!gRef.current || !enableDrag) return;
       const g = d3.select(gRef.current);
-      const dragBehavior = d3
-        .drag<SVGGElement, unknown>()
-        .on('start', function (event) {
+      const dragBehavior = (d3 as any)
+        .drag()
+        .on('start', function (this: any, event: any) {
           try {
             const target =
               (event.sourceEvent && (event.sourceEvent.target as Element)) ||
@@ -538,7 +531,7 @@ export const ForceDirectedGraph = forwardRef<
             void e;
           }
         })
-        .on('drag', function (event) {
+        .on('drag', function (this: any, event: any) {
           if (!dragActiveRef.current || !dragNodeRef.current) return;
           const svg = svgRef.current;
           if (!svg) return;

package/src/code-block/CodeBlock.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import React, { useState, useCallback, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { cn } from '../utils/cn';
 
 export interface CodeBlockProps {
   children: React.ReactNode;
@@ -8,17 +10,15 @@ export interface CodeBlockProps {
   showCopy?: boolean;
   showHeader?: boolean;
   className?: string;
+  variant?: 'default' | 'glass';
 }
 
 // Dedent helper - removes common leading indentation
 function dedentCode(code: string): string {
-  // Normalize tabs to two spaces
   const normalized = code.replace(/\t/g, '  ').replace(/[ \t]+$/gm, '');
-
   const lines = normalized.split('\n');
   if (lines.length <= 1) return normalized.trim();
 
-  // Remove leading/trailing empty lines
   let start = 0;
   while (start < lines.length && lines[start].trim() === '') start++;
   let end = lines.length - 1;
@@ -27,27 +27,21 @@ function dedentCode(code: string): string {
   if (start > end) return '';
   const relevantLines = lines.slice(start, end + 1);
 
-  // Find minimum indent across non-empty lines
   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);
 
-  // Remove common indentation
-  const dedented =
-    minIndent === Infinity || minIndent === 0
-      ? relevantLines.join('\n')
-      : relevantLines
-          .map((l) =>
-            l.startsWith(' '.repeat(minIndent)) ? l.slice(minIndent) : l
-          )
-          .join('\n');
-
-  return dedented;
+  return minIndent === Infinity || minIndent === 0
+    ? relevantLines.join('\n')
+    : relevantLines
+        .map((l) =>
+          l.startsWith(' '.repeat(minIndent)) ? l.slice(minIndent) : l
+        )
+        .join('\n');
 }
 
-// Simple Copy Button
 function CopyButton({ code }: { code: string }) {
   const [copied, setCopied] = useState(false);
 
@@ -57,7 +51,6 @@ function CopyButton({ code }: { code: string }) {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     } catch {
-      // Fallback for older browsers
       const textarea = document.createElement('textarea');
       textarea.value = code;
       textarea.style.position = 'fixed';
@@ -74,38 +67,30 @@ function CopyButton({ code }: { code: string }) {
   return (
     <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'}
+      className="flex items-center gap-1.5 rounded-md px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-slate-400 hover:bg-slate-700/50 hover:text-cyan-400 transition-all"
     >
-      {copied ? (
-        <svg
-          className="h-4 w-4"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth="1.5"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M4.5 12.75l6 6 9-13.5"
-          />
-        </svg>
-      ) : (
-        <svg
-          className="h-4 w-4"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth="1.5"
-          stroke="currentColor"
-        >
-          <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"
-          />
-        </svg>
-      )}
+      <AnimatePresence mode="wait">
+        {copied ? (
+          <motion.span
+            key="copied"
+            initial={{ opacity: 0, y: 5 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -5 }}
+            className="text-cyan-400"
+          >
+            Copied!
+          </motion.span>
+        ) : (
+          <motion.span
+            key="copy"
+            initial={{ opacity: 0, y: 5 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -5 }}
+          >
+            Copy
+          </motion.span>
+        )}
+      </AnimatePresence>
     </button>
   );
 }
@@ -116,13 +101,10 @@ export function CodeBlock({
   showCopy = true,
   showHeader = true,
   className = '',
+  variant = 'glass',
 }: CodeBlockProps) {
-  // Get code string from children
   const codeString = useMemo(() => {
-    if (typeof children === 'string') {
-      return dedentCode(children);
-    }
-    // Handle template literal children
+    if (typeof children === 'string') return dedentCode(children);
     try {
       const raw = React.Children.toArray(children)
         .map((c) =>
@@ -137,18 +119,30 @@ export function CodeBlock({
 
   return (
     <div
-      className={`group relative my-4 overflow-hidden rounded-xl border border-slate-700 bg-slate-900 shadow-lg ${className}`}
+      className={cn(
+        'group relative my-6 overflow-hidden rounded-2xl border transition-all',
+        variant === 'glass'
+          ? 'border-indigo-500/20 bg-slate-950/40 backdrop-blur-md shadow-2xl'
+          : 'border-slate-700 bg-slate-900 shadow-lg',
+        className
+      )}
     >
-      {/* Header bar */}
       {showHeader && (
-        <div className="flex items-center justify-between border-b border-slate-700 bg-slate-800/50 px-4 py-2">
+        <div
+          className={cn(
+            'flex items-center justify-between px-4 py-2 border-b',
+            variant === 'glass'
+              ? 'border-indigo-500/10 bg-slate-900/20'
+              : 'border-slate-800 bg-slate-800/50'
+          )}
+        >
           <div className="flex items-center gap-2">
             <div className="flex gap-1.5">
-              <div className="h-3 w-3 rounded-full bg-red-500/50" />
-              <div className="h-3 w-3 rounded-full bg-amber-500/50" />
-              <div className="h-3 w-3 rounded-full bg-emerald-500/50" />
+              <div className="h-2.5 w-2.5 rounded-full bg-red-500/20 border border-red-500/40" />
+              <div className="h-2.5 w-2.5 rounded-full bg-amber-500/20 border border-amber-500/40" />
+              <div className="h-2.5 w-2.5 rounded-full bg-emerald-500/20 border border-emerald-500/40" />
             </div>
-            <span className="ml-2 text-xs font-semibold uppercase tracking-wider text-slate-500 font-mono">
+            <span className="ml-2 text-[10px] font-bold uppercase tracking-widest text-slate-500 font-mono">
               {language}
             </span>
           </div>
@@ -156,8 +150,7 @@ export function CodeBlock({
         </div>
       )}
 
-      {/* Code body */}
-      <pre className="overflow-x-auto p-4 text-sm leading-relaxed">
+      <pre className="overflow-x-auto p-4 text-sm leading-relaxed scrollbar-thin scrollbar-thumb-slate-700">
         <code className="font-mono block whitespace-pre text-slate-300">
           {codeString}
         </code>
@@ -166,7 +159,6 @@ export function CodeBlock({
   );
 }
 
-// Inline code component
 export function InlineCode({
   children,
   className = '',
@@ -176,7 +168,10 @@ export function InlineCode({
 }) {
   return (
     <code
-      className={`rounded-md bg-slate-100 px-1.5 py-0.5 text-sm font-mono text-slate-800 ${className}`}
+      className={cn(
+        'rounded-md bg-slate-800/50 border border-slate-700/50 px-1.5 py-0.5 text-xs font-mono text-cyan-400',
+        className
+      )}
     >
       {children}
     </code>

package/src/components/button.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../utils/cn';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
@@ -16,12 +16,20 @@ const buttonVariants = cva(
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
+        // Platform specific high-polish variants
+        glow: 'bg-gradient-to-r from-cyan-600 to-blue-600 text-white shadow-lg shadow-cyan-500/20 hover:shadow-cyan-500/40 hover:scale-[1.02] active:scale-[0.98]',
+        glass:
+          'bg-slate-800/50 backdrop-blur-sm border border-slate-700 text-slate-200 hover:bg-slate-700/50 hover:text-white',
+        accent:
+          'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20 hover:bg-cyan-500/20',
       },
       size: {
         default: 'h-10 px-4 py-2',
         sm: 'h-9 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',
+        // Extra sizes for dashboard use
+        xs: 'h-7 rounded-md px-2 text-[10px] font-bold uppercase tracking-wider',
       },
     },
     defaultVariants: {

package/src/components/card.tsx

@@ -75,6 +75,45 @@ const CardFooter = React.forwardRef<
 ));
 CardFooter.displayName = 'CardFooter';
 
+// GlassCard - Highly polished platform style
+const GlassCard = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-2xl border border-indigo-500/20 bg-slate-900/40 backdrop-blur-md shadow-xl transition-all hover:border-indigo-500/30',
+      className
+    )}
+    {...props}
+  />
+));
+GlassCard.displayName = 'GlassCard';
+
+const GlassCardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'flex flex-col space-y-1.5 p-6 border-b border-indigo-500/10',
+      className
+    )}
+    {...props}
+  />
+));
+GlassCardHeader.displayName = 'GlassCardHeader';
+
+const GlassCardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6', className)} {...props} />
+));
+GlassCardContent.displayName = 'GlassCardContent';
+
 export {
   Card,
   CardHeader,
@@ -82,4 +121,7 @@ export {
   CardTitle,
   CardDescription,
   CardContent,
+  GlassCard,
+  GlassCardHeader,
+  GlassCardContent,
 };