@seip/blue-bird 0.4.3

package/frontend/resources/js/blue-bird/components/DataTable.jsx

@@ -0,0 +1,126 @@
+import React, { useState, useMemo } from 'react';
+import { useLanguage } from '../contexts/LanguageContext.jsx';
+import Button from './Button.jsx';
+import Input from './Input.jsx';
+
+export default function DataTable({
+    data = [],
+    columns = [],
+    rowsPerPage = 10,
+    searchable = true,
+    pagination = true,
+    onEdit,
+    onDelete
+}) {
+    const { t } = useLanguage();
+    const [currentPage, setCurrentPage] = useState(1);
+    const [searchTerm, setSearchTerm] = useState('');
+
+    const filteredData = useMemo(() => {
+        if (!searchTerm) return data;
+        const lowerTerm = searchTerm.toLowerCase();
+        return data.filter(item =>
+            columns.some(col => String(item[col.key] || '').toLowerCase().includes(lowerTerm))
+        );
+    }, [data, columns, searchTerm]);
+
+    const pageCount = Math.ceil(filteredData.length / rowsPerPage);
+    const paginatedData = useMemo(() => {
+        if (!pagination) return filteredData;
+        const start = (currentPage - 1) * rowsPerPage;
+        return filteredData.slice(start, start + rowsPerPage);
+    }, [filteredData, currentPage, rowsPerPage, pagination]);
+
+    return (
+        <div className="flex flex-col w-full gap-4">
+            {searchable && (
+                <div className="flex justify-end">
+                    <Input
+                        placeholder={t('search')}
+                        value={searchTerm}
+                        onChange={(e) => { setSearchTerm(e.target.value); setCurrentPage(1); }}
+                        className="w-full md:w-64"
+                    />
+                </div>
+            )}
+
+            <div className="overflow-x-auto bg-white dark:bg-slate-900 rounded-lg shadow border border-gray-200 dark:border-slate-800">
+                <table className="min-w-full divide-y divide-gray-200 dark:divide-slate-800">
+                    <thead className="bg-gray-50 dark:bg-slate-800/50">
+                        <tr>
+                            {columns.map(col => (
+                                <th key={col.key} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
+                                    {col.title || col.key}
+                                </th>
+                            ))}
+                            {(onEdit || onDelete) && (
+                                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
+                                    {t('actions')}
+                                </th>
+                            )}
+                        </tr>
+                    </thead>
+                    <tbody className="bg-white dark:bg-slate-900 divide-y divide-gray-200 dark:divide-slate-800">
+                        {paginatedData.length > 0 ? paginatedData.map((row, idx) => (
+                            <tr key={row.id || idx} className="hover:bg-gray-50 dark:hover:bg-slate-800/50 transition-colors">
+                                {columns.map(col => (
+                                    <td key={col.key} className="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">
+                                        {row[col.key] || '-'}
+                                    </td>
+                                ))}
+                                {(onEdit || onDelete) && (
+                                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
+                                        {onEdit && (
+                                            <Button variant="outline" className="px-2 py-1 text-xs" onClick={() => onEdit(row)}>
+                                                {t('edit')}
+                                            </Button>
+                                        )}
+                                        {onDelete && (
+                                            <Button variant="danger" className="px-2 py-1 text-xs" onClick={() => onDelete(row)}>
+                                                {t('delete')}
+                                            </Button>
+                                        )}
+                                    </td>
+                                )}
+                            </tr>
+                        )) : (
+                            <tr>
+                                <td colSpan={columns.length + (onEdit || onDelete ? 1 : 0)} className="px-6 py-4 text-center text-sm text-gray-500 dark:text-slate-400">
+                                    No data available.
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+
+            {pagination && pageCount > 1 && (
+                <div className="flex justify-end mt-4 gap-1">
+                    <Button
+                        variant="secondary"
+                        disabled={currentPage === 1}
+                        onClick={() => setCurrentPage(p => p - 1)}
+                    >
+                        &laquo;
+                    </Button>
+                    {Array.from({ length: pageCount }).map((_, i) => (
+                        <Button
+                            key={i}
+                            variant={currentPage === i + 1 ? 'primary' : 'ghost'}
+                            onClick={() => setCurrentPage(i + 1)}
+                        >
+                            {i + 1}
+                        </Button>
+                    ))}
+                    <Button
+                        variant="secondary"
+                        disabled={currentPage === pageCount}
+                        onClick={() => setCurrentPage(p => p + 1)}
+                    >
+                        &raquo;
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+}

package/frontend/resources/js/blue-bird/components/Input.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Label from './Label.jsx';
+
+export default function Input({ label, error, variant = "default", className = '', ...props }) {
+    const variants = {
+        default: "flex h-10 w-full rounded-md border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        error: "flex h-10 w-full rounded-md border border-red-500 dark:border-red-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        fill: "flex h-10 w-full rounded-md border border-gray-100 dark:border-slate-800 bg-gray-100 dark:bg-slate-800 text-slate-900 dark:text-slate-100 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 w-full"
+    }
+    const style = variants[variant] || variants.default;
+    return (
+        <div className={`flex flex-col gap-1.5 ${className}`}>
+            {label && <Label>{label}</Label>}
+            <input
+                className={`${style} ${error ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
+                {...props}
+            />
+            {error && <span className="text-xs font-medium text-red-500">{error}</span>}
+        </div>
+    );
+}

package/frontend/resources/js/blue-bird/components/Label.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default function Label({ children, className = '', ...props }) {
+    return (
+        <label
+            className={`text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${className}`}
+            {...props}
+        >
+            {children}
+        </label>
+    );
+}

package/frontend/resources/js/blue-bird/components/LanguageButton.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useSPA } from '../contexts/SPAContext.jsx';
+import Button from './Button.jsx';
+
+/**
+ * LanguageButton — A wrapper around the Button component that
+ * automatically handles language switching via navigateToLang.
+ *
+ * @param {Object} props
+ * @param {string} props.lang - The language code to switch to (e.g., "en", "es").
+ * @param {React.ReactNode} props.children - Button content.
+ */
+function LanguageButton({ lang, children, ...props }) {
+    const { navigateToLang } = useSPA();
+
+    return (
+        <Button onClick={() => navigateToLang(lang)} {...props}>
+            {children}
+        </Button>
+    );
+}
+
+export default LanguageButton;

package/frontend/resources/js/blue-bird/components/Link.jsx

@@ -0,0 +1,16 @@
+import { useSPA } from "../contexts/SPAContext.jsx";
+import { Link as RouterLink } from "react-router-dom";
+
+function Link({ to, children, className = 'text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100 transition-colors', ...props }) {
+    const { l } = useSPA();
+
+    const localizedTo = l(to);
+
+    return (
+        <RouterLink to={localizedTo} {...props} className={className}>
+            {children}
+        </RouterLink>
+    );
+}
+
+export default Link;

package/frontend/resources/js/blue-bird/components/Modal.jsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+
+export default function Modal({ isOpen, onClose, title, children }) {
+    useEffect(() => {
+        if (isOpen) document.body.style.overflow = 'hidden';
+        else document.body.style.overflow = 'unset';
+        return () => { document.body.style.overflow = 'unset'; };
+    }, [isOpen]);
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 transition-opacity">
+            <div className="bg-white dark:bg-slate-900 rounded-lg shadow-xl w-full max-w-lg mx-4 overflow-hidden transform transition-all border dark:border-slate-800">
+                <div className="flex justify-between items-center p-4 border-b dark:border-slate-800">
+                    <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">{title}</h3>
+                    <button onClick={onClose} className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-2xl leading-none">
+                        &times;
+                    </button>
+                </div>
+                <div className="p-4 text-slate-900 dark:text-slate-100">
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}

package/frontend/resources/js/blue-bird/components/Skeleton.jsx

@@ -0,0 +1,45 @@
+export default function Skeleton() {
+    return (
+        <div className="min-h-screen w-full bg-gray-50 p-4 md:p-8">
+            <div className="animate-pulse flex flex-col gap-6">
+
+                <div className="flex items-center justify-between w-full mb-4">
+                    <div className="h-10 w-32 bg-gray-300 rounded-lg"></div>
+                    <div className="flex space-x-4">
+                        <div className="h-10 w-10 bg-gray-300 rounded-full"></div>
+                        <div className="h-10 w-24 bg-gray-300 rounded-lg"></div>
+                    </div>
+                </div>
+
+                <div className="h-48 md:h-64 w-full bg-gray-300 rounded-2xl"></div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div className="space-y-3">
+                        <div className="h-40 w-full bg-gray-300 rounded-xl"></div>
+                        <div className="h-4 w-3/4 bg-gray-300 rounded"></div>
+                        <div className="h-4 w-1/2 bg-gray-300 rounded"></div>
+                    </div>
+
+                    <div className="space-y-3">
+                        <div className="h-40 w-full bg-gray-300 rounded-xl"></div>
+                        <div className="h-4 w-3/4 bg-gray-300 rounded"></div>
+                        <div className="h-4 w-1/2 bg-gray-300 rounded"></div>
+                    </div>
+
+                    <div className="space-y-3">
+                        <div className="h-40 w-full bg-gray-300 rounded-xl"></div>
+                        <div className="h-4 w-3/4 bg-gray-300 rounded"></div>
+                        <div className="h-4 w-1/2 bg-gray-300 rounded"></div>
+                    </div>
+                </div>
+
+                <div className="space-y-2 mt-4">
+                    <div className="h-4 w-full bg-gray-200 rounded"></div>
+                    <div className="h-4 w-full bg-gray-200 rounded"></div>
+                    <div className="h-4 w-2/3 bg-gray-200 rounded"></div>
+                </div>
+
+            </div>
+        </div>
+    )
+}

package/frontend/resources/js/blue-bird/components/Translate.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useLanguage } from '../contexts/LanguageContext.jsx';
+
+/**
+ * Renders translated text string given a key.
+ * @param {Object} props
+ * @param {string} props.k - The translation key.
+ */
+export default function Translate({ k }) {
+    const { t } = useLanguage();
+    return <>{t(k)}</>;
+}

package/frontend/resources/js/blue-bird/components/Typography.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+export default function Typography({ variant = 'p', children, className = '', gradient = false, ...props }) {
+    const variants = {
+        h1: "scroll-m-20  font-extrabold tracking-tight",
+        h2: "scroll-m-20 border-b pb-2  font-semibold tracking-tight first:mt-0",
+        h3: "scroll-m-20  font-semibold tracking-tight",
+        h4: "scroll-m-20  font-semibold tracking-tight",
+        p: "leading-7 [&:not(:first-child)]:mt-6",
+        blockquote: "mt-6 border-l-2 pl-6 italic",
+        lead: "text-xl text-slate-700 dark:text-slate-300",
+        large: "text-lg font-semibold",
+        small: "text-sm font-medium leading-none",
+        muted: "text-sm text-slate-500 dark:text-slate-400",
+    };
+
+    const fromColors = {
+        blue: 'from-blue-500',
+        sky: 'from-sky-500',
+        indigo: 'from-indigo-500',
+        violet: 'from-violet-500',
+        purple: 'from-purple-500',
+        fuchsia: 'from-fuchsia-500',
+        pink: 'from-pink-500',
+        rose: 'from-rose-500',
+        red: 'from-red-500',
+        orange: 'from-orange-500',
+        amber: 'from-amber-500',
+        yellow: 'from-yellow-500',
+        lime: 'from-lime-500',
+        green: 'from-green-500',
+        emerald: 'from-emerald-500',
+        teal: 'from-teal-500',
+        cyan: 'from-cyan-500',
+    };
+
+    const toColors = {
+        blue: 'to-blue-600',
+        sky: 'to-sky-600',
+        indigo: 'to-indigo-600',
+        violet: 'to-violet-600',
+        purple: 'to-purple-600',
+        fuchsia: 'to-fuchsia-600',
+        pink: 'to-pink-600',
+        rose: 'to-rose-600',
+        red: 'to-red-600',
+        orange: 'to-orange-600',
+        amber: 'to-amber-600',
+        yellow: 'to-yellow-600',
+        lime: 'to-lime-600',
+        green: 'to-green-600',
+        emerald: 'to-emerald-600',
+        teal: 'to-teal-600',
+        cyan: 'to-cyan-600',
+    };
+
+    const fromClass = gradient ? (fromColors[gradient.from] || `from-${gradient.from}-400`) : '';
+    const toClass = gradient ? (toColors[gradient.to] || `to-${gradient.to}-600`) : '';
+    const gradientText = gradient ? `bg-gradient-to-r ${fromClass} ${toClass} bg-clip-text text-transparent` : '';
+
+    const Component = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p'].includes(variant) ? variant : 'p';
+    const style = `${variants[variant]} ${className} ${gradientText}`;
+
+    return (
+        <Component className={style} {...props}>
+            {children}
+        </Component>
+    );
+}

package/frontend/resources/js/blue-bird/contexts/LanguageContext.jsx

@@ -0,0 +1,41 @@
+import React, { createContext, useState, useEffect, useContext } from 'react';
+import en from '../locales/en.json';
+import es from '../locales/es.json';
+
+const translations = { en, es };
+export const LanguageContext = createContext();
+
+export const LanguageProvider = ({ children, initialLang }) => {
+
+    const [lang, setLang] = useState(() => localStorage.getItem('blue_bird_lang') || initialLang || 'en');
+
+    useEffect(() => {
+        localStorage.setItem('blue_bird_lang', lang);
+    }, [lang]);
+
+    /**
+     * Translate key into configured language text
+     * @param {string} key - the string config key
+     * @returns {string} The translated text
+     */
+    const t = (key) => {
+        const keys = key.split('.');
+        let value = translations[lang];
+        for (const k of keys) {
+            if (value && typeof value === 'object' && value !== null && k in value) {
+                value = value[k];
+            } else {
+                return key;
+            }
+        }
+        return value !== undefined ? value : key;
+    };
+
+    return (
+        <LanguageContext.Provider value={{ lang, setLang, t }}>
+            {children}
+        </LanguageContext.Provider>
+    );
+};
+
+export const useLanguage = () => useContext(LanguageContext);

package/frontend/resources/js/blue-bird/contexts/SPAContext.jsx

@@ -0,0 +1,237 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useRef,
+  useCallback,
+} from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useLanguage } from "./LanguageContext";
+
+const SPAContext = createContext({
+  pageProps: {},
+  pageMeta: {},
+  loading: false,
+  navigateToLang: () => { },
+});
+
+/**
+ * SPAProvider — Bridges React Router navigation with backend SEO data.
+ *
+ * On every client-side route change, fetches meta/props from the backend
+ * via ?source=frontend and updates document.title + meta tags.
+ * Also syncs the language from URL prefixes (e.g., /es/about → lang="es").
+ *
+ * @param {Object} props
+ * @param {React.ReactNode} props.children
+ * @param {Array<string>} [props.languages=[]] - Supported language codes.
+ * @param {string} [props.defaultLanguage="en"] - Default language.
+ */
+export function SPAProvider({
+  children,
+  languages = [],
+  defaultLanguage = "en",
+}) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { lang, setLang } = useLanguage();
+  const [pageProps, setPageProps] = useState({});
+  const [pageMeta, setPageMeta] = useState({});
+  const [loading, setLoading] = useState(false);
+  const isFirstRender = useRef(true);
+  const abortRef = useRef(null);
+
+  /**
+   * Extracts language code from a URL path if it starts with a valid lang prefix.
+   */
+  const detectLangFromPath = useCallback(
+    (pathname) => {
+      if (!languages || languages.length === 0) return null;
+      const parts = pathname.split("/").filter(Boolean);
+      if (
+        parts.length > 0 &&
+        parts[0].length === 2 &&
+        languages.includes(parts[0])
+      ) {
+        return parts[0];
+      }
+      return null;
+    },
+    [languages],
+  );
+
+  /**
+   * Strips the language prefix from a path.
+   */
+  const stripLangPrefix = useCallback(
+    (pathname) => {
+      if (!languages || languages.length === 0) return pathname;
+      const parts = pathname.split("/").filter(Boolean);
+      if (
+        parts.length > 0 &&
+        parts[0].length === 2 &&
+        languages.includes(parts[0])
+      ) {
+        const rest = parts.slice(1).join("/");
+        return rest ? `/${rest}` : "/";
+      }
+      return pathname;
+    },
+    [languages],
+  );
+
+  /**
+   * Localizes a path based on the current language.
+   * If on /es/about, l("/") returns /es/
+   */
+  const l = useCallback(
+    (path) => {
+      if (!languages || languages.length === 0) return path;
+      const currentLang = detectLangFromPath(location.pathname) || lang || defaultLanguage;
+      if (!currentLang || currentLang === defaultLanguage) return path;
+
+      const cleanPath = path.startsWith("/") ? path : `/${path}`;
+      return `/${currentLang}${cleanPath === "/" ? "" : cleanPath}`;
+    },
+    [languages, location.pathname, lang, defaultLanguage, detectLangFromPath],
+  );
+
+  /**
+   * Navigates to the same page but in a different language.
+   */
+  const navigateToLang = useCallback(
+    (newLang) => {
+      const pathWithoutLang = stripLangPrefix(location.pathname);
+      const newPath = newLang === defaultLanguage
+        ? pathWithoutLang
+        : `/${newLang}${pathWithoutLang === "/" ? "" : pathWithoutLang}`;
+
+      setLang(newLang);
+      navigate(newPath);
+    },
+    [location.pathname, stripLangPrefix, setLang, navigate, defaultLanguage],
+  );
+
+  /**
+   * Updates document meta tags from fetched data.
+   */
+  const updateMeta = useCallback((meta) => {
+    if (!meta) return;
+
+    if (meta.titleMeta) {
+      document.title = meta.titleMeta;
+    }
+
+    const metaUpdates = {
+      description: meta.descriptionMeta,
+      keywords: meta.keywordsMeta,
+      author: meta.authorMeta,
+    };
+
+    Object.entries(metaUpdates).forEach(([name, content]) => {
+      let el = document.querySelector(`meta[name="${name}"]`);
+      if (el) {
+        el.setAttribute("content", content || "");
+      }
+    });
+
+    // Update OG tags
+    const ogUpdates = {
+      "og:title": meta.titleMeta,
+      "og:description": meta.descriptionMeta,
+      "og:image": meta.ogImage,
+      "og:type": meta.ogType,
+    };
+
+    Object.entries(ogUpdates).forEach(([property, content]) => {
+      let el = document.querySelector(`meta[property="${property}"]`);
+      if (el) {
+        el.setAttribute("content", content || "");
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    // Sync language from URL prefix if present
+    const urlLang = detectLangFromPath(location.pathname);
+    if (urlLang) {
+      setLang(urlLang);
+    } else if (languages.length > 0 && !isFirstRender.current) {
+      // On subsequent navigations, if prefix is missing, revert to default
+      setLang(defaultLanguage);
+    }
+
+    // Skip fetch on initial render
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    if (abortRef.current) {
+      abortRef.current.abort();
+    }
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    const fetchMeta = async () => {
+      setLoading(true);
+      try {
+        const currentActiveLang = urlLang || lang || defaultLanguage;
+        const separator = location.pathname.includes("?") ? "&" : "?";
+        const url = `${location.pathname}${separator}source=frontend&lang=${currentActiveLang}`;
+
+        const response = await fetch(url, {
+          signal: controller.signal,
+          headers: {
+            "X-Blue-Bird-SPA": "true",
+            Accept: "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          setLoading(false);
+          return;
+        }
+
+        const data = await response.json();
+
+        if (data.meta) {
+          updateMeta(data.meta);
+          setPageMeta(data.meta);
+        }
+
+        if (data.props) {
+          setPageProps(data.props);
+        }
+      } catch (err) {
+        if (err.name !== "AbortError") {
+          console.warn("SPA meta fetch failed:", err.message);
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMeta();
+
+    return () => {
+      controller.abort();
+    };
+  }, [location.pathname, languages, defaultLanguage, setLang, updateMeta]);
+
+  return (
+    <SPAContext.Provider
+      value={{ pageProps, pageMeta, loading, navigateToLang, l, currentLang: lang }}
+    >
+      {children}
+    </SPAContext.Provider>
+  );
+}
+
+/**
+ * Hook to access SPA navigation context.
+ * @returns {{ pageProps: Object, pageMeta: Object, loading: boolean, navigateToLang: Function }}
+ */
+export const useSPA = () => useContext(SPAContext);

package/frontend/resources/js/blue-bird/contexts/SnackbarContext.jsx

@@ -0,0 +1,38 @@
+import React, { createContext, useState, useContext, useCallback } from 'react';
+
+export const SnackbarContext = createContext();
+
+export const SnackbarProvider = ({ children }) => {
+    const [snackbars, setSnackbars] = useState([]);
+
+    const showSnackbar = useCallback((message, type = 'info', duration = 3000) => {
+        const id = Date.now();
+        setSnackbars((prev) => [...prev, { id, message, type }]);
+        setTimeout(() => {
+            setSnackbars((prev) => prev.filter((s) => s.id !== id));
+        }, duration);
+    }, []);
+
+    return (
+        <SnackbarContext.Provider value={{ showSnackbar }}>
+            {children}
+            <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 pointer-events-none">
+                {snackbars.map((s) => (
+                    <div
+                        key={s.id}
+                        className={`px-4 py-3 rounded shadow-lg text-white transition-all transform pointer-events-auto ${s.type === 'success' ? 'bg-green-600' :
+                                s.type === 'error' ? 'bg-red-600' :
+                                    s.type === 'warning' ? 'bg-yellow-600' :
+                                        'bg-blue-600'
+                            }`}
+                        role="alert"
+                    >
+                        {s.message}
+                    </div>
+                ))}
+            </div>
+        </SnackbarContext.Provider>
+    );
+};
+
+export const useSnackbar = () => useContext(SnackbarContext);