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

package/dist/observability-saved-views-UM8HBJ6J.cjs

@@ -0,0 +1,304 @@
+const require_domains_observability_saved_views_saved_views_source = require("./domains/observability/saved-views/saved-views-source.cjs.js");
+const require_domains_observability_saved_views_use_hosted_saved_views = require("./domains/observability/saved-views/use-hosted-saved-views.cjs.js");
+const require_domains_observability_components_observability_header_slot = require("./domains/observability/components/observability-header-slot.cjs.js");
+const require_Button = require("./Button-BfICfyxD.cjs");
+const require_combobox_parts = require("./combobox-parts-BeNqgCbj.cjs");
+const require_dropdown_menu = require("./dropdown-menu-D3D8USIY.cjs");
+const require_components_Field = require("./components/Field.cjs.js");
+const require_input = require("./input-BpnUsQSt.cjs");
+const require_popover = require("./popover-D9AfJmla.cjs");
+const require_Txt = require("./Txt-_00wWxTd.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");
+let react_dom = require("react-dom");
+// src/ds/components/SavedViews/saved-view-picker.tsx
+var DEFAULT_ITEM_VALUE = "";
+/**
+* A compact saved-views control for a page header: a searchable view picker, the active view's
+* actions, and save / reset once the page differs from the view. Driven by the same controller
+* as `SavedViewTabs`.
+*/
+function SavedViewPicker({ views, defaultLabel, newViewSettings, describeView, canEdit = () => true, canCreate = true, "aria-label": ariaLabel = "Views", className }) {
+	const anchorRef = (0, react.useRef)(null);
+	const [renaming, setRenaming] = (0, react.useState)(false);
+	const { draft, activeView } = views;
+	const creating = draft !== void 0 && draft.viewId === void 0;
+	const activeUnsaved = !creating && draft?.viewId !== void 0 && views.unsaved;
+	const editable = activeView !== void 0 && canEdit(activeView);
+	const items = [{
+		value: DEFAULT_ITEM_VALUE,
+		label: defaultLabel,
+		viewId: void 0
+	}, ...views.views.map((view) => ({
+		value: view.id,
+		label: view.name,
+		viewId: view.id
+	}))];
+	const selected = items.find((item) => item.viewId === activeView?.id) ?? items[0];
+	const viewsById = new Map(views.views.map((view) => [view.id, view]));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "group",
+		"aria-label": ariaLabel,
+		className: require_utils.cn("flex min-w-0 flex-wrap items-center justify-end gap-1.5", className),
+		children: [
+			views.error && !creating && !renaming && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+				role: "alert",
+				variant: "caption",
+				className: "min-w-0 truncate text-destructive-foreground",
+				children: views.error
+			}),
+			activeUnsaved && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex shrink-0 items-center gap-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					disabled: views.pending,
+					onClick: views.discard,
+					children: "Reset"
+				}), editable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					type: "button",
+					variant: "default",
+					size: "sm",
+					disabled: views.pending,
+					onClick: views.save,
+					children: "Save changes"
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: anchorRef,
+				className: "flex min-w-0 items-center gap-0.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_combobox_parts.ComboboxRoot, {
+					items,
+					value: selected,
+					onValueChange: (item) => {
+						if (item) views.select(item.viewId);
+					},
+					isItemEqualToValue: (item, value) => item.value === value.value,
+					autoHighlight: true,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_combobox_parts.ComboboxTrigger, {
+						size: "sm",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LayersIcon, {}),
+						"aria-label": `View: ${selected?.label}${activeUnsaved ? ", unsaved changes" : ""}`,
+						className: "max-w-60",
+						children: [selected?.label, activeUnsaved && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "ml-1.5 inline-block size-1.5 rounded-full bg-warning-indicator align-middle" })]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_combobox_parts.ComboboxContent, {
+						align: "end",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_combobox_parts.ComboboxSearch, { placeholder: "Search views" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_combobox_parts.ComboboxEmpty, { children: "No views found." }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_combobox_parts.ComboboxList, { children: (item) => {
+								const view = item.viewId ? viewsById.get(item.viewId) : void 0;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_combobox_parts.ComboboxItem, {
+									value: item,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "truncate",
+										children: item.label
+									}), view && describeView && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_combobox_parts.ComboboxItemEnd, { children: describeView(view) })]
+								}, item.value);
+							} })
+						]
+					})]
+				}), activeView && !creating && (editable || canCreate) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu.Trigger, {
+					variant: "ghost",
+					size: "icon-sm",
+					tooltip: "View actions",
+					className: "shrink-0",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.EllipsisIcon, {})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenu.Content, {
+					align: "end",
+					children: [
+						editable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenu.Item, {
+							onClick: () => setRenaming(true),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.TextCursorInputIcon, { "aria-hidden": true }), "Rename"]
+						}),
+						canCreate && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenu.Item, {
+							onClick: () => views.duplicate(activeView.id),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CopyIcon, { "aria-hidden": true }), "Duplicate"]
+						}),
+						editable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu.Separator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenu.Item, {
+							variant: "destructive",
+							onClick: () => views.remove(activeView.id),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2Icon, { "aria-hidden": true }), "Delete view"]
+						})] })
+					]
+				})] })]
+			}),
+			canCreate && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.Popover, {
+				open: creating,
+				onOpenChange: (open) => {
+					if (open) views.create(newViewSettings);
+					else views.discard();
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover.PopoverTrigger, {
+					variant: "ghost",
+					size: "icon-sm",
+					tooltip: "Save as new view",
+					className: "shrink-0",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LayersPlusIcon, {})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover.PopoverContent, {
+					align: "end",
+					className: "w-72",
+					children: creating && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewNameForm, {
+						title: "Save as new view",
+						initialName: draft.name,
+						submitLabel: "Save view",
+						error: views.error,
+						pending: views.pending,
+						onNameChange: (name) => views.change({ name }),
+						onSubmit: () => views.save(),
+						onCancel: views.discard
+					})
+				})]
+			}),
+			activeView && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenamePopover, {
+				open: renaming,
+				anchorRef,
+				name: activeView.name,
+				error: views.error,
+				pending: views.pending,
+				onClose: () => setRenaming(false),
+				onRename: (name) => views.rename(activeView.id, name)
+			})
+		]
+	});
+}
+function RenamePopover({ open, anchorRef, name, error, pending, onClose, onRename }) {
+	const [failedName, setFailedName] = (0, react.useState)();
+	const [typedName, setTypedName] = (0, react.useState)(name);
+	const close = () => {
+		setFailedName(void 0);
+		setTypedName(name);
+		onClose();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover.Popover, {
+		open,
+		onOpenChange: (next) => !next && close(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover.PopoverContent, {
+			anchor: anchorRef,
+			align: "end",
+			className: "w-72",
+			children: open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewNameForm, {
+				title: "Rename view",
+				initialName: name,
+				submitLabel: "Rename",
+				error: failedName !== void 0 && failedName === typedName ? error : void 0,
+				pending,
+				onNameChange: setTypedName,
+				onSubmit: async (next) => {
+					if (await onRename(next)) close();
+					else setFailedName(next);
+				},
+				onCancel: close
+			})
+		})
+	});
+}
+function ViewNameForm({ title, initialName, submitLabel, error, pending, onNameChange, onSubmit, onCancel }) {
+	const [name, setName] = (0, react.useState)(initialName);
+	const submit = (event) => {
+		event.preventDefault();
+		if (name.trim()) onSubmit(name);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+		className: "flex flex-col gap-3",
+		onSubmit: submit,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+				as: "h2",
+				variant: "label",
+				children: title
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Field.Field, {
+				invalid: error !== void 0,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+					"aria-label": "View name",
+					size: "sm",
+					autoFocus: true,
+					onFocus: (event) => event.currentTarget.select(),
+					maxLength: 80,
+					value: name,
+					onChange: (event) => {
+						setName(event.target.value);
+						onNameChange?.(event.target.value);
+					}
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Field.FieldError, { children: error })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex justify-end gap-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					onClick: onCancel,
+					children: "Cancel"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					type: "submit",
+					variant: "default",
+					size: "sm",
+					disabled: pending || !name.trim(),
+					children: submitLabel
+				})]
+			})
+		]
+	});
+}
+// src/domains/observability/saved-views/observability-saved-views.tsx
+var DEFAULT_LABELS = {
+	traces: "All traces",
+	spans: "All spans",
+	threads: "All threads",
+	logs: "All logs"
+};
+/**
+* The saved views of an observability page: a searchable view picker with save and reset actions.
+* Inside the shared traces / spans / threads header it moves into that header's row. Renders nothing
+* unless a `SavedViewsProvider` above it supplies where views are stored.
+*/
+function ObservabilitySavedViews(props) {
+	const context = require_domains_observability_saved_views_saved_views_source.useSavedViewsSource();
+	if (!context) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HostedSavedViewsBar, {
+		...props,
+		...context
+	});
+}
+function HostedSavedViewsBar({ page, searchParams, setSearchParams, columns, defaultDatePreset, className, source, queryKeyScope, canEdit, canCreate = true }) {
+	const headerSlot = require_domains_observability_components_observability_header_slot.useObservabilityHeaderSlot();
+	const views = require_domains_observability_saved_views_use_hosted_saved_views.useHostedSavedViews({
+		page,
+		source,
+		queryKeyScope,
+		canEdit,
+		canCreate,
+		searchParams,
+		setSearchParams,
+		columns,
+		defaultDatePreset
+	});
+	const picker = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SavedViewPicker, {
+		views,
+		defaultLabel: DEFAULT_LABELS[page],
+		"aria-label": "Saved views",
+		newViewSettings: { state: {
+			schemaVersion: 1,
+			page,
+			filters: []
+		} },
+		describeView: (view) => view.settings.record?.scope === "org" ? "Shared" : void 0,
+		canEdit: (view) => !canEdit || !view.settings.record || canEdit(view.settings.record),
+		canCreate,
+		className
+	});
+	return headerSlot ? (0, react_dom.createPortal)(picker, headerSlot) : picker;
+}
+Object.defineProperty(exports, "ObservabilitySavedViews", {
+	enumerable: true,
+	get: function() {
+		return ObservabilitySavedViews;
+	}
+});
+
+//# sourceMappingURL=observability-saved-views-UM8HBJ6J.cjs.map

package/dist/observability-saved-views-UM8HBJ6J.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"observability-saved-views-UM8HBJ6J.cjs","names":["useRef","useState","cn","Txt","Button","ComboboxRoot","ComboboxTrigger","LayersIcon","ComboboxContent","ComboboxSearch","ComboboxEmpty","ComboboxList","ComboboxItem","ComboboxItemEnd","DropdownMenu","EllipsisIcon","TextCursorInputIcon","CopyIcon","_Fragment","Trash2Icon","Popover","PopoverTrigger","LayersPlusIcon","PopoverContent","Field","Input","FieldError","useSavedViewsSource","useObservabilityHeaderSlot","useHostedSavedViews","createPortal"],"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":"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"}

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

@@ -0,0 +1,299 @@
+import { useSavedViewsSource } from "./domains/observability/saved-views/saved-views-source.es.js";
+import { useHostedSavedViews } from "./domains/observability/saved-views/use-hosted-saved-views.es.js";
+import { useObservabilityHeaderSlot } from "./domains/observability/components/observability-header-slot.es.js";
+import { t as Button } from "./Button-Bi7aXd_G.js";
+import { _ as ComboboxRoot, b as ComboboxTrigger, g as ComboboxList, o as ComboboxContent, p as ComboboxItemEnd, s as ComboboxEmpty, u as ComboboxItem, v as ComboboxSearch } from "./combobox-parts-C9o4UfH_.js";
+import { t as DropdownMenu } from "./dropdown-menu-jsf9D-J_.js";
+import { Field, FieldError } from "./components/Field.es.js";
+import { t as Input } from "./input-Cyit5ZSc.js";
+import { i as PopoverTrigger, n as Popover, r as PopoverContent } from "./popover-BpMi52Tb.js";
+import { t as Txt } from "./Txt-5efBsb2p.js";
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CopyIcon, EllipsisIcon, LayersIcon, LayersPlusIcon, TextCursorInputIcon, Trash2Icon } from "lucide-react";
+import { createPortal } from "react-dom";
+// src/ds/components/SavedViews/saved-view-picker.tsx
+var DEFAULT_ITEM_VALUE = "";
+/**
+* A compact saved-views control for a page header: a searchable view picker, the active view's
+* actions, and save / reset once the page differs from the view. Driven by the same controller
+* as `SavedViewTabs`.
+*/
+function SavedViewPicker({ views, defaultLabel, newViewSettings, describeView, canEdit = () => true, canCreate = true, "aria-label": ariaLabel = "Views", className }) {
+	const anchorRef = useRef(null);
+	const [renaming, setRenaming] = useState(false);
+	const { draft, activeView } = views;
+	const creating = draft !== void 0 && draft.viewId === void 0;
+	const activeUnsaved = !creating && draft?.viewId !== void 0 && views.unsaved;
+	const editable = activeView !== void 0 && canEdit(activeView);
+	const items = [{
+		value: DEFAULT_ITEM_VALUE,
+		label: defaultLabel,
+		viewId: void 0
+	}, ...views.views.map((view) => ({
+		value: view.id,
+		label: view.name,
+		viewId: view.id
+	}))];
+	const selected = items.find((item) => item.viewId === activeView?.id) ?? items[0];
+	const viewsById = new Map(views.views.map((view) => [view.id, view]));
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": ariaLabel,
+		className: cn("flex min-w-0 flex-wrap items-center justify-end gap-1.5", className),
+		children: [
+			views.error && !creating && !renaming && /* @__PURE__ */ jsx(Txt, {
+				role: "alert",
+				variant: "caption",
+				className: "min-w-0 truncate text-destructive-foreground",
+				children: views.error
+			}),
+			activeUnsaved && /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					disabled: views.pending,
+					onClick: views.discard,
+					children: "Reset"
+				}), editable && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "default",
+					size: "sm",
+					disabled: views.pending,
+					onClick: views.save,
+					children: "Save changes"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: anchorRef,
+				className: "flex min-w-0 items-center gap-0.5",
+				children: [/* @__PURE__ */ jsxs(ComboboxRoot, {
+					items,
+					value: selected,
+					onValueChange: (item) => {
+						if (item) views.select(item.viewId);
+					},
+					isItemEqualToValue: (item, value) => item.value === value.value,
+					autoHighlight: true,
+					children: [/* @__PURE__ */ jsxs(ComboboxTrigger, {
+						size: "sm",
+						icon: /* @__PURE__ */ jsx(LayersIcon, {}),
+						"aria-label": `View: ${selected?.label}${activeUnsaved ? ", unsaved changes" : ""}`,
+						className: "max-w-60",
+						children: [selected?.label, activeUnsaved && /* @__PURE__ */ jsx("span", { className: "ml-1.5 inline-block size-1.5 rounded-full bg-warning-indicator align-middle" })]
+					}), /* @__PURE__ */ jsxs(ComboboxContent, {
+						align: "end",
+						children: [
+							/* @__PURE__ */ jsx(ComboboxSearch, { placeholder: "Search views" }),
+							/* @__PURE__ */ jsx(ComboboxEmpty, { children: "No views found." }),
+							/* @__PURE__ */ jsx(ComboboxList, { children: (item) => {
+								const view = item.viewId ? viewsById.get(item.viewId) : void 0;
+								return /* @__PURE__ */ jsxs(ComboboxItem, {
+									value: item,
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "truncate",
+										children: item.label
+									}), view && describeView && /* @__PURE__ */ jsx(ComboboxItemEnd, { children: describeView(view) })]
+								}, item.value);
+							} })
+						]
+					})]
+				}), activeView && !creating && (editable || canCreate) && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, {
+					variant: "ghost",
+					size: "icon-sm",
+					tooltip: "View actions",
+					className: "shrink-0",
+					children: /* @__PURE__ */ jsx(EllipsisIcon, {})
+				}), /* @__PURE__ */ jsxs(DropdownMenu.Content, {
+					align: "end",
+					children: [
+						editable && /* @__PURE__ */ jsxs(DropdownMenu.Item, {
+							onClick: () => setRenaming(true),
+							children: [/* @__PURE__ */ jsx(TextCursorInputIcon, { "aria-hidden": true }), "Rename"]
+						}),
+						canCreate && /* @__PURE__ */ jsxs(DropdownMenu.Item, {
+							onClick: () => views.duplicate(activeView.id),
+							children: [/* @__PURE__ */ jsx(CopyIcon, { "aria-hidden": true }), "Duplicate"]
+						}),
+						editable && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenu.Separator, {}), /* @__PURE__ */ jsxs(DropdownMenu.Item, {
+							variant: "destructive",
+							onClick: () => views.remove(activeView.id),
+							children: [/* @__PURE__ */ jsx(Trash2Icon, { "aria-hidden": true }), "Delete view"]
+						})] })
+					]
+				})] })]
+			}),
+			canCreate && /* @__PURE__ */ jsxs(Popover, {
+				open: creating,
+				onOpenChange: (open) => {
+					if (open) views.create(newViewSettings);
+					else views.discard();
+				},
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					variant: "ghost",
+					size: "icon-sm",
+					tooltip: "Save as new view",
+					className: "shrink-0",
+					children: /* @__PURE__ */ jsx(LayersPlusIcon, {})
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					align: "end",
+					className: "w-72",
+					children: creating && /* @__PURE__ */ jsx(ViewNameForm, {
+						title: "Save as new view",
+						initialName: draft.name,
+						submitLabel: "Save view",
+						error: views.error,
+						pending: views.pending,
+						onNameChange: (name) => views.change({ name }),
+						onSubmit: () => views.save(),
+						onCancel: views.discard
+					})
+				})]
+			}),
+			activeView && /* @__PURE__ */ jsx(RenamePopover, {
+				open: renaming,
+				anchorRef,
+				name: activeView.name,
+				error: views.error,
+				pending: views.pending,
+				onClose: () => setRenaming(false),
+				onRename: (name) => views.rename(activeView.id, name)
+			})
+		]
+	});
+}
+function RenamePopover({ open, anchorRef, name, error, pending, onClose, onRename }) {
+	const [failedName, setFailedName] = useState();
+	const [typedName, setTypedName] = useState(name);
+	const close = () => {
+		setFailedName(void 0);
+		setTypedName(name);
+		onClose();
+	};
+	return /* @__PURE__ */ jsx(Popover, {
+		open,
+		onOpenChange: (next) => !next && close(),
+		children: /* @__PURE__ */ jsx(PopoverContent, {
+			anchor: anchorRef,
+			align: "end",
+			className: "w-72",
+			children: open && /* @__PURE__ */ jsx(ViewNameForm, {
+				title: "Rename view",
+				initialName: name,
+				submitLabel: "Rename",
+				error: failedName !== void 0 && failedName === typedName ? error : void 0,
+				pending,
+				onNameChange: setTypedName,
+				onSubmit: async (next) => {
+					if (await onRename(next)) close();
+					else setFailedName(next);
+				},
+				onCancel: close
+			})
+		})
+	});
+}
+function ViewNameForm({ title, initialName, submitLabel, error, pending, onNameChange, onSubmit, onCancel }) {
+	const [name, setName] = useState(initialName);
+	const submit = (event) => {
+		event.preventDefault();
+		if (name.trim()) onSubmit(name);
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		className: "flex flex-col gap-3",
+		onSubmit: submit,
+		children: [
+			/* @__PURE__ */ jsx(Txt, {
+				as: "h2",
+				variant: "label",
+				children: title
+			}),
+			/* @__PURE__ */ jsxs(Field, {
+				invalid: error !== void 0,
+				children: [/* @__PURE__ */ jsx(Input, {
+					"aria-label": "View name",
+					size: "sm",
+					autoFocus: true,
+					onFocus: (event) => event.currentTarget.select(),
+					maxLength: 80,
+					value: name,
+					onChange: (event) => {
+						setName(event.target.value);
+						onNameChange?.(event.target.value);
+					}
+				}), /* @__PURE__ */ jsx(FieldError, { children: error })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-end gap-1.5",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					onClick: onCancel,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					variant: "default",
+					size: "sm",
+					disabled: pending || !name.trim(),
+					children: submitLabel
+				})]
+			})
+		]
+	});
+}
+// src/domains/observability/saved-views/observability-saved-views.tsx
+var DEFAULT_LABELS = {
+	traces: "All traces",
+	spans: "All spans",
+	threads: "All threads",
+	logs: "All logs"
+};
+/**
+* The saved views of an observability page: a searchable view picker with save and reset actions.
+* Inside the shared traces / spans / threads header it moves into that header's row. Renders nothing
+* unless a `SavedViewsProvider` above it supplies where views are stored.
+*/
+function ObservabilitySavedViews(props) {
+	const context = useSavedViewsSource();
+	if (!context) return null;
+	return /* @__PURE__ */ jsx(HostedSavedViewsBar, {
+		...props,
+		...context
+	});
+}
+function HostedSavedViewsBar({ page, searchParams, setSearchParams, columns, defaultDatePreset, className, source, queryKeyScope, canEdit, canCreate = true }) {
+	const headerSlot = useObservabilityHeaderSlot();
+	const views = useHostedSavedViews({
+		page,
+		source,
+		queryKeyScope,
+		canEdit,
+		canCreate,
+		searchParams,
+		setSearchParams,
+		columns,
+		defaultDatePreset
+	});
+	const picker = /* @__PURE__ */ jsx(SavedViewPicker, {
+		views,
+		defaultLabel: DEFAULT_LABELS[page],
+		"aria-label": "Saved views",
+		newViewSettings: { state: {
+			schemaVersion: 1,
+			page,
+			filters: []
+		} },
+		describeView: (view) => view.settings.record?.scope === "org" ? "Shared" : void 0,
+		canEdit: (view) => !canEdit || !view.settings.record || canEdit(view.settings.record),
+		canCreate,
+		className
+	});
+	return headerSlot ? createPortal(picker, headerSlot) : picker;
+}
+export { ObservabilitySavedViews as t };
+
+//# sourceMappingURL=observability-saved-views-lLWk1w0g.js.map