@gradeui/ui 0.4.0 → 0.5.0

package/dist/index.d.mts

@@ -614,6 +614,45 @@ interface ShaderPreset {
     poster?: string;
 }
 
+/**
+ * Custom fragment shader scene — runs a user-supplied GLSL fragment shader
+ * on a fullscreen quad with a standardised uniform set.
+ *
+ * This is the "write me a shader from a prompt" surface. Instead of asking
+ * an LLM to author a full three.js SceneFactory (imports, geometry, etc.),
+ * it only has to write `void main()` against a known uniform contract.
+ *
+ * The uniforms ARE the design contract — mirror the same palette slots
+ * that presets use, so custom shaders pick up theming for free.
+ */
+
+/**
+ * Auto-injected prelude — defines every uniform and varying the user's
+ * fragment can reference. Users should NOT redeclare these. Their shader
+ * source is appended verbatim to this header.
+ *
+ * Kept as glsl100 (varying / gl_FragColor) since that's the syntax
+ * dominant in LLM training data; three.js auto-upgrades it for WebGL2.
+ */
+declare const FRAGMENT_HEADER = "\n  precision highp float;\n  varying vec2 vUv;\n  uniform float uTime;\n  uniform vec2  uResolution;\n  uniform vec2  uMouse;\n  uniform vec3  uPrimary;\n  uniform vec3  uSecondary;\n  uniform vec3  uAccent;\n  uniform vec3  uBackground;\n";
+/**
+ * Thrown when the user's fragment shader fails to compile. Carries both the
+ * GL info log and the original source so callers can surface it or fall back.
+ */
+declare class ShaderCompileError extends Error {
+    readonly log: string;
+    readonly source: string;
+    constructor(log: string, source: string);
+}
+/**
+ * Build a SceneFactory from a user-supplied fragment shader body.
+ *
+ * Throws `ShaderCompileError` synchronously (from the SceneContext call) if
+ * the GLSL doesn't compile. ThreeScene catches this and falls back to
+ * `preset="space"` so the UI stays populated.
+ */
+declare function buildFragmentShaderScene(userFragment: string): SceneFactory;
+
 /**
  * ThreeScene — the WebGL media primitive.
  *
@@ -630,13 +669,26 @@ interface ShaderPreset {
 interface ThreeSceneProps extends Omit<BaseMediaProps, "src" | "poster"> {
     /** Preset id from the shader preset registry. */
     preset?: string;
+    /**
+     * User-authored GLSL fragment shader body. Runs on a fullscreen quad with
+     * a standardised uniform contract (uTime, uResolution, uMouse, uPrimary,
+     * uSecondary, uAccent, uBackground + varying vUv). Header is auto-injected
+     * — DO NOT redeclare the uniforms. Write `void main()` only.
+     *
+     * Precedence: `createScene` > `fragmentShader` > `preset`. On compile
+     * failure the component falls back to `preset="space"` and fires
+     * `onShaderError`.
+     */
+    fragmentShader?: string;
+    /** Called when a supplied `fragmentShader` fails to compile. */
+    onShaderError?: (error: ShaderCompileError) => void;
     /** Post-FX preset id. Defaults to the preset's `defaultPostPreset` or "vhs". */
     postPreset?: string;
     /** Palette overrides. Unset slots fall back to `DEFAULT_PALETTE`. */
     palette?: Partial<Palette>;
     /**
-     * Custom scene factory. Takes precedence over `preset`.
-     * Use for bespoke three.js scenes that don't fit a preset.
+     * Custom scene factory. Takes precedence over `preset` and `fragmentShader`.
+     * Use for bespoke three.js scenes that don't fit a preset or fullscreen quad.
      */
     createScene?: SceneFactory;
     /** Static poster to show while the GL context warms up. */
@@ -1217,4 +1269,4 @@ declare function GradeModeSwitcher({ className, variant }: GradeModeSwitcherProp
  */
 declare function ThemeToggle(): React$1.JSX.Element;
 
-export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, BUILT_IN_INPUTS, Badge, type BaseMediaProps, type BreadcrumbItem, Button, type ButtonShape, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, type ChartPalette, Checkbox, type ColorIntensity, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Input, type InputStyle, Label, LenisProvider, type MediaAspect, type MediaRadius, MediaSurface, type MediaSurfaceProps, type ModeName, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, RivePlayer, type RivePlayerProps, type SceneContext, type SceneFactory, type SceneHandle, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingDensity, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, VideoPlayer, type VideoPlayerProps, applyThemeToRoot, badgeVariants, builtInThemes, buttonVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, generateTheme, getTheme, listThemes, listUserThemes, loadUserThemeInput, postPresets, saveUserTheme, sceneRegistry, shaderPresetById, shaderPresets, themeToCSSVars, useGradeTheme, useMaybeGradeTheme, usePrefersReducedMotion };
+export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, BUILT_IN_INPUTS, Badge, type BaseMediaProps, type BreadcrumbItem, Button, type ButtonShape, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, type ChartPalette, Checkbox, type ColorIntensity, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FRAGMENT_HEADER, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Input, type InputStyle, Label, LenisProvider, type MediaAspect, type MediaRadius, MediaSurface, type MediaSurfaceProps, type ModeName, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, RivePlayer, type RivePlayerProps, type SceneContext, type SceneFactory, type SceneHandle, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingDensity, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, VideoPlayer, type VideoPlayerProps, applyThemeToRoot, badgeVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, generateTheme, getTheme, listThemes, listUserThemes, loadUserThemeInput, postPresets, saveUserTheme, sceneRegistry, shaderPresetById, shaderPresets, themeToCSSVars, useGradeTheme, useMaybeGradeTheme, usePrefersReducedMotion };

package/dist/index.d.ts

@@ -614,6 +614,45 @@ interface ShaderPreset {
     poster?: string;
 }
 
+/**
+ * Custom fragment shader scene — runs a user-supplied GLSL fragment shader
+ * on a fullscreen quad with a standardised uniform set.
+ *
+ * This is the "write me a shader from a prompt" surface. Instead of asking
+ * an LLM to author a full three.js SceneFactory (imports, geometry, etc.),
+ * it only has to write `void main()` against a known uniform contract.
+ *
+ * The uniforms ARE the design contract — mirror the same palette slots
+ * that presets use, so custom shaders pick up theming for free.
+ */
+
+/**
+ * Auto-injected prelude — defines every uniform and varying the user's
+ * fragment can reference. Users should NOT redeclare these. Their shader
+ * source is appended verbatim to this header.
+ *
+ * Kept as glsl100 (varying / gl_FragColor) since that's the syntax
+ * dominant in LLM training data; three.js auto-upgrades it for WebGL2.
+ */
+declare const FRAGMENT_HEADER = "\n  precision highp float;\n  varying vec2 vUv;\n  uniform float uTime;\n  uniform vec2  uResolution;\n  uniform vec2  uMouse;\n  uniform vec3  uPrimary;\n  uniform vec3  uSecondary;\n  uniform vec3  uAccent;\n  uniform vec3  uBackground;\n";
+/**
+ * Thrown when the user's fragment shader fails to compile. Carries both the
+ * GL info log and the original source so callers can surface it or fall back.
+ */
+declare class ShaderCompileError extends Error {
+    readonly log: string;
+    readonly source: string;
+    constructor(log: string, source: string);
+}
+/**
+ * Build a SceneFactory from a user-supplied fragment shader body.
+ *
+ * Throws `ShaderCompileError` synchronously (from the SceneContext call) if
+ * the GLSL doesn't compile. ThreeScene catches this and falls back to
+ * `preset="space"` so the UI stays populated.
+ */
+declare function buildFragmentShaderScene(userFragment: string): SceneFactory;
+
 /**
  * ThreeScene — the WebGL media primitive.
  *
@@ -630,13 +669,26 @@ interface ShaderPreset {
 interface ThreeSceneProps extends Omit<BaseMediaProps, "src" | "poster"> {
     /** Preset id from the shader preset registry. */
     preset?: string;
+    /**
+     * User-authored GLSL fragment shader body. Runs on a fullscreen quad with
+     * a standardised uniform contract (uTime, uResolution, uMouse, uPrimary,
+     * uSecondary, uAccent, uBackground + varying vUv). Header is auto-injected
+     * — DO NOT redeclare the uniforms. Write `void main()` only.
+     *
+     * Precedence: `createScene` > `fragmentShader` > `preset`. On compile
+     * failure the component falls back to `preset="space"` and fires
+     * `onShaderError`.
+     */
+    fragmentShader?: string;
+    /** Called when a supplied `fragmentShader` fails to compile. */
+    onShaderError?: (error: ShaderCompileError) => void;
     /** Post-FX preset id. Defaults to the preset's `defaultPostPreset` or "vhs". */
     postPreset?: string;
     /** Palette overrides. Unset slots fall back to `DEFAULT_PALETTE`. */
     palette?: Partial<Palette>;
     /**
-     * Custom scene factory. Takes precedence over `preset`.
-     * Use for bespoke three.js scenes that don't fit a preset.
+     * Custom scene factory. Takes precedence over `preset` and `fragmentShader`.
+     * Use for bespoke three.js scenes that don't fit a preset or fullscreen quad.
      */
     createScene?: SceneFactory;
     /** Static poster to show while the GL context warms up. */
@@ -1217,4 +1269,4 @@ declare function GradeModeSwitcher({ className, variant }: GradeModeSwitcherProp
  */
 declare function ThemeToggle(): React$1.JSX.Element;
 
-export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, BUILT_IN_INPUTS, Badge, type BaseMediaProps, type BreadcrumbItem, Button, type ButtonShape, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, type ChartPalette, Checkbox, type ColorIntensity, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Input, type InputStyle, Label, LenisProvider, type MediaAspect, type MediaRadius, MediaSurface, type MediaSurfaceProps, type ModeName, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, RivePlayer, type RivePlayerProps, type SceneContext, type SceneFactory, type SceneHandle, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingDensity, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, VideoPlayer, type VideoPlayerProps, applyThemeToRoot, badgeVariants, builtInThemes, buttonVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, generateTheme, getTheme, listThemes, listUserThemes, loadUserThemeInput, postPresets, saveUserTheme, sceneRegistry, shaderPresetById, shaderPresets, themeToCSSVars, useGradeTheme, useMaybeGradeTheme, usePrefersReducedMotion };
+export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, BUILT_IN_INPUTS, Badge, type BaseMediaProps, type BreadcrumbItem, Button, type ButtonShape, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, type ChartPalette, Checkbox, type ColorIntensity, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FRAGMENT_HEADER, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Input, type InputStyle, Label, LenisProvider, type MediaAspect, type MediaRadius, MediaSurface, type MediaSurfaceProps, type ModeName, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, RivePlayer, type RivePlayerProps, type SceneContext, type SceneFactory, type SceneHandle, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingDensity, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, VideoPlayer, type VideoPlayerProps, applyThemeToRoot, badgeVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, generateTheme, getTheme, listThemes, listUserThemes, loadUserThemeInput, postPresets, saveUserTheme, sceneRegistry, shaderPresetById, shaderPresets, themeToCSSVars, useGradeTheme, useMaybeGradeTheme, usePrefersReducedMotion };