npm - @mastra/playground-ui - Versions diffs - 68.0.0 → 69.0.0-alpha.1 - Mend

@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2284) hide show

package/dist/components/PropertyFilter.cjs.js CHANGED Viewed

@@ -1,14 +1,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../utils-uDc1ofX1.cjs");
-require("../primitives/transitions.cjs.js");
-const require_Button = require("../Button-DLcMcuUL.cjs");
+const require_property_filter_applied = require("../property-filter-applied-iYDdM1hb.cjs");
+const require_Button = require("../Button-BfICfyxD.cjs");
+const require_combobox = require("../combobox-i723LxeC.cjs");
+const require_components_Field = require("./Field.cjs.js");
+const require_popover = require("../popover-D9AfJmla.cjs");
+const require_Txt = require("../Txt-_00wWxTd.cjs");
 const require_primitives_menu_item = require("../primitives/menu-item.cjs.js");
+require("../primitives/transitions.cjs.js");
 require("../primitives/typography.cjs.js");
-const require_Txt = require("../Txt-BnoSqxKE.cjs");
-const require_components_Field = require("./Field.cjs.js");
-const require_popover = require("../popover-BJqa6Hz6.cjs");
-const require_combobox = require("../combobox-DIT_6xiG.cjs");
-const require_property_filter_applied = require("../property-filter-applied-BkkIObRq.cjs");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
@@ -158,7 +158,7 @@ function PropertyFilterCreator({ fields, tokens, onTokensChange, label = "Add fi
 								as: "span",
 								variant: "caption",
 								tone: "muted",
-								children: `${selectedField.label} · is`
+								children: `${selectedField.label} is`
 							})
 						]
 					}),

package/dist/components/PropertyFilter.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PropertyFilter.cjs.js","names":["forwardRef","useMemo","useState","useRef","useCallback","Popover","PopoverTrigger","Button","ListFilterPlusIcon","PopoverContent","cn","ArrowLeftIcon","FilterIcon","Txt","_Fragment","menuItemButtonClass","menuItemTrailingIconClass","PlusIcon","Field","Combobox","FieldError","X","ListFilterPlus","ChevronRightIcon","PickMultiPanel"],"sources":["../../src/ds/components/PropertyFilter/property-filter-creator.tsx"],"sourcesContent":["import {\n ArrowLeftIcon,\n ChevronRightIcon,\n FilterIcon,\n ListFilterPlusIcon,\n PlusIcon,\n ListFilterPlus,\n X,\n} from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ButtonHTMLAttributes } from 'react';\nimport { PickMultiPanel } from './pick-multi-panel';\nimport type { PropertyFilterField, PropertyFilterToken } from './types';\nimport { Button } from '@/ds/components/Button/Button';\nimport type { ButtonProps } from '@/ds/components/Button/Button';\nimport { Combobox } from '@/ds/components/Combobox/combobox';\nimport { Field, FieldError } from '@/ds/components/Field';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover/popover';\nimport { Txt } from '@/ds/components/Txt';\nimport {\n MENU_SIDE_OFFSET,\n menuEmptyClass,\n menuItemButtonClass,\n menuItemTrailingIconClass,\n} from '@/ds/primitives/menu-item';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\n// Plain <button>s navigated with roving focus (not Base UI).\nconst FilterMenuButton = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>((props, ref) => (\n <button type=\"button\" role=\"menuitem\" data-filter-item=\"\" ref={ref} {...props} />\n));\nFilterMenuButton.displayName = 'FilterMenuButton';\n\nexport type PropertyFilterCreatorProps = {\n fields: PropertyFilterField[];\n tokens: PropertyFilterToken[];\n onTokensChange: (tokens: PropertyFilterToken[]) => void;\n label?: string;\n disabled?: boolean;\n /** Size passed through to the trigger Button. Defaults to 'md'. /\n size?: ButtonProps['size'];\n /\n Called when the user picks a text (id-style) field. Consumers are expected\n * to render a pending applied-filter pill with an active input so the user\n * can type the value inline instead of in this popover.\n /\n onStartTextFilter?: (fieldId: string) => void;\n /\n Field ids hidden from the Add Filter dropdown. Use to prevent users from\n * recreating a filter that an upstream context already owns (e.g. the agent\n * id when viewing the agent-scoped traces tab).\n /\n hiddenFieldIds?: readonly string[];\n};\n\n/\n Minimal Linear-style filter creator: a `+ Filter` button whose popover walks\n * the user through property → value → commit. For id-style text fields, the\n * picker closes immediately and the applied-filter pill owns the input. For\n * `pick-multi` fields (e.g. Root Entity Name) hovering the item opens a\n * separate side popover with checkboxes — each check adds its own applied\n * filter and the main popover stays open so users can pick many.\n /\nexport function PropertyFilterCreator({\n fields,\n tokens,\n onTokensChange,\n label = 'Add filter',\n disabled,\n size,\n onStartTextFilter,\n hiddenFieldIds,\n}: PropertyFilterCreatorProps) {\n const visibleFields = useMemo(() => {\n if (!hiddenFieldIds \|\| hiddenFieldIds.length === 0) return fields;\n const hidden = new Set(hiddenFieldIds);\n return fields.filter(f => !hidden.has(f.id));\n }, [fields, hiddenFieldIds]);\n const [open, setOpen] = useState(false);\n const [fieldId, setFieldId] = useState<string \| undefined>();\n const [multiValue, setMultiValue] = useState<string[]>([]);\n const [error, setError] = useState<string \| undefined>();\n // Single source of truth for which pick-multi side panel is open. Opens only\n // via explicit click/keyboard press on the menu item — no hover/focus\n // auto-open (was too flicker-prone).\n const [openPickMultiFieldId, setOpenPickMultiFieldId] = useState<string \| undefined>();\n\n // When the user picks a text field we close this popover and hand off focus\n // to the newly-created pill's input — prevent Radix from returning focus to\n // the trigger button in that case.\n const skipCloseFocusRef = useRef(false);\n\n const togglePickMulti = useCallback((id: string) => {\n setOpenPickMultiFieldId(current => (current === id ? undefined : id));\n }, []);\n const closePickMulti = useCallback(() => setOpenPickMultiFieldId(undefined), []);\n\n useEffect(() => {\n if (!open) setOpenPickMultiFieldId(undefined);\n }, [open]);\n\n const selectedField = useMemo(() => visibleFields.find(f => f.id === fieldId), [visibleFields, fieldId]);\n // Only single-use kinds (text, multi-select) count as \"used\". `pick-multi`\n // allows multiple tokens with the same fieldId.\n const singleUseFieldIds = useMemo(() => {\n const ids = new Set<string>();\n for (const token of tokens) {\n const field = fields.find(f => f.id === token.fieldId);\n if (field && field.kind !== 'pick-multi') ids.add(token.fieldId);\n }\n return ids;\n }, [tokens, fields]);\n\n const reset = useCallback(() => {\n setFieldId(undefined);\n setMultiValue([]);\n setError(undefined);\n }, []);\n\n useEffect(() => {\n if (!open) reset();\n }, [open, reset]);\n\n /\n Replace whatever token exists for `fieldId` with the given value. Used by\n * both single-select (radio) and multi-select (checkbox) pick-multi panels.\n * An empty list means nothing is selected, which removes the token here —\n * unlike the applied pill, where the filter stays on in a neutral state.\n /\n const replacePickMultiToken = useCallback(\n (fieldId: string, value: string \| string[]) => {\n const existingIndex = tokens.findIndex(t => t.fieldId === fieldId);\n\n if (Array.isArray(value) && value.length === 0) {\n if (existingIndex === -1) return;\n onTokensChange(tokens.filter((_, i) => i !== existingIndex));\n return;\n }\n\n if (existingIndex === -1) {\n onTokensChange([...tokens, { fieldId, value }]);\n return;\n }\n\n const nextTokens = [...tokens];\n nextTokens[existingIndex] = { fieldId, value };\n onTokensChange(nextTokens);\n },\n [onTokensChange, tokens],\n );\n\n const commit = useCallback(() => {\n if (!selectedField) {\n setError('Choose a property first.');\n return;\n }\n if (singleUseFieldIds.has(selectedField.id)) {\n setError(`Remove the existing ${selectedField.label} filter before adding another.`);\n return;\n }\n if (multiValue.length === 0) {\n setError(`Choose at least one ${selectedField.label.toLowerCase()} value.`);\n return;\n }\n onTokensChange([...tokens, { fieldId: selectedField.id, value: multiValue }]);\n setOpen(false);\n }, [multiValue, onTokensChange, selectedField, singleUseFieldIds, tokens]);\n\n return (\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <Button size={size} disabled={disabled} icon={<ListFilterPlusIcon />}>\n {label}\n </Button>\n </PopoverTrigger>\n <PopoverContent\n align=\"start\"\n sideOffset={MENU_SIDE_OFFSET}\n className={cn('w-64', selectedField ? 'p-3' : 'p-1')}\n initialFocus={false}\n finalFocus={() => {\n if (skipCloseFocusRef.current) {\n skipCloseFocusRef.current = false;\n return false;\n }\n return true;\n }}\n >\n <div className={cn('grid', selectedField && 'gap-3')}>\n {selectedField && (\n <div className=\"flex items-center gap-2\">\n <button\n type=\"button\"\n aria-label=\"Back to properties\"\n className={cn(quietTextHover, controlStateColorTransition)}\n onClick={reset}\n >\n <ArrowLeftIcon className=\"size-4\" />\n </button>\n <FilterIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n <Txt as=\"span\" variant=\"caption\" tone=\"muted\">{`${selectedField.label} · is`}</Txt>\n </div>\n )}\n\n {!selectedField && (\n <div\n role=\"menu\"\n className=\"max-h-[80dvh] overflow-auto\"\n onKeyDown={e => {\n if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') return;\n const buttons = Array.from(\n e.currentTarget.querySelectorAll<HTMLButtonElement>('[data-filter-item]:not([disabled])'),\n );\n if (buttons.length === 0) return;\n e.preventDefault();\n const active = document.activeElement as HTMLElement \| null;\n const current = buttons.findIndex(b => b === active);\n let next: number;\n if (e.key === 'Home') next = 0;\n else if (e.key === 'End') next = buttons.length - 1;\n else if (e.key === 'ArrowDown') next = current < 0 ? 0 : (current + 1) % buttons.length;\n else next = current <= 0 ? buttons.length - 1 : current - 1;\n buttons[next]?.focus();\n }}\n >\n <>\n {visibleFields.length > 0 ? (\n visibleFields.map(f => {\n const used = singleUseFieldIds.has(f.id);\n if (f.kind === 'pick-multi') {\n return (\n <PickMultiMenuItem\n key={f.id}\n field={f}\n tokens={tokens}\n onChange={replacePickMultiToken}\n open={openPickMultiFieldId === f.id}\n onToggle={togglePickMulti}\n onClose={closePickMulti}\n />\n );\n }\n return (\n <FilterMenuButton\n key={f.id}\n className={cn(menuItemButtonClass, 'group')}\n disabled={used}\n onClick={() => {\n setError(undefined);\n if (f.kind === 'text') {\n onTokensChange([...tokens, { fieldId: f.id, value: '' }]);\n onStartTextFilter?.(f.id);\n skipCloseFocusRef.current = true;\n setOpen(false);\n return;\n }\n setFieldId(f.id);\n }}\n >\n <span className=\"truncate\">{f.label}</span>\n {used ? (\n <span className=\"ml-auto text-muted-foreground\">In use</span>\n ) : (\n <span\n className={cn(\n menuItemTrailingIconClass,\n 'text-muted-foreground opacity-0 group-hover:opacity-100 group-focus:opacity-100',\n )}\n >\n <PlusIcon />\n </span>\n )}\n </FilterMenuButton>\n );\n })\n ) : (\n <div className={menuEmptyClass}>No matching property.</div>\n )}\n </>\n </div>\n )}\n\n {selectedField && (\n <Field invalid={Boolean(error)}>\n <Combobox\n multiple\n options={selectedField.options ?? []}\n value={multiValue}\n onValueChange={v => {\n setMultiValue(v);\n setError(undefined);\n }}\n placeholder={selectedField.placeholder ?? `Choose ${selectedField.label}`}\n searchPlaceholder={`Search ${selectedField.label.toLowerCase()}`}\n emptyText={selectedField.emptyText ?? 'No option found.'}\n size=\"md\"\n aria-label={selectedField.label}\n />\n <FieldError>{error}</FieldError>\n </Field>\n )}\n\n {selectedField && (\n <div className=\"flex items-center justify-end gap-2\">\n <Button icon={<X />} variant=\"ghost\" size=\"md\" onClick={() => setOpen(false)}>\n Cancel\n </Button>\n <Button icon={<ListFilterPlus />} size=\"md\" onClick={commit}>\n Add filter\n </Button>\n </div>\n )}\n </div>\n </PopoverContent>\n </Popover>\n );\n}\n\ntype PickMultiField = Extract<PropertyFilterField, { kind: 'pick-multi' }>;\n\ntype PickMultiMenuItemProps = {\n field: PickMultiField;\n tokens: PropertyFilterToken[];\n onChange: (fieldId: string, value: string \| string[]) => void;\n open: boolean;\n onToggle: (fieldId: string) => void;\n onClose: () => void;\n};\n\n/\n A property-picker menu item that opens a separate Radix popover (portaled to\n * the side) with a radio group (single-select) or checkbox list (multi-select,\n * `field.multi === true`). Open/close is driven by explicit click / keyboard\n * press; the panel only closes when the user clicks outside, presses Escape,\n * or clicks the row again to toggle it off.\n */\nfunction PickMultiMenuItem({ field, tokens, onChange, open, onToggle, onClose }: PickMultiMenuItemProps) {\n const contentRef = useRef<HTMLDivElement>(null);\n\n return (\n <Popover\n open={open}\n onOpenChange={next => {\n if (next) onToggle(field.id);\n else onClose();\n }}\n >\n <PopoverTrigger asChild>\n <FilterMenuButton\n className={menuItemButtonClass}\n onKeyDown={e => {\n if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;\n if (!open) onToggle(field.id);\n e.preventDefault();\n requestAnimationFrame(() => {\n const first = contentRef.current?.querySelector<HTMLElement>(\n 'input, button, [tabindex]:not([tabindex=\"-1\"])',\n );\n first?.focus();\n });\n }}\n >\n {open && <ChevronRightIcon className=\"text-muted-foreground\" />}\n <span className=\"truncate\">{field.label}</span>\n {!open && (\n <span className={cn(menuItemTrailingIconClass, 'text-muted-foreground')}>\n <ChevronRightIcon />\n </span>\n )}\n </FilterMenuButton>\n </PopoverTrigger>\n <PopoverContent\n ref={contentRef}\n side=\"right\"\n align=\"start\"\n sideOffset={MENU_SIDE_OFFSET}\n className=\"w-64 p-0\"\n initialFocus={false}\n onKeyDown={e => {\n if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') return;\n const items = Array.from(\n e.currentTarget.querySelectorAll<HTMLElement>('[data-pick-multi-item]:not([disabled])'),\n );\n if (items.length === 0) return;\n e.preventDefault();\n e.stopPropagation();\n const active = document.activeElement as HTMLElement \| null;\n const current = items.findIndex(el => el === active);\n let next: number;\n if (e.key === 'Home') next = 0;\n else if (e.key === 'End') next = items.length - 1;\n else if (e.key === 'ArrowDown') next = current < 0 ? 0 : (current + 1) % items.length;\n else next = current <= 0 ? items.length - 1 : current - 1;\n items[next]?.focus();\n }}\n data-pick-multi-panel\n >\n <PickMultiPanel field={field} tokens={tokens} onChange={onChange} />\n </PopoverContent>\n </Popover>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"PropertyFilter.cjs.js","names":["forwardRef","useMemo","useState","useRef","useCallback","Popover","PopoverTrigger","Button","ListFilterPlusIcon","PopoverContent","cn","ArrowLeftIcon","FilterIcon","Txt","_Fragment","menuItemButtonClass","menuItemTrailingIconClass","PlusIcon","Field","Combobox","FieldError","X","ListFilterPlus","ChevronRightIcon","PickMultiPanel"],"sources":["../../src/ds/components/PropertyFilter/property-filter-creator.tsx"],"sourcesContent":["import {\n ArrowLeftIcon,\n ChevronRightIcon,\n FilterIcon,\n ListFilterPlusIcon,\n PlusIcon,\n ListFilterPlus,\n X,\n} from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ButtonHTMLAttributes } from 'react';\nimport { PickMultiPanel } from './pick-multi-panel';\nimport type { PropertyFilterField, PropertyFilterToken } from './types';\nimport { Button } from '@/ds/components/Button/Button';\nimport type { ButtonProps } from '@/ds/components/Button/Button';\nimport { Combobox } from '@/ds/components/Combobox/combobox';\nimport { Field, FieldError } from '@/ds/components/Field';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover/popover';\nimport { Txt } from '@/ds/components/Txt';\nimport {\n MENU_SIDE_OFFSET,\n menuEmptyClass,\n menuItemButtonClass,\n menuItemTrailingIconClass,\n} from '@/ds/primitives/menu-item';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\n// Plain <button>s navigated with roving focus (not Base UI).\nconst FilterMenuButton = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>((props, ref) => (\n <button type=\"button\" role=\"menuitem\" data-filter-item=\"\" ref={ref} {...props} />\n));\nFilterMenuButton.displayName = 'FilterMenuButton';\n\nexport type PropertyFilterCreatorProps = {\n fields: PropertyFilterField[];\n tokens: PropertyFilterToken[];\n onTokensChange: (tokens: PropertyFilterToken[]) => void;\n label?: string;\n disabled?: boolean;\n /** Size passed through to the trigger Button. Defaults to 'md'. /\n size?: ButtonProps['size'];\n /\n Called when the user picks a text (id-style) field. Consumers are expected\n * to render a pending applied-filter pill with an active input so the user\n * can type the value inline instead of in this popover.\n /\n onStartTextFilter?: (fieldId: string) => void;\n /\n Field ids hidden from the Add Filter dropdown. Use to prevent users from\n * recreating a filter that an upstream context already owns (e.g. the agent\n * id when viewing the agent-scoped traces tab).\n /\n hiddenFieldIds?: readonly string[];\n};\n\n/\n Minimal Linear-style filter creator: a `+ Filter` button whose popover walks\n * the user through property → value → commit. For id-style text fields, the\n * picker closes immediately and the applied-filter pill owns the input. For\n * `pick-multi` fields (e.g. Root Entity Name) hovering the item opens a\n * separate side popover with checkboxes — each check adds its own applied\n * filter and the main popover stays open so users can pick many.\n /\nexport function PropertyFilterCreator({\n fields,\n tokens,\n onTokensChange,\n label = 'Add filter',\n disabled,\n size,\n onStartTextFilter,\n hiddenFieldIds,\n}: PropertyFilterCreatorProps) {\n const visibleFields = useMemo(() => {\n if (!hiddenFieldIds \|\| hiddenFieldIds.length === 0) return fields;\n const hidden = new Set(hiddenFieldIds);\n return fields.filter(f => !hidden.has(f.id));\n }, [fields, hiddenFieldIds]);\n const [open, setOpen] = useState(false);\n const [fieldId, setFieldId] = useState<string \| undefined>();\n const [multiValue, setMultiValue] = useState<string[]>([]);\n const [error, setError] = useState<string \| undefined>();\n // Single source of truth for which pick-multi side panel is open. Opens only\n // via explicit click/keyboard press on the menu item — no hover/focus\n // auto-open (was too flicker-prone).\n const [openPickMultiFieldId, setOpenPickMultiFieldId] = useState<string \| undefined>();\n\n // When the user picks a text field we close this popover and hand off focus\n // to the newly-created pill's input — prevent Radix from returning focus to\n // the trigger button in that case.\n const skipCloseFocusRef = useRef(false);\n\n const togglePickMulti = useCallback((id: string) => {\n setOpenPickMultiFieldId(current => (current === id ? undefined : id));\n }, []);\n const closePickMulti = useCallback(() => setOpenPickMultiFieldId(undefined), []);\n\n useEffect(() => {\n if (!open) setOpenPickMultiFieldId(undefined);\n }, [open]);\n\n const selectedField = useMemo(() => visibleFields.find(f => f.id === fieldId), [visibleFields, fieldId]);\n // Only single-use kinds (text, multi-select) count as \"used\". `pick-multi`\n // allows multiple tokens with the same fieldId.\n const singleUseFieldIds = useMemo(() => {\n const ids = new Set<string>();\n for (const token of tokens) {\n const field = fields.find(f => f.id === token.fieldId);\n if (field && field.kind !== 'pick-multi') ids.add(token.fieldId);\n }\n return ids;\n }, [tokens, fields]);\n\n const reset = useCallback(() => {\n setFieldId(undefined);\n setMultiValue([]);\n setError(undefined);\n }, []);\n\n useEffect(() => {\n if (!open) reset();\n }, [open, reset]);\n\n /\n Replace whatever token exists for `fieldId` with the given value. Used by\n * both single-select (radio) and multi-select (checkbox) pick-multi panels.\n * An empty list means nothing is selected, which removes the token here —\n * unlike the applied pill, where the filter stays on in a neutral state.\n /\n const replacePickMultiToken = useCallback(\n (fieldId: string, value: string \| string[]) => {\n const existingIndex = tokens.findIndex(t => t.fieldId === fieldId);\n\n if (Array.isArray(value) && value.length === 0) {\n if (existingIndex === -1) return;\n onTokensChange(tokens.filter((_, i) => i !== existingIndex));\n return;\n }\n\n if (existingIndex === -1) {\n onTokensChange([...tokens, { fieldId, value }]);\n return;\n }\n\n const nextTokens = [...tokens];\n nextTokens[existingIndex] = { fieldId, value };\n onTokensChange(nextTokens);\n },\n [onTokensChange, tokens],\n );\n\n const commit = useCallback(() => {\n if (!selectedField) {\n setError('Choose a property first.');\n return;\n }\n if (singleUseFieldIds.has(selectedField.id)) {\n setError(`Remove the existing ${selectedField.label} filter before adding another.`);\n return;\n }\n if (multiValue.length === 0) {\n setError(`Choose at least one ${selectedField.label.toLowerCase()} value.`);\n return;\n }\n onTokensChange([...tokens, { fieldId: selectedField.id, value: multiValue }]);\n setOpen(false);\n }, [multiValue, onTokensChange, selectedField, singleUseFieldIds, tokens]);\n\n return (\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <Button size={size} disabled={disabled} icon={<ListFilterPlusIcon />}>\n {label}\n </Button>\n </PopoverTrigger>\n <PopoverContent\n align=\"start\"\n sideOffset={MENU_SIDE_OFFSET}\n className={cn('w-64', selectedField ? 'p-3' : 'p-1')}\n initialFocus={false}\n finalFocus={() => {\n if (skipCloseFocusRef.current) {\n skipCloseFocusRef.current = false;\n return false;\n }\n return true;\n }}\n >\n <div className={cn('grid', selectedField && 'gap-3')}>\n {selectedField && (\n <div className=\"flex items-center gap-2\">\n <button\n type=\"button\"\n aria-label=\"Back to properties\"\n className={cn(quietTextHover, controlStateColorTransition)}\n onClick={reset}\n >\n <ArrowLeftIcon className=\"size-4\" />\n </button>\n <FilterIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n <Txt as=\"span\" variant=\"caption\" tone=\"muted\">{`${selectedField.label} is`}</Txt>\n </div>\n )}\n\n {!selectedField && (\n <div\n role=\"menu\"\n className=\"max-h-[80dvh] overflow-auto\"\n onKeyDown={e => {\n if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') return;\n const buttons = Array.from(\n e.currentTarget.querySelectorAll<HTMLButtonElement>('[data-filter-item]:not([disabled])'),\n );\n if (buttons.length === 0) return;\n e.preventDefault();\n const active = document.activeElement as HTMLElement \| null;\n const current = buttons.findIndex(b => b === active);\n let next: number;\n if (e.key === 'Home') next = 0;\n else if (e.key === 'End') next = buttons.length - 1;\n else if (e.key === 'ArrowDown') next = current < 0 ? 0 : (current + 1) % buttons.length;\n else next = current <= 0 ? buttons.length - 1 : current - 1;\n buttons[next]?.focus();\n }}\n >\n <>\n {visibleFields.length > 0 ? (\n visibleFields.map(f => {\n const used = singleUseFieldIds.has(f.id);\n if (f.kind === 'pick-multi') {\n return (\n <PickMultiMenuItem\n key={f.id}\n field={f}\n tokens={tokens}\n onChange={replacePickMultiToken}\n open={openPickMultiFieldId === f.id}\n onToggle={togglePickMulti}\n onClose={closePickMulti}\n />\n );\n }\n return (\n <FilterMenuButton\n key={f.id}\n className={cn(menuItemButtonClass, 'group')}\n disabled={used}\n onClick={() => {\n setError(undefined);\n if (f.kind === 'text') {\n onTokensChange([...tokens, { fieldId: f.id, value: '' }]);\n onStartTextFilter?.(f.id);\n skipCloseFocusRef.current = true;\n setOpen(false);\n return;\n }\n setFieldId(f.id);\n }}\n >\n <span className=\"truncate\">{f.label}</span>\n {used ? (\n <span className=\"ml-auto text-muted-foreground\">In use</span>\n ) : (\n <span\n className={cn(\n menuItemTrailingIconClass,\n 'text-muted-foreground opacity-0 group-hover:opacity-100 group-focus:opacity-100',\n )}\n >\n <PlusIcon />\n </span>\n )}\n </FilterMenuButton>\n );\n })\n ) : (\n <div className={menuEmptyClass}>No matching property.</div>\n )}\n </>\n </div>\n )}\n\n {selectedField && (\n <Field invalid={Boolean(error)}>\n <Combobox\n multiple\n options={selectedField.options ?? []}\n value={multiValue}\n onValueChange={v => {\n setMultiValue(v);\n setError(undefined);\n }}\n placeholder={selectedField.placeholder ?? `Choose ${selectedField.label}`}\n searchPlaceholder={`Search ${selectedField.label.toLowerCase()}`}\n emptyText={selectedField.emptyText ?? 'No option found.'}\n size=\"md\"\n aria-label={selectedField.label}\n />\n <FieldError>{error}</FieldError>\n </Field>\n )}\n\n {selectedField && (\n <div className=\"flex items-center justify-end gap-2\">\n <Button icon={<X />} variant=\"ghost\" size=\"md\" onClick={() => setOpen(false)}>\n Cancel\n </Button>\n <Button icon={<ListFilterPlus />} size=\"md\" onClick={commit}>\n Add filter\n </Button>\n </div>\n )}\n </div>\n </PopoverContent>\n </Popover>\n );\n}\n\ntype PickMultiField = Extract<PropertyFilterField, { kind: 'pick-multi' }>;\n\ntype PickMultiMenuItemProps = {\n field: PickMultiField;\n tokens: PropertyFilterToken[];\n onChange: (fieldId: string, value: string \| string[]) => void;\n open: boolean;\n onToggle: (fieldId: string) => void;\n onClose: () => void;\n};\n\n/\n A property-picker menu item that opens a separate Radix popover (portaled to\n * the side) with a radio group (single-select) or checkbox list (multi-select,\n * `field.multi === true`). Open/close is driven by explicit click / keyboard\n * press; the panel only closes when the user clicks outside, presses Escape,\n * or clicks the row again to toggle it off.\n */\nfunction PickMultiMenuItem({ field, tokens, onChange, open, onToggle, onClose }: PickMultiMenuItemProps) {\n const contentRef = useRef<HTMLDivElement>(null);\n\n return (\n <Popover\n open={open}\n onOpenChange={next => {\n if (next) onToggle(field.id);\n else onClose();\n }}\n >\n <PopoverTrigger asChild>\n <FilterMenuButton\n className={menuItemButtonClass}\n onKeyDown={e => {\n if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;\n if (!open) onToggle(field.id);\n e.preventDefault();\n requestAnimationFrame(() => {\n const first = contentRef.current?.querySelector<HTMLElement>(\n 'input, button, [tabindex]:not([tabindex=\"-1\"])',\n );\n first?.focus();\n });\n }}\n >\n {open && <ChevronRightIcon className=\"text-muted-foreground\" />}\n <span className=\"truncate\">{field.label}</span>\n {!open && (\n <span className={cn(menuItemTrailingIconClass, 'text-muted-foreground')}>\n <ChevronRightIcon />\n </span>\n )}\n </FilterMenuButton>\n </PopoverTrigger>\n <PopoverContent\n ref={contentRef}\n side=\"right\"\n align=\"start\"\n sideOffset={MENU_SIDE_OFFSET}\n className=\"w-64 p-0\"\n initialFocus={false}\n onKeyDown={e => {\n if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') return;\n const items = Array.from(\n e.currentTarget.querySelectorAll<HTMLElement>('[data-pick-multi-item]:not([disabled])'),\n );\n if (items.length === 0) return;\n e.preventDefault();\n e.stopPropagation();\n const active = document.activeElement as HTMLElement \| null;\n const current = items.findIndex(el => el === active);\n let next: number;\n if (e.key === 'Home') next = 0;\n else if (e.key === 'End') next = items.length - 1;\n else if (e.key === 'ArrowDown') next = current < 0 ? 0 : (current + 1) % items.length;\n else next = current <= 0 ? items.length - 1 : current - 1;\n items[next]?.focus();\n }}\n data-pick-multi-panel\n >\n <PickMultiPanel field={field} tokens={tokens} onChange={onChange} />\n </PopoverContent>\n </Popover>\n );\n}\n"],"mappings":"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"}

package/dist/components/PropertyFilter.es.js CHANGED Viewed

@@ -1,13 +1,13 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
-import "../primitives/transitions.es.js";
-import { t as Button } from "../Button-CLXTbAY8.js";
+import { n as PickMultiPanel, r as PropertyFilterActions, t as PropertyFilterApplied } from "../property-filter-applied-BBVmWRsC.js";
+import { t as Button } from "../Button-Bi7aXd_G.js";
+import { t as Combobox } from "../combobox-lbSxWRMl.js";
+import { Field, FieldError } from "./Field.es.js";
+import { i as PopoverTrigger, n as Popover, r as PopoverContent } from "../popover-BpMi52Tb.js";
+import { t as Txt } from "../Txt-5efBsb2p.js";
 import { menuItemButtonClass, menuItemTrailingIconClass } from "../primitives/menu-item.es.js";
+import "../primitives/transitions.es.js";
 import "../primitives/typography.es.js";
-import { t as Txt } from "../Txt-BM6TVV_c.js";
-import { Field, FieldError } from "./Field.es.js";
-import { i as PopoverTrigger, n as Popover, r as PopoverContent } from "../popover-CzHvTPk2.js";
-import { t as Combobox } from "../combobox-D21no8t5.js";
-import { n as PickMultiPanel, r as PropertyFilterActions, t as PropertyFilterApplied } from "../property-filter-applied--U5EZdaA.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeftIcon, ChevronRightIcon, FilterIcon, ListFilterPlus, ListFilterPlusIcon, PlusIcon, X } from "lucide-react";
@@ -157,7 +157,7 @@ function PropertyFilterCreator({ fields, tokens, onTokensChange, label = "Add fi
 								as: "span",
 								variant: "caption",
 								tone: "muted",
-								children: `${selectedField.label} · is`
+								children: `${selectedField.label} is`
 							})
 						]
 					}),

package/dist/components/PropertyFilter.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PropertyFilter.es.js","names":["_Fragment"],"sources":["../../src/ds/components/PropertyFilter/property-filter-creator.tsx"],"sourcesContent":["import {\n ArrowLeftIcon,\n ChevronRightIcon,\n FilterIcon,\n ListFilterPlusIcon,\n PlusIcon,\n ListFilterPlus,\n X,\n} from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ButtonHTMLAttributes } from 'react';\nimport { PickMultiPanel } from './pick-multi-panel';\nimport type { PropertyFilterField, PropertyFilterToken } from './types';\nimport { Button } from '@/ds/components/Button/Button';\nimport type { ButtonProps } from '@/ds/components/Button/Button';\nimport { Combobox } from '@/ds/components/Combobox/combobox';\nimport { Field, FieldError } from '@/ds/components/Field';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover/popover';\nimport { Txt } from '@/ds/components/Txt';\nimport {\n MENU_SIDE_OFFSET,\n menuEmptyClass,\n menuItemButtonClass,\n menuItemTrailingIconClass,\n} from '@/ds/primitives/menu-item';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\n// Plain <button>s navigated with roving focus (not Base UI).\nconst FilterMenuButton = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>((props, ref) => (\n <button type=\"button\" role=\"menuitem\" data-filter-item=\"\" ref={ref} {...props} />\n));\nFilterMenuButton.displayName = 'FilterMenuButton';\n\nexport type PropertyFilterCreatorProps = {\n fields: PropertyFilterField[];\n tokens: PropertyFilterToken[];\n onTokensChange: (tokens: PropertyFilterToken[]) => void;\n label?: string;\n disabled?: boolean;\n /** Size passed through to the trigger Button. Defaults to 'md'. /\n size?: ButtonProps['size'];\n /\n Called when the user picks a text (id-style) field. Consumers are expected\n * to render a pending applied-filter pill with an active input so the user\n * can type the value inline instead of in this popover.\n /\n onStartTextFilter?: (fieldId: string) => void;\n /\n Field ids hidden from the Add Filter dropdown. Use to prevent users from\n * recreating a filter that an upstream context already owns (e.g. the agent\n * id when viewing the agent-scoped traces tab).\n /\n hiddenFieldIds?: readonly string[];\n};\n\n/\n Minimal Linear-style filter creator: a `+ Filter` button whose popover walks\n * the user through property → value → commit. For id-style text fields, the\n * picker closes immediately and the applied-filter pill owns the input. For\n * `pick-multi` fields (e.g. Root Entity Name) hovering the item opens a\n * separate side popover with checkboxes — each check adds its own applied\n * filter and the main popover stays open so users can pick many.\n /\nexport function PropertyFilterCreator({\n fields,\n tokens,\n onTokensChange,\n label = 'Add filter',\n disabled,\n size,\n onStartTextFilter,\n hiddenFieldIds,\n}: PropertyFilterCreatorProps) {\n const visibleFields = useMemo(() => {\n if (!hiddenFieldIds \|\| hiddenFieldIds.length === 0) return fields;\n const hidden = new Set(hiddenFieldIds);\n return fields.filter(f => !hidden.has(f.id));\n }, [fields, hiddenFieldIds]);\n const [open, setOpen] = useState(false);\n const [fieldId, setFieldId] = useState<string \| undefined>();\n const [multiValue, setMultiValue] = useState<string[]>([]);\n const [error, setError] = useState<string \| undefined>();\n // Single source of truth for which pick-multi side panel is open. Opens only\n // via explicit click/keyboard press on the menu item — no hover/focus\n // auto-open (was too flicker-prone).\n const [openPickMultiFieldId, setOpenPickMultiFieldId] = useState<string \| undefined>();\n\n // When the user picks a text field we close this popover and hand off focus\n // to the newly-created pill's input — prevent Radix from returning focus to\n // the trigger button in that case.\n const skipCloseFocusRef = useRef(false);\n\n const togglePickMulti = useCallback((id: string) => {\n setOpenPickMultiFieldId(current => (current === id ? undefined : id));\n }, []);\n const closePickMulti = useCallback(() => setOpenPickMultiFieldId(undefined), []);\n\n useEffect(() => {\n if (!open) setOpenPickMultiFieldId(undefined);\n }, [open]);\n\n const selectedField = useMemo(() => visibleFields.find(f => f.id === fieldId), [visibleFields, fieldId]);\n // Only single-use kinds (text, multi-select) count as \"used\". `pick-multi`\n // allows multiple tokens with the same fieldId.\n const singleUseFieldIds = useMemo(() => {\n const ids = new Set<string>();\n for (const token of tokens) {\n const field = fields.find(f => f.id === token.fieldId);\n if (field && field.kind !== 'pick-multi') ids.add(token.fieldId);\n }\n return ids;\n }, [tokens, fields]);\n\n const reset = useCallback(() => {\n setFieldId(undefined);\n setMultiValue([]);\n setError(undefined);\n }, []);\n\n useEffect(() => {\n if (!open) reset();\n }, [open, reset]);\n\n /\n Replace whatever token exists for `fieldId` with the given value. Used by\n * both single-select (radio) and multi-select (checkbox) pick-multi panels.\n * An empty list means nothing is selected, which removes the token here —\n * unlike the applied pill, where the filter stays on in a neutral state.\n /\n const replacePickMultiToken = useCallback(\n (fieldId: string, value: string \| string[]) => {\n const existingIndex = tokens.findIndex(t => t.fieldId === fieldId);\n\n if (Array.isArray(value) && value.length === 0) {\n if (existingIndex === -1) return;\n onTokensChange(tokens.filter((_, i) => i !== existingIndex));\n return;\n }\n\n if (existingIndex === -1) {\n onTokensChange([...tokens, { fieldId, value }]);\n return;\n }\n\n const nextTokens = [...tokens];\n nextTokens[existingIndex] = { fieldId, value };\n onTokensChange(nextTokens);\n },\n [onTokensChange, tokens],\n );\n\n const commit = useCallback(() => {\n if (!selectedField) {\n setError('Choose a property first.');\n return;\n }\n if (singleUseFieldIds.has(selectedField.id)) {\n setError(`Remove the existing ${selectedField.label} filter before adding another.`);\n return;\n }\n if (multiValue.length === 0) {\n setError(`Choose at least one ${selectedField.label.toLowerCase()} value.`);\n return;\n }\n onTokensChange([...tokens, { fieldId: selectedField.id, value: multiValue }]);\n setOpen(false);\n }, [multiValue, onTokensChange, selectedField, singleUseFieldIds, tokens]);\n\n return (\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <Button size={size} disabled={disabled} icon={<ListFilterPlusIcon />}>\n {label}\n </Button>\n </PopoverTrigger>\n <PopoverContent\n align=\"start\"\n sideOffset={MENU_SIDE_OFFSET}\n className={cn('w-64', selectedField ? 'p-3' : 'p-1')}\n initialFocus={false}\n finalFocus={() => {\n if (skipCloseFocusRef.current) {\n skipCloseFocusRef.current = false;\n return false;\n }\n return true;\n }}\n >\n <div className={cn('grid', selectedField && 'gap-3')}>\n {selectedField && (\n <div className=\"flex items-center gap-2\">\n <button\n type=\"button\"\n aria-label=\"Back to properties\"\n className={cn(quietTextHover, controlStateColorTransition)}\n onClick={reset}\n >\n <ArrowLeftIcon className=\"size-4\" />\n </button>\n <FilterIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n <Txt as=\"span\" variant=\"caption\" tone=\"muted\">{`${selectedField.label} · is`}</Txt>\n </div>\n )}\n\n {!selectedField && (\n <div\n role=\"menu\"\n className=\"max-h-[80dvh] overflow-auto\"\n onKeyDown={e => {\n if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') return;\n const buttons = Array.from(\n e.currentTarget.querySelectorAll<HTMLButtonElement>('[data-filter-item]:not([disabled])'),\n );\n if (buttons.length === 0) return;\n e.preventDefault();\n const active = document.activeElement as HTMLElement \| null;\n const current = buttons.findIndex(b => b === active);\n let next: number;\n if (e.key === 'Home') next = 0;\n else if (e.key === 'End') next = buttons.length - 1;\n else if (e.key === 'ArrowDown') next = current < 0 ? 0 : (current + 1) % buttons.length;\n else next = current <= 0 ? buttons.length - 1 : current - 1;\n buttons[next]?.focus();\n }}\n >\n <>\n {visibleFields.length > 0 ? (\n visibleFields.map(f => {\n const used = singleUseFieldIds.has(f.id);\n if (f.kind === 'pick-multi') {\n return (\n <PickMultiMenuItem\n key={f.id}\n field={f}\n tokens={tokens}\n onChange={replacePickMultiToken}\n open={openPickMultiFieldId === f.id}\n onToggle={togglePickMulti}\n onClose={closePickMulti}\n />\n );\n }\n return (\n <FilterMenuButton\n key={f.id}\n className={cn(menuItemButtonClass, 'group')}\n disabled={used}\n onClick={() => {\n setError(undefined);\n if (f.kind === 'text') {\n onTokensChange([...tokens, { fieldId: f.id, value: '' }]);\n onStartTextFilter?.(f.id);\n skipCloseFocusRef.current = true;\n setOpen(false);\n return;\n }\n setFieldId(f.id);\n }}\n >\n <span className=\"truncate\">{f.label}</span>\n {used ? (\n <span className=\"ml-auto text-muted-foreground\">In use</span>\n ) : (\n <span\n className={cn(\n menuItemTrailingIconClass,\n 'text-muted-foreground opacity-0 group-hover:opacity-100 group-focus:opacity-100',\n )}\n >\n <PlusIcon />\n </span>\n )}\n </FilterMenuButton>\n );\n })\n ) : (\n <div className={menuEmptyClass}>No matching property.</div>\n )}\n </>\n </div>\n )}\n\n {selectedField && (\n <Field invalid={Boolean(error)}>\n <Combobox\n multiple\n options={selectedField.options ?? []}\n value={multiValue}\n onValueChange={v => {\n setMultiValue(v);\n setError(undefined);\n }}\n placeholder={selectedField.placeholder ?? `Choose ${selectedField.label}`}\n searchPlaceholder={`Search ${selectedField.label.toLowerCase()}`}\n emptyText={selectedField.emptyText ?? 'No option found.'}\n size=\"md\"\n aria-label={selectedField.label}\n />\n <FieldError>{error}</FieldError>\n </Field>\n )}\n\n {selectedField && (\n <div className=\"flex items-center justify-end gap-2\">\n <Button icon={<X />} variant=\"ghost\" size=\"md\" onClick={() => setOpen(false)}>\n Cancel\n </Button>\n <Button icon={<ListFilterPlus />} size=\"md\" onClick={commit}>\n Add filter\n </Button>\n </div>\n )}\n </div>\n </PopoverContent>\n </Popover>\n );\n}\n\ntype PickMultiField = Extract<PropertyFilterField, { kind: 'pick-multi' }>;\n\ntype PickMultiMenuItemProps = {\n field: PickMultiField;\n tokens: PropertyFilterToken[];\n onChange: (fieldId: string, value: string \| string[]) => void;\n open: boolean;\n onToggle: (fieldId: string) => void;\n onClose: () => void;\n};\n\n/\n A property-picker menu item that opens a separate Radix popover (portaled to\n * the side) with a radio group (single-select) or checkbox list (multi-select,\n * `field.multi === true`). Open/close is driven by explicit click / keyboard\n * press; the panel only closes when the user clicks outside, presses Escape,\n * or clicks the row again to toggle it off.\n */\nfunction PickMultiMenuItem({ field, tokens, onChange, open, onToggle, onClose }: PickMultiMenuItemProps) {\n const contentRef = useRef<HTMLDivElement>(null);\n\n return (\n <Popover\n open={open}\n onOpenChange={next => {\n if (next) onToggle(field.id);\n else onClose();\n }}\n >\n <PopoverTrigger asChild>\n <FilterMenuButton\n className={menuItemButtonClass}\n onKeyDown={e => {\n if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;\n if (!open) onToggle(field.id);\n e.preventDefault();\n requestAnimationFrame(() => {\n const first = contentRef.current?.querySelector<HTMLElement>(\n 'input, button, [tabindex]:not([tabindex=\"-1\"])',\n );\n first?.focus();\n });\n }}\n >\n {open && <ChevronRightIcon className=\"text-muted-foreground\" />}\n <span className=\"truncate\">{field.label}</span>\n {!open && (\n <span className={cn(menuItemTrailingIconClass, 'text-muted-foreground')}>\n <ChevronRightIcon />\n </span>\n )}\n </FilterMenuButton>\n </PopoverTrigger>\n <PopoverContent\n ref={contentRef}\n side=\"right\"\n align=\"start\"\n sideOffset={MENU_SIDE_OFFSET}\n className=\"w-64 p-0\"\n initialFocus={false}\n onKeyDown={e => {\n if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') return;\n const items = Array.from(\n e.currentTarget.querySelectorAll<HTMLElement>('[data-pick-multi-item]:not([disabled])'),\n );\n if (items.length === 0) return;\n e.preventDefault();\n e.stopPropagation();\n const active = document.activeElement as HTMLElement \| null;\n const current = items.findIndex(el => el === active);\n let next: number;\n if (e.key === 'Home') next = 0;\n else if (e.key === 'End') next = items.length - 1;\n else if (e.key === 'ArrowDown') next = current < 0 ? 0 : (current + 1) % items.length;\n else next = current <= 0 ? items.length - 1 : current - 1;\n items[next]?.focus();\n }}\n data-pick-multi-panel\n >\n <PickMultiPanel field={field} tokens={tokens} onChange={onChange} />\n </PopoverContent>\n </Popover>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"PropertyFilter.es.js","names":["_Fragment"],"sources":["../../src/ds/components/PropertyFilter/property-filter-creator.tsx"],"sourcesContent":["import {\n ArrowLeftIcon,\n ChevronRightIcon,\n FilterIcon,\n ListFilterPlusIcon,\n PlusIcon,\n ListFilterPlus,\n X,\n} from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ButtonHTMLAttributes } from 'react';\nimport { PickMultiPanel } from './pick-multi-panel';\nimport type { PropertyFilterField, PropertyFilterToken } from './types';\nimport { Button } from '@/ds/components/Button/Button';\nimport type { ButtonProps } from '@/ds/components/Button/Button';\nimport { Combobox } from '@/ds/components/Combobox/combobox';\nimport { Field, FieldError } from '@/ds/components/Field';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover/popover';\nimport { Txt } from '@/ds/components/Txt';\nimport {\n MENU_SIDE_OFFSET,\n menuEmptyClass,\n menuItemButtonClass,\n menuItemTrailingIconClass,\n} from '@/ds/primitives/menu-item';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\n// Plain <button>s navigated with roving focus (not Base UI).\nconst FilterMenuButton = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>((props, ref) => (\n <button type=\"button\" role=\"menuitem\" data-filter-item=\"\" ref={ref} {...props} />\n));\nFilterMenuButton.displayName = 'FilterMenuButton';\n\nexport type PropertyFilterCreatorProps = {\n fields: PropertyFilterField[];\n tokens: PropertyFilterToken[];\n onTokensChange: (tokens: PropertyFilterToken[]) => void;\n label?: string;\n disabled?: boolean;\n /** Size passed through to the trigger Button. Defaults to 'md'. /\n size?: ButtonProps['size'];\n /\n Called when the user picks a text (id-style) field. Consumers are expected\n * to render a pending applied-filter pill with an active input so the user\n * can type the value inline instead of in this popover.\n /\n onStartTextFilter?: (fieldId: string) => void;\n /\n Field ids hidden from the Add Filter dropdown. Use to prevent users from\n * recreating a filter that an upstream context already owns (e.g. the agent\n * id when viewing the agent-scoped traces tab).\n /\n hiddenFieldIds?: readonly string[];\n};\n\n/\n Minimal Linear-style filter creator: a `+ Filter` button whose popover walks\n * the user through property → value → commit. For id-style text fields, the\n * picker closes immediately and the applied-filter pill owns the input. For\n * `pick-multi` fields (e.g. Root Entity Name) hovering the item opens a\n * separate side popover with checkboxes — each check adds its own applied\n * filter and the main popover stays open so users can pick many.\n /\nexport function PropertyFilterCreator({\n fields,\n tokens,\n onTokensChange,\n label = 'Add filter',\n disabled,\n size,\n onStartTextFilter,\n hiddenFieldIds,\n}: PropertyFilterCreatorProps) {\n const visibleFields = useMemo(() => {\n if (!hiddenFieldIds \|\| hiddenFieldIds.length === 0) return fields;\n const hidden = new Set(hiddenFieldIds);\n return fields.filter(f => !hidden.has(f.id));\n }, [fields, hiddenFieldIds]);\n const [open, setOpen] = useState(false);\n const [fieldId, setFieldId] = useState<string \| undefined>();\n const [multiValue, setMultiValue] = useState<string[]>([]);\n const [error, setError] = useState<string \| undefined>();\n // Single source of truth for which pick-multi side panel is open. Opens only\n // via explicit click/keyboard press on the menu item — no hover/focus\n // auto-open (was too flicker-prone).\n const [openPickMultiFieldId, setOpenPickMultiFieldId] = useState<string \| undefined>();\n\n // When the user picks a text field we close this popover and hand off focus\n // to the newly-created pill's input — prevent Radix from returning focus to\n // the trigger button in that case.\n const skipCloseFocusRef = useRef(false);\n\n const togglePickMulti = useCallback((id: string) => {\n setOpenPickMultiFieldId(current => (current === id ? undefined : id));\n }, []);\n const closePickMulti = useCallback(() => setOpenPickMultiFieldId(undefined), []);\n\n useEffect(() => {\n if (!open) setOpenPickMultiFieldId(undefined);\n }, [open]);\n\n const selectedField = useMemo(() => visibleFields.find(f => f.id === fieldId), [visibleFields, fieldId]);\n // Only single-use kinds (text, multi-select) count as \"used\". `pick-multi`\n // allows multiple tokens with the same fieldId.\n const singleUseFieldIds = useMemo(() => {\n const ids = new Set<string>();\n for (const token of tokens) {\n const field = fields.find(f => f.id === token.fieldId);\n if (field && field.kind !== 'pick-multi') ids.add(token.fieldId);\n }\n return ids;\n }, [tokens, fields]);\n\n const reset = useCallback(() => {\n setFieldId(undefined);\n setMultiValue([]);\n setError(undefined);\n }, []);\n\n useEffect(() => {\n if (!open) reset();\n }, [open, reset]);\n\n /\n Replace whatever token exists for `fieldId` with the given value. Used by\n * both single-select (radio) and multi-select (checkbox) pick-multi panels.\n * An empty list means nothing is selected, which removes the token here —\n * unlike the applied pill, where the filter stays on in a neutral state.\n /\n const replacePickMultiToken = useCallback(\n (fieldId: string, value: string \| string[]) => {\n const existingIndex = tokens.findIndex(t => t.fieldId === fieldId);\n\n if (Array.isArray(value) && value.length === 0) {\n if (existingIndex === -1) return;\n onTokensChange(tokens.filter((_, i) => i !== existingIndex));\n return;\n }\n\n if (existingIndex === -1) {\n onTokensChange([...tokens, { fieldId, value }]);\n return;\n }\n\n const nextTokens = [...tokens];\n nextTokens[existingIndex] = { fieldId, value };\n onTokensChange(nextTokens);\n },\n [onTokensChange, tokens],\n );\n\n const commit = useCallback(() => {\n if (!selectedField) {\n setError('Choose a property first.');\n return;\n }\n if (singleUseFieldIds.has(selectedField.id)) {\n setError(`Remove the existing ${selectedField.label} filter before adding another.`);\n return;\n }\n if (multiValue.length === 0) {\n setError(`Choose at least one ${selectedField.label.toLowerCase()} value.`);\n return;\n }\n onTokensChange([...tokens, { fieldId: selectedField.id, value: multiValue }]);\n setOpen(false);\n }, [multiValue, onTokensChange, selectedField, singleUseFieldIds, tokens]);\n\n return (\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <Button size={size} disabled={disabled} icon={<ListFilterPlusIcon />}>\n {label}\n </Button>\n </PopoverTrigger>\n <PopoverContent\n align=\"start\"\n sideOffset={MENU_SIDE_OFFSET}\n className={cn('w-64', selectedField ? 'p-3' : 'p-1')}\n initialFocus={false}\n finalFocus={() => {\n if (skipCloseFocusRef.current) {\n skipCloseFocusRef.current = false;\n return false;\n }\n return true;\n }}\n >\n <div className={cn('grid', selectedField && 'gap-3')}>\n {selectedField && (\n <div className=\"flex items-center gap-2\">\n <button\n type=\"button\"\n aria-label=\"Back to properties\"\n className={cn(quietTextHover, controlStateColorTransition)}\n onClick={reset}\n >\n <ArrowLeftIcon className=\"size-4\" />\n </button>\n <FilterIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n <Txt as=\"span\" variant=\"caption\" tone=\"muted\">{`${selectedField.label} is`}</Txt>\n </div>\n )}\n\n {!selectedField && (\n <div\n role=\"menu\"\n className=\"max-h-[80dvh] overflow-auto\"\n onKeyDown={e => {\n if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') return;\n const buttons = Array.from(\n e.currentTarget.querySelectorAll<HTMLButtonElement>('[data-filter-item]:not([disabled])'),\n );\n if (buttons.length === 0) return;\n e.preventDefault();\n const active = document.activeElement as HTMLElement \| null;\n const current = buttons.findIndex(b => b === active);\n let next: number;\n if (e.key === 'Home') next = 0;\n else if (e.key === 'End') next = buttons.length - 1;\n else if (e.key === 'ArrowDown') next = current < 0 ? 0 : (current + 1) % buttons.length;\n else next = current <= 0 ? buttons.length - 1 : current - 1;\n buttons[next]?.focus();\n }}\n >\n <>\n {visibleFields.length > 0 ? (\n visibleFields.map(f => {\n const used = singleUseFieldIds.has(f.id);\n if (f.kind === 'pick-multi') {\n return (\n <PickMultiMenuItem\n key={f.id}\n field={f}\n tokens={tokens}\n onChange={replacePickMultiToken}\n open={openPickMultiFieldId === f.id}\n onToggle={togglePickMulti}\n onClose={closePickMulti}\n />\n );\n }\n return (\n <FilterMenuButton\n key={f.id}\n className={cn(menuItemButtonClass, 'group')}\n disabled={used}\n onClick={() => {\n setError(undefined);\n if (f.kind === 'text') {\n onTokensChange([...tokens, { fieldId: f.id, value: '' }]);\n onStartTextFilter?.(f.id);\n skipCloseFocusRef.current = true;\n setOpen(false);\n return;\n }\n setFieldId(f.id);\n }}\n >\n <span className=\"truncate\">{f.label}</span>\n {used ? (\n <span className=\"ml-auto text-muted-foreground\">In use</span>\n ) : (\n <span\n className={cn(\n menuItemTrailingIconClass,\n 'text-muted-foreground opacity-0 group-hover:opacity-100 group-focus:opacity-100',\n )}\n >\n <PlusIcon />\n </span>\n )}\n </FilterMenuButton>\n );\n })\n ) : (\n <div className={menuEmptyClass}>No matching property.</div>\n )}\n </>\n </div>\n )}\n\n {selectedField && (\n <Field invalid={Boolean(error)}>\n <Combobox\n multiple\n options={selectedField.options ?? []}\n value={multiValue}\n onValueChange={v => {\n setMultiValue(v);\n setError(undefined);\n }}\n placeholder={selectedField.placeholder ?? `Choose ${selectedField.label}`}\n searchPlaceholder={`Search ${selectedField.label.toLowerCase()}`}\n emptyText={selectedField.emptyText ?? 'No option found.'}\n size=\"md\"\n aria-label={selectedField.label}\n />\n <FieldError>{error}</FieldError>\n </Field>\n )}\n\n {selectedField && (\n <div className=\"flex items-center justify-end gap-2\">\n <Button icon={<X />} variant=\"ghost\" size=\"md\" onClick={() => setOpen(false)}>\n Cancel\n </Button>\n <Button icon={<ListFilterPlus />} size=\"md\" onClick={commit}>\n Add filter\n </Button>\n </div>\n )}\n </div>\n </PopoverContent>\n </Popover>\n );\n}\n\ntype PickMultiField = Extract<PropertyFilterField, { kind: 'pick-multi' }>;\n\ntype PickMultiMenuItemProps = {\n field: PickMultiField;\n tokens: PropertyFilterToken[];\n onChange: (fieldId: string, value: string \| string[]) => void;\n open: boolean;\n onToggle: (fieldId: string) => void;\n onClose: () => void;\n};\n\n/\n A property-picker menu item that opens a separate Radix popover (portaled to\n * the side) with a radio group (single-select) or checkbox list (multi-select,\n * `field.multi === true`). Open/close is driven by explicit click / keyboard\n * press; the panel only closes when the user clicks outside, presses Escape,\n * or clicks the row again to toggle it off.\n */\nfunction PickMultiMenuItem({ field, tokens, onChange, open, onToggle, onClose }: PickMultiMenuItemProps) {\n const contentRef = useRef<HTMLDivElement>(null);\n\n return (\n <Popover\n open={open}\n onOpenChange={next => {\n if (next) onToggle(field.id);\n else onClose();\n }}\n >\n <PopoverTrigger asChild>\n <FilterMenuButton\n className={menuItemButtonClass}\n onKeyDown={e => {\n if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;\n if (!open) onToggle(field.id);\n e.preventDefault();\n requestAnimationFrame(() => {\n const first = contentRef.current?.querySelector<HTMLElement>(\n 'input, button, [tabindex]:not([tabindex=\"-1\"])',\n );\n first?.focus();\n });\n }}\n >\n {open && <ChevronRightIcon className=\"text-muted-foreground\" />}\n <span className=\"truncate\">{field.label}</span>\n {!open && (\n <span className={cn(menuItemTrailingIconClass, 'text-muted-foreground')}>\n <ChevronRightIcon />\n </span>\n )}\n </FilterMenuButton>\n </PopoverTrigger>\n <PopoverContent\n ref={contentRef}\n side=\"right\"\n align=\"start\"\n sideOffset={MENU_SIDE_OFFSET}\n className=\"w-64 p-0\"\n initialFocus={false}\n onKeyDown={e => {\n if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') return;\n const items = Array.from(\n e.currentTarget.querySelectorAll<HTMLElement>('[data-pick-multi-item]:not([disabled])'),\n );\n if (items.length === 0) return;\n e.preventDefault();\n e.stopPropagation();\n const active = document.activeElement as HTMLElement \| null;\n const current = items.findIndex(el => el === active);\n let next: number;\n if (e.key === 'Home') next = 0;\n else if (e.key === 'End') next = items.length - 1;\n else if (e.key === 'ArrowDown') next = current < 0 ? 0 : (current + 1) % items.length;\n else next = current <= 0 ? items.length - 1 : current - 1;\n items[next]?.focus();\n }}\n data-pick-multi-panel\n >\n <PickMultiPanel field={field} tokens={tokens} onChange={onChange} />\n </PopoverContent>\n </Popover>\n );\n}\n"],"mappings":"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"}

package/dist/components/RadioGroup.cjs.js CHANGED Viewed

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("../rolldown-runtime-CmQyd0Gu.cjs");
-const require_utils = require("../utils-uDc1ofX1.cjs");
 const require_field_control_aria = require("../field-control-aria-Dw0_ObOU.cjs");
 const require_primitives_selection_control = require("../primitives/selection-control.cjs.js");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/RadioGroup.es.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
 import { n as keepOwnAccessibleName } from "../field-control-aria-BaRSUUMR.js";
 import { selectionControlStyle } from "../primitives/selection-control.es.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { Radio } from "@base-ui/react/radio";

package/dist/components/RelativeTimestamp.cjs.js CHANGED Viewed

@@ -1,37 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Badge = require("../Badge-DqaMg7Gy.cjs");
+const require_tooltip = require("../tooltip-BsExuMO8.cjs");
+const require_primitives_transitions = require("../primitives/transitions.cjs.js");
+const require_hooks_use_clock = require("../hooks/use-clock.cjs.js");
 const require_utils = require("../utils-uDc1ofX1.cjs");
 const require_utils_date_format = require("../utils/date-format.cjs.js");
 const require_utils_relative_time = require("../utils/relative-time.cjs.js");
-const require_tooltip = require("../tooltip-BiRLT3Th.cjs");
-const require_primitives_transitions = require("../primitives/transitions.cjs.js");
-const require_Badge = require("../Badge-DZ6r6bcw.cjs");
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/components/RelativeTimestamp/relative-timestamp.tsx
-var listeners = /* @__PURE__ */ new Set();
-var ticker;
-var now = Date.now();
-function subscribe(listener) {
-	listeners.add(listener);
-	if (!ticker) {
-		now = Date.now();
-		ticker = setInterval(() => {
-			now = Date.now();
-			listeners.forEach((notify) => notify());
-		}, 1e3);
-	}
-	return () => {
-		listeners.delete(listener);
-		if (listeners.size === 0) {
-			clearInterval(ticker);
-			ticker = void 0;
-		}
-	};
-}
-function useNow() {
-	const read = () => ticker ? now : Date.now();
-	return (0, react.useSyncExternalStore)(subscribe, read, read);
-}
 var SINCE_UNITS = [
 	["day", 864e5],
 	["hour", 36e5],
@@ -62,13 +38,13 @@ function formatSince(date, at) {
 	return diff < 0 ? `${label} from now` : `${label} ago`;
 }
 function Relative({ date }) {
-	return (require_utils_relative_time.formatRelativeTime(date, { now: useNow() })?.split(/(\d+[smhd])/) ?? []).map((part, index) => index % 2 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	return (require_hooks_use_clock.useClock((now) => require_utils_relative_time.formatRelativeTime(date, { now }))?.split(/(\d+[smhd])/) ?? []).map((part, index) => index % 2 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "font-mono [font-size-adjust:cap-height_0.729]",
 		children: part
 	}, index) : part);
 }
 function Since({ date }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: formatSince(date, useNow()) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: require_hooks_use_clock.useClock((now) => formatSince(date, now)) });
 }
 function zoneName(date, timeZone) {
 	return new Intl.DateTimeFormat(void 0, {

package/dist/components/RelativeTimestamp.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RelativeTimestamp.cjs.js","names":["~~useSyncExternalStore~~","formatRelativeTime","_Fragment","toDate","Tooltip","TooltipTrigger","cn","focusRing","formatDate","TooltipContent","Badge"],"sources":["../../src/ds/components/RelativeTimestamp/relative-timestamp.tsx"],"sourcesContent":["import { ~~useSyncExternalStore } from 'react';\nimport {~~ Badge } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\nimport { formatDate, toDate } from '@/utils/date-format';\nimport type { DateInput } from '@/utils/date-format';\nimport { formatRelativeTime } from '@/utils/relative-time';\n\nexport interface RelativeTimestampProps {\n value: DateInput;\n label?: string;\n className?: string;\n}\n\nconst listeners = new Set<() => void>();\nlet ticker: ReturnType<typeof setInterval> \| undefined;\nlet now = Date.now();\n\nfunction subscribe(listener: () => void) {\n listeners.add(listener);\n if (!ticker) {\n now = Date.now();\n ticker = setInterval(() => {\n now = Date.now();\n listeners.forEach(notify => notify());\n }, 1000);\n }\n return () => {\n listeners.delete(listener);\n if (listeners.size === 0) {\n clearInterval(ticker);\n ticker = undefined;\n }\n };\n}\n\nfunction useNow() {\n const read = () => (ticker ? now : Date.now());\n return useSyncExternalStore(subscribe, read, read);\n}\n\nconst SINCE_UNITS = [\n ['day', 86_400_000],\n ['hour', 3_600_000],\n ['minute', 60_000],\n ['second', 1_000],\n] as const;\n\nfunction formatUnit(count: number, unit: (typeof SINCE_UNITS)[number][0]) {\n return new Intl.NumberFormat(undefined, { style: 'unit', unit, unitDisplay: 'long' }).format(count);\n}\n\nfunction formatSince(date: Date, at: number) {\n const diff = at - date.getTime();\n let rest = Math.abs(diff);\n const parts: string[] = [];\n for (const [unit, size] of SINCE_UNITS) {\n const count = Math.floor(rest / size);\n rest %= size;\n if (parts.length > 0) {\n if (count > 0) parts.push(formatUnit(count, unit));\n break;\n }\n if (count > 0 \|\| unit === 'second') parts.push(formatUnit(count, unit));\n }\n const label = parts.join(' ');\n return diff < 0 ? `${label} from now` : `${label} ago`;\n}\n\nfunction Relative({ date }: { date: Date }) {\n const parts = formatRelativeTime(date, { now: ~~useNow()~~ })?.split(/(\\d+[smhd])/) ?? [];\n return parts.map((part, index) =>\n index % 2 ? (\n <span key={index} className=\"font-mono [font-size-adjust:cap-height_0.729]\">\n {part}\n </span>\n ) : (\n part\n ),\n );\n}\n\nfunction Since({ date }: { date: Date }) {\n return <>{formatSince(date, ~~useNow(~~))}</>;\n}\n\nfunction zoneName(date: Date, timeZone?: string) {\n return new Intl.DateTimeFormat(undefined, { timeZone, timeZoneName: 'short' })\n .formatToParts(date)\n .find(part => part.type === 'timeZoneName')?.value;\n}\n\nfunction zoneRow(date: Date, timeZone?: string) {\n return {\n zone: zoneName(date, timeZone) ?? 'Local',\n day: new Intl.DateTimeFormat(undefined, { timeZone, month: 'short', day: 'numeric', year: 'numeric' }).format(date),\n time: new Intl.DateTimeFormat(undefined, {\n timeZone,\n hour: 'numeric',\n minute: '2-digit',\n second: '2-digit',\n }).format(date),\n };\n}\n\nexport function RelativeTimestamp({ value, label, className }: RelativeTimestampProps) {\n const date = toDate(value);\n if (!date) return null;\n\n const local = zoneRow(date);\n const rows = local.zone === 'UTC' ? [local] : [local, zoneRow(date, 'UTC')];\n\n return (\n <Tooltip>\n <TooltipTrigger\n render={\n <time\n dateTime={date.toISOString()}\n tabIndex={0}\n className={cn('rounded-sm whitespace-nowrap tabular-nums', focusRing, className)}\n />\n }\n >\n <span aria-hidden=\"true\">\n <Relative date={date} />\n </span>\n <span className=\"sr-only\">{[label, formatDate(date, 'date-time-seconds')].filter(Boolean).join(' ')}</span>\n </TooltipTrigger>\n <TooltipContent>\n <span className=\"text-muted-foreground\">\n {label ? `${label} ` : null}\n <Since date={date} />\n </span>\n <table className=\"mt-1.5 border-t border-border font-mono tabular-nums\">\n <tbody>\n {rows.map(row => (\n <tr key={row.zone}>\n <td className=\"pt-1.5 pr-3\">\n <Badge size=\"xs\">{row.zone}</Badge>\n </td>\n <td className=\"pt-1.5 pr-3\">{row.day}</td>\n <td className=\"pt-1.5 text-right\">{row.time}</td>\n </tr>\n ))}\n </tbody>\n </table>\n </TooltipContent>\n </Tooltip>\n );\n}\n"],"mappings":";;;;;;;;;;AAeA,IAAM,4BAAY,IAAI,IAAgB;AACtC,IAAI;AACJ,IAAI,MAAM,KAAK,IAAI;AAEnB,SAAS,UAAU,UAAsB;CACvC,UAAU,IAAI,QAAQ;CACtB,IAAI,CAAC,QAAQ;EACX,MAAM,KAAK,IAAI;EACf,SAAS,kBAAkB;GACzB,MAAM,KAAK,IAAI;GACf,UAAU,SAAQ,WAAU,OAAO,CAAC;EACtC,GAAG,GAAI;CACT;CACA,aAAa;EACX,UAAU,OAAO,QAAQ;EACzB,IAAI,UAAU,SAAS,GAAG;GACxB,cAAc~~,MAAM~~;~~GACpB,SAAS,KAAA;EACX;CACF;AACF;AAEA,SAAS,SAAS;CAChB,MAAM,aAAc,SAAS,MAAM,KAAK,IAAI;CAC5C,QAAA,GAAOA,MAAAA,qBAAAA,CAAqB,WAAW,MAAM,IAAI;AACnD;AAEA,IAAM,cAAc;~~CAClB,CAAC,OAAO,KAAU;CAClB,CAAC,QAAQ,IAAS;CAClB,CAAC,UAAU,GAAM;CACjB,CAAC,UAAU,GAAK;AAClB;AAEA,SAAS,WAAW,OAAe,MAAuC;CACxE,OAAO,IAAI,KAAK,aAAa,KAAA,GAAW;EAAE,OAAO;EAAQ;EAAM,aAAa;CAAO,CAAC,CAAC,CAAC,OAAO,KAAK;AACpG;AAEA,SAAS,YAAY,MAAY,IAAY;CAC3C,MAAM,OAAO,KAAK,KAAK,QAAQ;CAC/B,IAAI,OAAO,KAAK,IAAI,IAAI;CACxB,MAAM,QAAkB,CAAC;CACzB,KAAK,MAAM,CAAC,MAAM,SAAS,aAAa;EACtC,MAAM,QAAQ,KAAK,MAAM,OAAO,IAAI;EACpC,QAAQ;EACR,IAAI,MAAM,SAAS,GAAG;GACpB,IAAI,QAAQ,GAAG,MAAM,KAAK,WAAW,OAAO,IAAI,CAAC;GACjD;EACF;EACA,IAAI,QAAQ,KAAK,SAAS,UAAU,MAAM,KAAK,WAAW,OAAO,IAAI,CAAC;CACxE;CACA,MAAM,QAAQ,MAAM,KAAK,GAAG;CAC5B,OAAO,OAAO,IAAI,GAAG,MAAM,aAAa,GAAG,MAAM;AACnD;AAEA,SAAS,SAAS,EAAE,QAAwB;CAE1C,~~QADcC~~,4BAAAA,mBAAmB,MAAM,EAAE,~~KAAK~~,~~OAAO~~,~~EAAE,~~CAAC,CAAC,EAAE,MAAM,aAAa,KAAK,CAAC,EAAA,~~CACvE~~,KAAK,MAAM,UACtB,QAAQ,IACN,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAkB,WAAU;EACzB,UAAA;CACG,GAFK,KAEL,IAEN,IAEJ;AACF;AAEA,SAAS,MAAM,EAAE,QAAwB;CACvC,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAAC,kBAAAA,UAAA,EAAA,~~UAAG~~,YAAY,MAAM,~~OAAO~~,CAAC,EAAI,CAAA;~~AAC1C~~;AAEA,SAAS,SAAS,MAAY,UAAmB;CAC/C,OAAO,IAAI,KAAK,eAAe,KAAA,GAAW;EAAE;EAAU,cAAc;CAAQ,CAAC,CAAC,CAC3E,cAAc,IAAI,CAAC,CACnB,MAAK,SAAQ,KAAK,SAAS,cAAc,CAAC,EAAE;AACjD;AAEA,SAAS,QAAQ,MAAY,UAAmB;CAC9C,OAAO;EACL,MAAM,SAAS,MAAM,QAAQ,KAAK;EAClC,KAAK,IAAI,KAAK,eAAe,KAAA,GAAW;GAAE;GAAU,OAAO;GAAS,KAAK;GAAW,MAAM;EAAU,CAAC,CAAC,CAAC,OAAO,IAAI;EAClH,MAAM,IAAI,KAAK,eAAe,KAAA,GAAW;GACvC;GACA,MAAM;GACN,QAAQ;GACR,QAAQ;EACV,CAAC,CAAC,CAAC,OAAO,IAAI;CAChB;AACF;AAEA,SAAgB,kBAAkB,EAAE,OAAO,OAAO,aAAqC;CACrF,MAAM,~~OAAOC~~,0BAAAA,OAAO,KAAK;CACzB,IAAI,CAAC,MAAM,OAAO;CAElB,MAAM,QAAQ,QAAQ,IAAI;CAC1B,MAAM,OAAO,MAAM,SAAS,QAAQ,CAAC,KAAK,IAAI,CAAC,OAAO,QAAQ,MAAM,KAAK,CAAC;CAE1E,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,gBAAD;EACE,QACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,UAAU,KAAK,YAAY;GAC3B,UAAU;GACV,WAAWC,cAAAA,GAAG,6CAA6CC,+BAAAA,WAAW,SAAS;EAChF,CAAA;EANL,UAAA,CASE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,eAAY;GAChB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD,EAAgB,KAAO,CAAA;EACnB,CAAA,GACN,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAW,UAAA,CAAC,OAAOC,0BAAAA,WAAW,MAAM,mBAAmB,CAAC,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAAQ,CAAA,CAC5F;CAChB,CAAA,GAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,gBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACG,QAAQ,GAAG,MAAM,KAAK,MACvB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAa,KAAO,CAAA,CAChB;CACN,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;EAAO,WAAU;EACf,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD,EAAA,UACG,KAAK,KAAI,QACR,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD,EAAA,UAAA;GACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;IAAI,WAAU;IACZ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;KAAO,MAAK;KAAM,UAAA,IAAI;IAAY,CAAA;GAChC,CAAA;GACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;IAAI,WAAU;IAAe,UAAA,IAAI;GAAQ,CAAA;GACzC,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;IAAI,WAAU;IAAqB,UAAA,IAAI;GAAS,CAAA;EAC9C,EAAA,GANK,IAAI,IAMT,CACL,EACI,CAAA;CACF,CAAA,CACO,EAAA,CAAA,CACT,EAAA,CAAA;AAEb"}
1	+ {"version":3,"file":"RelativeTimestamp.cjs.js","names":["useClock","formatRelativeTime","_Fragment","toDate","Tooltip","TooltipTrigger","cn","focusRing","formatDate","TooltipContent","Badge"],"sources":["../../src/ds/components/RelativeTimestamp/relative-timestamp.tsx"],"sourcesContent":["import { Badge } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { useClock } from '@/hooks/use-clock';\nimport { cn } from '@/lib/utils';\nimport { formatDate, toDate } from '@/utils/date-format';\nimport type { DateInput } from '@/utils/date-format';\nimport { formatRelativeTime } from '@/utils/relative-time';\n\nexport interface RelativeTimestampProps {\n value: DateInput;\n label?: string;\n className?: string;\n}\n\nconst SINCE_UNITS = [\n ['day', 86_400_000],\n ['hour', 3_600_000],\n ['minute', 60_000],\n ['second', 1_000],\n] as const;\n\nfunction formatUnit(count: number, unit: (typeof SINCE_UNITS)[number][0]) {\n return new Intl.NumberFormat(undefined, { style: 'unit', unit, unitDisplay: 'long' }).format(count);\n}\n\nfunction formatSince(date: Date, at: number) {\n const diff = at - date.getTime();\n let rest = Math.abs(diff);\n const parts: string[] = [];\n for (const [unit, size] of SINCE_UNITS) {\n const count = Math.floor(rest / size);\n rest %= size;\n if (parts.length > 0) {\n if (count > 0) parts.push(formatUnit(count, unit));\n break;\n }\n if (count > 0 \|\| unit === 'second') parts.push(formatUnit(count, unit));\n }\n const label = parts.join(' ');\n return diff < 0 ? `${label} from now` : `${label} ago`;\n}\n\nfunction Relative({ date }: { date: Date }) {\n const parts = useClock(now => formatRelativeTime(date, { now }))?.split(/(\\d+[smhd])/) ?? [];\n return parts.map((part, index) =>\n index % 2 ? (\n <span key={index} className=\"font-mono [font-size-adjust:cap-height_0.729]\">\n {part}\n </span>\n ) : (\n part\n ),\n );\n}\n\nfunction Since({ date }: { date: Date }) {\n return <>{useClock(now => formatSince(date, now))}</>;\n}\n\nfunction zoneName(date: Date, timeZone?: string) {\n return new Intl.DateTimeFormat(undefined, { timeZone, timeZoneName: 'short' })\n .formatToParts(date)\n .find(part => part.type === 'timeZoneName')?.value;\n}\n\nfunction zoneRow(date: Date, timeZone?: string) {\n return {\n zone: zoneName(date, timeZone) ?? 'Local',\n day: new Intl.DateTimeFormat(undefined, { timeZone, month: 'short', day: 'numeric', year: 'numeric' }).format(date),\n time: new Intl.DateTimeFormat(undefined, {\n timeZone,\n hour: 'numeric',\n minute: '2-digit',\n second: '2-digit',\n }).format(date),\n };\n}\n\nexport function RelativeTimestamp({ value, label, className }: RelativeTimestampProps) {\n const date = toDate(value);\n if (!date) return null;\n\n const local = zoneRow(date);\n const rows = local.zone === 'UTC' ? [local] : [local, zoneRow(date, 'UTC')];\n\n return (\n <Tooltip>\n <TooltipTrigger\n render={\n <time\n dateTime={date.toISOString()}\n tabIndex={0}\n className={cn('rounded-sm whitespace-nowrap tabular-nums', focusRing, className)}\n />\n }\n >\n <span aria-hidden=\"true\">\n <Relative date={date} />\n </span>\n <span className=\"sr-only\">{[label, formatDate(date, 'date-time-seconds')].filter(Boolean).join(' ')}</span>\n </TooltipTrigger>\n <TooltipContent>\n <span className=\"text-muted-foreground\">\n {label ? `${label} ` : null}\n <Since date={date} />\n </span>\n <table className=\"mt-1.5 border-t border-border font-mono tabular-nums\">\n <tbody>\n {rows.map(row => (\n <tr key={row.zone}>\n <td className=\"pt-1.5 pr-3\">\n <Badge size=\"xs\">{row.zone}</Badge>\n </td>\n <td className=\"pt-1.5 pr-3\">{row.day}</td>\n <td className=\"pt-1.5 text-right\">{row.time}</td>\n </tr>\n ))}\n </tbody>\n </table>\n </TooltipContent>\n </Tooltip>\n );\n}\n"],"mappings":"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"}

package/dist/components/RelativeTimestamp.es.js CHANGED Viewed

@@ -1,36 +1,12 @@
+import { t as Badge } from "../Badge-C7NnqmMx.js";
+import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../tooltip-DJcze2VZ.js";
+import { focusRing } from "../primitives/transitions.es.js";
+import { useClock } from "../hooks/use-clock.es.js";
 import { t as cn } from "../utils-DQx8TpNT.js";
 import { formatDate, toDate } from "../utils/date-format.es.js";
 import { formatRelativeTime } from "../utils/relative-time.es.js";
-import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../tooltip-HzcLyGtV.js";
-import { focusRing } from "../primitives/transitions.es.js";
-import { t as Badge } from "../Badge-aVu5iGAF.js";
-import { useSyncExternalStore } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/ds/components/RelativeTimestamp/relative-timestamp.tsx
-var listeners = /* @__PURE__ */ new Set();
-var ticker;
-var now = Date.now();
-function subscribe(listener) {
-	listeners.add(listener);
-	if (!ticker) {
-		now = Date.now();
-		ticker = setInterval(() => {
-			now = Date.now();
-			listeners.forEach((notify) => notify());
-		}, 1e3);
-	}
-	return () => {
-		listeners.delete(listener);
-		if (listeners.size === 0) {
-			clearInterval(ticker);
-			ticker = void 0;
-		}
-	};
-}
-function useNow() {
-	const read = () => ticker ? now : Date.now();
-	return useSyncExternalStore(subscribe, read, read);
-}
 var SINCE_UNITS = [
 	["day", 864e5],
 	["hour", 36e5],
@@ -61,13 +37,13 @@ function formatSince(date, at) {
 	return diff < 0 ? `${label} from now` : `${label} ago`;
 }
 function Relative({ date }) {
-	return (formatRelativeTime(date, { now: useNow() })?.split(/(\d+[smhd])/) ?? []).map((part, index) => index % 2 ? /* @__PURE__ */ jsx("span", {
+	return (useClock((now) => formatRelativeTime(date, { now }))?.split(/(\d+[smhd])/) ?? []).map((part, index) => index % 2 ? /* @__PURE__ */ jsx("span", {
 		className: "font-mono [font-size-adjust:cap-height_0.729]",
 		children: part
 	}, index) : part);
 }
 function Since({ date }) {
-	return /* @__PURE__ */ jsx(Fragment$1, { children: formatSince(date, useNow()) });
+	return /* @__PURE__ */ jsx(Fragment, { children: useClock((now) => formatSince(date, now)) });
 }
 function zoneName(date, timeZone) {
 	return new Intl.DateTimeFormat(void 0, {

package/dist/components/RelativeTimestamp.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RelativeTimestamp.es.js","names":["_Fragment"],"sources":["../../src/ds/components/RelativeTimestamp/relative-timestamp.tsx"],"sourcesContent":["import { ~~useSyncExternalStore } from 'react';\nimport {~~ Badge } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\nimport { formatDate, toDate } from '@/utils/date-format';\nimport type { DateInput } from '@/utils/date-format';\nimport { formatRelativeTime } from '@/utils/relative-time';\n\nexport interface RelativeTimestampProps {\n value: DateInput;\n label?: string;\n className?: string;\n}\n\nconst listeners = new Set<() => void>();\nlet ticker: ReturnType<typeof setInterval> \| undefined;\nlet now = Date.now();\n\nfunction subscribe(listener: () => void) {\n listeners.add(listener);\n if (!ticker) {\n now = Date.now();\n ticker = setInterval(() => {\n now = Date.now();\n listeners.forEach(notify => notify());\n }, 1000);\n }\n return () => {\n listeners.delete(listener);\n if (listeners.size === 0) {\n clearInterval(ticker);\n ticker = undefined;\n }\n };\n}\n\nfunction useNow() {\n const read = () => (ticker ? now : Date.now());\n return useSyncExternalStore(subscribe, read, read);\n}\n\nconst SINCE_UNITS = [\n ['day', 86_400_000],\n ['hour', 3_600_000],\n ['minute', 60_000],\n ['second', 1_000],\n] as const;\n\nfunction formatUnit(count: number, unit: (typeof SINCE_UNITS)[number][0]) {\n return new Intl.NumberFormat(undefined, { style: 'unit', unit, unitDisplay: 'long' }).format(count);\n}\n\nfunction formatSince(date: Date, at: number) {\n const diff = at - date.getTime();\n let rest = Math.abs(diff);\n const parts: string[] = [];\n for (const [unit, size] of SINCE_UNITS) {\n const count = Math.floor(rest / size);\n rest %= size;\n if (parts.length > 0) {\n if (count > 0) parts.push(formatUnit(count, unit));\n break;\n }\n if (count > 0 \|\| unit === 'second') parts.push(formatUnit(count, unit));\n }\n const label = parts.join(' ');\n return diff < 0 ? `${label} from now` : `${label} ago`;\n}\n\nfunction Relative({ date }: { date: Date }) {\n const parts = formatRelativeTime(date, { now: ~~useNow()~~ })?.split(/(\\d+[smhd])/) ?? [];\n return parts.map((part, index) =>\n index % 2 ? (\n <span key={index} className=\"font-mono [font-size-adjust:cap-height_0.729]\">\n {part}\n </span>\n ) : (\n part\n ),\n );\n}\n\nfunction Since({ date }: { date: Date }) {\n return <>{formatSince(date, ~~useNow(~~))}</>;\n}\n\nfunction zoneName(date: Date, timeZone?: string) {\n return new Intl.DateTimeFormat(undefined, { timeZone, timeZoneName: 'short' })\n .formatToParts(date)\n .find(part => part.type === 'timeZoneName')?.value;\n}\n\nfunction zoneRow(date: Date, timeZone?: string) {\n return {\n zone: zoneName(date, timeZone) ?? 'Local',\n day: new Intl.DateTimeFormat(undefined, { timeZone, month: 'short', day: 'numeric', year: 'numeric' }).format(date),\n time: new Intl.DateTimeFormat(undefined, {\n timeZone,\n hour: 'numeric',\n minute: '2-digit',\n second: '2-digit',\n }).format(date),\n };\n}\n\nexport function RelativeTimestamp({ value, label, className }: RelativeTimestampProps) {\n const date = toDate(value);\n if (!date) return null;\n\n const local = zoneRow(date);\n const rows = local.zone === 'UTC' ? [local] : [local, zoneRow(date, 'UTC')];\n\n return (\n <Tooltip>\n <TooltipTrigger\n render={\n <time\n dateTime={date.toISOString()}\n tabIndex={0}\n className={cn('rounded-sm whitespace-nowrap tabular-nums', focusRing, className)}\n />\n }\n >\n <span aria-hidden=\"true\">\n <Relative date={date} />\n </span>\n <span className=\"sr-only\">{[label, formatDate(date, 'date-time-seconds')].filter(Boolean).join(' ')}</span>\n </TooltipTrigger>\n <TooltipContent>\n <span className=\"text-muted-foreground\">\n {label ? `${label} ` : null}\n <Since date={date} />\n </span>\n <table className=\"mt-1.5 border-t border-border font-mono tabular-nums\">\n <tbody>\n {rows.map(row => (\n <tr key={row.zone}>\n <td className=\"pt-1.5 pr-3\">\n <Badge size=\"xs\">{row.zone}</Badge>\n </td>\n <td className=\"pt-1.5 pr-3\">{row.day}</td>\n <td className=\"pt-1.5 text-right\">{row.time}</td>\n </tr>\n ))}\n </tbody>\n </table>\n </TooltipContent>\n </Tooltip>\n );\n}\n"],"mappings":";;;;;;;;;AAeA,IAAM,4BAAY,IAAI,IAAgB;AACtC,IAAI;AACJ,IAAI,MAAM,KAAK,IAAI;AAEnB,SAAS,UAAU,UAAsB;CACvC,UAAU,IAAI,QAAQ;CACtB,IAAI,CAAC,QAAQ;EACX,MAAM,KAAK,IAAI;EACf,SAAS,kBAAkB;GACzB,MAAM,KAAK,IAAI;GACf,UAAU,SAAQ,WAAU,OAAO,CAAC;EACtC,GAAG,GAAI;CACT;CACA,aAAa;EACX,UAAU,OAAO,QAAQ;EACzB,IAAI,UAAU,SAAS,GAAG;GACxB,cAAc~~,MAAM~~;~~GACpB,SAAS,KAAA;EACX;CACF;AACF;AAEA,SAAS,SAAS;CAChB,MAAM,aAAc,SAAS,MAAM,KAAK,IAAI;CAC5C,OAAO,qBAAqB,WAAW,MAAM,IAAI;AACnD;AAEA,IAAM,cAAc;~~CAClB,CAAC,OAAO,KAAU;CAClB,CAAC,QAAQ,IAAS;CAClB,CAAC,UAAU,GAAM;CACjB,CAAC,UAAU,GAAK;AAClB;AAEA,SAAS,WAAW,OAAe,MAAuC;CACxE,OAAO,IAAI,KAAK,aAAa,KAAA,GAAW;EAAE,OAAO;EAAQ;EAAM,aAAa;CAAO,CAAC,CAAC,CAAC,OAAO,KAAK;AACpG;AAEA,SAAS,YAAY,MAAY,IAAY;CAC3C,MAAM,OAAO,KAAK,KAAK,QAAQ;CAC/B,IAAI,OAAO,KAAK,IAAI,IAAI;CACxB,MAAM,QAAkB,CAAC;CACzB,KAAK,MAAM,CAAC,MAAM,SAAS,aAAa;EACtC,MAAM,QAAQ,KAAK,MAAM,OAAO,IAAI;EACpC,QAAQ;EACR,IAAI,MAAM,SAAS,GAAG;GACpB,IAAI,QAAQ,GAAG,MAAM,KAAK,WAAW,OAAO,IAAI,CAAC;GACjD;EACF;EACA,IAAI,QAAQ,KAAK,SAAS,UAAU,MAAM,KAAK,WAAW,OAAO,IAAI,CAAC;CACxE;CACA,MAAM,QAAQ,MAAM,KAAK,GAAG;CAC5B,OAAO,OAAO,IAAI,GAAG,MAAM,aAAa,GAAG,MAAM;AACnD;AAEA,SAAS,SAAS,EAAE,QAAwB;CAE1C,QADc,mBAAmB,MAAM,EAAE,~~KAAK~~,~~OAAO~~,~~EAAE,~~CAAC,CAAC,EAAE,MAAM,aAAa,KAAK,CAAC,EAAA,~~CACvE~~,KAAK,MAAM,UACtB,QAAQ,IACN,oBAAC,QAAD;EAAkB,WAAU;EACzB,UAAA;CACG,GAFK,KAEL,IAEN,IAEJ;AACF;AAEA,SAAS,MAAM,EAAE,QAAwB;CACvC,OAAO,oBAAAA,~~YAAA~~,EAAA,UAAG,YAAY,MAAM,~~OAAO~~,CAAC,EAAI,CAAA;~~AAC1C~~;AAEA,SAAS,SAAS,MAAY,UAAmB;CAC/C,OAAO,IAAI,KAAK,eAAe,KAAA,GAAW;EAAE;EAAU,cAAc;CAAQ,CAAC,CAAC,CAC3E,cAAc,IAAI,CAAC,CACnB,MAAK,SAAQ,KAAK,SAAS,cAAc,CAAC,EAAE;AACjD;AAEA,SAAS,QAAQ,MAAY,UAAmB;CAC9C,OAAO;EACL,MAAM,SAAS,MAAM,QAAQ,KAAK;EAClC,KAAK,IAAI,KAAK,eAAe,KAAA,GAAW;GAAE;GAAU,OAAO;GAAS,KAAK;GAAW,MAAM;EAAU,CAAC,CAAC,CAAC,OAAO,IAAI;EAClH,MAAM,IAAI,KAAK,eAAe,KAAA,GAAW;GACvC;GACA,MAAM;GACN,QAAQ;GACR,QAAQ;EACV,CAAC,CAAC,CAAC,OAAO,IAAI;CAChB;AACF;AAEA,SAAgB,kBAAkB,EAAE,OAAO,OAAO,aAAqC;CACrF,MAAM,OAAO,OAAO,KAAK;CACzB,IAAI,CAAC,MAAM,OAAO;CAElB,MAAM,QAAQ,QAAQ,IAAI;CAC1B,MAAM,OAAO,MAAM,SAAS,QAAQ,CAAC,KAAK,IAAI,CAAC,OAAO,QAAQ,MAAM,KAAK,CAAC;CAE1E,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,qBAAC,gBAAD;EACE,QACE,oBAAC,QAAD;GACE,UAAU,KAAK,YAAY;GAC3B,UAAU;GACV,WAAW,GAAG,6CAA6C,WAAW,SAAS;EAChF,CAAA;EANL,UAAA,CASE,oBAAC,QAAD;GAAM,eAAY;GAChB,UAAA,oBAAC,UAAD,EAAgB,KAAO,CAAA;EACnB,CAAA,GACN,oBAAC,QAAD;GAAM,WAAU;GAAW,UAAA,CAAC,OAAO,WAAW,MAAM,mBAAmB,CAAC,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAAQ,CAAA,CAC5F;CAChB,CAAA,GAAA,qBAAC,gBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACG,QAAQ,GAAG,MAAM,KAAK,MACvB,oBAAC,OAAD,EAAa,KAAO,CAAA,CAChB;CACN,CAAA,GAAA,oBAAC,SAAD;EAAO,WAAU;EACf,UAAA,oBAAC,SAAD,EAAA,UACG,KAAK,KAAI,QACR,qBAAC,MAAD,EAAA,UAAA;GACE,oBAAC,MAAD;IAAI,WAAU;IACZ,UAAA,oBAAC,OAAD;KAAO,MAAK;KAAM,UAAA,IAAI;IAAY,CAAA;GAChC,CAAA;GACJ,oBAAC,MAAD;IAAI,WAAU;IAAe,UAAA,IAAI;GAAQ,CAAA;GACzC,oBAAC,MAAD;IAAI,WAAU;IAAqB,UAAA,IAAI;GAAS,CAAA;EAC9C,EAAA,GANK,IAAI,IAMT,CACL,EACI,CAAA;CACF,CAAA,CACO,EAAA,CAAA,CACT,EAAA,CAAA;AAEb"}
1	+ {"version":3,"file":"RelativeTimestamp.es.js","names":["_Fragment"],"sources":["../../src/ds/components/RelativeTimestamp/relative-timestamp.tsx"],"sourcesContent":["import { Badge } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { useClock } from '@/hooks/use-clock';\nimport { cn } from '@/lib/utils';\nimport { formatDate, toDate } from '@/utils/date-format';\nimport type { DateInput } from '@/utils/date-format';\nimport { formatRelativeTime } from '@/utils/relative-time';\n\nexport interface RelativeTimestampProps {\n value: DateInput;\n label?: string;\n className?: string;\n}\n\nconst SINCE_UNITS = [\n ['day', 86_400_000],\n ['hour', 3_600_000],\n ['minute', 60_000],\n ['second', 1_000],\n] as const;\n\nfunction formatUnit(count: number, unit: (typeof SINCE_UNITS)[number][0]) {\n return new Intl.NumberFormat(undefined, { style: 'unit', unit, unitDisplay: 'long' }).format(count);\n}\n\nfunction formatSince(date: Date, at: number) {\n const diff = at - date.getTime();\n let rest = Math.abs(diff);\n const parts: string[] = [];\n for (const [unit, size] of SINCE_UNITS) {\n const count = Math.floor(rest / size);\n rest %= size;\n if (parts.length > 0) {\n if (count > 0) parts.push(formatUnit(count, unit));\n break;\n }\n if (count > 0 \|\| unit === 'second') parts.push(formatUnit(count, unit));\n }\n const label = parts.join(' ');\n return diff < 0 ? `${label} from now` : `${label} ago`;\n}\n\nfunction Relative({ date }: { date: Date }) {\n const parts = useClock(now => formatRelativeTime(date, { now }))?.split(/(\\d+[smhd])/) ?? [];\n return parts.map((part, index) =>\n index % 2 ? (\n <span key={index} className=\"font-mono [font-size-adjust:cap-height_0.729]\">\n {part}\n </span>\n ) : (\n part\n ),\n );\n}\n\nfunction Since({ date }: { date: Date }) {\n return <>{useClock(now => formatSince(date, now))}</>;\n}\n\nfunction zoneName(date: Date, timeZone?: string) {\n return new Intl.DateTimeFormat(undefined, { timeZone, timeZoneName: 'short' })\n .formatToParts(date)\n .find(part => part.type === 'timeZoneName')?.value;\n}\n\nfunction zoneRow(date: Date, timeZone?: string) {\n return {\n zone: zoneName(date, timeZone) ?? 'Local',\n day: new Intl.DateTimeFormat(undefined, { timeZone, month: 'short', day: 'numeric', year: 'numeric' }).format(date),\n time: new Intl.DateTimeFormat(undefined, {\n timeZone,\n hour: 'numeric',\n minute: '2-digit',\n second: '2-digit',\n }).format(date),\n };\n}\n\nexport function RelativeTimestamp({ value, label, className }: RelativeTimestampProps) {\n const date = toDate(value);\n if (!date) return null;\n\n const local = zoneRow(date);\n const rows = local.zone === 'UTC' ? [local] : [local, zoneRow(date, 'UTC')];\n\n return (\n <Tooltip>\n <TooltipTrigger\n render={\n <time\n dateTime={date.toISOString()}\n tabIndex={0}\n className={cn('rounded-sm whitespace-nowrap tabular-nums', focusRing, className)}\n />\n }\n >\n <span aria-hidden=\"true\">\n <Relative date={date} />\n </span>\n <span className=\"sr-only\">{[label, formatDate(date, 'date-time-seconds')].filter(Boolean).join(' ')}</span>\n </TooltipTrigger>\n <TooltipContent>\n <span className=\"text-muted-foreground\">\n {label ? `${label} ` : null}\n <Since date={date} />\n </span>\n <table className=\"mt-1.5 border-t border-border font-mono tabular-nums\">\n <tbody>\n {rows.map(row => (\n <tr key={row.zone}>\n <td className=\"pt-1.5 pr-3\">\n <Badge size=\"xs\">{row.zone}</Badge>\n </td>\n <td className=\"pt-1.5 pr-3\">{row.day}</td>\n <td className=\"pt-1.5 text-right\">{row.time}</td>\n </tr>\n ))}\n </tbody>\n </table>\n </TooltipContent>\n </Tooltip>\n );\n}\n"],"mappings":"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"}