@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/components/app-frame/AppFrameRail.css

@@ -0,0 +1,321 @@
+/* AppFrame rail layout, the research shell (spec: wave-4/app-frame-rail.md; design direction §2.1, §2.5, §2.8, §3.2). */
+@layer tympan.components {
+  .ty-app-frame[data-layout='rail'] {
+    --ty-rail-width: 248px;
+    --ty-sheet-gap: var(--ty-space-3);
+    --ty-sheet-pad: 20px;
+
+    display: grid;
+    grid-template-columns: var(--ty-rail-width) minmax(0, 1fr) auto;
+    grid-template-rows: minmax(0, 1fr);
+    grid-template-areas: 'rail stage aside';
+    block-size: 100dvh;
+    min-block-size: 0;
+    overflow: hidden;
+  }
+
+  /* Rail: sits on the backdrop, full height, its own scroll. */
+  .ty-app-frame__rail {
+    grid-area: rail;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-4);
+    min-block-size: 0;
+    overflow-y: auto;
+    padding: var(--ty-space-4) var(--ty-space-3) var(--ty-space-3);
+  }
+  .ty-app-frame__drawer .ty-app-frame__rail {
+    flex: 1;
+    padding-block-start: 0;
+  }
+  .ty-app-frame__rail-slot[data-slot='brand'] {
+    padding-inline: var(--ty-space-2);
+    color: var(--ty-ink);
+    font-family: var(--ty-font-serif);
+    font-size: var(--ty-font-size-h3);
+    font-weight: var(--ty-font-weight-semibold);
+    line-height: var(--ty-font-line-height-h3);
+  }
+  .ty-app-frame__rail-nav {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--ty-space-4);
+  }
+  .ty-app-frame__rail-slot[data-slot='account'] {
+    padding-block-start: var(--ty-space-3);
+    border-block-start: 1px solid var(--ty-line);
+  }
+
+  /* Stage: holds the sheet and the dock (positioned for the dock's container anchor). */
+  .ty-app-frame__stage {
+    grid-area: stage;
+    position: relative;
+    z-index: 1;
+    min-inline-size: 0;
+    min-block-size: 0;
+    padding: var(--ty-sheet-gap) var(--ty-sheet-gap) var(--ty-sheet-gap) 0;
+  }
+
+  /* Sheet: level-1 glass, radius sheet, own vertical scroll; reserves the dock inset. */
+  .ty-app-frame__sheet {
+    box-sizing: border-box;
+    block-size: 100%;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-padding-block: var(--ty-space-6);
+    padding: var(--ty-sheet-pad);
+    padding-block-end: calc(var(--ty-sheet-pad) + var(--ty-action-bar-inset-bottom, 0px));
+    border: 1px solid var(--ty-line);
+    border-radius: var(--ty-radius-sheet);
+    background: var(--ty-surface);
+    box-shadow: var(--ty-shadow-sheet), var(--ty-shadow-sheet-inset);
+    backdrop-filter: blur(var(--ty-glass-blur-sheet)) saturate(var(--ty-glass-saturate));
+    -webkit-backdrop-filter: blur(var(--ty-glass-blur-sheet)) saturate(var(--ty-glass-saturate));
+    color: var(--ty-ink-2);
+    outline: none;
+  }
+  .ty-app-frame[data-layout='rail'] .ty-app-frame__content {
+    margin-inline: auto;
+    inline-size: 100%;
+    max-inline-size: var(--ty-layout-reading);
+  }
+  .ty-app-frame[data-layout='rail'][data-width='data'] .ty-app-frame__content {
+    max-inline-size: var(--ty-layout-data);
+  }
+  .ty-app-frame[data-layout='rail'][data-width='full'] .ty-app-frame__content {
+    max-inline-size: none;
+  }
+
+  .ty-app-frame__aside-slot {
+    grid-area: aside;
+    display: flex;
+    min-block-size: 0;
+    padding-block: var(--ty-sheet-gap);
+    padding-inline-end: var(--ty-sheet-gap);
+  }
+  .ty-app-frame__aside-slot:empty {
+    display: none;
+  }
+
+  .ty-app-frame__rail-opener {
+    position: absolute;
+    inset-block-start: var(--ty-space-3);
+    inset-inline-start: var(--ty-space-3);
+    z-index: var(--ty-z-sticky);
+  }
+
+  /* Rail sections and items (§3.2). */
+  .ty-rail-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-1);
+  }
+  .ty-rail-section__label {
+    margin: 0;
+    padding-inline: var(--ty-space-3);
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-eyebrow);
+    font-weight: var(--ty-font-weight-semibold);
+    line-height: var(--ty-font-line-height-eyebrow);
+    letter-spacing: var(--ty-font-tracking-eyebrow);
+    text-transform: uppercase;
+  }
+  .ty-rail-section__list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ty-rail-item {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-3);
+    inline-size: 100%;
+    min-block-size: var(--ty-control-height);
+    padding-inline: var(--ty-space-3);
+    border: 0;
+    border-radius: var(--ty-radius-control);
+    background: transparent;
+    color: var(--ty-ink-2);
+    font: inherit;
+    font-size: var(--ty-font-size-body);
+    line-height: var(--ty-font-line-height-body);
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+    outline: none;
+    transition: background-color var(--ty-dur-instant) var(--ty-ease);
+  }
+  .ty-rail-item[data-hovered] {
+    background: var(--ty-surface-sunken);
+    color: var(--ty-ink);
+  }
+  .ty-rail-item[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: -2px;
+  }
+  .ty-rail-item[data-current] {
+    background: var(--ty-accent-soft);
+    color: var(--ty-accent);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+  /* 3 px inset accent bar on the start edge. */
+  .ty-rail-item[data-current]::before {
+    content: '';
+    position: absolute;
+    inset-block: var(--ty-space-2);
+    inset-inline-start: 0;
+    inline-size: 3px;
+    border-radius: var(--ty-radius-pill);
+    background: var(--ty-accent);
+  }
+  .ty-rail-item__icon {
+    flex: none;
+    inline-size: 18px;
+    block-size: 18px;
+  }
+  .ty-rail-item__label {
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .ty-rail-item__count {
+    flex: none;
+    min-inline-size: 22px;
+    padding-inline: 6px;
+    border-radius: var(--ty-radius-pill);
+    background: var(--ty-surface-sunken);
+    color: var(--ty-ink);
+    font-family: var(--ty-font-mono);
+    font-size: var(--ty-font-size-meta);
+    font-variant-numeric: tabular-nums;
+    line-height: 20px;
+    text-align: center;
+  }
+
+  .ty-rail-context {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-2);
+    inline-size: 100%;
+    min-block-size: var(--ty-control-target);
+    padding: var(--ty-space-2) var(--ty-space-3);
+    border: 1px solid var(--ty-line);
+    border-radius: var(--ty-radius-control);
+    background: var(--ty-surface);
+    color: var(--ty-ink);
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+    outline: none;
+  }
+  .ty-rail-context[data-hovered] {
+    border-color: var(--ty-line-strong);
+  }
+  .ty-rail-context[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+  .ty-rail-context__lines {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-inline-size: 0;
+  }
+  .ty-rail-context__scope {
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+  }
+  .ty-rail-context__name {
+    overflow: hidden;
+    font-size: var(--ty-font-size-body);
+    font-weight: var(--ty-font-weight-semibold);
+    line-height: var(--ty-font-line-height-body);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .ty-rail-context__glyph {
+    flex: none;
+    color: var(--ty-ink-3);
+  }
+
+  @media (min-width: 768px) {
+    .ty-app-frame[data-layout='rail'] {
+      --ty-sheet-pad: var(--ty-space-5);
+    }
+  }
+  @media (min-width: 1280px) {
+    .ty-app-frame[data-layout='rail'] {
+      --ty-sheet-pad: var(--ty-space-6);
+    }
+  }
+
+  /* Below 1024 px: 44 px items (§2.10). */
+  @media (max-width: 1023.98px) {
+    .ty-rail-item {
+      min-block-size: var(--ty-control-height-touch);
+    }
+  }
+
+  /* Below 768 px: the rail becomes a drawer; the sheet is full bleed above the tab bar. */
+  @media (max-width: 767.98px) {
+    .ty-app-frame[data-layout='rail'] {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-areas: 'stage';
+    }
+    .ty-app-frame[data-layout='rail'] .ty-app-frame__stage {
+      padding: 0;
+    }
+    .ty-app-frame[data-layout='rail'] .ty-app-frame__sheet {
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+    }
+    .ty-app-frame[data-layout='rail'] .ty-app-frame__aside-slot {
+      display: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-rail-item {
+      transition: none;
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .ty-app-frame__sheet {
+      background: var(--ty-surface-solid);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-app-frame__sheet {
+      border: 1px solid CanvasText;
+    }
+    .ty-rail-item[data-current] {
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+    }
+    .ty-rail-item[data-current]::before {
+      background: Highlight;
+    }
+    .ty-rail-context,
+    .ty-rail-item__count {
+      border: 1px solid CanvasText;
+    }
+  }
+}

package/src/components/app-frame/RailFrame.test.tsx

@@ -0,0 +1,159 @@
+import { I18nProvider } from 'react-aria-components'
+import { render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { BookOpen, CheckSquare, Home } from 'lucide-react'
+import { useState } from 'react'
+import { describe, expect, it } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { setViewportWidth } from '../../../test/media'
+import { ThemeScope } from '../../internal/ThemeScope'
+import { FloatingActionBar } from '../floating-action-bar/FloatingActionBar'
+import { AppFrame, type AppFrameProps } from './AppFrame'
+import { RailContextButton, RailNavItem, RailNavSection } from './RailNav'
+
+function Navigation() {
+  return (
+    <>
+      <RailNavSection>
+        <RailNavItem label="Overview" icon={Home} href="/overview" current />
+      </RailNavSection>
+      <RailNavSection label="Collect">
+        <RailNavItem label="Sources" icon={BookOpen} href="/sources" />
+        <RailNavItem label="Verification" icon={CheckSquare} href="/verify" count={12} />
+      </RailNavSection>
+    </>
+  )
+}
+
+const dock = (
+  <FloatingActionBar
+    anchor="container"
+    edge="bottom"
+    narrowVariant="tabbar"
+    destinations={[
+      { id: 'o', label: 'Overview', icon: Home, href: '/overview', active: true },
+      { id: 's', label: 'Sources', icon: BookOpen, href: '/sources' },
+    ]}
+  />
+)
+
+function Shell(props: Partial<AppFrameProps>) {
+  const [navOpen, setNavOpen] = useState(false)
+  return (
+    <AppFrame
+      brand={<span>Tympan</span>}
+      context={<RailContextButton scope="Example Lab" name="Vila Aurora air-quality study" />}
+      account={<span>Marina</span>}
+      navigation={<Navigation />}
+      navOpen={navOpen}
+      onNavOpenChange={setNavOpen}
+      {...props}
+    >
+      {props.children ?? <h1>Overview</h1>}
+    </AppFrame>
+  )
+}
+
+describe('AppFrame rail layout', () => {
+  it('is the default without a top bar: a navigation landmark, one main, no banner', () => {
+    const { container } = render(<Shell />)
+    expect(container.querySelector('.ty-app-frame')).toHaveAttribute('data-layout', 'rail')
+    expect(screen.getByRole('navigation', { name: 'Main' })).toBeInTheDocument()
+    expect(screen.getAllByRole('main')).toHaveLength(1)
+    expect(screen.queryByRole('banner')).toBeNull()
+  })
+
+  it('keeps DOM order skip link, rail, main', async () => {
+    render(<Shell />)
+    await userEvent.tab()
+    expect(screen.getByRole('link', { name: 'Skip to main content' })).toHaveFocus()
+    const nav = screen.getByRole('navigation', { name: 'Main' })
+    expect(nav.compareDocumentPosition(screen.getByRole('main')) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+  })
+
+  it('marks the active item and names counts in words', () => {
+    render(<Shell />)
+    expect(screen.getByRole('link', { name: 'Overview' })).toHaveAttribute('aria-current', 'page')
+    const verify = screen.getByRole('link', { name: 'Verification, 12 pending' })
+    expect(verify).not.toHaveAttribute('aria-current')
+    expect(screen.getByRole('list', { name: 'Collect' })).toBeInTheDocument()
+  })
+
+  it('draws the active item with accent-soft fill and a 3 px inset bar', () => {
+    const css = cssOf('components/app-frame/AppFrameRail.css')
+    expect(css).toMatch(/\.ty-rail-item\[data-current\]\s*\{[^}]*background:\s*var\(--ty-accent-soft\)/)
+    expect(css).toMatch(/\.ty-rail-item\[data-current\]::before\s*\{[^}]*inline-size:\s*3px/)
+    expect(css).toMatch(/--ty-rail-width:\s*248px/)
+  })
+
+  it('reserves bottom space for the dock and adds a skip link to it', () => {
+    render(<Shell dock={dock} />)
+    expect(screen.getByRole('link', { name: 'Skip to the action bar' })).toHaveAttribute('href', '#ty-action-bar')
+    expect(screen.getByRole('navigation', { name: 'Actions' })).toHaveAttribute('id', 'ty-action-bar')
+    const css = cssOf('components/app-frame/AppFrameRail.css')
+    expect(css).toMatch(/\.ty-app-frame__sheet\s*\{[^}]*padding-block-end:\s*calc\(var\(--ty-sheet-pad\) \+ var\(--ty-action-bar-inset-bottom, 0px\)\)/)
+    expect(css).toMatch(/\.ty-app-frame__sheet\s*\{[^}]*border-radius:\s*var\(--ty-radius-sheet\)/)
+    expect(css).toMatch(/\.ty-app-frame__sheet\s*\{[^}]*overflow-y:\s*auto/)
+  })
+
+  it('below 768 px hides the rail until the tab bar opens it in a modal drawer', async () => {
+    setViewportWidth(375)
+    render(<Shell dock={dock} />)
+    expect(screen.queryByRole('navigation', { name: 'Main' })).toBeNull()
+    const bar = screen.getByRole('navigation', { name: 'Actions' })
+    expect(bar).toHaveAttribute('data-variant', 'tabbar')
+    await userEvent.click(within(bar).getByRole('button', { name: 'More' }))
+    await userEvent.click(await screen.findByRole('menuitem', { name: 'All sections' }))
+    const dialog = await screen.findByRole('dialog', { name: 'Main' })
+    expect(within(dialog).getByRole('navigation', { name: 'Main' })).toBeInTheDocument()
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+  })
+
+  it('below 768 px without a dock offers a menu control', async () => {
+    setViewportWidth(375)
+    render(<Shell />)
+    await userEvent.click(screen.getByRole('button', { name: 'Open navigation' }))
+    expect(await screen.findByRole('dialog', { name: 'Main' })).toBeInTheDocument()
+  })
+
+  it('keeps the wave-1 top bar layout when a top bar is given', () => {
+    render(<AppFrame navigation={<Navigation />} topBar={<span>Air study</span>}>content</AppFrame>)
+    expect(screen.getByRole('banner')).toBeInTheDocument()
+  })
+
+  it('is full bleed below 768 px and opaque under reduced transparency', () => {
+    const css = cssOf('components/app-frame/AppFrameRail.css')
+    expect(mediaBlock(css, /\(max-width:\s*767\.98px\)/)).toMatch(/border-radius:\s*0/)
+    expect(mediaBlock(css, /\(prefers-reduced-transparency:\s*reduce\)/)).toMatch(/backdrop-filter:\s*none/)
+    expect(mediaBlock(css, /\(forced-colors:\s*active\)/)).toMatch(/Highlight/)
+  })
+
+  it('has no axe violations, light and dark', async () => {
+    for (const scheme of ['light', 'dark'] as const) {
+      const { container, unmount } = render(
+        <ThemeScope scheme={scheme}>
+          <Shell dock={dock} />
+        </ThemeScope>,
+      )
+      await expectNoAxeViolations(container)
+      unmount()
+    }
+  })
+})
+
+describe('AppFrame rail layout in right-to-left', () => {
+  it('renders the shell under dir="rtl" with the inset bar on the inline start, and passes axe', async () => {
+    const { container } = render(
+      <I18nProvider locale="he">
+        <div dir="rtl" lang="he">
+          <Shell dock={dock} />
+        </div>
+      </I18nProvider>,
+    )
+    expect(screen.getByRole('navigation', { name: 'Main' })).toBeInTheDocument()
+    expect(cssOf('components/app-frame/AppFrameRail.css')).toMatch(/\.ty-rail-item\[data-current\]::before\s*\{[^}]*inset-inline-start:\s*0/)
+    await expectNoAxeViolations(container)
+  })
+})

package/src/components/app-frame/RailFrame.tsx

@@ -0,0 +1,140 @@
+import { Menu as MenuGlyph, X } from 'lucide-react'
+import { Suspense, useMemo, type ReactNode } from 'react'
+import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import { breakpoints, useMinWidth } from '../../internal/media'
+import { useMessages } from '../../internal/provider'
+import { Button } from '../button/Button'
+import { PageLoadingState } from '../skeleton/Skeleton'
+import { SkipLink } from '../skip-link/SkipLink'
+import type { AppFrameProps } from './AppFrame'
+import { FrameContext, type FrameState } from './frameContext'
+
+/*
+ * Research shell (spec: wave-4/app-frame-rail.md): rail on the start side, the
+ * page on one glass sheet with its own scroll, the dock floating at the bottom
+ * of the sheet. There is no top bar and so no banner landmark.
+ */
+
+type Region = 'rail' | 'stage' | 'aside'
+
+/** Root property the dock publishes (FloatingActionBar); the sheet pads its end by it. */
+export const RAIL_DOCK_INSET_PROPERTY = '--ty-action-bar-inset-bottom'
+
+/** The rail's stacked parts, in visual and DOM order. */
+function railParts(props: AppFrameProps, navigationLabel: string): Array<[string, ReactNode]> {
+  return [
+    ['brand', props.brand],
+    ['context', props.context],
+    [
+      'nav',
+      <nav key="nav" className="ty-app-frame__rail-nav" aria-label={navigationLabel}>
+        {props.navigation}
+      </nav>,
+    ],
+    ['account', props.account],
+  ]
+}
+
+function RailColumn({ parts }: { parts: Array<[string, ReactNode]> }) {
+  return (
+    <div className="ty-app-frame__rail" data-region={'rail' satisfies Region}>
+      {parts.map(([slot, node]) =>
+        node == null || node === false ? null : slot === 'nav' ? (
+          node
+        ) : (
+          <div key={slot} className="ty-app-frame__rail-slot" data-slot={slot}>
+            {node}
+          </div>
+        ),
+      )}
+    </div>
+  )
+}
+
+export function RailFrame(props: AppFrameProps) {
+  const m = useMessages()
+  const wide = useMinWidth(breakpoints.md)
+  const mainId = props.mainId ?? 'main-content'
+  const dockId = props.dockId ?? 'ty-action-bar'
+  const setOpen = (open: boolean) => props.onNavOpenChange?.(open)
+  const parts = railParts(props, m.rail.label)
+
+  const state = useMemo<FrameState>(
+    () => ({
+      navCollapsed: false,
+      navPlacement: wide ? 'column' : 'drawer',
+      layout: 'rail',
+      openNavigation: wide ? undefined : () => props.onNavOpenChange?.(true),
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [wide, props.onNavOpenChange],
+  )
+
+  const drawer = (
+    <ModalOverlay className="ty-app-frame__overlay" isOpen={!!props.navOpen} onOpenChange={setOpen} isDismissable>
+      <Modal className="ty-app-frame__drawer" data-placement="start">
+        <Dialog className="ty-app-frame__drawer-dialog" aria-label={m.rail.label}>
+          <div className="ty-app-frame__drawer-head">
+            <Button variant="quiet" iconOnly accessibleLabel={m.rail.closeNavigation} leadingIcon={<X />} onPress={() => setOpen(false)} />
+          </div>
+          <RailColumn parts={parts} />
+        </Dialog>
+      </Modal>
+    </ModalOverlay>
+  )
+
+  return (
+    <FrameContext.Provider value={state}>
+      {props.sessionGuard}
+      {props.initializers}
+      <div
+        className={cx('ty-app-frame', props.className)}
+        data-layout="rail"
+        data-nav={wide ? 'column' : 'drawer'}
+        data-width={props.width ?? 'reading'}
+        data-dock={props.dock ? '' : undefined}
+      >
+        <SkipLink targetId={mainId} />
+        {props.dock ? <SkipLink targetId={dockId} label={m.actionBar.skipTo} /> : null}
+        {props.ambient ? (
+          <div className="ty-app-frame__ambient" aria-hidden="true">
+            <span className="ty-app-frame__orb ty-app-frame__orb--top" />
+            <span className="ty-app-frame__orb ty-app-frame__orb--bottom" />
+          </div>
+        ) : null}
+        {props.progress ? <div className="ty-app-frame__progress">{props.progress}</div> : null}
+
+        {wide ? <RailColumn parts={parts} /> : drawer}
+
+        <div className="ty-app-frame__stage" data-region={'stage' satisfies Region}>
+          <main id={mainId} tabIndex={-1} className="ty-app-frame__sheet" aria-busy={props.busy || undefined}>
+            <div className="ty-app-frame__content">
+              <Suspense fallback={<PageLoadingState label={props.loadingLabel ?? m.frame.loadingPage} />}>{props.children}</Suspense>
+            </div>
+          </main>
+          {props.dock}
+          {!wide && !props.dock ? (
+            <Button
+              className="ty-app-frame__rail-opener"
+              variant="secondary"
+              shape="circle"
+              iconOnly
+              accessibleLabel={m.rail.openNavigation}
+              leadingIcon={<MenuGlyph />}
+              aria-expanded={!!props.navOpen}
+              onPress={() => setOpen(true)}
+            />
+          ) : null}
+        </div>
+
+        {props.aside ? (
+          <div className="ty-app-frame__aside-slot" data-region={'aside' satisfies Region}>
+            {props.aside}
+          </div>
+        ) : null}
+      </div>
+      {props.overlays}
+    </FrameContext.Provider>
+  )
+}