@justanarthur/modo-ui 0.6.0-canary.9 → 0.6.0

package/blocks/sidebar-app/index.tsx

@@ -1,218 +0,0 @@
-/*
- * Fluid Functionalism's sidebar app shell as the preset `sa1FQfCxH6`
- * (fluidfunctionalism.com/docs/sidebar?preset=sa1FQfCxH6) configures it: the
- * inset layout starting collapsed, a workspace switcher, search and a "New"
- * row in the header, two collapsible thread sections, a row menu on every
- * thread and a user row with two buttons in the footer. The composition is
- * the app-sidebar.tsx and page.tsx that FF's preset generator emits for it
- * (github.com/mickadesign/fluid-functionalism `lib/preset/sidebar-install.ts`
- * @ c367a0d066bc10e663b3d269bc40539ea8417b25), over the sidebar-app,
- * sidebar-workspace-header and sidebar-user-footer blocks ported beside it —
- * MIT License © 2026 Micka Touillaud (notice: LICENSE.fluid-functionalism).
- *
- * Local changes: the selected thread rides the Sidebar's `value` (the rows
- * carry `value`s) and the topbar shows it; the switcher keeps its own pick
- * (`defaultCheckedIndex`); the footer's icon buttons are the DS's ghost
- * `Button`; `variant`, `side`, `openOnHover` and `contained` are props.
- */
-
-import { useState } from 'react'
-import Button from '../../components/button'
-import Sidebar from '../../components/navigation/sidebar'
-import { DropdownContent, DropdownMenu, DropdownTrigger, MenuItem } from '../../components/overlays/dropdown'
-import Tooltip from '../../components/overlays/tooltip'
-import { useIcon } from '../../lib/icon-context'
-import { cn } from '../../lib/utils'
-import { SidebarInsetTopbar } from './inset-topbar'
-import { NAV_SECTIONS } from './nav-data'
-import { SidebarSearchField } from './search-field'
-import { SidebarUserFooter } from './user-footer'
-import { SidebarWorkspaceHeader, WorkspaceTile } from './workspace-header'
-
-interface SidebarAppProps {
-  /** Start with the sidebar open; the preset starts it collapsed. Defaults to `false`. */
-  defaultOpen?: boolean
-  /** The sidebar's layout (see Sidebar). Defaults to `'inset'`. */
-  variant?: 'sidebar' | 'floating' | 'inset'
-  /** The edge it sits on. Defaults to `'left'`. */
-  side?: 'left' | 'right'
-  /** Open the collapsed sidebar while the pointer is at its edge or on the topbar's trigger (see Sidebar). Defaults to `false`. */
-  openOnHover?: boolean
-  /** Fill the parent box instead of the viewport, as the examples do. Defaults to `false`. */
-  contained?: boolean
-}
-
-interface AppSidebarProps {
-  variant: 'sidebar' | 'floating' | 'inset'
-  side: 'left' | 'right'
-  className?: string
-  value: string
-  onValueChange: (value: string) => void
-}
-
-function AppSidebar({ variant, side, className, value, onValueChange }: AppSidebarProps) {
-  const PlusIcon = useIcon('plus')
-  const PencilIcon = useIcon('pencil')
-  const MoreVerticalIcon = useIcon('more-vertical')
-  const LinkIcon = useIcon('link')
-  const UserIcon = useIcon('user')
-  const SettingsIcon = useIcon('settings')
-  const ArrowLeftIcon = useIcon('arrow-left')
-  const MoonIcon = useIcon('moon')
-
-  return (
-    <Sidebar variant={variant} side={side} className={className} value={value} onValueChange={onValueChange}>
-      <Sidebar.Header>
-        <SidebarWorkspaceHeader
-          name="Acme Inc"
-          tile={<WorkspaceTile>A</WorkspaceTile>}
-          defaultCheckedIndex={0}
-          menu={
-            <>
-              <MenuItem index={0} label="Acme Inc" />
-              <MenuItem index={1} label="Personal" />
-              <MenuItem index={2} icon={PlusIcon} label="New workspace" />
-            </>
-          }
-        />
-        {/* Search and the action rows are one block on the menu rows' rhythm. */}
-        <div className="flex flex-col gap-0.5">
-          <SidebarSearchField />
-          <Sidebar.Menu>
-            <Sidebar.MenuItem>
-              <Sidebar.MenuButton icon={PlusIcon}>
-                New
-                <span className="ml-auto inline-flex opacity-0 transition-opacity duration-fast group-hover/menu-item:opacity-100 group-focus-within/menu-item:opacity-100">
-                  <kbd className="font-sans text-micro text-muted-foreground">⇧⌘O</kbd>
-                </span>
-              </Sidebar.MenuButton>
-            </Sidebar.MenuItem>
-          </Sidebar.Menu>
-        </div>
-      </Sidebar.Header>
-
-      <Sidebar.Content>
-        {NAV_SECTIONS.map(section => (
-          <Sidebar.Group key={section.label} collapsible>
-            <Sidebar.GroupLabel>{section.label}</Sidebar.GroupLabel>
-            <Sidebar.GroupActions>
-              <Tooltip content="Add item" side="top">
-                <Sidebar.GroupAction aria-label="Add item">
-                  <PlusIcon />
-                </Sidebar.GroupAction>
-              </Tooltip>
-            </Sidebar.GroupActions>
-            <Sidebar.Menu>
-              {section.items.map(item => (
-                <Sidebar.MenuItem key={item.label}>
-                  {/* The status draws the dot and the screen-reader "unread"; the value selects. */}
-                  <Sidebar.MenuButton status={item.status} value={item.label}>
-                    {item.label}
-                  </Sidebar.MenuButton>
-                  <DropdownMenu>
-                    <DropdownTrigger
-                      render={
-                        <Sidebar.MenuAction showOnHover aria-label="More options">
-                          <MoreVerticalIcon />
-                        </Sidebar.MenuAction>
-                      }
-                    />
-                    {/* 240px, the header and footer triggers' width. */}
-                    <DropdownContent className="min-w-0 w-[240px]" align="start" sideOffset={4}>
-                      <MenuItem index={0} icon={PencilIcon} label="Rename" />
-                      <MenuItem index={1} icon={LinkIcon} label="Share" />
-                    </DropdownContent>
-                  </DropdownMenu>
-                </Sidebar.MenuItem>
-              ))}
-            </Sidebar.Menu>
-          </Sidebar.Group>
-        ))}
-      </Sidebar.Content>
-
-      <Sidebar.Footer>
-        <div className="flex items-center gap-1 pr-1.5">
-          <SidebarUserFooter
-            name="Jane Doe"
-            avatar={
-              <span className="flex size-5 items-center justify-center rounded-full bg-muted-foreground text-micro-compact text-background">
-                J
-              </span>
-            }
-            className="min-w-0 flex-1"
-            menu={
-              <>
-                <MenuItem index={0} icon={UserIcon} label="Profile" />
-                <MenuItem index={1} icon={SettingsIcon} label="Settings" />
-                <MenuItem index={2} icon={ArrowLeftIcon} label="Log out" />
-              </>
-            }
-          />
-          <Tooltip content="Settings" side="top">
-            <Button variant="ghost" size="icon-compact" aria-label="Settings" className="size-6 shrink-0">
-              <SettingsIcon />
-            </Button>
-          </Tooltip>
-          <Tooltip content="Theme" side="top">
-            <Button variant="ghost" size="icon-compact" aria-label="Theme" className="size-6 shrink-0">
-              <MoonIcon />
-            </Button>
-          </Tooltip>
-        </div>
-      </Sidebar.Footer>
-    </Sidebar>
-  )
-}
-
-/**
- * An app shell around the Sidebar, as Fluid Functionalism's playground preset
- * `sa1FQfCxH6` builds it: the inset layout, starting collapsed.
- *
- * Press the trigger in the topbar (or `[`) to bring the sidebar in. The
- * header holds a workspace switcher, a search field and a "New" row; two
- * thread sections fold from their labels and carry an "Add item" action;
- * every thread shows its status dot and, on hover, a "More options" menu;
- * the footer anchors the user row and two buttons. Pick a thread and the
- * active row melts over to it while the topbar follows.
- *
- * Every overlay grows out of what opened it: the switcher, the user menu
- * and the row menus are Dropdowns, the labels on the buttons are Tooltips,
- * a collapsed sidebar with `openOnHover` slides open from its edge, and below
- * the `md` breakpoint the sidebar is a Sheet growing out of the left edge.
- *
- * @example {@include ./examples.mdx}
- */
-export default function SidebarApp({
-  defaultOpen = false,
-  variant = 'inset',
-  side = 'left',
-  openOnHover = false,
-  contained = false,
-}: SidebarAppProps) {
-  const [thread, setThread] = useState(NAV_SECTIONS[0]?.items[0]?.label ?? '')
-
-  return (
-    <Sidebar.Provider
-      defaultOpen={defaultOpen}
-      openOnHover={openOnHover}
-      className={contained ? 'h-full min-h-0' : undefined}
-    >
-      <AppSidebar
-        variant={variant}
-        side={side}
-        className={contained ? 'h-full' : undefined}
-        value={thread}
-        onValueChange={setThread}
-      />
-      {/* The floating card sits in a p-2 gutter: the topbar drops to line up with it. */}
-      <Sidebar.Inset className={cn(contained && 'min-h-0', variant === 'floating' && 'pt-2')}>
-        <SidebarInsetTopbar>
-          <span className="truncate text-body text-muted-foreground">{thread}</span>
-        </SidebarInsetTopbar>
-        <main className="flex flex-1 flex-col gap-4 p-4" />
-      </Sidebar.Inset>
-    </Sidebar.Provider>
-  )
-}
-
-export type { SidebarAppProps }

package/blocks/sidebar-app/inset-topbar.tsx

@@ -1,25 +0,0 @@
-// biome-ignore-all lint: vendored upstream code keeps its own patterns (see the header)
-/*
- * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
- * `registry/blocks/sidebar-app/inset-topbar.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
- * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
- * Local modifications:
- * - `"use client"` dropped; `@/components/ui/{sidebar,dropdown}` → `../../components/*`,
- *   `@/lib/sidebar-menu-grid` → `./menu-grid`, `@/lib/*` → `../../lib/*`.
- * - No peek to hide behind: the sidebar opens on hover in flow (the
- *   provider's `openOnHover`), so the trigger stays, riding the inset's edge.
- */
-
-import { type ReactNode } from 'react'
-import { SidebarTrigger } from '../../components/navigation/sidebar'
-import { cn } from '../../lib/utils'
-
-// The main region's topbar, its trigger first.
-export function SidebarInsetTopbar({ children, className }: { children?: ReactNode; className?: string }) {
-  return (
-    <header className={cn('flex h-12 shrink-0 items-center gap-2 px-1.5', className)}>
-      <SidebarTrigger />
-      {children}
-    </header>
-  )
-}

package/blocks/sidebar-app/menu-grid.ts

@@ -1,26 +0,0 @@
-/*
- * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
- * `registry/default/lib/sidebar-menu-grid.ts` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
- * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
- * Local modifications:
- * - The width reads Base UI's `--anchor-width` only (the Radix fallback goes).
- * - The `-ml-1` shift is dropped: the class lands on the morph surface's
- *   content, which would slide off its own background.
- */
-
-/**
- * Shared geometry for sidebar-anchored dropdown menus (the workspace switcher
- * in the header, the user menu in the footer).
- *
- * The popup is trigger-width plus 10px, so that:
- *  - the leading icon slot's centre lands on the sidebar rows' 16px leading
- *    axis (pl-2, with a 20px letter-tile overhanging the 16px slot by 2px a
- *    side),
- *  - gap-2 lands the label on the rows' 32px text axis, and
- *  - pr-1.5 puts a trailing glyph (the check) on the trigger chevron's
- *    vertical axis.
- */
-export const SIDEBAR_MENU_GRID =
-  '[&_[role=menuitem]]:pl-2 [&_[role=menuitem]]:pr-1.5 [&_[role=menuitem]]:gap-2 [&_[role=menuitemradio]]:pl-2 [&_[role=menuitemradio]]:pr-1.5 [&_[role=menuitemradio]]:gap-2'
-
-export const SIDEBAR_MENU_POPUP = `min-w-[240px] w-[calc(var(--anchor-width)_+_10px)] ${SIDEBAR_MENU_GRID}`

package/blocks/sidebar-app/nav-data.ts

@@ -1,36 +0,0 @@
-/*
- * Ported from Fluid Functionalism — the seed navigation that
- * github.com/mickadesign/fluid-functionalism `lib/preset/sidebar-install.ts`
- * (@ c367a0d066bc10e663b3d269bc40539ea8417b25) generates for the sidebar
- * preset `sa1FQfCxH6` (threads, two sections). MIT License © 2026 Micka
- * Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism).
- */
-
-export interface NavItem {
-  label: string
-  /** Semantic status: drives the leading dot and screen-reader text. */
-  status: 'active' | 'unread' | 'idle'
-}
-
-export interface NavSection {
-  label: string
-  items: NavItem[]
-}
-
-export const NAV_SECTIONS: NavSection[] = [
-  {
-    label: 'fluid-functionalism',
-    items: [
-      { label: 'New pricing page exploration', status: 'active' },
-      { label: 'Component library audit', status: 'idle' },
-      { label: 'Dark mode token pass', status: 'unread' },
-    ],
-  },
-  {
-    label: 'portfolio-site',
-    items: [
-      { label: 'Scrollbar fade regression', status: 'idle' },
-      { label: 'Registry deploy pipeline', status: 'unread' },
-    ],
-  },
-]

package/blocks/sidebar-app/search-field.tsx

@@ -1,48 +0,0 @@
-// biome-ignore-all lint: vendored upstream code keeps its own patterns (see the header)
-/*
- * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
- * `registry/blocks/sidebar-app/search-field.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
- * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
- * Local modifications:
- * - `"use client"` dropped; `@/components/ui/{sidebar,dropdown}` → `../../components/*`,
- *   `@/lib/sidebar-menu-grid` → `./menu-grid`, `@/lib/*` → `../../lib/*`.
- * - Styling reads DS tokens (AGENTS.md styling): `text-[11px]` → `text-micro`;
- *   `duration-80` → `duration-fast`.
- */
-
-import { type ComponentProps } from 'react'
-import { SidebarInput } from '../../components/navigation/sidebar'
-import { useIcon } from '../../lib/icon-context'
-import { useSize } from '../../lib/size-context'
-
-// ---------------------------------------------------------------------------
-// The header's search field, on the menu rows' own rhythm. The leading icon
-// sits on the rows' 16px leading axis; pl-8 starts the text on the rows'
-// 32px text axis; and the shortcut chip waits at the trailing edge, revealed
-// on hover/focus — the placeholder owns the field at rest.
-// ---------------------------------------------------------------------------
-
-export interface SidebarSearchFieldProps extends Omit<ComponentProps<typeof SidebarInput>, 'className'> {
-  /** Keystroke shown in the trailing chip. Pass null to drop the chip. */
-  shortcut?: string | null
-}
-
-export function SidebarSearchField({ placeholder = 'Search…', shortcut = '⌘K', ...props }: SidebarSearchFieldProps) {
-  const iconSize = useSize().icon
-  const SearchIcon = useIcon('search')
-  return (
-    <div className="group/search relative">
-      <SearchIcon
-        size={iconSize}
-        strokeWidth={1.5}
-        className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground"
-      />
-      <SidebarInput placeholder={placeholder} aria-label="Search" className="pl-8 pr-12" {...props} />
-      {shortcut && (
-        <kbd className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 font-sans text-micro text-muted-foreground opacity-0 transition-opacity duration-fast group-hover/search:opacity-100 group-focus-within/search:opacity-100">
-          {shortcut}
-        </kbd>
-      )}
-    </div>
-  )
-}

package/blocks/sidebar-app/user-footer.tsx

@@ -1,67 +0,0 @@
-// biome-ignore-all lint: vendored upstream code keeps its own patterns (see the header)
-/*
- * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
- * `registry/blocks/sidebar-user-footer.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
- * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
- * Local modifications:
- * - `"use client"` dropped; `@/components/ui/{sidebar,dropdown}` → `../../components/*`,
- *   `@/lib/sidebar-menu-grid` → `./menu-grid`, `@/lib/*` → `../../lib/*`.
- * - Styling reads DS tokens (AGENTS.md styling): `text-[13px]` → `text-body`.
- */
-
-import { type ReactNode } from 'react'
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '../../components/navigation/sidebar'
-import { DropdownContent, DropdownMenu, DropdownTrigger } from '../../components/overlays/dropdown'
-import { useIcon } from '../../lib/icon-context'
-import { useSize } from '../../lib/size-context'
-import { cn } from '../../lib/utils'
-import { SIDEBAR_MENU_POPUP } from './menu-grid'
-
-// ---------------------------------------------------------------------------
-// Footer user row: identity anchors the sidebar's outer edge. The 20px
-// avatar pulls -ml-0.5 to centre on the rows' leading icon axis; the
-// chevron rides a 24px slot pulled -mr-0.5 onto the trailing action axis —
-// the same axes every other sidebar row uses. Its menu opens upward on the
-// shared sidebar menu grid, so labels and trailing glyphs line up with the
-// trigger row exactly.
-// ---------------------------------------------------------------------------
-
-export interface SidebarUserFooterProps {
-  /** Display name shown in the row. */
-  name: ReactNode
-  /** 20px avatar — e.g. <img className="size-5 rounded-full" …/>. The row
-   *  positions it on the leading icon axis; the element owns its look. */
-  avatar: ReactNode
-  /** Dropdown content (MenuItem rows). */
-  menu: ReactNode
-  /** Extra classes for the wrapping SidebarMenu — pass "min-w-0 flex-1" when
-   *  the row shares a horizontal footer line with icon buttons. */
-  className?: string
-}
-
-export function SidebarUserFooter({ name, avatar, menu, className }: SidebarUserFooterProps) {
-  const iconSize = useSize().icon
-  const ChevronsUpDown = useIcon('chevrons-up-down')
-  return (
-    <SidebarMenu aria-label="User" className={cn(className)}>
-      <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownTrigger
-            render={
-              <SidebarMenuButton aria-label="Open user menu">
-                <span className="-ml-0.5 -mr-0.5 flex size-5 shrink-0 items-center justify-center">{avatar}</span>
-                <span className="min-w-0 truncate text-body text-foreground">{name}</span>
-                <span className="ml-auto -mr-0.5 flex size-6 shrink-0 items-center justify-center">
-                  <ChevronsUpDown size={iconSize} strokeWidth={1.5} className="text-muted-foreground" />
-                </span>
-              </SidebarMenuButton>
-            }
-          />
-          <DropdownContent className={SIDEBAR_MENU_POPUP} side="top" align="start" sideOffset={6}>
-            {menu}
-          </DropdownContent>
-        </DropdownMenu>
-      </SidebarMenuItem>
-    </SidebarMenu>
-  )
-}

package/blocks/sidebar-app/workspace-header.tsx

@@ -1,129 +0,0 @@
-// biome-ignore-all lint: vendored upstream code keeps its own patterns (see the header)
-/*
- * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
- * `registry/blocks/sidebar-workspace-header.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
- * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
- * Local modifications:
- * - `"use client"` dropped; `@/components/ui/{sidebar,dropdown}` → `../../components/*`,
- *   `@/lib/sidebar-menu-grid` → `./menu-grid`, `@/lib/*` → `../../lib/*`.
- * - Styling reads DS tokens (AGENTS.md styling): inline
- *   `fontVariationSettings` → `weight-semibold`; `text-[13px]` / `text-[10px]`
- *   → `text-body` / `text-micro-compact`; `duration-80` → `duration-fast`.
- * - `defaultCheckedIndex` passed through to the menu, so a switcher keeps its
- *   own pick (the Dropdown's uncontrolled selection).
- * - No peek trigger: the sidebar opens on hover in flow (the provider's
- *   `openOnHover`), the topbar's trigger stays beside it, so the tile no
- *   longer cross-fades with a trigger over the row.
- */
-
-import { type ReactNode } from 'react'
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '../../components/navigation/sidebar'
-import { DropdownContent, DropdownMenu, DropdownTrigger } from '../../components/overlays/dropdown'
-import { useIcon } from '../../lib/icon-context'
-import { useShape } from '../../lib/shape-context'
-import { useSize } from '../../lib/size-context'
-import { cn } from '../../lib/utils'
-import { SIDEBAR_MENU_POPUP } from './menu-grid'
-
-// ---------------------------------------------------------------------------
-// Workspace brand row for a sidebar header. The row's pl-8 keeps the name on
-// the rows' 32px text axis, the tile in the leading slot.
-// ---------------------------------------------------------------------------
-
-export interface SidebarWorkspaceHeaderProps {
-  /** Workspace or product name shown in the row. */
-  name: ReactNode
-  /** 20px mark for the leading slot — a letter tile (see WorkspaceTile), a
-   *  logo, an avatar. The header positions and cross-fades it; the mark owns
-   *  its own colors and rounding. */
-  tile: ReactNode
-  /** Dropdown content (MenuItem rows). Omit to render a non-interactive logo
-   *  lockup instead of a workspace switcher. */
-  menu?: ReactNode
-  /** Index of the checked menu row, forwarded to DropdownContent. */
-  checkedIndex?: number
-  /** Initially checked menu row, for a switcher that keeps its own pick. */
-  defaultCheckedIndex?: number
-}
-
-export function SidebarWorkspaceHeader({
-  name,
-  tile,
-  menu,
-  checkedIndex,
-  defaultCheckedIndex,
-}: SidebarWorkspaceHeaderProps) {
-  const iconSize = useSize().icon
-  const ChevronDown = useIcon('chevron-down')
-
-  // The tile sits absolutely in the row's leading slot — 20px at left-1.5
-  // centres it on the rows' 16px leading icon axis.
-  const tileSlot = (
-    <span aria-hidden className="pointer-events-none absolute left-1.5 top-1/2 -translate-y-1/2">
-      {tile}
-    </span>
-  )
-  const nameSpan = <span className="min-w-0 truncate text-body weight-semibold text-foreground">{name}</span>
-
-  if (!menu) {
-    // Not interactive, so it renders outside SidebarMenu — a menu row would
-    // track the traveling hover background.
-    return (
-      <div className="relative flex h-8 items-center pl-8 pr-2">
-        {tileSlot}
-        {nameSpan}
-      </div>
-    )
-  }
-  return (
-    // @container: the row hides its dropdown chevron once it gets too narrow
-    // to show a useful slice of the name (squeezed by trailing header actions
-    // or a mid-drag width) — the text keeps whatever room is left.
-    <SidebarMenu aria-label="Workspace" className="@container">
-      <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownTrigger
-            render={
-              <SidebarMenuButton aria-label="Switch workspace" className="pl-8">
-                {tileSlot}
-                {nameSpan}
-                <span className="ml-auto inline-flex @max-[7rem]:hidden">
-                  <ChevronDown size={iconSize} strokeWidth={1.5} className="text-muted-foreground" />
-                </span>
-              </SidebarMenuButton>
-            }
-          />
-          {/* Trigger-width popup on the shared sidebar menu grid: items start
-              at the row's edge, icon slots land on the leading axis, and the
-              check sits on the chevron's vertical axis. */}
-          <DropdownContent
-            className={SIDEBAR_MENU_POPUP}
-            align="start"
-            sideOffset={4}
-            checkedIndex={checkedIndex}
-            defaultCheckedIndex={defaultCheckedIndex}
-          >
-            {menu}
-          </DropdownContent>
-        </DropdownMenu>
-      </SidebarMenuItem>
-    </SidebarMenu>
-  )
-}
-
-/** The 20px letter-tile treatment the switcher's trigger and its menu rows
- *  share — squared to the shape system, semibold 10px glyph. */
-export function WorkspaceTile({ children, className }: { children: ReactNode; className?: string }) {
-  const shape = useShape()
-  return (
-    <span
-      className={cn(
-        'flex size-5 shrink-0 items-center justify-center bg-foreground text-micro-compact weight-semibold text-background',
-        shape.bgRadius >= 20 ? 'rounded-full' : 'rounded-md',
-        className,
-      )}
-    >
-      {children}
-    </span>
-  )
-}