@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.32

package/dist/components/data-display/Table/TableFilter.js

@@ -11,7 +11,7 @@ import '../../forms/Select/Select.theme.js';
 import { Popover } from '../../core/Popover/Popover.js';
 import '../../core/Popover/PopoverContext.js';
 import '../../core/Popover/PopoverBody.js';
-import { FunnelIcon, XMarkIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { Funnel, X, Plus } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 
 /**
@@ -35,7 +35,11 @@ function FilterValueInput({ filter, column, filterType, onValueChange, }) {
             label: opt.label,
             value: opt.value,
         }));
-        return (jsx(Select, { value: filter.value, onChange: (value) => onValueChange(value), options: selectOptions, size: "sm", className: "flex-1 min-w-0", placeholder: "Select..." }));
+        return (jsx(Select, { 
+            // Options are SelectOption<string>, so only a string is selectable here;
+            // FilterValue is wider (number | boolean | string[]) and those states
+            // simply mean "nothing selected" for this control.
+            value: typeof filter.value === "string" ? filter.value : undefined, onChange: (value) => onValueChange(value), options: selectOptions, size: "sm", className: "flex-1 min-w-0", placeholder: "Select..." }));
     }
     // MultiSelect filter type
     if (filterType === "multiSelect" && (column === null || column === void 0 ? void 0 : column.filterOptions)) {
@@ -44,7 +48,10 @@ function FilterValueInput({ filter, column, filterType, onValueChange, }) {
             label: opt.label,
             value: opt.value,
         }));
-        return (jsx(Select, { value: filter.value, onChange: (value) => onValueChange(value), options: selectOptions, size: "sm", className: "flex-1 min-w-0", placeholder: "Select...", multiple: true }));
+        return (jsx(Select, { 
+            // `multiple` makes the value an array; FilterValue is wider than that,
+            // so narrow rather than letting a scalar reach a multi-select.
+            value: Array.isArray(filter.value) ? filter.value : [], onChange: (value) => onValueChange(value), options: selectOptions, size: "sm", className: "flex-1 min-w-0", placeholder: "Select...", multiple: true }));
     }
     // Date filter type
     if (filterType === "date") {
@@ -214,7 +221,7 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             return true;
         return f.value != null && f.value !== "";
     }).length;
-    return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(FunnelIcon, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] text-sm font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Body, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-sm uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-surface-sunken)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "and"
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "mono", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(Funnel, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] text-sm font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Body, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-sm uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-surface-sunken)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "and"
                                                 ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
                                                 : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"), onClick: () => handleSetLogic("and"), children: "AND" }), jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "or"
                                                 ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
@@ -222,8 +229,8 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
                                 const selectedColumn = getSelectedColumn(filter.columnId);
                                 const resolvedType = getResolvedFilterType(selectedColumn);
                                 const operatorOptions = getOperatorsForFilterType(resolvedType);
-                                return (jsxs("div", { className: "flex items-center gap-1.5", children: [jsx(Select, { value: filter.columnId, onChange: (value) => handleFilterColumnChange(filter.id, value), options: columnOptions, size: "sm", className: "flex-1 min-w-0" }), jsx(Select, { value: filter.operator, onChange: (value) => handleFilterOperatorChange(filter.id, value), options: operatorOptions, size: "sm", className: "flex-1 min-w-0" }), jsx(FilterValueInput, { filter: filter, column: selectedColumn, filterType: resolvedType, onValueChange: (value) => handleFilterValueChange(filter.id, value) }), jsx(Button, { color: "neutral", variant: "ghost", size: "sm", iconOnly: true, onClick: () => handleRemoveFilter(filter.id), "aria-label": "Remove filter", className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2.5 }) })] }, filter.id));
-                            }) }), jsxs("div", { className: "mt-3 flex items-center gap-4", children: [jsxs(Link, { color: "neutral", size: "sm", onClick: handleAddFilter, children: [jsx(PlusIcon, { className: "size-4" }), "Add Filter"] }), activeFilters.length > 0 && (jsx(Link, { color: "neutral", size: "sm", onClick: handleClearAll, children: "Clear All" }))] })] }) })] }));
+                                return (jsxs("div", { className: "flex items-center gap-1.5", children: [jsx(Select, { value: filter.columnId, onChange: (value) => handleFilterColumnChange(filter.id, value), options: columnOptions, size: "sm", className: "flex-1 min-w-0" }), jsx(Select, { value: filter.operator, onChange: (value) => handleFilterOperatorChange(filter.id, value), options: operatorOptions, size: "sm", className: "flex-1 min-w-0" }), jsx(FilterValueInput, { filter: filter, column: selectedColumn, filterType: resolvedType, onValueChange: (value) => handleFilterValueChange(filter.id, value) }), jsx(Button, { color: "mono", variant: "ghost", size: "sm", iconOnly: true, onClick: () => handleRemoveFilter(filter.id), "aria-label": "Remove filter", className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", children: jsx(X, { className: "size-4", weight: "bold" }) })] }, filter.id));
+                            }) }), jsxs("div", { className: "mt-3 flex items-center gap-4", children: [jsxs(Link, { color: "mono", size: "sm", onClick: handleAddFilter, children: [jsx(Plus, { className: "size-4" }), "Add Filter"] }), activeFilters.length > 0 && (jsx(Link, { color: "mono", size: "sm", onClick: handleClearAll, children: "Clear All" }))] })] }) })] }));
 }
 
 export { TableFilter };

package/dist/components/data-display/Table/TableHeader.js

@@ -4,7 +4,7 @@ import { useCallback } from 'react';
 import { TableCell } from './TableCell.js';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { getRowId, UTILITY_COLUMN_WIDTH, UTILITY_COLUMN_ID } from './Table.utils.js';
-import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/16/solid';
+import { CaretUp, CaretDown } from '@phosphor-icons/react';
 
 function TableHeaderComponent({ columns, sortConfig = [], onSortChange, freezeHeader, freezeFirstColumn, freezeLastColumn, expandable, expandedRowRender, selectable, selectionType, selectedRows = [], onSelectionChange, theme, data = [], rowKey, }) {
     const handleSort = useCallback((columnId) => {
@@ -51,8 +51,8 @@ function TableHeaderComponent({ columns, sortConfig = [], onSortChange, freezeHe
                     const currentSort = sortConfig.find(sort => sort.columnId === column.id);
                     const isSortable = column.sortable && onSortChange;
                     return (jsx(TableCell, { column: column, row: null, rowId: "header", isHeader: true, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, sortDirection: currentSort === null || currentSort === void 0 ? void 0 : currentSort.direction, theme: theme, children: isSortable ? (jsxs("button", { onClick: () => handleSort(column.id), className: "flex items-center gap-1 w-full text-left hover:text-[var(--color-primary)] transition-colors", "aria-label": `Sort by ${typeof column.header === 'string' ? column.header : column.id}`, children: [column.header, currentSort && (jsx("span", { className: "text-sm", children: currentSort.direction === 'asc'
-                                        ? jsx(ChevronUpIcon, { className: "size-3.5" })
-                                        : jsx(ChevronDownIcon, { className: "size-3.5" }) }))] })) : (column.header) }, column.id));
+                                        ? jsx(CaretUp, { className: "size-3.5" })
+                                        : jsx(CaretDown, { className: "size-3.5" }) }))] })) : (column.header) }, column.id));
                 })] }) }));
 }
 const TableHeader = TableHeaderComponent;

package/dist/components/data-display/Table/TableRow.js

@@ -6,7 +6,7 @@ import { TableCell } from './TableCell.js';
 import { Button } from '../../core/Button/Button.js';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { Radio } from '../../forms/Radio/Radio.js';
-import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { Minus, Plus } from '@phosphor-icons/react';
 import { UTILITY_COLUMN_WIDTH, UTILITY_COLUMN_ID } from './Table.utils.js';
 import { cn } from '../../../utils/cn.js';
 import { tableExpandAnimations, tableExpandContentAnimations } from './Table.animations.js';
@@ -31,7 +31,7 @@ function TableRowComponent({ row, rowId, columns, onRowClick, expandedRowRender,
                             accessor: () => "",
                             width: UTILITY_COLUMN_WIDTH,
                         }, row: row, rowId: rowId, isSelected: isSelected, theme: theme, children: jsxs("div", { className: "flex items-center gap-2", children: [selectable &&
-                                    (selectionType === "checkbox" ? (jsx(Checkbox, { id: `table-checkbox-${rowId}`, name: `table-selection-${rowId}`, value: String(rowId), checked: isSelected, onChange: (checked) => onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked), onClick: (e) => e.stopPropagation(), "aria-label": "Select row" })) : (jsx("div", { onClick: (e) => e.stopPropagation(), children: jsx(Radio, { id: `table-radio-${rowId}`, name: "table-selection", value: String(rowId), checked: isSelected, onChange: (checked) => onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked), "aria-label": "Select row" }) }))), expandedRowRender && (jsx(Button, { color: "neutral", variant: "outline", size: "sm", iconOnly: true, onClick: handleExpandClick, "aria-label": isExpanded ? "Collapse row" : "Expand row", children: isExpanded ? (jsx(MinusIcon, { className: "size-4", strokeWidth: 2 })) : (jsx(PlusIcon, { className: "size-4", strokeWidth: 2 })) }))] }) })), columns.map((column, index) => (jsx(TableCell, { column: column, row: row, rowId: rowId, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, isSelected: isSelected, theme: theme }, column.id)))] }), jsx(AnimatePresence, { initial: false, children: isExpanded && expandedRowRender && (jsx(motion.tr, { initial: "collapsed", animate: "expanded", exit: "collapsed", children: jsx("td", { colSpan: colSpan, className: "p-0 border-b border-[var(--color-border)] dark:border-[var(--color-neutral-700)]", children: jsx(motion.div, { variants: tableExpandAnimations, style: { overflow: "hidden" }, children: jsx(motion.div, { variants: tableExpandContentAnimations, children: expandedRowRender(row) }) }) }) }, `${rowId}-expanded`)) })] }));
+                                    (selectionType === "checkbox" ? (jsx(Checkbox, { id: `table-checkbox-${rowId}`, name: `table-selection-${rowId}`, value: String(rowId), checked: isSelected, onChange: (checked) => onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked), onClick: (e) => e.stopPropagation(), "aria-label": "Select row" })) : (jsx("div", { onClick: (e) => e.stopPropagation(), children: jsx(Radio, { id: `table-radio-${rowId}`, name: "table-selection", value: String(rowId), checked: isSelected, onChange: (checked) => onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked), "aria-label": "Select row" }) }))), expandedRowRender && (jsx(Button, { color: "mono", variant: "ghost", size: "sm", iconOnly: true, className: "size-6 min-h-0 p-1", onClick: handleExpandClick, "aria-label": isExpanded ? "Collapse row" : "Expand row", children: isExpanded ? (jsx(Minus, { className: "size-4", weight: "bold" })) : (jsx(Plus, { className: "size-4", weight: "bold" })) }))] }) })), columns.map((column, index) => (jsx(TableCell, { column: column, row: row, rowId: rowId, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, isSelected: isSelected, theme: theme }, column.id)))] }), jsx(AnimatePresence, { initial: false, children: isExpanded && expandedRowRender && (jsx(motion.tr, { initial: "collapsed", animate: "expanded", exit: "collapsed", children: jsx("td", { colSpan: colSpan, className: "!p-0 border-b border-[var(--color-border)] dark:border-[var(--color-mono-700)]", children: jsx(motion.div, { variants: tableExpandAnimations, style: { overflow: "hidden" }, children: jsx(motion.div, { variants: tableExpandContentAnimations, children: expandedRowRender(row) }) }) }) }, `${rowId}-expanded`)) })] }));
 }
 TableRowComponent.displayName = "TableRow";
 const TableRow = React__default.memo(TableRowComponent);

package/dist/components/data-display/Table/TableSelectionHeader.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import { X } from '@phosphor-icons/react';
 import { Button } from '../../core/Button/Button.js';
-import 'react';
 import { Link } from '../../core/Link/Link.js';
 import { cn } from '../../../utils/cn.js';
+import 'react';
 
 /**
  * Selection header that appears when rows are selected
@@ -16,8 +16,8 @@ const TableSelectionHeader = ({ selectedCount, totalCount, selectedRows, bulkAct
     return (jsxs("div", { className: cn("flex items-center justify-between px-3 py-1 rounded-lg shadow-xl bg-[var(--color-surface-raised)] z-10", className), children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: "text-[var(--color-text-muted)] text-base border-r border-[var(--color-border)] pr-3", children: selectedCount === totalCount
                             ? `All ${selectedCount} selected`
                             : `${selectedCount} selected` }), bulkActions.length > 0 && (jsx("div", { className: "flex items-center gap-2", children: bulkActions.map((action) => {
-                            return (jsx(Button, { color: "neutral", variant: "filled", onClick: () => action.onClick(selectedRows), className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", size: "sm", children: action.label }, action.id));
-                        }) }))] }), jsxs(Link, { color: "primary", onClick: onClearSelection, "aria-label": "Clear selection", children: [jsx(XMarkIcon, { className: "size-4" }), "Clear"] })] }));
+                            return (jsx(Button, { color: "mono", variant: "filled", onClick: () => action.onClick(selectedRows), className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", size: "sm", children: action.label }, action.id));
+                        }) }))] }), jsxs(Link, { color: "primary", onClick: onClearSelection, "aria-label": "Clear selection", children: [jsx(X, { className: "size-4" }), "Clear"] })] }));
 };
 
 export { TableSelectionHeader };

package/dist/components/data-display/Timeline/Timeline.theme.js

@@ -18,7 +18,7 @@ const timelineTheme = {
     // Completed connector color (overrides the base connector background)
     connectorCompletedStyle: "bg-[var(--color-success)]",
     // Marker base styles (shared across statuses)
-    markerStyle: "relative z-10 flex items-center justify-center shrink-0 rounded-full border-2 transition-colors duration-200 ring-4 ring-[var(--color-surface)] backdrop-blur-sm",
+    markerStyle: "relative z-10 flex items-center justify-center shrink-0 rounded-full border-2 transition-colors duration-[var(--motion-duration-base)] ring-4 ring-[var(--color-surface)] backdrop-blur-sm",
     // Marker status-specific styles
     markerStatuses: {
         completed: "size-8 bg-[var(--color-success)] border-[var(--color-success)] text-[var(--color-success-contrast)]",

package/dist/components/data-display/Timeline/TimelineMarker.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { useReducedMotion, motion } from 'motion/react';
-import { CheckIcon } from '@heroicons/react/24/solid';
+import { Check } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useTimelineContext } from './TimelineContext.js';
 import { useTimelineItemContext } from './TimelineItem.js';
@@ -24,7 +24,7 @@ const TimelineMarker = React__default.forwardRef(({ icon, className, ...props },
         if (icon)
             return icon;
         if (status === "completed") {
-            return jsx(CheckIcon, { className: "w-4 h-4" });
+            return jsx(Check, { className: "w-4 h-4" });
         }
         if (status === "active") {
             return (jsx("span", { className: "w-2 h-2 rounded-full bg-[var(--color-primary)]" }));

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

@@ -27,7 +27,7 @@ export declare const CustomCursorProvider: React.ForwardRefExoticComponent<Omit<
  * @example
  * ```tsx
  * <CustomCursor size="md" color="primary" variant="glass">
- *   <PaperAirplaneIcon />
+ *   <PaperPlaneTilt />
  * </CustomCursor>
  * ```
  */

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

@@ -2,7 +2,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useMotionValue, AnimatePresence, motion, useReducedMotion, useSpring } from 'motion/react';
-import { PaperAirplaneIcon } from '@heroicons/react/20/solid';
+import { PaperPlaneTilt } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { Avatar } from '../../core/Avatar/Avatar.js';
 import { customCursorVariants, reducedMotionSpringConfig, defaultSpringConfig } from './CustomCursor.animations.js';
@@ -122,7 +122,7 @@ CustomCursorProvider.displayName = "CustomCursorProvider";
  * @example
  * ```tsx
  * <CustomCursor size="md" color="primary" variant="glass">
- *   <PaperAirplaneIcon />
+ *   <PaperPlaneTilt />
  * </CustomCursor>
  * ```
  */
@@ -150,7 +150,7 @@ const CustomCursor = React.forwardRef(({ children, size = "md", color = "primary
         y.set(cursorPos.y);
     }, [cursorPos, x, y]);
     // Default content based on shape
-    const defaultContent = shape === "arrow" ? (jsx(PaperAirplaneIcon, { className: "w-full h-full rotate-180" })) : (jsx("div", { className: "w-full h-full" }));
+    const defaultContent = shape === "arrow" ? (jsx(PaperPlaneTilt, { className: "w-full h-full rotate-180" })) : (jsx("div", { className: "w-full h-full" }));
     return (jsx(AnimatePresence, { children: isActive && (jsx(motion.div, { 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: { top: y, left: x, ...style }, variants: customCursorVariants, initial: "initial", animate: "animate", exit: "exit", role: "presentation", "aria-hidden": "true", ...props, children: children || defaultContent })) }));
 });
 CustomCursor.displayName = "CustomCursor";

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

@@ -4,13 +4,13 @@
  */
 const customCursorTheme = {
     baseStyle: "pointer-events-none z-[9999] absolute transform-[translate(-50%,-50%)]",
-    cursorStyle: "transition-transform duration-150",
+    cursorStyle: "transition-transform duration-[var(--motion-duration-fast)]",
     cursorFollowVariants: {
-        default: "rounded-[var(--radius-base)] bg-white dark:bg-[var(--color-background-secondary)] shadow-lg border border-[var(--color-border)] px-3 py-2 text-sm text-[var(--color-text-primary)]",
+        default: "rounded-[var(--radius-base)] bg-white dark:bg-[var(--color-surface)] shadow-lg border border-[var(--color-border)] px-3 py-2 text-sm text-[var(--color-text-primary)]",
         user: "flex items-center gap-2 rounded-full pl-1 pr-3 py-1 shadow-xl",
     },
     cursorFollowColors: {
-        neutral: "bg-[var(--color-background-secondary)]",
+        mono: "bg-[var(--color-surface)]",
         dark: "bg-[var(--color-text-primary)]",
         primary: "bg-[var(--color-primary)]",
         success: "bg-[var(--color-success)]",
@@ -23,7 +23,7 @@ const customCursorTheme = {
         lg: "w-10 h-10",
     },
     colors: {
-        neutral: "text-[var(--color-background-secondary)]",
+        mono: "text-[var(--color-surface)]",
         dark: "text-[var(--color-text-primary)]",
         primary: "text-[var(--color-primary)]",
         success: "text-[var(--color-success)]",

package/dist/components/effects/DotPattern/DotPattern.js

@@ -12,6 +12,12 @@ function buildMaskImage(direction, fadeSize) {
     if (direction === "radial") {
         return `radial-gradient(ellipse at center, black ${100 - stop}%, transparent 100%)`;
     }
+    if (direction === "center") {
+        // Inverse of "radial": dots fade OUT in the center and stay solid toward
+        // the edges (a vignette that keeps the content area behind it clear).
+        // Larger fadeSize = larger clear zone in the middle.
+        return `radial-gradient(ellipse at center, transparent ${stop}%, black 100%)`;
+    }
     const directionMap = {
         top: "to top",
         bottom: "to bottom",

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

@@ -1,6 +1,6 @@
 import React from "react";
 /** Direction for the fade gradient mask */
-export type DotPatternFadeDirection = "radial" | "top" | "bottom" | "left" | "right";
+export type DotPatternFadeDirection = "radial" | "center" | "top" | "bottom" | "left" | "right";
 export interface DotPatternProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Distance between dots in pixels (center to center).
@@ -25,7 +25,9 @@ export interface DotPatternProps extends React.HTMLAttributes<HTMLDivElement> {
     fade?: boolean;
     /**
      * Direction of the fade gradient.
-     * - "radial" fades from center outward
+     * - "radial" fades the edges out (solid center, transparent edges)
+     * - "center" fades the center out (transparent center, solid edges — a
+     *   vignette that keeps content-area behind it clear)
      * - "top" | "bottom" | "left" | "right" fades toward that edge
      * @default "radial"
      */

package/dist/components/effects/MeshGradient/MeshGradient.utils.d.ts

@@ -78,6 +78,6 @@ export declare const generateMarble: (seed: string, colors: string[], count: num
  * mis-reads dark tiles like a teal base with a cream accent.) Pass `threshold`
  * to bias toward light text on more mid-tones (see `contrastTone`). Map the
  * result to the theme-stable neutral tokens at the call site, e.g.
- * `tone === "dark" ? "var(--color-neutral-950)" : "var(--color-neutral-50)"`.
+ * `tone === "dark" ? "var(--color-mono-950)" : "var(--color-mono-50)"`.
  */
 export declare const getMeshTextTone: (seed: string, colors: string[], count: number, threshold?: number) => ContrastTone;

package/dist/components/effects/MeshGradient/MeshGradient.utils.js

@@ -102,7 +102,7 @@ const generateMarble = (seed, colors, count) => {
  * mis-reads dark tiles like a teal base with a cream accent.) Pass `threshold`
  * to bias toward light text on more mid-tones (see `contrastTone`). Map the
  * result to the theme-stable neutral tokens at the call site, e.g.
- * `tone === "dark" ? "var(--color-neutral-950)" : "var(--color-neutral-50)"`.
+ * `tone === "dark" ? "var(--color-mono-950)" : "var(--color-mono-50)"`.
  */
 const getMeshTextTone = (seed, colors, count, threshold) => {
     const { base } = generateMarble(seed, colors, count);

package/dist/components/effects/Neumorphic/InsetCircleButton.js

@@ -5,7 +5,7 @@ import { cn } from '../../../utils/cn.js';
 import 'react';
 
 function InsetCircleButton({ children, size = 44, className, classNameDisc, classNameHover, onClick, }) {
-    return (jsx("div", { className: cn("neu-circle-groove group shrink-0 cursor-pointer bg-neutral-200/80 dark:bg-neutral-900", className), style: { width: size, height: size }, onClick: onClick, children: jsxs(motion.div, { className: cn("neu-circle-disc bg-linear-to-br from-neutral-100 to-neutral-300 dark:from-neutral-700 dark:to-neutral-900", classNameDisc), whileHover: { scale: 1 }, whileTap: { scale: 0.975 }, transition: { type: "spring", stiffness: 200, damping: 20 }, children: [jsx("div", { className: cn("absolute inset-0 rounded-full bg-linear-to-br from-neutral-300 to-neutral-200 dark:from-neutral-900 dark:to-neutral-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300", classNameHover) }), jsx("div", { className: "relative z-2", children: children })] }) }));
+    return (jsx("div", { className: cn("neu-circle-groove group shrink-0 cursor-pointer bg-neutral-200/80 dark:bg-neutral-900", className), style: { width: size, height: size }, onClick: onClick, children: jsxs(motion.div, { className: cn("neu-circle-disc bg-linear-to-br from-neutral-100 to-neutral-300 dark:from-neutral-700 dark:to-neutral-900", classNameDisc), whileHover: { scale: 1 }, whileTap: { scale: 0.975 }, transition: { type: "spring", stiffness: 200, damping: 20 }, children: [jsx("div", { className: cn("absolute inset-0 rounded-full bg-linear-to-br from-neutral-300 to-neutral-200 dark:from-neutral-900 dark:to-neutral-700 opacity-0 group-hover:opacity-100 transition-opacity duration-[var(--motion-duration-slow)]", classNameHover) }), jsx("div", { className: "relative z-2", children: children })] }) }));
 }
 
 export { InsetCircleButton };

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

@@ -157,15 +157,19 @@ const Overlay = React__default.forwardRef(({ isOpen, onClose, closeOnOverlayClic
                 unlockScroll();
                 hasLockedScroll.current = false;
             }
-        }, children: isOpen && (jsxs(motion.div, { className: cn(isDarkMode && "dark", overlayTheme.backdrop, overlayPositionVariants[position], overlayClassName), onClick: handleOverlayClick, variants: finalOverlayAnimations, initial: "initial", animate: "animate", exit: "exit", transition: instantTransition, children: [jsx("div", { className: overlayTheme.pattern, style: {
+        }, children: isOpen && (jsxs(motion.div, { className: cn(overlayTheme.backdrop, overlayPositionVariants[position], overlayClassName), onClick: handleOverlayClick, variants: finalOverlayAnimations, initial: "initial", animate: "animate", exit: "exit", transition: instantTransition, children: [jsx("div", { className: overlayTheme.pattern, style: {
                         backgroundImage: "radial-gradient(circle, rgba(250,250,250,0.08) 1.5px, transparent 1.5px)",
                         backgroundSize: "30px 30px",
                         maskImage: "radial-gradient(ellipse at center, black 0%, transparent 70%)",
                         WebkitMaskImage: "radial-gradient(ellipse at center, black 0%, transparent 70%)",
-                    } }), jsx(motion.div, { ref: mergedRef, className: cn(overlayTheme.content, contentClassName), style: contentStyle, variants: finalContentAnimations, initial: "initial", animate: "animate", exit: "exit", transition: instantTransition, onClick: (e) => e.stopPropagation(), ...(role ? { role } : {}), ...(ariaModal ? { "aria-modal": true } : {}), ...(ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : {}), ...(ariaDescribedBy
+                    } }), jsx(motion.div, { ref: mergedRef, className: cn(overlayTheme.content, contentClassName), style: contentStyle, variants: finalContentAnimations, 
+                    // Inherit the parent's variant label so backdrop and panel form one
+                    // coordinated animation tree. Explicit controls here would opt the
+                    // panel out of the parent's enter/exit orchestration.
+                    transition: instantTransition, onClick: (e) => e.stopPropagation(), ...(role ? { role } : {}), ...(ariaModal ? { "aria-modal": true } : {}), ...(ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : {}), ...(ariaDescribedBy
                         ? { "aria-describedby": ariaDescribedBy }
                         : {}), children: children })] })) }));
-    return createPortal(content, target);
+    return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: content }), target);
 });
 Overlay.displayName = "Overlay";
 

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

@@ -1,21 +1,13 @@
 export { CustomCursorProvider, CustomCursor, CustomCursorFollow, useCustomCursor } from "./CustomCursor";
 export type { CustomCursorProps, CustomCursorProviderProps, CustomCursorFollowProps, CustomCursorContextType, CustomCursorSize, CustomCursorColor, CustomCursorVariant, CustomCursorShape, CustomCursorTheme, CustomCursorThemeOverrides, } from "./CustomCursor";
-export { GlassEffect } from "./GlassEffect";
-export type { GlassEffectProps, BlendMode } from "./GlassEffect";
 export { Overlay } from "./Overlay";
 export type { OverlayProps, OverlayPosition, OverlayAnimations, } from "./Overlay";
-export { GlassSurface } from "./GlassSurface";
-export type { GlassSurfaceProps, GlassChannel, GlassMixBlendMode, } from "./GlassSurface";
 export { Animated } from "./Animated";
 export type { AnimatedGroupProps, AnimatedItemProps, AnimationPreset, AnimatedElement, } from "./Animated";
 export { ProgressiveBlur } from "./ProgressiveBlur";
 export type { ProgressiveBlurProps, ProgressiveBlurPosition, ProgressiveBlurThemeOverrides, } from "./ProgressiveBlur";
 export { Aurora } from "./Aurora";
 export type { AuroraProps } from "./Aurora";
-export { MagneticElement } from "./MagneticElement";
-export type { MagneticElementProps } from "./MagneticElement";
-export { GridPattern } from "./GridPattern";
-export type { GridPatternProps, GridPatternFadeDirection, } from "./GridPattern";
 export { DotPattern } from "./DotPattern";
 export type { DotPatternProps, DotPatternFadeDirection, } from "./DotPattern";
 export { StripePattern } from "./StripePattern";
@@ -45,35 +37,11 @@ export { Dithering } from "./Dithering";
 export type { DitheringProps, DitheringShape, DitheringType } from "./Dithering";
 export { GradientMesh } from "./GradientMesh";
 export type { GradientMeshProps } from "./GradientMesh";
-export { StaticGradientMesh } from "./StaticGradientMesh";
-export type { StaticGradientMeshProps } from "./StaticGradientMesh";
 export { StaticRadialGradient } from "./StaticRadialGradient";
 export type { StaticRadialGradientProps } from "./StaticRadialGradient";
-export { Metaballs } from "./Metaballs";
-export type { MetaballsProps } from "./Metaballs";
-export { ColorPanels } from "./ColorPanels";
-export type { ColorPanelsProps } from "./ColorPanels";
-export { SmokeRing } from "./SmokeRing";
-export type { SmokeRingProps } from "./SmokeRing";
-export { GodRays } from "./GodRays";
-export type { GodRaysProps } from "./GodRays";
 export { GrainGradient } from "./GrainGradient";
 export type { GrainGradientProps, GrainGradientShape } from "./GrainGradient";
-export { PulsingBorder } from "./PulsingBorder";
-export type { PulsingBorderProps } from "./PulsingBorder";
 export { LiquidMetal } from "./LiquidMetal";
 export type { LiquidMetalProps, LiquidMetalShape } from "./LiquidMetal";
 export { GemSmoke } from "./GemSmoke";
 export type { GemSmokeProps, GemSmokeShape } from "./GemSmoke";
-export { Water } from "./Water";
-export type { WaterProps } from "./Water";
-export { ImageDithering } from "./ImageDithering";
-export type { ImageDitheringProps, ImageDitheringType } from "./ImageDithering";
-export { PaperTexture } from "./PaperTexture";
-export type { PaperTextureProps } from "./PaperTexture";
-export { FlutedGlass } from "./FlutedGlass";
-export type { FlutedGlassProps, FlutedGlassShape, FlutedGlassDistortionShape, } from "./FlutedGlass";
-export { HalftoneDots } from "./HalftoneDots";
-export type { HalftoneDotsProps, HalftoneDotsType, HalftoneDotsGrid, } from "./HalftoneDots";
-export { HalftoneCmyk } from "./HalftoneCmyk";
-export type { HalftoneCmykProps } from "./HalftoneCmyk";

package/dist/components/effects/index.js

@@ -1,12 +1,8 @@
 export { CustomCursor, CustomCursorFollow, CustomCursorProvider, useCustomCursor } from './CustomCursor/CustomCursor.js';
-export { GlassEffect } from './GlassEffect/GlassEffect.js';
 export { Overlay } from './Overlay/Overlay.js';
-export { GlassSurface } from './GlassSurface/GlassSurface.js';
 export { Animated } from './Animated/Animated.js';
 export { ProgressiveBlur } from './ProgressiveBlur/ProgressiveBlur.js';
 export { Aurora } from './Aurora/Aurora.js';
-export { MagneticElement } from './MagneticElement/MagneticElement.js';
-export { GridPattern } from './GridPattern/GridPattern.js';
 export { DotPattern } from './DotPattern/DotPattern.js';
 export { StripePattern } from './StripePattern/StripePattern.js';
 export { NoiseOverlay } from './NoiseOverlay/NoiseOverlay.js';
@@ -23,19 +19,7 @@ export { DEFAULT_MESH_COLORS, MESH_PALETTES, getMeshTextTone, pickPalette } from
 export { Shimmer } from './Shimmer/Shimmer.js';
 export { Dithering } from './Dithering/Dithering.js';
 export { GradientMesh } from './GradientMesh/GradientMesh.js';
-export { StaticGradientMesh } from './StaticGradientMesh/StaticGradientMesh.js';
 export { StaticRadialGradient } from './StaticRadialGradient/StaticRadialGradient.js';
-export { Metaballs } from './Metaballs/Metaballs.js';
-export { ColorPanels } from './ColorPanels/ColorPanels.js';
-export { SmokeRing } from './SmokeRing/SmokeRing.js';
-export { GodRays } from './GodRays/GodRays.js';
 export { GrainGradient } from './GrainGradient/GrainGradient.js';
-export { PulsingBorder } from './PulsingBorder/PulsingBorder.js';
 export { LiquidMetal } from './LiquidMetal/LiquidMetal.js';
 export { GemSmoke } from './GemSmoke/GemSmoke.js';
-export { Water } from './Water/Water.js';
-export { ImageDithering } from './ImageDithering/ImageDithering.js';
-export { PaperTexture } from './PaperTexture/PaperTexture.js';
-export { FlutedGlass } from './FlutedGlass/FlutedGlass.js';
-export { HalftoneDots } from './HalftoneDots/HalftoneDots.js';
-export { HalftoneCmyk } from './HalftoneCmyk/HalftoneCmyk.js';

package/dist/components/effects/shared/ShaderCanvas/ShaderCanvas.d.ts

@@ -4,8 +4,6 @@ import type { ShaderCanvasProps } from "./ShaderCanvas.types";
  * Minimal raw WebGL2 canvas renderer for fullscreen fragment shaders.
  * - Built-in uniforms: iTime (float), iResolution (vec2)
  * - Custom uniforms read from `uniformsRef` each frame (no stale closures)
- * - Optional sampler2D uniforms read from `texturesRef` (image loading,
- *   texture upload, mipmaps, transparent-pixel placeholder while unset/loading)
  * - ResizeObserver for responsive canvas sizing
  * - rAF animation loop, paused while the tab is hidden, with cleanup on unmount
  * - Graceful degradation: renders nothing if WebGL2 unavailable

package/dist/components/effects/shared/ShaderCanvas/ShaderCanvas.js

@@ -11,13 +11,11 @@ void main() {
  * Minimal raw WebGL2 canvas renderer for fullscreen fragment shaders.
  * - Built-in uniforms: iTime (float), iResolution (vec2)
  * - Custom uniforms read from `uniformsRef` each frame (no stale closures)
- * - Optional sampler2D uniforms read from `texturesRef` (image loading,
- *   texture upload, mipmaps, transparent-pixel placeholder while unset/loading)
  * - ResizeObserver for responsive canvas sizing
  * - rAF animation loop, paused while the tab is hidden, with cleanup on unmount
  * - Graceful degradation: renders nothing if WebGL2 unavailable
  */
-const ShaderCanvas = ({ fragmentShader, uniformsRef, texturesRef, onTextureLoad, maxDpr = 2, className, style, }) => {
+const ShaderCanvas = ({ fragmentShader, uniformsRef, maxDpr = 2, className, style, }) => {
     const canvasRef = useRef(null);
     useEffect(() => {
         const canvas = canvasRef.current;
@@ -83,81 +81,6 @@ const ShaderCanvas = ({ fragmentShader, uniformsRef, texturesRef, onTextureLoad,
             }
             return (_a = customLocs.get(name)) !== null && _a !== void 0 ? _a : null;
         };
-        // ── Texture uniforms ───────────────────────────────────────────────
-        const textureEntries = new Map();
-        let nextTextureUnit = 0;
-        // Operates on whatever texture is currently bound to TEXTURE_2D — every
-        // call site binds the target texture immediately before calling this.
-        const configureTexture = () => {
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        };
-        const createPlaceholderTexture = () => {
-            const texture = gl.createTexture();
-            gl.bindTexture(gl.TEXTURE_2D, texture);
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));
-            configureTexture();
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-            return texture;
-        };
-        const uploadImage = (entry, img, name) => {
-            if (hasBeenDisposed)
-                return;
-            gl.bindTexture(gl.TEXTURE_2D, entry.texture);
-            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
-            gl.generateMipmap(gl.TEXTURE_2D);
-            configureTexture();
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-            const naturalWidth = img.naturalWidth || img.width;
-            const naturalHeight = img.naturalHeight || img.height;
-            if (naturalWidth > 0 && naturalHeight > 0) {
-                onTextureLoad === null || onTextureLoad === void 0 ? void 0 : onTextureLoad(name, naturalWidth / naturalHeight);
-            }
-        };
-        const loadTexture = (entry, source, name) => {
-            if (typeof source === "string") {
-                const img = new Image();
-                img.crossOrigin = "anonymous";
-                img.onload = () => uploadImage(entry, img, name);
-                img.src = source;
-            }
-            else if (source.complete && source.naturalWidth > 0) {
-                uploadImage(entry, source, name);
-            }
-            else {
-                source.addEventListener("load", () => uploadImage(entry, source, name), {
-                    once: true,
-                });
-            }
-        };
-        const syncTextures = () => {
-            const sources = texturesRef === null || texturesRef === void 0 ? void 0 : texturesRef.current;
-            if (!sources)
-                return;
-            for (const name in sources) {
-                let entry = textureEntries.get(name);
-                if (!entry) {
-                    entry = {
-                        texture: createPlaceholderTexture(),
-                        sourceKey: undefined,
-                        unit: nextTextureUnit++,
-                    };
-                    textureEntries.set(name, entry);
-                }
-                const source = sources[name];
-                if (source && source !== entry.sourceKey) {
-                    entry.sourceKey = source;
-                    loadTexture(entry, source, name);
-                }
-                else if (!source) {
-                    entry.sourceKey = undefined;
-                }
-            }
-        };
         // ── Resize handling ────────────────────────────────────────────────
         const dpr = Math.min(window.devicePixelRatio || 1, maxDpr);
         let width = 0;
@@ -181,11 +104,9 @@ const ShaderCanvas = ({ fragmentShader, uniformsRef, texturesRef, onTextureLoad,
         gl.enable(gl.BLEND);
         gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
         let rafId = 0;
-        let hasBeenDisposed = false;
         const startTime = performance.now();
         const frame = () => {
             rafId = requestAnimationFrame(frame);
-            syncTextures();
             const t = (performance.now() - startTime) / 1000;
             gl.uniform1f(uTime, t);
             gl.uniform2f(uRes, width, height);
@@ -208,15 +129,6 @@ const ShaderCanvas = ({ fragmentShader, uniformsRef, texturesRef, onTextureLoad,
                         gl.uniform4f(loc, val[0], val[1], val[2], val[3]);
                 }
             }
-            // Bind texture uniforms
-            for (const [name, entry] of textureEntries) {
-                const loc = getCustomLoc(name);
-                if (!loc)
-                    continue;
-                gl.activeTexture(gl.TEXTURE0 + entry.unit);
-                gl.bindTexture(gl.TEXTURE_2D, entry.texture);
-                gl.uniform1i(loc, entry.unit);
-            }
             gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
         };
         const handleVisibilityChange = () => {
@@ -233,13 +145,9 @@ const ShaderCanvas = ({ fragmentShader, uniformsRef, texturesRef, onTextureLoad,
         }
         document.addEventListener("visibilitychange", handleVisibilityChange);
         return () => {
-            hasBeenDisposed = true;
             document.removeEventListener("visibilitychange", handleVisibilityChange);
             cancelAnimationFrame(rafId);
             observer.disconnect();
-            for (const entry of textureEntries.values()) {
-                gl.deleteTexture(entry.texture);
-            }
             gl.deleteProgram(program);
             gl.deleteShader(vs);
             gl.deleteShader(fs);

package/dist/components/effects/shared/ShaderCanvas/ShaderCanvas.types.d.ts

@@ -1,17 +1,7 @@
 import type React from "react";
-/** A texture source: a URL to fetch, or an already-available image element. */
-export type ShaderTextureSource = string | HTMLImageElement;
 export interface ShaderCanvasProps {
     fragmentShader: string;
     uniformsRef: React.MutableRefObject<Record<string, number | number[]>>;
-    /**
-     * Optional sampler2D uniforms, keyed by GLSL uniform name (e.g. "u_image").
-     * A key with an `undefined` value binds a 1x1 transparent placeholder so the
-     * shader never samples garbage while an image is loading or unset.
-     */
-    texturesRef?: React.MutableRefObject<Record<string, ShaderTextureSource | undefined>>;
-    /** Fires once a texture finishes loading, with its natural aspect ratio (width / height). */
-    onTextureLoad?: (name: string, aspectRatio: number) => void;
     maxDpr?: number;
     className?: string;
     style?: React.CSSProperties;

package/dist/components/effects/shared/ShaderCanvas/index.d.ts

@@ -1,2 +1,2 @@
 export { ShaderCanvas } from "./ShaderCanvas";
-export type { ShaderCanvasProps, ShaderTextureSource } from "./ShaderCanvas.types";
+export type { ShaderCanvasProps } from "./ShaderCanvas.types";

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

@@ -1,7 +1,5 @@
 export { ShaderCanvas } from "./ShaderCanvas";
-export type { ShaderCanvasProps, ShaderTextureSource } from "./ShaderCanvas";
+export type { ShaderCanvasProps } from "./ShaderCanvas";
 export { resolveShaderColor, resolveShaderColors } from "./resolveShaderColor";
 export type { RGBA } from "./resolveShaderColor";
 export { glslHashFloat, glslHashVec2, glslValueNoise, glslSimplexNoise2D, glslSimplexFbm, glslDeclarePI, glslRotate2, } from "./shaderNoise.glsl";
-export { glslBayerMatrices } from "./bayerMatrices.glsl";
-export { glslImageCoverUV } from "./imageUV.glsl";

package/dist/components/effects/shared/shaderNoise.glsl.d.ts

@@ -23,7 +23,7 @@ export declare const glslValueNoise = "\nfloat valueNoise(vec2 st) {\n  vec2 i =
  *  ubiquitous prior art in the WebGL shader ecosystem, NOT paper-design's own
  *  IP. Used as the low-level noise primitive under some ported effects whose
  *  higher-level composition logic IS credited to paper-design in their own
- *  doc comments (e.g. GrainGradient, Dithering, Water, LiquidMetal). */
+ *  doc comments (e.g. GrainGradient, Dithering, LiquidMetal). */
 export declare const glslSimplexNoise2D = "\nvec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec3 permute(vec3 x) { return mod289(((x * 34.0) + 1.0) * x); }\n\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n                       -0.577350269189626, 0.024390243902439);\n  vec2 i  = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n\n  vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n\n  i = mod289(i);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));\n\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n";
 /** Small fractional-Brownian-motion built on glslSimplexNoise2D. Requires
  *  glslSimplexNoise2D to be interpolated earlier in the same shader source. */