@voriel_salut/ds 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/LICENSE +24 -0
  2. package/README.md +141 -0
  3. package/THIRD_PARTY_NOTICES.md +54 -0
  4. package/dist/AGENTS.md +58 -0
  5. package/dist/index.d.ts +229 -0
  6. package/dist/index.js +1066 -0
  7. package/dist/manifest.json +1008 -0
  8. package/dist/styles.css +9 -0
  9. package/dist/theme.css +855 -0
  10. package/package.json +99 -0
package/LICENSE ADDED
@@ -0,0 +1,24 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Voriel-Salut
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
22
+
23
+ Portions of this software are adapted from third-party works under their own
24
+ licences; see THIRD_PARTY_NOTICES.md.
package/README.md ADDED
@@ -0,0 +1,141 @@
1
+ # @voriel_salut/ds
2
+
3
+ **lets-vibe-ds** — a brutalist React design system built on [shadcn/ui](https://ui.shadcn.com),
4
+ [Radix](https://www.radix-ui.com) and [Tailwind CSS v4](https://tailwindcss.com): hard borders,
5
+ offset shadows, square corners, green and amber on cream, with a matching dark theme.
6
+
7
+ ## Requirements
8
+
9
+ - React **19.2** or newer (`react` and `react-dom` are peer dependencies)
10
+ - A bundler that handles CSS imports (Vite, Next.js, webpack, …)
11
+ - Tailwind CSS **4.1+** only if you choose the Tailwind setup below
12
+
13
+ ## Install
14
+
15
+ ```bash
16
+ npm install @voriel_salut/ds
17
+ ```
18
+
19
+ ## Add the styles
20
+
21
+ Pick **one** of the two setups and import it once, at your app's entry point.
22
+
23
+ ### Option A — precompiled CSS (no Tailwind needed)
24
+
25
+ ```tsx
26
+ // main.tsx, app/layout.tsx, …
27
+ import "@voriel_salut/ds/styles.css"
28
+ ```
29
+
30
+ `styles.css` contains the fonts, tokens, dark theme and every class the components use. It does
31
+ **not** contain Tailwind classes you write yourself: `className="m-4 max-w-sm"` on a component only
32
+ works if those classes happen to be used by a component too. Style your own layout with your own
33
+ CSS, or use option B.
34
+
35
+ ### Option B — Tailwind CSS v4
36
+
37
+ If your app already runs Tailwind v4, import the theme into your main CSS file instead:
38
+
39
+ ```css
40
+ /* app.css */
41
+ @import "tailwindcss";
42
+ @import "@voriel_salut/ds/theme.css";
43
+ ```
44
+
45
+ `theme.css` tells Tailwind to generate the classes the components use, and adds the design tokens
46
+ as utilities (`bg-primary`, `text-muted-foreground`, `border-border`, `bg-shader-1` …) for your own
47
+ markup. Don't import `styles.css` as well; you would get two copies of Tailwind.
48
+
49
+ ## Providers and dark mode
50
+
51
+ - **`TooltipProvider`** — wrap your app once if you use `Tooltip`:
52
+
53
+ ```tsx
54
+ import { TooltipProvider } from "@voriel_salut/ds"
55
+
56
+ <TooltipProvider>
57
+ <App />
58
+ </TooltipProvider>
59
+ ```
60
+
61
+ - **Dark mode** — add the `dark` class to `<html>`. Setting it on the root element means dialogs
62
+ and tooltips, which render in portals, switch too:
63
+
64
+ ```ts
65
+ document.documentElement.classList.toggle("dark", isDark)
66
+ ```
67
+
68
+ No other providers are needed.
69
+
70
+ ## Use the components
71
+
72
+ ```tsx
73
+ import { Button, Card, CardContent, CardHeader, CardTitle } from "@voriel_salut/ds"
74
+
75
+ export function Welcome() {
76
+ return (
77
+ <Card className="max-w-sm">
78
+ <CardHeader>
79
+ <CardTitle>Hello</CardTitle>
80
+ </CardHeader>
81
+ <CardContent>
82
+ <Button variant="accent">Get started</Button>
83
+ </CardContent>
84
+ </Card>
85
+ )
86
+ }
87
+ ```
88
+
89
+ Included: `Button`, `Badge`, `Card`, `Dialog`, `Input`, `Label`, `Tabs`, `Tooltip`, `AirStyle`,
90
+ `Hero`, `ShaderBackground`, `HalftoneNebula`, plus the `cn()` class-merging helper and the
91
+ `buttonVariants`, `badgeVariants` and `tabsListVariants` style functions.
92
+
93
+ Components are marked `"use client"`, so they work in the Next.js App Router.
94
+
95
+ ## For AI coding agents
96
+
97
+ The package ships two files for agents working in your project:
98
+
99
+ - `@voriel_salut/ds/AGENTS.md` — usage rules (setup, variants, tokens, do's and don'ts). Point your
100
+ agent at it, e.g. from your own `AGENTS.md` or `CLAUDE.md`:
101
+ `See node_modules/@voriel_salut/ds/dist/AGENTS.md for UI components.`
102
+ - `@voriel_salut/ds/manifest.json` — every component with its import line, props and example
103
+ snippets, generated from Storybook.
104
+
105
+ ## Credits and licence
106
+
107
+ MIT © Voriel-Salut — see [LICENSE](LICENSE).
108
+
109
+ The animated hero backgrounds are adapted from MIT-licensed community components on
110
+ [21st.dev](https://21st.dev):
111
+
112
+ - **HalftoneNebula** is based on
113
+ [Halftone Nebula](https://21st.dev/@kedhareswer/components/halftone-nebula) by Kedhareswer Naidu.
114
+ - **ShaderBackground** uses the "Mesh drift" shader from
115
+ [Shader R](https://21st.dev/@ola.leandroaraujo/components/shader-r) by Leandro Araujo.
116
+
117
+ Components are built on [shadcn/ui](https://ui.shadcn.com) (MIT). The colour theme is based on
118
+ [MX-Brutalist](https://tweakcn.com/themes/cmllfu8oc000004l1a0tidj2g) from tweakcn. Full notices
119
+ are in [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md), which ships with the package.
120
+
121
+ ---
122
+
123
+ ## Developing this repo
124
+
125
+ ```bash
126
+ npm install
127
+ npm run dev # component playground (src/App.tsx)
128
+ npm run storybook # Storybook on http://localhost:6006
129
+ npm run build # library build → dist/ (JS, types, CSS, manifest, AGENTS.md)
130
+ ```
131
+
132
+ `npm run build` runs three steps:
133
+
134
+ 1. `build:lib` — type-checks, then builds `src/index.ts` with Vite library mode
135
+ (`vite.lib.config.ts`) into `dist/index.js`, `dist/index.d.ts` and `dist/styles.css` (from
136
+ `src/package.css`).
137
+ 2. `build:manifest` — builds Storybook, which writes the components manifest.
138
+ 3. `scripts/finish-package.mjs` — writes `dist/theme.css`, `dist/manifest.json` and
139
+ `dist/AGENTS.md` (from `docs/AGENTS.md`).
140
+
141
+ Check what would be published with `npm pack --dry-run`.
package/THIRD_PARTY_NOTICES.md ADDED
@@ -0,0 +1,54 @@
1
+ # Third-party notices
2
+
3
+ @voriel_salut/ds includes code adapted from the following projects. Each is used under the MIT
4
+ License, reproduced once at the end of this file; the copyright notices below apply to the
5
+ portions named.
6
+
7
+ ## Halftone Nebula
8
+
9
+ - **Used in:** `HalftoneNebula` (`src/components/ui/halftone-nebula.tsx`) and the "nebula"
10
+ background of `Hero`
11
+ - **Original:** Halftone Nebula by Kedhareswer Naidu —
12
+ https://21st.dev/@kedhareswer/components/halftone-nebula
13
+ - **Changes:** default palette reads the design tokens, colours accept any CSS colour, component
14
+ exports and markup adapted to the design system
15
+ - **Licence:** MIT — Copyright (c) Kedhareswer Naidu
16
+
17
+ ## Shader R ("Mesh drift")
18
+
19
+ - **Used in:** `ShaderBackground` (`src/components/shader-background/`) and the "mesh" background of
20
+ `Hero`
21
+ - **Original:** Shader R by Leandro Araujo, made with the 21st.dev Shader Builder —
22
+ https://21st.dev/@ola.leandroaraujo/components/shader-r
23
+ - **Changes:** fragment shader unchanged; palette read from the `--shader-*` design tokens, React
24
+ wrapper rewritten
25
+ - **Licence:** MIT — Copyright (c) 2026 Leandro Araujo
26
+
27
+ ## shadcn/ui
28
+
29
+ - **Used in:** component primitives in `src/components/ui/`, and the custom variants from
30
+ `shadcn/tailwind.css`, which are copied into `dist/theme.css`
31
+ - **Original:** https://github.com/shadcn-ui/ui
32
+ - **Licence:** MIT — Copyright (c) 2023 shadcn
33
+
34
+ ---
35
+
36
+ ## MIT License
37
+
38
+ Permission is hereby granted, free of charge, to any person obtaining a copy
39
+ of this software and associated documentation files (the "Software"), to deal
40
+ in the Software without restriction, including without limitation the rights
41
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
42
+ copies of the Software, and to permit persons to whom the Software is
43
+ furnished to do so, subject to the following conditions:
44
+
45
+ The above copyright notice and this permission notice shall be included in all
46
+ copies or substantial portions of the Software.
47
+
48
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
49
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
50
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
51
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
52
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
53
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
54
+ SOFTWARE.
package/dist/AGENTS.md ADDED
@@ -0,0 +1,58 @@
1
+ # @voriel_salut/ds — guide for coding agents
2
+
3
+ This project uses **@voriel_salut/ds** (lets-vibe-ds), a brutalist React design system built on
4
+ shadcn/ui, Radix and Tailwind CSS v4. Build UI from these components and tokens instead of writing
5
+ new ones or hard-coding styles.
6
+
7
+ ## Where to look
8
+
9
+ - **Components, props and examples:** `node_modules/@voriel_salut/ds/dist/manifest.json` — every
10
+ component with its import line, props and story snippets. Read it before using a component.
11
+ - **Types:** `node_modules/@voriel_salut/ds/dist/index.d.ts`.
12
+ - **Tokens:** `node_modules/@voriel_salut/ds/dist/theme.css` (the `:root` and `.dark` blocks).
13
+
14
+ ## Setup rules
15
+
16
+ - Import everything from the package root: `import { Button } from "@voriel_salut/ds"`. There are
17
+ no deep imports.
18
+ - Import the CSS **once**, at the app entry, never per component. Use exactly one of:
19
+ - `import "@voriel_salut/ds/styles.css"` — precompiled, for apps without Tailwind. It only
20
+ contains classes the components use, so Tailwind classes you add yourself will not apply; use
21
+ plain CSS for custom layout in these apps.
22
+ - `@import "tailwindcss"; @import "@voriel_salut/ds/theme.css";` in the app's main CSS file —
23
+ for Tailwind v4 apps. Do not also import `styles.css`.
24
+ - Wrap the app once in `<TooltipProvider>` if it uses `Tooltip`.
25
+ - Dark mode is the `dark` class on `<html>`. Toggle it there, not on individual components, so
26
+ dialogs and tooltips (rendered in portals) follow.
27
+ - Components are client components (`"use client"`). In Next.js they work in both server and client
28
+ files; pass them serialisable props from server components.
29
+
30
+ ## Styling rules
31
+
32
+ - Use variants before custom classes: `variant` and `size` on `Button`; `variant` on `Badge`;
33
+ `variant` on `TabsList`.
34
+ - Use token utilities, never raw colours: `bg-background`, `text-foreground`, `bg-primary`,
35
+ `text-primary-foreground`, `bg-secondary`, `bg-accent`, `bg-muted`, `text-muted-foreground`,
36
+ `bg-destructive`, `border-border`, `ring-ring`, `bg-card`, `bg-shader-1` … `bg-shader-4`.
37
+ - Keep the brutalist look: `border-2 border-border`, hard offset shadows (`shadow-sm`, `shadow`),
38
+ square corners (`--radius` is 0). No soft blurred shadows, no rounded pills.
39
+ - Merge classes with the exported `cn()` so consumer classes override component defaults.
40
+
41
+ ## Components
42
+
43
+ | Component | Notes |
44
+ |---|---|
45
+ | `Button` | `variant`: default, secondary, accent, outline, ghost, destructive, link. `size`: default, xs, sm, lg, icon, icon-xs, icon-sm, icon-lg. `asChild` renders the child element (e.g. a link) with button styles. |
46
+ | `Badge` | `variant`: default, secondary, accent, destructive, outline, ghost, link. `asChild` supported. |
47
+ | `Card` | Compose `CardHeader` (`CardTitle`, `CardDescription`, `CardAction`), `CardContent`, `CardFooter`. |
48
+ | `Dialog` | Radix dialog: `DialogTrigger`, `DialogContent` (`DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter`, `DialogClose`). Always include a `DialogTitle`. |
49
+ | `Input`, `Label` | Pair them with `htmlFor` / `id`. |
50
+ | `Tabs` | `TabsList` (`variant`: default, line), `TabsTrigger`, `TabsContent`. |
51
+ | `Tooltip` | `TooltipTrigger` + `TooltipContent`. Needs `TooltipProvider` above it. |
52
+ | `AirStyle` | Category tile: square framed image (`src`, optional `sources`) with a label. |
53
+ | `Hero` | Page hero: `title`, `description`, `eyebrow`, actions as children. `background`: "mesh" (calm animated gradient, default) or "nebula" (interactive halftone sky). Always renders dark. |
54
+ | `ShaderBackground` | The mesh gradient on its own. Place inside a `relative isolate` container; it fills it and sits behind content. |
55
+ | `HalftoneNebula` | The interactive sky on its own. Give it a height (`height` prop or classes). `preset`: brand (default, uses the tokens), crimson, ultraviolet, abyssal, solar, phosphor. |
56
+
57
+ Both animated backgrounds use WebGL, pause when hidden and render a still frame when the user
58
+ prefers reduced motion. Use at most one or two per page.
package/dist/index.d.ts ADDED
@@ -0,0 +1,229 @@
1
+ import { ClassProp } from 'class-variance-authority/types';
2
+ import { cn } from 'cn';
3
+ import { Dialog as Dialog_2 } from 'radix-ui';
4
+ import { Label as Label_2 } from 'radix-ui';
5
+ import * as React_2 from 'react';
6
+ import { Tabs as Tabs_2 } from 'radix-ui';
7
+ import { Tooltip as Tooltip_2 } from 'radix-ui';
8
+ import { VariantProps } from 'class-variance-authority';
9
+
10
+ export declare function AirStyle({ label, src, sources, className, ...props }: AirStyleProps): React_2.JSX.Element;
11
+
12
+ export declare type AirStyleProps = Omit<React_2.ComponentProps<"span">, "children"> & {
13
+ /** Text under the image. Clamped to two lines. */
14
+ label: React_2.ReactNode;
15
+ /** Image URL for the tile. Shown square and cropped to fill. */
16
+ src: string;
17
+ /** Optional responsive sources, rendered as <source> elements inside <picture>. */
18
+ sources?: AirStyleSource[];
19
+ };
20
+
21
+ export declare type AirStyleSource = {
22
+ srcSet: string;
23
+ media?: string;
24
+ sizes?: string;
25
+ };
26
+
27
+ export declare function Badge({ className, variant, asChild, ...props }: React_2.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
28
+ asChild?: boolean;
29
+ }): React_2.JSX.Element;
30
+
31
+ export declare const badgeVariants: (props?: ({
32
+ variant?: "link" | "default" | "secondary" | "accent" | "destructive" | "outline" | "ghost" | null | undefined;
33
+ } & ClassProp) | undefined) => string;
34
+
35
+ export declare function Button({ className, variant, size, asChild, ...props }: React_2.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
36
+ asChild?: boolean;
37
+ }): React_2.JSX.Element;
38
+
39
+ export declare const buttonVariants: (props?: ({
40
+ variant?: "link" | "default" | "secondary" | "accent" | "destructive" | "outline" | "ghost" | null | undefined;
41
+ size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
42
+ } & ClassProp) | undefined) => string;
43
+
44
+ export declare function Card({ className, size, ...props }: React_2.ComponentProps<"div"> & {
45
+ size?: "default" | "sm";
46
+ }): React_2.JSX.Element;
47
+
48
+ export declare function CardAction({ className, ...props }: React_2.ComponentProps<"div">): React_2.JSX.Element;
49
+
50
+ export declare function CardContent({ className, ...props }: React_2.ComponentProps<"div">): React_2.JSX.Element;
51
+
52
+ export declare function CardDescription({ className, ...props }: React_2.ComponentProps<"div">): React_2.JSX.Element;
53
+
54
+ export declare function CardFooter({ className, ...props }: React_2.ComponentProps<"div">): React_2.JSX.Element;
55
+
56
+ export declare function CardHeader({ className, ...props }: React_2.ComponentProps<"div">): React_2.JSX.Element;
57
+
58
+ export declare function CardTitle({ className, ...props }: React_2.ComponentProps<"div">): React_2.JSX.Element;
59
+
60
+ export { cn }
61
+
62
+ export declare function Dialog({ ...props }: React_2.ComponentProps<typeof Dialog_2.Root>): React_2.JSX.Element;
63
+
64
+ export declare function DialogClose({ ...props }: React_2.ComponentProps<typeof Dialog_2.Close>): React_2.JSX.Element;
65
+
66
+ export declare function DialogContent({ className, children, showCloseButton, ...props }: React_2.ComponentProps<typeof Dialog_2.Content> & {
67
+ showCloseButton?: boolean;
68
+ }): React_2.JSX.Element;
69
+
70
+ export declare function DialogDescription({ className, ...props }: React_2.ComponentProps<typeof Dialog_2.Description>): React_2.JSX.Element;
71
+
72
+ export declare function DialogFooter({ className, showCloseButton, children, ...props }: React_2.ComponentProps<"div"> & {
73
+ showCloseButton?: boolean;
74
+ }): React_2.JSX.Element;
75
+
76
+ export declare function DialogHeader({ className, ...props }: React_2.ComponentProps<"div">): React_2.JSX.Element;
77
+
78
+ export declare function DialogOverlay({ className, ...props }: React_2.ComponentProps<typeof Dialog_2.Overlay>): React_2.JSX.Element;
79
+
80
+ export declare function DialogPortal({ ...props }: React_2.ComponentProps<typeof Dialog_2.Portal>): React_2.JSX.Element;
81
+
82
+ export declare function DialogTitle({ className, ...props }: React_2.ComponentProps<typeof Dialog_2.Title>): React_2.JSX.Element;
83
+
84
+ export declare function DialogTrigger({ ...props }: React_2.ComponentProps<typeof Dialog_2.Trigger>): React_2.JSX.Element;
85
+
86
+ export declare function HalftoneNebula({ height, preset, params, interactive, touch, maxDpr, children, className, style, ...props }: HalftoneNebulaProps): React_2.JSX.Element;
87
+
88
+ export declare type HalftoneNebulaProps = Omit<React_2.ComponentProps<"section">, "ref"> & {
89
+ /**
90
+ * Explicit height, e.g. "100svh". The canvas fills the box, so without it the
91
+ * section needs its height from its content or classes.
92
+ */
93
+ height?: string;
94
+ /** A named palette + layout, layered over the defaults. */
95
+ preset?: keyof typeof NEBULA_PRESETS;
96
+ /** Overrides layered over the preset. */
97
+ params?: Partial<NebulaParams>;
98
+ /** Pointer lights the gas and parallaxes the sky; click drops a sparkle. */
99
+ interactive?: boolean;
100
+ /** "scroll" keeps page scrolling on touch; "draw" takes the gesture. */
101
+ touch?: "scroll" | "draw";
102
+ /** Device-pixel-ratio cap. The shader is per-pixel, so 2 is plenty. */
103
+ maxDpr?: number;
104
+ /** Content laid over the sky. Pointer events pass through unless opted in. */
105
+ children?: React_2.ReactNode;
106
+ };
107
+
108
+ export declare function Hero({ title, description, eyebrow, background, children, className, ...props }: HeroProps): React_2.JSX.Element;
109
+
110
+ export declare type HeroProps = Omit<React_2.ComponentProps<"section">, "title" | "ref"> & {
111
+ /** Main heading, rendered as an h1. */
112
+ title: React_2.ReactNode;
113
+ /** Supporting text under the heading. */
114
+ description?: React_2.ReactNode;
115
+ /** Small label above the heading, e.g. a Badge. */
116
+ eyebrow?: React_2.ReactNode;
117
+ /**
118
+ * "mesh" is the calm animated gradient. "nebula" is the interactive halftone sky: the pointer
119
+ * lights the gas and a click hangs a new star.
120
+ */
121
+ background?: "mesh" | "nebula";
122
+ /** Calls to action, usually Buttons. */
123
+ children?: React_2.ReactNode;
124
+ };
125
+
126
+ export declare function Input({ className, type, ...props }: React_2.ComponentProps<"input">): React_2.JSX.Element;
127
+
128
+ export declare function Label({ className, ...props }: React_2.ComponentProps<typeof Label_2.Root>): React_2.JSX.Element;
129
+
130
+ export declare const NEBULA_DEFAULTS: NebulaParams;
131
+
132
+ /** Overlays on the defaults. Named for the sky, not the numbers. */
133
+ export declare const NEBULA_PRESETS: Record<string, Partial<NebulaParams>>;
134
+
135
+ /**
136
+ * Halftone Nebula — a pixel-art night sky printed in dots.
137
+ *
138
+ * Adapted from "Halftone Nebula" by Kedhareswer Naidu, MIT License
139
+ * (https://21st.dev/@kedhareswer/components/halftone-nebula). See THIRD_PARTY_NOTICES.md.
140
+ *
141
+ * One full-screen fragment pass. The nebula is domain-warped fbm sampled once
142
+ * per pixel cell, quantised with an ordered Bayer dither, then printed as a
143
+ * halftone: every cell is a flat square of the dim ramp with a round dot of the
144
+ * bright ramp on top, the dot's radius driven by density. Where the gas is thin
145
+ * the dots shrink to a faint mesh; where it is thick they grow past the cell
146
+ * and merge into solid pixel blotches — the same trick a risograph uses.
147
+ *
148
+ * On top: three parallax layers of hashed pixel stars, a halftone planet, and
149
+ * cross-shaped sparkle stars whose spikes are drawn at one CSS pixel so they
150
+ * stay needle-thin against the chunky grid. The pointer is a lamp that parts
151
+ * the gas and swells the dots under it; a click drops a new sparkle and sends a
152
+ * shock ring through the cloud.
153
+ *
154
+ * Raw WebGL2, no textures or image assets. The canvas sizes itself from its own
155
+ * box, never the window, and releases every GL object on unmount. Colours are
156
+ * any CSS colour; the default palette reads the design tokens (dark scheme).
157
+ */
158
+ export declare type NebulaParams = {
159
+ /** CSS px per pixel cell. Everything snaps to this. */
160
+ pixel: number;
161
+ /** Dot radius, in cells, where the gas is empty / densest. >0.5 merges dots. */
162
+ dotMin: number;
163
+ dotMax: number;
164
+ /** Quantisation steps before dithering. Fewer reads more like pixel art. */
165
+ levels: number;
166
+ scale: number;
167
+ warp: number;
168
+ drift: number;
169
+ density: number;
170
+ threshold: number;
171
+ softness: number;
172
+ /** The luminous river of gas that sweeps across the frame. */
173
+ band: number;
174
+ bandAngle: number;
175
+ bandOffset: number;
176
+ bandWidth: number;
177
+ haze: number;
178
+ stars: number;
179
+ twinkle: number;
180
+ starDrift: number;
181
+ sparkles: number;
182
+ seed: number;
183
+ spikeWidth: number;
184
+ planet: boolean;
185
+ planetX: number;
186
+ planetY: number;
187
+ planetRadius: number;
188
+ parallax: number;
189
+ lens: number;
190
+ lensRadius: number;
191
+ lensPush: number;
192
+ rippleSpeed: number;
193
+ speed: number;
194
+ vignette: number;
195
+ grain: number;
196
+ voidColor: string;
197
+ hazeColor: string;
198
+ duskColor: string;
199
+ wineColor: string;
200
+ crimsonColor: string;
201
+ hotColor: string;
202
+ starColor: string;
203
+ };
204
+
205
+ export declare function ShaderBackground({ className, ...props }: ShaderBackgroundProps): React_2.JSX.Element;
206
+
207
+ export declare type ShaderBackgroundProps = Omit<React_2.ComponentProps<"div">, "children">;
208
+
209
+ export declare function Tabs({ className, orientation, ...props }: React_2.ComponentProps<typeof Tabs_2.Root>): React_2.JSX.Element;
210
+
211
+ export declare function TabsContent({ className, ...props }: React_2.ComponentProps<typeof Tabs_2.Content>): React_2.JSX.Element;
212
+
213
+ export declare function TabsList({ className, variant, ...props }: React_2.ComponentProps<typeof Tabs_2.List> & VariantProps<typeof tabsListVariants>): React_2.JSX.Element;
214
+
215
+ export declare const tabsListVariants: (props?: ({
216
+ variant?: "line" | "default" | null | undefined;
217
+ } & ClassProp) | undefined) => string;
218
+
219
+ export declare function TabsTrigger({ className, ...props }: React_2.ComponentProps<typeof Tabs_2.Trigger>): React_2.JSX.Element;
220
+
221
+ export declare function Tooltip({ ...props }: React_2.ComponentProps<typeof Tooltip_2.Root>): React_2.JSX.Element;
222
+
223
+ export declare function TooltipContent({ className, sideOffset, children, ...props }: React_2.ComponentProps<typeof Tooltip_2.Content>): React_2.JSX.Element;
224
+
225
+ export declare function TooltipProvider({ delayDuration, ...props }: React_2.ComponentProps<typeof Tooltip_2.Provider>): React_2.JSX.Element;
226
+
227
+ export declare function TooltipTrigger({ ...props }: React_2.ComponentProps<typeof Tooltip_2.Trigger>): React_2.JSX.Element;
228
+
229
+ export { }