@opencosmos/ui 1.3.1

package/src/components/layout/index.ts

@@ -0,0 +1,18 @@
+export * from './Accordion';
+export * from './AspectRatio';
+export * from './Carousel';
+export * from './Collapsible';
+export * from './Container';
+export * from './CustomizerPanel';
+export * from './DatePicker';
+export * from './Footer';
+export * from './Grid';
+export * from './Header';
+export * from './PageLayout';
+export * from './PageTemplate';
+export * from './Resizable';
+export * from './ScrollArea';
+export * from './Separator';
+export * from './Sidebar';
+export * from './Stack';
+export * from './GlassSurface';

package/src/components/motion/AnimatedBeam.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useId } from 'react';
+import { cn } from '../../lib/utils';
+
+export interface AnimatedBeamProps {
+    className?: string;
+    containerRef: React.RefObject<HTMLElement | null>;
+    fromRef?: React.RefObject<HTMLElement | null>;
+    toRef?: React.RefObject<HTMLElement | null>;
+    curvature?: number;
+    reverse?: boolean;
+    pathColor?: string;
+    pathWidth?: number;
+    pathOpacity?: number;
+    gradientStartColor?: string;
+    gradientStopColor?: string;
+    delay?: number;
+    duration?: number;
+    startX?: number;
+    startY?: number;
+    endX?: number;
+    endY?: number;
+}
+
+import { useMotionPreference } from '../../hooks/useMotionPreference';
+
+export const AnimatedBeam = ({
+    className,
+    containerRef,
+    fromRef,
+    toRef,
+    curvature = 0,
+    reverse = false,
+    duration = Math.random() * 3 + 4,
+    delay = 0,
+    pathColor = "gray",
+    pathWidth = 2,
+    pathOpacity = 0.2,
+    gradientStartColor = "#ffaa40",
+    gradientStopColor = "#9c40ff",
+    startX,
+    startY,
+    endX,
+    endY,
+}: AnimatedBeamProps) => {
+    const { shouldAnimate, scale } = useMotionPreference();
+    const id = useId();
+    const pathId = `beam-path-${id}`;
+    const gradientId = `beam-gradient-${id}`;
+    const maskId = `beam-mask-${id}`;
+
+    // Calculate effective duration based on intensity
+    const durationMultiplier = scale > 0 ? (5 / scale) : 1;
+    const effectiveDuration = duration * durationMultiplier;
+
+    // ... (refs logic omitted as in original)
+
+    const x1 = startX || 0;
+    const y1 = startY || 0;
+    const x2 = endX || 0;
+    const y2 = endY || 0;
+
+    // Calculate Bezier control points
+    const midX = (x1 + x2) / 2;
+    const midY = (y1 + y2) / 2;
+
+    const controlY = y1;
+    const controlX = x2;
+
+    const path = `M ${x1},${y1} C ${x1 + curvature},${y1} ${x2 - curvature},${y2} ${x2},${y2}`;
+
+    return (
+        <svg
+            fill="none"
+            width="100%"
+            height="100%"
+            xmlns="http://www.w3.org/2000/svg"
+            className={cn("pointer-events-none absolute inset-0 transform-gpu overflow-visible", className)}
+        >
+            <defs>
+                <linearGradient id={gradientId} gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%">
+                    <stop stopColor={gradientStartColor} stopOpacity="0" />
+                    <stop stopColor={gradientStartColor} />
+                    <stop offset="32.5%" stopColor={gradientStopColor} />
+                    <stop offset="100%" stopColor={gradientStopColor} stopOpacity="0" />
+                </linearGradient>
+
+                <marker id={`arrow-${id}`} markerWidth="5" markerHeight="5" refX="2.5" refY="2.5" orient="auto" markerUnits="strokeWidth">
+                    <circle cx="2.5" cy="2.5" r="2.5" fill={gradientStopColor} />
+                </marker>
+            </defs>
+
+            {/* Base Path (faint line) */}
+            <path
+                d={path}
+                stroke={pathColor}
+                strokeWidth={pathWidth}
+                strokeOpacity={pathOpacity}
+                strokeLinecap="round"
+            />
+
+            {/* Animated Path Mask */}
+            {shouldAnimate && (
+                <path
+                    d={path}
+                    stroke={`url(#${gradientId})`}
+                    strokeWidth={pathWidth}
+                    strokeLinecap="round"
+                    fill="none"
+                >
+                    <animate
+                        attributeName="stroke-dasharray"
+                        values={`0, 1000; 1000, 0`}
+                        dur={`${effectiveDuration}s`}
+                        repeatCount="indefinite"
+                    />
+                </path>
+            )}
+
+            {/* Framer Motion Particle */}
+            {shouldAnimate && (
+                <motion.circle
+                    r={pathWidth * 1.5}
+                    fill={gradientStartColor}
+                    initial={{ offsetDistance: "0%" }}
+                    animate={{ offsetDistance: "100%" }}
+                    transition={{
+                        duration: effectiveDuration,
+                        delay: delay,
+                        ease: "easeInOut",
+                        repeat: Infinity,
+                        repeatDelay: 0.5
+                    }}
+                    style={{ offsetPath: `path('${path}')` }}
+                />
+            )}
+
+            {/* Secondary Particle for "Tail" effect */}
+            {shouldAnimate && (
+                <motion.circle
+                    r={pathWidth}
+                    fill={gradientStopColor}
+                    initial={{ offsetDistance: "0%", opacity: 0 }}
+                    animate={{ offsetDistance: "100%", opacity: [0, 1, 0] }}
+                    transition={{
+                        duration: effectiveDuration,
+                        delay: delay + 0.05,
+                        ease: "easeInOut",
+                        repeat: Infinity,
+                        repeatDelay: 0.5
+                    }}
+                    style={{ offsetPath: `path('${path}')` }}
+                />
+            )}
+        </svg>
+    );
+};

package/src/components/navigation/Breadcrumb.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from './Breadcrumb'
+
+describe('Breadcrumb', () => {
+  it('renders breadcrumb navigation', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Current</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    )
+    expect(screen.getByRole('navigation')).toBeInTheDocument()
+    expect(screen.getByText('Home')).toBeInTheDocument()
+    expect(screen.getByText('Current')).toBeInTheDocument()
+  })
+
+  it('renders links with correct href', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    )
+    expect(screen.getByRole('link', { name: /docs/i })).toHaveAttribute('href', '/docs')
+  })
+
+  it('marks current page with aria-current', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbPage>Settings</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    )
+    expect(screen.getByText('Settings')).toHaveAttribute('aria-current', 'page')
+  })
+})

package/src/components/navigation/Breadcrumb.tsx

@@ -0,0 +1,119 @@
+import * as React from "react"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const Breadcrumb = (
+  {
+    ref,
+    ...props
+  }: React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  } & {
+    ref?: React.Ref<HTMLElement>;
+  }
+) => <nav ref={ref} aria-label="breadcrumb" {...props} />
+
+const BreadcrumbList = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<"ol"> & {
+    ref?: React.Ref<HTMLOListElement>;
+  }
+) => (<ol
+  ref={ref}
+  className={cn(
+    "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+    className
+  )}
+  {...props}
+/>)
+
+const BreadcrumbItem = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<"li"> & {
+    ref?: React.Ref<HTMLLIElement>;
+  }
+) => (<li
+  ref={ref}
+  className={cn("inline-flex items-center gap-1.5", className)}
+  {...props}
+/>)
+
+const BreadcrumbLink = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  } & {
+    ref?: React.Ref<HTMLAnchorElement>;
+  }
+) => (<a
+  ref={ref}
+  className={cn("transition-colors hover:text-foreground", className)}
+  {...props}
+/>)
+
+const BreadcrumbPage = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<"span"> & {
+    ref?: React.Ref<HTMLSpanElement>;
+  }
+) => (<span
+  ref={ref}
+  aria-current="page"
+  className={cn("font-normal text-foreground", className)}
+  {...props}
+/>)
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:size-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

package/src/components/navigation/Breadcrumbs.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import React from 'react';
+
+// Legacy BreadcrumbItemLegacy interface (kept separate from shadcn Breadcrumb)
+export interface BreadcrumbItemLegacy {
+  /**
+   * Display text for the breadcrumb
+   */
+  label: string;
+
+  /**
+   * Navigation URL (href for anchor tags)
+   * Omit for current/last item (will render as plain text)
+   */
+  href?: string;
+
+  /**
+   * Optional icon to display before the label
+   */
+  icon?: React.ReactNode;
+}
+
+export interface BreadcrumbsProps {
+  /**
+   * Array of breadcrumb items (hierarchy from root to current)
+   */
+  items: BreadcrumbItemLegacy[];
+
+  /**
+   * Visual style variant
+   * @default 'subtle'
+   */
+  variant?: 'subtle' | 'bold' | 'underline';
+
+  /**
+   * Custom separator between items
+   * @default '/'
+   */
+  separator?: React.ReactNode;
+
+  /**
+   * ARIA label for the navigation
+   * @default 'Breadcrumb'
+   */
+  ariaLabel?: string;
+
+  /**
+   * Additional CSS classes for customization
+   */
+  className?: string;
+
+  /**
+   * Callback fired when a breadcrumb link is clicked
+   */
+  onNavigate?: (item: BreadcrumbItemLegacy, index: number) => void;
+}
+
+/**
+ * Breadcrumbs Component
+ *
+ * A navigation component showing page hierarchy with clickable links.
+ *
+ * Features:
+ * - Three visual variants (subtle, bold, underline)
+ * - Customizable separators
+ * - Full ARIA accessibility
+ * - Theme-aware styling
+ * - Keyboard navigable
+ * - Current page indication
+ *
+ * Example:
+ * ```tsx
+ * <Breadcrumbs
+ *   variant="subtle"
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Products', href: '/products' },
+ *     { label: 'Laptop' }, // Current page (no href)
+ *   ]}
+ * />
+ * ```
+ */
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
+  items,
+  variant = 'subtle',
+  separator = '/',
+  ariaLabel = 'Breadcrumb',
+  className = '',
+  onNavigate,
+}) => {
+  // Return null if no items
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  // Truncate items for long paths: show first item + ... + last 2 items
+  const getDisplayItems = () => {
+    if (items.length <= 3) {
+      return items;
+    }
+
+    // For long paths: [first, ..., second-to-last, last]
+    return [
+      items[0],
+      { label: '...', href: undefined } as BreadcrumbItemLegacy, // Ellipsis
+      items[items.length - 2],
+      items[items.length - 1],
+    ];
+  };
+
+  const displayItems = getDisplayItems();
+
+  // Get variant-specific styles
+  const getVariantStyles = (isLink: boolean, isCurrent: boolean) => {
+    const baseStyles = 'text-sm transition-all duration-200';
+
+    if (variant === 'subtle') {
+      if (isCurrent) {
+        return `${baseStyles} text-[var(--color-text-muted)] font-medium`;
+      }
+      if (isLink) {
+        return `${baseStyles} text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-hover)] px-1.5 py-1.5 -mx-1.5 -my-1.5 rounded`;
+      }
+    }
+
+    if (variant === 'bold') {
+      if (isCurrent) {
+        return `${baseStyles} text-[var(--color-text-primary)] font-semibold`;
+      }
+      if (isLink) {
+        return `${baseStyles} text-[var(--color-primary)] hover:bg-[var(--color-text-primary)] hover:text-[var(--color-background)] font-medium px-1.5 py-1.5 -mx-1.5 -my-1.5 rounded`;
+      }
+    }
+
+    if (variant === 'underline') {
+      if (isCurrent) {
+        return `${baseStyles} text-[var(--color-text-primary)] font-medium`;
+      }
+      if (isLink) {
+        return `${baseStyles} text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] underline-offset-2 hover:underline decoration-[var(--color-primary)]/40 hover:decoration-[var(--color-primary)] decoration-1 hover:decoration-2 px-1.5 py-1.5 -mx-1.5 -my-1.5`;
+      }
+    }
+
+    return baseStyles;
+  };
+
+  const getLinkStyles = () => {
+    return `
+      focus-visible:outline-none
+      focus-visible:ring-2
+      focus-visible:ring-[var(--color-focus)]
+      focus-visible:ring-offset-2
+      active:scale-95
+      cursor-pointer
+    `;
+  };
+
+  const getSeparatorStyles = () => {
+    const baseStyles = 'mx-2 select-none';
+
+    if (variant === 'subtle') {
+      return `${baseStyles} text-[var(--color-text-muted)]`;
+    }
+    if (variant === 'bold') {
+      return `${baseStyles} text-[var(--color-border)] font-bold`;
+    }
+    if (variant === 'underline') {
+      return `${baseStyles} text-[var(--color-text-muted)]`;
+    }
+
+    return baseStyles;
+  };
+
+  return (
+    <nav aria-label={ariaLabel} className={className}>
+      <ol className="flex items-center flex-nowrap list-none m-0 p-0 overflow-x-auto scrollbar-hide">
+        {displayItems.map((item, index) => {
+          const isLast = index === displayItems.length - 1;
+          const isEllipsis = item.label === '...';
+          const isInteractive = item.href && !isLast && !isEllipsis;
+
+          return (
+            <li key={index} className="flex items-center flex-shrink-0">
+              {isInteractive ? (
+                <a
+                  href={item.href}
+                  onClick={(e) => {
+                    if (onNavigate) {
+                      onNavigate(item, index);
+                    }
+                  }}
+                  className={`${getVariantStyles(true, false)} ${getLinkStyles()}`}
+                >
+                  {item.icon && <span className="inline-flex mr-1.5">{item.icon}</span>}
+                  {item.label}
+                </a>
+              ) : (
+                <span
+                  className={isEllipsis ? 'text-sm text-[var(--color-text-muted)] px-1' : getVariantStyles(false, isLast)}
+                  aria-current={isLast ? 'page' : undefined}
+                >
+                  {item.icon && <span className="inline-flex mr-1.5">{item.icon}</span>}
+                  {item.label}
+                </span>
+              )}
+
+              {!isLast && (
+                <span aria-hidden="true" className={getSeparatorStyles()}>
+                  {separator}
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+Breadcrumbs.displayName = 'Breadcrumbs';