flikkui 0.1.0-beta.11 → 0.1.0-beta.12

package/dist/components/core/Tree/Tree.js

@@ -1,14 +1,11 @@
-import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign, __spreadArray } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useState, useCallback } from 'react';
+import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { treeTheme } from './Tree.theme.js';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
+import { ChevronRightIcon, DocumentIcon } from '@heroicons/react/24/outline';
 import { getReducedMotionVariants, treeNodeVariants, expandIconVariants, childNodeVariants, childrenStagger } from './Tree.animations.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronRightIcon.js';
-import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/DocumentIcon.js';
-import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
 
 // Simplified selection utilities (merged from Tree.utils.ts)
 var getDescendantIds = function (node) {
@@ -136,9 +133,9 @@ var InternalTreeNode = function (_a) {
     return (React__default.createElement("div", null,
         React__default.createElement("div", { className: nodeStyle, style: { paddingLeft: "calc(".concat(level, " * ").concat(theme.indentSize, " + 0.25rem)") }, onClick: handleNodeClick, onKeyDown: handleKeyDown, tabIndex: node.disabled ? -1 : 0, role: "treeitem", "aria-expanded": isExpandable ? expanded : false, "aria-selected": selectable ? selected : undefined, "aria-disabled": node.disabled },
             isExpandable ? (React__default.createElement(motion.span, { className: cn(theme.expandIconStyle), variants: iconVariants, initial: "collapsed", animate: expanded ? "expanded" : "collapsed", onClick: handleExpandClick, role: "button", "aria-label": expanded ? 'Collapse' : 'Expand', tabIndex: -1 },
-                React__default.createElement(ForwardRef, { className: "size-4", strokeWidth: 2 }))) : (React__default.createElement("span", { className: "w-4 mr-1" })),
+                React__default.createElement(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }))) : (React__default.createElement("span", { className: "w-4 mr-1" })),
             checkable && (React__default.createElement(Checkbox, { size: 'sm', id: "tree-checkbox-".concat(node.id), name: "tree-checkbox-".concat(node.id), value: node.id, checked: selected, indeterminate: hierarchicalSelection && isIndeterminate, onChange: function () { return onNodeClick(node); }, state: node.disabled ? "disabled" : "default", className: cn(theme.checkboxStyle, "flex-shrink-0"), onClick: function (e) { return e.stopPropagation(); } })),
-            (node.icon || !isExpandable) && (React__default.createElement("span", { className: cn(theme.iconStyle) }, node.icon || React__default.createElement(ForwardRef$1, { className: "w-4 h-4" }))),
+            (node.icon || !isExpandable) && (React__default.createElement("span", { className: cn(theme.iconStyle) }, node.icon || React__default.createElement(DocumentIcon, { className: "w-4 h-4" }))),
             React__default.createElement("span", { className: labelStyle, title: node.label }, node.label)),
         hasChildren && (React__default.createElement(AnimatePresence, { initial: false }, expanded && (React__default.createElement(motion.div, { key: "".concat(node.id, "-children"), variants: nodeVariants, initial: "collapsed", animate: "expanded", exit: "collapsed", style: {
                 overflow: 'hidden',

package/dist/components/core/index.d.ts

@@ -8,6 +8,7 @@ export * from "./Button";
 export * from "./ButtonGroup";
 export * from "./Calendar";
 export * from "./Card";
+export * from "./CardStack";
 export * from "./Carousel";
 export * from "./CommandPalette";
 export * from "./Divider";
@@ -32,7 +33,7 @@ export * from "./Alert";
 export * from "./Toast";
 export * from "./Notification";
 export * from "./Spinner";
-export * from "./ChatMessage";
+export * from "./Message";
 export * from "./Empty";
 export * from "./Masonry";
 export * from "./Table";
@@ -40,3 +41,5 @@ export * from "./DragDrop";
 export * from "./Sortable";
 export * from "./NavItem";
 export * from "./Sidebar";
+export * from "./RetryBoundary";
+export * from "./OfflineIndicator";

package/dist/components/core/index.js

@@ -0,0 +1,94 @@
+export { Accordion } from './Accordion/Accordion.js';
+export { AlertDialog } from './AlertDialog/AlertDialog.js';
+export { Avatar } from './Avatar/Avatar.js';
+export { AvatarGroup } from './AvatarGroup/AvatarGroup.js';
+export { Badge } from './Badge/Badge.js';
+export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs.js';
+export { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator } from './Breadcrumbs/Breadcrumbs.theme.js';
+export { Button } from './Button/Button.js';
+export { ButtonGroup } from './ButtonGroup/ButtonGroup.js';
+export { ButtonGroupSeparator } from './ButtonGroup/ButtonGroupSeparator.js';
+export { ButtonGroupText } from './ButtonGroup/ButtonGroupText.js';
+export { Calendar } from './Calendar/Calendar.js';
+export { calendarTheme } from './Calendar/Calendar.theme.js';
+export { calendarAnimations } from './Calendar/Calendar.animations.js';
+export { CalendarMini } from './Calendar/CalendarMini/CalendarMini.js';
+export { Card } from './Card/Card.js';
+export { CardStack } from './CardStack/CardStack.js';
+export { Carousel } from './Carousel/Carousel.js';
+export { CommandPalette } from './CommandPalette/CommandPalette.js';
+export { commandPaletteTheme } from './CommandPalette/CommandPalette.theme.js';
+export { Divider } from './Divider/Divider.js';
+export { Drawer } from './Drawer/Drawer.js';
+export { Dropdown } from './Dropdown/Dropdown.js';
+export { DropdownTrigger } from './Dropdown/DropdownTrigger.js';
+export { DropdownMenu } from './Dropdown/DropdownMenu.js';
+export { DropdownItem } from './Dropdown/DropdownItem.js';
+export { DropdownSection } from './Dropdown/DropdownSection.js';
+export { DropdownSeparator } from './Dropdown/DropdownSeparator.js';
+export { dropdownTheme } from './Dropdown/Dropdown.theme.js';
+export { Kbd } from './Kbd/Kbd.js';
+export { Link } from './Link/Link.js';
+export { Loader } from './Loader/Loader.js';
+export { default as Metric } from './Metric/Metric.js';
+export { metricTheme } from './Metric/Metric.theme.js';
+export { Modal } from './Modal/Modal.js';
+export { Pagination } from './Pagination/Pagination.js';
+export { Popover } from './Popover/Popover.js';
+export { PopoverContext, usePopoverContext } from './Popover/PopoverContext.js';
+export { default as ProgressiveBlur } from './ProgressiveBlur/ProgressiveBlur.js';
+export { Segmented } from './Segmented/Segmented.js';
+export { Skeleton } from './Skeleton/Skeleton.js';
+export { SlidingNumber } from './SlidingNumber/SlidingNumber.js';
+export { Stepper } from './Stepper/Stepper.js';
+export { Tabs } from './Tabs/Tabs.js';
+export { TabsList } from './Tabs/TabsList.js';
+export { TabsTrigger } from './Tabs/TabsTrigger.js';
+export { TabsContent } from './Tabs/TabsContent.js';
+export { TabsContext, useTabsContext } from './Tabs/TabsContext.js';
+export { Tooltip } from './Tooltip/Tooltip.js';
+export { baseTooltipVariants, getTooltipVariants, tooltipSpringConfig } from './Tooltip/Tooltip.animations.js';
+export { Tree } from './Tree/Tree.js';
+export { treeTheme } from './Tree/Tree.theme.js';
+export { Alert } from './Alert/Alert.js';
+export { alertTheme } from './Alert/Alert.theme.js';
+export { Toast } from './Toast/Toast.js';
+export { ToastProvider, useToastContext } from './Toast/ToastProvider.js';
+export { useToast } from './Toast/useToast.js';
+export { toastTheme } from './Toast/Toast.theme.js';
+export { Notification } from './Notification/Notification.js';
+export { notificationTheme } from './Notification/Notification.theme.js';
+export { Spinner } from './Spinner/Spinner.js';
+export { Message } from './Message/Message.js';
+export { messageTheme } from './Message/Message.theme.js';
+export { TypeWriter } from './Message/TypeWriter.js';
+export { Empty } from './Empty/Empty.js';
+export { emptyTheme } from './Empty/Empty.theme.js';
+export { Masonry } from './Masonry/Masonry.js';
+export { getMasonryTheme, masonryTheme } from './Masonry/Masonry.theme.js';
+export { Table } from './Table/index.js';
+export { DragDropProvider, Draggable, Droppable } from './DragDrop/DragDrop.js';
+export { Sortable, SortableItem } from './Sortable/Sortable.js';
+export { NavItem } from './NavItem/NavItem.js';
+export { Sidebar } from './Sidebar/Sidebar.js';
+export { SidebarHeader } from './Sidebar/SidebarHeader.js';
+export { SidebarContent } from './Sidebar/SidebarContent.js';
+export { SidebarFooter } from './Sidebar/SidebarFooter.js';
+export { SidebarNav } from './Sidebar/SidebarNav.js';
+export { SidebarNavGroup } from './Sidebar/SidebarNavGroup.js';
+export { SidebarSubmenu } from './Sidebar/SidebarSubmenu.js';
+export { SidebarToggle } from './Sidebar/SidebarToggle.js';
+export { useSidebarContext } from './Sidebar/SidebarContext.js';
+export { RetryBoundary } from './RetryBoundary/RetryBoundary.js';
+export { retryBoundaryTheme } from './RetryBoundary/RetryBoundary.theme.js';
+export { OfflineIndicator } from './OfflineIndicator/OfflineIndicator.js';
+export { offlineIndicatorTheme } from './OfflineIndicator/OfflineIndicator.theme.js';
+export { CardHeader } from './Card/CardHeader.js';
+export { CardTitle } from './Card/CardTitle.js';
+export { CardDescription } from './Card/CardDescription.js';
+export { CardContent } from './Card/CardContent.js';
+export { CardFooter } from './Card/CardFooter.js';
+export { TableActions } from './Table/components/TableActions/TableActions.js';
+export { TableActionsMenu } from './Table/components/TableActions/TableActionsMenu.js';
+export { TablePagination } from './Table/components/TablePagination/TablePagination.js';
+export { AnimatePresence } from 'motion/react';

package/dist/components/effects/CustomCursor/CustomCursor.js

@@ -1,14 +1,10 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import * as React from 'react';
+import { useMotionValue, AnimatePresence, motion, useReducedMotion, useSpring } from 'motion/react';
+import { PaperAirplaneIcon } from '@heroicons/react/20/solid';
 import { cn } from '../../../utils/cn.js';
 import { customCursorVariants, reducedMotionSpringConfig, defaultSpringConfig } from './CustomCursor.animations.js';
 import { customCursorTheme } from './CustomCursor.theme.js';
-import { useMotionValue } from '../../../node_modules/framer-motion/dist/es/value/use-motion-value.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/20/solid/esm/PaperAirplaneIcon.js';
-import { useSpring } from '../../../node_modules/framer-motion/dist/es/value/use-spring.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
-import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
 
 /**
  * Context for CustomCursor state management
@@ -152,7 +148,7 @@ var CustomCursor = React.forwardRef(function (_a, ref) {
         y.set(cursorPos.y);
     }, [cursorPos, x, y]);
     // Default content based on shape
-    var defaultContent = shape === 'arrow' ? (React.createElement(ForwardRef, { className: "w-full h-full rotate-180" })) : (React.createElement("div", { className: "w-full h-full" }));
+    var defaultContent = shape === 'arrow' ? (React.createElement(PaperAirplaneIcon, { className: "w-full h-full rotate-180" })) : (React.createElement("div", { className: "w-full h-full" }));
     return (React.createElement(AnimatePresence, null, isActive && (React.createElement(motion.div, __assign({ ref: cursorRef, "data-slot": "custom-cursor", className: cn(customCursorTheme.baseStyle, customCursorTheme.cursorStyle, customCursorTheme.sizes[size], customCursorTheme.colors[color], customCursorTheme.variants[variant], customCursorTheme.shapes[shape], className), style: __assign({ top: y, left: x }, style), variants: customCursorVariants, initial: "initial", animate: "animate", exit: "exit", role: "presentation", "aria-hidden": "true" }, props), children || defaultContent))));
 });
 CustomCursor.displayName = 'CustomCursor';

package/dist/components/effects/GlassEffect/GlassEffect.js

@@ -1,6 +1,9 @@
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import '../../../node_modules/tslib/tslib.es6.js';
+import '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
 
 /**
  * GlassEffect component creates a layered glass morphism effect

package/dist/components/effects/GlassSurface/GlassSurface.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { GlassSurfaceProps } from "./GlassSurface.types";
+/**
+ * GlassSurface Component
+ * Creates a realistic chromatic aberration glass effect using SVG filters.
+ * Works as a wrapper for any content.
+ */
+export declare const GlassSurface: React.FC<GlassSurfaceProps>;

package/dist/components/effects/GlassSurface/GlassSurface.js

@@ -0,0 +1,218 @@
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useId, useState, useRef, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
+
+/**
+ * Hook to detect dark mode preference
+ */
+var useDarkMode = function () {
+    var _a = useState(false), isDark = _a[0], setIsDark = _a[1];
+    useEffect(function () {
+        if (typeof window === "undefined")
+            return;
+        var mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        setIsDark(mediaQuery.matches);
+        var handler = function (e) { return setIsDark(e.matches); };
+        mediaQuery.addEventListener("change", handler);
+        return function () { return mediaQuery.removeEventListener("change", handler); };
+    }, []);
+    return isDark;
+};
+/**
+ * GlassSurface Component
+ * Creates a realistic chromatic aberration glass effect using SVG filters.
+ * Works as a wrapper for any content.
+ */
+var GlassSurface = function (_a) {
+    var children = _a.children, width = _a.width, height = _a.height, _b = _a.borderRadius, borderRadius = _b === void 0 ? 20 : _b, _c = _a.borderWidth, borderWidth = _c === void 0 ? 0.07 : _c, _d = _a.brightness, brightness = _d === void 0 ? 50 : _d, _e = _a.opacity, opacity = _e === void 0 ? 0.93 : _e, _f = _a.blur, blur = _f === void 0 ? 11 : _f, _g = _a.displace, displace = _g === void 0 ? 0.7 : _g, _h = _a.backgroundOpacity, backgroundOpacity = _h === void 0 ? 0.1 : _h, backgroundColor = _a.backgroundColor, _j = _a.saturation, saturation = _j === void 0 ? 1.8 : _j, _k = _a.distortionScale, distortionScale = _k === void 0 ? -180 : _k, _l = _a.redOffset, redOffset = _l === void 0 ? 0 : _l, _m = _a.greenOffset, greenOffset = _m === void 0 ? 10 : _m, _o = _a.blueOffset, blueOffset = _o === void 0 ? 20 : _o, _p = _a.xChannel, xChannel = _p === void 0 ? "R" : _p, _q = _a.yChannel, yChannel = _q === void 0 ? "G" : _q, _r = _a.mixBlendMode, mixBlendMode = _r === void 0 ? "difference" : _r, _s = _a.frosted, frosted = _s === void 0 ? false : _s, _t = _a.className, className = _t === void 0 ? "" : _t, _u = _a.style, style = _u === void 0 ? {} : _u;
+    var uniqueId = useId().replace(/:/g, "-");
+    var filterId = "glass-filter-".concat(uniqueId);
+    var redGradId = "red-grad-".concat(uniqueId);
+    var blueGradId = "blue-grad-".concat(uniqueId);
+    var noiseFilterId = "noise-filter-".concat(uniqueId);
+    var _v = useState(false), svgSupported = _v[0], setSvgSupported = _v[1];
+    var containerRef = useRef(null);
+    var feImageRef = useRef(null);
+    var redChannelRef = useRef(null);
+    var greenChannelRef = useRef(null);
+    var blueChannelRef = useRef(null);
+    var gaussianBlurRef = useRef(null);
+    var isDarkMode = useDarkMode();
+    /**
+     * Generates the SVG displacement map as a Data URI
+     */
+    var generateDisplacementMap = function () {
+        var _a;
+        var rect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        var actualWidth = (rect === null || rect === void 0 ? void 0 : rect.width) || 0;
+        var actualHeight = (rect === null || rect === void 0 ? void 0 : rect.height) || 0;
+        // Don't generate if size is 0
+        if (actualWidth === 0 || actualHeight === 0)
+            return "";
+        var edgeSize = Math.min(actualWidth, actualHeight) * (borderWidth * 0.5);
+        var svgContent = "\n      <svg viewBox=\"0 0 ".concat(actualWidth, " ").concat(actualHeight, "\" xmlns=\"http://www.w3.org/2000/svg\">\n        <defs>\n          <linearGradient id=\"").concat(redGradId, "\" x1=\"100%\" y1=\"0%\" x2=\"0%\" y2=\"0%\">\n            <stop offset=\"0%\" stop-color=\"#0000\"/>\n            <stop offset=\"100%\" stop-color=\"red\"/>\n          </linearGradient>\n          <linearGradient id=\"").concat(blueGradId, "\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stop-color=\"#0000\"/>\n            <stop offset=\"100%\" stop-color=\"blue\"/>\n          </linearGradient>\n        </defs>\n        <rect x=\"0\" y=\"0\" width=\"").concat(actualWidth, "\" height=\"").concat(actualHeight, "\" fill=\"black\" />\n        <rect x=\"0\" y=\"0\" width=\"").concat(actualWidth, "\" height=\"").concat(actualHeight, "\" rx=\"").concat(borderRadius, "\" fill=\"url(#").concat(redGradId, ")\" />\n        <rect x=\"0\" y=\"0\" width=\"").concat(actualWidth, "\" height=\"").concat(actualHeight, "\" rx=\"").concat(borderRadius, "\" fill=\"url(#").concat(blueGradId, ")\" style=\"mix-blend-mode: ").concat(mixBlendMode, "\" />\n        <rect x=\"").concat(edgeSize, "\" y=\"").concat(edgeSize, "\" width=\"").concat(actualWidth - edgeSize * 2, "\" height=\"").concat(actualHeight - edgeSize * 2, "\" rx=\"").concat(borderRadius, "\" fill=\"hsl(0 0% ").concat(brightness, "% / ").concat(opacity, ")\" style=\"filter:blur(").concat(blur, "px)\" />\n      </svg>\n    ");
+        return "data:image/svg+xml,".concat(encodeURIComponent(svgContent));
+    };
+    var updateDisplacementMap = function () {
+        var dataUri = generateDisplacementMap();
+        if (feImageRef.current && dataUri) {
+            feImageRef.current.setAttribute("href", dataUri);
+        }
+    };
+    // Detect SVG Filter support (backwards compatibility for Safari/Firefox)
+    var supportsSVGFilters = function () {
+        if (typeof window === "undefined" || typeof document === "undefined")
+            return false;
+        var isWebkit = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
+        var isFirefox = /Firefox/.test(navigator.userAgent);
+        if (isWebkit || isFirefox)
+            return false;
+        var div = document.createElement("div");
+        div.style.backdropFilter = "url(#".concat(filterId, ")");
+        return div.style.backdropFilter !== "";
+    };
+    var supportsBackdropFilter = function () {
+        if (typeof window === "undefined")
+            return false;
+        return CSS.supports("backdrop-filter", "blur(10px)");
+    };
+    useEffect(function () {
+        setSvgSupported(supportsSVGFilters());
+    }, []);
+    // Update filter attributes when props change
+    useEffect(function () {
+        updateDisplacementMap();
+        var scale = distortionScale;
+        if (redChannelRef.current) {
+            redChannelRef.current.setAttribute("scale", (scale + redOffset).toString());
+            redChannelRef.current.setAttribute("xChannelSelector", xChannel);
+            redChannelRef.current.setAttribute("yChannelSelector", yChannel);
+        }
+        if (greenChannelRef.current) {
+            greenChannelRef.current.setAttribute("scale", (scale + greenOffset).toString());
+            greenChannelRef.current.setAttribute("xChannelSelector", xChannel);
+            greenChannelRef.current.setAttribute("yChannelSelector", yChannel);
+        }
+        if (blueChannelRef.current) {
+            blueChannelRef.current.setAttribute("scale", (scale + blueOffset).toString());
+            blueChannelRef.current.setAttribute("xChannelSelector", xChannel);
+            blueChannelRef.current.setAttribute("yChannelSelector", yChannel);
+        }
+        if (gaussianBlurRef.current) {
+            gaussianBlurRef.current.setAttribute("stdDeviation", displace.toString());
+        }
+    }, [
+        borderRadius,
+        borderWidth,
+        brightness,
+        opacity,
+        blur,
+        displace,
+        distortionScale,
+        redOffset,
+        greenOffset,
+        blueOffset,
+        xChannel,
+        yChannel,
+        mixBlendMode,
+    ]);
+    // ResizeObserver to handle dimension changes
+    useEffect(function () {
+        if (!containerRef.current)
+            return;
+        var resizeObserver = new ResizeObserver(function () {
+            // Use requestAnimationFrame for smoother updates
+            requestAnimationFrame(updateDisplacementMap);
+        });
+        resizeObserver.observe(containerRef.current);
+        return function () {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    var getContainerStyles = function () {
+        var baseStyles = __assign(__assign({}, style), { width: typeof width === "number" ? "".concat(width, "px") : width, height: typeof height === "number" ? "".concat(height, "px") : height, borderRadius: "".concat(borderRadius, "px") });
+        var backdropFilterSupported = supportsBackdropFilter();
+        // Default blur for frosted effect
+        var frostedBlur = frosted ? "blur(12px)" : "";
+        if (svgSupported) {
+            // Determine background color: use prop if provided, otherwise auto-detect based on theme
+            var bgColor_1 = backgroundColor || (isDarkMode ? "hsl(0 0% 0%)" : "hsl(0 0% 100%)");
+            // Convert color to rgba if needed to apply opacity
+            var getBackgroundWithOpacity = function () {
+                // If backgroundOpacity is 0, return transparent
+                if (backgroundOpacity === 0)
+                    return "transparent";
+                // If color already has alpha channel (rgba, hsla), use as-is
+                if (bgColor_1.includes("rgba") || bgColor_1.includes("hsla")) {
+                    return bgColor_1;
+                }
+                // For named colors, hex, rgb, hsl - wrap in color-mix for opacity
+                return "color-mix(in srgb, ".concat(bgColor_1, ", transparent ").concat((1 - backgroundOpacity) * 100, "%)");
+            };
+            return __assign(__assign(__assign({}, baseStyles), { background: getBackgroundWithOpacity(), backdropFilter: "url(#".concat(filterId, ") ").concat(frostedBlur, " saturate(").concat(saturation, ")"), WebkitBackdropFilter: "url(#".concat(filterId, ") ").concat(frostedBlur, " saturate(").concat(saturation, ")") }), (hasCustomShadow
+                ? {}
+                : {
+                    boxShadow: isDarkMode
+                        ? "0 0 2px 1px color-mix(in oklch, white, transparent 65%) inset,\n               0 0 10px 4px color-mix(in oklch, white, transparent 85%) inset,\n               0px 4px 16px rgba(17, 17, 26, 0.05),\n               0px 8px 24px rgba(17, 17, 26, 0.05),\n               0px 16px 56px rgba(17, 17, 26, 0.05)"
+                        : "0 0 1px 1px color-mix(in oklch, white, transparent 40%) inset,\n               0 0 12px 1px color-mix(in oklch, white, transparent 70%) inset,\n               0 8px 24px -12px rgba(0, 0, 0, 0.08),\n               0 4px 12px -4px rgba(0, 0, 0, 0.03)",
+                }));
+        }
+        else {
+            // Fallback for Safari/Firefox or when SVG filters aren't supported
+            var baseBlur = "12px";
+            // Increase blur significantly for frosted mode in fallback
+            var effectiveBlur = frosted ? "20px" : baseBlur;
+            var fallbackSaturate = "1.8";
+            var fallbackBrightness = isDarkMode ? "1.2" : "1.1";
+            var filterStr = "blur(".concat(effectiveBlur, ") saturate(").concat(fallbackSaturate, ") brightness(").concat(fallbackBrightness, ")");
+            if (isDarkMode) {
+                return __assign(__assign(__assign({}, baseStyles), { background: backdropFilterSupported
+                        ? "rgba(255, 255, 255, 0.1)"
+                        : "rgba(0, 0, 0, 0.4)", backdropFilter: backdropFilterSupported ? filterStr : undefined, WebkitBackdropFilter: backdropFilterSupported ? filterStr : undefined, border: "1px solid rgba(255, 255, 255, 0.2)" }), (hasCustomShadow
+                    ? {}
+                    : {
+                        boxShadow: "inset 0 1px 0 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 0 rgba(255, 255, 255, 0.1)",
+                    }));
+            }
+            else {
+                return __assign(__assign(__assign({}, baseStyles), { background: backdropFilterSupported
+                        ? "rgba(255, 255, 255, 0.25)"
+                        : "rgba(255, 255, 255, 0.4)", backdropFilter: backdropFilterSupported ? filterStr : undefined, WebkitBackdropFilter: backdropFilterSupported ? filterStr : undefined, border: "1px solid rgba(255, 255, 255, 0.3)" }), (hasCustomShadow
+                    ? {}
+                    : {
+                        boxShadow: backdropFilterSupported
+                            ? "0 8px 32px 0 rgba(31, 38, 135, 0.2), 0 2px 16px 0 rgba(31, 38, 135, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 0 rgba(255, 255, 255, 0.2)"
+                            : "inset 0 1px 0 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 0 rgba(255, 255, 255, 0.3)",
+                    }));
+            }
+        }
+    };
+    // Check if user is providing custom shadow via className
+    var hasCustomShadow = className === null || className === void 0 ? void 0 : className.includes("shadow");
+    var focusVisibleClasses = isDarkMode
+        ? "focus-visible:outline-2 focus-visible:outline-[#0A84FF] focus-visible:outline-offset-2"
+        : "focus-visible:outline-2 focus-visible:outline-[#007AFF] focus-visible:outline-offset-2";
+    return (React__default.createElement("div", { ref: containerRef, className: cn("relative transition-opacity duration-[260ms] ease-out", focusVisibleClasses, className), style: getContainerStyles() },
+        React__default.createElement("svg", { className: "w-full h-full pointer-events-none absolute inset-0 opacity-0 -z-10", xmlns: "http://www.w3.org/2000/svg" },
+            React__default.createElement("defs", null,
+                React__default.createElement("filter", { id: filterId, colorInterpolationFilters: "sRGB", x: "0%", y: "0%", width: "100%", height: "100%" },
+                    React__default.createElement("feImage", { ref: feImageRef, x: "0", y: "0", width: "100%", height: "100%", preserveAspectRatio: "none", result: "map" }),
+                    React__default.createElement("feDisplacementMap", { ref: redChannelRef, in: "SourceGraphic", in2: "map", id: "redchannel", result: "dispRed" }),
+                    React__default.createElement("feColorMatrix", { in: "dispRed", type: "matrix", values: "1 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "red" }),
+                    React__default.createElement("feDisplacementMap", { ref: greenChannelRef, in: "SourceGraphic", in2: "map", id: "greenchannel", result: "dispGreen" }),
+                    React__default.createElement("feColorMatrix", { in: "dispGreen", type: "matrix", values: "0 0 0 0 0\n                      0 1 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "green" }),
+                    React__default.createElement("feDisplacementMap", { ref: blueChannelRef, in: "SourceGraphic", in2: "map", id: "bluechannel", result: "dispBlue" }),
+                    React__default.createElement("feColorMatrix", { in: "dispBlue", type: "matrix", values: "0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 1 0 0\n                      0 0 0 1 0", result: "blue" }),
+                    React__default.createElement("feBlend", { in: "red", in2: "green", mode: "screen", result: "rg" }),
+                    React__default.createElement("feBlend", { in: "rg", in2: "blue", mode: "screen", result: "output" }),
+                    React__default.createElement("feGaussianBlur", { ref: gaussianBlurRef, in: "output", stdDeviation: "0.7" })),
+                React__default.createElement("filter", { id: noiseFilterId, x: "0%", y: "0%", width: "100%", height: "100%" },
+                    React__default.createElement("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65", numOctaves: "3", stitchTiles: "stitch" })))),
+        React__default.createElement("div", { className: "relative z-10 rounded-[inherit]" }, children),
+        React__default.createElement("div", { className: "absolute inset-0 pointer-events-none rounded-[inherit] overflow-hidden z-20" }, frosted && (React__default.createElement("div", { className: "absolute inset-0 opacity-10 mix-blend-overlay", style: { filter: "url(#".concat(noiseFilterId, ")") } })))));
+};
+
+export { GlassSurface };

package/dist/components/effects/GlassSurface/GlassSurface.types.d.ts

@@ -0,0 +1,57 @@
+import React from "react";
+export type GlassChannel = "R" | "G" | "B";
+export type GlassMixBlendMode = "normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" | "plus-darker" | "plus-lighter";
+export interface GlassSurfaceProps {
+    /** Content to be wrapped by the glass effect */
+    children?: React.ReactNode;
+    /** Width of the component. If not provided, it will expand to fill parent or fit content. */
+    width?: number | string;
+    /** Height of the component. If not provided, it will expand to fill parent or fit content. */
+    height?: number | string;
+    /** Border radius for the glass effect in pixels */
+    borderRadius?: number;
+    /** Width of the refraction border (multiplier) */
+    borderWidth?: number;
+    /** Brightness of the inner glass area (0-100) */
+    brightness?: number;
+    /** Opacity of the inner glass area (0-1) */
+    opacity?: number;
+    /** Blur intensity for the inner glass area */
+    blur?: number;
+    /** Standard deviation for final displacement blur */
+    displace?: number;
+    /** Background opacity (for theme fallback) */
+    backgroundOpacity?: number;
+    /** Background color (CSS color value, e.g., 'white', '#fff', 'rgb(255,255,255)') */
+    backgroundColor?: string;
+    /** Saturation enhancement for the backdrop-filter */
+    saturation?: number;
+    /** Base displacement intensity for the chromatic aberration */
+    distortionScale?: number;
+    /** Red channel displacement offset */
+    redOffset?: number;
+    /** Green channel displacement offset */
+    greenOffset?: number;
+    /** Blue channel displacement offset */
+    blueOffset?: number;
+    /** SVG color channel used for X displacement */
+    xChannel?: GlassChannel;
+    /** SVG color channel used for Y displacement */
+    yChannel?: GlassChannel;
+    /** Blend mode for the internal gradient layers */
+    mixBlendMode?: GlassMixBlendMode;
+    /**
+     * Enable frosted glass effect with noise texture
+     * @default false
+     */
+    frosted?: boolean;
+    /**
+     * Opacity of the glass surface (0-1).
+     * @default 1
+     */
+    transparency?: number;
+    /** Additional CSS class names */
+    className?: string;
+    /** Inline styles for the container */
+    style?: React.CSSProperties;
+}

package/dist/components/effects/GlassSurface/index.d.ts

@@ -0,0 +1,2 @@
+export { GlassSurface } from "./GlassSurface";
+export type { GlassSurfaceProps, GlassChannel, GlassMixBlendMode, } from "./GlassSurface.types";

package/dist/components/effects/Overlay/Overlay.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { OverlayProps } from './Overlay.types';
+import React from "react";
+import type { OverlayProps } from "./Overlay.types";
 /**
  * Shared Overlay Component
  *

package/dist/components/effects/Overlay/Overlay.js

@@ -1,10 +1,12 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
 import { useOverlay } from '../../../hooks/useOverlay.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
 /**
  * Default overlay backdrop animation variants
@@ -13,11 +15,11 @@ var defaultOverlayAnimations = {
     initial: { opacity: 0 },
     animate: {
         opacity: 1,
-        transition: { duration: 0.2, ease: 'easeOut' },
+        transition: { duration: 0.2, ease: "easeOut" },
     },
     exit: {
         opacity: 0,
-        transition: { duration: 0.15, ease: 'easeIn' },
+        transition: { duration: 0.15, ease: "easeIn" },
     },
 };
 /**
@@ -30,7 +32,7 @@ var defaultContentAnimations = {
         scale: 1,
         y: 0,
         transition: {
-            type: 'spring',
+            type: "spring",
             damping: 25,
             stiffness: 300,
             delay: 0.05,
@@ -40,19 +42,19 @@ var defaultContentAnimations = {
         opacity: 0,
         scale: 0.95,
         y: 20,
-        transition: { duration: 0.2, ease: 'easeIn' },
+        transition: { duration: 0.2, ease: "easeIn" },
     },
 };
 /**
  * Position variant classes for overlay content positioning
  */
 var overlayPositionVariants = {
-    center: 'flex items-center justify-center',
-    top: 'flex items-start justify-center pt-[10vh] px-4',
-    bottom: 'flex items-end justify-center pb-[10vh] px-4',
-    left: 'flex items-center justify-start pl-6',
-    right: 'flex items-center justify-end pr-6',
-    none: '', // No positioning, content handles it
+    center: "flex items-center justify-center",
+    top: "flex items-start justify-center pt-[10vh] px-4",
+    bottom: "flex items-end justify-center pb-[10vh] px-4",
+    left: "flex items-center justify-start pl-6",
+    right: "flex items-center justify-end pr-6",
+    none: "", // No positioning, content handles it
 };
 /**
  * Shared Overlay Component
@@ -83,7 +85,7 @@ var overlayPositionVariants = {
  * ```
  */
 var Overlay = React__default.forwardRef(function (_a, ref) {
-    var isOpen = _a.isOpen, onClose = _a.onClose, _b = _a.closeOnOverlayClick, closeOnOverlayClick = _b === void 0 ? true : _b, _c = _a.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = _a.enableScrollLock, enableScrollLock = _d === void 0 ? true : _d, _e = _a.position, position = _e === void 0 ? 'center' : _e, overlayClassName = _a.overlayClassName, contentClassName = _a.contentClassName, animations = _a.animations, animationDuration = _a.animationDuration, portalTarget = _a.portalTarget, children = _a.children;
+    var isOpen = _a.isOpen, onClose = _a.onClose, _b = _a.closeOnOverlayClick, closeOnOverlayClick = _b === void 0 ? true : _b, _c = _a.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = _a.enableScrollLock, enableScrollLock = _d === void 0 ? true : _d, _e = _a.position, position = _e === void 0 ? "center" : _e, overlayClassName = _a.overlayClassName, contentClassName = _a.contentClassName, animations = _a.animations, animationDuration = _a.animationDuration, portalTarget = _a.portalTarget, children = _a.children;
     // Use overlay hook for behavior (escape key, scroll lock, click handling)
     var handleOverlayClick = useOverlay({
         isOpen: isOpen,
@@ -109,16 +111,23 @@ var Overlay = React__default.forwardRef(function (_a, ref) {
     // Determine portal target
     var target = portalTarget !== undefined
         ? portalTarget
-        : typeof document !== 'undefined'
+        : typeof document !== "undefined"
             ? document.body
             : null;
     // Don't render if no portal target available (SSR)
     if (!target) {
         return null;
     }
+    // Detect dark mode from document
+    var isDarkMode = typeof document !== "undefined" &&
+        (document.documentElement.classList.contains("dark") ||
+            document.body.classList.contains("dark") ||
+            document.querySelector(".dark") !== null);
     var content = (React__default.createElement(AnimatePresence, { mode: "wait" }, isOpen && (React__default.createElement(motion.div, { className: cn(
+        // Dark mode wrapper for portal
+        isDarkMode && "dark", 
         // Base overlay styles (backdrop with blur)
-        'fixed inset-0 bg-[var(--overlay-bg)] backdrop-blur-[var(--overlay-blur)] z-50', 
+        "fixed inset-0 bg-[var(--overlay-bg)] backdrop-blur-[var(--overlay-blur)] z-50", 
         // Position variant for content placement
         overlayPositionVariants[position], 
         // Custom overlay classes
@@ -126,6 +135,6 @@ var Overlay = React__default.forwardRef(function (_a, ref) {
         React__default.createElement(motion.div, { ref: ref, className: cn(contentClassName), variants: finalContentAnimations, initial: "initial", animate: "animate", exit: "exit", onClick: function (e) { return e.stopPropagation(); } }, children)))));
     return createPortal(content, target);
 });
-Overlay.displayName = 'Overlay';
+Overlay.displayName = "Overlay";
 
 export { Overlay };

package/dist/components/effects/SpotlightBorder/SpotlightBorder.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { SpotlightBorderProps } from "./SpotlightBorder.types";
+/**
+ * SpotlightBorder Component
+ * Adds an interactive WebGL border effect around its children.
+ * The border illuminates near the mouse cursor and supports a soft outer glow.
+ * Refactored to handle larger canvas for external glow and prevent clipping of child shadows.
+ *
+ * @example
+ * ```tsx
+ * <SpotlightBorder color="#3b82f6" borderWidth={2} className="rounded-xl">
+ *   <div className="p-6 bg-gray-900">
+ *     <h3>Premium Card</h3>
+ *   </div>
+ * </SpotlightBorder>
+ * ```
+ */
+export declare const SpotlightBorder: React.FC<SpotlightBorderProps>;