@sybilion/uilib 1.0.20

package/src/components/ui/Tooltip/Tooltip.styl

@@ -0,0 +1,131 @@
+@import '../../../lib/theme.styl';
+
+.tooltipContent
+  z-index 50
+  width fit-content
+  padding 6px 12px
+  border-radius 0.375rem
+  background-color var(--popover)
+  font-size 12px
+  color var(--popover-foreground)
+  backdrop-filter blur(10px)
+  text-wrap balance
+  word-break break-word
+  transform-origin var(--radix-tooltip-content-transform-origin)
+  // user-select text
+  box-shadow 0 10px 15px -3px rgba(0, 0, 0, 0.1)
+  border 1px solid var(--border)
+
+  // Radix sets instant-open (immediate) or delayed-open (after delayDuration), not "open"
+  &[data-state="open"],
+  &[data-state="instant-open"],
+  &[data-state="delayed-open"]
+    animation fade-in 0.15s ease-out, zoom-in 0.15s ease-out
+
+  &[data-state="closed"]
+    animation fade-out 0.1s ease-in, zoom-out 0.1s ease-in
+
+  &[data-state="open"][data-side="bottom"],
+  &[data-state="instant-open"][data-side="bottom"],
+  &[data-state="delayed-open"][data-side="bottom"]
+    animation fade-in 0.15s ease-out, zoom-in 0.15s ease-out, slide-in-from-top-2 0.15s ease-out
+
+  &[data-state="open"][data-side="left"],
+  &[data-state="instant-open"][data-side="left"],
+  &[data-state="delayed-open"][data-side="left"]
+    animation fade-in 0.15s ease-out, zoom-in 0.15s ease-out, slide-in-from-right-2 0.15s ease-out
+
+  &[data-state="open"][data-side="right"],
+  &[data-state="instant-open"][data-side="right"],
+  &[data-state="delayed-open"][data-side="right"]
+    animation fade-in 0.15s ease-out, zoom-in 0.15s ease-out, slide-in-from-left-2 0.15s ease-out
+
+  &[data-state="open"][data-side="top"],
+  &[data-state="instant-open"][data-side="top"],
+  &[data-state="delayed-open"][data-side="top"]
+    animation fade-in 0.15s ease-out, zoom-in 0.15s ease-out, slide-in-from-bottom-2 0.15s ease-out
+
+  &[data-state="closed"][data-side="bottom"]
+    animation fade-out 0.1s ease-in, zoom-out 0.1s ease-in
+
+  &[data-state="closed"][data-side="left"]
+    animation fade-out 0.1s ease-in, zoom-out 0.1s ease-in
+
+  &[data-state="closed"][data-side="right"]
+    animation fade-out 0.1s ease-in, zoom-out 0.1s ease-in
+
+  &[data-state="closed"][data-side="top"]
+    animation fade-out 0.1s ease-in, zoom-out 0.1s ease-in
+
+.tooltipArrow
+  z-index 50
+  width 10px
+  height 10px
+  transform translateY(calc(-50% + .5px)) rotate(45deg)
+  border-radius 2px
+  border 1px solid var(--border)
+  border-left-width 0
+  border-top-width 0
+  background-color var(--popover)
+  fill var(--popover)
+
+@keyframes fade-in
+  from
+    opacity 0
+  to
+    opacity 1
+
+@keyframes fade-out
+  from
+    opacity 1
+  to
+    opacity 0
+
+@keyframes zoom-in
+  from
+    opacity 0
+    transform scale(0.95)
+  to
+    opacity 1
+    transform scale(1)
+
+@keyframes zoom-out
+  from
+    opacity 1
+    transform scale(1)
+  to
+    opacity 0
+    transform scale(0.95)
+
+@keyframes slide-in-from-top-2
+  from
+    opacity 0
+    transform translateY(-0.5rem)
+  to
+    opacity 1
+    transform translateY(0)
+
+@keyframes slide-in-from-right-2
+  from
+    opacity 0
+    transform translateX(0.5rem)
+  to
+    opacity 1
+    transform translateX(0)
+
+@keyframes slide-in-from-left-2
+  from
+    opacity 0
+    transform translateX(-0.5rem)
+  to
+    opacity 1
+    transform translateX(0)
+
+@keyframes slide-in-from-bottom-2
+  from
+    opacity 0
+    transform translateY(0.5rem)
+  to
+    opacity 1
+    transform translateY(0)
+

package/src/components/ui/Tooltip/Tooltip.styl.d.ts

@@ -0,0 +1,16 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'fade-in': string;
+  'fade-out': string;
+  'slide-in-from-bottom-2': string;
+  'slide-in-from-left-2': string;
+  'slide-in-from-right-2': string;
+  'slide-in-from-top-2': string;
+  'tooltipArrow': string;
+  'tooltipContent': string;
+  'zoom-in': string;
+  'zoom-out': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Tooltip/Tooltip.tsx

@@ -0,0 +1,64 @@
+import cn from 'classnames';
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import S from './Tooltip.styl';
+import type {
+  TooltipContentProps,
+  TooltipProps,
+  TooltipProviderProps,
+  TooltipTriggerProps,
+} from './Tooltip.types';
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: TooltipProviderProps) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip(props: TooltipProps) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({ ...props }: TooltipTriggerProps) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  maxWidth,
+  ...props
+}: TooltipContentProps) {
+  const style = { ...props.style };
+  if (maxWidth) style.maxWidth = `${maxWidth}px`;
+
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(S.tooltipContent, className)}
+        {...props}
+        style={style}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className={S.tooltipArrow} />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/components/ui/Tooltip/Tooltip.types.ts

@@ -0,0 +1,23 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+export interface TooltipProviderProps extends React.ComponentProps<
+  typeof TooltipPrimitive.Provider
+> {
+  delayDuration?: number;
+}
+
+export interface TooltipProps extends React.ComponentProps<
+  typeof TooltipPrimitive.Root
+> {}
+
+export interface TooltipTriggerProps extends React.ComponentProps<
+  typeof TooltipPrimitive.Trigger
+> {}
+
+export interface TooltipContentProps extends React.ComponentProps<
+  typeof TooltipPrimitive.Content
+> {
+  className?: string;
+  sideOffset?: number;
+  maxWidth?: number;
+}

package/src/components/ui/Tooltip/index.ts

@@ -0,0 +1,12 @@
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+} from './Tooltip';
+export type {
+  TooltipProps,
+  TooltipTriggerProps,
+  TooltipContentProps,
+  TooltipProviderProps,
+} from './Tooltip.types';

package/src/components/ui/VimeoEmbed/VimeoEmbed.styl

@@ -0,0 +1,63 @@
+.root
+  position relative
+  height auto !important
+  height 0
+  min-width 0
+  margin 0
+  padding-bottom 0
+
+  aspect-ratio 16 / 9.5
+  overflow hidden
+  border-radius var(--p-5)
+
+  flex-shrink 0
+  align-self stretch
+  box-shadow 0 0 0 1px var(--border)
+
+.iframe
+  z-index 1
+  position absolute
+  top 0
+  left 0
+  width 100%
+
+  display block
+  height 100%
+  margin 0
+  padding 0
+  border none
+  border-radius var(--p-5)
+  opacity .5
+  transition opacity 0.5s ease
+
+  transform scale(1.01) // fix rounded border cut off issue
+
+  .isPlaying &
+    opacity 1
+
+.playButton
+  position absolute
+  width 100%
+  height 100%
+  background var(--background-alpha-500)
+  border none
+  cursor pointer
+  z-index 3
+  display flex
+  align-items center
+  justify-content center
+  transition all 0.2s ease
+  box-shadow 0 2px 16px var(--page-color)
+
+  &:hover
+    background transparent
+
+  .isPlaying &
+    opacity 0
+    pointer-events none
+
+.playIcon
+  width var(--p-16)
+  height var(--p-16)
+  color var(--brand-color-400)
+  margin-left 4px // Slight offset for visual centering

package/src/components/ui/VimeoEmbed/VimeoEmbed.styl.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'iframe': string;
+  'isPlaying': string;
+  'playButton': string;
+  'playIcon': string;
+  'root': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/VimeoEmbed/VimeoEmbed.tsx

@@ -0,0 +1,191 @@
+import cn from 'classnames';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import Player from '@vimeo/player';
+
+import S from './VimeoEmbed.styl';
+import type { VimeoEmbedProps } from './VimeoEmbed.types';
+
+function parseVimeoUrl(idOrUrl: string): { id: string; hash?: string } {
+  // vimeo.com/12345678/abcdef12 (unlisted)
+  const unlistedMatch = idOrUrl.match(/vimeo\.com\/(\d+)\/([a-f0-9]+)/i);
+  if (unlistedMatch) {
+    return { id: unlistedMatch[1], hash: unlistedMatch[2] };
+  }
+  // vimeo.com/12345678 or player.vimeo.com/video/12345678
+  const idMatch = idOrUrl.match(
+    /(?:vimeo\.com\/|player\.vimeo\.com\/video\/)(\d+)/,
+  );
+  return { id: idMatch ? idMatch[1] : idOrUrl };
+}
+
+function VimeoEmbed({
+  videoId,
+  videoHash,
+  gifMode = false,
+  playButtonColor,
+  className,
+  ...props
+}: VimeoEmbedProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const playerRef = useRef<Player | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isPlayerReady, setIsPlayerReady] = useState(false);
+
+  const parsed = parseVimeoUrl(videoId);
+  const id = parsed.id;
+  const hash = videoHash ?? parsed.hash;
+
+  const hashParam = hash ? `&h=${hash}` : '';
+  const baseParams = 'title=0&byline=0&portrait=0&badge=0&dnt=1&playsinline=1';
+  const gifParams = gifMode
+    ? 'loop=1&muted=1&controls=0&transparent=1'
+    : 'controls=1&transparent=1&autoplay=0&muted=0';
+  const embedUrl = `https://player.vimeo.com/video/${id}?${baseParams}&${gifParams}${hashParam}`;
+
+  // Cleanup player when id/hash changes
+  useEffect(() => {
+    if (playerRef.current) {
+      playerRef.current
+        .destroy()
+        .catch(() => {
+          // Ignore destroy errors
+        })
+        .finally(() => {
+          playerRef.current = null;
+          setIsPlayerReady(false);
+          setIsPlaying(false);
+        });
+    }
+  }, [id, hash]);
+
+  // Initialize Player SDK when iframe loads
+  const handleIframeLoad = useCallback(() => {
+    if (!iframeRef.current) return;
+
+    // Clean up existing player if any
+    if (playerRef.current) {
+      playerRef.current
+        .destroy()
+        .catch(() => {
+          // Ignore destroy errors
+        })
+        .finally(() => {
+          playerRef.current = null;
+        });
+    }
+
+    try {
+      const player = new Player(iframeRef.current);
+
+      playerRef.current = player;
+
+      // Wait for player to be ready before setting up events
+      player
+        .ready()
+        .then(() => {
+          setIsPlayerReady(true);
+
+          // Listen to SDK events
+          player.on('play', () => setIsPlaying(true));
+          player.on('pause', () => setIsPlaying(false));
+          player.on('ended', () => setIsPlaying(false));
+        })
+        .catch(() => {
+          // Ignore ready errors
+        });
+    } catch (error) {
+      // Ignore initialization errors
+    }
+  }, []);
+
+  const play = useCallback(async () => {
+    if (!isPlayerReady || !playerRef.current) return;
+    try {
+      await playerRef.current.play();
+    } catch {
+      // Ignore play errors (e.g., if player not ready)
+    }
+  }, [isPlayerReady]);
+
+  const pause = useCallback(async () => {
+    if (!isPlayerReady || !playerRef.current) return;
+    try {
+      await playerRef.current.pause();
+    } catch {
+      // Ignore pause errors
+    }
+  }, [isPlayerReady]);
+
+  // Viewport-triggered playback: play when visible, pause when not
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const container = containerRef.current;
+    let playTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    const observer = new IntersectionObserver(
+      entries => {
+        const [entry] = entries;
+        if (!entry) return;
+        if (entry.isIntersecting) {
+          playTimeout = setTimeout(play, 150);
+        } else {
+          if (playTimeout) {
+            clearTimeout(playTimeout);
+            playTimeout = null;
+          }
+          pause();
+        }
+      },
+      {
+        rootMargin: '10% 0px 10% 0px',
+        threshold: 0.25,
+      },
+    );
+
+    observer.observe(container);
+    return () => {
+      if (playTimeout) clearTimeout(playTimeout);
+      observer.disconnect();
+    };
+  }, [play, pause]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(S.root, className, isPlaying && S.isPlaying)}
+      {...props}
+    >
+      <iframe
+        ref={iframeRef}
+        src={embedUrl}
+        className={S.iframe}
+        allow="autoplay; fullscreen; picture-in-picture; encrypted-media"
+        allowFullScreen
+        title="Vimeo video player"
+        onLoad={handleIframeLoad}
+      />
+      {!gifMode && (
+        <button
+          type="button"
+          className={S.playButton}
+          onClick={play}
+          aria-label="Play video"
+        >
+          <svg
+            className={S.playIcon}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M8 5v14l11-7z" fill="currentColor" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}
+
+export { VimeoEmbed };

package/src/components/ui/VimeoEmbed/VimeoEmbed.types.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+
+export interface VimeoEmbedProps extends HTMLAttributes<HTMLDivElement> {
+  videoId: string;
+  /** Required for unlisted Vimeo videos (e.g. vimeo.com/12345678/abcdef12) */
+  videoHash?: string;
+  /** Autoplay, loop, muted, no controls – like a GIF */
+  gifMode?: boolean;
+  playButtonColor?: string;
+}

package/src/components/ui/VimeoEmbed/index.ts

@@ -0,0 +1,2 @@
+export { VimeoEmbed } from './VimeoEmbed';
+export type { VimeoEmbedProps } from './VimeoEmbed.types';

package/src/components/ui/icons/Github.tsx

@@ -0,0 +1,10 @@
+export default function Github() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/constants/dataset.ts

@@ -0,0 +1,2 @@
+/** Query param key for dataset id in app URLs (consumer may align). */
+export const DATASET_QUERY_PARAM = 'id';