fancy-ui-svelte 0.5.0 → 0.7.0

package/dist/fancy-ui/registry.js

@@ -485,6 +485,88 @@ export const registry = {
         ],
         slots: [{ name: "children", description: "Link text content" }],
     },
+    "line-reveal": {
+        name: "LineReveal",
+        slug: "line-reveal",
+        description: "Staggered line-by-line text reveal with lines computed by pretext instead of DOM splitting",
+        category: "text",
+        status: "done",
+        credits: [{ source: "pretext", url: "https://github.com/chenglou/pretext" }],
+        tags: ["text", "animation", "reveal", "stagger", "pretext", "typography"],
+        props: [
+            { name: "text", type: "string", description: "Text to reveal", required: true },
+            {
+                name: "font",
+                type: "string",
+                default: "'600 32px \"Helvetica Neue\", Helvetica, Arial, sans-serif'",
+                description: "CSS font shorthand used for both measurement and rendering",
+            },
+            {
+                name: "lineHeight",
+                type: "number",
+                default: "1.2 × font size",
+                description: "Line height in pixels",
+            },
+            {
+                name: "stagger",
+                type: "number",
+                default: "0.08",
+                description: "Delay between lines in seconds",
+            },
+            {
+                name: "duration",
+                type: "number",
+                default: "0.7",
+                description: "Animation duration per line in seconds",
+            },
+            { name: "delay", type: "number", default: "0", description: "Initial delay in seconds" },
+            {
+                name: "once",
+                type: "boolean",
+                default: "true",
+                description: "Animate only on first viewport entry",
+            },
+            { name: "class", type: "string", description: "Additional CSS classes" },
+        ],
+    },
+    "editorial-engine": {
+        name: "EditorialEngine",
+        slug: "editorial-engine",
+        description: "Live magazine layout: multi-column text flowing around draggable orbs with zero DOM reads, powered by pretext",
+        category: "text",
+        status: "done",
+        credits: [
+            { source: "pretext editorial engine", url: "https://chenglou.me/pretext/editorial-engine/" },
+        ],
+        tags: ["text", "layout", "magazine", "columns", "pretext", "interactive", "typography"],
+        props: [
+            {
+                name: "headline",
+                type: "string",
+                default: "built-in copy",
+                description: "Auto-sized headline (largest font size that breaks no word)",
+            },
+            {
+                name: "body",
+                type: "string",
+                default: "built-in copy",
+                description: "Body text, paragraphs separated by blank lines",
+            },
+            {
+                name: "pullquotes",
+                type: "string[]",
+                default: "built-in quotes",
+                description: "Up to two pullquotes embedded in the columns",
+            },
+            {
+                name: "fontFamily",
+                type: "string",
+                default: "Palatino serif stack",
+                description: "Font family stack used for all text",
+            },
+            { name: "class", type: "string", description: "Additional CSS classes for the stage" },
+        ],
+    },
     "logo-cloud": {
         name: "LogoCloud",
         slug: "logo-cloud",
@@ -855,17 +937,6 @@ export const registry = {
             },
         ],
     },
-    "fluid-cursor-advanced": {
-        name: "FluidCursorAdvanced",
-        slug: "fluid-cursor-advanced",
-        description: "WebGL fluid simulation confined to a parent container element",
-        category: "effects",
-        status: "done",
-        credits: [
-            { source: "Inspira UI", url: "https://inspira-ui.com/components/cursor/fluid-cursor" },
-        ],
-        tags: ["cursor", "webgl", "fluid", "simulation", "interactive", "contained"],
-    },
     "glow-border": {
         name: "GlowBorder",
         slug: "glow-border",
@@ -1563,6 +1634,74 @@ export const registry = {
             },
         ],
     },
+    "frosted-glass": {
+        name: "FrostedGlass",
+        slug: "frosted-glass",
+        description: "Frosted glass surface with organic turbulence-noise refraction, an alternative to LiquidGlass",
+        category: "effects",
+        status: "done",
+        tags: ["glass", "effect", "svg", "filter", "turbulence", "displacement", "blur", "navbar"],
+        props: [
+            { name: "radius", type: "number", default: "24", description: "Border radius in pixels" },
+            {
+                name: "baseFrequency",
+                type: "number",
+                default: "0.008",
+                description: "Turbulence noise frequency (lower = wider waves)",
+            },
+            {
+                name: "numOctaves",
+                type: "number",
+                default: "2",
+                description: "Turbulence octaves controlling noise detail",
+            },
+            { name: "seed", type: "number", default: "92", description: "Turbulence random seed" },
+            {
+                name: "noiseBlur",
+                type: "number",
+                default: "2",
+                description: "Gaussian blur softening the noise before displacement",
+            },
+            { name: "scale", type: "number", default: "70", description: "Displacement intensity" },
+            {
+                name: "tint",
+                type: "string",
+                default: '"hsla(0, 0%, 100%, 0.25)"',
+                description: "Overlay tint color",
+            },
+            {
+                name: "highlight",
+                type: "string",
+                default: '"hsla(0, 0%, 100%, 0.75)"',
+                description: "Specular rim highlight color",
+            },
+            {
+                name: "border",
+                type: "boolean",
+                default: "true",
+                description: "Show the conic-gradient glass border",
+            },
+            {
+                name: "fallbackBlur",
+                type: "number",
+                default: "20",
+                description: "Backdrop blur in pixels for the Safari fallback",
+            },
+            {
+                name: "fallbackSaturation",
+                type: "number",
+                default: "180",
+                description: "Backdrop saturation percentage for the Safari fallback",
+            },
+            {
+                name: "containerClass",
+                type: "string",
+                default: '""',
+                description: "CSS classes for the outer container",
+            },
+        ],
+        slots: [{ name: "children", description: "Content rendered on top of the glass" }],
+    },
     "liquid-glass": {
         name: "LiquidGlass",
         slug: "liquid-glass",
@@ -2040,6 +2179,52 @@ export const registry = {
             },
         ],
     },
+    "noise-reveal": {
+        name: "NoiseReveal",
+        slug: "noise-reveal",
+        description: "WebGL image reveal with a Perlin-noise dissolve mask, contracting radial gradient, and wave displacement, inspired by a Codrops shader effect",
+        category: "media",
+        status: "done",
+        credits: [
+            {
+                source: "Codrops",
+                url: "https://tympanus.net/codrops/2024/12/02/how-to-code-a-shader-based-reveal-effect-with-react-three-fiber-glsl/",
+            },
+            {
+                source: "colindmg/r3f-image-reveal-effect",
+                url: "https://github.com/colindmg/r3f-image-reveal-effect",
+            },
+        ],
+        tags: ["media", "image", "reveal", "webgl", "shader", "threejs", "noise"],
+        props: [
+            { name: "src", type: "string", description: "Image URL", required: true },
+            { name: "alt", type: "string", description: "Accessible label for the image" },
+            {
+                name: "trigger",
+                type: '"view" | "manual"',
+                default: '"view"',
+                description: 'Reveal trigger: "view" = on viewport entry, "manual" = via revealed prop',
+            },
+            {
+                name: "revealed",
+                type: "boolean",
+                default: "false",
+                description: 'Manual reveal state (used with trigger="manual"; also allows re-hiding)',
+            },
+            {
+                name: "duration",
+                type: "number",
+                default: "1.5",
+                description: "Reveal animation duration in seconds",
+            },
+            {
+                name: "delay",
+                type: "number",
+                default: "0",
+                description: 'Delay before reveal in seconds (trigger="view")',
+            },
+        ],
+    },
 };
 // =============================================================================
 // Registry Helpers

package/dist/fancy-ui/themes.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Theme registry (docs-site theming data).
+ *
+ * A named theme is a set of CSS-variable overrides applied on top of the base
+ * light/dark token sets defined in `src/routes/layout.css`. The theme store
+ * (`src/lib/stores/theme.svelte.ts`) applies a theme by setting these variables
+ * inline on `<html>`, toggling the `.dark` class per `colorScheme`, and setting
+ * a `data-theme` attribute.
+ *
+ * NOTE: this module is docs/theming data only. It is NOT imported by any shipped
+ * component in `src/lib/fancy-ui/*`, so it does not affect the published package.
+ */
+export type ColorScheme = "light" | "dark";
+export interface ThemeDef {
+    /** Stable id, used as the `data-theme` value and persistence key. */
+    name: string;
+    /** Human label shown in the switcher. */
+    label: string;
+    /** Whether the theme reads as light or dark (drives the `.dark` class). */
+    colorScheme: ColorScheme;
+    /** CSS custom-property overrides applied on top of the base light/dark set. */
+    tokens: Record<string, string>;
+    /** Four representative colors for the switcher swatch. */
+    swatch: [string, string, string, string];
+}
+/** Every CSS variable a theme may set. The store clears these before applying a theme. */
+export declare const MANAGED_VARS: readonly ["--background", "--foreground", "--card", "--card-foreground", "--popover", "--popover-foreground", "--primary", "--primary-foreground", "--secondary", "--secondary-foreground", "--muted", "--muted-foreground", "--accent", "--accent-foreground", "--border", "--input", "--ring", "--radius", "--rainbow-1", "--rainbow-2", "--rainbow-3", "--rainbow-4", "--rainbow-5", "--sidebar", "--sidebar-foreground", "--sidebar-primary", "--sidebar-primary-foreground", "--sidebar-accent", "--sidebar-accent-foreground", "--sidebar-border"];
+/**
+ * The theme list.
+ *
+ * `light` and `dark` carry no token overrides — they are the base look defined
+ * by `:root` / `.dark` in `layout.css`. The remaining themes are self-contained.
+ * `sunset` / `ocean` / `mono` mirror the theme-generator presets.
+ */
+export declare const themes: ThemeDef[];
+export declare function getTheme(name: string): ThemeDef | undefined;
+export declare const themeNames: string[];
+export declare const DEFAULT_THEME = "light";

package/dist/fancy-ui/themes.js

@@ -0,0 +1,356 @@
+/**
+ * Theme registry (docs-site theming data).
+ *
+ * A named theme is a set of CSS-variable overrides applied on top of the base
+ * light/dark token sets defined in `src/routes/layout.css`. The theme store
+ * (`src/lib/stores/theme.svelte.ts`) applies a theme by setting these variables
+ * inline on `<html>`, toggling the `.dark` class per `colorScheme`, and setting
+ * a `data-theme` attribute.
+ *
+ * NOTE: this module is docs/theming data only. It is NOT imported by any shipped
+ * component in `src/lib/fancy-ui/*`, so it does not affect the published package.
+ */
+/** Every CSS variable a theme may set. The store clears these before applying a theme. */
+export const MANAGED_VARS = [
+    "--background",
+    "--foreground",
+    "--card",
+    "--card-foreground",
+    "--popover",
+    "--popover-foreground",
+    "--primary",
+    "--primary-foreground",
+    "--secondary",
+    "--secondary-foreground",
+    "--muted",
+    "--muted-foreground",
+    "--accent",
+    "--accent-foreground",
+    "--border",
+    "--input",
+    "--ring",
+    "--radius",
+    "--rainbow-1",
+    "--rainbow-2",
+    "--rainbow-3",
+    "--rainbow-4",
+    "--rainbow-5",
+    "--sidebar",
+    "--sidebar-foreground",
+    "--sidebar-primary",
+    "--sidebar-primary-foreground",
+    "--sidebar-accent",
+    "--sidebar-accent-foreground",
+    "--sidebar-border",
+];
+const DEFAULT_RAINBOW = [
+    "hsl(0 100% 63%)",
+    "hsl(270 100% 63%)",
+    "hsl(210 100% 63%)",
+    "hsl(195 100% 63%)",
+    "hsl(90 100% 63%)",
+];
+/** Expand a compact spec into a full ThemeDef with a complete token map. */
+function defineTheme(s) {
+    const card = s.card ?? s.bg;
+    const secondary = s.secondary ?? s.accent;
+    const secondaryFg = s.secondaryFg ?? s.accentFg;
+    const muted = s.muted ?? s.border ?? card;
+    const mutedFg = s.mutedFg ?? s.fg;
+    const border = s.border ?? s.muted ?? s.fg;
+    const ring = s.ring ?? s.primary;
+    const radius = s.radius ?? "0.625rem";
+    const rainbow = s.rainbow ?? DEFAULT_RAINBOW;
+    return {
+        name: s.name,
+        label: s.label,
+        colorScheme: s.colorScheme,
+        swatch: [s.primary, s.accent, secondary, s.bg],
+        tokens: {
+            "--background": s.bg,
+            "--foreground": s.fg,
+            "--card": card,
+            "--card-foreground": s.fg,
+            "--popover": card,
+            "--popover-foreground": s.fg,
+            "--primary": s.primary,
+            "--primary-foreground": s.primaryFg,
+            "--secondary": secondary,
+            "--secondary-foreground": secondaryFg,
+            "--muted": muted,
+            "--muted-foreground": mutedFg,
+            "--accent": s.accent,
+            "--accent-foreground": s.accentFg,
+            "--border": border,
+            "--input": border,
+            "--ring": ring,
+            "--radius": radius,
+            "--rainbow-1": rainbow[0],
+            "--rainbow-2": rainbow[1],
+            "--rainbow-3": rainbow[2],
+            "--rainbow-4": rainbow[3],
+            "--rainbow-5": rainbow[4],
+            "--sidebar": card,
+            "--sidebar-foreground": s.fg,
+            "--sidebar-primary": s.primary,
+            "--sidebar-primary-foreground": s.primaryFg,
+            "--sidebar-accent": muted,
+            "--sidebar-accent-foreground": s.fg,
+            "--sidebar-border": border,
+        },
+    };
+}
+/**
+ * The theme list.
+ *
+ * `light` and `dark` carry no token overrides — they are the base look defined
+ * by `:root` / `.dark` in `layout.css`. The remaining themes are self-contained.
+ * `sunset` / `ocean` / `mono` mirror the theme-generator presets.
+ */
+export const themes = [
+    {
+        name: "light",
+        label: "Light",
+        colorScheme: "light",
+        tokens: {},
+        swatch: [
+            "oklch(0.208 0.042 265.755)",
+            "oklch(0.65 0.15 265)",
+            "oklch(0.929 0.013 255.508)",
+            "#ffffff",
+        ],
+    },
+    {
+        name: "dark",
+        label: "Dark",
+        colorScheme: "dark",
+        tokens: {},
+        swatch: [
+            "oklch(0.929 0.013 255.508)",
+            "oklch(0.7 0.15 265)",
+            "oklch(0.15 0.005 260)",
+            "#0a0a0a",
+        ],
+    },
+    defineTheme({
+        name: "cupcake",
+        label: "Cupcake",
+        colorScheme: "light",
+        bg: "#faf7f5",
+        fg: "#291334",
+        card: "#ffffff",
+        primary: "#65c3c8",
+        primaryFg: "#004b50",
+        secondary: "#ef9fbc",
+        secondaryFg: "#5c2437",
+        accent: "#eeaf3a",
+        accentFg: "#4a3000",
+        border: "#e7e2df",
+        radius: "1rem",
+    }),
+    defineTheme({
+        name: "emerald",
+        label: "Emerald",
+        colorScheme: "light",
+        bg: "#ffffff",
+        fg: "#333c4d",
+        primary: "#66cc8a",
+        primaryFg: "#0c3d24",
+        secondary: "#377cfb",
+        secondaryFg: "#ffffff",
+        accent: "#ea5234",
+        accentFg: "#ffffff",
+        border: "#e5e7eb",
+        radius: "0.5rem",
+    }),
+    defineTheme({
+        name: "corporate",
+        label: "Corporate",
+        colorScheme: "light",
+        bg: "#ffffff",
+        fg: "#181a2a",
+        primary: "#4b6bfb",
+        primaryFg: "#ffffff",
+        secondary: "#7b92b2",
+        secondaryFg: "#ffffff",
+        accent: "#67cba0",
+        accentFg: "#00382a",
+        border: "#e5e7eb",
+        radius: "0.25rem",
+    }),
+    defineTheme({
+        name: "retro",
+        label: "Retro",
+        colorScheme: "light",
+        bg: "#ece3ca",
+        fg: "#282425",
+        card: "#e4d8b4",
+        primary: "#ef9995",
+        primaryFg: "#282425",
+        secondary: "#a4cbb4",
+        secondaryFg: "#282425",
+        accent: "#dc8850",
+        accentFg: "#282425",
+        border: "#d1c7a3",
+        radius: "0.5rem",
+    }),
+    defineTheme({
+        name: "cyberpunk",
+        label: "Cyberpunk",
+        colorScheme: "light",
+        bg: "#fff248",
+        fg: "#0f0f00",
+        card: "#fdf700",
+        primary: "#ff7598",
+        primaryFg: "#330014",
+        secondary: "#75d1f0",
+        secondaryFg: "#00222e",
+        accent: "#c07eec",
+        accentFg: "#1e0033",
+        border: "#e6dc00",
+        radius: "0rem",
+        rainbow: [
+            "hsl(330 100% 63%)",
+            "hsl(280 100% 63%)",
+            "hsl(190 100% 60%)",
+            "hsl(55 100% 55%)",
+            "hsl(150 100% 55%)",
+        ],
+    }),
+    defineTheme({
+        name: "synthwave",
+        label: "Synthwave",
+        colorScheme: "dark",
+        bg: "#1a103d",
+        fg: "#f9f7fd",
+        card: "#241650",
+        primary: "#e779c1",
+        primaryFg: "#2a0e2b",
+        secondary: "#58c7f3",
+        secondaryFg: "#003044",
+        accent: "#f3cc30",
+        accentFg: "#3a2e00",
+        muted: "#2b1c5e",
+        mutedFg: "#b9a9e6",
+        border: "#3a2a6b",
+        radius: "0.75rem",
+        rainbow: [
+            "hsl(320 90% 65%)",
+            "hsl(280 90% 68%)",
+            "hsl(195 95% 60%)",
+            "hsl(48 95% 58%)",
+            "hsl(160 80% 55%)",
+        ],
+    }),
+    defineTheme({
+        name: "dracula",
+        label: "Dracula",
+        colorScheme: "dark",
+        bg: "#282a36",
+        fg: "#f8f8f2",
+        card: "#343746",
+        primary: "#ff79c6",
+        primaryFg: "#28202b",
+        secondary: "#bd93f9",
+        secondaryFg: "#241a33",
+        accent: "#ffb86c",
+        accentFg: "#3a2600",
+        muted: "#3a3d4d",
+        mutedFg: "#c7c9d6",
+        border: "#44475a",
+        radius: "0.5rem",
+    }),
+    defineTheme({
+        name: "forest",
+        label: "Forest",
+        colorScheme: "dark",
+        bg: "#171212",
+        fg: "#e0ded9",
+        card: "#1f1a1a",
+        primary: "#1eb854",
+        primaryFg: "#04220f",
+        secondary: "#1fd65f",
+        secondaryFg: "#04220f",
+        accent: "#d99330",
+        accentFg: "#2b1c00",
+        muted: "#26201f",
+        mutedFg: "#b3b0aa",
+        border: "#2e2726",
+        radius: "0.75rem",
+    }),
+    defineTheme({
+        name: "sunset",
+        label: "Sunset",
+        colorScheme: "dark",
+        bg: "#1c1410",
+        fg: "#f5e9e0",
+        card: "#261a13",
+        primary: "oklch(0.62 0.19 30)",
+        primaryFg: "#22100a",
+        secondary: "oklch(0.7 0.17 8)",
+        secondaryFg: "#2a0d0a",
+        accent: "oklch(0.7 0.17 8)",
+        accentFg: "#2a0d0a",
+        muted: "#33241b",
+        mutedFg: "#d8c3b4",
+        border: "#3a2a20",
+        radius: "1rem",
+        rainbow: [
+            "hsl(12 100% 63%)",
+            "hsl(30 100% 63%)",
+            "hsl(350 100% 63%)",
+            "hsl(320 100% 63%)",
+            "hsl(50 100% 63%)",
+        ],
+    }),
+    defineTheme({
+        name: "ocean",
+        label: "Ocean",
+        colorScheme: "light",
+        bg: "#f4fbff",
+        fg: "#0b2a3a",
+        card: "#ffffff",
+        primary: "oklch(0.55 0.13 230)",
+        primaryFg: "#ffffff",
+        secondary: "oklch(0.72 0.13 190)",
+        secondaryFg: "#00303a",
+        accent: "oklch(0.72 0.13 190)",
+        accentFg: "#00303a",
+        muted: "#e3f1f9",
+        mutedFg: "#3a5c6b",
+        border: "#d3e7f0",
+        radius: "0.5rem",
+        rainbow: [
+            "hsl(200 100% 63%)",
+            "hsl(220 100% 63%)",
+            "hsl(180 100% 63%)",
+            "hsl(240 100% 63%)",
+            "hsl(160 100% 63%)",
+        ],
+    }),
+    defineTheme({
+        name: "mono",
+        label: "Mono",
+        colorScheme: "dark",
+        bg: "#0a0a0a",
+        fg: "#fafafa",
+        card: "#161616",
+        primary: "oklch(0.32 0 0)",
+        primaryFg: "#fafafa",
+        secondary: "oklch(0.6 0 0)",
+        secondaryFg: "#0a0a0a",
+        accent: "oklch(0.6 0 0)",
+        accentFg: "#0a0a0a",
+        muted: "#1e1e1e",
+        mutedFg: "#a3a3a3",
+        border: "#2a2a2a",
+        radius: "0.25rem",
+        rainbow: ["hsl(0 0% 80%)", "hsl(0 0% 65%)", "hsl(0 0% 90%)", "hsl(0 0% 55%)", "hsl(0 0% 75%)"],
+    }),
+];
+const themeByName = new Map(themes.map((t) => [t.name, t]));
+export function getTheme(name) {
+    return themeByName.get(name);
+}
+export const themeNames = themes.map((t) => t.name);
+export const DEFAULT_THEME = "light";

package/dist/types.d.ts

@@ -119,4 +119,6 @@ export interface ComponentMeta {
     events?: EventDef[];
     /** Version when component was added */
     since?: string;
+    /** Kept only as a backwards-compatible alias; hidden from generated docs */
+    deprecated?: boolean;
 }