@nous-research/ui 0.13.1 → 0.14.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.
- package/README.md +4 -1
- package/dist/assets/filler-bg0.webp +0 -0
- package/dist/assets.d.ts +38 -0
- package/dist/fonts.d.ts +0 -1
- package/dist/fonts.js +5 -7
- package/dist/hooks/use-capped-frame.d.ts +0 -1
- package/dist/hooks/use-capped-frame.js +12 -13
- package/dist/hooks/use-css-var-dims.d.ts +0 -1
- package/dist/hooks/use-css-var-dims.js +26 -21
- package/dist/hooks/use-gpu-tier.d.ts +0 -1
- package/dist/hooks/use-gpu-tier.js +90 -110
- package/dist/hooks/use-render-loop.d.ts +0 -1
- package/dist/hooks/use-render-loop.js +58 -58
- package/dist/hooks/use-smooth-controls.d.ts +0 -1
- package/dist/hooks/use-smooth-controls.js +204 -206
- package/dist/index.d.ts +0 -1
- package/dist/index.js +84 -58
- package/dist/ui/basic-page.d.ts +1 -2
- package/dist/ui/basic-page.js +15 -7
- package/dist/ui/components/animated-count.d.ts +1 -2
- package/dist/ui/components/animated-count.js +109 -85
- package/dist/ui/components/ascii.d.ts +2 -3
- package/dist/ui/components/ascii.js +75 -59
- package/dist/ui/components/badge.d.ts +1 -2
- package/dist/ui/components/badge.js +35 -18
- package/dist/ui/components/badges/nous-girl.d.ts +1 -2
- package/dist/ui/components/badges/nous-girl.js +80 -3
- package/dist/ui/components/blend-mode.d.ts +1 -2
- package/dist/ui/components/blend-mode.js +55 -63
- package/dist/ui/components/blink.d.ts +1 -2
- package/dist/ui/components/blink.js +15 -6
- package/dist/ui/components/button.d.ts +2 -3
- package/dist/ui/components/button.js +139 -90
- package/dist/ui/components/command-block.d.ts +2 -3
- package/dist/ui/components/command-block.js +52 -24
- package/dist/ui/components/cursor.d.ts +1 -2
- package/dist/ui/components/cursor.js +93 -54
- package/dist/ui/components/dropdown-menu.d.ts +1 -2
- package/dist/ui/components/dropdown-menu.js +99 -51
- package/dist/ui/components/fit-text/index.d.ts +0 -1
- package/dist/ui/components/fit-text/index.js +21 -13
- package/dist/ui/components/graphs/bar-chart.d.ts +1 -2
- package/dist/ui/components/graphs/bar-chart.js +116 -63
- package/dist/ui/components/graphs/index.d.ts +0 -1
- package/dist/ui/components/graphs/index.js +3 -4
- package/dist/ui/components/graphs/line-chart.d.ts +1 -2
- package/dist/ui/components/graphs/line-chart.js +159 -102
- package/dist/ui/components/graphs/utils.d.ts +2 -3
- package/dist/ui/components/graphs/utils.js +147 -114
- package/dist/ui/components/grid/index.d.ts +0 -1
- package/dist/ui/components/grid/index.js +12 -9
- package/dist/ui/components/hover-bg.d.ts +0 -1
- package/dist/ui/components/hover-bg.js +11 -6
- package/dist/ui/components/icons/arrow.d.ts +1 -2
- package/dist/ui/components/icons/arrow.js +42 -5
- package/dist/ui/components/icons/chevron.d.ts +1 -2
- package/dist/ui/components/icons/chevron.js +49 -5
- package/dist/ui/components/icons/discord.d.ts +1 -2
- package/dist/ui/components/icons/discord.js +12 -4
- package/dist/ui/components/icons/eye.d.ts +1 -2
- package/dist/ui/components/icons/eye.js +5 -3
- package/dist/ui/components/icons/gear.d.ts +1 -2
- package/dist/ui/components/icons/gear.js +28 -14
- package/dist/ui/components/icons/github.d.ts +1 -2
- package/dist/ui/components/icons/github.js +12 -4
- package/dist/ui/components/icons/hamburger.d.ts +1 -2
- package/dist/ui/components/icons/hamburger.js +54 -5
- package/dist/ui/components/icons/heart.d.ts +1 -2
- package/dist/ui/components/icons/heart.js +8 -3
- package/dist/ui/components/icons/index.d.ts +0 -1
- package/dist/ui/components/icons/index.js +11 -12
- package/dist/ui/components/icons/link.d.ts +1 -2
- package/dist/ui/components/icons/link.js +10 -3
- package/dist/ui/components/icons/minus.d.ts +1 -2
- package/dist/ui/components/icons/minus.js +10 -3
- package/dist/ui/components/icons/search.d.ts +1 -2
- package/dist/ui/components/icons/search.js +30 -3
- package/dist/ui/components/image-distortion.d.ts +1 -2
- package/dist/ui/components/image-distortion.js +300 -265
- package/dist/ui/components/leva-client.d.ts +1 -2
- package/dist/ui/components/leva-client.js +9 -10
- package/dist/ui/components/list-item.d.ts +0 -1
- package/dist/ui/components/list-item.js +26 -10
- package/dist/ui/components/modal/index.d.ts +1 -2
- package/dist/ui/components/modal/index.js +33 -14
- package/dist/ui/components/overlays/blend-modes.d.ts +0 -1
- package/dist/ui/components/overlays/blend-modes.js +11 -12
- package/dist/ui/components/overlays/glitch.d.ts +1 -2
- package/dist/ui/components/overlays/glitch.js +115 -110
- package/dist/ui/components/overlays/greys.d.ts +1 -2
- package/dist/ui/components/overlays/greys.js +200 -179
- package/dist/ui/components/overlays/index.d.ts +1 -2
- package/dist/ui/components/overlays/index.js +31 -17
- package/dist/ui/components/overlays/lens-layers.d.ts +1 -2
- package/dist/ui/components/overlays/lens-layers.js +89 -65
- package/dist/ui/components/overlays/lens.d.ts +0 -1
- package/dist/ui/components/overlays/lens.js +46 -52
- package/dist/ui/components/overlays/noise.d.ts +1 -2
- package/dist/ui/components/overlays/noise.js +112 -113
- package/dist/ui/components/overlays/vignette.d.ts +1 -2
- package/dist/ui/components/overlays/vignette.js +44 -38
- package/dist/ui/components/poster.d.ts +1 -2
- package/dist/ui/components/poster.js +240 -87
- package/dist/ui/components/progress.d.ts +1 -2
- package/dist/ui/components/progress.js +52 -12
- package/dist/ui/components/scene-canvas.d.ts +1 -2
- package/dist/ui/components/scene-canvas.js +169 -119
- package/dist/ui/components/scramble.d.ts +1 -2
- package/dist/ui/components/scramble.js +60 -59
- package/dist/ui/components/segmented.d.ts +2 -3
- package/dist/ui/components/segmented.js +47 -12
- package/dist/ui/components/select.d.ts +1 -2
- package/dist/ui/components/select.js +207 -120
- package/dist/ui/components/selection-switcher.d.ts +0 -1
- package/dist/ui/components/selection-switcher.js +29 -25
- package/dist/ui/components/shader.d.ts +1 -2
- package/dist/ui/components/shader.js +56 -38
- package/dist/ui/components/socials.d.ts +1 -2
- package/dist/ui/components/socials.js +18 -7
- package/dist/ui/components/spinner.d.ts +1 -2
- package/dist/ui/components/spinner.js +36 -25
- package/dist/ui/components/stats.d.ts +1 -2
- package/dist/ui/components/stats.js +33 -9
- package/dist/ui/components/switch.d.ts +0 -1
- package/dist/ui/components/switch.js +35 -11
- package/dist/ui/components/tabs.d.ts +3 -4
- package/dist/ui/components/tabs.js +38 -12
- package/dist/ui/components/terminal-demo.d.ts +1 -2
- package/dist/ui/components/terminal-demo.js +119 -74
- package/dist/ui/components/theme-toggle.d.ts +1 -2
- package/dist/ui/components/theme-toggle.js +63 -8
- package/dist/ui/components/tier-card.d.ts +1 -2
- package/dist/ui/components/tier-card.js +144 -24
- package/dist/ui/components/tv.d.ts +1 -2
- package/dist/ui/components/tv.js +138 -90
- package/dist/ui/components/typography/h1.d.ts +0 -1
- package/dist/ui/components/typography/h1.js +17 -8
- package/dist/ui/components/typography/h2.d.ts +0 -1
- package/dist/ui/components/typography/h2.js +17 -8
- package/dist/ui/components/typography/index.d.ts +0 -1
- package/dist/ui/components/typography/index.js +35 -24
- package/dist/ui/components/typography/legend.d.ts +1 -2
- package/dist/ui/components/typography/legend.js +18 -6
- package/dist/ui/components/typography/small.d.ts +0 -1
- package/dist/ui/components/typography/small.js +8 -7
- package/dist/ui/components/watchlist.d.ts +1 -2
- package/dist/ui/components/watchlist.js +77 -25
- package/dist/ui/fonts.css +7 -7
- package/dist/ui/footer.d.ts +1 -2
- package/dist/ui/footer.js +61 -25
- package/dist/ui/header.d.ts +1 -2
- package/dist/ui/header.js +255 -60
- package/dist/ui/layout-wrapper.d.ts +1 -2
- package/dist/ui/layout-wrapper.js +5 -4
- package/dist/utils/color.d.ts +0 -1
- package/dist/utils/color.js +8 -9
- package/dist/utils/index.d.ts +0 -1
- package/dist/utils/index.js +37 -38
- package/dist/utils/poly.d.ts +0 -1
- package/dist/utils/poly.js +1 -2
- package/package.json +43 -25
- package/dist/assets/filler-bg0.jpg +0 -0
- package/dist/fonts.d.ts.map +0 -1
- package/dist/fonts.js.map +0 -1
- package/dist/hooks/use-capped-frame.d.ts.map +0 -1
- package/dist/hooks/use-capped-frame.js.map +0 -1
- package/dist/hooks/use-css-var-dims.d.ts.map +0 -1
- package/dist/hooks/use-css-var-dims.js.map +0 -1
- package/dist/hooks/use-gpu-tier.d.ts.map +0 -1
- package/dist/hooks/use-gpu-tier.js.map +0 -1
- package/dist/hooks/use-render-loop.d.ts.map +0 -1
- package/dist/hooks/use-render-loop.js.map +0 -1
- package/dist/hooks/use-smooth-controls.d.ts.map +0 -1
- package/dist/hooks/use-smooth-controls.js.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/ui/basic-page.d.ts.map +0 -1
- package/dist/ui/basic-page.js.map +0 -1
- package/dist/ui/components/animated-count.d.ts.map +0 -1
- package/dist/ui/components/animated-count.js.map +0 -1
- package/dist/ui/components/ascii.d.ts.map +0 -1
- package/dist/ui/components/ascii.js.map +0 -1
- package/dist/ui/components/badge.d.ts.map +0 -1
- package/dist/ui/components/badge.js.map +0 -1
- package/dist/ui/components/badges/nous-girl.d.ts.map +0 -1
- package/dist/ui/components/badges/nous-girl.js.map +0 -1
- package/dist/ui/components/blend-mode.d.ts.map +0 -1
- package/dist/ui/components/blend-mode.js.map +0 -1
- package/dist/ui/components/blink.d.ts.map +0 -1
- package/dist/ui/components/blink.js.map +0 -1
- package/dist/ui/components/button.d.ts.map +0 -1
- package/dist/ui/components/button.js.map +0 -1
- package/dist/ui/components/command-block.d.ts.map +0 -1
- package/dist/ui/components/command-block.js.map +0 -1
- package/dist/ui/components/cursor.d.ts.map +0 -1
- package/dist/ui/components/cursor.js.map +0 -1
- package/dist/ui/components/dropdown-menu.d.ts.map +0 -1
- package/dist/ui/components/dropdown-menu.js.map +0 -1
- package/dist/ui/components/fit-text/index.d.ts.map +0 -1
- package/dist/ui/components/fit-text/index.js.map +0 -1
- package/dist/ui/components/graphs/bar-chart.d.ts.map +0 -1
- package/dist/ui/components/graphs/bar-chart.js.map +0 -1
- package/dist/ui/components/graphs/index.d.ts.map +0 -1
- package/dist/ui/components/graphs/index.js.map +0 -1
- package/dist/ui/components/graphs/line-chart.d.ts.map +0 -1
- package/dist/ui/components/graphs/line-chart.js.map +0 -1
- package/dist/ui/components/graphs/utils.d.ts.map +0 -1
- package/dist/ui/components/graphs/utils.js.map +0 -1
- package/dist/ui/components/grid/index.d.ts.map +0 -1
- package/dist/ui/components/grid/index.js.map +0 -1
- package/dist/ui/components/hover-bg.d.ts.map +0 -1
- package/dist/ui/components/hover-bg.js.map +0 -1
- package/dist/ui/components/icons/arrow.d.ts.map +0 -1
- package/dist/ui/components/icons/arrow.js.map +0 -1
- package/dist/ui/components/icons/chevron.d.ts.map +0 -1
- package/dist/ui/components/icons/chevron.js.map +0 -1
- package/dist/ui/components/icons/discord.d.ts.map +0 -1
- package/dist/ui/components/icons/discord.js.map +0 -1
- package/dist/ui/components/icons/eye.d.ts.map +0 -1
- package/dist/ui/components/icons/eye.js.map +0 -1
- package/dist/ui/components/icons/gear.d.ts.map +0 -1
- package/dist/ui/components/icons/gear.js.map +0 -1
- package/dist/ui/components/icons/github.d.ts.map +0 -1
- package/dist/ui/components/icons/github.js.map +0 -1
- package/dist/ui/components/icons/hamburger.d.ts.map +0 -1
- package/dist/ui/components/icons/hamburger.js.map +0 -1
- package/dist/ui/components/icons/heart.d.ts.map +0 -1
- package/dist/ui/components/icons/heart.js.map +0 -1
- package/dist/ui/components/icons/index.d.ts.map +0 -1
- package/dist/ui/components/icons/index.js.map +0 -1
- package/dist/ui/components/icons/link.d.ts.map +0 -1
- package/dist/ui/components/icons/link.js.map +0 -1
- package/dist/ui/components/icons/minus.d.ts.map +0 -1
- package/dist/ui/components/icons/minus.js.map +0 -1
- package/dist/ui/components/icons/search.d.ts.map +0 -1
- package/dist/ui/components/icons/search.js.map +0 -1
- package/dist/ui/components/image-distortion.d.ts.map +0 -1
- package/dist/ui/components/image-distortion.js.map +0 -1
- package/dist/ui/components/leva-client.d.ts.map +0 -1
- package/dist/ui/components/leva-client.js.map +0 -1
- package/dist/ui/components/list-item.d.ts.map +0 -1
- package/dist/ui/components/list-item.js.map +0 -1
- package/dist/ui/components/modal/index.d.ts.map +0 -1
- package/dist/ui/components/modal/index.js.map +0 -1
- package/dist/ui/components/overlays/blend-modes.d.ts.map +0 -1
- package/dist/ui/components/overlays/blend-modes.js.map +0 -1
- package/dist/ui/components/overlays/glitch.d.ts.map +0 -1
- package/dist/ui/components/overlays/glitch.js.map +0 -1
- package/dist/ui/components/overlays/greys.d.ts.map +0 -1
- package/dist/ui/components/overlays/greys.js.map +0 -1
- package/dist/ui/components/overlays/index.d.ts.map +0 -1
- package/dist/ui/components/overlays/index.js.map +0 -1
- package/dist/ui/components/overlays/lens-layers.d.ts.map +0 -1
- package/dist/ui/components/overlays/lens-layers.js.map +0 -1
- package/dist/ui/components/overlays/lens.d.ts.map +0 -1
- package/dist/ui/components/overlays/lens.js.map +0 -1
- package/dist/ui/components/overlays/noise.d.ts.map +0 -1
- package/dist/ui/components/overlays/noise.js.map +0 -1
- package/dist/ui/components/overlays/vignette.d.ts.map +0 -1
- package/dist/ui/components/overlays/vignette.js.map +0 -1
- package/dist/ui/components/poster.d.ts.map +0 -1
- package/dist/ui/components/poster.js.map +0 -1
- package/dist/ui/components/progress.d.ts.map +0 -1
- package/dist/ui/components/progress.js.map +0 -1
- package/dist/ui/components/scene-canvas.d.ts.map +0 -1
- package/dist/ui/components/scene-canvas.js.map +0 -1
- package/dist/ui/components/scramble.d.ts.map +0 -1
- package/dist/ui/components/scramble.js.map +0 -1
- package/dist/ui/components/segmented.d.ts.map +0 -1
- package/dist/ui/components/segmented.js.map +0 -1
- package/dist/ui/components/select.d.ts.map +0 -1
- package/dist/ui/components/select.js.map +0 -1
- package/dist/ui/components/selection-switcher.d.ts.map +0 -1
- package/dist/ui/components/selection-switcher.js.map +0 -1
- package/dist/ui/components/shader.d.ts.map +0 -1
- package/dist/ui/components/shader.js.map +0 -1
- package/dist/ui/components/socials.d.ts.map +0 -1
- package/dist/ui/components/socials.js.map +0 -1
- package/dist/ui/components/spinner.d.ts.map +0 -1
- package/dist/ui/components/spinner.js.map +0 -1
- package/dist/ui/components/stats.d.ts.map +0 -1
- package/dist/ui/components/stats.js.map +0 -1
- package/dist/ui/components/switch.d.ts.map +0 -1
- package/dist/ui/components/switch.js.map +0 -1
- package/dist/ui/components/tabs.d.ts.map +0 -1
- package/dist/ui/components/tabs.js.map +0 -1
- package/dist/ui/components/terminal-demo.d.ts.map +0 -1
- package/dist/ui/components/terminal-demo.js.map +0 -1
- package/dist/ui/components/theme-toggle.d.ts.map +0 -1
- package/dist/ui/components/theme-toggle.js.map +0 -1
- package/dist/ui/components/tier-card.d.ts.map +0 -1
- package/dist/ui/components/tier-card.js.map +0 -1
- package/dist/ui/components/tv.d.ts.map +0 -1
- package/dist/ui/components/tv.js.map +0 -1
- package/dist/ui/components/typography/h1.d.ts.map +0 -1
- package/dist/ui/components/typography/h1.js.map +0 -1
- package/dist/ui/components/typography/h2.d.ts.map +0 -1
- package/dist/ui/components/typography/h2.js.map +0 -1
- package/dist/ui/components/typography/index.d.ts.map +0 -1
- package/dist/ui/components/typography/index.js.map +0 -1
- package/dist/ui/components/typography/legend.d.ts.map +0 -1
- package/dist/ui/components/typography/legend.js.map +0 -1
- package/dist/ui/components/typography/small.d.ts.map +0 -1
- package/dist/ui/components/typography/small.js.map +0 -1
- package/dist/ui/components/watchlist.d.ts.map +0 -1
- package/dist/ui/components/watchlist.js.map +0 -1
- package/dist/ui/footer.d.ts.map +0 -1
- package/dist/ui/footer.js.map +0 -1
- package/dist/ui/header.d.ts.map +0 -1
- package/dist/ui/header.js.map +0 -1
- package/dist/ui/layout-wrapper.d.ts.map +0 -1
- package/dist/ui/layout-wrapper.js.map +0 -1
- package/dist/utils/color.d.ts.map +0 -1
- package/dist/utils/color.js.map +0 -1
- package/dist/utils/index.d.ts.map +0 -1
- package/dist/utils/index.js.map +0 -1
- package/dist/utils/poly.d.ts.map +0 -1
- package/dist/utils/poly.js.map +0 -1
|
@@ -1,102 +1,255 @@
|
|
|
1
|
-
|
|
2
|
-
import { jsx
|
|
3
|
-
import { useEffect, useState } from
|
|
4
|
-
import fillerBg from
|
|
5
|
-
import { cn } from
|
|
6
|
-
import { Blink } from
|
|
7
|
-
import { ImageDistortion } from
|
|
8
|
-
import { Typography } from
|
|
9
|
-
import { Small } from
|
|
1
|
+
"use client";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect, useState } from "react";
|
|
4
|
+
import fillerBg from "../../assets/filler-bg0.webp";
|
|
5
|
+
import { cn } from "../../utils/index.js";
|
|
6
|
+
import { Blink } from "./blink.js";
|
|
7
|
+
import { ImageDistortion } from "./image-distortion.js";
|
|
8
|
+
import { Typography } from "./typography/index.js";
|
|
9
|
+
import { Small } from "./typography/small.js";
|
|
10
10
|
const ASPECT_CONFIG = {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
landscape: { defaultLayout: "split", height: 1080, width: 1920 },
|
|
12
|
+
portrait: { defaultLayout: "split", height: 1350, width: 1080 },
|
|
13
|
+
square: { defaultLayout: "split", height: 1080, width: 1080 },
|
|
14
|
+
story: { defaultLayout: "stacked", height: 1920, width: 1080 },
|
|
15
|
+
wide: { defaultLayout: "split", height: 900, width: 1600 }
|
|
16
16
|
};
|
|
17
17
|
const DEFAULT_SRC = fillerBg.src ?? fillerBg;
|
|
18
18
|
function useUtcClock() {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
19
|
+
const [now, setNow] = useState(null);
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
setNow(/* @__PURE__ */ new Date());
|
|
22
|
+
const id = setInterval(() => setNow(/* @__PURE__ */ new Date()), 1e3);
|
|
23
|
+
return () => clearInterval(id);
|
|
24
|
+
}, []);
|
|
25
|
+
return now ? now.toISOString().slice(11, 19) : "--:--:--";
|
|
26
26
|
}
|
|
27
27
|
function CornerMark({ className }) {
|
|
28
|
-
|
|
28
|
+
return /* @__PURE__ */ jsxs(
|
|
29
|
+
"span",
|
|
30
|
+
{
|
|
31
|
+
"aria-hidden": true,
|
|
32
|
+
className: cn(
|
|
33
|
+
"pointer-events-none absolute block size-4 opacity-50",
|
|
34
|
+
className
|
|
35
|
+
),
|
|
36
|
+
children: [
|
|
37
|
+
/* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-0 h-px w-full -translate-y-1/2 bg-current" }),
|
|
38
|
+
/* @__PURE__ */ jsx("span", { className: "absolute top-0 left-1/2 h-full w-px -translate-x-1/2 bg-current" })
|
|
39
|
+
]
|
|
40
|
+
}
|
|
41
|
+
);
|
|
29
42
|
}
|
|
30
43
|
function ChannelDot() {
|
|
31
|
-
|
|
44
|
+
return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
|
|
45
|
+
/* @__PURE__ */ jsx("span", { className: "bg-midground size-1.5 animate-pulse rounded-full" }),
|
|
46
|
+
/* @__PURE__ */ jsx(Small, { className: "opacity-70", children: "REC" })
|
|
47
|
+
] });
|
|
32
48
|
}
|
|
33
49
|
function ScanlineOverlay() {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
* moving a cursor.
|
|
43
|
-
*
|
|
44
|
-
* Two variants, matching actual use cases:
|
|
45
|
-
* - `'vibe'` (default): full-bleed distorted image with just registration
|
|
46
|
-
* marks and a tiny "Hermes Agent" mark in the corner — mirrors the
|
|
47
|
-
* overlay on the Hermes agent website.
|
|
48
|
-
* - `'dispatch'`: broadcast-card layout with sidebar copy, numbered tags,
|
|
49
|
-
* and chrome — for when the poster needs to carry information.
|
|
50
|
-
*/
|
|
51
|
-
export function Poster({ aspect = 'square', autoPlay = 'slash', body, border = true, channel, children, className, cornerMarks = true, eyebrow, headline = ['An Agent', 'That Grows', 'With You.'], layout, scale = 1, seal = 'MIT · 2026', signature, src = DEFAULT_SRC, tags, tint, tintStrength, variant = 'vibe', ...rest }) {
|
|
52
|
-
const config = ASPECT_CONFIG[aspect];
|
|
53
|
-
const resolvedLayout = layout ?? config.defaultLayout;
|
|
54
|
-
// Use aspect-ratio + max-width/height so the poster fluidly fits any parent
|
|
55
|
-
// (storybook iframe, a tweet preview, an embed) without getting clipped,
|
|
56
|
-
// but caps at the intended export width for screen-recording. `maxHeight`
|
|
57
|
-
// uses an absolute `dvh`-based value rather than `%` because `%` inside a
|
|
58
|
-
// flex container can cause the browser to clamp height without re-running
|
|
59
|
-
// aspect-ratio on width, producing a subtly wrong shape. An absolute cap
|
|
60
|
-
// leaves aspect-ratio fully in charge: once the height binds, width is
|
|
61
|
-
// re-derived correctly. `calc(100dvh - 8rem)` = viewport minus a typical
|
|
62
|
-
// host's vertical padding (e.g. Storybook's `p-8` = 4rem on each side),
|
|
63
|
-
// so the poster + padding fit within the viewport without ever producing
|
|
64
|
-
// scrollbars. Container queries tie all internal typography to the
|
|
65
|
-
// actual rendered width so headline/metadata scales along with the canvas.
|
|
66
|
-
const outerProps = {
|
|
67
|
-
// `text-midground` (not `text-foreground`) is the readable on-canvas
|
|
68
|
-
// color across every lens. `--foreground` is really the lens's inversion
|
|
69
|
-
// layer color: on dark lenses it has `fgOpacity: 0` and resolves to
|
|
70
|
-
// fully-transparent via `color-mix`, which would make text invisible.
|
|
71
|
-
// `--midground` always has opacity 1 and picks up each lens's accent.
|
|
72
|
-
className: cn('text-midground relative overflow-hidden font-sans', border && 'border border-current/25', className),
|
|
73
|
-
style: {
|
|
74
|
-
aspectRatio: `${config.width} / ${config.height}`,
|
|
75
|
-
background: 'var(--background)',
|
|
76
|
-
containerType: 'inline-size',
|
|
77
|
-
fontSize: `${(16 / config.width) * 100}cqi`,
|
|
78
|
-
maxHeight: 'calc(100dvh - 8rem)',
|
|
79
|
-
maxWidth: '100%',
|
|
80
|
-
width: `${config.width * scale}px`
|
|
81
|
-
},
|
|
82
|
-
...rest
|
|
83
|
-
};
|
|
84
|
-
if (variant === 'vibe') {
|
|
85
|
-
return (_jsx("div", { ...outerProps, children: _jsx(VibeContent, { autoPlay: autoPlay, channel: channel, cornerMarks: cornerMarks, signature: signature, src: src, tint: tint, tintStrength: tintStrength }) }));
|
|
50
|
+
return /* @__PURE__ */ jsx(
|
|
51
|
+
"div",
|
|
52
|
+
{
|
|
53
|
+
"aria-hidden": true,
|
|
54
|
+
className: "pointer-events-none absolute inset-0 opacity-20 mix-blend-overlay",
|
|
55
|
+
style: {
|
|
56
|
+
backgroundImage: "repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,255,255,0.08) 2px, rgba(255,255,255,0.08) 3px)"
|
|
57
|
+
}
|
|
86
58
|
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
export function Poster({
|
|
62
|
+
aspect = "square",
|
|
63
|
+
autoPlay = "slash",
|
|
64
|
+
body,
|
|
65
|
+
border = true,
|
|
66
|
+
channel,
|
|
67
|
+
children,
|
|
68
|
+
className,
|
|
69
|
+
cornerMarks = true,
|
|
70
|
+
eyebrow,
|
|
71
|
+
headline = ["An Agent", "That Grows", "With You."],
|
|
72
|
+
layout,
|
|
73
|
+
scale = 1,
|
|
74
|
+
seal = "MIT \xB7 2026",
|
|
75
|
+
signature,
|
|
76
|
+
src = DEFAULT_SRC,
|
|
77
|
+
tags,
|
|
78
|
+
tint,
|
|
79
|
+
tintStrength,
|
|
80
|
+
variant = "vibe",
|
|
81
|
+
...rest
|
|
82
|
+
}) {
|
|
83
|
+
const config = ASPECT_CONFIG[aspect];
|
|
84
|
+
const resolvedLayout = layout ?? config.defaultLayout;
|
|
85
|
+
const outerProps = {
|
|
86
|
+
// `text-midground` (not `text-foreground`) is the readable on-canvas
|
|
87
|
+
// color across every lens. `--foreground` is really the lens's inversion
|
|
88
|
+
// layer color: on dark lenses it has `fgOpacity: 0` and resolves to
|
|
89
|
+
// fully-transparent via `color-mix`, which would make text invisible.
|
|
90
|
+
// `--midground` always has opacity 1 and picks up each lens's accent.
|
|
91
|
+
className: cn(
|
|
92
|
+
"text-midground relative overflow-hidden font-sans",
|
|
93
|
+
border && "border border-current/25",
|
|
94
|
+
className
|
|
95
|
+
),
|
|
96
|
+
style: {
|
|
97
|
+
aspectRatio: `${config.width} / ${config.height}`,
|
|
98
|
+
background: "var(--background)",
|
|
99
|
+
containerType: "inline-size",
|
|
100
|
+
fontSize: `${16 / config.width * 100}cqi`,
|
|
101
|
+
maxHeight: "calc(100dvh - 8rem)",
|
|
102
|
+
maxWidth: "100%",
|
|
103
|
+
width: `${config.width * scale}px`
|
|
104
|
+
},
|
|
105
|
+
...rest
|
|
106
|
+
};
|
|
107
|
+
if (variant === "vibe") {
|
|
108
|
+
return /* @__PURE__ */ jsx("div", { ...outerProps, children: /* @__PURE__ */ jsx(
|
|
109
|
+
VibeContent,
|
|
110
|
+
{
|
|
111
|
+
autoPlay,
|
|
112
|
+
channel,
|
|
113
|
+
cornerMarks,
|
|
114
|
+
signature,
|
|
115
|
+
src,
|
|
116
|
+
tint,
|
|
117
|
+
tintStrength
|
|
118
|
+
}
|
|
119
|
+
) });
|
|
120
|
+
}
|
|
121
|
+
const headlineLines = Array.isArray(headline) ? headline : [headline];
|
|
122
|
+
return /* @__PURE__ */ jsxs("div", { ...outerProps, className: cn("flex flex-col", outerProps.className), children: [
|
|
123
|
+
/* @__PURE__ */ jsx(DispatchHeader, { channel }),
|
|
124
|
+
/* @__PURE__ */ jsxs(
|
|
125
|
+
"div",
|
|
126
|
+
{
|
|
127
|
+
className: cn(
|
|
128
|
+
"relative min-h-0 min-w-0 flex-1",
|
|
129
|
+
resolvedLayout === "split" ? "grid grid-cols-[3fr_2fr]" : "grid grid-rows-[3fr_2fr]"
|
|
130
|
+
),
|
|
131
|
+
children: [
|
|
132
|
+
/* @__PURE__ */ jsxs(
|
|
133
|
+
"div",
|
|
134
|
+
{
|
|
135
|
+
className: cn(
|
|
136
|
+
"relative overflow-hidden border-current/20",
|
|
137
|
+
resolvedLayout === "split" ? "border-r" : "border-b"
|
|
138
|
+
),
|
|
139
|
+
style: { backgroundColor: "var(--background)" },
|
|
140
|
+
children: [
|
|
141
|
+
/* @__PURE__ */ jsx(
|
|
142
|
+
ImageDistortion,
|
|
143
|
+
{
|
|
144
|
+
autoPlay,
|
|
145
|
+
src,
|
|
146
|
+
tint,
|
|
147
|
+
tintStrength
|
|
148
|
+
}
|
|
149
|
+
),
|
|
150
|
+
cornerMarks && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
151
|
+
/* @__PURE__ */ jsx(CornerMark, { className: "top-3 left-3" }),
|
|
152
|
+
/* @__PURE__ */ jsx(CornerMark, { className: "top-3 right-3" }),
|
|
153
|
+
/* @__PURE__ */ jsx(CornerMark, { className: "bottom-3 left-3" }),
|
|
154
|
+
/* @__PURE__ */ jsx(CornerMark, { className: "right-3 bottom-3" })
|
|
155
|
+
] }),
|
|
156
|
+
/* @__PURE__ */ jsx(ScanlineOverlay, {}),
|
|
157
|
+
/* @__PURE__ */ jsx(Small, { className: "absolute bottom-4 left-4 z-1 opacity-80", children: "Hermes Agent" })
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
),
|
|
161
|
+
/* @__PURE__ */ jsxs("aside", { className: "relative flex min-w-0 flex-col justify-between gap-8 p-8", children: [
|
|
162
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
|
|
163
|
+
eyebrow && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
164
|
+
/* @__PURE__ */ jsx("span", { className: "bg-midground/80 h-px flex-1" }),
|
|
165
|
+
/* @__PURE__ */ jsx(Small, { className: "opacity-80", children: eyebrow })
|
|
166
|
+
] }),
|
|
167
|
+
children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
168
|
+
/* @__PURE__ */ jsx(
|
|
169
|
+
Typography,
|
|
170
|
+
{
|
|
171
|
+
as: "h1",
|
|
172
|
+
className: "text-[2.75em] leading-[0.95] font-bold tracking-[-0.01em]",
|
|
173
|
+
expanded: true,
|
|
174
|
+
children: headlineLines.map((line, i) => /* @__PURE__ */ jsx("span", { className: "block", children: line }, `${line}-${i}`))
|
|
175
|
+
}
|
|
176
|
+
),
|
|
177
|
+
body && /* @__PURE__ */ jsx("p", { className: "text-[1.0625em] leading-[1.5] tracking-normal normal-case opacity-60", children: body })
|
|
178
|
+
] })
|
|
179
|
+
] }),
|
|
180
|
+
tags && tags.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2 border-t border-current/15 pt-4", children: tags.map((tag, i) => /* @__PURE__ */ jsxs(
|
|
181
|
+
"li",
|
|
182
|
+
{
|
|
183
|
+
className: "flex items-baseline justify-between gap-3",
|
|
184
|
+
children: [
|
|
185
|
+
/* @__PURE__ */ jsx(Small, { className: "font-courier opacity-40", children: String(i + 1).padStart(3, "0") }),
|
|
186
|
+
/* @__PURE__ */ jsx(Small, { className: "opacity-80", children: tag }),
|
|
187
|
+
/* @__PURE__ */ jsx("span", { className: "mx-1 h-px flex-1 translate-y-[-3px] border-b border-dotted border-current/25" }),
|
|
188
|
+
/* @__PURE__ */ jsxs(Small, { className: "font-courier opacity-40", children: [
|
|
189
|
+
String(i + 1).padStart(2, "0"),
|
|
190
|
+
"/",
|
|
191
|
+
String(tags.length).padStart(2, "0")
|
|
192
|
+
] })
|
|
193
|
+
]
|
|
194
|
+
},
|
|
195
|
+
`${tag}-${i}`
|
|
196
|
+
)) })
|
|
197
|
+
] })
|
|
198
|
+
]
|
|
199
|
+
}
|
|
200
|
+
),
|
|
201
|
+
/* @__PURE__ */ jsxs("footer", { className: "flex items-center justify-between gap-4 border-t border-current/20 px-6 py-3", children: [
|
|
202
|
+
/* @__PURE__ */ jsxs(Small, { className: "opacity-70", children: [
|
|
203
|
+
signature,
|
|
204
|
+
/* @__PURE__ */ jsx(Blink, {})
|
|
205
|
+
] }),
|
|
206
|
+
/* @__PURE__ */ jsx(Small, { className: "font-courier opacity-40", children: seal })
|
|
207
|
+
] })
|
|
208
|
+
] });
|
|
91
209
|
}
|
|
92
210
|
function DispatchHeader({ channel }) {
|
|
93
|
-
|
|
94
|
-
|
|
211
|
+
const clock = useUtcClock();
|
|
212
|
+
return /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-4 border-b border-current/20 px-6 py-3", children: [
|
|
213
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
|
|
214
|
+
/* @__PURE__ */ jsx("span", { className: "bg-midground size-2 rounded-sm opacity-70" }),
|
|
215
|
+
/* @__PURE__ */ jsx(Small, { className: "opacity-70", children: channel })
|
|
216
|
+
] }),
|
|
217
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
|
|
218
|
+
/* @__PURE__ */ jsx(ChannelDot, {}),
|
|
219
|
+
/* @__PURE__ */ jsxs(Small, { className: "font-courier opacity-50", children: [
|
|
220
|
+
clock,
|
|
221
|
+
" UTC"
|
|
222
|
+
] })
|
|
223
|
+
] })
|
|
224
|
+
] });
|
|
95
225
|
}
|
|
96
|
-
function VibeContent({
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
226
|
+
function VibeContent({
|
|
227
|
+
autoPlay,
|
|
228
|
+
channel,
|
|
229
|
+
cornerMarks,
|
|
230
|
+
signature,
|
|
231
|
+
src,
|
|
232
|
+
tint,
|
|
233
|
+
tintStrength
|
|
234
|
+
}) {
|
|
235
|
+
return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
|
|
236
|
+
/* @__PURE__ */ jsx(
|
|
237
|
+
ImageDistortion,
|
|
238
|
+
{
|
|
239
|
+
autoPlay,
|
|
240
|
+
src,
|
|
241
|
+
tint,
|
|
242
|
+
tintStrength
|
|
243
|
+
}
|
|
244
|
+
),
|
|
245
|
+
cornerMarks && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
246
|
+
/* @__PURE__ */ jsx(CornerMark, { className: "top-5 left-5" }),
|
|
247
|
+
/* @__PURE__ */ jsx(CornerMark, { className: "top-5 right-5" }),
|
|
248
|
+
/* @__PURE__ */ jsx(CornerMark, { className: "bottom-5 left-5" }),
|
|
249
|
+
/* @__PURE__ */ jsx(CornerMark, { className: "right-5 bottom-5" })
|
|
250
|
+
] }),
|
|
251
|
+
/* @__PURE__ */ jsx(ScanlineOverlay, {}),
|
|
252
|
+
channel && /* @__PURE__ */ jsx(Small, { className: "absolute top-5 left-10 z-1 text-[0.75em] opacity-70", children: channel }),
|
|
253
|
+
/* @__PURE__ */ jsx(Small, { className: "absolute right-10 bottom-5 z-1 text-[0.75em] opacity-80", children: signature })
|
|
254
|
+
] });
|
|
101
255
|
}
|
|
102
|
-
//# sourceMappingURL=poster.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type TypographyProps } from './typography';
|
|
2
|
-
export declare const Progress: ({ animate, barProps, children, className, speed, value, ...props }: ProgressProps) => import("react
|
|
2
|
+
export declare const Progress: ({ animate, barProps, children, className, speed, value, ...props }: ProgressProps) => import("react").JSX.Element;
|
|
3
3
|
interface ProgressProps extends React.ComponentProps<'div'> {
|
|
4
4
|
animate?: boolean;
|
|
5
5
|
barProps?: TypographyProps<'span'>;
|
|
@@ -7,4 +7,3 @@ interface ProgressProps extends React.ComponentProps<'div'> {
|
|
|
7
7
|
value: number;
|
|
8
8
|
}
|
|
9
9
|
export {};
|
|
10
|
-
//# sourceMappingURL=progress.d.ts.map
|
|
@@ -1,12 +1,52 @@
|
|
|
1
|
-
import { jsx
|
|
2
|
-
import { cn } from
|
|
3
|
-
import { Typography } from
|
|
4
|
-
export const Progress = ({
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../utils/index.js";
|
|
3
|
+
import { Typography } from "./typography/index.js";
|
|
4
|
+
export const Progress = ({
|
|
5
|
+
animate = true,
|
|
6
|
+
barProps,
|
|
7
|
+
children,
|
|
8
|
+
className,
|
|
9
|
+
speed = 0.4,
|
|
10
|
+
value,
|
|
11
|
+
...props
|
|
12
|
+
}) => /* @__PURE__ */ jsxs(
|
|
13
|
+
"div",
|
|
14
|
+
{
|
|
15
|
+
className: cn(
|
|
16
|
+
"relative flex min-h-[2.3rem] min-w-0 flex-1 items-stretch overflow-hidden",
|
|
17
|
+
className
|
|
18
|
+
),
|
|
19
|
+
...props,
|
|
20
|
+
children: [
|
|
21
|
+
/* @__PURE__ */ jsx(
|
|
22
|
+
Typography,
|
|
23
|
+
{
|
|
24
|
+
...barProps,
|
|
25
|
+
className: cn(
|
|
26
|
+
"shrink-0 translate-y-0.5 truncate py-2",
|
|
27
|
+
"bg-midground/20",
|
|
28
|
+
children ? "px-2" : "px-0",
|
|
29
|
+
barProps?.className
|
|
30
|
+
),
|
|
31
|
+
mono: true,
|
|
32
|
+
style: {
|
|
33
|
+
...animate && { transition: `width ${speed}s steps(10, end)` },
|
|
34
|
+
width: `${value}%`,
|
|
35
|
+
...barProps?.style
|
|
36
|
+
},
|
|
37
|
+
children
|
|
38
|
+
}
|
|
39
|
+
),
|
|
40
|
+
/* @__PURE__ */ jsx(
|
|
41
|
+
"div",
|
|
42
|
+
{
|
|
43
|
+
className: "flex-1",
|
|
44
|
+
style: {
|
|
45
|
+
"--x": ".5rem",
|
|
46
|
+
backgroundImage: `repeating-linear-gradient(to right, transparent 0 var(--x), color-mix(in srgb, var(--color-midground) 17%, transparent) var(--x) calc(var(--x) + 1px))`
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
)
|
|
50
|
+
]
|
|
51
|
+
}
|
|
52
|
+
);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare function SceneCanvas({ camera, children, className, contained, frameloop, noEvents, style }: SceneCanvasProps): import("react
|
|
1
|
+
export declare function SceneCanvas({ camera, children, className, contained, frameloop, noEvents, style }: SceneCanvasProps): import("react").JSX.Element;
|
|
2
2
|
interface SceneCanvasProps {
|
|
3
3
|
camera?: {
|
|
4
4
|
far?: number;
|
|
@@ -21,4 +21,3 @@ interface SceneCanvasProps {
|
|
|
21
21
|
style?: React.CSSProperties;
|
|
22
22
|
}
|
|
23
23
|
export {};
|
|
24
|
-
//# sourceMappingURL=scene-canvas.d.ts.map
|