@flikk/ui 1.0.0-beta.31 → 1.0.0-beta.33

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

@@ -10,7 +10,7 @@ const metricTheme = {
     // --card-radius with its own --metric-radius (same "rounded-[...]" utility
     // group, so this wins via source order) rather than inheriting Card's
     // radius verbatim.
-    baseStyle: "transition-colors duration-200 rounded-[var(--metric-radius)]",
+    baseStyle: "transition-colors duration-[var(--motion-duration-base)] rounded-[var(--metric-radius)]",
     // Visual style variants — container surface + structure.
     // `filled` adds nothing: it inherits the Card shell's --color-surface-raised.
     // `ghost` clears that fill (`!` beats Card's bg utility regardless of
@@ -54,9 +54,9 @@ const metricTheme = {
     // arbitrary text-[...] syntax is ambiguous between color/font-size and a
     // bare var() resolves to color, silently no-oping the size change.
     valueSizes: {
-        sm: "text-[length:var(--metric-value-size-sm)] leading-[1.4]",
-        md: "text-[length:var(--metric-value-size-md)] leading-[1.2]",
-        lg: "text-[length:var(--metric-value-size-lg)] leading-[1.2]",
+        sm: "text-[length:var(--metric-value-size-sm)]/[var(--metric-value-line-height-sm)]",
+        md: "text-[length:var(--metric-value-size-md)]/[var(--metric-value-line-height-md)]",
+        lg: "text-[length:var(--metric-value-size-lg)]/[var(--metric-value-line-height-lg)]",
     },
     subtitleSizes: { sm: "text-xs mt-1", md: "text-xs mt-0.5", lg: "text-sm mt-1" },
     // Common element styles

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

@@ -45,7 +45,7 @@ const tableTheme = {
             // <tr> (inset shadow) so a shifted cell can't drag a notch into it.
             "[&>tbody>tr>td]:border-b-0 " +
             "[&>tbody>tr]:shadow-[inset_0_-1px_0_0_var(--color-border)] [&>tbody>tr:last-child]:shadow-none " +
-            "[&>tbody>tr>td]:transition-transform [&>tbody>tr>td]:duration-300 " +
+            "[&>tbody>tr>td]:transition-transform [&>tbody>tr>td]:duration-[var(--motion-duration-slow)] " +
             // first cell eases right (its left padding); last cell eases left only when
             // right-aligned (matches `pr-4` — invisible on left-aligned content).
             "[&>tbody>tr:hover>td:first-child]:translate-x-2 " +
@@ -60,7 +60,7 @@ const tableTheme = {
         "text-[var(--color-text-primary)] ",
     // Row styles — hover and layout only (borders moved to cells)
     // Light: neutral-50 hover | Dark: neutral-800 hover
-    rowStyle: "group transition-all duration-300 relative " +
+    rowStyle: "group transition-all duration-[var(--motion-duration-slow)] relative " +
         "hover:bg-[var(--color-mono-50)] " +
         "dark:hover:bg-[var(--color-surface-hover)]",
     // Selected row styles — background is applied per-cell (in TableCell) so that

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

@@ -5,7 +5,6 @@ import '../../core/Popover/PopoverContext.js';
 import '../../core/Popover/PopoverBody.js';
 import { Gear } from '@phosphor-icons/react';
 import { Button } from '../../core/Button/Button.js';
-import 'react';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { Sortable, SortableItem } from '../../core/Sortable/Sortable.js';
 
@@ -19,7 +18,7 @@ function TableColumnManagerComponent({ columns, visibleColumns, columnOrder, onT
         const displayName = typeof column.header === 'string' ? column.header : column.id;
         return (jsx(Checkbox, { id: `column-checkbox-${column.id}`, name: `column-${column.id}`, value: column.id, checked: isVisible, onChange: () => onToggleColumn(column.id), "aria-label": `Toggle visibility for ${displayName} column`, label: displayName, state: isLocked ? 'disabled' : 'default' }));
     };
-    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "mono", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Gear, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Body, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-sm uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-surface-hover)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-surface-hover)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "mono", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "mono", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Gear, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Body, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-sm uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-surface-hover)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-surface)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-surface-hover)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-surface)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "mono", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
 }
 const TableColumnManager = TableColumnManagerComponent;
 

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

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from 'react';
 import { tableTheme } from './Table.theme.js';
 

package/dist/components/data-display/Table/TableFilter.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") {

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

@@ -2,9 +2,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 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

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/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

@@ -122,7 +122,7 @@ CustomCursorProvider.displayName = "CustomCursorProvider";
  * @example
  * ```tsx
  * <CustomCursor size="md" color="primary" variant="glass">
- *   <PaperAirplaneIcon />
+ *   <PaperPlaneTilt />
  * </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: {
-        mono: "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: {
-        mono: "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/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. */

package/dist/components/effects/shared/shaderNoise.glsl.js

@@ -18,20 +18,11 @@ float randomR(vec2 st) {
   return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123);
 }
 `;
-/** Pure-hash pseudo-random vec2, no texture lookup. Same source as glslHashFloat. */
-const glslHashVec2 = `
-vec2 randomGB(vec2 st) {
-  return vec2(
-    fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123),
-    fract(sin(dot(st, vec2(93.9898, 67.345))) * 24634.6345123)
-  );
-}
-`;
 /** Ashima Arts / Stefan Gustavson 2D simplex noise (ISC license) — generic,
  *  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). */
 const glslSimplexNoise2D = `
 vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
 vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
@@ -81,4 +72,4 @@ vec2 rotate(vec2 v, float angle) {
 }
 `;
 
-export { glslDeclarePI, glslHashFloat, glslHashVec2, glslRotate2, glslSimplexNoise2D };
+export { glslDeclarePI, glslHashFloat, glslRotate2, glslSimplexNoise2D };

package/dist/components/forms/Checkbox/Checkbox.theme.js

@@ -6,7 +6,7 @@ const checkboxTheme = {
     baseStyle: "relative flex items-start gap-3",
     inputContainerStyle: "relative flex-shrink-0 group grid grid-cols-1",
     // Input styles with light and dark mode variants
-    inputStyle: "col-start-1 row-start-1 appearance-none rounded-[var(--checkbox-radius)] border-2 transition-all duration-400 " +
+    inputStyle: "col-start-1 row-start-1 appearance-none rounded-[var(--checkbox-radius)] border-2 transition-all duration-[var(--motion-duration-slower)] " +
         // Default state - light
         "border-[var(--color-border)] bg-[var(--color-surface)] " +
         // Default state - dark

package/dist/components/forms/ColorPicker/ColorPicker.js

@@ -34,6 +34,24 @@ const DEFAULT_GRADIENT = {
  * and return null). Skip parsing for gradient values.
  */
 const isGradientString = (v) => /^(?:repeating-)?(?:linear|radial|conic)-gradient\(/.test(v.trim());
+/**
+ * The solid-color output pipeline, as a pure function.
+ *
+ * Mirrors `getFormattedValue` below, but callable from an effect that needs to
+ * know what a color WILL serialize to before that color reaches state — used to
+ * mark a parent-supplied value as already in force so it is never echoed back
+ * through `onChange`.
+ */
+const formatColorAs = (c, fmt) => {
+    switch (fmt) {
+        case 'rgb':
+            return formatRgb(c.h, c.s, c.l, c.a);
+        case 'hsl':
+            return formatHsl(c.h, c.s, c.l, c.a);
+        default:
+            return formatHex(c.h, c.s, c.l);
+    }
+};
 /**
  * ColorPicker Root Component
  * Follows Flikkui compound component pattern (similar to Accordion, Tabs, Popover)
@@ -55,6 +73,11 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
     const [color, setColor] = useState(initialColor);
     const [format, setFormat] = useState(initialFormat);
     const [isOpen, setIsOpen] = useState(false);
+    // Last value handed to `onChange` (or accepted from the parent). Declared
+    // here because BOTH the controlled-value sync and the emit effect below
+    // write it — see the emit effect for the full rationale.
+    const prevOutputRef = useRef(undefined);
+    const hasSeededOutputRef = useRef(false);
     // Mode state (controlled/uncontrolled)
     const [internalMode, setInternalMode] = useState(defaultMode);
     const mode = modeProp !== null && modeProp !== void 0 ? modeProp : internalMode;
@@ -130,9 +153,14 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
             const parsed = parseColor(value);
             if (parsed) {
                 setColor(parsed);
+                // 🔴 Record what this externally-supplied value normalizes to, so the
+                // emit effect below treats the resulting render as "already in force"
+                // and does not echo the parent's own value back as an onChange. Without
+                // this, a parent that writes what it receives ping-pongs forever.
+                prevOutputRef.current = formatColorAs(parsed, format);
             }
         }
-    }, [value]);
+    }, [value, format]);
     // Individual channel setters
     const setHue = useCallback((h) => {
         setColor((prev) => ({ ...prev, h }));
@@ -147,6 +175,7 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
         setColor((prev) => ({ ...prev, a }));
     }, []);
     // Utility functions to get color in different formats
+    // (module-level `formatColorAs` is the same pipeline, callable outside render)
     const getHexValue = useCallback(() => {
         return formatHex(color.h, color.s, color.l);
     }, [color]);
@@ -180,10 +209,23 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
         }
         return getFormattedValue();
     }, [mode, gradient, getFormattedValue]);
-    // Notify parent of color changes
-    const prevOutputRef = useRef(undefined);
+    // Notify parent of color changes.
+    //
+    // 🔴 A controlled component NEVER emits for a value it wasn't given by the
+    // user. This used to fire on mount — `prevOutputRef` started `undefined`, so
+    // the first pass always "differed" — handing the consumer a value nobody
+    // chose. Because the output is re-derived through hex -> HSL (integer
+    // rounding) -> hex, that value often wasn't even the one passed in, so a
+    // parent storing what it receives recorded a phantom user edit, and a parent
+    // that fed it back re-rendered into an infinite emit loop.
     useEffect(() => {
         const output = getOutputValue();
+        // First pass: seed the baseline, emit nothing. Mounting is not a user edit.
+        if (!hasSeededOutputRef.current) {
+            hasSeededOutputRef.current = true;
+            prevOutputRef.current = output;
+            return;
+        }
         if (onChange && !disabled && output !== prevOutputRef.current) {
             prevOutputRef.current = output;
             onChange(output);