@terrafirmagreg-team/ui 0.0.0-stage → 0.1.0

package/src/components/blocks/link/link-preview.tsx

@@ -0,0 +1,256 @@
+'use client';
+import { useContext, useState } from 'react';
+import type { ComponentProps } from 'react';
+import { useUiComponents } from '@terrafirmagreg-team/ui/provider';
+import { Globe } from 'lucide-react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { buttonVariants } from '@terrafirmagreg-team/ui/components/ui/button';
+import { Skeleton } from '@terrafirmagreg-team/ui/components/ui/skeleton';
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/hover-card';
+import {
+  loadExternalMeta,
+  useExternalMeta,
+} from '@terrafirmagreg-team/ui/hooks/use-external-meta';
+import {
+  loadPagePreview,
+  usePagePreview,
+} from '@terrafirmagreg-team/ui/hooks/page/use-page-preview';
+import {
+  DEFAULT_EXTERNAL_FAVICON,
+  uiConfig,
+} from '@terrafirmagreg-team/ui/lib/config';
+import { ResolvedLangContext } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
+import type { PagePreviewData } from '@terrafirmagreg-team/ui/types/preview';
+
+type LinkPreviewVariant = 'raw' | 'text' | 'chip';
+
+function FaviconIcon({ href }: { href: string }) {
+  const [failed, setFailed] = useState(false);
+  let host = '';
+  try {
+    host = new URL(href).hostname;
+  } catch {
+    return <Globe className="size-4 shrink-0 text-muted-foreground" />;
+  }
+  if (failed || !host) {
+    return <Globe className="size-4 shrink-0 text-muted-foreground" />;
+  }
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={(uiConfig().externalFavicon ?? DEFAULT_EXTERNAL_FAVICON).replace('{host}', host)}
+      alt=""
+      className="size-4 shrink-0 rounded-sm"
+      onError={() => setFailed(true)}
+    />
+  );
+}
+
+function externalHost(href: string): string {
+  try {
+    return new URL(href).hostname || href;
+  } catch {
+    return href;
+  }
+}
+
+function ExternalAnchor({
+  href,
+  className,
+  children,
+  ...props
+}: ComponentProps<'a'>) {
+  const [open, setOpen] = useState(false);
+  const meta = useExternalMeta(href ?? '', open);
+  const host = meta?.host || externalHost(href ?? '');
+  const title = meta?.title || host;
+  const detail = [host && host !== title ? host : '', meta?.description]
+    .filter(Boolean)
+    .join(' — ');
+  return (
+    <HoverCard open={open} onOpenChange={setOpen}>
+      <HoverCardTrigger
+        render={
+          <a
+            href={href}
+            className={className}
+            target="_blank"
+            rel="noreferrer"
+            onMouseEnter={() => void loadExternalMeta(href ?? '')}
+            {...props}
+          />
+        }
+      >
+        {children}
+      </HoverCardTrigger>
+      <HoverCardContent className="w-fit max-w-[min(18rem,90vw)]">
+        <div className="flex w-full min-w-0 items-center gap-2 font-medium">
+          <FaviconIcon href={href ?? ''} />
+          {meta ? (
+            <span className="truncate">{title}</span>
+          ) : (
+            <Skeleton className="h-4 w-32" />
+          )}
+        </div>
+        {meta === null ? (
+          <Skeleton className="mt-1 h-3 w-40" />
+        ) : detail ? (
+          <p className="text-sm text-muted-foreground line-clamp-3">
+            {detail}
+          </p>
+        ) : null}
+      </HoverCardContent>
+    </HoverCard>
+  );
+}
+
+function InternalAnchor({
+  href,
+  className,
+  children,
+  ...props
+}: ComponentProps<'a'>) {
+  const { Link } = useUiComponents();
+  const lang = useContext(ResolvedLangContext)?.lang;
+  const [open, setOpen] = useState(false);
+  const resolved = usePagePreview(href ?? '', open, lang);
+  const PreviewIconCmp = uiConfig().pagePreviewIcon;
+  return (
+    <HoverCard open={open} onOpenChange={setOpen}>
+      <HoverCardTrigger
+        render={
+          <Link
+            href={href ?? ''}
+            className={className}
+            onMouseEnter={() => void loadPagePreview(href ?? '', lang)}
+            {...props}
+          />
+        }
+      >
+        {children}
+      </HoverCardTrigger>
+      {resolved === undefined ? null : (
+        <HoverCardContent className="w-fit max-w-[min(18rem,90vw)]">
+          {resolved === null ? (
+            <>
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="mt-1 h-3 w-40" />
+            </>
+          ) : (
+            <>
+              <div className="flex items-center gap-2 font-medium">
+                {resolved.icon && PreviewIconCmp ? (
+                  <PreviewIconCmp icon={resolved.icon} />
+                ) : null}
+                <span className="truncate">{resolved.title}</span>
+              </div>
+              {resolved.description ? (
+                <p className="text-sm text-muted-foreground line-clamp-3">
+                  {resolved.description}
+                </p>
+              ) : null}
+            </>
+          )}
+        </HoverCardContent>
+      )}
+    </HoverCard>
+  );
+}
+
+export function LinkPreview({
+  preview,
+  href,
+  className,
+  variant = 'raw',
+  size = 'md',
+  solid,
+  children,
+  ...props
+}: ComponentProps<'a'> & {
+  preview?: PagePreviewData;
+  variant?: LinkPreviewVariant;
+  size?: 'sm' | 'md';
+  solid?: boolean;
+}) {
+  const { Link } = useUiComponents();
+  const PreviewIconCmp = uiConfig().pagePreviewIcon;
+  const external = Boolean(href && /^(https?:|mailto:|\/\/)/i.test(href));
+
+  if (variant === 'chip') {
+    const chipClass = cn(
+      buttonVariants({ variant: solid ? 'secondary' : 'outline' }),
+      size === 'sm' && 'px-2 py-1.5 text-xs',
+      className,
+    );
+    if (external) {
+      return (
+        <a
+          href={href}
+          target="_blank"
+          rel="noreferrer"
+          className={chipClass}
+          {...props}
+        >
+          {children}
+        </a>
+      );
+    }
+    return (
+      <Link href={href ?? ''} className={chipClass} {...props}>
+        {children}
+      </Link>
+    );
+  }
+
+  const merged = cn(
+    variant === 'text' && 'text-primary underline underline-offset-4',
+    className,
+  );
+
+  if (!href) {
+    return (
+      <a className={merged} {...props}>
+        {children}
+      </a>
+    );
+  }
+  if (external) {
+    return (
+      <ExternalAnchor href={href} className={merged} {...props}>
+        {children}
+      </ExternalAnchor>
+    );
+  }
+  if (!preview?.title) {
+    return (
+      <InternalAnchor href={href} className={merged} {...props}>
+        {children}
+      </InternalAnchor>
+    );
+  }
+
+  return (
+    <HoverCard>
+      <HoverCardTrigger render={<Link href={href} className={merged} {...props} />}>
+        {children}
+      </HoverCardTrigger>
+      <HoverCardContent className="w-fit max-w-[min(18rem,90vw)]">
+        <div className="flex items-center gap-2 font-medium">
+          {preview.icon && PreviewIconCmp ? (
+            <PreviewIconCmp icon={preview.icon} />
+          ) : null}
+          <span className="truncate">{preview.title}</span>
+        </div>
+        {preview.description ? (
+          <p className="text-sm text-muted-foreground line-clamp-3">
+            {preview.description}
+          </p>
+        ) : null}
+      </HoverCardContent>
+    </HoverCard>
+  );
+}

package/src/components/blocks/list/row.tsx

@@ -0,0 +1,91 @@
+import { Check } from 'lucide-react';
+import Link from 'next/link';
+import type { ComponentProps, ReactNode } from 'react';
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from '@terrafirmagreg-team/ui/components/ui/item';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+type ItemProps = ComponentProps<typeof Item>;
+
+export function ItemRow({
+  layout = 'list',
+  href,
+  target,
+  rel,
+  onClick,
+  media,
+  mediaClassName,
+  title,
+  titleClassName,
+  description,
+  overline,
+  code,
+  selected,
+  trailing,
+  size = 'xs',
+  variant = 'default',
+  align = 'center',
+  className,
+}: {
+  layout?: 'list' | 'header';
+  href?: string;
+  target?: string;
+  rel?: string;
+  onClick?: () => void;
+  media?: ReactNode;
+  mediaClassName?: string;
+  title: ReactNode;
+  titleClassName?: string;
+  description?: ReactNode;
+  overline?: ReactNode;
+  code?: ReactNode;
+  selected?: boolean;
+  trailing?: ReactNode;
+  size?: ItemProps['size'];
+  variant?: ItemProps['variant'];
+  align?: 'center' | 'start';
+  className?: string;
+}) {
+  if (layout === 'header') {
+    return (
+      <div className={cn('flex gap-3', align === 'center' ? 'items-center' : 'items-start', className)}>
+        {media}
+        <div className="min-w-0 flex-1">
+          {overline ? <p className="text-xs text-muted-foreground">{overline}</p> : null}
+          <p className={cn('text-sm font-medium', titleClassName)}>{title}</p>
+          {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+          {code ? <code className="text-xs text-muted-foreground">{code}</code> : null}
+        </div>
+        {trailing}
+      </div>
+    );
+  }
+  return (
+    <Item
+      size={size}
+      variant={variant}
+      className={className}
+      {...(href
+        ? { render: <Link href={href} target={target} rel={rel} onClick={onClick} className="cursor-pointer hover:bg-accent hover:text-accent-foreground" /> }
+        : { onClick, className: cn(className, onClick && 'cursor-pointer hover:bg-accent hover:text-accent-foreground') })}
+    >
+      {media ? <ItemMedia className={mediaClassName}>{media}</ItemMedia> : null}
+      <ItemContent>
+        <ItemTitle className={cn('truncate', titleClassName)}>{title}</ItemTitle>
+        {description !== undefined ? <ItemDescription className="min-h-4 truncate">{description}</ItemDescription> : null}
+      </ItemContent>
+      {trailing || selected !== undefined ? (
+        <ItemActions>
+          {trailing}
+          {selected !== undefined ? <Check className={cn('size-3.5 text-primary', !selected && 'invisible')} /> : null}
+        </ItemActions>
+      ) : null}
+    </Item>
+  );
+}

package/src/components/blocks/media/glb/model.tsx

@@ -0,0 +1,243 @@
+'use client';
+
+import { useLoader, useThree } from '@react-three/fiber';
+import { GLTFLoader } from 'three-stdlib';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  type RefObject,
+  useRef,
+} from 'react';
+import {
+  Box3,
+  type Group,
+  LinearMipmapLinearFilter,
+  LoadingManager,
+  type Material,
+  MathUtils,
+  type Mesh,
+  type MeshStandardMaterial,
+  NearestFilter,
+  type PerspectiveCamera,
+  SRGBColorSpace,
+  Texture,
+  Vector3,
+} from 'three';
+import type {
+  GlbHomeView,
+  GlbOrbitControls,
+  GlbSceneHandle,
+} from '@terrafirmagreg-team/ui/types/glb';
+
+const GLB_ZOOM_MIN_FACTOR = 0.4;
+const GLB_ZOOM_MAX_FACTOR = 3;
+
+type ResourceResolver = (
+  resourceUrl: string,
+  modelUrl: string,
+) => string | undefined;
+
+const glbLoaderClasses = new WeakMap<
+  ResourceResolver,
+  Map<string, typeof GLTFLoader>
+>();
+
+export function glbLoaderClass(
+  url: string,
+  resolveResource?: ResourceResolver,
+): typeof GLTFLoader {
+  if (!resolveResource) return GLTFLoader;
+  let byUrl = glbLoaderClasses.get(resolveResource);
+  if (!byUrl) {
+    byUrl = new Map();
+    glbLoaderClasses.set(resolveResource, byUrl);
+  }
+  let cls = byUrl.get(url);
+  if (!cls) {
+    const resolve = resolveResource;
+    cls = class extends GLTFLoader {
+      constructor() {
+        const manager = new LoadingManager();
+        manager.setURLModifier(
+          (resourceUrl) => resolve(resourceUrl, url) ?? resourceUrl,
+        );
+        super(manager);
+      }
+    };
+    byUrl.set(url, cls);
+  }
+  return cls;
+}
+
+export function GlbModel({
+  url,
+  flip,
+  scale,
+  offset,
+  controlsRef,
+  homeRef,
+  initializedRef,
+  resolveResource,
+  onReady,
+}: {
+  url: string;
+  flip: boolean;
+  scale?: number;
+  offset?: number;
+  controlsRef: RefObject<GlbOrbitControls | null>;
+  homeRef: RefObject<GlbHomeView | null>;
+  initializedRef: RefObject<boolean>;
+  resolveResource?: ResourceResolver;
+  onReady: () => void;
+}) {
+  const { scene } = useLoader(
+    glbLoaderClass(url, resolveResource),
+    url,
+  ) as { scene: Group };
+  const model = useMemo(() => {
+    const clone = scene.clone(true);
+    clone.traverse((object) => {
+      const mesh = object as Mesh;
+      const materials = Array.isArray(mesh.material)
+        ? mesh.material
+        : mesh.material
+          ? [mesh.material]
+          : [];
+      for (const material of materials) {
+        const std = material as MeshStandardMaterial;
+        const map = std.map;
+        if (map) {
+          map.colorSpace = SRGBColorSpace;
+          map.magFilter = NearestFilter;
+          map.minFilter = LinearMipmapLinearFilter;
+          map.anisotropy = 4;
+          map.needsUpdate = true;
+        }
+        const color = mesh.geometry?.getAttribute('color');
+        if (std.vertexColors && color) {
+          let uniformWhite = true;
+          for (let i = 0; i < color.count * color.itemSize; i++) {
+            if ((color.array as ArrayLike<number>)[i] < 0.99) {
+              uniformWhite = false;
+              break;
+            }
+          }
+          if (uniformWhite) {
+            std.vertexColors = false;
+            std.needsUpdate = true;
+          }
+        }
+      }
+    });
+    return clone;
+  }, [scene]);
+  const modelRef = useRef<Group>(null);
+
+  useEffect(() => {
+    return () => {
+      model.traverse((object) => {
+        const mesh = object as Mesh;
+        mesh.geometry?.dispose?.();
+        const material = mesh.material as Material | Material[] | undefined;
+        for (const entry of Array.isArray(material)
+          ? material
+          : material
+            ? [material]
+            : []) {
+          for (const value of Object.values(entry)) {
+            if (value instanceof Texture) value.dispose();
+          }
+          entry.dispose();
+        }
+      });
+    };
+  }, [model]);
+  const controlsReady = useThree((state) => state.controls != null);
+
+  useLayoutEffect(() => {
+    const controls = controlsRef.current;
+    const root = modelRef.current;
+    if (!controls || !root) return;
+    const camera = controls.object as PerspectiveCamera;
+    const box = new Box3().setFromObject(root);
+    const size = box.getSize(new Vector3()).length() || 1;
+    const center = box.getCenter(new Vector3());
+    const orbit = camera.position.clone().sub(controls.target);
+    controls.minDistance = size * GLB_ZOOM_MIN_FACTOR;
+    controls.maxDistance = size * GLB_ZOOM_MAX_FACTOR;
+    controls.target.copy(center);
+    if (initializedRef.current && orbit.lengthSq() > 0) {
+      camera.position.copy(center).add(orbit);
+    } else {
+      camera.position.copy(center).add(new Vector3(size, size * 0.7, size));
+    }
+    camera.near = size / 50;
+    camera.far = size * 15;
+    camera.updateProjectionMatrix();
+    controls.update();
+    initializedRef.current = true;
+    homeRef.current = {
+      position: camera.position.toArray() as [number, number, number],
+      target: controls.target.toArray() as [number, number, number],
+    };
+    onReady();
+  }, [controlsReady, controlsRef, homeRef, initializedRef, onReady, url]);
+
+  return (
+    <group ref={modelRef}>
+      <primitive
+        object={model}
+        rotation-x={flip ? Math.PI : 0}
+        scale={
+          typeof scale === 'number' && Number.isFinite(scale) && scale !== 0
+            ? Math.abs(scale)
+            : 1
+        }
+        position-y={
+          typeof offset === 'number' && Number.isFinite(offset) ? offset : 0
+        }
+      />
+    </group>
+  );
+}
+
+export const GlbSceneApi = forwardRef<
+  GlbSceneHandle,
+  {
+    controlsRef: RefObject<GlbOrbitControls | null>;
+    homeRef: RefObject<GlbHomeView | null>;
+  }
+>(function GlbSceneApi({ controlsRef, homeRef }, ref) {
+  useImperativeHandle(
+    ref,
+    () => ({
+      zoomBy(factor: number) {
+        const controls = controlsRef.current;
+        if (!controls) return;
+        const camera = controls.object;
+        const offset = camera.position.clone().sub(controls.target);
+        const length = MathUtils.clamp(
+          offset.length() * factor,
+          controls.minDistance,
+          controls.maxDistance,
+        );
+        camera.position.copy(controls.target).add(offset.setLength(length));
+        controls.update();
+      },
+      reset() {
+        const controls = controlsRef.current;
+        const home = homeRef.current;
+        if (!controls || !home) return;
+        const camera = controls.object;
+        camera.position.set(...home.position);
+        controls.target.set(...home.target);
+        controls.update();
+      },
+    }),
+    [controlsRef, homeRef],
+  );
+  return null;
+});