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

package/dist/observability-saved-views-lLWk1w0g.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observability-saved-views-lLWk1w0g.js","names":["_Fragment"],"sources":["../src/ds/components/SavedViews/saved-view-picker.tsx","../src/domains/observability/saved-views/observability-saved-views.tsx"],"sourcesContent":["import { CopyIcon, EllipsisIcon, LayersIcon, LayersPlusIcon, TextCursorInputIcon, Trash2Icon } from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport type { FormEvent, ReactNode, RefObject } from 'react';\nimport { MAX_SAVED_VIEW_NAME_CHARS } from './saved-view-schema';\nimport type { SavedView } from './saved-view-schema';\nimport type { SavedViewsController } from './use-saved-views';\nimport { Button } from '@/ds/components/Button/Button';\nimport {\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxItemEnd,\n  ComboboxList,\n  ComboboxRoot,\n  ComboboxSearch,\n  ComboboxTrigger,\n} from '@/ds/components/Combobox/combobox-parts';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { Field, FieldError } from '@/ds/components/Field';\nimport { Input } from '@/ds/components/Input/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport type SavedViewPickerProps<TSettings> = {\n  views: SavedViewsController<TSettings>;\n  /** Names the page's unfiltered state, e.g. \"All traces\". */\n  defaultLabel: string;\n  newViewSettings: NoInfer<TSettings>;\n  /** Muted text after a view in the list, e.g. \"Shared\". */\n  describeView?: (view: SavedView<TSettings>) => ReactNode;\n  /** Whether a view can be renamed, deleted or overwritten. Others can still be applied and duplicated. */\n  canEdit?: (view: SavedView<TSettings>) => boolean;\n  /** Whether new views can be saved here (save as new view, duplicate). Defaults to true. */\n  canCreate?: boolean;\n  'aria-label'?: string;\n  className?: string;\n};\n\ntype PickerItem = { value: string; label: string; viewId: string | undefined };\n\nconst DEFAULT_ITEM_VALUE = '';\n\n/**\n * A compact saved-views control for a page header: a searchable view picker, the active view's\n * actions, and save / reset once the page differs from the view. Driven by the same controller\n * as `SavedViewTabs`.\n */\nexport function SavedViewPicker<TSettings>({\n  views,\n  defaultLabel,\n  newViewSettings,\n  describeView,\n  canEdit = () => true,\n  canCreate = true,\n  'aria-label': ariaLabel = 'Views',\n  className,\n}: SavedViewPickerProps<TSettings>) {\n  const anchorRef = useRef<HTMLDivElement>(null);\n  const [renaming, setRenaming] = useState(false);\n  const { draft, activeView } = views;\n  const creating = draft !== undefined && draft.viewId === undefined;\n  const activeUnsaved = !creating && draft?.viewId !== undefined && views.unsaved;\n  const editable = activeView !== undefined && canEdit(activeView);\n\n  const items: PickerItem[] = [\n    { value: DEFAULT_ITEM_VALUE, label: defaultLabel, viewId: undefined },\n    ...views.views.map(view => ({ value: view.id, label: view.name, viewId: view.id })),\n  ];\n  const selected = items.find(item => item.viewId === activeView?.id) ?? items[0];\n  const viewsById = new Map(views.views.map(view => [view.id, view]));\n\n  return (\n    <div\n      role=\"group\"\n      aria-label={ariaLabel}\n      className={cn('flex min-w-0 flex-wrap items-center justify-end gap-1.5', className)}\n    >\n      {views.error && !creating && !renaming && (\n        <Txt role=\"alert\" variant=\"caption\" className=\"min-w-0 truncate text-destructive-foreground\">\n          {views.error}\n        </Txt>\n      )}\n      {activeUnsaved && (\n        <div className=\"flex shrink-0 items-center gap-1.5\">\n          <Button type=\"button\" variant=\"ghost\" size=\"sm\" disabled={views.pending} onClick={views.discard}>\n            Reset\n          </Button>\n          {editable && (\n            <Button type=\"button\" variant=\"default\" size=\"sm\" disabled={views.pending} onClick={views.save}>\n              Save changes\n            </Button>\n          )}\n        </div>\n      )}\n      <div ref={anchorRef} className=\"flex min-w-0 items-center gap-0.5\">\n        <ComboboxRoot\n          items={items}\n          value={selected}\n          onValueChange={(item: PickerItem | null) => {\n            if (item) views.select(item.viewId);\n          }}\n          isItemEqualToValue={(item: PickerItem, value: PickerItem) => item.value === value.value}\n          autoHighlight\n        >\n          <ComboboxTrigger\n            size=\"sm\"\n            icon={<LayersIcon />}\n            aria-label={`View: ${selected?.label}${activeUnsaved ? ', unsaved changes' : ''}`}\n            className=\"max-w-60\"\n          >\n            {selected?.label}\n            {activeUnsaved && (\n              <span className=\"ml-1.5 inline-block size-1.5 rounded-full bg-warning-indicator align-middle\" />\n            )}\n          </ComboboxTrigger>\n          <ComboboxContent align=\"end\">\n            <ComboboxSearch placeholder=\"Search views\" />\n            <ComboboxEmpty>No views found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item: PickerItem) => {\n                const view = item.viewId ? viewsById.get(item.viewId) : undefined;\n                return (\n                  <ComboboxItem key={item.value} value={item}>\n                    <span className=\"truncate\">{item.label}</span>\n                    {view && describeView && <ComboboxItemEnd>{describeView(view)}</ComboboxItemEnd>}\n                  </ComboboxItem>\n                );\n              }}\n            </ComboboxList>\n          </ComboboxContent>\n        </ComboboxRoot>\n        {activeView && !creating && (editable || canCreate) && (\n          <DropdownMenu>\n            <DropdownMenu.Trigger variant=\"ghost\" size=\"icon-sm\" tooltip=\"View actions\" className=\"shrink-0\">\n              <EllipsisIcon />\n            </DropdownMenu.Trigger>\n            <DropdownMenu.Content align=\"end\">\n              {editable && (\n                <DropdownMenu.Item onClick={() => setRenaming(true)}>\n                  <TextCursorInputIcon aria-hidden />\n                  Rename\n                </DropdownMenu.Item>\n              )}\n              {canCreate && (\n                <DropdownMenu.Item onClick={() => views.duplicate(activeView.id)}>\n                  <CopyIcon aria-hidden />\n                  Duplicate\n                </DropdownMenu.Item>\n              )}\n              {editable && (\n                <>\n                  <DropdownMenu.Separator />\n                  <DropdownMenu.Item variant=\"destructive\" onClick={() => views.remove(activeView.id)}>\n                    <Trash2Icon aria-hidden />\n                    Delete view\n                  </DropdownMenu.Item>\n                </>\n              )}\n            </DropdownMenu.Content>\n          </DropdownMenu>\n        )}\n      </div>\n      {canCreate && (\n        <Popover\n          open={creating}\n          onOpenChange={open => {\n            if (open) views.create(newViewSettings);\n            else views.discard();\n          }}\n        >\n          <PopoverTrigger variant=\"ghost\" size=\"icon-sm\" tooltip=\"Save as new view\" className=\"shrink-0\">\n            <LayersPlusIcon />\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"w-72\">\n            {creating && (\n              <ViewNameForm\n                title=\"Save as new view\"\n                initialName={draft.name}\n                submitLabel=\"Save view\"\n                error={views.error}\n                pending={views.pending}\n                onNameChange={name => views.change({ name })}\n                onSubmit={() => views.save()}\n                onCancel={views.discard}\n              />\n            )}\n          </PopoverContent>\n        </Popover>\n      )}\n      {activeView && (\n        <RenamePopover\n          open={renaming}\n          anchorRef={anchorRef}\n          name={activeView.name}\n          error={views.error}\n          pending={views.pending}\n          onClose={() => setRenaming(false)}\n          onRename={name => views.rename(activeView.id, name)}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction RenamePopover({\n  open,\n  anchorRef,\n  name,\n  error,\n  pending,\n  onClose,\n  onRename,\n}: {\n  open: boolean;\n  anchorRef: RefObject<HTMLDivElement | null>;\n  name: string;\n  error: string | undefined;\n  pending: boolean | undefined;\n  onClose: () => void;\n  onRename: (name: string) => boolean | Promise<boolean>;\n}) {\n  // The name that last failed to save: its error shows until the user types something else.\n  const [failedName, setFailedName] = useState<string>();\n  const [typedName, setTypedName] = useState(name);\n  const close = () => {\n    setFailedName(undefined);\n    setTypedName(name);\n    onClose();\n  };\n  return (\n    <Popover open={open} onOpenChange={next => !next && close()}>\n      <PopoverContent anchor={anchorRef} align=\"end\" className=\"w-72\">\n        {open && (\n          <ViewNameForm\n            title=\"Rename view\"\n            initialName={name}\n            submitLabel=\"Rename\"\n            error={failedName !== undefined && failedName === typedName ? error : undefined}\n            pending={pending}\n            onNameChange={setTypedName}\n            onSubmit={async next => {\n              if (await onRename(next)) close();\n              else setFailedName(next);\n            }}\n            onCancel={close}\n          />\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nfunction ViewNameForm({\n  title,\n  initialName,\n  submitLabel,\n  error,\n  pending,\n  onNameChange,\n  onSubmit,\n  onCancel,\n}: {\n  title: string;\n  initialName: string;\n  submitLabel: string;\n  error?: string;\n  pending?: boolean;\n  onNameChange?: (name: string) => void;\n  onSubmit: (name: string) => void | Promise<void>;\n  onCancel: () => void;\n}) {\n  const [name, setName] = useState(initialName);\n  const submit = (event: FormEvent) => {\n    event.preventDefault();\n    if (name.trim()) void onSubmit(name);\n  };\n  return (\n    <form className=\"flex flex-col gap-3\" onSubmit={submit}>\n      <Txt as=\"h2\" variant=\"label\">\n        {title}\n      </Txt>\n      <Field invalid={error !== undefined}>\n        <Input\n          aria-label=\"View name\"\n          size=\"sm\"\n          autoFocus\n          onFocus={event => event.currentTarget.select()}\n          maxLength={MAX_SAVED_VIEW_NAME_CHARS}\n          value={name}\n          onChange={event => {\n            setName(event.target.value);\n            onNameChange?.(event.target.value);\n          }}\n        />\n        <FieldError>{error}</FieldError>\n      </Field>\n      <div className=\"flex justify-end gap-1.5\">\n        <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button type=\"submit\" variant=\"default\" size=\"sm\" disabled={pending || !name.trim()}>\n          {submitLabel}\n        </Button>\n      </div>\n    </form>\n  );\n}\n","import type { SavedViewPage } from '@mastra/core/storage';\nimport { createPortal } from 'react-dom';\nimport { useSavedViewsSource } from './saved-views-source';\nimport type { SavedViewsContextValue } from './saved-views-source';\nimport { useHostedSavedViews } from './use-hosted-saved-views';\nimport type { SavedViewColumnsControl } from './use-hosted-saved-views';\nimport { useObservabilityHeaderSlot } from '@/domains/observability/components/observability-header-slot';\nimport { SavedViewPicker } from '@/ds/components/SavedViews/saved-view-picker';\nimport type { SetURLSearchParamsLike } from '@/lib/sort/use-url-sort';\nimport { cn } from '@/lib/utils';\n\nconst DEFAULT_LABELS: Record<SavedViewPage, string> = {\n  traces: 'All traces',\n  spans: 'All spans',\n  threads: 'All threads',\n  logs: 'All logs',\n};\n\nexport type ObservabilitySavedViewsProps = {\n  page: SavedViewPage;\n  searchParams: URLSearchParams;\n  setSearchParams: SetURLSearchParamsLike;\n  /** The page's column picker (traces, spans, threads), so views save and restore columns. */\n  columns?: SavedViewColumnsControl;\n  /**\n   * The range the page shows when the URL names none, when the host's differs from the page's own\n   * (the same value passed to `useObservabilityListFilters`).\n   */\n  defaultDatePreset?: string;\n  className?: string;\n};\n\n/**\n * The saved views of an observability page: a searchable view picker with save and reset actions.\n * Inside the shared traces / spans / threads header it moves into that header's row. Renders nothing\n * unless a `SavedViewsProvider` above it supplies where views are stored.\n */\nexport function ObservabilitySavedViews(props: ObservabilitySavedViewsProps) {\n  const context = useSavedViewsSource();\n  if (!context) return null;\n  return <HostedSavedViewsBar {...props} {...context} />;\n}\n\nfunction HostedSavedViewsBar({\n  page,\n  searchParams,\n  setSearchParams,\n  columns,\n  defaultDatePreset,\n  className,\n  source,\n  queryKeyScope,\n  canEdit,\n  canCreate = true,\n}: ObservabilitySavedViewsProps & SavedViewsContextValue) {\n  const headerSlot = useObservabilityHeaderSlot();\n  const views = useHostedSavedViews({\n    page,\n    source,\n    queryKeyScope,\n    canEdit,\n    canCreate,\n    searchParams,\n    setSearchParams,\n    columns,\n    defaultDatePreset,\n  });\n\n  const picker = (\n    <SavedViewPicker\n      views={views}\n      defaultLabel={DEFAULT_LABELS[page]}\n      aria-label=\"Saved views\"\n      newViewSettings={{ state: { schemaVersion: 1, page, filters: [] } }}\n      describeView={view => (view.settings.record?.scope === 'org' ? 'Shared' : undefined)}\n      canEdit={view => !canEdit || !view.settings.record || canEdit(view.settings.record)}\n      canCreate={canCreate}\n      className={className}\n    />\n  );\n  return headerSlot ? createPortal(picker, headerSlot) : picker;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAyCA,IAAM,qBAAqB;;;;;;AAO3B,SAAgB,gBAA2B,EACzC,OACA,cACA,iBACA,cACA,gBAAgB,MAChB,YAAY,MACZ,cAAc,YAAY,SAC1B,aACkC;CAClC,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,EAAE,OAAO,eAAe;CAC9B,MAAM,WAAW,UAAU,KAAA,KAAa,MAAM,WAAW,KAAA;CACzD,MAAM,gBAAgB,CAAC,YAAY,OAAO,WAAW,KAAA,KAAa,MAAM;CACxE,MAAM,WAAW,eAAe,KAAA,KAAa,QAAQ,UAAU;CAE/D,MAAM,QAAsB,CAC1B;EAAE,OAAO;EAAoB,OAAO;EAAc,QAAQ,KAAA;CAAU,GACpE,GAAG,MAAM,MAAM,KAAI,UAAS;EAAE,OAAO,KAAK;EAAI,OAAO,KAAK;EAAM,QAAQ,KAAK;CAAG,EAAE,CACpF;CACA,MAAM,WAAW,MAAM,MAAK,SAAQ,KAAK,WAAW,YAAY,EAAE,KAAK,MAAM;CAC7E,MAAM,YAAY,IAAI,IAAI,MAAM,MAAM,KAAI,SAAQ,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;CAElE,OACE,qBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,WAAW,GAAG,2DAA2D,SAAS;EAHpF,UAAA;GAKG,MAAM,SAAS,CAAC,YAAY,CAAC,YAC5B,oBAAC,KAAD;IAAK,MAAK;IAAQ,SAAQ;IAAU,WAAU;IAC3C,UAAA,MAAM;GACJ,CAAA;GAEN,iBACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD;KAAQ,MAAK;KAAS,SAAQ;KAAQ,MAAK;KAAK,UAAU,MAAM;KAAS,SAAS,MAAM;KAAS,UAAA;IAEzF,CAAA,GACP,YACC,oBAAC,QAAD;KAAQ,MAAK;KAAS,SAAQ;KAAU,MAAK;KAAK,UAAU,MAAM;KAAS,SAAS,MAAM;KAAM,UAAA;IAExF,CAAA,CAEP;;GAEP,qBAAC,OAAD;IAAK,KAAK;IAAW,WAAU;IAA/B,UAAA,CACE,qBAAC,cAAD;KACS;KACP,OAAO;KACP,gBAAgB,SAA4B;MAC1C,IAAI,MAAM,MAAM,OAAO,KAAK,MAAM;KACpC;KACA,qBAAqB,MAAkB,UAAsB,KAAK,UAAU,MAAM;KAClF,eAAA;KAPF,UAAA,CASE,qBAAC,iBAAD;MACE,MAAK;MACL,MAAM,oBAAC,YAAD,CAAa,CAAA;MACnB,cAAY,SAAS,UAAU,QAAQ,gBAAgB,sBAAsB;MAC7E,WAAU;MAJZ,UAAA,CAMG,UAAU,OACV,iBACC,oBAAC,QAAD,EAAM,WAAU,8EAA+E,CAAA,CAElF;KACjB,CAAA,GAAA,qBAAC,iBAAD;MAAiB,OAAM;MAAvB,UAAA;OACE,oBAAC,gBAAD,EAAgB,aAAY,eAAgB,CAAA;OAC5C,oBAAC,eAAD,EAAA,UAAe,kBAA8B,CAAA;OAC7C,oBAAC,cAAD,EAAA,WACI,SAAqB;QACrB,MAAM,OAAO,KAAK,SAAS,UAAU,IAAI,KAAK,MAAM,IAAI,KAAA;QACxD,OACE,qBAAC,cAAD;SAA+B,OAAO;SAAtC,UAAA,CACE,oBAAC,QAAD;UAAM,WAAU;UAAY,UAAA,KAAK;SAAY,CAAA,GAC5C,QAAQ,gBAAgB,oBAAC,iBAAD,EAAA,UAAkB,aAAa,IAAI,EAAmB,CAAA,CACnE;QAHK,GAAA,KAAK,KAGV;OAElB,EACY,CAAA;MACC;KACL,CAAA,CAAA;IACb,CAAA,GAAA,cAAc,CAAC,aAAa,YAAY,cACvC,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,aAAa,SAAd;KAAsB,SAAQ;KAAQ,MAAK;KAAU,SAAQ;KAAe,WAAU;KACpF,UAAA,oBAAC,cAAD,CAAe,CAAA;IACK,CAAA,GACtB,qBAAC,aAAa,SAAd;KAAsB,OAAM;KAA5B,UAAA;MACG,YACC,qBAAC,aAAa,MAAd;OAAmB,eAAe,YAAY,IAAI;OAAlD,UAAA,CACE,oBAAC,qBAAD,EAAqB,eAAA,KAAa,CAAA,GAAC,QAElB;;MAEpB,aACC,qBAAC,aAAa,MAAd;OAAmB,eAAe,MAAM,UAAU,WAAW,EAAE;OAA/D,UAAA,CACE,oBAAC,UAAD,EAAU,eAAA,KAAa,CAAA,GAAC,WAEP;;MAEpB,YACC,qBAAAA,YAAA,EAAA,UAAA,CACE,oBAAC,aAAa,WAAd,CAAyB,CAAA,GACzB,qBAAC,aAAa,MAAd;OAAmB,SAAQ;OAAc,eAAe,MAAM,OAAO,WAAW,EAAE;OAAlF,UAAA,CACE,oBAAC,YAAD,EAAY,eAAA,KAAa,CAAA,GAAC,aAET;MACnB,CAAA,CAAA,EAAA,CAAA;KAEgB;IACV,CAAA,CAAA,EAAA,CAAA,CAEb;;GACJ,aACC,qBAAC,SAAD;IACE,MAAM;IACN,eAAc,SAAQ;KACpB,IAAI,MAAM,MAAM,OAAO,eAAe;UACjC,MAAM,QAAQ;IACrB;IALF,UAAA,CAOE,oBAAC,gBAAD;KAAgB,SAAQ;KAAQ,MAAK;KAAU,SAAQ;KAAmB,WAAU;KAClF,UAAA,oBAAC,gBAAD,CAAiB,CAAA;IACH,CAAA,GAChB,oBAAC,gBAAD;KAAgB,OAAM;KAAM,WAAU;KACnC,UAAA,YACC,oBAAC,cAAD;MACE,OAAM;MACN,aAAa,MAAM;MACnB,aAAY;MACZ,OAAO,MAAM;MACb,SAAS,MAAM;MACf,eAAc,SAAQ,MAAM,OAAO,EAAE,KAAK,CAAC;MAC3C,gBAAgB,MAAM,KAAK;MAC3B,UAAU,MAAM;KACjB,CAAA;IAEW,CAAA,CACT;;GAEV,cACC,oBAAC,eAAD;IACE,MAAM;IACK;IACX,MAAM,WAAW;IACjB,OAAO,MAAM;IACb,SAAS,MAAM;IACf,eAAe,YAAY,KAAK;IAChC,WAAU,SAAQ,MAAM,OAAO,WAAW,IAAI,IAAI;GACnD,CAAA;EAEA;;AAET;AAEA,SAAS,cAAc,EACrB,MACA,WACA,MACA,OACA,SACA,SACA,YASC;CAED,MAAM,CAAC,YAAY,iBAAiB,SAAiB;CACrD,MAAM,CAAC,WAAW,gBAAgB,SAAS,IAAI;CAC/C,MAAM,cAAc;EAClB,cAAc,KAAA,CAAS;EACvB,aAAa,IAAI;EACjB,QAAQ;CACV;CACA,OACE,oBAAC,SAAD;EAAe;EAAM,eAAc,SAAQ,CAAC,QAAQ,MAAM;EACxD,UAAA,oBAAC,gBAAD;GAAgB,QAAQ;GAAW,OAAM;GAAM,WAAU;GACtD,UAAA,QACC,oBAAC,cAAD;IACE,OAAM;IACN,aAAa;IACb,aAAY;IACZ,OAAO,eAAe,KAAA,KAAa,eAAe,YAAY,QAAQ,KAAA;IAC7D;IACT,cAAc;IACd,UAAU,OAAM,SAAQ;KACtB,IAAI,MAAM,SAAS,IAAI,GAAG,MAAM;UAC3B,cAAc,IAAI;IACzB;IACA,UAAU;GACX,CAAA;EAEW,CAAA;CACT,CAAA;AAEb;AAEA,SAAS,aAAa,EACpB,OACA,aACA,aACA,OACA,SACA,cACA,UACA,YAUC;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,WAAW;CAC5C,MAAM,UAAU,UAAqB;EACnC,MAAM,eAAe;EACrB,IAAI,KAAK,KAAK,GAAG,SAAc,IAAI;CACrC;CACA,OACE,qBAAC,QAAD;EAAM,WAAU;EAAsB,UAAU;EAAhD,UAAA;GACE,oBAAC,KAAD;IAAK,IAAG;IAAK,SAAQ;IAClB,UAAA;GACE,CAAA;GACL,qBAAC,OAAD;IAAO,SAAS,UAAU,KAAA;IAA1B,UAAA,CACE,oBAAC,OAAD;KACE,cAAW;KACX,MAAK;KACL,WAAA;KACA,UAAS,UAAS,MAAM,cAAc,OAAO;KAC7C,WAAA;KACA,OAAO;KACP,WAAU,UAAS;MACjB,QAAQ,MAAM,OAAO,KAAK;MAC1B,eAAe,MAAM,OAAO,KAAK;KACnC;IACD,CAAA,GACD,oBAAC,YAAD,EAAA,UAAa,MAAkB,CAAA,CAC1B;;GACP,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD;KAAQ,MAAK;KAAS,SAAQ;KAAQ,MAAK;KAAK,SAAS;KAAU,UAAA;IAE3D,CAAA,GACR,oBAAC,QAAD;KAAQ,MAAK;KAAS,SAAQ;KAAU,MAAK;KAAK,UAAU,WAAW,CAAC,KAAK,KAAK;KAC/E,UAAA;IACK,CAAA,CACL;;EACD;;AAEV;;ACxSA,IAAM,iBAAgD;CACpD,QAAQ;CACR,OAAO;CACP,SAAS;CACT,MAAM;AACR;;;;;;AAqBA,SAAgB,wBAAwB,OAAqC;CAC3E,MAAM,UAAU,oBAAoB;CACpC,IAAI,CAAC,SAAS,OAAO;CACrB,OAAO,oBAAC,qBAAD;EAAqB,GAAI;EAAO,GAAI;CAAU,CAAA;AACvD;AAEA,SAAS,oBAAoB,EAC3B,MACA,cACA,iBACA,SACA,mBACA,WACA,QACA,eACA,SACA,YAAY,QAC4C;CACxD,MAAM,aAAa,2BAA2B;CAC9C,MAAM,QAAQ,oBAAoB;EAChC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,SACJ,oBAAC,iBAAD;EACS;EACP,cAAc,eAAe;EAC7B,cAAW;EACX,iBAAiB,EAAE,OAAO;GAAE,eAAe;GAAG;GAAM,SAAS,CAAC;EAAE,EAAE;EAClE,eAAc,SAAS,KAAK,SAAS,QAAQ,UAAU,QAAQ,WAAW,KAAA;EAC1E,UAAS,SAAQ,CAAC,WAAW,CAAC,KAAK,SAAS,UAAU,QAAQ,KAAK,SAAS,MAAM;EACvE;EACA;CACZ,CAAA;CAEH,OAAO,aAAa,aAAa,QAAQ,UAAU,IAAI;AACzD"}

package/dist/page-header-Maytcmgh.js

@@ -0,0 +1,120 @@
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { t as Txt } from "./Txt-5efBsb2p.js";
+import { Children, isValidElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import './page-header.css';// src/ds/new/layout/page-header/page-header-action.tsx
+function PageHeaderAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "page-header-action",
+		className: cn("ml-auto flex min-h-control-lg shrink-0 items-center self-start", className),
+		...props
+	});
+}
+// src/ds/new/layout/page-header/page-header-description.tsx
+function PageHeaderDescription({ children, className, isLoading, ...props }) {
+	return /* @__PURE__ */ jsx(Txt, {
+		variant: "caption",
+		tone: "muted",
+		"data-slot": "page-header-description",
+		className: cn("flex max-w-140 flex-wrap gap-x-4 gap-y-1 text-pretty", isLoading && "w-160 max-w-4/5 animate-pulse rounded-md bg-muted", className),
+		...props,
+		children: isLoading ? /* @__PURE__ */ jsx(Fragment$1, { children: "\xA0" }) : children
+	});
+}
+// src/ds/new/layout/page-header/page-header-eyebrow.tsx
+function PageHeaderEyebrow({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "page-header-eyebrow",
+		...props,
+		className: cn("text-caption text-muted-foreground", "flex min-w-0 items-center", "*:inline-flex *:items-center *:gap-1 *:rounded-sm *:transition-colors *:hover:text-foreground", className)
+	});
+}
+// src/ds/new/layout/page-header/page-header-icon.tsx
+function PageHeaderIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "page-header-icon",
+		className: cn("flex min-h-control-lg items-center self-start text-muted-foreground", className),
+		...props
+	});
+}
+// src/ds/new/layout/page-header/page-header-meta.tsx
+function PageHeaderMeta({ beside = false, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "page-header-meta",
+		"data-placement": beside ? "beside" : "below",
+		...props,
+		className: cn("text-meta text-muted-foreground", "flex min-w-0 flex-wrap items-center gap-2", beside && "min-h-6 shrink-0", className)
+	});
+}
+// src/ds/new/layout/page-header/page-header-title.tsx
+function PageHeaderTitle({ children, className, isLoading, ...props }) {
+	return /* @__PURE__ */ jsx(Txt, {
+		as: "h1",
+		variant: "heading",
+		tone: "ink",
+		"data-slot": "page-header-title",
+		className: cn("flex min-w-0 items-center gap-2", isLoading && "w-60 max-w-1/2 animate-pulse rounded-md bg-fill", className),
+		...props,
+		children: isLoading ? /* @__PURE__ */ jsx(Fragment$1, { children: "\xA0" }) : children
+	});
+}
+// src/ds/new/layout/page-header/page-header-root.tsx
+function isSlot(child, type) {
+	return isValidElement(child) && child.type === type;
+}
+function isBesideMeta(child) {
+	return isValidElement(child) && child.type === PageHeaderMeta && Boolean(child.props.beside);
+}
+function groupSlots(items) {
+	const eyebrows = items.filter((child) => isSlot(child, PageHeaderEyebrow));
+	const icons = items.filter((child) => isSlot(child, PageHeaderIcon));
+	const headline = [...items.filter((child) => isSlot(child, PageHeaderTitle)), ...items.filter(isBesideMeta)];
+	const actions = items.filter((child) => isSlot(child, PageHeaderAction));
+	const placed = [
+		...eyebrows,
+		...icons,
+		...headline,
+		...actions
+	];
+	return {
+		eyebrows,
+		icons,
+		headline,
+		below: items.filter((child) => !placed.includes(child)),
+		actions
+	};
+}
+function PageHeaderRoot({ children, className, spacing = "default", ...props }) {
+	const { eyebrows, icons, headline, below, actions } = groupSlots(Children.toArray(children));
+	return /* @__PURE__ */ jsxs("header", {
+		className: cn("relative flex w-full flex-col", className, spacing === "breathing" && "pt-10"),
+		"data-page-header-spacing": spacing === "breathing" ? spacing : void 0,
+		...props,
+		children: [eyebrows, /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-start gap-3",
+			children: [
+				icons,
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-1",
+					children: [headline.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: "flex min-w-0 items-start gap-3 py-1",
+						children: headline
+					}), below]
+				}),
+				actions
+			]
+		})]
+	});
+}
+// src/ds/new/layout/page-header/page-header.tsx
+var PageHeader = Object.assign(PageHeaderRoot, {
+	Eyebrow: PageHeaderEyebrow,
+	Icon: PageHeaderIcon,
+	Title: PageHeaderTitle,
+	Meta: PageHeaderMeta,
+	Description: PageHeaderDescription,
+	Action: PageHeaderAction
+});
+export { PageHeader as t };
+
+//# sourceMappingURL=page-header-Maytcmgh.js.map

package/dist/page-header-Maytcmgh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-Maytcmgh.js","names":["_Fragment","_Fragment"],"sources":["../src/ds/new/layout/page-header/page-header-action.tsx","../src/ds/new/layout/page-header/page-header-description.tsx","../src/ds/new/layout/page-header/page-header-eyebrow.tsx","../src/ds/new/layout/page-header/page-header-icon.tsx","../src/ds/new/layout/page-header/page-header-meta.tsx","../src/ds/new/layout/page-header/page-header-title.tsx","../src/ds/new/layout/page-header/page-header-root.tsx","../src/ds/new/layout/page-header/page-header.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderActionProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderAction({ className, ...props }: PageHeaderActionProps) {\n  return (\n    <div\n      data-slot=\"page-header-action\"\n      className={cn('ml-auto flex min-h-control-lg shrink-0 items-center self-start', className)}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderDescriptionProps extends ComponentPropsWithoutRef<'p'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderDescription({ children, className, isLoading, ...props }: PageHeaderDescriptionProps) {\n  return (\n    <Txt\n      variant=\"caption\"\n      tone=\"muted\"\n      data-slot=\"page-header-description\"\n      className={cn(\n        'flex max-w-140 flex-wrap gap-x-4 gap-y-1 text-pretty',\n        isLoading && 'w-160 max-w-4/5 animate-pulse rounded-md bg-muted',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </Txt>\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderEyebrowProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderEyebrow({ className, ...props }: PageHeaderEyebrowProps) {\n  return (\n    <div\n      data-slot=\"page-header-eyebrow\"\n      {...props}\n      className={cn(\n        'text-caption text-muted-foreground',\n        'flex min-w-0 items-center',\n        '*:inline-flex *:items-center *:gap-1 *:rounded-sm *:transition-colors *:hover:text-foreground',\n        className,\n      )}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderIconProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderIcon({ className, ...props }: PageHeaderIconProps) {\n  return (\n    <div\n      data-slot=\"page-header-icon\"\n      className={cn('flex min-h-control-lg items-center self-start text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderMetaProps extends ComponentPropsWithoutRef<'div'> {\n  beside?: boolean;\n}\n\nexport function PageHeaderMeta({ beside = false, className, ...props }: PageHeaderMetaProps) {\n  return (\n    <div\n      data-slot=\"page-header-meta\"\n      data-placement={beside ? 'beside' : 'below'}\n      {...props}\n      className={cn(\n        'text-meta text-muted-foreground',\n        'flex min-w-0 flex-wrap items-center gap-2',\n        beside && 'min-h-6 shrink-0',\n        className,\n      )}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderTitleProps extends ComponentPropsWithoutRef<'h1'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderTitle({ children, className, isLoading, ...props }: PageHeaderTitleProps) {\n  return (\n    <Txt\n      as=\"h1\"\n      variant=\"heading\"\n      tone=\"ink\"\n      data-slot=\"page-header-title\"\n      className={cn(\n        'flex min-w-0 items-center gap-2',\n        isLoading && 'w-60 max-w-1/2 animate-pulse rounded-md bg-fill',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </Txt>\n  );\n}\n","import { Children, isValidElement } from 'react';\nimport type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\nimport { PageHeaderAction } from './page-header-action';\nimport { PageHeaderEyebrow } from './page-header-eyebrow';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderMeta } from './page-header-meta';\nimport type { PageHeaderMetaProps } from './page-header-meta';\nimport { PageHeaderTitle } from './page-header-title';\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderRootProps = ComponentPropsWithoutRef<'header'> & {\n  spacing?: 'default' | 'breathing';\n};\n\nfunction isSlot(child: ReactNode, type: ElementType) {\n  return isValidElement(child) && child.type === type;\n}\n\nfunction isBesideMeta(child: ReactNode) {\n  return isValidElement<PageHeaderMetaProps>(child) && child.type === PageHeaderMeta && Boolean(child.props.beside);\n}\n\nfunction groupSlots(items: ReactNode[]) {\n  const eyebrows = items.filter(child => isSlot(child, PageHeaderEyebrow));\n  const icons = items.filter(child => isSlot(child, PageHeaderIcon));\n  const headline = [...items.filter(child => isSlot(child, PageHeaderTitle)), ...items.filter(isBesideMeta)];\n  // Actions sit outside the title column so their height never affects title/meta/description alignment.\n  const actions = items.filter(child => isSlot(child, PageHeaderAction));\n  const placed = [...eyebrows, ...icons, ...headline, ...actions];\n  const below = items.filter(child => !placed.includes(child));\n  return { eyebrows, icons, headline, below, actions };\n}\n\nexport function PageHeaderRoot({ children, className, spacing = 'default', ...props }: PageHeaderRootProps) {\n  const items = Children.toArray(children);\n  const { eyebrows, icons, headline, below, actions } = groupSlots(items);\n\n  return (\n    <header\n      className={cn('relative flex w-full flex-col', className, spacing === 'breathing' && 'pt-10')}\n      data-page-header-spacing={spacing === 'breathing' ? spacing : undefined}\n      {...props}\n    >\n      {eyebrows}\n      <div className=\"flex w-full items-start gap-3\">\n        {icons}\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n          {headline.length > 0 && <div className=\"flex min-w-0 items-start gap-3 py-1\">{headline}</div>}\n          {below}\n        </div>\n        {actions}\n      </div>\n    </header>\n  );\n}\n","import './page-header.css';\n\nimport { PageHeaderAction } from './page-header-action';\nimport { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderEyebrow } from './page-header-eyebrow';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderMeta } from './page-header-meta';\nimport { PageHeaderRoot } from './page-header-root';\nimport { PageHeaderTitle } from './page-header-title';\n\nexport type { PageHeaderActionProps } from './page-header-action';\nexport type { PageHeaderDescriptionProps } from './page-header-description';\nexport type { PageHeaderEyebrowProps } from './page-header-eyebrow';\nexport type { PageHeaderIconProps } from './page-header-icon';\nexport type { PageHeaderMetaProps } from './page-header-meta';\nexport type { PageHeaderRootProps } from './page-header-root';\nexport type { PageHeaderTitleProps } from './page-header-title';\n\nexport const PageHeader = Object.assign(PageHeaderRoot, {\n  Eyebrow: PageHeaderEyebrow,\n  Icon: PageHeaderIcon,\n  Title: PageHeaderTitle,\n  Meta: PageHeaderMeta,\n  Description: PageHeaderDescription,\n  Action: PageHeaderAction,\n});\n"],"mappings":";;;;;AAMA,SAAgB,iBAAiB,EAAE,WAAW,GAAG,SAAgC;CAC/E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kEAAkE,SAAS;EACzF,GAAI;CACL,CAAA;AAEL;;ACLA,SAAgB,sBAAsB,EAAE,UAAU,WAAW,WAAW,GAAG,SAAqC;CAC9G,OACE,oBAAC,KAAD;EACE,SAAQ;EACR,MAAK;EACL,aAAU;EACV,WAAW,GACT,wDACA,aAAa,qDACb,SACF;EACA,GAAI;EAEH,UAAA,YAAY,oBAAAA,YAAA,EAAA,UAAE,OAAQ,CAAA,IAAI;CACxB,CAAA;AAET;;ACnBA,SAAgB,kBAAkB,EAAE,WAAW,GAAG,SAAiC;CACjF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,GACT,sCACA,6BACA,iGACA,SACF;CACD,CAAA;AAEL;;ACbA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA8B;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uEAAuE,SAAS;EAC9F,GAAI;CACL,CAAA;AAEL;;ACNA,SAAgB,eAAe,EAAE,SAAS,OAAO,WAAW,GAAG,SAA8B;CAC3F,OACE,oBAAC,OAAD;EACE,aAAU;EACV,kBAAgB,SAAS,WAAW;EACpC,GAAI;EACJ,WAAW,GACT,mCACA,6CACA,UAAU,oBACV,SACF;CACD,CAAA;AAEL;;ACbA,SAAgB,gBAAgB,EAAE,UAAU,WAAW,WAAW,GAAG,SAA+B;CAClG,OACE,oBAAC,KAAD;EACE,IAAG;EACH,SAAQ;EACR,MAAK;EACL,aAAU;EACV,WAAW,GACT,mCACA,aAAa,mDACb,SACF;EACA,GAAI;EAEH,UAAA,YAAY,oBAAAC,YAAA,EAAA,UAAE,OAAQ,CAAA,IAAI;CACxB,CAAA;AAET;;ACXA,SAAS,OAAO,OAAkB,MAAmB;CACnD,OAAO,eAAe,KAAK,KAAK,MAAM,SAAS;AACjD;AAEA,SAAS,aAAa,OAAkB;CACtC,OAAO,eAAoC,KAAK,KAAK,MAAM,SAAS,kBAAkB,QAAQ,MAAM,MAAM,MAAM;AAClH;AAEA,SAAS,WAAW,OAAoB;CACtC,MAAM,WAAW,MAAM,QAAO,UAAS,OAAO,OAAO,iBAAiB,CAAC;CACvE,MAAM,QAAQ,MAAM,QAAO,UAAS,OAAO,OAAO,cAAc,CAAC;CACjE,MAAM,WAAW,CAAC,GAAG,MAAM,QAAO,UAAS,OAAO,OAAO,eAAe,CAAC,GAAG,GAAG,MAAM,OAAO,YAAY,CAAC;CAEzG,MAAM,UAAU,MAAM,QAAO,UAAS,OAAO,OAAO,gBAAgB,CAAC;CACrE,MAAM,SAAS;EAAC,GAAG;EAAU,GAAG;EAAO,GAAG;EAAU,GAAG;CAAO;CAE9D,OAAO;EAAE;EAAU;EAAO;EAAU,OADtB,MAAM,QAAO,UAAS,CAAC,OAAO,SAAS,KAAK,CACtB;EAAO;CAAQ;AACrD;AAEA,SAAgB,eAAe,EAAE,UAAU,WAAW,UAAU,WAAW,GAAG,SAA8B;CAE1G,MAAM,EAAE,UAAU,OAAO,UAAU,OAAO,YAAY,WADxC,SAAS,QAAQ,QACkC,CAAK;CAEtE,OACE,qBAAC,UAAD;EACE,WAAW,GAAG,iCAAiC,WAAW,YAAY,eAAe,OAAO;EAC5F,4BAA0B,YAAY,cAAc,UAAU,KAAA;EAC9D,GAAI;EAHN,UAAA,CAKG,UACD,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACG;IACD,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,SAAS,SAAS,KAAK,oBAAC,OAAD;MAAK,WAAU;MAAuC,UAAA;KAAc,CAAA,GAC3F,KACE;;IACJ;GACE;EACC,CAAA,CAAA;;AAEZ;;ACrCA,IAAa,aAAa,OAAO,OAAO,gBAAgB;CACtD,SAAS;CACT,MAAM;CACN,OAAO;CACP,MAAM;CACN,aAAa;CACb,QAAQ;AACV,CAAC"}

package/dist/page-header-pZCts_WC.cjs

@@ -0,0 +1,125 @@
+require('./page-header.css');const require_utils = require("./utils-uDc1ofX1.cjs");
+const require_Txt = require("./Txt-_00wWxTd.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/ds/new/layout/page-header/page-header-action.tsx
+function PageHeaderAction({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "page-header-action",
+		className: require_utils.cn("ml-auto flex min-h-control-lg shrink-0 items-center self-start", className),
+		...props
+	});
+}
+// src/ds/new/layout/page-header/page-header-description.tsx
+function PageHeaderDescription({ children, className, isLoading, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+		variant: "caption",
+		tone: "muted",
+		"data-slot": "page-header-description",
+		className: require_utils.cn("flex max-w-140 flex-wrap gap-x-4 gap-y-1 text-pretty", isLoading && "w-160 max-w-4/5 animate-pulse rounded-md bg-muted", className),
+		...props,
+		children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: "\xA0" }) : children
+	});
+}
+// src/ds/new/layout/page-header/page-header-eyebrow.tsx
+function PageHeaderEyebrow({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "page-header-eyebrow",
+		...props,
+		className: require_utils.cn("text-caption text-muted-foreground", "flex min-w-0 items-center", "*:inline-flex *:items-center *:gap-1 *:rounded-sm *:transition-colors *:hover:text-foreground", className)
+	});
+}
+// src/ds/new/layout/page-header/page-header-icon.tsx
+function PageHeaderIcon({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "page-header-icon",
+		className: require_utils.cn("flex min-h-control-lg items-center self-start text-muted-foreground", className),
+		...props
+	});
+}
+// src/ds/new/layout/page-header/page-header-meta.tsx
+function PageHeaderMeta({ beside = false, className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "page-header-meta",
+		"data-placement": beside ? "beside" : "below",
+		...props,
+		className: require_utils.cn("text-meta text-muted-foreground", "flex min-w-0 flex-wrap items-center gap-2", beside && "min-h-6 shrink-0", className)
+	});
+}
+// src/ds/new/layout/page-header/page-header-title.tsx
+function PageHeaderTitle({ children, className, isLoading, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+		as: "h1",
+		variant: "heading",
+		tone: "ink",
+		"data-slot": "page-header-title",
+		className: require_utils.cn("flex min-w-0 items-center gap-2", isLoading && "w-60 max-w-1/2 animate-pulse rounded-md bg-fill", className),
+		...props,
+		children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: "\xA0" }) : children
+	});
+}
+// src/ds/new/layout/page-header/page-header-root.tsx
+function isSlot(child, type) {
+	return (0, react.isValidElement)(child) && child.type === type;
+}
+function isBesideMeta(child) {
+	return (0, react.isValidElement)(child) && child.type === PageHeaderMeta && Boolean(child.props.beside);
+}
+function groupSlots(items) {
+	const eyebrows = items.filter((child) => isSlot(child, PageHeaderEyebrow));
+	const icons = items.filter((child) => isSlot(child, PageHeaderIcon));
+	const headline = [...items.filter((child) => isSlot(child, PageHeaderTitle)), ...items.filter(isBesideMeta)];
+	const actions = items.filter((child) => isSlot(child, PageHeaderAction));
+	const placed = [
+		...eyebrows,
+		...icons,
+		...headline,
+		...actions
+	];
+	return {
+		eyebrows,
+		icons,
+		headline,
+		below: items.filter((child) => !placed.includes(child)),
+		actions
+	};
+}
+function PageHeaderRoot({ children, className, spacing = "default", ...props }) {
+	const { eyebrows, icons, headline, below, actions } = groupSlots(react.Children.toArray(children));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+		className: require_utils.cn("relative flex w-full flex-col", className, spacing === "breathing" && "pt-10"),
+		"data-page-header-spacing": spacing === "breathing" ? spacing : void 0,
+		...props,
+		children: [eyebrows, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex w-full items-start gap-3",
+			children: [
+				icons,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-1",
+					children: [headline.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex min-w-0 items-start gap-3 py-1",
+						children: headline
+					}), below]
+				}),
+				actions
+			]
+		})]
+	});
+}
+// src/ds/new/layout/page-header/page-header.tsx
+var PageHeader = Object.assign(PageHeaderRoot, {
+	Eyebrow: PageHeaderEyebrow,
+	Icon: PageHeaderIcon,
+	Title: PageHeaderTitle,
+	Meta: PageHeaderMeta,
+	Description: PageHeaderDescription,
+	Action: PageHeaderAction
+});
+Object.defineProperty(exports, "PageHeader", {
+	enumerable: true,
+	get: function() {
+		return PageHeader;
+	}
+});
+
+//# sourceMappingURL=page-header-pZCts_WC.cjs.map

package/dist/page-header-pZCts_WC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-pZCts_WC.cjs","names":["cn","Txt","cn","_Fragment","cn","cn","cn","Txt","cn","_Fragment","isValidElement","Children","cn"],"sources":["../src/ds/new/layout/page-header/page-header-action.tsx","../src/ds/new/layout/page-header/page-header-description.tsx","../src/ds/new/layout/page-header/page-header-eyebrow.tsx","../src/ds/new/layout/page-header/page-header-icon.tsx","../src/ds/new/layout/page-header/page-header-meta.tsx","../src/ds/new/layout/page-header/page-header-title.tsx","../src/ds/new/layout/page-header/page-header-root.tsx","../src/ds/new/layout/page-header/page-header.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderActionProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderAction({ className, ...props }: PageHeaderActionProps) {\n  return (\n    <div\n      data-slot=\"page-header-action\"\n      className={cn('ml-auto flex min-h-control-lg shrink-0 items-center self-start', className)}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderDescriptionProps extends ComponentPropsWithoutRef<'p'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderDescription({ children, className, isLoading, ...props }: PageHeaderDescriptionProps) {\n  return (\n    <Txt\n      variant=\"caption\"\n      tone=\"muted\"\n      data-slot=\"page-header-description\"\n      className={cn(\n        'flex max-w-140 flex-wrap gap-x-4 gap-y-1 text-pretty',\n        isLoading && 'w-160 max-w-4/5 animate-pulse rounded-md bg-muted',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </Txt>\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderEyebrowProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderEyebrow({ className, ...props }: PageHeaderEyebrowProps) {\n  return (\n    <div\n      data-slot=\"page-header-eyebrow\"\n      {...props}\n      className={cn(\n        'text-caption text-muted-foreground',\n        'flex min-w-0 items-center',\n        '*:inline-flex *:items-center *:gap-1 *:rounded-sm *:transition-colors *:hover:text-foreground',\n        className,\n      )}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderIconProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderIcon({ className, ...props }: PageHeaderIconProps) {\n  return (\n    <div\n      data-slot=\"page-header-icon\"\n      className={cn('flex min-h-control-lg items-center self-start text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderMetaProps extends ComponentPropsWithoutRef<'div'> {\n  beside?: boolean;\n}\n\nexport function PageHeaderMeta({ beside = false, className, ...props }: PageHeaderMetaProps) {\n  return (\n    <div\n      data-slot=\"page-header-meta\"\n      data-placement={beside ? 'beside' : 'below'}\n      {...props}\n      className={cn(\n        'text-meta text-muted-foreground',\n        'flex min-w-0 flex-wrap items-center gap-2',\n        beside && 'min-h-6 shrink-0',\n        className,\n      )}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderTitleProps extends ComponentPropsWithoutRef<'h1'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderTitle({ children, className, isLoading, ...props }: PageHeaderTitleProps) {\n  return (\n    <Txt\n      as=\"h1\"\n      variant=\"heading\"\n      tone=\"ink\"\n      data-slot=\"page-header-title\"\n      className={cn(\n        'flex min-w-0 items-center gap-2',\n        isLoading && 'w-60 max-w-1/2 animate-pulse rounded-md bg-fill',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </Txt>\n  );\n}\n","import { Children, isValidElement } from 'react';\nimport type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\nimport { PageHeaderAction } from './page-header-action';\nimport { PageHeaderEyebrow } from './page-header-eyebrow';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderMeta } from './page-header-meta';\nimport type { PageHeaderMetaProps } from './page-header-meta';\nimport { PageHeaderTitle } from './page-header-title';\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderRootProps = ComponentPropsWithoutRef<'header'> & {\n  spacing?: 'default' | 'breathing';\n};\n\nfunction isSlot(child: ReactNode, type: ElementType) {\n  return isValidElement(child) && child.type === type;\n}\n\nfunction isBesideMeta(child: ReactNode) {\n  return isValidElement<PageHeaderMetaProps>(child) && child.type === PageHeaderMeta && Boolean(child.props.beside);\n}\n\nfunction groupSlots(items: ReactNode[]) {\n  const eyebrows = items.filter(child => isSlot(child, PageHeaderEyebrow));\n  const icons = items.filter(child => isSlot(child, PageHeaderIcon));\n  const headline = [...items.filter(child => isSlot(child, PageHeaderTitle)), ...items.filter(isBesideMeta)];\n  // Actions sit outside the title column so their height never affects title/meta/description alignment.\n  const actions = items.filter(child => isSlot(child, PageHeaderAction));\n  const placed = [...eyebrows, ...icons, ...headline, ...actions];\n  const below = items.filter(child => !placed.includes(child));\n  return { eyebrows, icons, headline, below, actions };\n}\n\nexport function PageHeaderRoot({ children, className, spacing = 'default', ...props }: PageHeaderRootProps) {\n  const items = Children.toArray(children);\n  const { eyebrows, icons, headline, below, actions } = groupSlots(items);\n\n  return (\n    <header\n      className={cn('relative flex w-full flex-col', className, spacing === 'breathing' && 'pt-10')}\n      data-page-header-spacing={spacing === 'breathing' ? spacing : undefined}\n      {...props}\n    >\n      {eyebrows}\n      <div className=\"flex w-full items-start gap-3\">\n        {icons}\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n          {headline.length > 0 && <div className=\"flex min-w-0 items-start gap-3 py-1\">{headline}</div>}\n          {below}\n        </div>\n        {actions}\n      </div>\n    </header>\n  );\n}\n","import './page-header.css';\n\nimport { PageHeaderAction } from './page-header-action';\nimport { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderEyebrow } from './page-header-eyebrow';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderMeta } from './page-header-meta';\nimport { PageHeaderRoot } from './page-header-root';\nimport { PageHeaderTitle } from './page-header-title';\n\nexport type { PageHeaderActionProps } from './page-header-action';\nexport type { PageHeaderDescriptionProps } from './page-header-description';\nexport type { PageHeaderEyebrowProps } from './page-header-eyebrow';\nexport type { PageHeaderIconProps } from './page-header-icon';\nexport type { PageHeaderMetaProps } from './page-header-meta';\nexport type { PageHeaderRootProps } from './page-header-root';\nexport type { PageHeaderTitleProps } from './page-header-title';\n\nexport const PageHeader = Object.assign(PageHeaderRoot, {\n  Eyebrow: PageHeaderEyebrow,\n  Icon: PageHeaderIcon,\n  Title: PageHeaderTitle,\n  Meta: PageHeaderMeta,\n  Description: PageHeaderDescription,\n  Action: PageHeaderAction,\n});\n"],"mappings":"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"}

package/dist/popover-BpMi52Tb.js

@@ -0,0 +1,94 @@
+import { FLOATING_POSITION_METHOD } from "./primitives/floating.es.js";
+import { usePortalContainer } from "./primitives/portal-container.es.js";
+import { overlaySurfaceStyle } from "./primitives/raised-surface.es.js";
+import { resolveTriggerRender } from "./primitives/trigger-button.es.js";
+import { t as cn } from "./utils-DQx8TpNT.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+// src/ds/components/Popover/popover.tsx
+var Popover$1 = Popover.Root;
+/**
+* The button that opens the popover. Renders a design-system `<Button>` by
+* default, so it takes Button's `variant` / `size` / `tooltip`. Pass `render`
+* to project the behavior onto your own element (then the look is yours).
+*/
+var PopoverTrigger = React$1.forwardRef(({ className, asChild, render, children, variant, size, tooltip, ...props }, ref) => {
+	const resolved = resolveTriggerRender({
+		render,
+		asChild,
+		children,
+		variant,
+		size,
+		tooltip,
+		className
+	});
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		ref,
+		className: resolved.className,
+		render: resolved.render,
+		...props,
+		children: resolved.children
+	});
+});
+PopoverTrigger.displayName = "PopoverTrigger";
+var PopoverContent = React$1.forwardRef(({ className, container, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, anchor, positionMethod = FLOATING_POSITION_METHOD, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, ...props }, ref) => {
+	const classNameString = typeof className === "string" ? className : void 0;
+	const resolvedContainer = usePortalContainer(container);
+	const positionerProps = {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		anchor,
+		positionMethod,
+		collisionBoundary,
+		collisionPadding,
+		sticky,
+		arrowPadding,
+		disableAnchorTracking,
+		collisionAvoidance
+	};
+	return /* @__PURE__ */ jsx(Popover.Portal, {
+		container: resolvedContainer,
+		children: /* @__PURE__ */ jsx(Popover.Positioner, {
+			className: "z-50 outline-none",
+			...positionerProps,
+			children: /* @__PURE__ */ jsx(Popover.Popup, {
+				ref,
+				"data-slot": "popover-content",
+				className: cn("z-50 w-72 origin-[var(--transform-origin)] rounded-xl text-foreground scrollbar-inset-xl focus-visible:outline-hidden", overlaySurfaceStyle, "data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1", classNameString && /\bp[trblxy]?-\S+/.test(classNameString) ? false : `px-3 py-3.5`, className),
+				...props
+			})
+		})
+	});
+});
+PopoverContent.displayName = "PopoverContent";
+function HoverPopover({ children, ...props }) {
+	const [open, setOpen] = React$1.useState(false);
+	const timeoutRef = React$1.useRef(void 0);
+	const handleOpen = React$1.useCallback(() => {
+		clearTimeout(timeoutRef.current);
+		setOpen(true);
+	}, []);
+	const handleClose = React$1.useCallback(() => {
+		timeoutRef.current = setTimeout(() => setOpen(false), 150);
+	}, []);
+	React$1.useEffect(() => () => clearTimeout(timeoutRef.current), []);
+	return /* @__PURE__ */ jsx(Popover$1, {
+		open,
+		onOpenChange: setOpen,
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			onMouseEnter: handleOpen,
+			onMouseLeave: handleClose,
+			onFocusCapture: handleOpen,
+			onBlurCapture: handleClose,
+			style: { display: "contents" },
+			children
+		})
+	});
+}
+export { PopoverTrigger as i, Popover$1 as n, PopoverContent as r, HoverPopover as t };
+
+//# sourceMappingURL=popover-BpMi52Tb.js.map

package/dist/popover-BpMi52Tb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-BpMi52Tb.js","names":["Popover","PopoverPrimitive","React"],"sources":["../src/ds/components/Popover/popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport type { PopoverPopupProps, PopoverPositionerProps } from '@base-ui/react/popover';\nimport * as React from 'react';\n\nimport { FLOATING_POSITION_METHOD } from '@/ds/primitives/floating';\nimport { usePortalContainer } from '@/ds/primitives/portal-container';\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { resolveTriggerRender } from '@/ds/primitives/trigger-button';\nimport type { TriggerButtonProps } from '@/ds/primitives/trigger-button';\nimport { cn } from '@/lib/utils';\n\nconst Popover = PopoverPrimitive.Root;\n\nexport type PopoverTriggerProps = Omit<PopoverPrimitive.Trigger.Props, 'className'> & TriggerButtonProps;\n\n/**\n * The button that opens the popover. Renders a design-system `<Button>` by\n * default, so it takes Button's `variant` / `size` / `tooltip`. Pass `render`\n * to project the behavior onto your own element (then the look is yours).\n */\nconst PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(\n  ({ className, asChild, render, children, variant, size, tooltip, ...props }, ref) => {\n    const resolved = resolveTriggerRender({ render, asChild, children, variant, size, tooltip, className });\n\n    return (\n      <PopoverPrimitive.Trigger ref={ref} className={resolved.className} render={resolved.render} {...props}>\n        {resolved.children}\n      </PopoverPrimitive.Trigger>\n    );\n  },\n);\nPopoverTrigger.displayName = 'PopoverTrigger';\n\ntype PopoverContentPositionerProps = Omit<PopoverPositionerProps, keyof PopoverPopupProps>;\n\ntype PopoverContentProps = PopoverPopupProps &\n  PopoverContentPositionerProps & {\n    /** Optional portal container, forwarded to `Popover.Portal`. */\n    container?: HTMLElement | null;\n  };\n\nconst PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(\n  (\n    {\n      className,\n      container,\n      align = 'center',\n      alignOffset = 0,\n      side = 'bottom',\n      sideOffset = 4,\n      anchor,\n      positionMethod = FLOATING_POSITION_METHOD,\n      collisionBoundary,\n      collisionPadding,\n      sticky,\n      arrowPadding,\n      disableAnchorTracking,\n      collisionAvoidance,\n      ...props\n    },\n    ref,\n  ) => {\n    const classNameString = typeof className === 'string' ? className : undefined;\n    // Default to the nearest SideDialog/Drawer popup so the content stays\n    // interactive inside a modal drawer; an explicit `container` still wins.\n    const resolvedContainer = usePortalContainer(container);\n    const positionerProps: PopoverContentPositionerProps = {\n      align,\n      alignOffset,\n      side,\n      sideOffset,\n      anchor,\n      positionMethod,\n      collisionBoundary,\n      collisionPadding,\n      sticky,\n      arrowPadding,\n      disableAnchorTracking,\n      collisionAvoidance,\n    };\n\n    return (\n      <PopoverPrimitive.Portal container={resolvedContainer}>\n        <PopoverPrimitive.Positioner className=\"z-50 outline-none\" {...positionerProps}>\n          <PopoverPrimitive.Popup\n            ref={ref}\n            data-slot=\"popover-content\"\n            className={cn(\n              // `scrollbar-inset-xl`: a flush (`p-0`) popover's ScrollArea reaches the corners.\n              'z-50 w-72 origin-[var(--transform-origin)] rounded-xl text-foreground scrollbar-inset-xl focus-visible:outline-hidden',\n              overlaySurfaceStyle,\n              'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95',\n              'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',\n              classNameString && /\\bp[trblxy]?-\\S+/.test(classNameString) ? false : `px-3 py-3.5`,\n              className,\n            )}\n            {...props}\n          />\n        </PopoverPrimitive.Positioner>\n      </PopoverPrimitive.Portal>\n    );\n  },\n);\nPopoverContent.displayName = 'PopoverContent';\n\nfunction HoverPopover({\n  children,\n  ...props\n}: Omit<React.ComponentProps<typeof Popover>, 'children'> & { children?: React.ReactNode }) {\n  const [open, setOpen] = React.useState(false);\n  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const handleOpen = React.useCallback(() => {\n    clearTimeout(timeoutRef.current);\n    setOpen(true);\n  }, []);\n\n  const handleClose = React.useCallback(() => {\n    timeoutRef.current = setTimeout(() => setOpen(false), 150);\n  }, []);\n\n  React.useEffect(() => () => clearTimeout(timeoutRef.current), []);\n\n  return (\n    <Popover open={open} onOpenChange={setOpen} {...props}>\n      <span\n        onMouseEnter={handleOpen}\n        onMouseLeave={handleClose}\n        onFocusCapture={handleOpen}\n        onBlurCapture={handleClose}\n        style={{ display: 'contents' }}\n      >\n        {children}\n      </span>\n    </Popover>\n  );\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, HoverPopover };\n"],"mappings":";;;;;;;;;AAWA,IAAMA,YAAUC,QAAiB;;;;;;AASjC,IAAM,iBAAiBC,QAAM,YAC1B,EAAE,WAAW,SAAS,QAAQ,UAAU,SAAS,MAAM,SAAS,GAAG,SAAS,QAAQ;CACnF,MAAM,WAAW,qBAAqB;EAAE;EAAQ;EAAS;EAAU;EAAS;EAAM;EAAS;CAAU,CAAC;CAEtG,OACE,oBAACD,QAAiB,SAAlB;EAA+B;EAAK,WAAW,SAAS;EAAW,QAAQ,SAAS;EAAQ,GAAI;EAC7F,UAAA,SAAS;CACc,CAAA;AAE9B,CACF;AACA,eAAe,cAAc;AAU7B,IAAM,iBAAiBC,QAAM,YAEzB,EACE,WACA,WACA,QAAQ,UACR,cAAc,GACd,OAAO,UACP,aAAa,GACb,QACA,iBAAiB,0BACjB,mBACA,kBACA,QACA,cACA,uBACA,oBACA,GAAG,SAEL,QACG;CACH,MAAM,kBAAkB,OAAO,cAAc,WAAW,YAAY,KAAA;CAGpE,MAAM,oBAAoB,mBAAmB,SAAS;CACtD,MAAM,kBAAiD;EACrD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,OACE,oBAACD,QAAiB,QAAlB;EAAyB,WAAW;EAClC,UAAA,oBAACA,QAAiB,YAAlB;GAA6B,WAAU;GAAoB,GAAI;GAC7D,UAAA,oBAACA,QAAiB,OAAlB;IACO;IACL,aAAU;IACV,WAAW,GAET,yHACA,qBACA,oJACA,+JACA,mBAAmB,mBAAmB,KAAK,eAAe,IAAI,QAAQ,eACtE,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B,CACF;AACA,eAAe,cAAc;AAE7B,SAAS,aAAa,EACpB,UACA,GAAG,SACuF;CAC1F,MAAM,CAAC,MAAM,WAAWC,QAAM,SAAS,KAAK;CAC5C,MAAM,aAAaA,QAAM,OAAkD,KAAA,CAAS;CAEpF,MAAM,aAAaA,QAAM,kBAAkB;EACzC,aAAa,WAAW,OAAO;EAC/B,QAAQ,IAAI;CACd,GAAG,CAAC,CAAC;CAEL,MAAM,cAAcA,QAAM,kBAAkB;EAC1C,WAAW,UAAU,iBAAiB,QAAQ,KAAK,GAAG,GAAG;CAC3D,GAAG,CAAC,CAAC;CAEL,QAAM,sBAAsB,aAAa,WAAW,OAAO,GAAG,CAAC,CAAC;CAEhE,OACE,oBAACF,WAAD;EAAe;EAAM,cAAc;EAAS,GAAI;EAC9C,UAAA,oBAAC,QAAD;GACE,cAAc;GACd,cAAc;GACd,gBAAgB;GAChB,eAAe;GACf,OAAO,EAAE,SAAS,WAAW;GAE5B;EACG,CAAA;CACC,CAAA;AAEb"}

package/dist/popover-D9AfJmla.cjs

@@ -0,0 +1,119 @@
+const require_rolldown_runtime = require("./rolldown-runtime-CmQyd0Gu.cjs");
+const require_primitives_floating = require("./primitives/floating.cjs.js");
+const require_primitives_portal_container = require("./primitives/portal-container.cjs.js");
+const require_primitives_raised_surface = require("./primitives/raised-surface.cjs.js");
+const require_primitives_trigger_button = require("./primitives/trigger-button.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");
+let _base_ui_react_popover = require("@base-ui/react/popover");
+// src/ds/components/Popover/popover.tsx
+var Popover = _base_ui_react_popover.Popover.Root;
+/**
+* The button that opens the popover. Renders a design-system `<Button>` by
+* default, so it takes Button's `variant` / `size` / `tooltip`. Pass `render`
+* to project the behavior onto your own element (then the look is yours).
+*/
+var PopoverTrigger = react.forwardRef(({ className, asChild, render, children, variant, size, tooltip, ...props }, ref) => {
+	const resolved = require_primitives_trigger_button.resolveTriggerRender({
+		render,
+		asChild,
+		children,
+		variant,
+		size,
+		tooltip,
+		className
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Trigger, {
+		ref,
+		className: resolved.className,
+		render: resolved.render,
+		...props,
+		children: resolved.children
+	});
+});
+PopoverTrigger.displayName = "PopoverTrigger";
+var PopoverContent = react.forwardRef(({ className, container, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, anchor, positionMethod = require_primitives_floating.FLOATING_POSITION_METHOD, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, ...props }, ref) => {
+	const classNameString = typeof className === "string" ? className : void 0;
+	const resolvedContainer = require_primitives_portal_container.usePortalContainer(container);
+	const positionerProps = {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		anchor,
+		positionMethod,
+		collisionBoundary,
+		collisionPadding,
+		sticky,
+		arrowPadding,
+		disableAnchorTracking,
+		collisionAvoidance
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Portal, {
+		container: resolvedContainer,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Positioner, {
+			className: "z-50 outline-none",
+			...positionerProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Popup, {
+				ref,
+				"data-slot": "popover-content",
+				className: require_utils.cn("z-50 w-72 origin-[var(--transform-origin)] rounded-xl text-foreground scrollbar-inset-xl focus-visible:outline-hidden", require_primitives_raised_surface.overlaySurfaceStyle, "data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1", classNameString && /\bp[trblxy]?-\S+/.test(classNameString) ? false : `px-3 py-3.5`, className),
+				...props
+			})
+		})
+	});
+});
+PopoverContent.displayName = "PopoverContent";
+function HoverPopover({ children, ...props }) {
+	const [open, setOpen] = react.useState(false);
+	const timeoutRef = react.useRef(void 0);
+	const handleOpen = react.useCallback(() => {
+		clearTimeout(timeoutRef.current);
+		setOpen(true);
+	}, []);
+	const handleClose = react.useCallback(() => {
+		timeoutRef.current = setTimeout(() => setOpen(false), 150);
+	}, []);
+	react.useEffect(() => () => clearTimeout(timeoutRef.current), []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Popover, {
+		open,
+		onOpenChange: setOpen,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			onMouseEnter: handleOpen,
+			onMouseLeave: handleClose,
+			onFocusCapture: handleOpen,
+			onBlurCapture: handleClose,
+			style: { display: "contents" },
+			children
+		})
+	});
+}
+Object.defineProperty(exports, "HoverPopover", {
+	enumerable: true,
+	get: function() {
+		return HoverPopover;
+	}
+});
+Object.defineProperty(exports, "Popover", {
+	enumerable: true,
+	get: function() {
+		return Popover;
+	}
+});
+Object.defineProperty(exports, "PopoverContent", {
+	enumerable: true,
+	get: function() {
+		return PopoverContent;
+	}
+});
+Object.defineProperty(exports, "PopoverTrigger", {
+	enumerable: true,
+	get: function() {
+		return PopoverTrigger;
+	}
+});
+
+//# sourceMappingURL=popover-D9AfJmla.cjs.map

package/dist/popover-D9AfJmla.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-D9AfJmla.cjs","names":["PopoverPrimitive","React","resolveTriggerRender","FLOATING_POSITION_METHOD","usePortalContainer","cn","overlaySurfaceStyle"],"sources":["../src/ds/components/Popover/popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport type { PopoverPopupProps, PopoverPositionerProps } from '@base-ui/react/popover';\nimport * as React from 'react';\n\nimport { FLOATING_POSITION_METHOD } from '@/ds/primitives/floating';\nimport { usePortalContainer } from '@/ds/primitives/portal-container';\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { resolveTriggerRender } from '@/ds/primitives/trigger-button';\nimport type { TriggerButtonProps } from '@/ds/primitives/trigger-button';\nimport { cn } from '@/lib/utils';\n\nconst Popover = PopoverPrimitive.Root;\n\nexport type PopoverTriggerProps = Omit<PopoverPrimitive.Trigger.Props, 'className'> & TriggerButtonProps;\n\n/**\n * The button that opens the popover. Renders a design-system `<Button>` by\n * default, so it takes Button's `variant` / `size` / `tooltip`. Pass `render`\n * to project the behavior onto your own element (then the look is yours).\n */\nconst PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(\n  ({ className, asChild, render, children, variant, size, tooltip, ...props }, ref) => {\n    const resolved = resolveTriggerRender({ render, asChild, children, variant, size, tooltip, className });\n\n    return (\n      <PopoverPrimitive.Trigger ref={ref} className={resolved.className} render={resolved.render} {...props}>\n        {resolved.children}\n      </PopoverPrimitive.Trigger>\n    );\n  },\n);\nPopoverTrigger.displayName = 'PopoverTrigger';\n\ntype PopoverContentPositionerProps = Omit<PopoverPositionerProps, keyof PopoverPopupProps>;\n\ntype PopoverContentProps = PopoverPopupProps &\n  PopoverContentPositionerProps & {\n    /** Optional portal container, forwarded to `Popover.Portal`. */\n    container?: HTMLElement | null;\n  };\n\nconst PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(\n  (\n    {\n      className,\n      container,\n      align = 'center',\n      alignOffset = 0,\n      side = 'bottom',\n      sideOffset = 4,\n      anchor,\n      positionMethod = FLOATING_POSITION_METHOD,\n      collisionBoundary,\n      collisionPadding,\n      sticky,\n      arrowPadding,\n      disableAnchorTracking,\n      collisionAvoidance,\n      ...props\n    },\n    ref,\n  ) => {\n    const classNameString = typeof className === 'string' ? className : undefined;\n    // Default to the nearest SideDialog/Drawer popup so the content stays\n    // interactive inside a modal drawer; an explicit `container` still wins.\n    const resolvedContainer = usePortalContainer(container);\n    const positionerProps: PopoverContentPositionerProps = {\n      align,\n      alignOffset,\n      side,\n      sideOffset,\n      anchor,\n      positionMethod,\n      collisionBoundary,\n      collisionPadding,\n      sticky,\n      arrowPadding,\n      disableAnchorTracking,\n      collisionAvoidance,\n    };\n\n    return (\n      <PopoverPrimitive.Portal container={resolvedContainer}>\n        <PopoverPrimitive.Positioner className=\"z-50 outline-none\" {...positionerProps}>\n          <PopoverPrimitive.Popup\n            ref={ref}\n            data-slot=\"popover-content\"\n            className={cn(\n              // `scrollbar-inset-xl`: a flush (`p-0`) popover's ScrollArea reaches the corners.\n              'z-50 w-72 origin-[var(--transform-origin)] rounded-xl text-foreground scrollbar-inset-xl focus-visible:outline-hidden',\n              overlaySurfaceStyle,\n              'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95',\n              'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',\n              classNameString && /\\bp[trblxy]?-\\S+/.test(classNameString) ? false : `px-3 py-3.5`,\n              className,\n            )}\n            {...props}\n          />\n        </PopoverPrimitive.Positioner>\n      </PopoverPrimitive.Portal>\n    );\n  },\n);\nPopoverContent.displayName = 'PopoverContent';\n\nfunction HoverPopover({\n  children,\n  ...props\n}: Omit<React.ComponentProps<typeof Popover>, 'children'> & { children?: React.ReactNode }) {\n  const [open, setOpen] = React.useState(false);\n  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const handleOpen = React.useCallback(() => {\n    clearTimeout(timeoutRef.current);\n    setOpen(true);\n  }, []);\n\n  const handleClose = React.useCallback(() => {\n    timeoutRef.current = setTimeout(() => setOpen(false), 150);\n  }, []);\n\n  React.useEffect(() => () => clearTimeout(timeoutRef.current), []);\n\n  return (\n    <Popover open={open} onOpenChange={setOpen} {...props}>\n      <span\n        onMouseEnter={handleOpen}\n        onMouseLeave={handleClose}\n        onFocusCapture={handleOpen}\n        onBlurCapture={handleClose}\n        style={{ display: 'contents' }}\n      >\n        {children}\n      </span>\n    </Popover>\n  );\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, HoverPopover };\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,UAAUA,uBAAAA,QAAiB;;;;;;AASjC,IAAM,iBAAiBC,MAAM,YAC1B,EAAE,WAAW,SAAS,QAAQ,UAAU,SAAS,MAAM,SAAS,GAAG,SAAS,QAAQ;CACnF,MAAM,WAAWC,kCAAAA,qBAAqB;EAAE;EAAQ;EAAS;EAAU;EAAS;EAAM;EAAS;CAAU,CAAC;CAEtG,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,QAAiB,SAAlB;EAA+B;EAAK,WAAW,SAAS;EAAW,QAAQ,SAAS;EAAQ,GAAI;EAC7F,UAAA,SAAS;CACc,CAAA;AAE9B,CACF;AACA,eAAe,cAAc;AAU7B,IAAM,iBAAiBC,MAAM,YAEzB,EACE,WACA,WACA,QAAQ,UACR,cAAc,GACd,OAAO,UACP,aAAa,GACb,QACA,iBAAiBE,4BAAAA,0BACjB,mBACA,kBACA,QACA,cACA,uBACA,oBACA,GAAG,SAEL,QACG;CACH,MAAM,kBAAkB,OAAO,cAAc,WAAW,YAAY,KAAA;CAGpE,MAAM,oBAAoBC,oCAAAA,mBAAmB,SAAS;CACtD,MAAM,kBAAiD;EACrD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACJ,uBAAAA,QAAiB,QAAlB;EAAyB,WAAW;EAClC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,QAAiB,YAAlB;GAA6B,WAAU;GAAoB,GAAI;GAC7D,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,QAAiB,OAAlB;IACO;IACL,aAAU;IACV,WAAWK,cAAAA,GAET,yHACAC,kCAAAA,qBACA,oJACA,+JACA,mBAAmB,mBAAmB,KAAK,eAAe,IAAI,QAAQ,eACtE,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B,CACF;AACA,eAAe,cAAc;AAE7B,SAAS,aAAa,EACpB,UACA,GAAG,SACuF;CAC1F,MAAM,CAAC,MAAM,WAAWL,MAAM,SAAS,KAAK;CAC5C,MAAM,aAAaA,MAAM,OAAkD,KAAA,CAAS;CAEpF,MAAM,aAAaA,MAAM,kBAAkB;EACzC,aAAa,WAAW,OAAO;EAC/B,QAAQ,IAAI;CACd,GAAG,CAAC,CAAC;CAEL,MAAM,cAAcA,MAAM,kBAAkB;EAC1C,WAAW,UAAU,iBAAiB,QAAQ,KAAK,GAAG,GAAG;CAC3D,GAAG,CAAC,CAAC;CAEL,MAAM,sBAAsB,aAAa,WAAW,OAAO,GAAG,CAAC,CAAC;CAEhE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;EAAe;EAAM,cAAc;EAAS,GAAI;EAC9C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,cAAc;GACd,cAAc;GACd,gBAAgB;GAChB,eAAe;GACf,OAAO,EAAE,SAAS,WAAW;GAE5B;EACG,CAAA;CACC,CAAA;AAEb"}

package/dist/primitives/chart-frame.cjs.js

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_tokens = require("../tokens.cjs.js");
-require("./chart-layout.cjs.js");
 const require_primitives_chart_axes = require("./chart-axes.cjs.js");
+require("./chart-layout.cjs.js");
 const require_primitives_chart_time_tick = require("./chart-time-tick.cjs.js");
+const require_tokens = require("../tokens.cjs.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 let recharts = require("recharts");
 // src/ds/primitives/chart-frame.tsx

package/dist/primitives/chart-frame.es.js

@@ -1,7 +1,7 @@
-import { CHART_LABEL_COLOR } from "../tokens.es.js";
-import "./chart-layout.es.js";
 import { chartYTickCount, edgeDateLabels, niceYTicks, pickTimeTicks } from "./chart-axes.es.js";
+import "./chart-layout.es.js";
 import { ChartTimeTick } from "./chart-time-tick.es.js";
+import { CHART_LABEL_COLOR } from "../tokens.es.js";
 import { jsx } from "react/jsx-runtime";
 import { XAxis, YAxis } from "recharts";
 // src/ds/primitives/chart-frame.tsx

package/dist/primitives/chart-time-tick.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_tokens = require("../tokens.cjs.js");
-require("./chart-layout.cjs.js");
 const require_primitives_chart_axes = require("./chart-axes.cjs.js");
+require("./chart-layout.cjs.js");
+const require_tokens = require("../tokens.cjs.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/primitives/chart-time-tick.tsx
 /**