@mastra/playground-ui 66.1.0-alpha.2 → 67.0.0

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

@@ -0,0 +1,302 @@
+const require_utils = require("./utils-uDc1ofX1.cjs");
+const require_Button = require("./Button-YQRflC47.cjs");
+const require_Txt = require("./Txt-BnoSqxKE.cjs");
+const require_input = require("./input-2hRXcZIu.cjs");
+const require_dropdown_menu = require("./dropdown-menu-BETTTPBB.cjs");
+const require_components_Field = require("./components/Field.cjs.js");
+const require_popover = require("./popover-BJqa6Hz6.cjs");
+const require_combobox_parts = require("./combobox-parts-BZVXwbG7.cjs");
+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");
+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, "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 && /* @__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"]
+						}),
+						/* @__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"]
+						})] })
+					]
+				})] })]
+			}),
+			/* @__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 }) {
+	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,
+		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),
+		className
+	});
+	return headerSlot ? (0, react_dom.createPortal)(picker, headerSlot) : picker;
+}
+Object.defineProperty(exports, "ObservabilitySavedViews", {
+	enumerable: true,
+	get: function() {
+		return ObservabilitySavedViews;
+	}
+});
+
+//# sourceMappingURL=observability-saved-views-CwCii7hh.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"observability-saved-views-CwCii7hh.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  '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  '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 && (\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              <DropdownMenu.Item onClick={() => views.duplicate(activeView.id)}>\n                <CopyIcon aria-hidden />\n                Duplicate\n              </DropdownMenu.Item>\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      <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      {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}: ObservabilitySavedViewsProps & SavedViewsContextValue) {\n  const headerSlot = useObservabilityHeaderSlot();\n  const views = useHostedSavedViews({\n    page,\n    source,\n    queryKeyScope,\n    canEdit,\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      className={className}\n    />\n  );\n  return headerSlot ? createPortal(picker, headerSlot) : picker;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAuCA,IAAM,qBAAqB;;;;;;AAO3B,SAAgB,gBAA2B,EACzC,OACA,cACA,iBACA,cACA,gBAAgB,MAChB,cAAc,YAAY,SAC1B,aACkC;CAClC,MAAM,aAAA,GAAYA,MAAAA,OAAAA,CAAuB,IAAI;CAC7C,MAAM,CAAC,UAAU,gBAAA,GAAeC,MAAAA,SAAAA,CAAS,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,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,WAAWC,cAAAA,GAAG,2DAA2D,SAAS;EAHpF,UAAA;GAKG,MAAM,SAAS,CAAC,YAAY,CAAC,YAC5B,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;IAAK,MAAK;IAAQ,SAAQ;IAAU,WAAU;IAC3C,UAAA,MAAM;GACJ,CAAA;GAEN,iBACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;KAAQ,MAAK;KAAS,SAAQ;KAAQ,MAAK;KAAK,UAAU,MAAM;KAAS,SAAS,MAAM;KAAS,UAAA;IAEzF,CAAA,GACP,YACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,QAAD;KAAQ,MAAK;KAAS,SAAQ;KAAU,MAAK;KAAK,UAAU,MAAM;KAAS,SAAS,MAAM;KAAM,UAAA;IAExF,CAAA,CAEP;;GAEP,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,KAAK;IAAW,WAAU;IAA/B,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,uBAAAA,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,iBAAA,GAAA,kBAAA,KAAA,CAACC,uBAAAA,iBAAD;MACE,MAAK;MACL,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,YAAD,CAAa,CAAA;MACnB,cAAY,SAAS,UAAU,QAAQ,gBAAgB,sBAAsB;MAC7E,WAAU;MAJZ,UAAA,CAMG,UAAU,OACV,iBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,WAAU,8EAA+E,CAAA,CAElF;KACjB,CAAA,GAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,uBAAAA,iBAAD;MAAiB,OAAM;MAAvB,UAAA;OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,gBAAD,EAAgB,aAAY,gBAAiB,CAAA;OAC7C,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,eAAD,EAAA,UAAe,kBAA8B,CAAA;OAC7C,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,cAAD,EAAA,WACI,SAAqB;QACrB,MAAM,OAAO,KAAK,SAAS,UAAU,IAAI,KAAK,MAAM,IAAI,KAAA;QACxD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,uBAAAA,cAAD;SAA+B,OAAO;SAAtC,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;UAAM,WAAU;UAAY,UAAA,KAAK;SAAY,CAAA,GAC5C,QAAQ,gBAAgB,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,iBAAD,EAAA,UAAkB,aAAa,IAAI,EAAmB,CAAA,CACnE;QAHK,GAAA,KAAK,KAGV;OAElB,EACY,CAAA;MACC;KACL,CAAA,CAAA;IACb,CAAA,GAAA,cAAc,CAAC,YACd,iBAAA,GAAA,kBAAA,KAAA,CAACC,sBAAAA,cAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,sBAAAA,aAAa,SAAd;KAAsB,SAAQ;KAAQ,MAAK;KAAU,SAAQ;KAAe,WAAU;KACpF,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,cAAD,CAAe,CAAA;IACK,CAAA,GACtB,iBAAA,GAAA,kBAAA,KAAA,CAACD,sBAAAA,aAAa,SAAd;KAAsB,OAAM;KAA5B,UAAA;MACG,YACC,iBAAA,GAAA,kBAAA,KAAA,CAACA,sBAAAA,aAAa,MAAd;OAAmB,eAAe,YAAY,IAAI;OAAlD,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,aAAAA,qBAAD,EAAqB,eAAA,KAAa,CAAA,GAAC,QAElB;;MAErB,iBAAA,GAAA,kBAAA,KAAA,CAACF,sBAAAA,aAAa,MAAd;OAAmB,eAAe,MAAM,UAAU,WAAW,EAAE;OAA/D,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACG,aAAAA,UAAD,EAAU,eAAA,KAAa,CAAA,GAAC,WAEP;;MAClB,YACC,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACJ,sBAAAA,aAAa,WAAd,CAAyB,CAAA,GACzB,iBAAA,GAAA,kBAAA,KAAA,CAACA,sBAAAA,aAAa,MAAd;OAAmB,SAAQ;OAAc,eAAe,MAAM,OAAO,WAAW,EAAE;OAAlF,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACK,aAAAA,YAAD,EAAY,eAAA,KAAa,CAAA,GAAC,aAET;MACnB,CAAA,CAAA,EAAA,CAAA;KAEgB;IACV,CAAA,CAAA,EAAA,CAAA,CAEb;;GACL,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,SAAD;IACE,MAAM;IACN,eAAc,SAAQ;KACpB,IAAI,MAAM,MAAM,OAAO,eAAe;UACjC,MAAM,QAAQ;IACrB;IALF,UAAA,CAOE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,gBAAD;KAAgB,SAAQ;KAAQ,MAAK;KAAU,SAAQ;KAAmB,WAAU;KAClF,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,gBAAD,CAAiB,CAAA;IACH,CAAA,GAChB,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,gBAAD;KAAgB,OAAM;KAAM,WAAU;KACnC,UAAA,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,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;;GACR,cACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,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,kBAAA,GAAiBtB,MAAAA,SAAAA,CAAiB;CACrD,MAAM,CAAC,WAAW,iBAAA,GAAgBA,MAAAA,SAAAA,CAAS,IAAI;CAC/C,MAAM,cAAc;EAClB,cAAc,KAAA,CAAS;EACvB,aAAa,IAAI;EACjB,QAAQ;CACV;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACmB,gBAAAA,SAAD;EAAe;EAAM,eAAc,SAAQ,CAAC,QAAQ,MAAM;EACxD,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACG,gBAAAA,gBAAD;GAAgB,QAAQ;GAAW,OAAM;GAAM,WAAU;GACtD,UAAA,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,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,YAAA,GAAWtB,MAAAA,SAAAA,CAAS,WAAW;CAC5C,MAAM,UAAU,UAAqB;EACnC,MAAM,eAAe;EACrB,IAAI,KAAK,KAAK,GAAG,SAAc,IAAI;CACrC;CACA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EAAM,WAAU;EAAsB,UAAU;EAAhD,UAAA;GACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,YAAAA,KAAD;IAAK,IAAG;IAAK,SAAQ;IAClB,UAAA;GACE,CAAA;GACL,iBAAA,GAAA,kBAAA,KAAA,CAACqB,yBAAAA,OAAD;IAAO,SAAS,UAAU,KAAA;IAA1B,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,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,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,YAAD,EAAA,UAAa,MAAkB,CAAA,CAC1B;;GACP,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACtB,eAAAA,QAAD;KAAQ,MAAK;KAAS,SAAQ;KAAQ,MAAK;KAAK,SAAS;KAAU,UAAA;IAE3D,CAAA,GACR,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,QAAD;KAAQ,MAAK;KAAS,SAAQ;KAAU,MAAK;KAAK,UAAU,WAAW,CAAC,KAAK,KAAK;KAC/E,UAAA;IACK,CAAA,CACL;;EACD;;AAEV;;ACjSA,IAAM,iBAAgD;CACpD,QAAQ;CACR,OAAO;CACP,SAAS;CACT,MAAM;AACR;;;;;;AAqBA,SAAgB,wBAAwB,OAAqC;CAC3E,MAAM,UAAUuB,6DAAAA,oBAAoB;CACpC,IAAI,CAAC,SAAS,OAAO;CACrB,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAD;EAAqB,GAAI;EAAO,GAAI;CAAU,CAAA;AACvD;AAEA,SAAS,oBAAoB,EAC3B,MACA,cACA,iBACA,SACA,mBACA,WACA,QACA,eACA,WACwD;CACxD,MAAM,aAAaC,mEAAAA,2BAA2B;CAC9C,MAAM,QAAQC,iEAAAA,oBAAoB;EAChC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,SACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,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;CACZ,CAAA;CAEH,OAAO,cAAA,GAAaC,UAAAA,aAAAA,CAAa,QAAQ,UAAU,IAAI;AACzD"}

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

@@ -131,6 +131,28 @@ var LABEL_GAP = 48;
 /** Rough label width at the axis font size. */
 var labelWidth = (text) => text.length * 11 * .58;
 /**
+* Where a label goes: centred on its bucket, or pinned to the plot's edge when centring would
+* push it out. A pinned label anchors on that edge, so it ends exactly there whatever the font's
+* real widths (`labelWidth` is only an estimate).
+*/
+function placeTimeTick({ x, index, offset = 0, count, plotWidth, textWidth }) {
+	const left = offset > 0 ? x - offset * (2 * index + 1) : x - index * plotWidth / Math.max(count - 1, 1);
+	const right = left + plotWidth;
+	const half = textWidth / 2;
+	if (x + half > right) return {
+		x: right,
+		anchor: "end"
+	};
+	if (x - half < left) return {
+		x: left,
+		anchor: "start"
+	};
+	return {
+		x,
+		anchor: "middle"
+	};
+}
+/**
 * Which buckets get a label: the smallest round step whose labels fit the width, on the first
 * bucket at or after each clock-aligned time (hours divisible by the step, days on local
 * midnight or, for daily buckets, on their local date). Without
@@ -172,13 +194,35 @@ function pickTimeTicks(timestamps, labels, plotWidth, mode = "auto") {
 function isFiniteNumber(value) {
 	return typeof value === "number" && Number.isFinite(value);
 }
+var fmtDay = (ts) => new Date(ts).toLocaleDateString("en-US", {
+	month: "short",
+	day: "numeric"
+});
+/**
+* Date-only labels for the two ends of an `edges` axis when the hour on them says nothing: buckets
+* shorter than a day whose first and last start at the same clock time on different days, as on
+* rolling ranges (last 24 hours, 3 days, 7 days). Same-day or uneven ends keep their labels.
+*/
+function edgeDateLabels(timestamps, mode) {
+	const last = timestamps.length - 1;
+	const [first, second] = timestamps;
+	const end = timestamps[last];
+	if (mode !== "edges" || last < 1 || !isFiniteNumber(first) || !isFiniteNumber(end)) return /* @__PURE__ */ new Map();
+	if (isFiniteNumber(second) && second - first >= DAY) return /* @__PURE__ */ new Map();
+	const a = new Date(first);
+	const b = new Date(end);
+	if (!(a.getHours() === b.getHours() && a.getMinutes() === b.getMinutes()) || a.toDateString() === b.toDateString()) return /* @__PURE__ */ new Map();
+	return /* @__PURE__ */ new Map([[0, fmtDay(first)], [last, fmtDay(end)]]);
+}
 exports.CHART_CURSOR_PROPS = CHART_CURSOR_PROPS;
 exports.CHART_GRID_PROPS = CHART_GRID_PROPS;
 exports.CHART_TOOLTIP_PROPS = CHART_TOOLTIP_PROPS;
 exports.chartYTickCount = chartYTickCount;
+exports.edgeDateLabels = edgeDateLabels;
 exports.labelWidth = labelWidth;
 exports.niceYTicks = niceYTicks;
 exports.pickTimeTicks = pickTimeTicks;
+exports.placeTimeTick = placeTimeTick;
 exports.useChartSize = useChartSize;
 
 //# sourceMappingURL=chart-axes.cjs.js.map

package/dist/primitives/chart-axes.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-axes.cjs.js","names":["useRef","useState","CHART_MARGIN"],"sources":["../../src/ds/primitives/chart-axes.ts"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport { CHART_AXIS_FONT_SIZE, CHART_MARGIN, X_AXIS_HEIGHT } from './chart-layout';\n\n/** Horizontal rulers: short dashes on the border color at half strength. */\nexport const CHART_GRID_PROPS = {\n  vertical: false,\n  stroke: 'var(--border)',\n  strokeDasharray: '3 3',\n  strokeOpacity: 0.5,\n} as const;\n\n/** Hover line of line charts: dashed like the grid, full border color, a hair thinner than a series. */\nexport const CHART_CURSOR_PROPS = { stroke: 'var(--border)', strokeDasharray: '3 3', strokeWidth: 0.8 } as const;\n\n/**\n * Recharts `<Tooltip>` settings for the metrics charts, used with `ChartTooltipPosition`:\n * - No animation: the tooltip snaps to the hovered point, like the hover line and dots.\n * - `filterNull: false`: a bucket with no readings still gets a tooltip (with dashes); Recharts\n *   otherwise drops every empty reading and renders nothing.\n * - The wrapper stays at the chart's origin and may leave the plot; `ChartTooltipPosition` portals\n *   the box to `document.body` and places it there.\n */\nexport const CHART_TOOLTIP_PROPS = {\n  isAnimationActive: false,\n  filterNull: false,\n  position: { x: 0, y: 0 },\n  allowEscapeViewBox: { x: true, y: true },\n};\n\n/**\n * How x-axis labels are placed.\n * - `auto`: as many labels as fit the width, on round clock times (12 AM, 6 AM, ...) when the\n *   rows carry timestamps, so every chart on a page shares one time grid.\n * - `edges`: only the first and last bucket, pinned to the plot's edges (small cards).\n */\nexport type ChartXLabels = 'auto' | 'edges';\n\nexport type ChartSize = { width: number; height: number };\n\n/**\n * The chart's size, read before the first paint (so labels and the y tick count are right on\n * the first frame, no jump) and kept current by ResponsiveContainer's `onResize`.\n */\nexport function useChartSize() {\n  const ref = useRef<HTMLDivElement>(null);\n  const [size, setSize] = useState<ChartSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    const rect = ref.current?.getBoundingClientRect();\n    if (rect) setSize({ width: rect.width, height: rect.height });\n  }, []);\n  const onResize = (width: number, height: number) =>\n    setSize(prev => (prev.width === width && prev.height === height ? prev : { width, height }));\n  return { size, onResize, ref };\n}\n\n/** About one gridline per 48px of plot: 3 to 5 ticks. */\nexport function chartYTickCount(height: number) {\n  if (!height) return 3;\n  const plot = height - X_AXIS_HEIGHT - CHART_MARGIN.top;\n  return Math.min(5, Math.max(3, Math.round(plot / 48) + 1));\n}\n\n/** Round tick steps per power of ten. */\nconst NICE_STEPS = [1, 2, 2.5, 5];\n/** Fewest ticks an axis shows (0, a middle line, the top). */\nconst MIN_Y_TICKS = 3;\n\n/**\n * Round y ticks from 0 to just above `max`, at most `maxCount` of them. Of the round steps whose\n * tick count fits, the one with the lowest top wins (a $4.40 peak gets a $5 axis, not $8); a tie\n * takes the finer step. With `integer` (counts), only whole steps, so labels never round to\n * uneven values (2.5 printed as 3). Undefined when there's nothing to scale (no data, zeros,\n * negatives) or no step fits.\n */\nexport function niceYTicks(max: number, maxCount: number, integer = false): number[] | undefined {\n  if (!Number.isFinite(max) || max <= 0) return undefined;\n  const magnitude = 10 ** Math.floor(Math.log10(max));\n  let best: { top: number; step: number; count: number } | undefined;\n  for (const scale of [magnitude / 10, magnitude, magnitude * 10]) {\n    for (const nice of NICE_STEPS) {\n      const step = Number((nice * scale).toPrecision(12));\n      if (integer && !Number.isInteger(step)) continue;\n      // Rounding the ratio drops float noise (0.3 / 0.1) without letting the top fall under `max`.\n      const count = Math.ceil(Number((max / step).toPrecision(12))) + 1;\n      if (count < MIN_Y_TICKS || count > maxCount) continue;\n      const top = (count - 1) * step;\n      if (!best || top < best.top || (top === best.top && count > best.count)) best = { top, step, count };\n    }\n  }\n  if (!best) return undefined;\n  const { step, count } = best;\n  // toPrecision drops float noise (0.30000000000000004).\n  return Array.from({ length: count }, (_, i) => Number((i * step).toPrecision(12)));\n}\n\nconst MINUTE = 60_000;\nconst DAY = 24 * 60 * MINUTE;\n/** Round label steps, in minutes: 5m ... 30m, 1h ... 12h, then days and a week. */\nconst STEPS = [5, 10, 15, 30, 60, 120, 180, 240, 360, 720, 1440, 2880, 10080];\n/** Minimum clear space between two x-axis labels. */\nconst LABEL_GAP = 48;\n/** Rough label width at the axis font size. */\nexport const labelWidth = (text: string) => text.length * CHART_AXIS_FONT_SIZE * 0.58;\n\n/**\n * Which buckets get a label: the smallest round step whose labels fit the width, on the first\n * bucket at or after each clock-aligned time (hours divisible by the step, days on local\n * midnight or, for daily buckets, on their local date). Without\n * timestamps, evenly spaced buckets that fit; when fewer than three would show, just the\n * first and last bucket.\n */\nexport function pickTimeTicks(\n  timestamps: Array<number | undefined>,\n  labels: string[],\n  plotWidth: number,\n  mode: ChartXLabels = 'auto',\n): Set<number> {\n  const last = labels.length - 1;\n  if (last < 0) return new Set();\n  const ends = new Set([0, last]);\n  if (mode === 'edges' || labels.length < 3) return ends;\n  const widest = Math.max(...labels.map(l => labelWidth(l)));\n  const fit = Math.floor(plotWidth / (widest + LABEL_GAP));\n  if (fit < 3) return ends;\n  const ts = timestamps.every(isFiniteNumber) ? timestamps : undefined;\n  const bucket = ts ? (ts[1] ?? 0) - (ts[0] ?? 0) : 0;\n  // From the full range, so gaps (missing buckets) can't make the series look shorter.\n  const span = ts ? ((ts[last] ?? 0) - (ts[0] ?? 0) + bucket) / MINUTE : 0;\n  // The smallest round step that is a whole number of buckets and whose labels fit.\n  const step = ts ? STEPS.find(n => n * MINUTE >= bucket && (n * MINUTE) % bucket === 0 && span / n <= fit) : undefined;\n  if (!ts || !(bucket > 0) || step === undefined) {\n    // No time grid to align to (or buckets longer than a week): every `every`-th bucket,\n    // ending on the last one.\n    const every = Math.ceil(labels.length / fit);\n    const even = new Set<number>();\n    for (let i = 0; i <= last; i += every) even.add(i);\n    if (!even.has(last)) {\n      if (last % every < every / 2) even.delete(last - (last % every));\n      even.add(last);\n    }\n    return even.size < 3 ? ends : even;\n  }\n  const picked = new Set<number>();\n  const bucketMinutes = bucket / MINUTE;\n  ts.forEach((t, i) => {\n    const d = new Date(t);\n    const midnight = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();\n    // Buckets are cut on UTC, so in a zone off the step (Paris in winter, Kolkata) none starts on\n    // the round local time: label the first bucket that starts at or after it.\n    const sinceMidnight = (t - midnight) / MINUTE;\n    // Daily buckets align by local date.\n    const onClock = bucket >= DAY || sinceMidnight < bucketMinutes;\n    const onStep =\n      step < 1440 ? sinceMidnight % step < bucketMinutes : onClock && Math.round(midnight / DAY) % (step / 1440) === 0;\n    if (onStep) picked.add(i);\n  });\n  // Two clock labels land off-centre (one mid-plot, one at an edge): label the ends instead.\n  return picked.size < 3 ? ends : picked;\n}\n\nfunction isFiniteNumber(value: number | undefined): value is number {\n  return typeof value === 'number' && Number.isFinite(value);\n}\n"],"mappings":"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"}
+{"version":3,"file":"chart-axes.cjs.js","names":["useRef","useState","CHART_MARGIN"],"sources":["../../src/ds/primitives/chart-axes.ts"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport { CHART_AXIS_FONT_SIZE, CHART_MARGIN, X_AXIS_HEIGHT } from './chart-layout';\n\n/** Horizontal rulers: short dashes on the border color at half strength. */\nexport const CHART_GRID_PROPS = {\n  vertical: false,\n  stroke: 'var(--border)',\n  strokeDasharray: '3 3',\n  strokeOpacity: 0.5,\n} as const;\n\n/** Hover line of line charts: dashed like the grid, full border color, a hair thinner than a series. */\nexport const CHART_CURSOR_PROPS = { stroke: 'var(--border)', strokeDasharray: '3 3', strokeWidth: 0.8 } as const;\n\n/**\n * Recharts `<Tooltip>` settings for the metrics charts, used with `ChartTooltipPosition`:\n * - No animation: the tooltip snaps to the hovered point, like the hover line and dots.\n * - `filterNull: false`: a bucket with no readings still gets a tooltip (with dashes); Recharts\n *   otherwise drops every empty reading and renders nothing.\n * - The wrapper stays at the chart's origin and may leave the plot; `ChartTooltipPosition` portals\n *   the box to `document.body` and places it there.\n */\nexport const CHART_TOOLTIP_PROPS = {\n  isAnimationActive: false,\n  filterNull: false,\n  position: { x: 0, y: 0 },\n  allowEscapeViewBox: { x: true, y: true },\n};\n\n/**\n * How x-axis labels are placed.\n * - `auto`: as many labels as fit the width, on round clock times (12 AM, 6 AM, ...) when the\n *   rows carry timestamps, so every chart on a page shares one time grid.\n * - `edges`: only the first and last bucket, pinned to the plot's edges (small cards).\n */\nexport type ChartXLabels = 'auto' | 'edges';\n\nexport type ChartSize = { width: number; height: number };\n\n/**\n * The chart's size, read before the first paint (so labels and the y tick count are right on\n * the first frame, no jump) and kept current by ResponsiveContainer's `onResize`.\n */\nexport function useChartSize() {\n  const ref = useRef<HTMLDivElement>(null);\n  const [size, setSize] = useState<ChartSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    const rect = ref.current?.getBoundingClientRect();\n    if (rect) setSize({ width: rect.width, height: rect.height });\n  }, []);\n  const onResize = (width: number, height: number) =>\n    setSize(prev => (prev.width === width && prev.height === height ? prev : { width, height }));\n  return { size, onResize, ref };\n}\n\n/** About one gridline per 48px of plot: 3 to 5 ticks. */\nexport function chartYTickCount(height: number) {\n  if (!height) return 3;\n  const plot = height - X_AXIS_HEIGHT - CHART_MARGIN.top;\n  return Math.min(5, Math.max(3, Math.round(plot / 48) + 1));\n}\n\n/** Round tick steps per power of ten. */\nconst NICE_STEPS = [1, 2, 2.5, 5];\n/** Fewest ticks an axis shows (0, a middle line, the top). */\nconst MIN_Y_TICKS = 3;\n\n/**\n * Round y ticks from 0 to just above `max`, at most `maxCount` of them. Of the round steps whose\n * tick count fits, the one with the lowest top wins (a $4.40 peak gets a $5 axis, not $8); a tie\n * takes the finer step. With `integer` (counts), only whole steps, so labels never round to\n * uneven values (2.5 printed as 3). Undefined when there's nothing to scale (no data, zeros,\n * negatives) or no step fits.\n */\nexport function niceYTicks(max: number, maxCount: number, integer = false): number[] | undefined {\n  if (!Number.isFinite(max) || max <= 0) return undefined;\n  const magnitude = 10 ** Math.floor(Math.log10(max));\n  let best: { top: number; step: number; count: number } | undefined;\n  for (const scale of [magnitude / 10, magnitude, magnitude * 10]) {\n    for (const nice of NICE_STEPS) {\n      const step = Number((nice * scale).toPrecision(12));\n      if (integer && !Number.isInteger(step)) continue;\n      // Rounding the ratio drops float noise (0.3 / 0.1) without letting the top fall under `max`.\n      const count = Math.ceil(Number((max / step).toPrecision(12))) + 1;\n      if (count < MIN_Y_TICKS || count > maxCount) continue;\n      const top = (count - 1) * step;\n      if (!best || top < best.top || (top === best.top && count > best.count)) best = { top, step, count };\n    }\n  }\n  if (!best) return undefined;\n  const { step, count } = best;\n  // toPrecision drops float noise (0.30000000000000004).\n  return Array.from({ length: count }, (_, i) => Number((i * step).toPrecision(12)));\n}\n\nconst MINUTE = 60_000;\nconst DAY = 24 * 60 * MINUTE;\n/** Round label steps, in minutes: 5m ... 30m, 1h ... 12h, then days and a week. */\nconst STEPS = [5, 10, 15, 30, 60, 120, 180, 240, 360, 720, 1440, 2880, 10080];\n/** Minimum clear space between two x-axis labels. */\nconst LABEL_GAP = 48;\n/** Rough label width at the axis font size. */\nexport const labelWidth = (text: string) => text.length * CHART_AXIS_FONT_SIZE * 0.58;\n\nexport type TimeTickPlacement = { x: number; anchor: 'start' | 'middle' | 'end' };\n\n/**\n * Where a label goes: centred on its bucket, or pinned to the plot's edge when centring would\n * push it out. A pinned label anchors on that edge, so it ends exactly there whatever the font's\n * real widths (`labelWidth` is only an estimate).\n */\nexport function placeTimeTick({\n  x,\n  index,\n  offset = 0,\n  count,\n  plotWidth,\n  textWidth,\n}: {\n  x: number;\n  index: number;\n  /** Half a band (bars); 0 for points (lines). */\n  offset?: number;\n  count: number;\n  plotWidth: number;\n  textWidth: number;\n}): TimeTickPlacement {\n  // Bars sit in bands (label at the band's centre); lines sit on points (first at the edge).\n  const left = offset > 0 ? x - offset * (2 * index + 1) : x - (index * plotWidth) / Math.max(count - 1, 1);\n  const right = left + plotWidth;\n  const half = textWidth / 2;\n  if (x + half > right) return { x: right, anchor: 'end' };\n  if (x - half < left) return { x: left, anchor: 'start' };\n  return { x, anchor: 'middle' };\n}\n\n/**\n * Which buckets get a label: the smallest round step whose labels fit the width, on the first\n * bucket at or after each clock-aligned time (hours divisible by the step, days on local\n * midnight or, for daily buckets, on their local date). Without\n * timestamps, evenly spaced buckets that fit; when fewer than three would show, just the\n * first and last bucket.\n */\nexport function pickTimeTicks(\n  timestamps: Array<number | undefined>,\n  labels: string[],\n  plotWidth: number,\n  mode: ChartXLabels = 'auto',\n): Set<number> {\n  const last = labels.length - 1;\n  if (last < 0) return new Set();\n  const ends = new Set([0, last]);\n  if (mode === 'edges' || labels.length < 3) return ends;\n  const widest = Math.max(...labels.map(l => labelWidth(l)));\n  const fit = Math.floor(plotWidth / (widest + LABEL_GAP));\n  if (fit < 3) return ends;\n  const ts = timestamps.every(isFiniteNumber) ? timestamps : undefined;\n  const bucket = ts ? (ts[1] ?? 0) - (ts[0] ?? 0) : 0;\n  // From the full range, so gaps (missing buckets) can't make the series look shorter.\n  const span = ts ? ((ts[last] ?? 0) - (ts[0] ?? 0) + bucket) / MINUTE : 0;\n  // The smallest round step that is a whole number of buckets and whose labels fit.\n  const step = ts ? STEPS.find(n => n * MINUTE >= bucket && (n * MINUTE) % bucket === 0 && span / n <= fit) : undefined;\n  if (!ts || !(bucket > 0) || step === undefined) {\n    // No time grid to align to (or buckets longer than a week): every `every`-th bucket,\n    // ending on the last one.\n    const every = Math.ceil(labels.length / fit);\n    const even = new Set<number>();\n    for (let i = 0; i <= last; i += every) even.add(i);\n    if (!even.has(last)) {\n      if (last % every < every / 2) even.delete(last - (last % every));\n      even.add(last);\n    }\n    return even.size < 3 ? ends : even;\n  }\n  const picked = new Set<number>();\n  const bucketMinutes = bucket / MINUTE;\n  ts.forEach((t, i) => {\n    const d = new Date(t);\n    const midnight = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();\n    // Buckets are cut on UTC, so in a zone off the step (Paris in winter, Kolkata) none starts on\n    // the round local time: label the first bucket that starts at or after it.\n    const sinceMidnight = (t - midnight) / MINUTE;\n    // Daily buckets align by local date.\n    const onClock = bucket >= DAY || sinceMidnight < bucketMinutes;\n    const onStep =\n      step < 1440 ? sinceMidnight % step < bucketMinutes : onClock && Math.round(midnight / DAY) % (step / 1440) === 0;\n    if (onStep) picked.add(i);\n  });\n  // Two clock labels land off-centre (one mid-plot, one at an edge): label the ends instead.\n  return picked.size < 3 ? ends : picked;\n}\n\nfunction isFiniteNumber(value: number | undefined): value is number {\n  return typeof value === 'number' && Number.isFinite(value);\n}\n\nconst fmtDay = (ts: number) => new Date(ts).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });\n\n/**\n * Date-only labels for the two ends of an `edges` axis when the hour on them says nothing: buckets\n * shorter than a day whose first and last start at the same clock time on different days, as on\n * rolling ranges (last 24 hours, 3 days, 7 days). Same-day or uneven ends keep their labels.\n */\nexport function edgeDateLabels(timestamps: Array<number | undefined>, mode: ChartXLabels): Map<number, string> {\n  const last = timestamps.length - 1;\n  const [first, second] = timestamps;\n  const end = timestamps[last];\n  if (mode !== 'edges' || last < 1 || !isFiniteNumber(first) || !isFiniteNumber(end)) return new Map();\n  // Daily buckets are already labelled by date.\n  if (isFiniteNumber(second) && second - first >= DAY) return new Map();\n  const a = new Date(first);\n  const b = new Date(end);\n  const sameClock = a.getHours() === b.getHours() && a.getMinutes() === b.getMinutes();\n  if (!sameClock || a.toDateString() === b.toDateString()) return new Map();\n  return new Map([\n    [0, fmtDay(first)],\n    [last, fmtDay(end)],\n  ]);\n}\n"],"mappings":"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"}

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

@@ -130,6 +130,28 @@ var LABEL_GAP = 48;
 /** Rough label width at the axis font size. */
 var labelWidth = (text) => text.length * 11 * .58;
 /**
+* Where a label goes: centred on its bucket, or pinned to the plot's edge when centring would
+* push it out. A pinned label anchors on that edge, so it ends exactly there whatever the font's
+* real widths (`labelWidth` is only an estimate).
+*/
+function placeTimeTick({ x, index, offset = 0, count, plotWidth, textWidth }) {
+	const left = offset > 0 ? x - offset * (2 * index + 1) : x - index * plotWidth / Math.max(count - 1, 1);
+	const right = left + plotWidth;
+	const half = textWidth / 2;
+	if (x + half > right) return {
+		x: right,
+		anchor: "end"
+	};
+	if (x - half < left) return {
+		x: left,
+		anchor: "start"
+	};
+	return {
+		x,
+		anchor: "middle"
+	};
+}
+/**
 * Which buckets get a label: the smallest round step whose labels fit the width, on the first
 * bucket at or after each clock-aligned time (hours divisible by the step, days on local
 * midnight or, for daily buckets, on their local date). Without
@@ -171,6 +193,26 @@ function pickTimeTicks(timestamps, labels, plotWidth, mode = "auto") {
 function isFiniteNumber(value) {
 	return typeof value === "number" && Number.isFinite(value);
 }
-export { CHART_CURSOR_PROPS, CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, chartYTickCount, labelWidth, niceYTicks, pickTimeTicks, useChartSize };
+var fmtDay = (ts) => new Date(ts).toLocaleDateString("en-US", {
+	month: "short",
+	day: "numeric"
+});
+/**
+* Date-only labels for the two ends of an `edges` axis when the hour on them says nothing: buckets
+* shorter than a day whose first and last start at the same clock time on different days, as on
+* rolling ranges (last 24 hours, 3 days, 7 days). Same-day or uneven ends keep their labels.
+*/
+function edgeDateLabels(timestamps, mode) {
+	const last = timestamps.length - 1;
+	const [first, second] = timestamps;
+	const end = timestamps[last];
+	if (mode !== "edges" || last < 1 || !isFiniteNumber(first) || !isFiniteNumber(end)) return /* @__PURE__ */ new Map();
+	if (isFiniteNumber(second) && second - first >= DAY) return /* @__PURE__ */ new Map();
+	const a = new Date(first);
+	const b = new Date(end);
+	if (!(a.getHours() === b.getHours() && a.getMinutes() === b.getMinutes()) || a.toDateString() === b.toDateString()) return /* @__PURE__ */ new Map();
+	return /* @__PURE__ */ new Map([[0, fmtDay(first)], [last, fmtDay(end)]]);
+}
+export { CHART_CURSOR_PROPS, CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, chartYTickCount, edgeDateLabels, labelWidth, niceYTicks, pickTimeTicks, placeTimeTick, useChartSize };
 
 //# sourceMappingURL=chart-axes.es.js.map

package/dist/primitives/chart-axes.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-axes.es.js","names":[],"sources":["../../src/ds/primitives/chart-axes.ts"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport { CHART_AXIS_FONT_SIZE, CHART_MARGIN, X_AXIS_HEIGHT } from './chart-layout';\n\n/** Horizontal rulers: short dashes on the border color at half strength. */\nexport const CHART_GRID_PROPS = {\n  vertical: false,\n  stroke: 'var(--border)',\n  strokeDasharray: '3 3',\n  strokeOpacity: 0.5,\n} as const;\n\n/** Hover line of line charts: dashed like the grid, full border color, a hair thinner than a series. */\nexport const CHART_CURSOR_PROPS = { stroke: 'var(--border)', strokeDasharray: '3 3', strokeWidth: 0.8 } as const;\n\n/**\n * Recharts `<Tooltip>` settings for the metrics charts, used with `ChartTooltipPosition`:\n * - No animation: the tooltip snaps to the hovered point, like the hover line and dots.\n * - `filterNull: false`: a bucket with no readings still gets a tooltip (with dashes); Recharts\n *   otherwise drops every empty reading and renders nothing.\n * - The wrapper stays at the chart's origin and may leave the plot; `ChartTooltipPosition` portals\n *   the box to `document.body` and places it there.\n */\nexport const CHART_TOOLTIP_PROPS = {\n  isAnimationActive: false,\n  filterNull: false,\n  position: { x: 0, y: 0 },\n  allowEscapeViewBox: { x: true, y: true },\n};\n\n/**\n * How x-axis labels are placed.\n * - `auto`: as many labels as fit the width, on round clock times (12 AM, 6 AM, ...) when the\n *   rows carry timestamps, so every chart on a page shares one time grid.\n * - `edges`: only the first and last bucket, pinned to the plot's edges (small cards).\n */\nexport type ChartXLabels = 'auto' | 'edges';\n\nexport type ChartSize = { width: number; height: number };\n\n/**\n * The chart's size, read before the first paint (so labels and the y tick count are right on\n * the first frame, no jump) and kept current by ResponsiveContainer's `onResize`.\n */\nexport function useChartSize() {\n  const ref = useRef<HTMLDivElement>(null);\n  const [size, setSize] = useState<ChartSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    const rect = ref.current?.getBoundingClientRect();\n    if (rect) setSize({ width: rect.width, height: rect.height });\n  }, []);\n  const onResize = (width: number, height: number) =>\n    setSize(prev => (prev.width === width && prev.height === height ? prev : { width, height }));\n  return { size, onResize, ref };\n}\n\n/** About one gridline per 48px of plot: 3 to 5 ticks. */\nexport function chartYTickCount(height: number) {\n  if (!height) return 3;\n  const plot = height - X_AXIS_HEIGHT - CHART_MARGIN.top;\n  return Math.min(5, Math.max(3, Math.round(plot / 48) + 1));\n}\n\n/** Round tick steps per power of ten. */\nconst NICE_STEPS = [1, 2, 2.5, 5];\n/** Fewest ticks an axis shows (0, a middle line, the top). */\nconst MIN_Y_TICKS = 3;\n\n/**\n * Round y ticks from 0 to just above `max`, at most `maxCount` of them. Of the round steps whose\n * tick count fits, the one with the lowest top wins (a $4.40 peak gets a $5 axis, not $8); a tie\n * takes the finer step. With `integer` (counts), only whole steps, so labels never round to\n * uneven values (2.5 printed as 3). Undefined when there's nothing to scale (no data, zeros,\n * negatives) or no step fits.\n */\nexport function niceYTicks(max: number, maxCount: number, integer = false): number[] | undefined {\n  if (!Number.isFinite(max) || max <= 0) return undefined;\n  const magnitude = 10 ** Math.floor(Math.log10(max));\n  let best: { top: number; step: number; count: number } | undefined;\n  for (const scale of [magnitude / 10, magnitude, magnitude * 10]) {\n    for (const nice of NICE_STEPS) {\n      const step = Number((nice * scale).toPrecision(12));\n      if (integer && !Number.isInteger(step)) continue;\n      // Rounding the ratio drops float noise (0.3 / 0.1) without letting the top fall under `max`.\n      const count = Math.ceil(Number((max / step).toPrecision(12))) + 1;\n      if (count < MIN_Y_TICKS || count > maxCount) continue;\n      const top = (count - 1) * step;\n      if (!best || top < best.top || (top === best.top && count > best.count)) best = { top, step, count };\n    }\n  }\n  if (!best) return undefined;\n  const { step, count } = best;\n  // toPrecision drops float noise (0.30000000000000004).\n  return Array.from({ length: count }, (_, i) => Number((i * step).toPrecision(12)));\n}\n\nconst MINUTE = 60_000;\nconst DAY = 24 * 60 * MINUTE;\n/** Round label steps, in minutes: 5m ... 30m, 1h ... 12h, then days and a week. */\nconst STEPS = [5, 10, 15, 30, 60, 120, 180, 240, 360, 720, 1440, 2880, 10080];\n/** Minimum clear space between two x-axis labels. */\nconst LABEL_GAP = 48;\n/** Rough label width at the axis font size. */\nexport const labelWidth = (text: string) => text.length * CHART_AXIS_FONT_SIZE * 0.58;\n\n/**\n * Which buckets get a label: the smallest round step whose labels fit the width, on the first\n * bucket at or after each clock-aligned time (hours divisible by the step, days on local\n * midnight or, for daily buckets, on their local date). Without\n * timestamps, evenly spaced buckets that fit; when fewer than three would show, just the\n * first and last bucket.\n */\nexport function pickTimeTicks(\n  timestamps: Array<number | undefined>,\n  labels: string[],\n  plotWidth: number,\n  mode: ChartXLabels = 'auto',\n): Set<number> {\n  const last = labels.length - 1;\n  if (last < 0) return new Set();\n  const ends = new Set([0, last]);\n  if (mode === 'edges' || labels.length < 3) return ends;\n  const widest = Math.max(...labels.map(l => labelWidth(l)));\n  const fit = Math.floor(plotWidth / (widest + LABEL_GAP));\n  if (fit < 3) return ends;\n  const ts = timestamps.every(isFiniteNumber) ? timestamps : undefined;\n  const bucket = ts ? (ts[1] ?? 0) - (ts[0] ?? 0) : 0;\n  // From the full range, so gaps (missing buckets) can't make the series look shorter.\n  const span = ts ? ((ts[last] ?? 0) - (ts[0] ?? 0) + bucket) / MINUTE : 0;\n  // The smallest round step that is a whole number of buckets and whose labels fit.\n  const step = ts ? STEPS.find(n => n * MINUTE >= bucket && (n * MINUTE) % bucket === 0 && span / n <= fit) : undefined;\n  if (!ts || !(bucket > 0) || step === undefined) {\n    // No time grid to align to (or buckets longer than a week): every `every`-th bucket,\n    // ending on the last one.\n    const every = Math.ceil(labels.length / fit);\n    const even = new Set<number>();\n    for (let i = 0; i <= last; i += every) even.add(i);\n    if (!even.has(last)) {\n      if (last % every < every / 2) even.delete(last - (last % every));\n      even.add(last);\n    }\n    return even.size < 3 ? ends : even;\n  }\n  const picked = new Set<number>();\n  const bucketMinutes = bucket / MINUTE;\n  ts.forEach((t, i) => {\n    const d = new Date(t);\n    const midnight = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();\n    // Buckets are cut on UTC, so in a zone off the step (Paris in winter, Kolkata) none starts on\n    // the round local time: label the first bucket that starts at or after it.\n    const sinceMidnight = (t - midnight) / MINUTE;\n    // Daily buckets align by local date.\n    const onClock = bucket >= DAY || sinceMidnight < bucketMinutes;\n    const onStep =\n      step < 1440 ? sinceMidnight % step < bucketMinutes : onClock && Math.round(midnight / DAY) % (step / 1440) === 0;\n    if (onStep) picked.add(i);\n  });\n  // Two clock labels land off-centre (one mid-plot, one at an edge): label the ends instead.\n  return picked.size < 3 ? ends : picked;\n}\n\nfunction isFiniteNumber(value: number | undefined): value is number {\n  return typeof value === 'number' && Number.isFinite(value);\n}\n"],"mappings":";;;;AAIA,IAAa,mBAAmB;CAC9B,UAAU;CACV,QAAQ;CACR,iBAAiB;CACjB,eAAe;AACjB;;AAGA,IAAa,qBAAqB;CAAE,QAAQ;CAAiB,iBAAiB;CAAO,aAAa;AAAI;;;;;;;;;AAUtG,IAAa,sBAAsB;CACjC,mBAAmB;CACnB,YAAY;CACZ,UAAU;EAAE,GAAG;EAAG,GAAG;CAAE;CACvB,oBAAoB;EAAE,GAAG;EAAM,GAAG;CAAK;AACzC;;;;;AAgBA,SAAgB,eAAe;CAC7B,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,CAAC,MAAM,WAAW,SAAoB;EAAE,OAAO;EAAG,QAAQ;CAAE,CAAC;CACnE,sBAAsB;EACpB,MAAM,OAAO,IAAI,SAAS,sBAAsB;EAChD,IAAI,MAAM,QAAQ;GAAE,OAAO,KAAK;GAAO,QAAQ,KAAK;EAAO,CAAC;CAC9D,GAAG,CAAC,CAAC;CACL,MAAM,YAAY,OAAe,WAC/B,SAAQ,SAAS,KAAK,UAAU,SAAS,KAAK,WAAW,SAAS,OAAO;EAAE;EAAO;CAAO,CAAE;CAC7F,OAAO;EAAE;EAAM;EAAU;CAAI;AAC/B;;AAGA,SAAgB,gBAAgB,QAAgB;CAC9C,IAAI,CAAC,QAAQ,OAAO;CACpB,MAAM,OAAO,SAAA,KAAyB,aAAa;CACnD,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,EAAE,IAAI,CAAC,CAAC;AAC3D;;AAGA,IAAM,aAAa;CAAC;CAAG;CAAG;CAAK;AAAC;;AAEhC,IAAM,cAAc;;;;;;;;AASpB,SAAgB,WAAW,KAAa,UAAkB,UAAU,OAA6B;CAC/F,IAAI,CAAC,OAAO,SAAS,GAAG,KAAK,OAAO,GAAG,OAAO,KAAA;CAC9C,MAAM,YAAY,MAAM,KAAK,MAAM,KAAK,MAAM,GAAG,CAAC;CAClD,IAAI;CACJ,KAAK,MAAM,SAAS;EAAC,YAAY;EAAI;EAAW,YAAY;CAAE,GAC5D,KAAK,MAAM,QAAQ,YAAY;EAC7B,MAAM,OAAO,QAAQ,OAAO,MAAA,CAAO,YAAY,EAAE,CAAC;EAClD,IAAI,WAAW,CAAC,OAAO,UAAU,IAAI,GAAG;EAExC,MAAM,QAAQ,KAAK,KAAK,QAAQ,MAAM,KAAA,CAAM,YAAY,EAAE,CAAC,CAAC,IAAI;EAChE,IAAI,QAAQ,eAAe,QAAQ,UAAU;EAC7C,MAAM,OAAO,QAAQ,KAAK;EAC1B,IAAI,CAAC,QAAQ,MAAM,KAAK,OAAQ,QAAQ,KAAK,OAAO,QAAQ,KAAK,OAAQ,OAAO;GAAE;GAAK;GAAM;EAAM;CACrG;CAEF,IAAI,CAAC,MAAM,OAAO,KAAA;CAClB,MAAM,EAAE,MAAM,UAAU;CAExB,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,MAAM,QAAQ,IAAI,KAAA,CAAM,YAAY,EAAE,CAAC,CAAC;AACnF;AAEA,IAAM,SAAS;AACf,IAAM,MAAM,OAAU;;AAEtB,IAAM,QAAQ;CAAC;CAAG;CAAI;CAAI;CAAI;CAAI;CAAK;CAAK;CAAK;CAAK;CAAK;CAAM;CAAM;AAAK;;AAE5E,IAAM,YAAY;;AAElB,IAAa,cAAc,SAAiB,KAAK,SAAA,KAAgC;;;;;;;;AASjF,SAAgB,cACd,YACA,QACA,WACA,OAAqB,QACR;CACb,MAAM,OAAO,OAAO,SAAS;CAC7B,IAAI,OAAO,GAAG,uBAAO,IAAI,IAAI;CAC7B,MAAM,uBAAO,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC;CAC9B,IAAI,SAAS,WAAW,OAAO,SAAS,GAAG,OAAO;CAClD,MAAM,SAAS,KAAK,IAAI,GAAG,OAAO,KAAI,MAAK,WAAW,CAAC,CAAC,CAAC;CACzD,MAAM,MAAM,KAAK,MAAM,aAAa,SAAS,UAAU;CACvD,IAAI,MAAM,GAAG,OAAO;CACpB,MAAM,KAAK,WAAW,MAAM,cAAc,IAAI,aAAa,KAAA;CAC3D,MAAM,SAAS,MAAM,GAAG,MAAM,MAAM,GAAG,MAAM,KAAK;CAElD,MAAM,OAAO,OAAO,GAAG,SAAS,MAAM,GAAG,MAAM,KAAK,UAAU,SAAS;CAEvE,MAAM,OAAO,KAAK,MAAM,MAAK,MAAK,IAAI,UAAU,UAAW,IAAI,SAAU,WAAW,KAAK,OAAO,KAAK,GAAG,IAAI,KAAA;CAC5G,IAAI,CAAC,MAAM,EAAE,SAAS,MAAM,SAAS,KAAA,GAAW;EAG9C,MAAM,QAAQ,KAAK,KAAK,OAAO,SAAS,GAAG;EAC3C,MAAM,uBAAO,IAAI,IAAY;EAC7B,KAAK,IAAI,IAAI,GAAG,KAAK,MAAM,KAAK,OAAO,KAAK,IAAI,CAAC;EACjD,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG;GACnB,IAAI,OAAO,QAAQ,QAAQ,GAAG,KAAK,OAAO,OAAQ,OAAO,KAAM;GAC/D,KAAK,IAAI,IAAI;EACf;EACA,OAAO,KAAK,OAAO,IAAI,OAAO;CAChC;CACA,MAAM,yBAAS,IAAI,IAAY;CAC/B,MAAM,gBAAgB,SAAS;CAC/B,GAAG,SAAS,GAAG,MAAM;EACnB,MAAM,IAAI,IAAI,KAAK,CAAC;EACpB,MAAM,WAAW,IAAI,KAAK,EAAE,YAAY,GAAG,EAAE,SAAS,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ;EAG9E,MAAM,iBAAiB,IAAI,YAAY;EAKvC,IADE,OAAO,OAAO,gBAAgB,OAAO,iBAFvB,UAAU,OAAO,gBAAgB,kBAEiB,KAAK,MAAM,WAAW,GAAG,KAAK,OAAO,UAAU,GACrG,OAAO,IAAI,CAAC;CAC1B,CAAC;CAED,OAAO,OAAO,OAAO,IAAI,OAAO;AAClC;AAEA,SAAS,eAAe,OAA4C;CAClE,OAAO,OAAO,UAAU,YAAY,OAAO,SAAS,KAAK;AAC3D"}
+{"version":3,"file":"chart-axes.es.js","names":[],"sources":["../../src/ds/primitives/chart-axes.ts"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport { CHART_AXIS_FONT_SIZE, CHART_MARGIN, X_AXIS_HEIGHT } from './chart-layout';\n\n/** Horizontal rulers: short dashes on the border color at half strength. */\nexport const CHART_GRID_PROPS = {\n  vertical: false,\n  stroke: 'var(--border)',\n  strokeDasharray: '3 3',\n  strokeOpacity: 0.5,\n} as const;\n\n/** Hover line of line charts: dashed like the grid, full border color, a hair thinner than a series. */\nexport const CHART_CURSOR_PROPS = { stroke: 'var(--border)', strokeDasharray: '3 3', strokeWidth: 0.8 } as const;\n\n/**\n * Recharts `<Tooltip>` settings for the metrics charts, used with `ChartTooltipPosition`:\n * - No animation: the tooltip snaps to the hovered point, like the hover line and dots.\n * - `filterNull: false`: a bucket with no readings still gets a tooltip (with dashes); Recharts\n *   otherwise drops every empty reading and renders nothing.\n * - The wrapper stays at the chart's origin and may leave the plot; `ChartTooltipPosition` portals\n *   the box to `document.body` and places it there.\n */\nexport const CHART_TOOLTIP_PROPS = {\n  isAnimationActive: false,\n  filterNull: false,\n  position: { x: 0, y: 0 },\n  allowEscapeViewBox: { x: true, y: true },\n};\n\n/**\n * How x-axis labels are placed.\n * - `auto`: as many labels as fit the width, on round clock times (12 AM, 6 AM, ...) when the\n *   rows carry timestamps, so every chart on a page shares one time grid.\n * - `edges`: only the first and last bucket, pinned to the plot's edges (small cards).\n */\nexport type ChartXLabels = 'auto' | 'edges';\n\nexport type ChartSize = { width: number; height: number };\n\n/**\n * The chart's size, read before the first paint (so labels and the y tick count are right on\n * the first frame, no jump) and kept current by ResponsiveContainer's `onResize`.\n */\nexport function useChartSize() {\n  const ref = useRef<HTMLDivElement>(null);\n  const [size, setSize] = useState<ChartSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    const rect = ref.current?.getBoundingClientRect();\n    if (rect) setSize({ width: rect.width, height: rect.height });\n  }, []);\n  const onResize = (width: number, height: number) =>\n    setSize(prev => (prev.width === width && prev.height === height ? prev : { width, height }));\n  return { size, onResize, ref };\n}\n\n/** About one gridline per 48px of plot: 3 to 5 ticks. */\nexport function chartYTickCount(height: number) {\n  if (!height) return 3;\n  const plot = height - X_AXIS_HEIGHT - CHART_MARGIN.top;\n  return Math.min(5, Math.max(3, Math.round(plot / 48) + 1));\n}\n\n/** Round tick steps per power of ten. */\nconst NICE_STEPS = [1, 2, 2.5, 5];\n/** Fewest ticks an axis shows (0, a middle line, the top). */\nconst MIN_Y_TICKS = 3;\n\n/**\n * Round y ticks from 0 to just above `max`, at most `maxCount` of them. Of the round steps whose\n * tick count fits, the one with the lowest top wins (a $4.40 peak gets a $5 axis, not $8); a tie\n * takes the finer step. With `integer` (counts), only whole steps, so labels never round to\n * uneven values (2.5 printed as 3). Undefined when there's nothing to scale (no data, zeros,\n * negatives) or no step fits.\n */\nexport function niceYTicks(max: number, maxCount: number, integer = false): number[] | undefined {\n  if (!Number.isFinite(max) || max <= 0) return undefined;\n  const magnitude = 10 ** Math.floor(Math.log10(max));\n  let best: { top: number; step: number; count: number } | undefined;\n  for (const scale of [magnitude / 10, magnitude, magnitude * 10]) {\n    for (const nice of NICE_STEPS) {\n      const step = Number((nice * scale).toPrecision(12));\n      if (integer && !Number.isInteger(step)) continue;\n      // Rounding the ratio drops float noise (0.3 / 0.1) without letting the top fall under `max`.\n      const count = Math.ceil(Number((max / step).toPrecision(12))) + 1;\n      if (count < MIN_Y_TICKS || count > maxCount) continue;\n      const top = (count - 1) * step;\n      if (!best || top < best.top || (top === best.top && count > best.count)) best = { top, step, count };\n    }\n  }\n  if (!best) return undefined;\n  const { step, count } = best;\n  // toPrecision drops float noise (0.30000000000000004).\n  return Array.from({ length: count }, (_, i) => Number((i * step).toPrecision(12)));\n}\n\nconst MINUTE = 60_000;\nconst DAY = 24 * 60 * MINUTE;\n/** Round label steps, in minutes: 5m ... 30m, 1h ... 12h, then days and a week. */\nconst STEPS = [5, 10, 15, 30, 60, 120, 180, 240, 360, 720, 1440, 2880, 10080];\n/** Minimum clear space between two x-axis labels. */\nconst LABEL_GAP = 48;\n/** Rough label width at the axis font size. */\nexport const labelWidth = (text: string) => text.length * CHART_AXIS_FONT_SIZE * 0.58;\n\nexport type TimeTickPlacement = { x: number; anchor: 'start' | 'middle' | 'end' };\n\n/**\n * Where a label goes: centred on its bucket, or pinned to the plot's edge when centring would\n * push it out. A pinned label anchors on that edge, so it ends exactly there whatever the font's\n * real widths (`labelWidth` is only an estimate).\n */\nexport function placeTimeTick({\n  x,\n  index,\n  offset = 0,\n  count,\n  plotWidth,\n  textWidth,\n}: {\n  x: number;\n  index: number;\n  /** Half a band (bars); 0 for points (lines). */\n  offset?: number;\n  count: number;\n  plotWidth: number;\n  textWidth: number;\n}): TimeTickPlacement {\n  // Bars sit in bands (label at the band's centre); lines sit on points (first at the edge).\n  const left = offset > 0 ? x - offset * (2 * index + 1) : x - (index * plotWidth) / Math.max(count - 1, 1);\n  const right = left + plotWidth;\n  const half = textWidth / 2;\n  if (x + half > right) return { x: right, anchor: 'end' };\n  if (x - half < left) return { x: left, anchor: 'start' };\n  return { x, anchor: 'middle' };\n}\n\n/**\n * Which buckets get a label: the smallest round step whose labels fit the width, on the first\n * bucket at or after each clock-aligned time (hours divisible by the step, days on local\n * midnight or, for daily buckets, on their local date). Without\n * timestamps, evenly spaced buckets that fit; when fewer than three would show, just the\n * first and last bucket.\n */\nexport function pickTimeTicks(\n  timestamps: Array<number | undefined>,\n  labels: string[],\n  plotWidth: number,\n  mode: ChartXLabels = 'auto',\n): Set<number> {\n  const last = labels.length - 1;\n  if (last < 0) return new Set();\n  const ends = new Set([0, last]);\n  if (mode === 'edges' || labels.length < 3) return ends;\n  const widest = Math.max(...labels.map(l => labelWidth(l)));\n  const fit = Math.floor(plotWidth / (widest + LABEL_GAP));\n  if (fit < 3) return ends;\n  const ts = timestamps.every(isFiniteNumber) ? timestamps : undefined;\n  const bucket = ts ? (ts[1] ?? 0) - (ts[0] ?? 0) : 0;\n  // From the full range, so gaps (missing buckets) can't make the series look shorter.\n  const span = ts ? ((ts[last] ?? 0) - (ts[0] ?? 0) + bucket) / MINUTE : 0;\n  // The smallest round step that is a whole number of buckets and whose labels fit.\n  const step = ts ? STEPS.find(n => n * MINUTE >= bucket && (n * MINUTE) % bucket === 0 && span / n <= fit) : undefined;\n  if (!ts || !(bucket > 0) || step === undefined) {\n    // No time grid to align to (or buckets longer than a week): every `every`-th bucket,\n    // ending on the last one.\n    const every = Math.ceil(labels.length / fit);\n    const even = new Set<number>();\n    for (let i = 0; i <= last; i += every) even.add(i);\n    if (!even.has(last)) {\n      if (last % every < every / 2) even.delete(last - (last % every));\n      even.add(last);\n    }\n    return even.size < 3 ? ends : even;\n  }\n  const picked = new Set<number>();\n  const bucketMinutes = bucket / MINUTE;\n  ts.forEach((t, i) => {\n    const d = new Date(t);\n    const midnight = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();\n    // Buckets are cut on UTC, so in a zone off the step (Paris in winter, Kolkata) none starts on\n    // the round local time: label the first bucket that starts at or after it.\n    const sinceMidnight = (t - midnight) / MINUTE;\n    // Daily buckets align by local date.\n    const onClock = bucket >= DAY || sinceMidnight < bucketMinutes;\n    const onStep =\n      step < 1440 ? sinceMidnight % step < bucketMinutes : onClock && Math.round(midnight / DAY) % (step / 1440) === 0;\n    if (onStep) picked.add(i);\n  });\n  // Two clock labels land off-centre (one mid-plot, one at an edge): label the ends instead.\n  return picked.size < 3 ? ends : picked;\n}\n\nfunction isFiniteNumber(value: number | undefined): value is number {\n  return typeof value === 'number' && Number.isFinite(value);\n}\n\nconst fmtDay = (ts: number) => new Date(ts).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });\n\n/**\n * Date-only labels for the two ends of an `edges` axis when the hour on them says nothing: buckets\n * shorter than a day whose first and last start at the same clock time on different days, as on\n * rolling ranges (last 24 hours, 3 days, 7 days). Same-day or uneven ends keep their labels.\n */\nexport function edgeDateLabels(timestamps: Array<number | undefined>, mode: ChartXLabels): Map<number, string> {\n  const last = timestamps.length - 1;\n  const [first, second] = timestamps;\n  const end = timestamps[last];\n  if (mode !== 'edges' || last < 1 || !isFiniteNumber(first) || !isFiniteNumber(end)) return new Map();\n  // Daily buckets are already labelled by date.\n  if (isFiniteNumber(second) && second - first >= DAY) return new Map();\n  const a = new Date(first);\n  const b = new Date(end);\n  const sameClock = a.getHours() === b.getHours() && a.getMinutes() === b.getMinutes();\n  if (!sameClock || a.toDateString() === b.toDateString()) return new Map();\n  return new Map([\n    [0, fmtDay(first)],\n    [last, fmtDay(end)],\n  ]);\n}\n"],"mappings":"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"}

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

@@ -22,14 +22,15 @@ function timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth }) {
 		return typeof t === "number" ? t : void 0;
 	});
 	const picked = require_primitives_chart_axes.pickTimeTicks(timestamps, labels, plotWidth, xLabels);
+	const edgeLabels = require_primitives_chart_axes.edgeDateLabels(timestamps, xLabels);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.XAxis, {
 		dataKey: xKey,
 		height: 22,
 		tick: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_chart_time_tick.ChartTimeTick, {
 			...props,
 			picked,
-			count: data.length,
-			plotWidth
+			labels: edgeLabels,
+			count: data.length
 		}),
 		tickLine: false,
 		axisLine: false,
@@ -39,7 +40,8 @@ function timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth }) {
 }
 /**
 * Room the y-axis labels take at most. The axis itself is as wide as its longest label, so the
-* labels line up with the card's content; this only sizes the plot for spacing the x labels.
+* labels line up with the card's content; this only estimates the plot width for how many x
+* labels fit. The labels themselves pin to the plot's real edges (Recharts' axis width).
 */
 var Y_AXIS_WIDTH = 44;
 function valueYAxis({ id = 0, show, size, formatter, domain, max, integer = false, right = false }) {