@eifi1/ui-kit 0.8.1 → 0.10.0

package/src/components/menu-item.tsx

@@ -0,0 +1,214 @@
+import { forwardRef } from "react";
+import type { MouseEvent, ReactElement, ReactNode, Ref } from "react";
+import { Check } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { cn } from "../lib/cn";
+
+/**
+ * `TOPBAR_MENU_ITEM_CLASS`'s row, spelled out rather than imported: a component does
+ * not reach up into the shell (the same call `Disclosure`'s menu variant made). A test
+ * holds the two to the same classes, so a menu mixing `MenuItem`s with the shell's own
+ * rows (`TopBarActionMenu`, `OptionSwitcherMenu`) cannot drift into two looks.
+ */
+const MENU_ITEM_ROW =
+  "flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]";
+
+/** HoverMenu moves focus onto items with the arrow keys; a pointer user never sees the
+ *  ring, a keyboard user always does. Inset, because the panel clips its children. */
+const MENU_ITEM_FOCUS =
+  "focus-visible:outline-none focus-visible:bg-[var(--bg-hover)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]";
+
+export type MenuItemTone = "default" | "danger";
+
+/** What {@link MenuItemProps.renderLink} is handed. Spread it onto your router's link,
+ *  mapping `href` to what the link calls it —
+ *  `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */
+export interface MenuItemLinkProps {
+  href: string;
+  className: string;
+  children: ReactNode;
+  role: "menuitem";
+  ref?: Ref<HTMLAnchorElement>;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  "aria-current"?: "page";
+  id?: string;
+  [key: `aria-${string}`]: string | boolean | number | undefined;
+  [key: `data-${string}`]: unknown;
+}
+
+interface MenuItemBaseProps {
+  /** The row's text. */
+  children: ReactNode;
+  /** An icon before the label, drawn at the menu's 16px. */
+  icon?: LucideIcon;
+  /** Anything else before the label — an avatar, a flag — when a Lucide icon will not do. */
+  leading?: ReactNode;
+  /** After the label, at the row's end: a shortcut, a count, a badge. */
+  trailing?: ReactNode;
+  /** `danger` for the row that destroys or signs out. Colour is not the whole message:
+   *  the label must still say what the row does. */
+  tone?: MenuItemTone;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+  [key: `aria-${string}`]: string | boolean | number | undefined;
+  [key: `data-${string}`]: unknown;
+}
+
+/**
+ * A menu row is a button OR a link, and only the button can be CHECKED: a checked link
+ * is a link to where you already are, which is `current`, not a selection.
+ */
+export type MenuItemProps = MenuItemBaseProps &
+  (
+    | {
+        href?: never;
+        renderLink?: never;
+        current?: never;
+        /** Runs the row. Close the menu from here — `HoverMenu` hands its `close` to
+         *  the render prop that draws the rows. */
+        onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+        /**
+         * Makes the row a CHOICE and says whether it is chosen. Leave it undefined for a
+         * plain command; `false` is a choice that is not chosen, which is different.
+         * A check mark is drawn at the end when it is on.
+         */
+        checked?: boolean;
+        /**
+         * What kind of choice, when `checked` is given:
+         *
+         * - `radio` (default): one of a set — keksdose's budget switcher
+         *   (budget-switcher.tsx:51), the theme and language pickers. `menuitemradio`.
+         * - `checkbox`: an independent on/off — "Show archived". `menuitemcheckbox`.
+         *
+         * Not `aria-pressed`: that belongs to a toggle BUTTON, and inside a
+         * `role="menu"` a screen reader expects the menu roles and reads "checked"
+         * only from them. A button with `aria-pressed` in a menu is announced as a
+         * button in a menu, which is two widgets in one.
+         */
+        checkable?: "radio" | "checkbox";
+      }
+    | {
+        /** Makes the row a link — keksdose's "Manage budgets" and account-menu rows. */
+        href: string;
+        /** Renders the link — pass your router's `<Link>`, since a plain `<a>` reloads
+         *  a single-page app. Default `<a>`. The same API as `Chip` and `StatTile`. */
+        renderLink?: (props: MenuItemLinkProps) => ReactElement;
+        /** Runs on the way (close the menu). */
+        onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+        /** The link to the page already open: `aria-current="page"` and a check mark. */
+        current?: boolean;
+        checked?: never;
+        checkable?: never;
+      }
+  );
+
+/**
+ * One row of a `HoverMenu` / `TopBarActionMenu` panel.
+ *
+ * keksdose's account menu and budget switcher each rebuild this row by hand — the
+ * shell's class, an icon, a label, a badge, a check mark on the active budget — and the
+ * check mark was the only thing saying which budget was active, so a screen reader
+ * heard four identical buttons. This row says it (`menuitemradio` + `aria-checked`).
+ *
+ * The role is set HERE rather than left to `HoverMenu`, which promotes only role-less
+ * buttons and links to `menuitem`: a checked row must be `menuitemradio` or
+ * `menuitemcheckbox` from its first render, and `HoverMenu` leaves an element that
+ * already has a role alone — so its roving focus (↑/↓, Home/End) picks these rows up
+ * with the rest. Render it inside an `<li>` like the shell's own rows; `HoverMenu`
+ * turns the list markup into `role="none"`.
+ */
+export const MenuItem = forwardRef<HTMLElement, MenuItemProps>(function MenuItem(
+  {
+    children,
+    icon: Icon,
+    leading,
+    trailing,
+    tone = "default",
+    disabled = false,
+    className,
+    href,
+    renderLink,
+    onClick,
+    checked,
+    checkable,
+    current,
+    ...rest
+  },
+  ref,
+) {
+  const on = href !== undefined ? !!current : !!checked;
+  const look = cn(
+    MENU_ITEM_ROW,
+    MENU_ITEM_FOCUS,
+    tone === "danger" && "text-[var(--danger)] hover:bg-[var(--danger-bg)] focus-visible:bg-[var(--danger-bg)]",
+    disabled && "cursor-default opacity-50 hover:bg-transparent",
+    className,
+  );
+  const body = (
+    <>
+      <span className="flex min-w-0 items-center gap-2">
+        {Icon && <Icon className="size-4 shrink-0" aria-hidden />}
+        {leading}
+        <span className="min-w-0 truncate">{children}</span>
+      </span>
+      {(trailing != null || on) && (
+        <span className="flex shrink-0 items-center gap-2">
+          {trailing}
+          {on && <Check className="size-4 text-[var(--text-secondary)]" aria-hidden />}
+        </span>
+      )}
+    </>
+  );
+
+  if (href !== undefined && !disabled) {
+    const linkProps: MenuItemLinkProps = {
+      ...rest,
+      ref: ref as Ref<HTMLAnchorElement>,
+      href,
+      role: "menuitem",
+      className: look,
+      onClick: onClick as MenuItemLinkProps["onClick"],
+      "aria-current": current ? "page" : undefined,
+      children: body,
+    };
+    if (renderLink) return <RenderedLink render={renderLink} {...linkProps} />;
+    const { children: linkBody, ...anchorProps } = linkProps;
+    return <a {...anchorProps}>{linkBody}</a>;
+  }
+
+  const role =
+    href === undefined && checked !== undefined
+      ? checkable === "checkbox"
+        ? "menuitemcheckbox"
+        : "menuitemradio"
+      : "menuitem";
+  return (
+    <button
+      {...rest}
+      ref={ref as Ref<HTMLButtonElement>}
+      type="button"
+      role={role}
+      aria-checked={role === "menuitem" ? undefined : !!checked}
+      // `aria-disabled` rather than `disabled`: HoverMenu's roving focus skips either,
+      // and the ARIA menu pattern keeps an unavailable item perceivable ("Delete,
+      // dimmed") rather than greyed to the point some browsers stop exposing it.
+      aria-disabled={disabled || undefined}
+      onClick={
+        disabled
+          ? (e) => e.preventDefault()
+          : (onClick as ((event: MouseEvent<HTMLButtonElement>) => void) | undefined)
+      }
+      className={look}
+    >
+      {body}
+    </button>
+  );
+});
+
+function RenderedLink({
+  render,
+  ...props
+}: MenuItemLinkProps & { render: (props: MenuItemLinkProps) => ReactElement }) {
+  return render(props);
+}

package/src/components/modal.tsx

@@ -1,4 +1,4 @@
-import { createContext, useRef, useState } from "react";
+import { createContext, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import type {
   ComponentPropsWithoutRef,
@@ -11,7 +11,7 @@ import { cn } from "../lib/cn";
 import { useFocusTrap } from "../hooks/use-focus-trap";
 import { useBodyScrollLock } from "../hooks/use-body-scroll-lock";
 import { useOverlayHistory } from "../hooks/use-overlay-history";
-import { useCloseTransition } from "../hooks/use-close-transition";
+import { OVERLAY_EXIT_MS, prefersReducedMotion, useCloseTransition } from "../hooks/use-close-transition";
 
 /**
  * Drag the panel by its top strip, in pointer space (dev#460).
@@ -40,6 +40,9 @@ function useDragOffset(enabled: boolean) {
   };
 
   return {
+    /** Back to where the panel opens. A `Modal` with an `open` prop outlives its own
+     *  closes, so "the position resets when the dialog closes" needs saying. */
+    reset: () => setOffset(null),
     style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : undefined,
     handlers: !enabled
       ? undefined
@@ -120,6 +123,28 @@ export function useBackdropClose(onClose: () => void) {
 export interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
   /** Invoked on backdrop click and on Escape. */
   onClose: () => void;
+  /**
+   * Who decides whether the dialog is up, when the caller wants to keep it MOUNTED.
+   *
+   * Left out, the dialog is open for as long as it is mounted — `{open && <Modal/>}`,
+   * which is every caller before this prop and stays exactly as it was. That idiom has
+   * one blind spot: a close the CALLER decides on (a save that succeeded, a
+   * `setOpen(false)` from outside) unmounts the panel on the spot, with no exit,
+   * because there is nothing left to animate. kastlan's `FormModal` was nothing but an
+   * `if (!open) return null` gate in front of this.
+   *
+   * Passed, the component stays mounted while closed and renders nothing, and a flip
+   * to `false` plays the same exit a dismissal does before the panel goes. The focus
+   * trap, the scroll lock and the Back-gesture history entry are held only while
+   * `open` is true — they are released the moment it turns false, so focus is back on
+   * the trigger while the panel is still lowering. A dismissal (Escape, the backdrop,
+   * Back, the frame's X) animates first and then calls `onClose`; the `false` that
+   * comes back from it is not animated a second time.
+   *
+   * The body is unmounted once the exit has finished, as it is today, so a form inside
+   * still starts fresh on the next open.
+   */
+  open?: boolean;
   /** `"alertdialog"` for a dialog that interrupts to ask a question the user must
    *  answer (a confirmation) — screen readers announce it with more urgency. Only the
    *  two dialog roles are allowed: the panel stays modal either way. */
@@ -183,6 +208,7 @@ export interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"
  */
 export function Modal({
   onClose,
+  open,
   children,
   size = "md",
   className,
@@ -196,37 +222,68 @@ export function Modal({
 }: ModalProps) {
   const panelRef = useRef<HTMLDivElement>(null);
   const drag = useDragOffset(Boolean(draggable));
+  // Without `open`, mounted means open — the constant `true` every hook below used to
+  // be given. With it, `open` itself.
+  const active = open ?? true;
+
+  // Whether the last close came through `requestClose`, i.e. has ALREADY been
+  // animated. Set in the same batch as the caller's `onClose`, so the render that sees
+  // `open` turn false also sees this and does not lower the panel a second time.
+  const [dismissed, setDismissed] = useState(false);
+  // The exit of a close the caller decided on (only reachable with `open`). Adjusted
+  // during render when `open` flips — `Collapse`'s pattern — so the very render that
+  // closes it already paints the `-out` classes rather than a frame of nothing.
+  const [exiting, setExiting] = useState(false);
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    setDismissed(false);
+    setExiting(open === false && prevOpen === true && !dismissed && !prefersReducedMotion());
+    if (open) drag.reset();
+  }
+  useEffect(() => {
+    if (!exiting) return;
+    const timer = setTimeout(() => setExiting(false), OVERLAY_EXIT_MS);
+    return () => clearTimeout(timer);
+  }, [exiting]);
+
   // The panel lowers itself before the caller unmounts it (live #320 rework). Every
   // dismissal below goes through `requestClose`; `onClose` still does the closing, one
   // animation later. A caller that closes the dialog ITSELF — after a save, say —
-  // unmounts with no exit, which is the documented limit of this.
-  const { closing, requestClose } = useCloseTransition(onClose);
-  const backdropClose = useBackdropClose(requestClose);
+  // unmounts with no exit unless it passes `open`, which is what that prop is for.
+  const { closing, requestClose } = useCloseTransition(() => {
+    setDismissed(true);
+    onClose();
+  });
+  // A panel on its way out after `open` turned false is already closed: a press on
+  // its fading backdrop must not report a second close.
+  const backdropClose = useBackdropClose(active ? requestClose : () => {});
   // Back means the same as Escape here. On a phone Escape doesn't exist, so without
   // this the only way out of a dialog is finding its close button — and Back, the
   // gesture everyone reaches for, navigated the page underneath instead (#172).
-  // Mounted only while open, hence the constant `true`.
-  useOverlayHistory(true, requestClose);
+  // Held only while open: a closed `open={false}` dialog must not own a history entry.
+  useOverlayHistory(active, requestClose);
 
-  // Mounted only while open, hence the constant `true`. Through the shared hook and
-  // not by hand: this component's own save/restore copy was one half of the pair that
-  // left the page permanently unscrollable when a dialog containing an open sheet was
-  // closed — see the note in use-body-scroll-lock.ts.
-  useBodyScrollLock(true);
+  // Through the shared hook and not by hand: this component's own save/restore copy
+  // was one half of the pair that left the page permanently unscrollable when a dialog
+  // containing an open sheet was closed — see the note in use-body-scroll-lock.ts.
+  useBodyScrollLock(active);
 
   // Focus the panel itself (not the first field) so opening doesn't pop the mobile
   // keyboard, while still moving focus into the dialog for keyboard and screen-reader
   // users. Through the shared hook since this component is where it came from — the
   // hook adds per-keystroke recomputation, a guard on restoring to a detached node,
-  // and nesting, none of which this copy had.
-  useFocusTrap(panelRef, { active: true, initialFocus: "container" });
+  // and nesting, none of which this copy had. Released when `open` turns false, which
+  // hands focus back to the trigger while the panel is still on its way out.
+  useFocusTrap(panelRef, { active, initialFocus: "container" });
+  const leaving = closing || exiting;
 
   const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
     onKeyDown?.(e);
     if (e.defaultPrevented) return;
     if (e.key === "Escape") {
       e.stopPropagation();
-      requestClose();
+      if (active) requestClose();
       return;
     }
     // Tab containment lives in useFocusTrap, which listens on the panel itself.
@@ -237,13 +294,19 @@ export function Modal({
   // bar (a z-30 context) could paint BELOW a sibling z-30 sticky element like the
   // expanded transaction editor (feedback #320). The tour/command-palette overlays
   // already portal for the same reason.
+  if (!active && !exiting) return null;
   return createPortal(
     <div
+      // Out of the accessibility tree for the length of a caller-driven exit: focus is
+      // already back on the page, and an `aria-modal` panel that is leaving would hide
+      // that page from a screen reader for 220ms. Not `inert` — that would let a tap
+      // fall through the fading backdrop to the row underneath.
+      aria-hidden={exiting || undefined}
       className={cn(
         // Live #320. The panel below rises only where it is bottom-anchored: from md up
         // it is centred, and a centred box sliding up from off-screen reads as a
         // different component arriving rather than as the same one settling.
-        closing ? "animate-overlay-out" : "animate-overlay",
+        leaving ? "animate-overlay-out" : "animate-overlay",
         "fixed inset-0 z-50 flex items-end justify-center bg-black/40 md:items-center",
         fullBleed ? "p-0 md:p-4" : "p-4",
       )}
@@ -270,7 +333,7 @@ export function Modal({
         // the ones where the panel is being dragged.
         style={{ ...style, ...drag.style }}
         className={cn(
-          closing ? "animate-sheet-out md:animate-none" : "animate-sheet md:animate-none",
+          leaving ? "animate-sheet-out md:animate-none" : "animate-sheet md:animate-none",
           "w-full rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm outline-none",
           { md: "max-w-md", lg: "max-w-lg", xl: "max-w-3xl" }[size],
           // A panel taller than the screen has to scroll ITSELF. The backdrop is

package/src/components/page-contents.tsx

@@ -176,14 +176,14 @@ export function PageContents({
           <li key={item.id} data-entry={item.id}>
             <a
               href={hrefFor(item.id)}
-              // One line per entry in the rail; past 22rem the ellipsis takes over and
-              // the full text is on hover. The disclosure has the page's width and wraps.
-              title={variant === "rail" && typeof item.label === "string" ? item.label : undefined}
+              // Entries WRAP in the rail rather than truncate: a cut-off heading needed a
+              // native `title` to be read at all, which a keyboard never sees and which
+              // broke keksdose's one-tooltip rule (dev#523).
               aria-current={current ? "location" : undefined}
               onClick={() => setClicked(item.id)}
               className={cn(
                 "-ms-px block border-s-2 py-1 pe-1 text-[13px] leading-snug transition-colors duration-150",
-                variant === "rail" && "truncate",
+                variant === "rail" && "[overflow-wrap:anywhere]",
                 item.level === 2 ? "ps-6" : "ps-3",
                 current
                   ? "border-[var(--brand)] font-medium text-[var(--brand)]"

package/src/components/page-header.tsx

@@ -0,0 +1,68 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { SECTION_LABEL_CLASS } from "./text";
+
+/** `md` (default) is kastlan's `text-2xl` page title from `sm` up, a step smaller on a
+ *  phone; `sm` is lenkbank's `text-lg` title on a dense tool page (projects-page.tsx). */
+export type PageHeaderSize = "sm" | "md";
+
+const TITLE: Record<PageHeaderSize, string> = {
+  sm: "text-lg font-semibold",
+  md: "text-xl font-semibold tracking-tight sm:text-2xl",
+};
+
+export interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+  title: ReactNode;
+  /** A sentence under the title. */
+  description?: ReactNode;
+  /** Buttons for the page — "New", "Export". At the title's end from `sm` up; under it,
+   *  wrapping, on a phone. */
+  actions?: ReactNode;
+  /** A `Breadcrumbs` trail, drawn above everything else. */
+  breadcrumbs?: ReactNode;
+  /** A small uppercase line above the title — the section or the kind of record
+   *  ("Building", "Settings"). The section-label type. */
+  eyebrow?: ReactNode;
+  /** The title's element. Default `h1`: a page has one, and this is it. `h2` for a
+   *  header inside a page that already has its `h1` (a tab's own header). */
+  as?: "h1" | "h2" | "h3";
+  size?: PageHeaderSize;
+}
+
+/**
+ * A page's head: optional breadcrumbs, an eyebrow, the title, a description, and the
+ * page's actions.
+ *
+ * kastlan's (shared/components/display/page-header.tsx) is the model — title and
+ * description on one side, actions on the other, stacked on a phone — and this adds
+ * what its pages kept writing around it: a trail above, an eyebrow, a `ReactNode`
+ * title (a status chip beside the name), and actions that WRAP when there are more
+ * than fit a phone's width, instead of running off it. No outer margin: the page's
+ * own rhythm (`space-y-*`, a grid gap) places it.
+ */
+export function PageHeader({
+  title,
+  description,
+  actions,
+  breadcrumbs,
+  eyebrow,
+  as = "h1",
+  size = "md",
+  className,
+  ...rest
+}: PageHeaderProps) {
+  const Heading = as as ElementType;
+  return (
+    <div {...rest} className={cn("flex min-w-0 flex-col gap-2", className)}>
+      {breadcrumbs}
+      <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
+        <div className="min-w-0 flex-1">
+          {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, "mb-1")}>{eyebrow}</p>}
+          <Heading className={cn("break-words text-[var(--text-primary)]", TITLE[size])}>{title}</Heading>
+          {description != null && <p className="mt-1 text-sm text-[var(--text-muted)]">{description}</p>}
+        </div>
+        {actions != null && <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>}
+      </div>
+    </div>
+  );
+}

package/src/components/progress-bar.tsx

@@ -3,8 +3,30 @@ import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels";
 
-export type ProgressBarTone = "brand" | "neutral" | "success" | "warning" | "danger" | "info";
-export type ProgressBarSize = "sm" | "md" | "lg";
+/**
+ * `income` / `expense` are the money pair (`--money-income` / `--money-expense`), the
+ * names `Chip`, `StatTile` and `Sparkline` already use for them: a share bar of what
+ * came in or went out is money, and painting it `success` / `warning` said "good" and
+ * "careful" about a figure that is neither. keksdose's report meters (food-group-card,
+ * drilldown-modal) sit beside amounts that are already in the money colours.
+ */
+export type ProgressBarTone =
+  | "brand"
+  | "neutral"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "income"
+  | "expense";
+/**
+ * Track heights: `sm` 4px, `slim` 6px, `md` 8px, `lg` 12px. `slim` is a word and not a
+ * letter because the letters are taken in order — an `xs` at 6px would be THICKER than
+ * `sm` — and renaming `sm` would move every bar already on it. 6px is the Slider's
+ * track and keksdose's hand-drawn meters (`h-1.5`, landing-visuals), for a bar under a
+ * line of text where 8px outweighs the text.
+ */
+export type ProgressBarSize = "sm" | "slim" | "md" | "lg";
 
 const FILL: Record<ProgressBarTone, string> = {
   brand: "bg-[var(--brand)]",
@@ -13,9 +35,11 @@ const FILL: Record<ProgressBarTone, string> = {
   warning: "bg-[var(--warning)]",
   danger: "bg-[var(--danger)]",
   info: "bg-[var(--info)]",
+  income: "bg-[var(--money-income)]",
+  expense: "bg-[var(--money-expense)]",
 };
 
-const TRACK_HEIGHT: Record<ProgressBarSize, string> = { sm: "h-1", md: "h-2", lg: "h-3" };
+const TRACK_HEIGHT: Record<ProgressBarSize, string> = { sm: "h-1", slim: "h-1.5", md: "h-2", lg: "h-3" };
 
 export interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "role"> {
   /** Where it stands. Leave it undefined for an INDETERMINATE bar — work is under way

package/src/components/series-chart-labels.ts

@@ -15,6 +15,9 @@ export interface SeriesChartLabels {
   empty: string;
   /** Accessible name of a `ToggleLegend` — a group of switches, one per series. */
   legend: string;
+  /** Accessible name of the group of keyboard stops a clickable chart (`onPointClick`)
+   *  lays over its bars or periods — one tab stop, arrow keys between them. */
+  points: string;
 }
 
 export const DEFAULT_SERIES_CHART_LABELS: SeriesChartLabels = {
@@ -23,4 +26,5 @@ export const DEFAULT_SERIES_CHART_LABELS: SeriesChartLabels = {
     "Drag to zoom: a roughly square selection zooms both axes, a long thin one only its own. Double-click to reset.",
   empty: "No data",
   legend: "Series",
+  points: "Chart values",
 };