@nous-research/ui 0.13.2 → 0.14.1

package/dist/hooks/use-smooth-controls.js

@@ -1,218 +1,216 @@
-'use client';
-import gsap from 'gsap';
-import { buttonGroup, useControls } from 'leva';
-import { atom } from 'nanostores';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-const atomRegistry = new Map();
-const val = (v) => v && typeof v === 'object' && 'value' in v ? v.value : v;
+"use client";
+import gsap from "gsap";
+import { buttonGroup, useControls } from "leva";
+import { atom } from "nanostores";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+const atomRegistry = /* @__PURE__ */ new Map();
+const val = (v) => v && typeof v === "object" && "value" in v ? v.value : v;
 const isHex = (v) => /color/i.test(v?.type) || /^#[0-9a-f]{3,8}$/i.test(val(v));
-const randHex = () => `#${Math.floor(Math.random() * 0xffffff)
-    .toString(16)
-    .padStart(6, '0')}`;
-const randNum = (v) => typeof v === 'object' && ('min' in v || 'max' in v)
-    ? gsap.utils.random(v.min ?? 0, v.max ?? 1, v.step ?? 0.01)
-    : gsap.utils.random(0, 1);
+const randHex = () => `#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, "0")}`;
+const randNum = (v) => typeof v === "object" && ("min" in v || "max" in v) ? gsap.utils.random(v.min ?? 0, v.max ?? 1, v.step ?? 0.01) : gsap.utils.random(0, 1);
 export function useSmoothControls(label, initialArgs, options, dependencies) {
-    const entries = useMemo(() => Object.entries(initialArgs ?? {}), [initialArgs]);
-    const values = useMemo(() => entries.filter(([, v]) => !/button|folder/i.test(v?.type)), [entries]);
-    // Tracks whether this component instance has mounted yet. When a remount
-    // happens (e.g. Storybook changing a `key` prop to force a lens reset), we
-    // want the module-scoped atoms to be reseeded from the new `initialArgs` so
-    // the first paint reflects the newly-selected preset — not leftover values
-    // from the previous mount.
-    const mountedRef = useRef(false);
-    const atoms = useMemo(() => {
-        const map = atomRegistry.get(label) ?? new Map();
-        if (!atomRegistry.has(label)) {
-            atomRegistry.set(label, map);
-        }
-        const freshMount = !mountedRef.current;
-        entries.forEach(([k, v]) => {
-            if (v?.schema) {
-                Object.keys(v.schema).forEach(sk => {
-                    const key = `${k}.${sk}`;
-                    if (!map.has(key)) {
-                        map.set(key, atom(val(v.schema[sk])));
-                    }
-                    else if (freshMount) {
-                        map.get(key).set(val(v.schema[sk]));
-                    }
-                });
-            }
-            else if (!map.has(k)) {
-                map.set(k, atom(val(v)));
-            }
-            else if (freshMount) {
-                map.get(k).set(val(v));
-            }
+  const entries = useMemo(
+    () => Object.entries(initialArgs ?? {}),
+    [initialArgs]
+  );
+  const values = useMemo(
+    () => entries.filter(([, v]) => !/button|folder/i.test(v?.type)),
+    [entries]
+  );
+  const mountedRef = useRef(false);
+  const atoms = useMemo(() => {
+    const map = atomRegistry.get(label) ?? /* @__PURE__ */ new Map();
+    if (!atomRegistry.has(label)) {
+      atomRegistry.set(label, map);
+    }
+    const freshMount = !mountedRef.current;
+    entries.forEach(([k, v]) => {
+      if (v?.schema) {
+        Object.keys(v.schema).forEach((sk) => {
+          const key = `${k}.${sk}`;
+          if (!map.has(key)) {
+            map.set(key, atom(val(v.schema[sk])));
+          } else if (freshMount) {
+            map.get(key).set(val(v.schema[sk]));
+          }
         });
-        return map;
-    }, [label, entries]);
-    useEffect(() => {
-        mountedRef.current = true;
-    }, []);
-    const hydrate = useCallback(() => Object.fromEntries(entries.flatMap(([k, v]) => v?.schema
-        ? Object.entries(v.schema).map(([k0, v0]) => [
-            k0,
-            atoms.get(`${k}.${k0}`)?.get() ?? val(v0)
-        ])
-        : [[k, atoms.get(k)?.get() ?? val(v)]])), [entries, atoms]);
-    const [args, update] = useState(hydrate);
-    const setRef = useRef(null);
-    const atomVals = useRef({});
-    const fromAtom = useRef(false);
-    const fromControl = useRef(new Set());
-    useEffect(() => {
-        if (Object.keys(args).length !== Object.keys(initialArgs).length) {
-            update(hydrate);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [initialArgs, args]);
-    useEffect(() => {
-        if (!setRef.current) {
-            return;
-        }
-        const unsubs = [];
-        let ready = false;
-        const initTimeout = setTimeout(() => (ready = true), 100);
-        const subscribe = (fullKey, updateFn) => {
-            const a = atoms.get(fullKey);
-            if (!a) {
-                return;
-            }
-            unsubs.push(a.subscribe(v => {
-                const prev = atomVals.current[fullKey];
-                atomVals.current[fullKey] = v;
-                if (setRef.current &&
-                    ready &&
-                    prev !== v &&
-                    !fromControl.current.has(fullKey)) {
-                    fromAtom.current = true;
-                    try {
-                        updateFn(v);
-                    }
-                    catch {
-                        //
-                    }
-                    setTimeout(() => (fromAtom.current = false), 0);
-                }
-            }));
-            atomVals.current[fullKey] = a.get();
-        };
-        entries.forEach(([k, v]) => {
-            if (v?.schema) {
-                Object.keys(v.schema).forEach(sk => {
-                    subscribe(`${k}.${sk}`, v => {
-                        try {
-                            setRef.current({
-                                [k]: { ...(args[k] ?? {}), [sk]: v }
-                            });
-                        }
-                        catch {
-                            //
-                        }
-                        update(st => ({
-                            ...st,
-                            [k]: { ...(st[k] ?? {}), [sk]: v }
-                        }));
-                    });
-                });
+      } else if (!map.has(k)) {
+        map.set(k, atom(val(v)));
+      } else if (freshMount) {
+        map.get(k).set(val(v));
+      }
+    });
+    return map;
+  }, [label, entries]);
+  useEffect(() => {
+    mountedRef.current = true;
+  }, []);
+  const hydrate = useCallback(
+    () => Object.fromEntries(
+      entries.flatMap(
+        ([k, v]) => v?.schema ? Object.entries(v.schema).map(([k0, v0]) => [
+          k0,
+          atoms.get(`${k}.${k0}`)?.get() ?? val(v0)
+        ]) : [[k, atoms.get(k)?.get() ?? val(v)]]
+      )
+    ),
+    [entries, atoms]
+  );
+  const [args, update] = useState(hydrate);
+  const setRef = useRef(null);
+  const atomVals = useRef({});
+  const fromAtom = useRef(false);
+  const fromControl = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    if (Object.keys(args).length !== Object.keys(initialArgs).length) {
+      update(hydrate);
+    }
+  }, [initialArgs, args]);
+  useEffect(() => {
+    if (!setRef.current) {
+      return;
+    }
+    const unsubs = [];
+    let ready = false;
+    const initTimeout = setTimeout(() => ready = true, 100);
+    const subscribe = (fullKey, updateFn) => {
+      const a = atoms.get(fullKey);
+      if (!a) {
+        return;
+      }
+      unsubs.push(
+        a.subscribe((v) => {
+          const prev = atomVals.current[fullKey];
+          atomVals.current[fullKey] = v;
+          if (setRef.current && ready && prev !== v && !fromControl.current.has(fullKey)) {
+            fromAtom.current = true;
+            try {
+              updateFn(v);
+            } catch {
             }
-            else {
-                subscribe(k, v => {
-                    try {
-                        setRef.current({ [k]: v });
-                    }
-                    catch {
-                        //
-                    }
-                    update(st => ({ ...st, [k]: v }));
-                });
+            setTimeout(() => fromAtom.current = false, 0);
+          }
+        })
+      );
+      atomVals.current[fullKey] = a.get();
+    };
+    entries.forEach(([k, v]) => {
+      if (v?.schema) {
+        Object.keys(v.schema).forEach((sk) => {
+          subscribe(`${k}.${sk}`, (v2) => {
+            try {
+              setRef.current({
+                [k]: { ...args[k] ?? {}, [sk]: v2 }
+              });
+            } catch {
             }
+            update((st) => ({
+              ...st,
+              [k]: { ...st[k] ?? {}, [sk]: v2 }
+            }));
+          });
         });
-        return () => {
-            clearTimeout(initTimeout);
-            unsubs.forEach(fn => fn());
-        };
-    }, [label, entries, atoms, args]);
-    const onChange = (k, orig) => (e, k0) => {
-        if (fromAtom.current) {
-            return orig?.(e, k0);
-        }
-        const key = k0?.split('.')?.pop() ?? k;
-        const fullKey = k0 ?? k;
-        const a = atoms.get(fullKey);
-        fromControl.current.add(fullKey);
-        const sync = (v) => {
-            update(st => ({ ...st, [key]: v }));
-            a?.set(v);
-            orig?.(v, k0);
-        };
-        if (typeof e === 'number' && args[key] !== e) {
-            gsap.to(args, {
-                duration: options?.duration ?? 0.35,
-                ease: 'circ.out',
-                [key]: e,
-                onComplete: () => void fromControl.current.delete(fullKey),
-                onUpdate: () => {
-                    fromControl.current.add(fullKey);
-                    sync(args[key]);
-                    setTimeout(() => fromControl.current.delete(fullKey), 0);
-                }
-            });
-        }
-        else {
-            sync(e);
-            setTimeout(() => fromControl.current.delete(fullKey), 0);
-        }
+      } else {
+        subscribe(k, (v2) => {
+          try {
+            setRef.current({ [k]: v2 });
+          } catch {
+          }
+          update((st) => ({ ...st, [k]: v2 }));
+        });
+      }
+    });
+    return () => {
+      clearTimeout(initTimeout);
+      unsubs.forEach((fn) => fn());
     };
-    const [, set] = useControls(label, () => ({
-        ...Object.fromEntries(entries.map(([k, v]) => v?.schema
-            ? [
-                k,
-                {
-                    ...v,
-                    schema: Object.fromEntries(Object.entries(v.schema).map(([sk, sv]) => [
-                        sk,
-                        { ...sv, onChange: onChange(k, sv?.onChange) }
-                    ]))
-                }
-            ]
-            : [k, { ...v, onChange: onChange(k, v?.onChange) }])),
-        ' ': buttonGroup({
-            flatten: () => void set(Object.fromEntries(values.map(([k]) => [k, 0]))),
-            randomize: () => {
-                set(Object.fromEntries(values.map(([k, v]) => [k, isHex(v) ? randHex() : randNum(v)])));
-                options?.onRandomize?.();
-            },
-            reset: () => {
-                set(Object.fromEntries(values.map(([k, v]) => [k, val(v)])));
-                options?.onReset?.();
+  }, [label, entries, atoms, args]);
+  const onChange = (k, orig) => (e, k0) => {
+    if (fromAtom.current) {
+      return orig?.(e, k0);
+    }
+    const key = k0?.split(".")?.pop() ?? k;
+    const fullKey = k0 ?? k;
+    const a = atoms.get(fullKey);
+    fromControl.current.add(fullKey);
+    const sync = (v) => {
+      update((st) => ({ ...st, [key]: v }));
+      a?.set(v);
+      orig?.(v, k0);
+    };
+    if (typeof e === "number" && args[key] !== e) {
+      gsap.to(args, {
+        duration: options?.duration ?? 0.35,
+        ease: "circ.out",
+        [key]: e,
+        onComplete: () => void fromControl.current.delete(fullKey),
+        onUpdate: () => {
+          fromControl.current.add(fullKey);
+          sync(args[key]);
+          setTimeout(() => fromControl.current.delete(fullKey), 0);
+        }
+      });
+    } else {
+      sync(e);
+      setTimeout(() => fromControl.current.delete(fullKey), 0);
+    }
+  };
+  const [, set] = useControls(
+    label,
+    () => ({
+      ...Object.fromEntries(
+        entries.map(
+          ([k, v]) => v?.schema ? [
+            k,
+            {
+              ...v,
+              schema: Object.fromEntries(
+                Object.entries(v.schema).map(([sk, sv]) => [
+                  sk,
+                  { ...sv, onChange: onChange(k, sv?.onChange) }
+                ])
+              )
             }
-        })
-    }), { collapsed: true, ...options }, dependencies ?? []);
-    setRef.current = set;
-    return args;
+          ] : [k, { ...v, onChange: onChange(k, v?.onChange) }]
+        )
+      ),
+      " ": buttonGroup({
+        flatten: () => void set(Object.fromEntries(values.map(([k]) => [k, 0]))),
+        randomize: () => {
+          set(
+            Object.fromEntries(
+              values.map(([k, v]) => [k, isHex(v) ? randHex() : randNum(v)])
+            )
+          );
+          options?.onRandomize?.();
+        },
+        reset: () => {
+          set(Object.fromEntries(values.map(([k, v]) => [k, val(v)])));
+          options?.onReset?.();
+        }
+      })
+    }),
+    { collapsed: true, ...options },
+    dependencies ?? []
+  );
+  setRef.current = set;
+  return args;
 }
 export const getControlAtom = (label, key) => atomRegistry.get(label)?.get(key);
 export const setControlValue = (label, key, value, options) => {
-    const a = getControlAtom(label, key);
-    if (!a) {
-        return;
-    }
-    if (options?.animate &&
-        typeof value === 'number' &&
-        typeof a.get() === 'number') {
-        const t = { v: a.get() };
-        gsap.to(t, {
-            duration: options.duration ?? 0.35,
-            ease: 'circ.out',
-            onUpdate: () => a.set(t.v),
-            v: value
-        });
-    }
-    else {
-        a.set(value);
-    }
+  const a = getControlAtom(label, key);
+  if (!a) {
+    return;
+  }
+  if (options?.animate && typeof value === "number" && typeof a.get() === "number") {
+    const t = { v: a.get() };
+    gsap.to(t, {
+      duration: options.duration ?? 0.35,
+      ease: "circ.out",
+      onUpdate: () => a.set(t.v),
+      v: value
+    });
+  } else {
+    a.set(value);
+  }
 };
-//# sourceMappingURL=use-smooth-controls.js.map

package/dist/index.d.ts

@@ -66,4 +66,3 @@ export { useCappedFrame } from './hooks/use-capped-frame';
 export { useCssVarDims } from './hooks/use-css-var-dims';
 export { $gpuTier, useGpuTier } from './hooks/use-gpu-tier';
 export { useSmoothControls, getControlAtom, setControlValue } from './hooks/use-smooth-controls';
-//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,58 +1,84 @@
-export { AnimatedCount, useAnimatedCount } from './ui/components/animated-count';
-export { AsciiSkeleton, Scramble as AsciiScramble } from './ui/components/ascii';
-export { Badge } from './ui/components/badge';
-export { NousGirlBadge } from './ui/components/badges/nous-girl';
-export { BlendMode, useBlendMode, withBlendMode } from './ui/components/blend-mode';
-export { Blink } from './ui/components/blink';
-export { Button } from './ui/components/button';
-export { CommandBlock, CopyButton } from './ui/components/command-block';
-export { Cursor } from './ui/components/cursor';
-export { DropdownMenu } from './ui/components/dropdown-menu';
-export { FitText } from './ui/components/fit-text';
-export { BarChart, LineChart } from './ui/components/graphs';
-export { Cell, Grid } from './ui/components/grid';
-export { HoverBg } from './ui/components/hover-bg';
-export * as Icons from './ui/components/icons';
-export { DiscordIcon } from './ui/components/icons/discord';
-export { GitHubIcon } from './ui/components/icons/github';
-export { ImageDistortion } from './ui/components/image-distortion';
-export { LevaClient } from './ui/components/leva-client';
-export { ListItem } from './ui/components/list-item';
-export { Modal } from './ui/components/modal';
-export { FilterGroup, Segmented } from './ui/components/segmented';
-export { Switch } from './ui/components/switch';
-export { Tabs, TabsList, TabsTrigger } from './ui/components/tabs';
-export { Poster } from './ui/components/poster';
-export { applyLens, BLEND_MODES, LENSES, LENS_0, LENS_5I, lens0, lens5i, toggleLens, $lightMode } from './ui/components/overlays';
-export { Glitch, Greys, Lens, Noise, Overlays, Vignette } from './ui/components/overlays';
-export { Progress } from './ui/components/progress';
-export { SceneCanvas } from './ui/components/scene-canvas';
-export { Scramble } from './ui/components/scramble';
-export { Select, SelectOption } from './ui/components/select';
-export { SelectionSwitcher } from './ui/components/selection-switcher';
-export { Spinner } from './ui/components/spinner';
-export { Stats } from './ui/components/stats';
-export { TerminalDemo } from './ui/components/terminal-demo';
-export { ThemeToggle } from './ui/components/theme-toggle';
-export { TierCard } from './ui/components/tier-card';
-export { TV } from './ui/components/tv';
-export { Watchlist } from './ui/components/watchlist';
-export { Typography } from './ui/components/typography';
-export { H1 } from './ui/components/typography/h1';
-export { H2 } from './ui/components/typography/h2';
-export { Legend } from './ui/components/typography/legend';
-export { Small } from './ui/components/typography/small';
-export { BasicPage } from './ui/basic-page';
-export { Header } from './ui/header';
-export { Footer } from './ui/footer';
-export { Socials } from './ui/components/socials';
-export { LayoutWrapper } from './ui/layout-wrapper';
-export { FONT_SANS, FONT_MONO, FONT_RULES_COMPRESSED, FONT_RULES_EXPANDED, FONT_MONDWEST } from './fonts';
-export { cn, clamp, smoothstep, hexToVec3, truncate, stripWpStyles } from './utils';
-export { polyRef } from './utils';
-export { hexToRgb, rgbToHex, colorDodge, colorMix } from './utils/color';
-export { useCappedFrame } from './hooks/use-capped-frame';
-export { useCssVarDims } from './hooks/use-css-var-dims';
-export { $gpuTier, useGpuTier } from './hooks/use-gpu-tier';
-export { useSmoothControls, getControlAtom, setControlValue } from './hooks/use-smooth-controls';
-//# sourceMappingURL=index.js.map
+export { AnimatedCount, useAnimatedCount } from "./ui/components/animated-count.js";
+export { AsciiSkeleton, Scramble as AsciiScramble } from "./ui/components/ascii.js";
+export { Badge } from "./ui/components/badge.js";
+export { NousGirlBadge } from "./ui/components/badges/nous-girl.js";
+export { BlendMode, useBlendMode, withBlendMode } from "./ui/components/blend-mode.js";
+export { Blink } from "./ui/components/blink.js";
+export { Button } from "./ui/components/button.js";
+export { CommandBlock, CopyButton } from "./ui/components/command-block.js";
+export { Cursor } from "./ui/components/cursor.js";
+export { DropdownMenu } from "./ui/components/dropdown-menu.js";
+export { FitText } from "./ui/components/fit-text/index.js";
+export { BarChart, LineChart } from "./ui/components/graphs/index.js";
+export { Cell, Grid } from "./ui/components/grid/index.js";
+export { HoverBg } from "./ui/components/hover-bg.js";
+export * as Icons from "./ui/components/icons/index.js";
+export { DiscordIcon } from "./ui/components/icons/discord.js";
+export { GitHubIcon } from "./ui/components/icons/github.js";
+export { ImageDistortion } from "./ui/components/image-distortion.js";
+export { LevaClient } from "./ui/components/leva-client.js";
+export { ListItem } from "./ui/components/list-item.js";
+export { Modal } from "./ui/components/modal/index.js";
+export { FilterGroup, Segmented } from "./ui/components/segmented.js";
+export { Switch } from "./ui/components/switch.js";
+export { Tabs, TabsList, TabsTrigger } from "./ui/components/tabs.js";
+export { Poster } from "./ui/components/poster.js";
+export {
+  applyLens,
+  BLEND_MODES,
+  LENSES,
+  LENS_0,
+  LENS_5I,
+  lens0,
+  lens5i,
+  toggleLens,
+  $lightMode
+} from "./ui/components/overlays";
+export {
+  Glitch,
+  Greys,
+  Lens,
+  Noise,
+  Overlays,
+  Vignette
+} from "./ui/components/overlays/index.js";
+export { Progress } from "./ui/components/progress.js";
+export { SceneCanvas } from "./ui/components/scene-canvas.js";
+export { Scramble } from "./ui/components/scramble.js";
+export { Select, SelectOption } from "./ui/components/select.js";
+export { SelectionSwitcher } from "./ui/components/selection-switcher.js";
+export { Spinner } from "./ui/components/spinner.js";
+export { Stats } from "./ui/components/stats.js";
+export { TerminalDemo } from "./ui/components/terminal-demo.js";
+export { ThemeToggle } from "./ui/components/theme-toggle.js";
+export { TierCard } from "./ui/components/tier-card.js";
+export { TV } from "./ui/components/tv.js";
+export { Watchlist } from "./ui/components/watchlist.js";
+export { Typography } from "./ui/components/typography/index.js";
+export { H1 } from "./ui/components/typography/h1.js";
+export { H2 } from "./ui/components/typography/h2.js";
+export { Legend } from "./ui/components/typography/legend.js";
+export { Small } from "./ui/components/typography/small.js";
+export { BasicPage } from "./ui/basic-page.js";
+export { Header } from "./ui/header.js";
+export { Footer } from "./ui/footer.js";
+export { Socials } from "./ui/components/socials.js";
+export { LayoutWrapper } from "./ui/layout-wrapper.js";
+export {
+  FONT_SANS,
+  FONT_MONO,
+  FONT_RULES_COMPRESSED,
+  FONT_RULES_EXPANDED,
+  FONT_MONDWEST
+} from "./fonts.js";
+export { cn, clamp, smoothstep, hexToVec3, truncate, stripWpStyles } from "./utils/index.js";
+export { polyRef } from "./utils/index.js";
+export { hexToRgb, rgbToHex, colorDodge, colorMix } from "./utils/color.js";
+export { useCappedFrame } from "./hooks/use-capped-frame.js";
+export { useCssVarDims } from "./hooks/use-css-var-dims.js";
+export { $gpuTier, useGpuTier } from "./hooks/use-gpu-tier.js";
+export {
+  useSmoothControls,
+  getControlAtom,
+  setControlValue
+} from "./hooks/use-smooth-controls.js";

package/dist/ui/basic-page.d.ts

@@ -1,8 +1,7 @@
 import type { ReactNode } from 'react';
-export declare function BasicPage({ children, subtitle, title }: BasicPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function BasicPage({ children, subtitle, title }: BasicPageProps): import("react").JSX.Element;
 interface BasicPageProps extends React.PropsWithChildren {
     subtitle?: string;
     title?: ReactNode;
 }
 export {};
-//# sourceMappingURL=basic-page.d.ts.map

package/dist/ui/basic-page.js

@@ -1,9 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Cell, Grid } from './components/grid';
-import { Progress } from './components/progress';
-import { H1 } from './components/typography/h1';
-import { Small } from './components/typography/small';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Cell, Grid } from "./components/grid/index.js";
+import { Progress } from "./components/progress.js";
+import { H1 } from "./components/typography/h1.js";
+import { Small } from "./components/typography/small.js";
 export function BasicPage({ children, subtitle, title }) {
-    return (_jsxs(_Fragment, { children: [_jsx(Grid, { children: _jsx(Cell, { children: _jsx(Progress, { value: 0 }) }) }), _jsxs(Grid, { className: "lg:grid-cols-[max-content_1fr]", children: [_jsx(Cell, { className: "-order-1", children: _jsxs("div", { className: "sticky top-4 flex flex-col gap-4", children: [title ? _jsx(H1, { className: "-mb-2 pr-10 opacity-90", children: title }) : null, subtitle ? _jsx(Small, { className: "opacity-60", children: subtitle }) : null] }) }), _jsx(Cell, { className: "post bg-current/3", children: children })] })] }));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Progress, { value: 0 }) }) }),
+    /* @__PURE__ */ jsxs(Grid, { className: "lg:grid-cols-[max-content_1fr]", children: [
+      /* @__PURE__ */ jsx(Cell, { className: "-order-1", children: /* @__PURE__ */ jsxs("div", { className: "sticky top-4 flex flex-col gap-4", children: [
+        title ? /* @__PURE__ */ jsx(H1, { className: "-mb-2 pr-10 opacity-90", children: title }) : null,
+        subtitle ? /* @__PURE__ */ jsx(Small, { className: "opacity-60", children: subtitle }) : null
+      ] }) }),
+      /* @__PURE__ */ jsx(Cell, { className: "post bg-current/3", children })
+    ] })
+  ] });
 }
-//# sourceMappingURL=basic-page.js.map

package/dist/ui/build.css

@@ -1,3 +1,4 @@
 @import "tailwindcss";
 @source "../";
+@import "./fonts.css";
 @import "./globals.css";

package/dist/ui/components/animated-count.d.ts

@@ -1,5 +1,5 @@
 export declare function useAnimatedCount(from: number, rate: number, ts?: Date, pausedAt?: Date): number;
-export declare function AnimatedCount({ damping, duration, pausedAt, rate, value }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function AnimatedCount({ damping, duration, pausedAt, rate, value }: Props): import("react").JSX.Element;
 interface Props {
     damping?: number;
     duration?: number;
@@ -8,4 +8,3 @@ interface Props {
     value: number;
 }
 export {};
-//# sourceMappingURL=animated-count.d.ts.map