@kestack/web-platform 0.0.0-stage → 0.0.1

package/src/recipes/frame/frame/frame.tsx

@@ -0,0 +1,204 @@
+import { GestureProvider, GestureZone } from '../../../input/index.ts';
+import { cn } from 'cn';
+import { motion, type MotionStyle } from 'motion/react';
+import {
+  createContext,
+  type CSSProperties,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+} from 'react';
+import { useIsMobile } from '#hooks/use-mobile';
+import {
+  DERIVED,
+  FIRST_PAINT,
+  PAGE_SIZE,
+  PAGE_STYLE,
+  SCRIM,
+  SIDEBAR_STYLE,
+} from './geometry.ts';
+import { useMobileProgress, useOpenProgress } from './motion.ts';
+import { useHydrated, useOpenState } from './state.ts';
+
+interface FrameState {
+  readonly open: boolean;
+  readonly setOpen: (open: boolean) => void;
+  readonly toggle: () => void;
+  readonly isMobile: boolean;
+  readonly hasSidebar: boolean;
+}
+
+const FrameContext = createContext<FrameState | null>(null);
+
+/** The shell's state, for anything inside it. */
+export function useFrame(): FrameState {
+  const frame = useContext(FrameContext);
+  if (frame === null)
+    throw new Error('useAppShell must be used in an AppShell');
+  return frame;
+}
+
+interface FrameProps {
+  /** What the sidebar holds; without it the page fills the screen alone. */
+  readonly sidebar?: ReactNode;
+  /** The page. */
+  readonly children: ReactNode;
+  readonly swipe: 'anywhere' | 'edge' | 'off';
+  /** The sidebar's width on a wide screen, in px. */
+  readonly sidebarWidth?: number;
+  /** Drawn outside the moving page, told whether the sidebar is open. */
+  readonly statusBar?: (open: boolean) => ReactNode;
+  readonly className?: string;
+  readonly style?: CSSProperties;
+}
+
+/**
+ * The screen: a sidebar under the page. On a phone the page moves aside,
+ * shrinks and dims to show it, under a finger or a spring; on a wide screen
+ * it sits beside the page, a card. Crossing between the two morphs.
+ */
+export function Frame(props: FrameProps) {
+  const root = cn('h-dvh', props.className);
+  if (props.sidebar === undefined) {
+    return (
+      <div className={root} style={props.style}>
+        <Page statusBar={props.statusBar}>{props.children}</Page>
+      </div>
+    );
+  }
+  // A swipe needs a Gesture Zone; it takes only the swipes the sidebar wants.
+  return (
+    <GestureProvider>
+      <GestureZone className={root} style={props.style}>
+        <WithSidebar {...props} sidebar={props.sidebar} />
+      </GestureZone>
+    </GestureProvider>
+  );
+}
+
+const noop = () => {};
+
+function Page(props: {
+  readonly statusBar: FrameProps['statusBar'];
+  readonly children: ReactNode;
+}) {
+  const isMobile = useIsMobile();
+  const state = useMemo<FrameState>(
+    () => ({
+      open: false,
+      setOpen: noop,
+      toggle: noop,
+      isMobile,
+      hasSidebar: false,
+    }),
+    [isMobile],
+  );
+  return (
+    <FrameContext.Provider value={state}>
+      {props.statusBar?.(false)}
+      <main
+        data-slot="app-shell-page"
+        className="flex h-full flex-col bg-background"
+      >
+        {props.children}
+      </main>
+    </FrameContext.Provider>
+  );
+}
+
+function WithSidebar(props: FrameProps & { readonly sidebar: ReactNode }) {
+  const isMobile = useIsMobile();
+  const { open, shown, setOpen } = useOpenState();
+  const toggle = useCallback(() => setOpen(!open), [open, setOpen]);
+
+  // The two values everything is drawn from. The server can't know either,
+  // so until hydration ends the classes give both by the breakpoint.
+  const values = {
+    '--sidebar-open': useOpenProgress({ open, setOpen, swipe: props.swipe }),
+    '--sidebar-mobile': useMobileProgress(),
+  };
+  const hydrated = useHydrated();
+
+  const state = useMemo<FrameState>(
+    () => ({ open: shown, setOpen, toggle, isMobile, hasSidebar: true }),
+    [shown, setOpen, toggle, isMobile],
+  );
+  // On a phone the open sidebar covers the page, which is inert till it shuts.
+  const covered = isMobile && shown;
+
+  return (
+    <FrameContext.Provider value={state}>
+      <div
+        data-slot="app-shell"
+        data-state={shown ? 'open' : 'closed'}
+        className={cn(
+          'relative flex size-full overflow-hidden bg-sidebar',
+          FIRST_PAINT,
+        )}
+        style={
+          {
+            '--sidebar-width':
+              props.sidebarWidth === undefined
+                ? '16rem'
+                : `${props.sidebarWidth}px`,
+            '--sidebar-width-mobile': '18rem',
+          } as CSSProperties
+        }
+        // The page is inert while covered, so a tap on it lands here: that
+        // shuts the sidebar, as a tap on a scrim would.
+        onClick={(event) => {
+          if (covered && event.target === event.currentTarget) setOpen(false);
+        }}
+        onKeyDown={(event) => {
+          if (covered && event.key === 'Escape') setOpen(false);
+        }}
+      >
+        {props.statusBar?.(shown)}
+        {/* No box of its own: it carries the values to what it holds. */}
+        <motion.div
+          className="contents"
+          style={{ ...DERIVED, ...(hydrated ? values : {}) } as MotionStyle}
+        >
+          {/* Absolute, not fixed: a fixed element down the whole screen stops
+              an installed iOS app's status bar following theme switches. */}
+          <aside
+            inert={!shown}
+            data-slot="app-shell-sidebar"
+            style={SIDEBAR_STYLE}
+            className="absolute inset-y-0 left-0 z-0 flex w-(--sidebar-width-mobile) flex-col bg-sidebar pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] text-sidebar-foreground md:w-(--sidebar-width) md:py-2"
+          >
+            {/* On touch, use-gesture keeps the first 24px from the edge from
+                the browser's back swipe, but not on a link or button. This
+                strip covers the items there, so the swipe never reaches one. */}
+            {props.swipe !== 'off' && (
+              <div
+                aria-hidden="true"
+                className="absolute inset-y-0 left-0 z-10 hidden w-6 pointer-coarse:block"
+              />
+            )}
+            {props.sidebar}
+          </aside>
+          <main
+            inert={covered}
+            data-slot="app-shell-page"
+            style={PAGE_STYLE}
+            className={cn(
+              'relative z-10 flex flex-col overflow-hidden bg-background shadow-sm',
+              PAGE_SIZE,
+            )}
+          >
+            {props.children}
+            <div
+              aria-hidden="true"
+              className={cn(
+                'pointer-events-none absolute inset-0 z-50 bg-black',
+                SCRIM,
+              )}
+            />
+          </main>
+        </motion.div>
+      </div>
+    </FrameContext.Provider>
+  );
+}

package/src/recipes/frame/frame/geometry.ts

@@ -0,0 +1,60 @@
+import type { CSSProperties } from 'react';
+
+/*
+ * The shell is drawn from two values, both 0 to 1: `--sidebar-open`, how open
+ * the sidebar is, and `--sidebar-mobile`, how much the layout is a phone's.
+ * Everything else is a formula of them, so the same formulas swipe the
+ * sidebar open on a phone, push the page on a wide screen, and morph one into
+ * the other as the screen crosses the breakpoint.
+ *
+ * They move only what is painted. Sizes follow the breakpoint itself, in the
+ * classes, so the page reflows once as the screen crosses it, never while it
+ * morphs.
+ */
+
+/** The values the shapes below read, derived from the two. */
+export const DERIVED: Record<string, string> = {
+  // How far the page is lifted off the sidebar, a phone's look: shrunk,
+  // rounded and dimmed. Never on a wide screen.
+  '--sidebar-lift': 'calc(var(--sidebar-open) * var(--sidebar-mobile))',
+  // How far the page moves aside: a phone's sidebar width or a wide screen's.
+  '--sidebar-push':
+    'calc(var(--sidebar-width-mobile) * var(--sidebar-mobile) + var(--sidebar-width) * (1 - var(--sidebar-mobile)))',
+  // The margin round the page, a card on a wide screen.
+  '--sidebar-gap': 'calc(0.5rem * (1 - var(--sidebar-mobile)))',
+};
+
+/**
+ * The two values before the motion takes over, by the breakpoint: a phone
+ * starts shut, a wide screen as the markup says.
+ */
+export const FIRST_PAINT =
+  '[--sidebar-mobile:1] [--sidebar-open:0] md:[--sidebar-mobile:0] md:data-[state=open]:[--sidebar-open:1]';
+
+/** The sidebar, under the page, sliding in and fading up as it opens. */
+export const SIDEBAR_STYLE: CSSProperties = {
+  translate: 'calc((var(--sidebar-open) - 1) * 20%)',
+  opacity: 'var(--sidebar-open)',
+};
+
+/** The page: moved aside by the sidebar, lifted on a phone, a card when wide. */
+export const PAGE_STYLE: CSSProperties = {
+  flex: 'none',
+  translate:
+    'calc(var(--sidebar-open) * var(--sidebar-push) + (1 - var(--sidebar-open)) * var(--sidebar-gap)) var(--sidebar-gap)',
+  scale: 'calc(1 - 0.08 * var(--sidebar-lift))',
+  transformOrigin: 'left center',
+  borderRadius:
+    'calc(var(--sidebar-lift) * 2rem + (1 - var(--sidebar-mobile)) * 0.75rem)',
+};
+
+/**
+ * The page's size: a phone's is the whole screen, pushed aside; a wide one's
+ * is what the sidebar leaves, less the card's margin.
+ */
+export const PAGE_SIZE =
+  'w-full md:h-[calc(100%-1rem)] md:w-[calc(100%-var(--sidebar-open)*var(--sidebar-width)-(2-var(--sidebar-open))*0.5rem)]';
+
+/** The dim over the page, by how lifted it is. */
+export const SCRIM =
+  'opacity-[calc(var(--sidebar-lift)*0.3)] dark:opacity-[calc(var(--sidebar-lift)*0.5)]';

package/src/recipes/frame/frame/index.ts

@@ -0,0 +1 @@
+export { Frame, useFrame } from './frame.tsx';

package/src/recipes/frame/frame/motion.ts

@@ -0,0 +1,85 @@
+import { useSidebar as useSwipeSidebar } from '../../../input/index.ts';
+import { animate, type MotionValue, motionValue } from 'motion/react';
+import { useCallback, useState, useSyncExternalStore } from 'react';
+import { MOBILE_QUERY } from '#hooks/use-mobile';
+
+/** How far a phone's sidebar opens, in px: the `18rem` of `--sidebar-width-mobile`. */
+const PHONE_SIDEBAR_WIDTH = 288;
+/** The strip along the left edge that opens it, when swipes open from the edge. */
+const EDGE = 24;
+const TOUCH_QUERY = '(pointer: coarse)';
+const MOBILE_SPRING = {
+  type: 'spring',
+  visualDuration: 0.3,
+  bounce: 0,
+} as const;
+
+const watch = (query: string, onChange: () => void) => {
+  const mql = window.matchMedia(query);
+  mql.addEventListener('change', onChange);
+  return () => mql.removeEventListener('change', onChange);
+};
+
+function useIsTouch() {
+  return useSyncExternalStore(
+    useCallback((onChange: () => void) => watch(TOUCH_QUERY, onChange), []),
+    () => window.matchMedia(TOUCH_QUERY).matches,
+    () => false,
+  );
+}
+
+/**
+ * `open`, 0 shut to 1 open: under a finger on a touch screen, else springing
+ * to the open state as it changes. Swipes open from anywhere, from the left
+ * edge only, or not at all.
+ */
+export function useOpenProgress(options: {
+  readonly open: boolean;
+  readonly setOpen: (open: boolean) => void;
+  readonly swipe: 'anywhere' | 'edge' | 'off';
+}): MotionValue<number> {
+  const touch = useIsTouch();
+  return useSwipeSidebar({
+    side: 'left',
+    width: PHONE_SIDEBAR_WIDTH,
+    edge: options.swipe === 'edge' ? EDGE : undefined,
+    enabled: touch && options.swipe !== 'off',
+    open: options.open,
+    onOpenChange: options.setOpen,
+  }).progress;
+}
+
+/**
+ * `mobile`, 1 on a phone to 0 wider: springing between the two as the screen
+ * crosses the breakpoint, or jumping, for reduced motion. It starts at the
+ * screen's real value.
+ */
+export function useMobileProgress(): MotionValue<number> {
+  const [value] = useState(() =>
+    motionValue(
+      typeof window !== 'undefined' && window.matchMedia(MOBILE_QUERY).matches
+        ? 1
+        : 0,
+    ),
+  );
+  // The breakpoint's change event moves the value, through React's store
+  // subscription: no effect to keep in step.
+  useSyncExternalStore(
+    useCallback(
+      (onChange: () => void) =>
+        watch(MOBILE_QUERY, () => {
+          const next = window.matchMedia(MOBILE_QUERY).matches ? 1 : 0;
+          if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            value.jump(next);
+          } else {
+            animate(value, next, MOBILE_SPRING);
+          }
+          onChange();
+        }),
+      [value],
+    ),
+    () => value,
+    () => value,
+  );
+  return value;
+}

package/src/recipes/frame/frame/state.ts

@@ -0,0 +1,29 @@
+import { useState, useSyncExternalStore } from 'react';
+import { MOBILE_QUERY } from '#hooks/use-mobile';
+
+const noSubscription = () => () => {};
+
+/** False while the server renders and hydration matches it, then true. */
+export function useHydrated() {
+  return useSyncExternalStore(
+    noSubscription,
+    () => true,
+    () => false,
+  );
+}
+
+/**
+ * The sidebar's one open state, at every screen size. It starts open, except
+ * on a phone, where it starts shut so the page shows first. The server can't
+ * tell a phone, so it renders open, and so does hydration: `shown` is the
+ * state for the markup, `open` the real one for the motion, which draws
+ * nothing until then.
+ */
+export function useOpenState() {
+  const [open, setOpen] = useState(
+    () =>
+      typeof window === 'undefined' || !window.matchMedia(MOBILE_QUERY).matches,
+  );
+  const shown = useHydrated() ? open : true;
+  return { open, shown, setOpen };
+}

package/src/recipes/frame/header.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+import { PanelLeftIcon } from 'lucide-react';
+import { Button } from '#components/ui/button';
+import { Separator } from '#components/ui/separator';
+import { useFrame } from './frame/index.ts';
+
+/** What an app puts in its header. */
+export interface HeaderConfig {
+  /** Where you are. */
+  readonly title: ReactNode;
+  /** At the right edge: the page's own actions, and the account menu when there's no sidebar. */
+  readonly actions?: ReactNode;
+}
+
+/**
+ * The page's bar: the sidebar's button and a divider, when there's a sidebar,
+ * then where you are, then the actions. Under the status bar on a phone.
+ */
+export function Header(props: { readonly config: HeaderConfig }) {
+  const { open, toggle, hasSidebar } = useFrame();
+  return (
+    <header
+      data-slot="app-shell-header"
+      className="box-content flex h-14 shrink-0 items-center gap-2 border-b border-border px-4 pt-[env(safe-area-inset-top)] md:h-12 md:pt-0"
+    >
+      {hasSidebar ? (
+        <>
+          <Button
+            variant="ghost"
+            size="icon"
+            aria-label="Toggle sidebar"
+            aria-expanded={open}
+            className="-ml-2 size-11 rounded-full hover:bg-transparent aria-expanded:bg-transparent md:-ml-1 md:size-8 dark:hover:bg-transparent"
+            onClick={toggle}
+          >
+            <PanelLeftIcon aria-hidden="true" />
+          </Button>
+          <Separator
+            orientation="vertical"
+            className="mr-1 data-[orientation=vertical]:h-4 data-[orientation=vertical]:self-center"
+          />
+        </>
+      ) : null}
+      <div className="min-w-0 flex-1 truncate text-sm font-medium">
+        {props.config.title}
+      </div>
+      {props.config.actions === undefined ? null : (
+        <div className="-mr-2 flex shrink-0 items-center gap-1 md:-mr-1">
+          {props.config.actions}
+        </div>
+      )}
+    </header>
+  );
+}

package/src/recipes/frame/index.ts

@@ -0,0 +1,16 @@
+export {
+  AppShell,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInput,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  useAppShell,
+  useSidebarWidth,
+} from './app-shell.tsx';

package/src/recipes/frame/sidebar/blocks.tsx

@@ -0,0 +1,214 @@
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cn } from 'cn';
+import {
+  type ComponentProps,
+  type CSSProperties,
+  type MouseEvent,
+  useState,
+} from 'react';
+import { Input } from '#components/ui/input';
+import { Skeleton } from '#components/ui/skeleton';
+import { useFrame } from '../frame/index.ts';
+
+/*
+ * The pieces a sidebar is built from, for content the `nav` list can't
+ * describe. `nav` is built from them too, so both look alike.
+ */
+
+export function SidebarGroup({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+      {...props}
+    />
+  );
+}
+
+export function SidebarGroupLabel({
+  className,
+  ...props
+}: ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group-label"
+      className={cn(
+        'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 [&>svg]:size-4 [&>svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function SidebarGroupContent({
+  className,
+  ...props
+}: ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      className={cn('w-full text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export function SidebarInput({
+  className,
+  ...props
+}: ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      className={cn('h-8 w-full bg-background shadow-none', className)}
+      {...props}
+    />
+  );
+}
+
+export function SidebarMenu({ className, ...props }: ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+      {...props}
+    />
+  );
+}
+
+export function SidebarMenuItem({ className, ...props }: ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      className={cn('group/menu-item relative', className)}
+      {...props}
+    />
+  );
+}
+
+// On a phone the open sidebar covers the page, so following a link shuts
+// it. A button that isn't a link, such as a menu's trigger, leaves it open.
+function useShutOnPhone<Element>(
+  link: boolean,
+  onClick: ((event: MouseEvent<Element>) => void) | undefined,
+) {
+  const { isMobile, setOpen } = useFrame();
+  return (event: MouseEvent<Element>) => {
+    onClick?.(event);
+    if (link && isMobile) setOpen(false);
+  };
+}
+
+/**
+ * A place in the sidebar. `render` makes it a link, and then a tap on a phone
+ * also shuts the sidebar. A finger's size on a phone, compact on a wide screen.
+ */
+export function SidebarMenuButton({
+  render,
+  isActive = false,
+  size = 'default',
+  className,
+  onClick,
+  ...props
+}: useRender.ComponentProps<'button'> &
+  ComponentProps<'button'> & {
+    readonly isActive?: boolean;
+    readonly size?: 'default' | 'lg';
+  }) {
+  const shutOnPhone = useShutOnPhone(render !== undefined, onClick);
+  return useRender({
+    defaultTagName: 'button',
+    props: mergeProps<'button'>(
+      {
+        className: cn(
+          'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-inset active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',
+          size === 'lg' ? 'h-12' : 'h-11 md:h-8',
+          className,
+        ),
+        onClick: shutOnPhone,
+      },
+      props,
+    ),
+    render,
+    state: { slot: 'sidebar-menu-button', size, active: isActive },
+  });
+}
+
+/** A loading placeholder the shape of a menu button. */
+export function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: ComponentProps<'div'> & { readonly showIcon?: boolean }) {
+  // Random width between 50 to 90%.
+  const [width] = useState(() => `${Math.floor(Math.random() * 40) + 50}%`);
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      {...props}
+    >
+      {showIcon ? <Skeleton className="size-4 rounded-md" /> : null}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        style={{ '--skeleton-width': width } as CSSProperties}
+      />
+    </div>
+  );
+}
+
+/** Places nested under a menu button, along a line. */
+export function SidebarMenuSub({ className, ...props }: ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      className={cn(
+        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function SidebarMenuSubItem({
+  className,
+  ...props
+}: ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      className={cn('group/menu-sub-item relative', className)}
+      {...props}
+    />
+  );
+}
+
+/** A nested place, a link: a tap on a phone shuts the sidebar. */
+export function SidebarMenuSubButton({
+  render,
+  isActive = false,
+  className,
+  onClick,
+  ...props
+}: useRender.ComponentProps<'a'> &
+  ComponentProps<'a'> & { readonly isActive?: boolean }) {
+  const shutOnPhone = useShutOnPhone(true, onClick);
+  return useRender({
+    defaultTagName: 'a',
+    props: mergeProps<'a'>(
+      {
+        className: cn(
+          'flex h-9 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sm text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-inset active:bg-sidebar-accent active:text-sidebar-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground md:h-7 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+          className,
+        ),
+        onClick: shutOnPhone,
+      },
+      props,
+    ),
+    render,
+    state: { slot: 'sidebar-menu-sub-button', active: isActive },
+  });
+}

package/src/recipes/frame/sidebar/index.ts

@@ -0,0 +1,15 @@
+export { type SidebarConfig, SidebarContents } from './sidebar.tsx';
+export { useSidebarWidth } from './width.ts';
+export {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInput,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from './blocks.tsx';