@terrafirmagreg-team/ui 0.1.0 → 1.2.0

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@terrafirmagreg-team/ui",
-  "version": "0.1.0",
+  "version": "1.2.0",
   "type": "module",
+  "description": "Shared UI kit",
+  "license": "LGPL-3.0-only",
   "exports": {
     "./styles.css": "./styles.css",
     "./styles/*": "./styles/*",
-    "./provider": "./src/provider.tsx",
+    "./provider": "./src/components/provider.tsx",
     "./components/ui/*": [
       "./src/components/ui/*.tsx",
       "./src/components/ui/*/index.tsx"
@@ -21,15 +23,11 @@
     ],
     "./hooks/*": [
       "./src/hooks/*.ts",
-      "./src/hooks/*.tsx",
-      "./src/hooks/*/index.ts",
-      "./src/hooks/*/index.tsx"
+      "./src/hooks/*/index.ts"
     ],
     "./lib/*": [
       "./src/lib/*.ts",
-      "./src/lib/*.tsx",
-      "./src/lib/*/index.ts",
-      "./src/lib/*/index.tsx"
+      "./src/lib/*/index.ts"
     ],
     "./types/*": [
       "./src/types/*.ts",
@@ -47,7 +45,7 @@
     "@react-three/drei": "10.7.9",
     "@react-three/fiber": "9.8.2",
     "@shadcn/react": "^0.3.1",
-    "@terrafirmagreg-team/translate": "0.1.0",
+    "@terrafirmagreg-team/translate": "1.2.0",
     "@xyflow/react": "12.12.0",
     "beautiful-mermaid": "^1.1.3",
     "class-variance-authority": "^0.7.1",
@@ -57,16 +55,18 @@
     "flag-icons": "^7.6.0",
     "hast-util-to-jsx-runtime": "^2.3.6",
     "input-otp": "^1.5.0",
-    "lucide-react": "^1.63.0",
+    "katex": "^0.19.1",
+    "lucide-react": "^0.577.0",
     "next-themes": "^0.4.6",
     "react-day-picker": "^10.0.2",
     "react-medium-image-zoom": "^5.4.9",
-    "react-resizable-panels": "^4.15.0",
+    "react-resizable-panels": "^4.18.0",
     "recharts": "3.10.1",
     "scroll-into-view-if-needed": "^3.1.0",
-    "tailwindcss": "^4.3.3",
+    "tailwindcss": "^4.3.4",
     "three": "^0.186.1",
-    "three-stdlib": "2.36.1"
+    "three-stdlib": "2.36.1",
+    "@terrafirmagreg-team/data": "1.2.0"
   },
   "peerDependencies": {
     "next": ">=15",
@@ -78,7 +78,7 @@
     "@types/node": "^26.6.5",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "@types/three": "^0.186.0"
+    "@types/three": "^0.187.0"
   },
   "repository": {
     "type": "git",

package/src/components/blocks/button/icon-button.tsx

@@ -46,3 +46,4 @@ export function IconButton({
     </Tooltip>
   );
 }
+

package/src/components/blocks/canvas/chevron-edge.tsx

@@ -1,7 +1,17 @@
 'use client';
 
-import { memo, useMemo, type FC } from 'react';
 import {
+  memo,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  type FC,
+  type MouseEvent as ReactMouseEvent,
+  type ReactNode,
+} from 'react';
+import {
+  EdgeLabelRenderer,
   useInternalNode,
   useStore,
   type EdgeProps,
@@ -9,8 +19,10 @@ import {
 } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
 import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import {
+  CHEVRON_GLYPH,
   chevronHighlightClass,
   chevronTicksAlongPath,
+  nearestPointOnPolyline,
 } from '@terrafirmagreg-team/ui/lib/canvas/edge';
 import type {
   ChevronEdgeHighlight,
@@ -26,24 +38,67 @@ type ChevronEdgeResolvers = {
   resolveCenter?: (node: InternalNode) => FlowPoint;
   resolveBorder?: (node: InternalNode, toward: FlowPoint) => FlowPoint;
   resolvePath?: (ctx: ChevronEdgePathContext) => FlowPoint[];
+  renderLabel?: (ctx: ChevronEdgePathContext) => ReactNode;
+  labelVisibility?: 'always' | 'hover';
   className?: string;
 };
 
+function pathMidpoint(points: readonly FlowPoint[]): FlowPoint {
+  let total = 0;
+  for (let i = 1; i < points.length; i += 1) {
+    total += Math.hypot(
+      points[i]!.x - points[i - 1]!.x,
+      points[i]!.y - points[i - 1]!.y,
+    );
+  }
+  const half = total / 2;
+  let acc = 0;
+  for (let i = 1; i < points.length; i += 1) {
+    const a = points[i - 1]!;
+    const b = points[i]!;
+    const len = Math.hypot(b.x - a.x, b.y - a.y);
+    if (acc + len >= half && len > 0) {
+      const t = (half - acc) / len;
+      return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+    }
+    acc += len;
+  }
+  return points[points.length - 1]!;
+}
+
 const CHEVRON_TICK_MIN_ZOOM = 0.25;
 
 export function createChevronEdge({
   resolveCenter,
   resolveBorder,
   resolvePath,
+  renderLabel,
+  labelVisibility = 'always',
   className,
 }: ChevronEdgeResolvers): FC<EdgeProps> {
   return memo(function ChevronEdge(props: EdgeProps) {
     const { source, target, data } = props;
+    const [hover, setHover] = useState(false);
+    const [hoverPt, setHoverPt] = useState<FlowPoint | null>(null);
+    const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const enter = useCallback(() => {
+      if (hoverTimer.current) clearTimeout(hoverTimer.current);
+      setHover(true);
+    }, []);
+    const leave = useCallback(() => {
+      hoverTimer.current = setTimeout(() => {
+        setHover(false);
+        setHoverPt(null);
+      }, 120);
+    }, []);
     const sourceNode = useInternalNode(source);
     const targetNode = useInternalNode(target);
     const farZoom = useStore(
       (state) => state.transform[2] < CHEVRON_TICK_MIN_ZOOM,
     );
+    const tx = useStore((state) => state.transform[0]);
+    const ty = useStore((state) => state.transform[1]);
+    const tz = useStore((state) => state.transform[2]);
     const sAbs = sourceNode?.internals.positionAbsolute;
     const tAbs = targetNode?.internals.positionAbsolute;
     const sSize = sourceNode?.measured;
@@ -88,47 +143,100 @@ export function createChevronEdge({
       targetY,
       targetPosition,
     ]);
-    const runs = useMemo(
-      () => (points && !farZoom ? chevronTicksAlongPath(points) : []),
+    const ticks = useMemo(
+      () =>
+        points && !farZoom
+          ? chevronTicksAlongPath(points)
+          : { offsets: [], total: 0 },
       [points, farZoom],
     );
     const highlight = data?.highlight as ChevronEdgeHighlight;
+    const mid = useMemo(
+      () => (points ? pathMidpoint(points) : null),
+      [points],
+    );
     if (data?.hidden === true) return null;
-    if (!points || points.length < 2) return null;
+    if (!points || points.length < 2 || !mid) return null;
     const base = `M${points[0]!.x} ${points[0]!.y}${points
       .slice(1)
       .map((p) => `L${p.x} ${p.y}`)
       .join('')}`;
+    const move = useCallback(
+      (e: ReactMouseEvent<Element>) => {
+        if (!points || tz === 0) return;
+        const pane = e.currentTarget.closest('.react-flow');
+        if (!pane) return;
+        const rect = pane.getBoundingClientRect();
+        const p = {
+          x: (e.clientX - rect.left - tx) / tz,
+          y: (e.clientY - rect.top - ty) / tz,
+        };
+        setHoverPt(nearestPointOnPolyline(points, p));
+      },
+      [points, tx, ty, tz],
+    );
+    const hoverTrack =
+      labelVisibility === 'hover'
+        ? { onMouseEnter: enter, onMouseLeave: leave, onMouseMove: move }
+        : {};
+    const labelOn =
+      labelVisibility !== 'hover' || hover || props.selected === true;
+    const labelAt = hoverPt ?? mid;
     return (
+      <>
       <g
         className={cn(
           'chevron-edge',
           className,
           chevronHighlightClass(highlight),
         )}
+        {...hoverTrack}
       >
+        <path
+          className="chevron-edge__interaction"
+          d={base}
+          fill="none"
+          stroke="transparent"
+          strokeWidth={props.interactionWidth ?? 20}
+        />
         <path
           className="chevron-edge__stroke chevron-edge__base"
           d={base}
           aria-hidden="true"
         />
-        {runs.map((run, i) => (
-          <g
-            key={i}
-            className="chevron-edge__ticks"
-            style={{
-              ['--chevron-edge-shift-x' as string]: `${run.shiftX}px`,
-              ['--chevron-edge-shift-y' as string]: `${run.shiftY}px`,
-            }}
-          >
+        <g className="chevron-edge__ticks" aria-hidden="true">
+          {ticks.offsets.map((offset) => (
             <path
-              className="chevron-edge__stroke chevron-edge__stroke--main"
-              d={run.d}
-              aria-hidden="true"
+              key={offset}
+              className="chevron-edge__stroke chevron-edge__stroke--main chevron-edge__tick"
+              d={CHEVRON_GLYPH}
+              style={{
+                offsetPath: `path("${base}")`,
+                ['--chevron-o' as string]: `${offset}px`,
+              }}
             />
-          </g>
-        ))}
+          ))}
+        </g>
       </g>
+      {renderLabel && labelOn ? (
+        <EdgeLabelRenderer>
+          <div
+            className="chevron-edge__label nodrag nopan"
+            {...hoverTrack}
+            style={{
+              transform: `translate(-50%, -50%) translate(${labelAt.x}px, ${labelAt.y}px)`,
+            }}
+          >
+            {renderLabel({
+              ...props,
+              sourceNode: sourceNode!,
+              targetNode: targetNode!,
+            })}
+          </div>
+        </EdgeLabelRenderer>
+      ) : null}
+      </>
     );
   });
 }
+

package/src/components/blocks/canvas/flow-canvas.tsx

@@ -15,6 +15,7 @@ import {
   type Node,
   type ReactFlowProps,
 } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
+import { useTheme } from 'next-themes';
 import { useElementSize } from '@terrafirmagreg-team/ui/hooks/use-element-size';
 import { useFlowViewportPersist } from '@terrafirmagreg-team/ui/hooks/canvas/use-flow-viewport-persist';
 import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
@@ -67,6 +68,7 @@ export function FlowCanvas<N extends Node = Node, E extends Edge = Edge>({
   const canvasRef = useRef<HTMLDivElement>(null);
   const viewSize = useElementSize(canvasRef);
   const { setCenter } = useReactFlow();
+  const { resolvedTheme } = useTheme();
   const { markReady, persist } = useFlowViewportPersist(
     viewportConfig.storageKey,
     viewportConfig.resetKey,
@@ -156,6 +158,7 @@ export function FlowCanvas<N extends Node = Node, E extends Edge = Edge>({
           minZoom={FLOW_MIN_ZOOM}
           maxZoom={FLOW_MAX_ZOOM}
           proOptions={{ hideAttribution: true }}
+          colorMode={resolvedTheme === 'dark' ? 'dark' : 'light'}
           className="h-full bg-card"
           onMoveEnd={handleMoveEnd}
           {...flowProps}
@@ -175,3 +178,4 @@ export function FlowCanvas<N extends Node = Node, E extends Edge = Edge>({
     </div>
   );
 }
+

package/src/components/blocks/canvas/flow-toolbar.tsx

@@ -30,3 +30,4 @@ export function FlowToolbar({ onFit, search }: FlowToolbarProps) {
     </ViewerToolbar>
   );
 }
+

package/src/components/blocks/canvas/flow-viewport.tsx

@@ -241,3 +241,4 @@ export function FlowViewport({
 
   return null;
 }
+

package/src/components/blocks/fit-box.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useRef, type ReactNode } from 'react';
+import { useElementSize } from '@terrafirmagreg-team/ui/hooks/use-element-size';
+
+export function FitBox({
+  w,
+  children,
+}: {
+  w: number;
+  children: ReactNode;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { w: avail } = useElementSize(ref);
+  const fit = w > 0 && avail > 0 ? Math.min(1, avail / w) : 1;
+  return (
+    <div ref={ref} className="w-full">
+      <div
+        className="mx-auto w-fit"
+        style={fit < 1 ? { zoom: fit } : undefined}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/blocks/git/github-info.tsx

@@ -75,3 +75,4 @@ export async function GithubInfo({
     />
   );
 }
+

package/src/components/blocks/lang/content.tsx

@@ -1,22 +1,52 @@
 'use client';
-import { useLocaleRegistry } from '@terrafirmagreg-team/translate/hooks/use-locale-registry';
+import { useEffect, useState, type ReactNode } from 'react';
 import { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
-import type { LangContent as LangContentMap } from '@terrafirmagreg-team/translate/types/content';
-import { UntranslatedContext } from '@terrafirmagreg-team/ui/hooks/lang';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type { LangContent } from '@terrafirmagreg-team/translate/types/content';
+import { UntranslatedContext } from '@terrafirmagreg-team/ui/hooks/use-lang';
 
 export { UntranslatedContext };
 
-export function LangContentSwitch({ content }: { content: LangContentMap }) {
-  const { defaultLanguage } = useLocaleRegistry();
+export type LocaleNodeResult = { node: ReactNode; missing: boolean } | null;
+export type LoadLocaleNode = (lang: Lang) => Promise<LocaleNodeResult>;
+
+export function LangContentSwitch({
+  content,
+  loadLang,
+}: {
+  content: LangContent;
+  loadLang?: LoadLocaleNode;
+}) {
   const lang = useResolvedLang();
-  const own = content[lang];
-  const entry =
-    own ?? content[defaultLanguage] ?? Object.values(content).find(Boolean);
-  const missing = !own && lang !== defaultLanguage && Boolean(entry);
+  const [loaded, setLoaded] = useState<
+    Partial<Record<Lang, LocaleNodeResult>>
+  >({});
+  const result =
+    lang === content.lang
+      ? { node: content.node, missing: false }
+      : loaded[lang];
+
+  useEffect(() => {
+    if (!loadLang || lang === content.lang || lang in loaded) return;
+    let live = true;
+    void loadLang(lang).then((next) => {
+      if (live) {
+        setLoaded((map) => (lang in map ? map : { ...map, [lang]: next }));
+      }
+    });
+    return () => {
+      live = false;
+    };
+  }, [lang, content.lang, loadLang, loaded]);
 
+  const missing =
+    result === undefined
+      ? !loadLang && lang !== content.lang
+      : (result?.missing ?? lang !== content.lang);
   return (
     <UntranslatedContext.Provider value={missing}>
-      {entry?.node ?? null}
+      {(result ?? content).node}
     </UntranslatedContext.Provider>
   );
 }
+

package/src/components/blocks/lang/flag.tsx

@@ -22,3 +22,4 @@ export function LangFlag({
     />
   );
 }
+

package/src/components/blocks/lang/link.tsx

@@ -20,3 +20,4 @@ export function LangLink({
 
   return <NextLink href={nextHref ?? href ?? '#'} {...props} />;
 }
+

package/src/components/blocks/lang/redirect.tsx

@@ -14,7 +14,7 @@ function RedirectLink({ href }: { href: string }) {
         href={href}
         className="text-sm text-muted-foreground underline underline-offset-4 transition-colors hover:text-accent-foreground"
       >
-        {t('ui.redirecting')}
+        {t('Redirecting…', { note: 'ui.redirecting' })}
       </a>
     </div>
   );
@@ -45,3 +45,4 @@ export function LangRedirect({ to }: { to: string }) {
     </Suspense>
   );
 }
+

package/src/components/blocks/lang/switcher.tsx

@@ -51,3 +51,4 @@ export function LangSwitcher({
     />
   );
 }
+

package/src/components/blocks/lang/untranslated-callout.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { Callout } from '@terrafirmagreg-team/ui/components/mdx/callout';
-import { useUntranslated } from '@terrafirmagreg-team/ui/hooks/lang';
+import { useUntranslated } from '@terrafirmagreg-team/ui/hooks/use-lang';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
 import type { TranslationState } from '@terrafirmagreg-team/translate/server';
 
@@ -18,11 +18,12 @@ export function UntranslatedCallout({
     <Callout
       type="warn"
       title={
-        full ? t('untranslated.title') : t('untranslated.partial_title')
+        full ? t('This page is not translated', { note: 'untranslated.title' }) : t('This page is not fully translated', { note: 'untranslated.partial_title' })
       }
       className="shrink-0"
     >
-      <p>{full ? t('untranslated.body') : t('untranslated.partial_body')}</p>
+      <p>{full ? t('Showing the English version. A translation is not available yet.', { note: 'untranslated.body' }) : t('Some content is still shown in English.', { note: 'untranslated.partial_body' })}</p>
     </Callout>
   );
 }
+

package/src/components/blocks/lang/untranslated-chip.tsx

@@ -0,0 +1,53 @@
+'use client';
+import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+
+function LanguagesIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden
+    >
+      <path d="m5 8 6 6" />
+      <path d="m4 14 6-6 2-3" />
+      <path d="M2 5h12" />
+      <path d="M7 2h1" />
+      <path d="m22 22-5-10-5 10" />
+      <path d="M14 18h6" />
+    </svg>
+  );
+}
+
+export function UntranslatedChip({ className }: { className?: string }) {
+  const t = useTranslations();
+  return (
+    <Hint
+      side="top"
+      label={
+        <span className="block max-w-56">
+          <span className="mb-0.5 block font-semibold">
+            {t('This page is not translated', { note: 'untranslated.title' })}
+          </span>
+          {t('Showing the English version. A translation is not available yet.', { note: 'untranslated.body' })}
+        </span>
+      }
+    >
+      <span
+        className={cn(
+          'inline-flex cursor-help items-center gap-1 rounded-md bg-amber-500/15 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-600 dark:text-amber-400',
+          className,
+        )}
+      >
+        <LanguagesIcon className="size-3" />
+        {t('Untranslated', { note: 'untranslated.chip' })}
+      </span>
+    </Hint>
+  );
+}

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

@@ -70,7 +70,7 @@ function ExternalAnchor({
   const title = meta?.title || host;
   const detail = [host && host !== title ? host : '', meta?.description]
     .filter(Boolean)
-    .join(' — ');
+    .join(' · ');
   return (
     <HoverCard open={open} onOpenChange={setOpen}>
       <HoverCardTrigger
@@ -254,3 +254,4 @@ export function LinkPreview({
     </HoverCard>
   );
 }
+

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

@@ -89,3 +89,4 @@ export function ItemRow({
     </Item>
   );
 }
+

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

@@ -241,3 +241,4 @@ export const GlbSceneApi = forwardRef<
   );
   return null;
 });
+

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

@@ -119,7 +119,7 @@ export function GlbScene({
   const homeRef = useRef<GlbHomeView | null>(null);
   const initializedRef = useRef(false);
   const rendererRef = useRef<WebGLRenderer | null>(null);
-  const label = title || t('ui.viewer.label');
+  const label = title || t('3D model', { note: 'ui.viewer.label' });
   const url = urls[Math.min(selected, urls.length - 1)];
   const [statusEntry, setStatusEntry] = useState<{
     url: string;
@@ -250,15 +250,15 @@ export function GlbScene({
               onZoomIn: () => apiRef.current?.zoomBy(1 / GLB_ZOOM_STEP),
               onZoomOut: () => apiRef.current?.zoomBy(GLB_ZOOM_STEP),
               onFit: () => apiRef.current?.reset(),
-              fitLabel: t('ui.viewer.reset_view'),
+              fitLabel: t('Reset view', { note: 'ui.viewer.reset_view' }),
             }}
             expand={{ target: surfaceRef }}
             settings={{
-              label: t('ui.viewer.settings'),
+              label: t('Viewer settings', { note: 'ui.viewer.settings' }),
               sliders: [
                 {
                   icon: <MoveHorizontal />,
-                  label: t('ui.viewer.width'),
+                  label: t('Width', { note: 'ui.viewer.width' }),
                   min: SCENE_WIDTH_MIN,
                   max: SCENE_WIDTH_MAX,
                   step: 5,
@@ -268,7 +268,7 @@ export function GlbScene({
                 },
                 {
                   icon: <MoveVertical />,
-                  label: t('ui.viewer.height'),
+                  label: t('Height', { note: 'ui.viewer.height' }),
                   min: SCENE_HEIGHT_MIN,
                   max: SCENE_HEIGHT_MAX,
                   step: 16,
@@ -278,7 +278,7 @@ export function GlbScene({
                 },
                 {
                   icon: <Gauge />,
-                  label: t('ui.viewer.rotate_speed'),
+                  label: t('Rotate speed', { note: 'ui.viewer.rotate_speed' }),
                   min: ROTATE_MIN,
                   max: ROTATE_MAX,
                   step: 0.1,
@@ -290,7 +290,7 @@ export function GlbScene({
                   ? [
                       {
                         icon: <Timer />,
-                        label: t('ui.viewer.autoplay_speed'),
+                        label: t('Autoplay speed', { note: 'ui.viewer.autoplay_speed' }),
                         min: AUTOPLAY_SPEED_MIN,
                         max: AUTOPLAY_SPEED_MAX,
                         step: 0.5,
@@ -305,7 +305,7 @@ export function GlbScene({
               toggles: [
                 {
                   icon: <RotateCw />,
-                  label: t('ui.viewer.spin'),
+                  label: t('Spin', { note: 'ui.viewer.spin' }),
                   checked: autoRotate,
                   onChange: setAutoRotate,
                 },
@@ -313,7 +313,7 @@ export function GlbScene({
                   ? [
                       {
                         icon: <Play />,
-                        label: t('ui.viewer.autoplay'),
+                        label: t('Autoplay', { note: 'ui.viewer.autoplay' }),
                         checked: autoplay,
                         onChange: setAutoplay,
                       },
@@ -321,7 +321,7 @@ export function GlbScene({
                   : []),
                 {
                   icon: <Grid3x3 />,
-                  label: t('ui.viewer.grid'),
+                  label: t('Grid', { note: 'ui.viewer.grid' }),
                   checked: dotGrid,
                   onChange: setDotGrid,
                 },
@@ -332,11 +332,11 @@ export function GlbScene({
         )}
         {status === 'loading' ? (
           <p className="pointer-events-none absolute inset-0 flex items-center justify-center text-sm text-muted-foreground">
-            {t('ui.viewer.loading')}
+            {t('Loading…', { note: 'ui.viewer.loading' })}
           </p>
         ) : status === 'error' ? (
           <p className="pointer-events-none absolute inset-0 flex items-center justify-center text-sm text-muted-foreground">
-            {t('ui.image_unavailable')}
+            {t('Image unavailable', { note: 'ui.image_unavailable' })}
           </p>
         ) : null}
       </div>
@@ -370,3 +370,4 @@ export function GlbSession({
     />
   );
 }
+

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

@@ -49,3 +49,4 @@ export function GlbPlaceholder({
     </div>
   );
 }
+