@danxbot/ui 22.1.0 → 24.0.0

package/dist/types/components/chart/LineChart.d.ts

@@ -0,0 +1,57 @@
+import { type ReactNode, type Ref } from "react";
+import { type LinePoint } from "./line-chart-scale";
+export type { LinePoint } from "./line-chart-scale";
+export interface LineSeries {
+    /** Unique within the chart. */
+    key: string;
+    label: string;
+    /** Strictly ascending `t` (epoch ms), finite `value` >= 0 — anything else throws. May be empty. */
+    points: readonly LinePoint[];
+}
+/** A horizontal line at a value, e.g. the model's context window. */
+export interface LineReference {
+    /** Unique within the chart. */
+    id: string;
+    /** Finite and >= 0, in the same unit as the series' values. */
+    value: number;
+    /** Said beside the line and in the hidden list. */
+    label: string;
+}
+/** A point of interest on a series, e.g. a compaction. */
+export interface LineMarker {
+    /** Unique within the chart. */
+    id: string;
+    /** A `LineSeries.key`. */
+    series: string;
+    /** Epoch ms; must fall within that series' first and last point. */
+    t: number;
+    /** Names the marker in its tooltip, its accessible name and the hidden list. */
+    label: string;
+    /** Shown under the label and the time in the marker's tooltip. */
+    content?: ReactNode;
+}
+export interface LineChartProps {
+    /** What the chart measures, e.g. "Context size". Names the group and captions the table. */
+    label: string;
+    /** At most 8, in palette order. */
+    series: readonly LineSeries[];
+    referenceLines?: readonly LineReference[];
+    markers?: readonly LineMarker[];
+    /** How a raw value reads in the tooltip, the readout and the table. @default locale-formatted number */
+    formatValue?: (value: number) => string;
+    /** How a value reads on the y axis; use a compact form here. @default `formatValue` */
+    formatAxis?: (value: number) => string;
+    /** How an instant reads in the tooltip, the readout and the table. @default medium date and time in the viewer's locale */
+    formatTime?: (t: number) => string;
+    /** How an instant reads on the x axis, on one line. @default a time of day, with the date where the day changes */
+    formatAxisTime?: (t: number) => string;
+    /** IANA zone instants are labelled in, e.g. "UTC". @default the viewer's */
+    timeZone?: string;
+    /** Plot height in px. @default 240 */
+    height?: number;
+    /** Said when there is nothing to draw. @default the built-in "No data" */
+    emptyLabel?: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function LineChart(props: LineChartProps): import("react").JSX.Element;

package/dist/types/components/chart/label-metrics.d.ts

@@ -0,0 +1,5 @@
+/** Before the first measurement (and where there is no layout at all) a chart draws at this width. */
+export declare const FALLBACK_WIDTH = 600;
+export declare const MIN_WIDTH = 160;
+export declare const LABEL_CHAR_PX = 6;
+export declare const LABEL_PAD_PX = 14;

package/dist/types/components/chart/line-chart-axis.d.ts

@@ -0,0 +1,14 @@
+export interface AxisTick {
+    t: number;
+    primary: string;
+    secondary: string | null;
+}
+/**
+ * The smallest round spacing whose labels fit side by side on a plot `plotW`
+ * wide, ticks on the zone's wall clock (midnights, hours, month starts). A span
+ * of no length is one tick. When no spacing fits, the widest one that gave two
+ * ticks is used and its labels crowd. When no spacing gave two ticks (a span
+ * shorter than the tightest spacing, or so long that even the widest would have
+ * more ticks than could be labelled) the axis is its two ends.
+ */
+export declare function axisTicks(min: number, max: number, plotW: number, timeZone: string | undefined, locale: string, formatAxisTime: ((t: number) => string) | undefined): AxisTick[];

package/dist/types/components/chart/line-chart-scale.d.ts

@@ -0,0 +1,55 @@
+export interface LinePoint {
+    /** Epoch ms. */
+    t: number;
+    /** Finite and >= 0. */
+    value: number;
+}
+/**
+ * How far the wall clock in `timeZone` is ahead of UTC at instant `t`, in ms
+ * (negative west of Greenwich). `undefined` is the viewer's own zone. The parts
+ * are read as Latin digits in the Gregorian calendar whatever `locale` is, so a
+ * Thai or Arabic locale cannot turn the year or the hour into something
+ * `Number` cannot read.
+ */
+export declare function zoneOffsetMs(t: number, timeZone: string | undefined, locale: string): number;
+/** Every multiple of `step` on the zone's wall clock whose instant is inside `[min, max]`, ascending. */
+export declare function timeTicks(min: number, max: number, step: number, timeZone: string | undefined, locale: string): number[];
+/** The first instant of every `months`-th month (counted from January of year 0) inside `[min, max]`, on the zone's calendar. */
+export declare function monthTicks(min: number, max: number, months: number, timeZone: string | undefined, locale: string): number[];
+export interface TickStep {
+    /** About how far apart the ticks are, ms: decides how many there could be and how a label reads. */
+    stepMs: number;
+    ticks: (min: number, max: number, timeZone: string | undefined, locale: string) => number[];
+}
+/** Every spacing the time axis may use, tightest first: seconds to hours, days, then calendar months to decades. */
+export declare const TICK_STEPS: readonly TickStep[];
+/** Index of the entry of `items` (ascending instants, or points by `t`) closest to `t`; the earlier one on a tie. `items` must not be empty. */
+export declare function nearestIndex(items: readonly number[] | readonly LinePoint[], t: number): number;
+/** The series' value at instant `t`: a point's own value at its instant, a straight line between neighbours elsewhere, null outside the series' span. */
+export declare function valueAt(points: readonly LinePoint[], t: number): number | null;
+/** Every distinct instant any series has a point at, ascending: the places a keyboard cursor can stand. */
+export declare function mergeInstants(series: readonly (readonly LinePoint[])[]): number[];
+/** The earliest and latest instant over every series' ascending points, or null when none has a point. */
+export declare function timeBounds(series: readonly (readonly LinePoint[])[]): {
+    min: number;
+    max: number;
+} | null;
+export interface PointSummary {
+    count: number;
+    /** Null when the series has no point. */
+    first: number | null;
+    last: number | null;
+    lowest: number | null;
+    highest: number | null;
+}
+/** A series reduced to what the text alternative says about it: how many points, the span in time, the range of values. */
+export declare function summarize(points: readonly LinePoint[]): PointSummary;
+/**
+ * Thin a long series to what the screen can show: when there are more points
+ * than twice the pixel columns, keep each column's first, lowest, highest and
+ * last point, in time order. A spike or a drop that spans less than a pixel
+ * survives, and the path stays a few hundred segments however many points came
+ * in. A series that already fits is returned as it is. `x` maps an instant to
+ * its pixel.
+ */
+export declare function decimate(points: readonly LinePoint[], x: (t: number) => number, columns: number): readonly LinePoint[];

package/dist/types/components/chart/shared.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement, type ReactNode } from "react";
+import { type ReactElement, type ReactNode, type Ref, type RefObject } from "react";
 /** The React key of a folded "Other" row. Caller ids are keyed `id:<id>`, so no caller id can equal it. */
 export declare const OTHER_KEY = "fold:other";
 export declare const rowKey: (id: string) => string;
@@ -50,3 +50,71 @@ export declare function ChartTable({ caption, columns, rows, }: {
         cells: readonly ReactNode[];
     }[];
 }): import("react").JSX.Element;
+/** The width of the element `ref` points at, kept current as it resizes; 0 until the first measurement. */
+export declare function useElementWidth(ref: RefObject<HTMLElement | null>): number;
+/** What a chart says when it has nothing to draw: the caption's group, a placeholder of the plot's height, and an empty table. */
+export declare function ChartEmpty({ label, text, height, className, ref, }: {
+    label: string;
+    text: string;
+    height: number;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+export interface PlotMargin {
+    top: number;
+    right: number;
+    bottom: number;
+}
+export interface PlotLayout {
+    /** Left edge of the plot: room for the widest y label. */
+    left: number;
+    /** The svg's width. */
+    W: number;
+    plotW: number;
+    plotH: number;
+}
+/** The plot's box inside an svg as wide as `measured` (or the fallback width where there is no layout). */
+export declare function plotLayout(measured: number, height: number, margin: PlotMargin, axisLabels: readonly string[]): PlotLayout;
+/** One horizontal gridline per tick with its label to the left. The zero line is the baseline marks grow from. */
+export declare function ValueGrid({ ticks, labels, left, right, y, }: {
+    ticks: readonly number[];
+    labels: readonly string[];
+    left: number;
+    /** The x the lines end at. */
+    right: number;
+    y: (value: number) => number;
+}): import("react").JSX.Element[];
+/** An x tick: a primary line, and a secondary one when the day (or year) changed. `at` names it for tests and probes. */
+export declare function XTickLabel({ at, x, y, primary, secondary }: {
+    at: number;
+    x: number;
+    y: number;
+    primary: string;
+    secondary: string | null;
+}): import("react").JSX.Element;
+/** The set of series keys the viewer has hidden from the legend, and the toggle that flips one. */
+export declare function useHiddenSeries(): readonly [ReadonlySet<string>, (key: string) => void];
+export declare const LEGEND_FRAME = "flex min-h-6 min-w-0 cursor-pointer items-center gap-1.5 rounded-md px-1 text-xs text-secondary hover:bg-surface-hover";
+export declare function LegendList({ label, children }: {
+    label: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function LegendItem({ id, other, children }: {
+    id: string;
+    other?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The colour box (or, with `className`, another shape) beside a legend name: filled while the series shows, an outline while hidden. */
+export declare function LegendSwatch({ color, off, className }: {
+    color: string;
+    off: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+/** The button that shows or hides one series; `name` is its accessible name. */
+export declare function LegendToggle({ name, off, onToggle, className, children, }: {
+    name: string;
+    off: boolean;
+    onToggle: () => void;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/types/components/rbac/AccessRequestPanel.d.ts

@@ -20,6 +20,19 @@ export interface AccessRequest {
     /** The label of the role granted. Shown once the request is approved or claimed. */
     roleLabel?: string;
 }
+/**
+ * DX-4856: the key a claim minted, and what a person may do with it. Pass it once the requester holds a key; omit it before that.
+ * `revokedAt` set means the key was revoked: the panel reads Revoked and offers nothing. Otherwise `onRevoke` (pass it only for a
+ * person allowed to revoke this key) adds a Revoke key button behind a confirmation dialog.
+ */
+export interface IssuedKey {
+    /** ISO instant the key was revoked. */
+    revokedAt?: string;
+    /** Who revoked it, when a person did. */
+    revokedBy?: string;
+    /** Revokes the key. A rejection shows its message in the panel; a resolution leaves the panel as it was until the consumer hands it `revokedAt`. */
+    onRevoke?: () => Promise<void>;
+}
 export interface AccessRequestPanelProps {
     request: AccessRequest;
     state: AccessRequestState;
@@ -46,6 +59,8 @@ export interface AccessRequestPanelProps {
      * disabled until what was typed matches `request.confirmCode`, ignoring case and spaces. Deny stays available.
      */
     confirmCodeEntry?: boolean;
+    /** DX-4856: the key this request minted, with its revoke. Used only in the `claimed` state. */
+    issuedKey?: IssuedKey;
     className?: string;
 }
-export declare function AccessRequestPanel({ request, state, roles, permissions, ownPermissionKeys, defaultRoleId, onApprove, onDeny, expiredNote, confirmCodeEntry, className, }: AccessRequestPanelProps): import("react").JSX.Element;
+export declare function AccessRequestPanel({ request, state, roles, permissions, ownPermissionKeys, defaultRoleId, onApprove, onDeny, expiredNote, confirmCodeEntry, issuedKey, className, }: AccessRequestPanelProps): import("react").JSX.Element;

package/dist/types/components/rbac/approvalPanelParts.d.ts

@@ -7,9 +7,10 @@ export interface ExpiredNote {
     /** What the requester must do to get access, e.g. "The agent must reconnect and ask again.". */
     nextStep: string;
 }
-export declare function ApprovalHeader({ title, state }: {
+export declare function ApprovalHeader({ title, state, revokedLabel }: {
     title: string;
     state: AccessRequestState;
+    revokedLabel?: string;
 }): import("react").JSX.Element;
 /** The code is for comparing, never copying: plain large text, no copy control (see `AccessRequestPanel`). */
 export declare function ConfirmCodeCallout({ code }: {

package/dist/types/index.d.ts

@@ -78,6 +78,7 @@ export { Stat, StatRow, Sparkline, type StatProps, type StatRowProps, type Spark
 export { ShareBar, type ShareBarProps, type ShareBarSegment, } from "./components/chart/ShareBar";
 export { BarList, type BarListProps, type BarListItem, } from "./components/chart/BarList";
 export { TimeSeriesChart, type TimeSeriesChartProps, type TimeSeriesSeries, type TimeSeriesRole, type TimeSeriesBlock, type TimeSeriesBlockKind, } from "./components/chart/TimeSeriesChart";
+export { LineChart, type LineChartProps, type LineSeries, type LinePoint, type LineReference, type LineMarker, } from "./components/chart/LineChart";
 export { CHART_SERIES_COUNT, CHART_SERIES_TOKENS, CHART_SEQUENTIAL_TOKEN, CHART_SEQUENTIAL_COLOR, chartSeriesColor, } from "./lib/chart-palette";
 export { DataTable, TableEmptyState, CellStack, type DataTableProps, type TableDensity, } from "./components/Table";
 export { CodeEditor, CodeEditorToolbar, CodeEditorCaption, CodeEditorCopyButton, CodeEditorWrapToggle, CodeEditorViewSwitch, type CodeEditorProps, type CodeEditorToolbarProps, type CodeEditorView, } from "./components/CodeEditor";
@@ -157,7 +158,7 @@ export { cellLabel, eventLabel, formatDateRange, longDate, monthTitle, timeOfDay
 export { initialFocusDay, isInMonth, nextDayForKey, useGridNavigation, type GridNavigation, type GridNavigationOptions, } from "./components/calendar/use-grid-navigation";
 export { AmbiguousTimeError, addDays, addDuration, addMonths, atMidnight, atTime, comparePlainDate, dayFraction, dayLengthMs, dayOfWeek, daysBetween, daysInMonth, endOfMonth, hoursInDay, instantAtFraction, instantToPlainDate, instantToPlainDateTime, isSameDate, isoDateString, isoDateTimeString, monthGridDays, nextDay, offsetAt, parsePlainDate, plainDateTimeToInstant, relativeAge, startOfDay, startOfMonth, startOfWeek, weekDays, type CalendarDuration, type Disambiguation, type Instant, type PlainDate, type PlainDateTime, type TimeZone, } from "./lib/time";
 export { allDayBandSegment, dayKey, daySlots, isAllDay, packBand, packLanes, snapFractionToInstant, timeSegments, timedBandSegment, type AllDayEvent, type BandInput, type BandOptions, type BandPlacement, type BandResult, type BandSegment, type CalendarEvent, type CalendarEventId, type CalendarView, type DaySlot, type DragKind, type EventDraft, type EventPalette, type LaneInput, type LaneOptions, type LanePlacement, type PaletteEntry, type PaletteKey, type TimeSegment, type TimedEvent, type VisibleRange, } from "./lib/calendar";
-export { RBACProvider, useRBAC, Can, useHasPermission, AccountMenu, AccountMenuSection, TeamSwitcher, DevToolsPopover, RolePermissionMatrix, RoleEditorDialog, ProfileForm, ProfilePage, RolesPermissionsPage, MembersPanel, ChangePasswordForm, SessionsList, ApiKeysPanel, AgentKeysList, AccessRequestPanel, PermissionRequestPanel, RoleKeyPicker, isRoleSelectable, leastPrivilegeRoleId, InvitationsList, InviteMembersDialog, Brand, TeamSettingsForm, DangerZone, type RBACProviderProps, type RBACHookResult, type CanProps, type AccountMenuProps, type TeamSwitcherProps, type DevToolsPopoverProps, type RolePermissionMatrixProps, type RoleEditorDialogProps, type RoleEditorDialogSubmitInput, type ProfileFormProps, type ProfileFormAccount, type ProfileFormSaveInput, type ProfilePageProps, type RolesPermissionsPageProps, type MembersPanelProps, type MembersPanelMember, type ChangePasswordFormProps, type SessionsListProps, type Session, type ApiKeysPanelProps, type AgentKeysListProps, type ApiKey, type KeyGrant, type KeyRoleEditor, type AccessRequestPanelProps, type AccessRequest, type AccessRequestKind, type AccessRequestState, type ExpiredNote, type PermissionRequestPanelProps, type PermissionRequest, type RoleKeyPickerProps, type InvitationsListProps, type InvitationsListItem, type InvitationStatus, type InviteMembersDialogProps, type Permission, type Role, type User, type Team, type TeamMembership, type BrandProps, type TeamSettingsFormProps, type TeamSettingsFormTeam, type TeamSettingsFormSaveInput, type DangerZoneProps, } from "./components/rbac";
+export { RBACProvider, useRBAC, Can, useHasPermission, AccountMenu, AccountMenuSection, TeamSwitcher, DevToolsPopover, RolePermissionMatrix, RoleEditorDialog, ProfileForm, ProfilePage, RolesPermissionsPage, MembersPanel, ChangePasswordForm, SessionsList, ApiKeysPanel, AgentKeysList, AccessRequestPanel, PermissionRequestPanel, RoleKeyPicker, isRoleSelectable, leastPrivilegeRoleId, InvitationsList, InviteMembersDialog, Brand, TeamSettingsForm, DangerZone, type RBACProviderProps, type RBACHookResult, type CanProps, type AccountMenuProps, type TeamSwitcherProps, type DevToolsPopoverProps, type RolePermissionMatrixProps, type RoleEditorDialogProps, type RoleEditorDialogSubmitInput, type ProfileFormProps, type ProfileFormAccount, type ProfileFormSaveInput, type ProfilePageProps, type RolesPermissionsPageProps, type MembersPanelProps, type MembersPanelMember, type ChangePasswordFormProps, type SessionsListProps, type Session, type ApiKeysPanelProps, type AgentKeysListProps, type ApiKey, type KeyGrant, type KeyRoleEditor, type AccessRequestPanelProps, type AccessRequest, type AccessRequestKind, type IssuedKey, type AccessRequestState, type ExpiredNote, type PermissionRequestPanelProps, type PermissionRequest, type RoleKeyPickerProps, type InvitationsListProps, type InvitationsListItem, type InvitationStatus, type InviteMembersDialogProps, type Permission, type Role, type User, type Team, type TeamMembership, type BrandProps, type TeamSettingsFormProps, type TeamSettingsFormTeam, type TeamSettingsFormSaveInput, type DangerZoneProps, } from "./components/rbac";
 export { AuthLayout, AcceptInvitationCard, SignupCard, TermsAcceptance, LoginForm, ForgotPasswordForm, ResetPasswordForm, type AuthLayoutProps, type AcceptInvitationCardProps, type SignupCardProps, type TermsAcceptanceProps, type LoginFormProps, type ForgotPasswordFormProps, type ResetPasswordFormProps, } from "./components/auth";
 export { UseCaseCard, RoadmapItemCard, RoadmapSwimlaneBoard, UseCaseLedgerPage, RoadmapPage, PhaseManager, TrackManager, deriveRoadmapItemStatus, isFullyBuilt, isUnbuilt, trackIds, trackProgress, toneForIndex, CATEGORY_TONES, type Domain, type Phase, type Track, type RoadmapItem, type RoadmapItemStatus, type UseCase, type UseCaseStatus, type UseCaseDecision, type UseCaseCardProps, type RoadmapItemCardProps, type RoadmapSwimlaneBoardProps, type UseCaseLedgerPageProps, type RoadmapPageProps, type PhaseManagerProps, type TrackManagerProps, } from "./components/roadmap";
 export { ProvenanceDisclosure, ProvenanceDetail, ProvenanceBadge, ConfidenceReadout, ConfidenceMeter, ConfidenceBar, provenanceStateLabel, confidenceBand, confidenceScore, scoredConfidence, ratedConfidence, type ProvenanceRecord, type ProvenanceState, type ProvenanceSource, type ProvenanceCheck, type ProvenanceCall, type ProvenanceSignoff, type ConfidenceBand, type ConfidenceScore, type ProvenanceConfidence, type ConfidenceReadoutProps, type ConfidenceBarProps, type ConfidenceBarSize, type ProvenanceDisclosureProps, type ProvenanceDetailProps, type ProvenanceDetailTitleAs, type ProvenanceTriggerBadge, type ProvenanceBadgeProps, type ProvenanceBadgeAppearance, type ConfidenceMeterProps, } from "./components/provenance";

package/dist/types/lib/i18n/areas/chat-chart.d.ts

@@ -44,6 +44,34 @@ export interface ChatChartStrings {
             /** `TimeSeriesChart` legend toggle button accessible name for one series. */
             showSeries: (label: string) => string;
         };
+        lineChart: {
+            /** `LineChart` placeholder shown when no series has a point (unless the caller passes `emptyLabel`). */
+            empty: string;
+            /** `LineChart` text over the plot when the viewer has hidden every series from the legend. */
+            allHidden: string;
+            /** `LineChart` accessible name of the plot: the chart's own label, then the keyboard hint. */
+            plot: (label: string) => string;
+            /** `LineChart` live readout at the cursor: the instant, then one part per visible series. */
+            readout: (when: string, parts: readonly string[]) => string;
+            /** `LineChart` readout, one series' part: its label and value; `at` is that series' own instant, given only when it differs from the cursor's. */
+            readoutPart: (label: string, value: string, at: string | null) => string;
+            /** `LineChart` legend list accessible name. */
+            legend: string;
+            /** `LineChart` legend toggle button accessible name for one series. */
+            showSeries: (label: string) => string;
+            /** `LineChart` visually hidden summary table, column headers after the series name. */
+            columnPoints: string;
+            columnFrom: string;
+            columnTo: string;
+            columnLowest: string;
+            columnHighest: string;
+            /** `LineChart` visually hidden list of reference lines: its name, then one entry per line. */
+            referenceLines: string;
+            referenceLine: (label: string, value: string) => string;
+            /** `LineChart` visually hidden list of markers: its name, then one entry per marker (its label, its series' label, its instant). */
+            markers: string;
+            marker: (label: string, series: string, when: string) => string;
+        };
     };
     chat: {
         attachment: {

package/dist/types/lib/i18n/areas/rbac.d.ts

@@ -89,6 +89,22 @@ export interface RbacStrings {
         noRoleBody: string;
         /** Description under the role picker; `isDefault` is true when the consumer's default role was preselected. */
         roleHint: (roleLabel: string, isDefault: boolean) => string;
+        /** DX-4856: the header badge and readout title once the key this request minted was revoked. */
+        revoked: string;
+        /** DX-4856: readout body for a revoked key; `when` is the formatted instant, `by` the revoker's name when a person did it. */
+        revokedBody: (when: string, by: string | undefined) => string;
+        /** DX-4856: label of the button that starts revoking the key. */
+        revokeKey: string;
+        /** DX-4856: title of the confirmation dialog. */
+        revokeTitle: string;
+        /** DX-4856: body of the confirmation dialog. */
+        revokeBody: string;
+        /** DX-4856: the dialog's dismiss button. */
+        revokeCancel: string;
+        /** DX-4856: title of the error shown when the revoke failed. */
+        revokeFailedTitle: string;
+        /** DX-4856: message of that error when the rejection carried none. */
+        revokeFailedMessage: string;
     };
     /** `PermissionRequestPanel`. */
     permissionRequest: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danxbot/ui",
-  "version": "22.1.0",
+  "version": "24.0.0",
   "type": "module",
   "description": "Danxbot — a domain-agnostic React design system with motion as a first-class primitive.",
   "license": "MIT",