@open-mercato/ui 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7194.1.ab4fc81f82

package/src/backend/inputs/DurationInput.tsx

@@ -0,0 +1,207 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Input } from '../../primitives/input'
+import { Button } from '../../primitives/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../primitives/select'
+
+export type DurationUnit = 'seconds' | 'minutes' | 'hours' | 'days'
+
+export type ParsedSingleUnitDuration = { amount: number; unit: DurationUnit }
+
+const singleUnitPatterns: Array<{ regex: RegExp; unit: DurationUnit }> = [
+  { regex: /^PT(\d+)S$/, unit: 'seconds' },
+  { regex: /^PT(\d+)M$/, unit: 'minutes' },
+  { regex: /^PT(\d+)H$/, unit: 'hours' },
+  { regex: /^P(\d+)D$/, unit: 'days' },
+]
+
+export function parseSingleUnitDuration(value: string): ParsedSingleUnitDuration | null {
+  for (const { regex, unit } of singleUnitPatterns) {
+    const match = value.match(regex)
+    if (match) {
+      const amount = parseInt(match[1], 10)
+      if (!isNaN(amount)) return { amount, unit }
+    }
+  }
+  return null
+}
+
+export function formatSingleUnitDuration(amount: number, unit: DurationUnit): string {
+  switch (unit) {
+    case 'seconds':
+      return `PT${amount}S`
+    case 'minutes':
+      return `PT${amount}M`
+    case 'hours':
+      return `PT${amount}H`
+    case 'days':
+      return `P${amount}D`
+  }
+}
+
+export function isCompositeCompatibleDuration(value: string | null | undefined): boolean {
+  if (!value) return true
+  if (value.includes('{{')) return false
+  return parseSingleUnitDuration(value) !== null
+}
+
+export type DurationInputProps = {
+  value?: string
+  onChange: (value: string) => void
+  disabled?: boolean
+  id?: string
+  'aria-label'?: string
+  className?: string
+}
+
+const durationUnits: DurationUnit[] = ['seconds', 'minutes', 'hours', 'days']
+
+export function DurationInput({
+  value,
+  onChange,
+  disabled = false,
+  id,
+  'aria-label': ariaLabel,
+  className,
+}: DurationInputProps) {
+  const t = useT()
+  const currentValue = value ?? ''
+  const parsed = React.useMemo(() => parseSingleUnitDuration(currentValue), [currentValue])
+  const compositeCompatible = isCompositeCompatibleDuration(currentValue)
+
+  const [mode, setMode] = React.useState<'composite' | 'raw'>(() =>
+    compositeCompatible ? 'composite' : 'raw'
+  )
+  const [unit, setUnit] = React.useState<DurationUnit>(parsed?.unit ?? 'minutes')
+
+  React.useEffect(() => {
+    if (!isCompositeCompatibleDuration(currentValue)) setMode('raw')
+  }, [currentValue])
+
+  React.useEffect(() => {
+    if (parsed && parsed.unit !== unit) setUnit(parsed.unit)
+  }, [parsed, unit])
+
+  const amountLabel = ariaLabel ?? t('ui.durationInput.amountLabel', 'Duration amount')
+  const unitLabel = t('ui.durationInput.unitLabel', 'Duration unit')
+  const rawLabel = ariaLabel ?? t('ui.durationInput.rawLabel', 'Duration expression')
+  const unitOptionLabels: Record<DurationUnit, string> = {
+    seconds: t('ui.durationInput.units.seconds', 'Seconds'),
+    minutes: t('ui.durationInput.units.minutes', 'Minutes'),
+    hours: t('ui.durationInput.units.hours', 'Hours'),
+    days: t('ui.durationInput.units.days', 'Days'),
+  }
+
+  const handleAmountChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (disabled) return
+      const raw = event.target.value
+      if (raw === '') {
+        onChange('')
+        return
+      }
+      const amount = parseInt(raw, 10)
+      if (isNaN(amount) || amount < 0) return
+      onChange(formatSingleUnitDuration(amount, unit))
+    },
+    [disabled, onChange, unit]
+  )
+
+  const handleUnitChange = React.useCallback(
+    (nextUnit: string) => {
+      if (disabled) return
+      const resolved = durationUnits.find((candidate) => candidate === nextUnit)
+      if (!resolved) return
+      setUnit(resolved)
+      if (parsed) onChange(formatSingleUnitDuration(parsed.amount, resolved))
+    },
+    [disabled, onChange, parsed]
+  )
+
+  const handleRawChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (disabled) return
+      onChange(event.target.value)
+    },
+    [disabled, onChange]
+  )
+
+  const switchToRaw = React.useCallback(() => {
+    setMode('raw')
+  }, [])
+
+  const switchToComposite = React.useCallback(() => {
+    if (!isCompositeCompatibleDuration(currentValue)) return
+    setMode('composite')
+  }, [currentValue])
+
+  if (mode === 'raw') {
+    return (
+      <div className={cn('flex items-center gap-2', className)}>
+        <Input
+          id={id}
+          type="text"
+          value={currentValue}
+          onChange={handleRawChange}
+          disabled={disabled}
+          aria-label={rawLabel}
+          className="flex-1"
+        />
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={switchToComposite}
+          disabled={disabled || !compositeCompatible}
+        >
+          {t('ui.durationInput.switchToComposite', 'Use picker')}
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('flex items-center gap-2', className)}>
+      <Input
+        id={id}
+        type="number"
+        min={0}
+        value={parsed ? String(parsed.amount) : ''}
+        onChange={handleAmountChange}
+        disabled={disabled}
+        aria-label={amountLabel}
+        className="w-24"
+      />
+      <Select value={unit} onValueChange={handleUnitChange} disabled={disabled}>
+        <SelectTrigger aria-label={unitLabel} className="w-32">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {durationUnits.map((option) => (
+            <SelectItem key={option} value={option}>
+              {unitOptionLabels[option]}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={switchToRaw}
+        disabled={disabled}
+      >
+        {t('ui.durationInput.switchToRaw', 'Edit as text')}
+      </Button>
+    </div>
+  )
+}

package/src/backend/inputs/EventSelect.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { EventPayloadSchema } from '@open-mercato/shared/modules/events'
 import { apiCall } from '../utils/apiCall'
 import {
   Select,
@@ -26,6 +27,7 @@ export interface EventDefinition {
   module?: string
   entity?: string
   excludeFromTriggers?: boolean
+  payloadSchema?: EventPayloadSchema
 }
 
 export interface EventSelectProps {

package/src/backend/inputs/__tests__/DurationInput.test.tsx

@@ -0,0 +1,220 @@
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (_key: string, fallback: string) => fallback,
+}))
+
+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import {
+  DurationInput,
+  formatSingleUnitDuration,
+  isCompositeCompatibleDuration,
+  parseSingleUnitDuration,
+} from '../DurationInput'
+
+describe('formatSingleUnitDuration', () => {
+  it('serializes seconds to PT30S', () => {
+    expect(formatSingleUnitDuration(30, 'seconds')).toBe('PT30S')
+  })
+
+  it('serializes minutes to PT5M', () => {
+    expect(formatSingleUnitDuration(5, 'minutes')).toBe('PT5M')
+  })
+
+  it('serializes hours to PT2H', () => {
+    expect(formatSingleUnitDuration(2, 'hours')).toBe('PT2H')
+  })
+
+  it('serializes days to P1D', () => {
+    expect(formatSingleUnitDuration(1, 'days')).toBe('P1D')
+  })
+})
+
+describe('parseSingleUnitDuration', () => {
+  it('parses PT30S', () => {
+    expect(parseSingleUnitDuration('PT30S')).toEqual({ amount: 30, unit: 'seconds' })
+  })
+
+  it('parses PT5M', () => {
+    expect(parseSingleUnitDuration('PT5M')).toEqual({ amount: 5, unit: 'minutes' })
+  })
+
+  it('parses PT2H', () => {
+    expect(parseSingleUnitDuration('PT2H')).toEqual({ amount: 2, unit: 'hours' })
+  })
+
+  it('parses P1D', () => {
+    expect(parseSingleUnitDuration('P1D')).toEqual({ amount: 1, unit: 'days' })
+  })
+
+  it('round-trips every unit', () => {
+    for (const serialized of ['PT30S', 'PT5M', 'PT2H', 'P1D']) {
+      const parsed = parseSingleUnitDuration(serialized)
+      expect(parsed).not.toBeNull()
+      if (parsed) {
+        expect(formatSingleUnitDuration(parsed.amount, parsed.unit)).toBe(serialized)
+      }
+    }
+  })
+
+  it('rejects interpolation templates', () => {
+    expect(parseSingleUnitDuration('{{context.x}}')).toBeNull()
+  })
+
+  it('rejects multi-unit ISO durations', () => {
+    expect(parseSingleUnitDuration('PT1H30M')).toBeNull()
+  })
+
+  it('rejects the simple form', () => {
+    expect(parseSingleUnitDuration('5m')).toBeNull()
+  })
+
+  it('rejects garbage', () => {
+    expect(parseSingleUnitDuration('not-a-duration')).toBeNull()
+  })
+
+  it('rejects the empty string', () => {
+    expect(parseSingleUnitDuration('')).toBeNull()
+  })
+})
+
+describe('isCompositeCompatibleDuration', () => {
+  it('treats empty and undefined values as composite-compatible', () => {
+    expect(isCompositeCompatibleDuration('')).toBe(true)
+    expect(isCompositeCompatibleDuration(undefined)).toBe(true)
+    expect(isCompositeCompatibleDuration(null)).toBe(true)
+  })
+
+  it('accepts single-unit ISO values', () => {
+    expect(isCompositeCompatibleDuration('PT30S')).toBe(true)
+    expect(isCompositeCompatibleDuration('PT5M')).toBe(true)
+    expect(isCompositeCompatibleDuration('PT2H')).toBe(true)
+    expect(isCompositeCompatibleDuration('P1D')).toBe(true)
+  })
+
+  it('rejects templates, multi-unit values, simple form, and garbage', () => {
+    expect(isCompositeCompatibleDuration('{{context.x}}')).toBe(false)
+    expect(isCompositeCompatibleDuration('PT1H30M')).toBe(false)
+    expect(isCompositeCompatibleDuration('5m')).toBe(false)
+    expect(isCompositeCompatibleDuration('garbage')).toBe(false)
+  })
+})
+
+describe('DurationInput', () => {
+  it('renders composite mode with the parsed amount for a single-unit value', () => {
+    const { getByLabelText } = render(<DurationInput value="PT5M" onChange={jest.fn()} />)
+    expect((getByLabelText('Duration amount') as HTMLInputElement).value).toBe('5')
+    expect(getByLabelText('Duration unit')).toBeInTheDocument()
+  })
+
+  it('renders empty composite mode when value is empty', () => {
+    const { getByLabelText } = render(<DurationInput value="" onChange={jest.fn()} />)
+    expect((getByLabelText('Duration amount') as HTMLInputElement).value).toBe('')
+  })
+
+  it('serializes amount edits with the unit derived from the current value', () => {
+    const onChange = jest.fn()
+    const { getByLabelText } = render(<DurationInput value="PT2H" onChange={onChange} />)
+    fireEvent.change(getByLabelText('Duration amount'), { target: { value: '3' } })
+    expect(onChange).toHaveBeenCalledWith('PT3H')
+  })
+
+  it('serializes day values with the P prefix and no T segment', () => {
+    const onChange = jest.fn()
+    const { getByLabelText } = render(<DurationInput value="P1D" onChange={onChange} />)
+    fireEvent.change(getByLabelText('Duration amount'), { target: { value: '2' } })
+    expect(onChange).toHaveBeenCalledWith('P2D')
+  })
+
+  it('emits an empty string when the amount is cleared', () => {
+    const onChange = jest.fn()
+    const { getByLabelText } = render(<DurationInput value="PT5M" onChange={onChange} />)
+    fireEvent.change(getByLabelText('Duration amount'), { target: { value: '' } })
+    expect(onChange).toHaveBeenCalledWith('')
+  })
+
+  it('falls back to raw mode for interpolation templates', () => {
+    const { getByLabelText } = render(
+      <DurationInput value="{{context.timeout}}" onChange={jest.fn()} />
+    )
+    expect((getByLabelText('Duration expression') as HTMLInputElement).value).toBe(
+      '{{context.timeout}}'
+    )
+  })
+
+  it('falls back to raw mode for multi-unit ISO values', () => {
+    const { getByLabelText } = render(<DurationInput value="PT1H30M" onChange={jest.fn()} />)
+    expect((getByLabelText('Duration expression') as HTMLInputElement).value).toBe('PT1H30M')
+  })
+
+  it('falls back to raw mode for the simple form', () => {
+    const { getByLabelText } = render(<DurationInput value="5m" onChange={jest.fn()} />)
+    expect((getByLabelText('Duration expression') as HTMLInputElement).value).toBe('5m')
+  })
+
+  it('falls back to raw mode for unparseable values', () => {
+    const { getByLabelText } = render(<DurationInput value="garbage" onChange={jest.fn()} />)
+    expect((getByLabelText('Duration expression') as HTMLInputElement).value).toBe('garbage')
+  })
+
+  it('passes raw edits through unchanged', () => {
+    const onChange = jest.fn()
+    const { getByLabelText } = render(<DurationInput value="PT1H30M" onChange={onChange} />)
+    fireEvent.change(getByLabelText('Duration expression'), {
+      target: { value: '{{context.deadline}}' },
+    })
+    expect(onChange).toHaveBeenCalledWith('{{context.deadline}}')
+  })
+
+  it('switches composite to raw keeping the serialized string', () => {
+    const onChange = jest.fn()
+    const { getByLabelText, getByRole } = render(
+      <DurationInput value="PT5M" onChange={onChange} />
+    )
+    fireEvent.click(getByRole('button', { name: 'Edit as text' }))
+    expect((getByLabelText('Duration expression') as HTMLInputElement).value).toBe('PT5M')
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('switches raw back to composite when the value parses to a single unit', () => {
+    const { getByLabelText, getByRole } = render(
+      <DurationInput value="PT5M" onChange={jest.fn()} />
+    )
+    fireEvent.click(getByRole('button', { name: 'Edit as text' }))
+    fireEvent.click(getByRole('button', { name: 'Use picker' }))
+    expect((getByLabelText('Duration amount') as HTMLInputElement).value).toBe('5')
+  })
+
+  it('disables the composite toggle while the raw value is not single-unit parseable', () => {
+    const { getByRole } = render(<DurationInput value="PT1H30M" onChange={jest.fn()} />)
+    expect(
+      (getByRole('button', { name: 'Use picker' }) as HTMLButtonElement).disabled
+    ).toBe(true)
+  })
+
+  it('allows switching back to composite from raw mode with an empty value', () => {
+    const { getByLabelText, getByRole } = render(<DurationInput value="" onChange={jest.fn()} />)
+    fireEvent.click(getByRole('button', { name: 'Edit as text' }))
+    fireEvent.click(getByRole('button', { name: 'Use picker' }))
+    expect((getByLabelText('Duration amount') as HTMLInputElement).value).toBe('')
+  })
+
+  it('honors a custom aria-label on the primary input in both modes', () => {
+    const { getByLabelText, getByRole } = render(
+      <DurationInput value="PT5M" onChange={jest.fn()} aria-label="Deadline" />
+    )
+    expect((getByLabelText('Deadline') as HTMLInputElement).value).toBe('5')
+    fireEvent.click(getByRole('button', { name: 'Edit as text' }))
+    expect((getByLabelText('Deadline') as HTMLInputElement).value).toBe('PT5M')
+  })
+
+  it('disables inputs and ignores edits when disabled', () => {
+    const onChange = jest.fn()
+    const { getByLabelText, getByRole } = render(
+      <DurationInput value="PT5M" onChange={onChange} disabled />
+    )
+    expect((getByLabelText('Duration amount') as HTMLInputElement).disabled).toBe(true)
+    expect(
+      (getByRole('button', { name: 'Edit as text' }) as HTMLButtonElement).disabled
+    ).toBe(true)
+  })
+})

package/src/backend/inputs/index.ts

@@ -9,3 +9,4 @@ export * from './TimeInput'
 export * from './TimePicker'
 export * from './DateTimePicker'
 export * from './DatePicker'
+export * from './DurationInput'

package/src/backend/nav/navBadges.ts

@@ -0,0 +1,61 @@
+'use client'
+
+import * as React from 'react'
+
+/**
+ * Live counts rendered on sidebar nav items ("3 waiting for you").
+ *
+ * Why this is a client-side store rather than a field on the chrome payload:
+ * `/api/auth/admin/nav` is cached for 30 minutes behind a module-surface
+ * fingerprint, so a per-user count served through it would be both stale and
+ * cache-poisoning. Core owns the capability and the rendering; whichever module
+ * owns the number mounts a headless widget into `shell:sidebar:badges` and
+ * publishes here.
+ *
+ * Counts are advisory: a nav item renders exactly what it is given, and an
+ * absent or zero count renders nothing at all — never a "0" chip.
+ */
+export type NavBadgeTone = 'default' | 'attention'
+
+export type NavBadge = {
+  count: number
+  tone?: NavBadgeTone
+  /** Accessible label; falls back to the raw count when omitted. */
+  label?: string
+}
+
+const badges = new Map<string, NavBadge>()
+const listeners = new Set<() => void>()
+
+function emit(): void {
+  for (const listener of listeners) listener()
+}
+
+export function setNavBadge(href: string, badge: NavBadge | null): void {
+  if (!href) return
+  if (!badge || !Number.isFinite(badge.count) || badge.count <= 0) {
+    if (badges.delete(href)) emit()
+    return
+  }
+  const current = badges.get(href)
+  if (current && current.count === badge.count && current.tone === badge.tone && current.label === badge.label) return
+  badges.set(href, badge)
+  emit()
+}
+
+export function clearNavBadge(href: string): void {
+  setNavBadge(href, null)
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener)
+  return () => {
+    listeners.delete(listener)
+  }
+}
+
+export function useNavBadge(href: string): NavBadge | null {
+  const getSnapshot = React.useCallback(() => badges.get(href) ?? null, [href])
+  const getServerSnapshot = React.useCallback(() => null, [])
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}

package/src/primitives/__tests__/segmented-control.test.tsx

@@ -74,7 +74,7 @@ describe('SegmentedControl', () => {
     const { container } = render(<Controlled />)
     const root = container.querySelector('[data-slot="segmented-control"]') as HTMLElement
     expect(root.className).toContain('h-8')
-    expect(root.className).toContain('rounded-full')
+    expect(root.className).toContain('rounded-lg')
     const item = container.querySelector('[data-slot="segmented-control-item"]') as HTMLElement
     expect(item.className).toContain('h-7')
     expect(item.className).toContain('text-sm')
@@ -123,7 +123,7 @@ describe('SegmentedControl', () => {
     )
     const root = container.querySelector('[data-slot="segmented-control"]') as HTMLElement
     expect(root.className).toContain('custom-class')
-    expect(root.className).toContain('rounded-full')
+    expect(root.className).toContain('rounded-lg')
     expect(root.className).toContain('bg-muted')
   })
 })

package/src/primitives/__tests__/textarea.test.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Textarea } from '../textarea'
+
+function stubScrollHeight(element: HTMLElement, value: number) {
+  Object.defineProperty(element, 'scrollHeight', { configurable: true, value })
+}
+
+describe('Textarea', () => {
+  it('keeps the manual resize handle when autoResize is off', () => {
+    render(<Textarea aria-label="notes" />)
+    const field = screen.getByLabelText('notes')
+    expect(field.className).toContain('resize-y')
+    expect(field.className).not.toContain('resize-none')
+  })
+
+  it('drops the manual resize handle when autoResize is on', () => {
+    render(<Textarea aria-label="notes" autoResize />)
+    const field = screen.getByLabelText('notes')
+    expect(field.className).toContain('resize-none')
+  })
+
+  it('forwards the ref while owning the element internally', () => {
+    const ref = React.createRef<HTMLTextAreaElement>()
+    render(<Textarea aria-label="notes" autoResize ref={ref} />)
+    expect(ref.current).toBe(screen.getByLabelText('notes'))
+  })
+
+  it('grows to fit content and stops scrolling below the row cap', () => {
+    render(<Textarea aria-label="notes" autoResize maxRows={4} defaultValue="" />)
+    const field = screen.getByLabelText('notes') as HTMLTextAreaElement
+    stubScrollHeight(field, 60)
+    fireEvent.change(field, { target: { value: 'two\nlines' } })
+    expect(field.style.overflowY).toBe('hidden')
+    expect(field.style.height).not.toBe('auto')
+  })
+
+  it('scrolls once the content exceeds the row cap', () => {
+    render(<Textarea aria-label="notes" autoResize maxRows={2} defaultValue="" />)
+    const field = screen.getByLabelText('notes') as HTMLTextAreaElement
+    stubScrollHeight(field, 4000)
+    fireEvent.change(field, { target: { value: 'a'.repeat(4000) } })
+    expect(field.style.overflowY).toBe('auto')
+  })
+
+  it('still renders the character counter', () => {
+    render(<Textarea aria-label="notes" autoResize showCount maxLength={10} defaultValue="abc" />)
+    expect(screen.getByText('3/10')).toBeInTheDocument()
+  })
+})

package/src/primitives/segmented-control.tsx

@@ -7,9 +7,9 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@open-mercato/shared/lib/utils'
 
 /**
- * iOS-style segmented control per Figma `Switch / Chart / Cryptocurrency`
- * (component set id `199963:1442` in DS Open Mercato). Renders a single
- * track with N items where exactly one is selected at a time. Selecting
+ * Segmented control per Figma DS Open Mercato (node `2604:114`): a muted
+ * rounded-rectangle track with a raised white card for the selected segment.
+ * Renders a single track with N items where exactly one is selected at a time. Selecting
  * a new item fires `onValueChange`.
  *
  * Use for **mutually-exclusive view state** — list page filters like
@@ -47,8 +47,8 @@ const SegmentedControlContext = React.createContext<SegmentedControlContextValue
 })
 
 const trackVariants = cva(
-  // Pill-shaped track with subtle inner padding so selected items render
-  // a smaller inner pill (the iOS slide-thumb effect). Track is muted —
+  // Rounded-rectangle track (DS Open Mercato node 2604:114) with subtle inner
+  // padding so the selected item renders as a smaller inner card. Track is muted —
   // selected item raises with bg-background + shadow-sm. We use full
   // `bg-muted` (not /40) so the contrast between track and a selected
   // bg-background item stays visible in the light theme; in dark mode
@@ -59,7 +59,7 @@ const trackVariants = cva(
   //   sm      → track h-7 (28px) − 2px border − 2px padding (p-px ×2) = 24px → matches item h-6
   // Using `p-0.5` (2px each side = 4px total) instead breaks both sizes by
   // 2px so the selected pill clips top and bottom against the track border.
-  'inline-flex w-fit gap-0 rounded-full border border-input bg-muted p-px transition-colors',
+  'inline-flex w-fit gap-0 rounded-lg border border-input bg-muted p-px transition-colors',
   {
     variants: {
       size: {
@@ -85,7 +85,7 @@ const itemVariants = cva(
   // shadow, important when the surrounding theme is high-key and the
   // shadow alone is hard to read). Unselected text is muted; hover
   // only nudges color (no bg change — keeps the track flat).
-  'inline-flex items-center justify-center rounded-full font-medium ' +
+  'inline-flex items-center justify-center rounded-md font-medium ' +
     'transition-all outline-none focus-visible:shadow-focus ' +
     'disabled:cursor-not-allowed disabled:opacity-50 ' +
     'data-[state=checked]:bg-background data-[state=checked]:text-foreground data-[state=checked]:font-semibold data-[state=checked]:shadow-sm ' +

package/src/primitives/sheet.tsx

@@ -19,6 +19,7 @@ const SheetOverlay = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
+    data-slot="sheet-overlay"
     className={cn(
       'fixed inset-x-0 bottom-0 top-[var(--topbar-height,0px)] z-overlay bg-black/40 backdrop-blur-sm',
       'data-[state=open]:animate-in data-[state=closed]:animate-out',
@@ -89,7 +90,12 @@ const SheetContent = React.forwardRef<
 >(({ side = 'right', className, children, hideClose = false, closeLabel = 'Close', ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
-    <DialogPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+    <DialogPrimitive.Content
+      ref={ref}
+      data-slot="sheet-content"
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
       {children}
       {!hideClose ? (
         <DialogPrimitive.Close