@open-mercato/ui 0.6.1-develop.3260.1.dc719cac84 → 0.6.1-develop.3278.1.a4d26475e4

package/src/backend/hooks/__tests__/useAdvancedFilter.test.tsx

@@ -0,0 +1,213 @@
+import { renderHook, act } from '@testing-library/react'
+import { useAdvancedFilterTree } from '../useAdvancedFilter'
+import { createEmptyTree } from '@open-mercato/shared/lib/query/advanced-filter-tree'
+
+jest.useFakeTimers()
+
+describe('useAdvancedFilterTree — auto-apply', () => {
+  it('debounces onApply by 400 ms when valid; suppresses when invalid', () => {
+    const onApply = jest.fn()
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields: [], onApply }))
+    act(() => { result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id }) })
+    expect(onApply).not.toHaveBeenCalled()
+    act(() => { jest.advanceTimersByTime(400) })
+    // tree has invalid rule (empty value) - should NOT apply
+    expect(onApply).not.toHaveBeenCalled()
+    expect(result.current.pendingErrors.length).toBeGreaterThan(0)
+  })
+
+  it('flush() applies immediately if valid', () => {
+    const onApply = jest.fn()
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields, onApply }))
+    act(() => {
+      result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id, defaultField: 'n' })
+    })
+    const ruleId = result.current.tree.root.children[0].id
+    act(() => {
+      // Substring text operators now require >= 3 characters to validate.
+      result.current.dispatch({ type: 'updateRule', ruleId, updates: { value: 'XYZ' } })
+    })
+    act(() => { result.current.flush() })
+    expect(onApply).toHaveBeenCalled()
+  })
+
+  it('flush() suppresses apply on invalid tree', () => {
+    const onApply = jest.fn()
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields, onApply }))
+    act(() => { result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id, defaultField: 'n' }) })
+    act(() => { result.current.flush() })
+    expect(onApply).not.toHaveBeenCalled()
+    expect(result.current.pendingErrors.length).toBe(1)
+  })
+
+  it('hasActiveRules reflects tree.root.children.length', () => {
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields: [], onApply: () => {} }))
+    expect(result.current.hasActiveRules).toBe(false)
+    act(() => { result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id }) })
+    expect(result.current.hasActiveRules).toBe(true)
+  })
+
+  it('clear() empties root children', () => {
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields: [], onApply: () => {} }))
+    act(() => { result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id }) })
+    expect(result.current.tree.root.children.length).toBe(1)
+    act(() => { result.current.clear() })
+    expect(result.current.tree.root.children.length).toBe(0)
+  })
+
+  it('setTree replaces tree', () => {
+    const onApply = jest.fn()
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields: [], onApply }))
+    const newTree = { root: { id: 'r2', type: 'group' as const, combinator: 'or' as const, children: [] } }
+    act(() => { result.current.setTree(newTree) })
+    expect(result.current.tree.root.id).toBe('r2')
+  })
+
+  it('does NOT auto-apply on mount when initial is non-empty and valid', () => {
+    const onApply = jest.fn()
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const initial = {
+      root: {
+        id: 'r',
+        type: 'group' as const,
+        combinator: 'and' as const,
+        // Substring text operators now require >= 3 characters; use 'XYZ' so the
+        // initial tree is valid.
+        children: [{ id: 'a', type: 'rule' as const, field: 'n', operator: 'contains' as const, value: 'XYZ' } as any],
+      },
+    }
+    renderHook(() => useAdvancedFilterTree({ initial, fields, onApply }))
+    act(() => { jest.advanceTimersByTime(500) })
+    expect(onApply).not.toHaveBeenCalled()
+  })
+
+  it('does auto-apply after a dispatch from a non-empty initial', () => {
+    const onApply = jest.fn()
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const initial = {
+      root: {
+        id: 'r',
+        type: 'group' as const,
+        combinator: 'and' as const,
+        children: [{ id: 'a', type: 'rule' as const, field: 'n', operator: 'contains' as const, value: 'XYZ' } as any],
+      },
+    }
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial, fields, onApply }))
+    act(() => { result.current.dispatch({ type: 'updateRule', ruleId: 'a', updates: { value: 'WXY' } }) })
+    act(() => { jest.advanceTimersByTime(400) })
+    expect(onApply).toHaveBeenCalledTimes(1)
+  })
+
+  it('auto-applies non-blank short substring text rules', () => {
+    const onApply = jest.fn()
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields, onApply }))
+    act(() => { result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id, defaultField: 'n' }) })
+    const ruleId = result.current.tree.root.children[0].id
+    act(() => { result.current.dispatch({ type: 'updateRule', ruleId, updates: { value: 'a' } }) })
+    act(() => { jest.advanceTimersByTime(400) })
+    expect(onApply).toHaveBeenCalledTimes(1)
+    expect(result.current.pendingErrors).toEqual([])
+  })
+})
+
+describe('useAdvancedFilterTree — single source of truth', () => {
+  it('seeds appliedTree from initial and exposes it alongside tree', () => {
+    const initial = {
+      root: { id: 'r', type: 'group' as const, combinator: 'and' as const, children: [] },
+    }
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial, fields: [], onApply: () => {} }))
+    expect(result.current.tree).toEqual(initial)
+    expect(result.current.appliedTree).toEqual(initial)
+  })
+
+  it('appliedTree lags tree until the debounced apply fires', () => {
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields, onApply: () => {} }))
+
+    act(() => { result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id, defaultField: 'n' }) })
+    const ruleId = result.current.tree.root.children[0].id
+    act(() => { result.current.dispatch({ type: 'updateRule', ruleId, updates: { value: 'abc' } }) })
+
+    // Editor advanced immediately, appliedTree is still empty until debounce fires.
+    expect(result.current.tree.root.children).toHaveLength(1)
+    expect(result.current.appliedTree.root.children).toHaveLength(0)
+
+    act(() => { jest.advanceTimersByTime(400) })
+
+    // Debounce + validation passed — appliedTree now matches editor.
+    expect(result.current.appliedTree.root.children).toHaveLength(1)
+  })
+
+  it('appliedTree stays put when validation fails', () => {
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields, onApply: () => {} }))
+
+    // Empty-value rule is invalid.
+    act(() => { result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id, defaultField: 'n' }) })
+    act(() => { jest.advanceTimersByTime(500) })
+
+    expect(result.current.tree.root.children).toHaveLength(1)
+    expect(result.current.appliedTree.root.children).toHaveLength(0)
+    expect(result.current.pendingErrors.length).toBeGreaterThan(0)
+  })
+
+  it('clear() resets both tree and appliedTree immediately and fires onApply', () => {
+    const onApply = jest.fn()
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const initial = {
+      root: {
+        id: 'r',
+        type: 'group' as const,
+        combinator: 'and' as const,
+        children: [{ id: 'a', type: 'rule' as const, field: 'n', operator: 'contains' as const, value: 'XYZ' } as any],
+      },
+    }
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial, fields, onApply }))
+
+    act(() => { result.current.clear() })
+
+    expect(result.current.tree.root.children).toHaveLength(0)
+    expect(result.current.appliedTree.root.children).toHaveLength(0)
+    expect(onApply).toHaveBeenCalledTimes(1)
+  })
+
+  it('replaceTree() jumps both tree and appliedTree immediately (perspective restore)', () => {
+    const onApply = jest.fn()
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields, onApply }))
+
+    const restored = {
+      root: {
+        id: 'restored',
+        type: 'group' as const,
+        combinator: 'or' as const,
+        children: [{ id: 'b', type: 'rule' as const, field: 'n', operator: 'contains' as const, value: 'foo' } as any],
+      },
+    }
+    act(() => { result.current.replaceTree(restored) })
+
+    expect(result.current.tree.root.id).toBe('restored')
+    expect(result.current.appliedTree.root.id).toBe('restored')
+    expect(result.current.pendingErrors).toEqual([])
+    expect(onApply).toHaveBeenCalledWith(restored)
+  })
+
+  it('flush() advances appliedTree to the validated editor tree', () => {
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields, onApply: () => {} }))
+
+    act(() => { result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id, defaultField: 'n' }) })
+    const ruleId = result.current.tree.root.children[0].id
+    act(() => { result.current.dispatch({ type: 'updateRule', ruleId, updates: { value: 'abc' } }) })
+
+    // Before flush: appliedTree still empty.
+    expect(result.current.appliedTree.root.children).toHaveLength(0)
+
+    act(() => { result.current.flush() })
+
+    expect(result.current.appliedTree.root.children).toHaveLength(1)
+  })
+})

package/src/backend/hooks/useAdvancedFilter.ts

@@ -2,6 +2,9 @@
 import * as React from 'react'
 import type { AdvancedFilterState, FilterCondition, FilterFieldDef } from '@open-mercato/shared/lib/query/advanced-filter'
 import { createEmptyCondition, getDefaultOperator, normalizeAdvancedFilterState } from '@open-mercato/shared/lib/query/advanced-filter'
+import type { AdvancedFilterTree } from '@open-mercato/shared/lib/query/advanced-filter-tree'
+import { treeReducer, type TreeAction } from '../filters/treeReducer'
+import { validateTreeForApply, type ValidationError } from '../filters/filterValidation'
 
 export type UseAdvancedFilterOptions = {
   fields: FilterFieldDef[]
@@ -75,3 +78,130 @@ export function useAdvancedFilter({ fields, onChange }: UseAdvancedFilterOptions
     hasActiveConditions,
   }
 }
+
+export type UseAdvancedFilterTreeArgs = {
+  initial: AdvancedFilterTree
+  fields: FilterFieldDef[]
+  /**
+   * Optional side-effect that fires whenever the tree is validated and applied
+   * (debounced auto-apply, explicit `flush()`, `clear()`, or `replaceTree()`).
+   * Use this for non-state effects such as resetting the page index when the
+   * filter changes. State propagation should read `appliedTree` directly — the
+   * hook is the single source of truth and the page MUST NOT keep a parallel
+   * copy.
+   */
+  onApply?: (tree: AdvancedFilterTree) => void
+  debounceMs?: number
+}
+
+export type UseAdvancedFilterTreeResult = {
+  /** In-progress editor tree. Bound to the filter panel's `value` / `onChange`. */
+  tree: AdvancedFilterTree
+  /**
+   * Last validated, applied tree. Bound to URL serialization, query requests,
+   * active chips, and the filter-aware empty-state. Lags `tree` by `debounceMs`
+   * while the user is typing in an editor; advances immediately on `flush()`,
+   * `clear()`, and `replaceTree()`.
+   */
+  appliedTree: AdvancedFilterTree
+  setTree: (t: AdvancedFilterTree) => void
+  dispatch: (a: TreeAction) => void
+  pendingErrors: ValidationError[]
+  flush: () => void
+  clear: () => void
+  /**
+   * Replace BOTH the editor and applied trees immediately, bypassing the
+   * debounce. Use this for perspective restoration and saved-filter apply —
+   * actions that semantically jump the filter to a new known-good state rather
+   * than building it up via user edits.
+   */
+  replaceTree: (next: AdvancedFilterTree) => void
+  hasActiveRules: boolean
+}
+
+/**
+ * Tree-shaped advanced filter state with debounced auto-apply, validation gating,
+ * and helpers for the CRM filter builder UI.
+ *
+ * **State ownership**: this hook is the single source of truth for the filter
+ * tree. The host page MUST NOT keep a parallel `useState<AdvancedFilterTree>` —
+ * read `appliedTree` for URL/query consumption and `tree` for the editor panel.
+ *
+ * - Debounced apply (default 400 ms) — fires only when the tree validates.
+ *   `appliedTree` advances and the optional `onApply(tree)` callback fires.
+ * - `pendingErrors` exposes the latest validation errors for inline UI rendering.
+ * - `flush()` applies immediately if valid; `clear()` empties root children.
+ * - `replaceTree(t)` jumps BOTH editor and applied trees (perspective restore).
+ * - `hasActiveRules` mirrors `tree.root.children.length > 0`.
+ */
+export function useAdvancedFilterTree({
+  initial,
+  fields,
+  onApply,
+  debounceMs = 400,
+}: UseAdvancedFilterTreeArgs): UseAdvancedFilterTreeResult {
+  const [tree, setTree] = React.useState<AdvancedFilterTree>(initial)
+  const [appliedTree, setAppliedTree] = React.useState<AdvancedFilterTree>(initial)
+  const [pendingErrors, setPendingErrors] = React.useState<ValidationError[]>([])
+  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+  const didMountRef = React.useRef(false)
+  const onApplyRef = React.useRef(onApply)
+  const fieldsRef = React.useRef(fields)
+  React.useEffect(() => { onApplyRef.current = onApply }, [onApply])
+  React.useEffect(() => { fieldsRef.current = fields }, [fields])
+
+  const tryApply = React.useCallback((candidate: AdvancedFilterTree): boolean => {
+    const result = validateTreeForApply(candidate, fieldsRef.current)
+    if (result.ok) {
+      setPendingErrors([])
+      setAppliedTree(candidate)
+      onApplyRef.current?.(candidate)
+      return true
+    }
+    setPendingErrors(result.errors)
+    return false
+  }, [])
+
+  React.useEffect(() => {
+    if (!didMountRef.current) {
+      didMountRef.current = true
+      return
+    }
+    if (timerRef.current) clearTimeout(timerRef.current)
+    const timer = setTimeout(() => { tryApply(tree) }, debounceMs)
+    timerRef.current = timer
+    return () => clearTimeout(timer)
+  }, [tree, debounceMs, tryApply])
+
+  const dispatch = React.useCallback((action: TreeAction) => {
+    setTree((prev) => treeReducer(prev, action))
+  }, [])
+
+  const flush = React.useCallback(() => {
+    if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null }
+    tryApply(tree)
+  }, [tree, tryApply])
+
+  const clear = React.useCallback(() => {
+    if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null }
+    setTree((prev) => {
+      const emptied: AdvancedFilterTree = { root: { ...prev.root, children: [] } }
+      setAppliedTree(emptied)
+      return emptied
+    })
+    setPendingErrors([])
+    onApplyRef.current?.({ root: { id: '', type: 'group', combinator: 'and', children: [] } })
+  }, [])
+
+  const replaceTree = React.useCallback((next: AdvancedFilterTree) => {
+    if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null }
+    setTree(next)
+    setAppliedTree(next)
+    setPendingErrors([])
+    onApplyRef.current?.(next)
+  }, [])
+
+  const hasActiveRules = tree.root.children.length > 0
+
+  return { tree, appliedTree, setTree, dispatch, pendingErrors, flush, clear, replaceTree, hasActiveRules }
+}

package/src/backend/utils/api.ts

@@ -23,6 +23,23 @@ function readRedirectOverride(headers: Headers, headerName: string): boolean {
   return headers.get(headerName) === '0'
 }
 
+function isSameOriginRequest(input: RequestInfo | URL): boolean {
+  if (typeof window === 'undefined') return false
+  const host = window.location?.host
+  if (!host) return false
+  let urlString: string
+  if (typeof input === 'string') urlString = input
+  else if (input instanceof URL) urlString = input.toString()
+  else if (typeof Request !== 'undefined' && input instanceof Request) urlString = input.url
+  else return false
+  if (!/^[a-z][a-z0-9+.-]*:/i.test(urlString)) return true
+  try {
+    return new URL(urlString).host === host
+  } catch {
+    return false
+  }
+}
+
 export async function withScopedApiHeaders<T>(headers: Record<string, string>, run: () => Promise<T>): Promise<T> {
   return scopedHeaders.withScopedHeaders(headers, run)
 }
@@ -109,9 +126,17 @@ export async function apiFetch(input: RequestInfo | URL, init?: RequestInit): Pr
     )
   }
   const scoped = scopedHeaders.resolveScopedHeaders()
-  const mergedInit = Object.keys(scoped).length
+  const baseInit: RequestInit = Object.keys(scoped).length
     ? { ...(init ?? {}), headers: mergeHeaders(init?.headers, scoped) }
-    : init
+    : init ?? {}
+  // Only auto-inject credentials: 'include' for same-origin requests so cookies
+  // round-trip across Next.js proxy.ts rewrites (custom-domain portal flows)
+  // without leaking session cookies to third-party hosts.
+  const mergedInit: RequestInit = baseInit.credentials
+    ? baseInit
+    : isSameOriginRequest(input)
+      ? { ...baseInit, credentials: 'include' }
+      : baseInit
   const requestHeaders = new Headers(mergedInit?.headers)
   const disableUnauthorizedRedirect = readRedirectOverride(requestHeaders, 'x-om-unauthorized-redirect')
   const disableForbiddenRedirect = readRedirectOverride(requestHeaders, 'x-om-forbidden-redirect')

package/src/backend/utils/useAutoDiscoveredFields.ts

@@ -17,6 +17,7 @@ type ColumnMeta = {
   filterLoadOptions?: (query?: string) => Promise<FilterOption[]>
   filterable?: boolean
   filterGroup?: string
+  filterIconName?: string
   columnChooserGroup?: string
   alwaysVisible?: boolean
   hidden?: boolean
@@ -85,6 +86,7 @@ export function useAutoDiscoveredFields({
           type,
           group: meta?.filterGroup ?? meta?.columnChooserGroup,
         }
+        if (meta?.filterIconName) field.iconName = meta.filterIconName
         if (meta?.filterOptions) field.options = meta.filterOptions
         if (meta?.filterLoadOptions) field.loadOptions = meta.filterLoadOptions
         filterFields.push(field)

package/src/backend/utils/useCurrentUserId.ts

@@ -0,0 +1,40 @@
+'use client'
+import * as React from 'react'
+import { apiCall } from './apiCall'
+
+type FeatureCheckResponse = {
+  ok: boolean
+  granted: string[]
+  userId: string
+}
+
+/**
+ * Read the current user's id on the client. Returns `''` until the request resolves.
+ *
+ * Implementation note: there is no first-class `/api/auth/me` endpoint yet, so this
+ * piggy-backs on `/api/auth/feature-check` with an empty `features` array — the response
+ * always carries the JWT `userId`. Replace with a dedicated `/api/auth/me` or an
+ * SSR-bootstrapped user context once available, and remove this hop.
+ */
+export function useCurrentUserId(): string {
+  const [userId, setUserId] = React.useState<string>('')
+  React.useEffect(() => {
+    let cancelled = false
+    void (async () => {
+      try {
+        const res = await apiCall<FeatureCheckResponse>('/api/auth/feature-check', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ features: [] }),
+        })
+        if (!cancelled && res.ok && typeof res.result?.userId === 'string') {
+          setUserId(res.result.userId)
+        }
+      } catch {
+        if (!cancelled) setUserId('')
+      }
+    })()
+    return () => { cancelled = true }
+  }, [])
+  return userId
+}

package/src/primitives/__tests__/zindex-overlay.test.tsx

@@ -14,6 +14,7 @@ const Z_INDEX_BY_TOKEN: Record<string, number> = {
   'z-modal': 40,
   'z-popover': 45,
   'z-toast': 50,
+  'z-modal-elevated': 55,
   'z-tooltip': 60,
   'z-banner': 70,
   'z-top': 100,
@@ -129,4 +130,25 @@ describe('Issue #1836: portaled overlay primitives sit above modals (z-popover >
       expect(css).toContain('z-index: var(--z-index-popover);')
     }
   })
+
+  it('globals.css defines z-modal-elevated (55) above z-popover so dialogs opened from inside popovers are visible', () => {
+    const repoRoot = path.resolve(__dirname, '../../../../..')
+    const cssPaths = [
+      path.join(repoRoot, 'apps/mercato/src/app/globals.css'),
+      path.join(repoRoot, 'packages/create-app/template/src/app/globals.css'),
+    ]
+
+    for (const cssPath of cssPaths) {
+      const css = fs.readFileSync(cssPath, 'utf8')
+
+      expect(css).toContain('@utility z-modal-elevated')
+      expect(css).toMatch(/z-index:\s*var\(--z-index-modal-elevated(?:,\s*\d+)?\);/)
+
+      const elevatedMatch = css.match(/--z-index-modal-elevated:\s*(\d+);/)
+      const popoverMatch = css.match(/--z-index-popover:\s*(\d+);/)
+      expect(elevatedMatch).not.toBeNull()
+      expect(popoverMatch).not.toBeNull()
+      expect(Number(elevatedMatch![1])).toBeGreaterThan(Number(popoverMatch![1]))
+    }
+  })
 })

package/src/primitives/dialog.tsx

@@ -16,12 +16,17 @@ const DialogClose = DialogPrimitive.Close
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
+    /** Render above popovers (z-modal-elevated, 55) instead of the default z-modal (40).
+     *  Use when this dialog is opened from inside a popover so it isn't occluded. */
+    elevated?: boolean
+  }
+>(({ className, elevated, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-modal bg-black/50 backdrop-blur-sm transition-opacity data-[state=open]:animate-in data-[state=closed]:animate-out',
+      'fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity data-[state=open]:animate-in data-[state=closed]:animate-out',
+      elevated ? 'z-modal-elevated' : 'z-modal',
       className
     )}
     {...props}
@@ -31,8 +36,13 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    /** Render above popovers (z-modal-elevated, 55) instead of the default z-modal (40).
+     *  Set on dialogs that open from inside another popover (e.g. the SaveFilterDialog
+     *  inside the AdvancedFilterPanel popover) so they aren't hidden behind the popover. */
+    elevated?: boolean
+  }
+>(({ className, children, elevated, ...props }, ref) => {
   const t = useT()
 
   React.useEffect(() => {
@@ -48,12 +58,13 @@ const DialogContent = React.forwardRef<
 
   return (
     <DialogPortal>
-      <DialogOverlay />
+      <DialogOverlay elevated={elevated} />
       <DialogPrimitive.Content
         ref={ref}
         data-dialog-content=""
         className={cn(
-          'fixed inset-x-0 bottom-0 z-modal flex min-h-[50vh] max-h-[70vh] w-full translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-t-2xl border-t bg-card p-6 shadow-lg',
+          'fixed inset-x-0 bottom-0 flex min-h-[50vh] max-h-[70vh] w-full translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-t-2xl border-t bg-card p-6 shadow-lg',
+          elevated ? 'z-modal-elevated' : 'z-modal',
           'sm:inset-auto sm:left-1/2 sm:top-1/2 sm:min-h-0 sm:h-auto sm:w-full sm:max-w-lg sm:max-h-[90vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:border',
           'focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out',
           className,

package/src/primitives/tag.tsx

@@ -15,6 +15,7 @@ const tagVariants = cva(
         info:    'border-status-info-border bg-status-info-bg text-status-info-text',
         neutral: 'border-status-neutral-border bg-status-neutral-bg text-status-neutral-text',
         brand:   'border-brand-violet/30 bg-brand-violet/10 text-brand-violet',
+        pink:    'border-status-pink-border bg-status-pink-bg text-status-pink-text',
       },
       shape: {
         pill: 'rounded-full px-2.5 py-0.5',
@@ -33,9 +34,10 @@ const dotColorMap: Record<TagVariant, string> = {
   info:    'bg-status-info-icon',
   neutral: 'bg-status-neutral-icon',
   brand:   'bg-brand-violet',
+  pink:    'bg-status-pink-icon',
 }
 
-export type TagVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'brand'
+export type TagVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'brand' | 'pink'
 
 export type TagShape = 'pill' | 'square'