@freighttech/ui 0.13.18

package/src/backend/dynamic-table/server/makeDynamicTableRoute.ts

@@ -0,0 +1,426 @@
+import { z } from 'zod'
+import { NextRequest, NextResponse } from 'next/server'
+import type { EntityManager } from '@mikro-orm/postgresql'
+import { createRequestContainer } from '@open-mercato/shared/lib/di/container'
+import { getAuthFromRequest, type AuthContext } from '@open-mercato/shared/lib/auth/server'
+import { resolveOrganizationScopeForRequest, type OrganizationScope } from '@open-mercato/core/modules/directory/utils/organizationScope'
+import { parseDynamicTableFilters } from './filterParser'
+import {
+  AggregateSpecError,
+  parseAggregateSpec,
+  runAggregate,
+  tenancyFromRouteContext,
+} from './aggregate'
+
+// ─── Types ───────────────────────────────────
+
+export interface DynamicTableRouteOrmConfig {
+  entity: any
+  idField?: string
+  orgField?: string | null
+  tenantField?: string | null
+  softDeleteField?: string | null
+}
+
+export interface DynamicTableRouteMethodMetadata {
+  requireAuth?: boolean
+  requireRoles?: string[]
+  requireFeatures?: string[]
+}
+
+export interface DynamicTableRouteCtx {
+  auth: AuthContext
+  container: any
+  em: EntityManager
+  scope: OrganizationScope | null
+  tenantId: string | null
+  organizationId: string | null
+  allowedOrgIds: Set<string>
+  request: NextRequest
+}
+
+export interface DynamicTableRouteUpdateConfig {
+  schema: z.ZodType<any>
+  mapPayload?: (payload: Record<string, unknown>, ctx: DynamicTableRouteCtx) => Record<string, unknown>
+}
+
+export interface DynamicTableRouteCreateConfig {
+  schema: z.ZodType<any>
+  mapPayload?: (payload: Record<string, unknown>, ctx: DynamicTableRouteCtx) => Record<string, unknown>
+}
+
+export interface DynamicTableRouteDeleteConfig {
+  soft?: boolean
+}
+
+export interface DynamicTableRouteConfig<TEntity = any, TRow = any> {
+  orm: DynamicTableRouteOrmConfig
+  fieldMap: Record<string, string>
+  transformItem: (entity: TEntity) => TRow
+
+  search?: (q: string) => Record<string, unknown>
+  buildFilters?: (query: Record<string, unknown>, ctx: DynamicTableRouteCtx) => Record<string, unknown>
+  afterList?: (items: TRow[], ctx: DynamicTableRouteCtx) => Promise<TRow[]> | TRow[]
+
+  update?: DynamicTableRouteUpdateConfig | false
+  create?: DynamicTableRouteCreateConfig
+  delete?: boolean | DynamicTableRouteDeleteConfig
+
+  metadata?: {
+    GET?: DynamicTableRouteMethodMetadata
+    PUT?: DynamicTableRouteMethodMetadata
+    POST?: DynamicTableRouteMethodMetadata
+    DELETE?: DynamicTableRouteMethodMetadata
+  }
+}
+
+// ─── Built-in list query schema ──────────────
+
+const listQuerySchema = z
+  .object({
+    page: z.coerce.number().min(1).default(1),
+    limit: z.coerce.number().min(1).max(100).default(50),
+    q: z.string().optional(),
+    sortField: z.string().optional().default('id'),
+    sortDir: z.enum(['asc', 'desc']).optional().default('asc'),
+    filters: z.string().optional(),
+    /** `field:fn,field:fn` — see `server/aggregate.ts`. Capped there too. */
+    aggregate: z.string().max(500).optional(),
+  })
+  .passthrough()
+
+// ─── Helpers ─────────────────────────────────
+
+async function resolveContext(request: NextRequest): Promise<DynamicTableRouteCtx | null> {
+  const auth = await getAuthFromRequest(request)
+  if (!auth) return null
+
+  const container = await createRequestContainer()
+  const scope = await resolveOrganizationScopeForRequest({ container, auth, request })
+  const em = container.resolve('em') as EntityManager
+
+  const tenantId = (auth.actorTenantId || auth.tenantId) as string | null
+  const organizationId = (auth.actorOrgId || auth.orgId) as string | null
+
+  const allowedOrgIds = new Set<string>()
+  if (scope?.filterIds?.length) {
+    scope.filterIds.forEach((id) => {
+      if (typeof id === 'string') allowedOrgIds.add(id)
+    })
+  } else if (typeof auth.actorOrgId === 'string') {
+    allowedOrgIds.add(auth.actorOrgId)
+  } else if (typeof auth.orgId === 'string') {
+    allowedOrgIds.add(auth.orgId)
+  }
+
+  return { auth, container, em, scope, tenantId, organizationId, allowedOrgIds, request }
+}
+
+function buildScopeFilters(
+  ctx: DynamicTableRouteCtx,
+  orm: DynamicTableRouteOrmConfig
+): Record<string, unknown> {
+  const filters: Record<string, unknown> = {}
+
+  const softDeleteField = orm.softDeleteField === undefined ? 'deletedAt' : orm.softDeleteField
+  if (softDeleteField) {
+    filters[softDeleteField] = null
+  }
+
+  const tenantField = orm.tenantField === undefined ? 'tenantId' : orm.tenantField
+  if (tenantField && ctx.tenantId) {
+    filters[tenantField] = ctx.tenantId
+  }
+
+  const orgField = orm.orgField === undefined ? 'organizationId' : orm.orgField
+  if (orgField && ctx.allowedOrgIds.size) {
+    filters[orgField] = { $in: [...ctx.allowedOrgIds] }
+  }
+
+  return filters
+}
+
+// ─── Factory ─────────────────────────────────
+
+export function makeDynamicTableRoute<TEntity = any, TRow = any>(
+  config: DynamicTableRouteConfig<TEntity, TRow>
+) {
+  const { orm, fieldMap, transformItem } = config
+
+  // ── GET: List with filters, search, sort, pagination ──
+
+  async function GET(request: NextRequest) {
+    const ctx = await resolveContext(request)
+    if (!ctx) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const url = new URL(request.url)
+    const rawQuery: Record<string, string | undefined> = {}
+    url.searchParams.forEach((value, key) => {
+      rawQuery[key] = value
+    })
+
+    const parse = listQuerySchema.safeParse(rawQuery)
+    if (!parse.success) {
+      return NextResponse.json(
+        { error: 'Invalid query parameters', details: parse.error },
+        { status: 400 }
+      )
+    }
+
+    const query = parse.data
+
+    // Build base scope filters (tenant, org, soft delete)
+    const filters: Record<string, unknown> = buildScopeFilters(ctx, orm)
+
+    // Custom filters from query params
+    if (config.buildFilters) {
+      Object.assign(filters, config.buildFilters(rawQuery, ctx))
+    }
+
+    // Search
+    if (query.q && query.q.trim() && config.search) {
+      const searchFilters = config.search(query.q.trim())
+      Object.assign(filters, searchFilters)
+    }
+
+    // DynamicTable filters (JSON)
+    if (query.filters) {
+      try {
+        const dynamicFilters: Array<{ field: string; operator: string; values: unknown[] }> =
+          JSON.parse(query.filters)
+        if (dynamicFilters.length > 0) {
+          const parsedFilters = parseDynamicTableFilters(dynamicFilters, fieldMap)
+          if (parsedFilters.length > 0) {
+            filters.$and = [
+              ...((filters.$and as Record<string, unknown>[]) || []),
+              ...parsedFilters,
+            ]
+          }
+        }
+      } catch {
+        // Ignore invalid filters JSON
+      }
+    }
+
+    // Sort
+    const sortField = fieldMap[query.sortField] || fieldMap[Object.keys(fieldMap)[0]] || 'id'
+    const sortDir = query.sortDir || 'asc'
+
+    // Query
+    const [entities, total] = await ctx.em.findAndCount(orm.entity, filters, {
+      orderBy: { [sortField]: sortDir },
+      limit: query.limit,
+      offset: (query.page - 1) * query.limit,
+    })
+
+    let items = (entities as TEntity[]).map(transformItem)
+
+    if (config.afterList) {
+      items = await config.afterList(items, ctx)
+    }
+
+    // ── Optional dataset-wide aggregate ──
+    //
+    // CRITICAL: `filters` is the SAME OBJECT REFERENCE just handed to
+    // `findAndCount`. Rebuilding an equivalent-looking one is the cross-tenant
+    // total this helper exists to prevent — the aggregate must describe exactly
+    // the rows the page is a window onto.
+    //
+    // Absent `?aggregate=`, the response is byte-identical to before: the key
+    // is spread in conditionally, never emitted as `undefined`.
+    let aggregate: Awaited<ReturnType<typeof runAggregate>> | undefined
+    if (query.aggregate) {
+      let entries
+      try {
+        entries = parseAggregateSpec(query.aggregate, fieldMap)
+      } catch (err) {
+        if (err instanceof AggregateSpecError) {
+          return NextResponse.json({ error: err.message }, { status: 400 })
+        }
+        throw err
+      }
+      if (entries.length > 0) {
+        aggregate = await runAggregate({
+          em: ctx.em,
+          entity: orm.entity,
+          where: filters,
+          tenancy: tenancyFromRouteContext(ctx, orm),
+          entries,
+        })
+      }
+    }
+
+    return NextResponse.json({
+      items,
+      total,
+      page: query.page,
+      limit: query.limit,
+      totalPages: Math.ceil(total / query.limit),
+      ...(aggregate ? { aggregate } : {}),
+    })
+  }
+
+  // ── POST: Create new entity ──
+
+  async function POST(request: NextRequest) {
+    if (!config.create) {
+      return NextResponse.json({ error: 'Method not allowed' }, { status: 405 })
+    }
+
+    const ctx = await resolveContext(request)
+    if (!ctx) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    if (!ctx.tenantId || !ctx.organizationId) {
+      return NextResponse.json({ error: 'Missing tenant or organization context' }, { status: 400 })
+    }
+
+    const body = await request.json()
+    const parse = config.create.schema.safeParse(body)
+    if (!parse.success) {
+      return NextResponse.json(
+        { error: 'Invalid request body', details: parse.error },
+        { status: 400 }
+      )
+    }
+
+    let payload: Record<string, unknown> = { ...parse.data }
+    if (config.create.mapPayload) {
+      payload = config.create.mapPayload(payload, ctx)
+    }
+
+    const tenantField = orm.tenantField === undefined ? 'tenantId' : orm.tenantField
+    const orgField = orm.orgField === undefined ? 'organizationId' : orm.orgField
+
+    const entityData: Record<string, unknown> = { ...payload }
+    if (tenantField) entityData[tenantField] = ctx.tenantId
+    if (orgField) entityData[orgField] = ctx.organizationId
+    if ('createdBy' in (new orm.entity() as any)) {
+      entityData.createdBy = typeof ctx.auth?.userId === 'string' ? ctx.auth.userId : null
+    }
+
+    const entity = ctx.em.create(orm.entity, entityData)
+    await ctx.em.persist(entity).flush()
+
+    const idField = orm.idField || 'id'
+    return NextResponse.json({
+      id: (entity as any)[idField],
+      success: true,
+    })
+  }
+
+  // ── PUT: Update entity by id (for cell edit) ──
+
+  async function PUT(
+    request: NextRequest,
+    { params }: { params: Promise<{ id: string }> }
+  ) {
+    if (config.update === false) {
+      return NextResponse.json({ error: 'Method not allowed' }, { status: 405 })
+    }
+
+    const ctx = await resolveContext(request)
+    if (!ctx) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { id } = await params
+    const body = await request.json()
+
+    if (config.update) {
+      const parse = config.update.schema.safeParse(body)
+      if (!parse.success) {
+        return NextResponse.json(
+          { error: 'Invalid request body', details: parse.error },
+          { status: 400 }
+        )
+      }
+    }
+
+    const idField = orm.idField || 'id'
+    const findFilters: Record<string, unknown> = {
+      [idField]: id,
+      ...buildScopeFilters(ctx, orm),
+    }
+
+    const entity = await ctx.em.findOne(orm.entity, findFilters)
+    if (!entity) {
+      return NextResponse.json({ error: 'Not found' }, { status: 404 })
+    }
+
+    let payload: Record<string, unknown> = { ...body }
+    if (config.update && config.update.mapPayload) {
+      payload = config.update.mapPayload(payload, ctx)
+    }
+
+    ctx.em.assign(entity, payload)
+    if ('updatedBy' in (entity as any)) {
+      ;(entity as any).updatedBy = typeof ctx.auth?.userId === 'string' ? ctx.auth.userId : null
+    }
+    await ctx.em.flush()
+
+    return NextResponse.json({
+      id: (entity as any)[idField],
+      success: true,
+    })
+  }
+
+  // ── DELETE: Remove entity by id ──
+
+  async function DELETE(
+    request: NextRequest,
+    { params }: { params: Promise<{ id: string }> }
+  ) {
+    if (!config.delete) {
+      return NextResponse.json({ error: 'Method not allowed' }, { status: 405 })
+    }
+
+    const ctx = await resolveContext(request)
+    if (!ctx) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { id } = await params
+    const idField = orm.idField || 'id'
+    const findFilters: Record<string, unknown> = {
+      [idField]: id,
+      ...buildScopeFilters(ctx, orm),
+    }
+
+    const entity = await ctx.em.findOne(orm.entity, findFilters)
+    if (!entity) {
+      return NextResponse.json({ error: 'Not found' }, { status: 404 })
+    }
+
+    const deleteConfig = typeof config.delete === 'object' ? config.delete : {}
+    const useSoftDelete = deleteConfig.soft !== false
+
+    const softDeleteField = orm.softDeleteField === undefined ? 'deletedAt' : orm.softDeleteField
+
+    if (useSoftDelete && softDeleteField) {
+      ;(entity as any)[softDeleteField] = new Date()
+      if ('updatedBy' in (entity as any)) {
+        ;(entity as any).updatedBy = typeof ctx.auth?.userId === 'string' ? ctx.auth.userId : null
+      }
+      await ctx.em.flush()
+    } else {
+      await ctx.em.remove(entity).flush()
+    }
+
+    return NextResponse.json({ success: true })
+  }
+
+  // ── Metadata ──
+
+  const metadata: Record<string, DynamicTableRouteMethodMetadata | undefined> = {
+    GET: config.metadata?.GET,
+    POST: config.metadata?.POST,
+    PUT: config.metadata?.PUT,
+    DELETE: config.metadata?.DELETE,
+  }
+
+  return { GET, POST, PUT, DELETE, metadata }
+}

package/src/backend/dynamic-table/split-view/ContentPicker.tsx

@@ -0,0 +1,251 @@
+'use client'
+
+// Choose what goes in a slot: a table or a dashboard widget.
+//
+// The superseded table-only picker with a second kind of thing in it (that file
+// is gone; this replaced it outright). Everything that made the original work is
+// kept deliberately unchanged — a context dropdown anchored to whatever
+// opened it (not a centred modal that hides the layout you are adding to),
+// portalled to `document.body` because panes clip their overflow, positioned by
+// the same `computeAnchoredPosition` every other menu in the grid uses, and
+// already-open entries MARKED rather than hidden, because two panes of one table
+// with different views is a legitimate layout.
+//
+// The one addition is a level of hierarchy: KIND first (Tables / Widgets), then
+// the existing per-module group headers inside each. Kind is the axis the user
+// is actually choosing on — "I want a chart here, not another grid" — so it
+// outranks the module, and putting it first keeps the two catalogues from
+// interleaving into one undifferentiated list as the registry grows.
+//
+// ACL is not resolved here, in either half: tables come from the host's grant
+// check via the registry context, widgets arrive already filtered server-side.
+//
+// Spec: .ai/specs/2026-08-17-split-view-workspace-composition.md (Phase 2)
+
+import * as React from 'react'
+import ReactDOM from 'react-dom'
+import { Search } from 'lucide-react'
+import { computeAnchoredPosition } from '../utils/anchoredPosition'
+import { useAccessibleContent, type PaneContentItem } from '../registry/ContentRegistryContext'
+import type { PaneContentRef } from './types'
+
+const MENU_WIDTH = 300
+const MENU_MAX_HEIGHT = 340
+
+const KIND_LABEL: Record<PaneContentItem['kind'], string> = {
+  table: 'Tables',
+  widget: 'Widgets',
+}
+// Tables first: they are the bulk of the catalogue and the thing a split view is
+// usually for. Widgets are the accent, not the headline.
+const KIND_ORDER: Array<PaneContentItem['kind']> = ['table', 'widget']
+
+/** The ref a picked item becomes. Widgets carry their loader key so a saved
+ *  layout can be reopened without re-deriving it from the catalogue. */
+export function contentRefFor(item: PaneContentItem): PaneContentRef {
+  return item.kind === 'table'
+    ? { kind: 'table', tableId: item.id }
+    : { kind: 'widget', widgetId: item.id, loaderKey: item.loaderKey }
+}
+
+function isOpen(item: PaneContentItem, open: PaneContentRef[]): boolean {
+  return open.some((ref) =>
+    ref.kind === 'table'
+      ? item.kind === 'table' && ref.tableId === item.id
+      : item.kind === 'widget' && ref.widgetId === item.id,
+  )
+}
+
+export function ContentPicker({
+  anchorRect,
+  openContent,
+  onPick,
+  onClose,
+}: {
+  /** Bounding rect of the control that opened this. */
+  anchorRect: DOMRect | null
+  /** What the layout already holds — marked, never hidden. */
+  openContent: PaneContentRef[]
+  onPick: (content: PaneContentRef) => void
+  onClose: () => void
+}) {
+  const items = useAccessibleContent()
+  const [query, setQuery] = React.useState('')
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const boxRef = React.useRef<HTMLDivElement>(null)
+
+  const [placement, setPlacement] = React.useState({
+    top: 0,
+    left: 0,
+    maxHeight: MENU_MAX_HEIGHT,
+  })
+
+  React.useLayoutEffect(() => {
+    if (!anchorRect) return
+    const next = computeAnchoredPosition(
+      anchorRect,
+      { width: window.innerWidth, height: window.innerHeight },
+      { width: MENU_WIDTH, preferredHeight: MENU_MAX_HEIGHT, align: 'end', minHeight: 160 },
+    )
+    setPlacement({ top: next.top, left: next.left, maxHeight: next.maxHeight })
+  }, [anchorRect])
+
+  React.useEffect(() => {
+    inputRef.current?.focus()
+  }, [])
+
+  React.useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.stopPropagation()
+        onClose()
+      }
+    }
+    const onDown = (event: MouseEvent) => {
+      if (boxRef.current && !boxRef.current.contains(event.target as Node)) onClose()
+    }
+    // Scroll/resize move the anchor out from under us; close rather than leave
+    // a menu floating next to nothing.
+    //
+    // But ONLY a scroll that actually moves the anchor counts. This listener is
+    // capture-phase on `window`, so it also hears every inner scroller — and a
+    // pane emits a scroll event one frame after the picker mounts, which
+    // dismissed the menu ~6ms after it opened. The user-visible symptom was
+    // that clicking an empty slot in a workspace that already had a filled pane
+    // "did nothing" — reliably, on the second fill of a 2×2.
+    //
+    // Panes scroll INSIDE the layout; the slot the picker is anchored to does
+    // not move when they do. So element-level scrolls are ignored and only a
+    // document-level scroll dismisses.
+    const onScroll = (event: Event) => {
+      const target = event.target
+      if (target instanceof Element && target !== document.scrollingElement) return
+      onClose()
+    }
+    document.addEventListener('keydown', onKey, true)
+    document.addEventListener('mousedown', onDown, true)
+    window.addEventListener('scroll', onScroll, true)
+    window.addEventListener('resize', onScroll)
+    return () => {
+      document.removeEventListener('keydown', onKey, true)
+      document.removeEventListener('mousedown', onDown, true)
+      window.removeEventListener('scroll', onScroll, true)
+      window.removeEventListener('resize', onScroll)
+    }
+  }, [onClose])
+
+  const sections = React.useMemo(() => {
+    const needle = query.trim().toLowerCase()
+    const matching = needle
+      ? items.filter(
+          (item) =>
+            item.title.toLowerCase().includes(needle) || item.id.toLowerCase().includes(needle),
+        )
+      : items
+
+    return KIND_ORDER.map((kind) => {
+      const byGroup = new Map<string, PaneContentItem[]>()
+      for (const item of matching) {
+        if (item.kind !== kind) continue
+        const key = item.group ?? 'Other'
+        const list = byGroup.get(key) ?? []
+        list.push(item)
+        byGroup.set(key, list)
+      }
+      return {
+        kind,
+        groups: Array.from(byGroup.entries()).sort(([a], [b]) => a.localeCompare(b)),
+      }
+    }).filter((section) => section.groups.length > 0)
+  }, [items, query])
+
+  const menu = (
+    <div
+      ref={boxRef}
+      role="dialog"
+      aria-label="Add table or widget"
+      className="fixed z-[1000] overflow-hidden rounded-m3-md border border-[var(--m3-outline-variant)] bg-[var(--m3-surface-container)] shadow-m3-2"
+      style={{
+        top: placement.top,
+        left: placement.left,
+        width: MENU_WIDTH,
+        maxHeight: placement.maxHeight,
+      }}
+      data-split-picker=""
+    >
+      {/* A tinted band rather than a hairline, and the focus signal is on
+          the whole row — the input inside it is borderless, so a halo on the
+          field alone would float in the middle of nothing.
+          The band steps the container UP from the panel and up again on focus,
+          which reads the same direction in BOTH schemes (light gets greyer,
+          dark gets lighter); stepping DOWN would invert between them. */}
+      <div className="flex items-center gap-2 bg-[var(--m3-surface-container-high)] px-2 py-1.5 transition-[background-color,box-shadow] duration-[var(--m3-duration-short2)] ease-m3-standard focus-within:bg-[var(--m3-surface-container-highest)] focus-within:shadow-[var(--m3-focus-ring-inset)]">
+        <Search className="h-3.5 w-3.5 text-[var(--m3-on-surface-variant)]" aria-hidden="true" />
+        <input
+          ref={inputRef}
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          placeholder="Add table or widget…"
+          className="min-w-0 flex-1 bg-transparent text-body-regular-xs text-[var(--m3-on-surface)] outline-none placeholder:text-[var(--m3-on-surface-variant)]"
+          data-split-picker-search=""
+        />
+      </div>
+
+      <div className="overflow-y-auto p-1" style={{ maxHeight: placement.maxHeight - 38 }}>
+        {sections.length === 0 && (
+          <div
+            className="px-2 py-4 text-center text-body-regular-xs text-[var(--m3-on-surface-variant)]"
+            data-split-picker-empty=""
+          >
+            No tables or widgets available.
+          </div>
+        )}
+        {sections.map((section) => (
+          <div key={section.kind} data-split-picker-kind={section.kind}>
+            {/* Section ink is `on-surface`, group ink below is `on-surface-variant`.
+                Both levels used to be 12px in the SAME muted ink, and the group
+                carried uppercase + tracking — so the lower level read as the more
+                emphatic one and the hierarchy inverted. */}
+            <div className="px-2 pb-1 pt-2 text-label-semibold-xs text-[var(--m3-on-surface)]">
+              {KIND_LABEL[section.kind]}
+            </div>
+            {section.groups.map(([group, groupItems]) => (
+              <div key={group}>
+                <div className="px-2 pb-0.5 pt-1.5 text-label-semibold-2xs uppercase tracking-wider text-[var(--m3-on-surface-variant)]">
+                  {group}
+                </div>
+                {groupItems.map((item) => {
+                  const alreadyOpen = isOpen(item, openContent)
+                  return (
+                    <button
+                      key={`${item.kind}:${item.id}`}
+                      type="button"
+                      onClick={() => onPick(contentRefFor(item))}
+                      data-split-picker-item={item.id}
+                      data-split-picker-item-kind={item.kind}
+                      className="flex w-full items-center justify-between gap-2 rounded-m3-xs px-2 py-1 text-left text-body-regular-xs text-[var(--m3-on-surface)] transition-colors duration-[var(--m3-duration-short2)] ease-m3-standard hover:bg-[var(--m3-state-layer-hover)] active:bg-[var(--m3-state-layer-pressed)]"
+                    >
+                      <span className="truncate">{item.title}</span>
+                      {/* A marked entry is not a dimmed one — it is a real
+                          state, so it gets the selection container as a chip. */}
+                      {alreadyOpen && (
+                        <span className="shrink-0 rounded-m3-full bg-[var(--m3-secondary-container)] px-1.5 text-label-semibold-2xs uppercase text-[var(--m3-on-secondary-container)]">
+                          open
+                        </span>
+                      )}
+                    </button>
+                  )
+                })}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+
+  if (typeof document === 'undefined') return menu
+  return ReactDOM.createPortal(menu, document.body)
+}
+
+export default ContentPicker