@volter/sdk 0.0.0-stage → 0.5.204

package/src/kit/components/ProjectHeader.tsx

@@ -0,0 +1,328 @@
+import {
+  Divider,
+  EditorIcon,
+  editorIcons,
+  Inline,
+  Menu,
+  MenuItem,
+  MenuSeparator,
+  MenuTrigger,
+  Text,
+} from '@volter/sdk/widgets';
+import {
+  type ReactNode,
+  useEffect,
+  useReducer,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+import { activeProduct } from '@volter/sdk/kit/active-product';
+import { BUNDLED_EDITOR_VERSION } from '../build-identity';
+import {
+  contributedChromeVersion,
+  contributedHeaderItems,
+  subscribeContributedChrome,
+} from '@volter/sdk/kit/chrome-registry';
+import { revealInFinder } from '@volter/sdk/kit/editor-api';
+import { getCurrentProject, onProjectChange } from '@volter/sdk/kit/project-manager';
+import {
+  activeEditorWorkspace,
+  editorWorkspaces,
+  editorWorkspacesVersion,
+  setEditorWorkspace,
+  subscribeEditorWorkspace,
+  subscribeEditorWorkspaces,
+  workspaceApplies,
+} from '@volter/sdk/kit/workspace-presets';
+import {
+  activeChromeRegions,
+  chromeRegionsVersion,
+  subscribeChromeRegions,
+} from '@volter/sdk/kit/workspace-regions';
+import { ApplicationMenus } from './ApplicationMenus';
+import { ChromeSlot } from './ChromeSlot';
+import { WorktreeSwitcher } from './WorktreeSwitcher';
+
+export function ProjectHeader({
+  transport,
+}: {
+  /** Controlled production transport for bounded hosts; the application
+   * defaults to the connected PlayBar. */
+  transport?: ReactNode | undefined;
+}) {
+  const [, forceUpdate] = useReducer((x: number) => x + 1, 0);
+  useEffect(() => onProjectChange(forceUpdate), []);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const project = getCurrentProject();
+  const projectName = project?.config.name ?? 'No Project';
+  const projectVersion = project?.config.version ?? null;
+  const engineVersion = project?.config.engine.version ?? null;
+  const manifestVersion = project?.config.manifestVersion ?? null;
+  const projectPath = project?.rootPath ?? '';
+  // Close menu on outside click
+  useEffect(() => {
+    if (!menuOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [menuOpen]);
+
+  return (
+    <header className="volter-project-header">
+      {/* W5 (W4-reviewer candidate — transport narrow-width overlap guard):
+          the header is now THREE flex columns — name (shrinkable, ellipsized)
+          | transport (fixed) | right spacer — replacing the W4 absolute
+          centering, which let the transport cluster overlap the project name
+          at narrow widths. Equal-flex side columns keep the transport
+          visually centered whenever space allows; flex items cannot overlap
+          when it doesn't. */}
+      {/* Project name — clickable dropdown trigger. The cluster wrapper is
+          layout-neutral under bars chrome and becomes the LEFT glass island
+          under islands chrome (P6-U3); the dropdown Menu stays a SIBLING of
+          the island so the island's backdrop-filter never captures it. */}
+      {activeProduct()?.nativeMenus ? (
+        <div className="volter-project-header-left" />
+      ) : (
+        <div ref={menuRef} className="volter-project-header-left">
+          <div className="volter-project-header-cluster volter-chrome-island volter-glass-island">
+            {/* THE LEADING ITEM IS A BARE GLYPH, and that is transcription, not
+              economy. Blender opens its top bar with an app mark whose INK
+              starts at the band's own inset and whose click opens a MENU —
+              the mark IS the app menu's trigger. Measured on `topbar.png` at
+              native 2x: device x 12..43, i.e. CSS 6.0..21.5 — 16.0 wide, 13.0
+              tall — and the first menu word's ink follows at CSS 32.0. (The
+              whole-frame read's "32 CSS px app mark" was that 32-DEVICE-px
+              width read as CSS, and its "menu words start at 60" followed
+              from it; the frame says 16 and 32.)
+
+              Ours used to spend 67 px here on a padded pill drawing the
+              project NAME, which ellipsized to `prob…` at 1728 even for an
+              eight-character name, and the switcher beside it another 204.
+              The project's identity is not lost by the glyph: it is the
+              browser TAB's title (`AppRoot.tsx` writes `document.title` from
+              the project name — the tab strip IS our OS title bar, the place
+              Blender puts the file name), this button's tooltip and
+              accessible name, and the first row of the menu it opens. */}
+            <MenuTrigger
+              data-testid="project-menu-trigger"
+              aria-label={`${projectName} project menu`}
+              title={projectPath ? `${projectName} — ${projectPath}` : projectName}
+              onClick={() => setMenuOpen((v) => !v)}
+              onKeyDown={(event) => {
+                if (event.key !== 'ArrowDown') return;
+                event.preventDefault();
+                setMenuOpen(true);
+              }}
+              className="volter-project-trigger"
+            >
+              <EditorIcon icon={editorIcons.content.project} />
+              {/* The name stays in the DOM at zero pixels: the accessible name
+                above is a LABEL, this is the element's CONTENT, and it is what
+                `data-project` has always carried for the tooling that reads
+                which project a session has open. */}
+              <Text
+                data-testid="project-name"
+                data-project={projectName}
+                data-project-version={projectVersion ?? undefined}
+                variant="label"
+                className="volter-sr-only"
+              >
+                {projectName}
+              </Text>
+            </MenuTrigger>
+            <WorktreeSwitcher />
+            <Inline onPointerDown={() => setMenuOpen(false)} className="volter-project-app-menus">
+              <ApplicationMenus />
+            </Inline>
+          </div>
+          <WorkspaceTabs />
+
+          {menuOpen && (
+            <Menu
+              autoFocusFirst
+              onDismiss={() => {
+                const trigger = menuRef.current?.querySelector<HTMLButtonElement>(
+                  '[data-testid="project-menu-trigger"]',
+                );
+                setMenuOpen(false);
+                requestAnimationFrame(() => trigger?.focus());
+              }}
+              className="volter-project-menu"
+            >
+              {/* IDENTITY'S READABLE HOME. The trigger is a glyph, so the name
+                is the first thing this menu says — the row Blender's OS title
+                bar carries and a browser window does not. */}
+              <Text
+                data-testid="project-menu-name"
+                title={projectName}
+                variant="label"
+                truncate
+                className="volter-project-menu-name"
+              >
+                {projectName}
+              </Text>
+              {projectPath && (
+                <Text
+                  data-testid="project-menu-path"
+                  title={projectPath}
+                  variant="caption"
+                  tone="dim"
+                  selectable
+                  truncate
+                  className="volter-project-path"
+                >
+                  {projectPath}
+                </Text>
+              )}
+              {projectVersion && engineVersion && manifestVersion !== null && (
+                <>
+                  {projectPath && <MenuSeparator />}
+                  <div data-testid="project-version-summary" className="volter-project-versions">
+                    <span>Editor</span>
+                    <Text variant="code" tone="muted">
+                      v{BUNDLED_EDITOR_VERSION}
+                    </Text>
+                    <span>Project</span>
+                    <Text variant="code" tone="muted">
+                      v{projectVersion}
+                    </Text>
+                    <span>Engine</span>
+                    <Text variant="code" tone="muted">
+                      v{engineVersion}
+                    </Text>
+                    <span>Format</span>
+                    <Text variant="code" tone="muted">
+                      v{manifestVersion}
+                    </Text>
+                  </div>
+                  <MenuSeparator />
+                </>
+              )}
+              {projectPath && (
+                <MenuItem
+                  onSelect={() => {
+                    setMenuOpen(false);
+                    revealInFinder(projectPath);
+                  }}
+                >
+                  Show in Finder
+                </MenuItem>
+              )}
+              <MenuItem
+                data-testid="project-menu-history"
+                onSelect={() => {
+                  setMenuOpen(false);
+                  window.dispatchEvent(new CustomEvent('editor:show-history-tab'));
+                }}
+              >
+                {/* §8 naming: `Undo History`, never plain `History` (git/version
+                  confusion). */}
+                Undo History…
+              </MenuItem>
+            </Menu>
+          )}
+        </div>
+      )}
+      {/* W4 (§4.1/§9 W4, inventory row V4 + the recorded always-visible-
+          transport work item): the global TRANSPORT cluster lives in the
+          command bar — reachable regardless of which center document is
+          active (asset/story docs used to hide play/pause/stop entirely).
+          Centered in the row, matching the §4.1 mock's `>  ||  >`. */}
+      <Inline
+        data-testid="header-transport"
+        className="volter-project-transport volter-chrome-island volter-glass-island"
+        align="center"
+      >
+        {transport ?? <ProjectTransport />}
+      </Inline>
+      {/* Conversation entry moved to the global bottom shell row. Keep this
+          equal-width spacer so transport remains visually centered. */}
+      <Inline className="volter-project-header-right" justify="end" align="center">
+        {/* WHO IS IN THIS SESSION. A chrome slot, not a component: the host
+            owns the place and a package owns what sits there
+            (`chrome-slot-registry.ts`). the collaboration package fills it; a
+            build without that package renders nothing here, which is the
+            honest answer for an editor nobody else is in. */}
+        <ChromeSlot slot="header-trailing" />
+      </Inline>
+      {/* SaveStatus moved OUT of this command header (H3): status is status,
+          not a command — it renders in the W4 status bar
+          (`status-contributions.tsx`). */}
+    </header>
+  );
+}
+
+/**
+ * The WORKSPACE TAB STRIP — Blender's top bar, shown only when the active
+ * chrome regions say so (`workspaceTabs`, a workspace's region or the person's;
+ * Blender's workspaces turn it on). A click is the explicit act the workspace
+ * ruling requires (`workspace-presets.ts`); the strip derives nothing.
+ */
+function WorkspaceTabs() {
+  useSyncExternalStore(subscribeChromeRegions, chromeRegionsVersion, chromeRegionsVersion);
+  useSyncExternalStore(subscribeEditorWorkspaces, editorWorkspacesVersion, editorWorkspacesVersion);
+  const active = useSyncExternalStore(
+    subscribeEditorWorkspace,
+    activeEditorWorkspace,
+    activeEditorWorkspace,
+  );
+  if (activeChromeRegions().workspaceTabs !== 'shown') return null;
+  const workspaces = editorWorkspaces().filter((entry) => workspaceApplies(entry.id));
+  return (
+    <>
+      {/* Blender closes its menu words with a 1x20 rule before the workspace
+          tabs begin (measured `topbar.png`, halved: a #2e2e2e rule sitting 16px
+          past `Help`'s ink). Without it the two regions read as one
+          undifferentiated run of words, which is what ours did. It belongs to
+          the strip, so it appears and disappears with it. */}
+      <Divider orientation="vertical" className="volter-project-menu-rule" />
+      <div
+        role="tablist"
+        aria-label="Workspaces"
+        data-testid="workspace-tabs"
+        className="volter-workspace-tabs"
+      >
+        {workspaces.map((entry) => (
+          <button
+            key={entry.id}
+            type="button"
+            role="tab"
+            aria-selected={entry.id === active}
+            title={entry.description}
+            className="volter-workspace-tab"
+            onClick={() => setEditorWorkspace(entry.id)}
+          >
+            {entry.title}
+          </button>
+        ))}
+      </div>
+    </>
+  );
+}
+
+/** The global transport cluster: whatever the project's packages contribute
+ *  to the header (`@volter/sdk/chrome`, `.header`) — the Play transport
+ *  ships with `@volter/editor-game`; a folder of models contributes nothing here. */
+function ProjectTransport() {
+  useSyncExternalStore(
+    subscribeContributedChrome,
+    contributedChromeVersion,
+    contributedChromeVersion,
+  );
+  const items = contributedHeaderItems();
+  if (items.length === 0) return null;
+  return (
+    <>
+      {items.map(({ id, Component }) => (
+        <Component key={id} documentId="" />
+      ))}
+    </>
+  );
+}

package/src/kit/components/ReactCanvasControls.tsx

@@ -0,0 +1,358 @@
+import {
+  faExpand,
+  faMagnifyingGlassMinus,
+  faMagnifyingGlassPlus,
+  faRotate,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  AnchoredMenu,
+  Button,
+  EditorIcon,
+  FloatingToolbar,
+  IconButton,
+  MenuItem,
+  MenuSeparator,
+  Select,
+  TextInput,
+} from '@volter/sdk/widgets';
+import { type RefObject, useCallback, useRef, useState, useSyncExternalStore } from 'react';
+import {
+  fitReactStoryBoard,
+  getReactStoryBoardViewport,
+  type ReactStoryBoardViewportState,
+  setActiveReactStoryBoardViewport,
+  subscribeReactStoryBoardViewport,
+  toggleActiveReactStoryBoardViewportRotation,
+} from '@volter/sdk/kit/authoring/react-story-board';
+import type { ViewportToolContext } from '@volter/sdk/kit/authoring/viewport-tool-context';
+import {
+  getRootCanvasViewport,
+  setRootCanvasViewport,
+  subscribeRootCanvasViewport,
+} from '@volter/sdk/kit/world-canvas-viewport-state';
+import {
+  getRootPan,
+  panTransformValue,
+  setRootView,
+  subscribeRootPan,
+} from '@volter/sdk/kit/world-pan-state';
+import { useEditorStore } from '@volter/sdk/kit/editor-runtime';
+
+const VIEWPORT_PRESETS = {
+  fill: null,
+  desktop: { width: 1440, height: 900 },
+  tablet: { width: 768, height: 1024 },
+  mobile: { width: 390, height: 844 },
+} as const;
+
+function ResponsiveViewportControls({
+  boardViewport,
+  containerRef,
+  selectViewport,
+  viewportValue,
+}: {
+  boardViewport: ReactStoryBoardViewportState | null;
+  containerRef: RefObject<HTMLDivElement | null>;
+  selectViewport(preset: string): void;
+  viewportValue: string;
+}) {
+  return (
+    <>
+      <Select
+        aria-label="Responsive viewport"
+        title={
+          boardViewport?.locked
+            ? 'Viewport is locked by this story’s globals.viewport'
+            : 'Responsive viewport'
+        }
+        value={viewportValue}
+        disabled={boardViewport?.locked === true}
+        onChange={(event) => selectViewport(event.target.value)}
+        className="volter-react-viewport-select"
+      >
+        <option value="fill">Responsive</option>
+        {boardViewport ? (
+          boardViewport.choices.map((choice) => (
+            <option key={choice.id} value={choice.id}>
+              {choice.label} · {choice.width}×{choice.height}
+            </option>
+          ))
+        ) : (
+          <>
+            <option value="desktop">Desktop · 1440×900</option>
+            <option value="tablet">Tablet · 768×1024</option>
+            <option value="mobile">Mobile · 390×844</option>
+          </>
+        )}
+      </Select>
+      {boardViewport && (
+        <IconButton
+          aria-label="Rotate viewport"
+          title={
+            boardViewport.locked
+              ? 'Viewport is locked by this story’s globals.viewport'
+              : 'Rotate viewport'
+          }
+          size="comfortable"
+          disabled={boardViewport.locked}
+          onClick={() => toggleActiveReactStoryBoardViewportRotation(containerRef.current)}
+        >
+          <EditorIcon icon={faRotate} size="md" />
+        </IconButton>
+      )}
+    </>
+  );
+}
+
+export function ReactCanvasControls({
+  containerRef,
+  context,
+  boardOnly = false,
+}: {
+  containerRef: RefObject<HTMLDivElement | null>;
+  context: ViewportToolContext | null;
+  /** Fixed-pixel component boards need only the common Figma-style camera
+   * controls. Responsive presets and entity framing belong to DOM authoring. */
+  boardOnly?: boolean;
+}) {
+  const store = useEditorStore();
+  useSyncExternalStore(store.subscribe, store.getSnapshot);
+  const view = useSyncExternalStore(subscribeRootPan, getRootPan);
+  const viewport = useSyncExternalStore(subscribeRootCanvasViewport, getRootCanvasViewport);
+  const boardViewport = useSyncExternalStore(
+    subscribeReactStoryBoardViewport,
+    () => getReactStoryBoardViewport(containerRef.current),
+    () => null,
+  );
+
+  const zoomAroundCenter = useCallback(
+    (requestedZoom: number) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const zoom = Math.min(4, Math.max(0.1, requestedZoom));
+      const cx = container.clientWidth / 2;
+      const cy = container.clientHeight / 2;
+      const worldX = (cx - view.x) / view.zoom;
+      const worldY = (cy - view.y) / view.zoom;
+      setRootView(cx - worldX * zoom, cy - worldY * zoom, zoom);
+    },
+    [containerRef, view],
+  );
+
+  const zoomToSelection = useCallback(() => {
+    const container = containerRef.current;
+    const selectedId = [...store.selectedEntityIds].at(-1);
+    if (!container || !selectedId) return;
+    const rect = context?.adapter.rects?.rect(selectedId);
+    if (!rect || rect.width <= 0 || rect.height <= 0) return;
+    const availableWidth = Math.max(1, container.clientWidth - 96);
+    const availableHeight = Math.max(1, container.clientHeight - 96);
+    const zoom = Math.min(
+      4,
+      Math.max(0.1, Math.min(availableWidth / rect.width, availableHeight / rect.height)),
+    );
+    setRootView(
+      container.clientWidth / 2 - (rect.x + rect.width / 2) * zoom,
+      container.clientHeight / 2 - (rect.y + rect.height / 2) * zoom,
+      zoom,
+    );
+  }, [containerRef, context, store]);
+
+  const selectViewport = useCallback(
+    (preset: string) => {
+      const container = containerRef.current;
+      if (boardViewport) {
+        setActiveReactStoryBoardViewport(container, preset === 'fill' ? null : preset);
+        return;
+      }
+      const size = VIEWPORT_PRESETS[preset as keyof typeof VIEWPORT_PRESETS];
+      if (!container || size === null) {
+        setRootCanvasViewport(null, null);
+        setRootView(0, 0, 1);
+        return;
+      }
+      setRootCanvasViewport(size.width, size.height);
+      const zoom = Math.min(
+        1,
+        Math.max(
+          0.1,
+          Math.min(
+            (container.clientWidth - 96) / size.width,
+            (container.clientHeight - 96) / size.height,
+          ),
+        ),
+      );
+      setRootView(
+        (container.clientWidth - size.width * zoom) / 2,
+        (container.clientHeight - size.height * zoom) / 2,
+        zoom,
+      );
+    },
+    [boardViewport, containerRef],
+  );
+
+  const fitBoard = useCallback(() => {
+    const container = containerRef.current;
+    if (container) fitReactStoryBoard(container);
+  }, [containerRef]);
+
+  const hasStoryBoard = boardViewport !== null;
+  const hasDomAuthoring = context?.kind === 'dom' && Boolean(context.adapter.rects);
+  if (boardOnly ? !hasStoryBoard : !hasDomAuthoring) return null;
+
+  const viewportValue = boardViewport
+    ? (boardViewport.selectedViewportId ?? 'fill')
+    : (Object.entries(VIEWPORT_PRESETS).find(([, size]) =>
+        size === null
+          ? viewport.width === null
+          : size.width === viewport.width && size.height === viewport.height,
+      )?.[0] ?? 'fill');
+
+  return (
+    <>
+      {!hasStoryBoard && viewport.width !== null && viewport.height !== null && (
+        <div
+          data-testid="react-canvas-device-frame"
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            zIndex: 0,
+            width: viewport.width,
+            height: viewport.height,
+            transform: panTransformValue(view),
+            transformOrigin: '0 0',
+            pointerEvents: 'none',
+            background: '#fff',
+            boxShadow: '0 0 0 1px #ffffff40, 0 8px 30px #0009',
+          }}
+        />
+      )}
+      <FloatingToolbar
+        label={boardOnly ? '2D component board view' : 'React canvas view'}
+        data-testid={boardOnly ? 'canvas-board-zoom-controls' : 'react-canvas-zoom-controls'}
+        {...(boardOnly ? { 'data-board-zoom': '' } : {})}
+        data-volter-canvas-navigation-ignore="true"
+        className="volter-react-canvas-controls"
+      >
+        {!boardOnly && (
+          <ResponsiveViewportControls
+            boardViewport={boardViewport}
+            containerRef={containerRef}
+            selectViewport={selectViewport}
+            viewportValue={viewportValue}
+          />
+        )}
+        {hasStoryBoard && (
+          <Button
+            variant="ghost"
+            aria-label="Fit story board"
+            title="Fit all stories"
+            size="comfortable"
+            onClick={fitBoard}
+          >
+            Fit board
+          </Button>
+        )}
+        <IconButton
+          aria-label="Zoom out"
+          title="Zoom out"
+          size="comfortable"
+          onClick={() => zoomAroundCenter(view.zoom / 1.2)}
+        >
+          <EditorIcon icon={faMagnifyingGlassMinus} size="md" />
+        </IconButton>
+        <ZoomMenu
+          zoom={view.zoom}
+          zoomTo={zoomAroundCenter}
+          {...(hasStoryBoard ? { fit: fitBoard } : {})}
+          {...(!boardOnly && store.selectedEntityIds.size > 0 ? { toSelection: zoomToSelection } : {})}
+        />
+        <IconButton
+          aria-label="Zoom in"
+          title="Zoom in"
+          size="comfortable"
+          onClick={() => zoomAroundCenter(view.zoom * 1.2)}
+        >
+          <EditorIcon icon={faMagnifyingGlassPlus} size="md" />
+        </IconButton>
+        {!boardOnly && (
+          <IconButton
+            aria-label="Zoom to selection"
+            title="Zoom to selection"
+            size="comfortable"
+            onClick={zoomToSelection}
+          >
+            <EditorIcon icon={faExpand} size="md" />
+          </IconButton>
+        )}
+      </FloatingToolbar>
+    </>
+  );
+}
+
+/**
+ * Figma's zoom menu, opened from the zoom percentage: the zoom typed as a percentage, Zoom in and
+ * out, Zoom to fit, 50%, 100% and 200%, and Zoom to selection when there is one.
+ */
+function ZoomMenu({
+  zoom,
+  zoomTo,
+  fit,
+  toSelection,
+}: {
+  zoom: number;
+  zoomTo: (zoom: number) => void;
+  fit?: () => void;
+  toSelection?: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const act = (run: () => void) => () => {
+    run();
+    setOpen(false);
+  };
+  return (
+    <>
+      <Button
+        ref={triggerRef}
+        variant="ghost"
+        aria-label="Zoom"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        title="Zoom"
+        size="comfortable"
+        onClick={() => setOpen(!open)}
+      >
+        {Math.round(zoom * 100)}%
+      </Button>
+      {open && (
+        <AnchoredMenu anchorRef={triggerRef} align="end" clamp aria-label="Zoom" onDismiss={() => setOpen(false)}>
+          <div style={{ padding: '4px 8px' }}>
+            <TextInput
+              aria-label="Zoom percentage"
+              defaultValue={String(Math.round(zoom * 100))}
+              onKeyDown={(event) => {
+                if (event.key !== 'Enter') return;
+                const percent = Number.parseFloat(event.currentTarget.value);
+                if (Number.isFinite(percent) && percent > 0) {
+                  zoomTo(percent / 100);
+                  setOpen(false);
+                }
+              }}
+            />
+          </div>
+          <MenuSeparator />
+          <MenuItem onSelect={act(() => zoomTo(zoom * 1.2))}>Zoom in</MenuItem>
+          <MenuItem onSelect={act(() => zoomTo(zoom / 1.2))}>Zoom out</MenuItem>
+          {fit ? <MenuItem onSelect={act(fit)}>Zoom to fit</MenuItem> : null}
+          {toSelection ? <MenuItem onSelect={act(toSelection)}>Zoom to selection</MenuItem> : null}
+          <MenuSeparator />
+          {[0.5, 1, 2].map((preset) => (
+            <MenuItem key={preset} onSelect={act(() => zoomTo(preset))}>{`Zoom to ${preset * 100}%`}</MenuItem>
+          ))}
+        </AnchoredMenu>
+      )}
+    </>
+  );
+}