@leavepulse/ui 0.77.3 → 0.78.1

package/dist/components/scrollbar.js

@@ -0,0 +1,47 @@
+import { prefersReducedMotion } from "../composables/easing.js";
+import "vue";
+import { nodeWindow } from "../composables/realm.js";
+const BAR_Y = "group flex touch-none select-none justify-end pl-2.5";
+const BAR_X = "group flex flex-col touch-none select-none justify-end pt-2.5";
+const BAR_Y_SIZE = { wall: "w-3.5 py-px pr-px", floating: "w-4 py-1 pr-1" };
+const BAR_X_SIZE = { wall: "h-3.5 px-px pb-px", floating: "h-4 px-1 pb-1" };
+const THUMB_Y = "min-w-1 bg-brand/40 before:absolute before:inset-y-0 before:right-0 before:-left-2.5 before:content-[''] transition-[min-width,background-color] duration-[var(--duration-fast)] group-hover:min-w-1.5 group-hover:bg-brand";
+const THUMB_X = "min-h-1 bg-brand/40 before:absolute before:inset-x-0 before:bottom-0 before:-top-2.5 before:content-[''] transition-[min-height,background-color] duration-[var(--duration-fast)] group-hover:min-h-1.5 group-hover:bg-brand";
+const THUMB_Y_ROUND = { wall: "rounded-l-pill", floating: "rounded-pill" };
+const THUMB_X_ROUND = { wall: "rounded-t-pill", floating: "rounded-pill" };
+const BAR_FADE = "opacity-0 data-[state=visible]:animate-[fade-in_180ms_ease] data-[state=visible]:opacity-100 data-[state=hidden]:animate-[fade-out_240ms_ease]";
+const SCROLL_HIDE_DELAY_MS = 500;
+const PAGE_FRACTION = 0.85;
+function pageToward(scroller, axis, before) {
+  const view = axis === "y" ? scroller.clientHeight : scroller.clientWidth;
+  const step = view * PAGE_FRACTION * (before ? -1 : 1);
+  const behavior = prefersReducedMotion(nodeWindow(scroller)) ? "auto" : "smooth";
+  scroller.scrollBy(axis === "y" ? { top: step, behavior } : { left: step, behavior });
+}
+const nativeHidden = /* @__PURE__ */ new WeakMap();
+function hideNativeBar(doc) {
+  nativeHidden.set(doc, (nativeHidden.get(doc) ?? 0) + 1);
+  doc.documentElement.classList.add("lp-scrollbar-none");
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    const left = (nativeHidden.get(doc) ?? 1) - 1;
+    nativeHidden.set(doc, left);
+    if (!left) doc.documentElement.classList.remove("lp-scrollbar-none");
+  };
+}
+export {
+  BAR_FADE,
+  BAR_X,
+  BAR_X_SIZE,
+  BAR_Y,
+  BAR_Y_SIZE,
+  SCROLL_HIDE_DELAY_MS,
+  THUMB_X,
+  THUMB_X_ROUND,
+  THUMB_Y,
+  THUMB_Y_ROUND,
+  hideNativeBar,
+  pageToward
+};

package/dist/components/select.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Drop the oldest entries past `limit`, never one of `keep`. For a cache that
+ * must outlive the list it was read from, in a long session over a big catalog.
+ */
+export declare function evictOldest<K, V>(cache: Map<K, V>, keep: ReadonlySet<K>, limit: number): void;
 /**
  * How many chips of a multiple pick fit in one row before the rest collapse
  * into a "+N" chip.

package/dist/components/select.js

@@ -1,3 +1,12 @@
+function evictOldest(cache, keep, limit) {
+  let excess = cache.size - limit;
+  for (const key of cache.keys()) {
+    if (excess <= 0) return;
+    if (keep.has(key)) continue;
+    cache.delete(key);
+    excess--;
+  }
+}
 function fitChips(widths, available, gap, moreWidth) {
   const n = widths.length;
   if (n === 0) return 0;
@@ -19,6 +28,7 @@ function toggledValues(previous, next) {
   return [...next.filter((v) => !before.has(v)), ...previous.filter((v) => !after.has(v))];
 }
 export {
+  evictOldest,
   fitChips,
   toggledValues
 };

package/dist/components/sidebar.d.ts

@@ -40,6 +40,7 @@ export interface SidebarItem {
      * away without opening the section first. In a compact sidebar they open in
      * a card beside the icon.
      */
+    /** One level: search, the active row and the rail stop at these pages, nothing under them is drawn. */
     children?: SidebarItem[];
     /** A dot instead of a count: something new here that has no number to it. */
     dot?: boolean;

package/dist/components/tableFeatures.d.ts

@@ -0,0 +1,58 @@
+export interface SortKey {
+    key: string;
+    dir: "asc" | "desc";
+}
+export interface SortableColumn<Row> {
+    key: string;
+    sortable?: boolean;
+    sortValue?: (row: Row) => unknown;
+    compare?: (a: Row, b: Row) => number;
+}
+/** Rows in the order of every sort key, the first one deciding first. Stable. */
+export declare function sortByKeys<Row extends Record<string, unknown>>(rows: readonly Row[], sorts: readonly SortKey[], columns: readonly SortableColumn<Row>[]): Row[];
+/**
+ * A click on a header. Alone it makes that column the only key; `add` (Shift)
+ * keeps the others. Either way the column cycles none → asc → desc → none.
+ */
+export declare function nextSorts(current: readonly SortKey[], key: string, add: boolean): SortKey[];
+export declare const MIN_COLUMN_PX = 48;
+/** A width the column allows. `max` below `min` gives way to `min`. */
+export declare function clampColumnWidth(width: number, min?: number, max?: number): number;
+export type ColumnPin = "left" | "right";
+/** Left pins first and right pins last, each keeping the order it was given in. */
+export declare function orderPinned<Col extends {
+    pin?: ColumnPin;
+}>(columns: readonly Col[]): Col[];
+/** How far from its edge each pinned column sticks: the widths of the pins outside it. */
+export declare function pinOffsets(columns: readonly {
+    key: string;
+    pin?: ColumnPin;
+}[], widths: Readonly<Record<string, number>>): Record<string, number>;
+export interface RowGroup<Row> {
+    value: unknown;
+    id: string;
+    rows: Row[];
+}
+/** Rows by group, in the order each group first appears, so a sort orders the groups too. */
+export declare function groupRows<Row>(rows: readonly Row[], valueOf: (row: Row) => unknown): RowGroup<Row>[];
+export interface RowWindow {
+    start: number;
+    end: number;
+    before: number;
+    after: number;
+}
+/** Which rows of a fixed-height list to draw, and the height standing in for the rest. */
+export declare function rowWindow(scrollTop: number, viewport: number, rowHeight: number, count: number, overscan: number): RowWindow;
+export interface ColumnPreset {
+    id: string;
+    label: string;
+    /** The columns shown. A key that no longer exists is ignored. */
+    columns: readonly string[];
+    /** Widths in px to apply along with it (with `resizableColumns`). */
+    widths?: Readonly<Record<string, number>>;
+}
+/** The columns a preset hides: the rest, minus those that may not be hidden. */
+export declare function presetHidden(preset: Pick<ColumnPreset, "columns">, columns: readonly {
+    key: string;
+    alwaysVisible?: boolean;
+}[]): Set<string>;

package/dist/components/tableFeatures.js

@@ -0,0 +1,87 @@
+import { clamp } from "../composables/clamp.js";
+import { compareValues } from "./tableSort.js";
+function sortByKeys(rows, sorts, columns) {
+  const steps = sorts.flatMap((sort) => {
+    const col = columns.find((c) => c.key === sort.key);
+    if (!col?.sortable) return [];
+    const factor = sort.dir === "asc" ? 1 : -1;
+    const value = col.sortValue ?? ((row) => row[sort.key]);
+    const compare = col.compare ?? ((a, b) => compareValues(value(a), value(b)));
+    return [{ compare, factor }];
+  });
+  if (!steps.length) return [...rows];
+  return [...rows].sort((a, b) => {
+    for (const { compare, factor } of steps) {
+      const order = compare(a, b) * factor;
+      if (order) return order;
+    }
+    return 0;
+  });
+}
+function nextSorts(current, key, add) {
+  const found = current.find((sort) => sort.key === key);
+  const next = !found ? { key, dir: "asc" } : found.dir === "asc" ? { key, dir: "desc" } : null;
+  if (!add) return next ? [next] : [];
+  if (!found) return [...current, next];
+  return current.flatMap((sort) => sort.key !== key ? [sort] : next ? [next] : []);
+}
+const MIN_COLUMN_PX = 48;
+function clampColumnWidth(width, min = MIN_COLUMN_PX, max = Number.POSITIVE_INFINITY) {
+  return Math.round(Math.max(min, Math.min(max, width)));
+}
+function orderPinned(columns) {
+  return [
+    ...columns.filter((c) => c.pin === "left"),
+    ...columns.filter((c) => !c.pin),
+    ...columns.filter((c) => c.pin === "right")
+  ];
+}
+function pinOffsets(columns, widths) {
+  const offsets = {};
+  let left = 0;
+  for (const col of columns) {
+    if (col.pin !== "left") continue;
+    offsets[col.key] = left;
+    left += widths[col.key] ?? 0;
+  }
+  let right = 0;
+  for (const col of [...columns].reverse()) {
+    if (col.pin !== "right") continue;
+    offsets[col.key] = right;
+    right += widths[col.key] ?? 0;
+  }
+  return offsets;
+}
+function groupRows(rows, valueOf) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    const value = valueOf(row);
+    const group = groups.get(value);
+    if (group) group.rows.push(row);
+    else groups.set(value, { value, id: String(value ?? ""), rows: [row] });
+  }
+  return [...groups.values()];
+}
+function rowWindow(scrollTop, viewport, rowHeight, count, overscan) {
+  if (rowHeight <= 0 || count <= 0) return { start: 0, end: Math.max(0, count), before: 0, after: 0 };
+  const top = clamp(scrollTop, 0, Math.max(0, count * rowHeight - viewport));
+  const start = Math.max(0, Math.floor(top / rowHeight) - overscan);
+  const end = Math.min(count, Math.ceil((top + Math.max(0, viewport)) / rowHeight) + overscan);
+  return { start, end, before: start * rowHeight, after: (count - end) * rowHeight };
+}
+function presetHidden(preset, columns) {
+  const shown = new Set(preset.columns);
+  const hidden = columns.filter((c) => !c.alwaysVisible && !shown.has(c.key)).map((c) => c.key);
+  return hidden.length === columns.length ? /* @__PURE__ */ new Set() : new Set(hidden);
+}
+export {
+  MIN_COLUMN_PX,
+  clampColumnWidth,
+  groupRows,
+  nextSorts,
+  orderPinned,
+  pinOffsets,
+  presetHidden,
+  rowWindow,
+  sortByKeys
+};

package/dist/components/topologyGraph.d.ts

@@ -0,0 +1,164 @@
+export interface GraphPoint {
+    x: number;
+    y: number;
+}
+export interface GraphNode {
+    id: string;
+    position: GraphPoint;
+    parent?: string;
+    width?: number;
+    height?: number;
+    type?: string;
+    label?: string;
+    data?: unknown;
+}
+export interface GraphEdge {
+    id: string;
+    source: string;
+    target: string;
+}
+export interface GraphPath {
+    nodes: string[];
+    edges: string[];
+}
+export interface PathOptions {
+    /** Follow edges only from source to target. Default false: a wire goes both ways. */
+    directed?: boolean;
+    /** Leave out edges that may not be walked (a drifted link, a hidden kind). */
+    allow?: (edge: GraphEdge) => boolean;
+}
+/** What touches a node: itself, the nodes one edge away, and those edges. */
+export declare function neighborhood(edges: readonly GraphEdge[], id: string): GraphPath;
+/** The shortest path by hop count, or null when the two are not connected. */
+export declare function findPath(edges: readonly GraphEdge[], from: string, to: string, options?: PathOptions): GraphPath | null;
+export interface TopologyDiff {
+    addedNodes: string[];
+    removedNodes: string[];
+    changedNodes: string[];
+    addedEdges: string[];
+    removedEdges: string[];
+    changedEdges: string[];
+}
+/** What changed between two versions of a graph, by id. */
+export declare function diffTopology(before: {
+    nodes: readonly GraphNode[];
+    edges: readonly GraphEdge[];
+}, after: {
+    nodes: readonly GraphNode[];
+    edges: readonly GraphEdge[];
+}): TopologyDiff;
+export interface LayoutOptions {
+    /** Which way the layers run. Default "LR": columns, left to right. */
+    direction?: "LR" | "TB";
+    /** Space between layers. */
+    layerGap?: number;
+    /** Space between nodes of one layer. */
+    nodeGap?: number;
+    /** Size of a node that carries none. */
+    nodeWidth?: number;
+    nodeHeight?: number;
+    /** Lay each group out on its own, one band after another. */
+    groupOf?: (node: GraphNode) => string | undefined;
+    /** Space between group bands. */
+    groupGap?: number;
+}
+export declare function layeredLayout(nodes: readonly GraphNode[], edges: readonly GraphEdge[], options?: LayoutOptions): Map<string, GraphPoint>;
+export interface GraphBox extends GraphPoint {
+    width: number;
+    height: number;
+}
+export interface LaneOptions {
+    padding?: number;
+    /** Room over the nodes for the lane's label. */
+    header?: number;
+    nodeWidth?: number;
+    nodeHeight?: number;
+}
+/** One box per group, around its top-level nodes where they stand now. */
+export declare function groupBoxes(nodes: readonly GraphNode[], keyOf: (node: GraphNode) => string | undefined, options?: LaneOptions): {
+    key: string;
+    box: GraphBox;
+}[];
+export interface FrameOptions {
+    padding?: number;
+    minWidth?: number;
+    minHeight?: number;
+    childWidth?: number;
+    childHeight?: number;
+}
+/** The frame that holds these children, whose positions are relative to it. */
+export declare function frameSize(children: readonly GraphNode[], options?: FrameOptions): {
+    width: number;
+    height: number;
+};
+export interface MergedEdge extends GraphEdge {
+    /** The original edges this one stands for. */
+    members: string[];
+}
+/**
+ * Edges redrawn between what their ends stand for now: inner ones go, and
+ * parallel ones become one, keeping which they were.
+ */
+export declare function mergeEdges(edges: readonly GraphEdge[], mapId: (id: string) => string | undefined): MergedEdge[];
+export interface GraphCluster {
+    id: string;
+    key: string;
+    position: GraphPoint;
+    members: string[];
+}
+export interface ClusteredGraph<N extends GraphNode> {
+    nodes: N[];
+    clusters: GraphCluster[];
+    edges: MergedEdge[];
+}
+/**
+ * Collapses each group into one cluster at the middle of its top-level nodes.
+ * A node with no group stays; a child goes with whatever holds it.
+ */
+export declare function clusterGraph<N extends GraphNode>(nodes: readonly N[], edges: readonly GraphEdge[], keyOf: (node: N) => string | undefined): ClusteredGraph<N>;
+/** Drops children, with their edges moved up to whatever holds them. */
+export declare function collapseChildren<N extends GraphNode>(nodes: readonly N[], edges: readonly GraphEdge[]): {
+    nodes: N[];
+    edges: MergedEdge[];
+};
+export type DetailLevel = "full" | "simple" | "overview";
+export declare const SIMPLE_BELOW_ZOOM = 0.7;
+export declare const OVERVIEW_BELOW_ZOOM = 0.45;
+/** How much of the graph to draw at a zoom. Clusters need groups to exist. */
+export declare function detailAtZoom(zoom: number, grouped: boolean): DetailLevel;
+/** Where every node really is: a child's position is relative to its parent. */
+export declare function absolutePositions(nodes: readonly GraphNode[]): Map<string, GraphPoint>;
+export declare function nodeName(node: GraphNode): string;
+/** Nodes matching a query, by name or id: names first, then earlier matches. */
+export declare function findNodes<N extends GraphNode>(nodes: readonly N[], query: string): N[];
+export type GraphDirection = "up" | "down" | "left" | "right";
+/** The closest node the way an arrow key points, or null at the edge of the graph. */
+export declare function nearestInDirection(positions: ReadonlyMap<string, GraphPoint>, from: string, direction: GraphDirection): string | null;
+export interface EdgeReading {
+    kind?: string;
+    /** Round-trip time, in milliseconds. */
+    rtt?: number;
+    /** Packet loss, in percent. */
+    loss?: number;
+}
+/** The edge's label: its kind, then whatever was measured on it. */
+export declare function edgeLabelText(edge: EdgeReading): string | undefined;
+export interface SvgTheme {
+    background: string;
+    surface: string;
+    line: string;
+    text: string;
+    edge: string;
+}
+export interface SvgNode extends GraphBox {
+    id: string;
+    label: string;
+    /** A frame holding other nodes: drawn behind them, label at the top. */
+    frame?: boolean;
+}
+export interface SvgEdge extends GraphEdge {
+    label?: string;
+    color?: string;
+    dash?: string;
+}
+export declare function topologyToSvg(nodes: readonly SvgNode[], edges: readonly SvgEdge[], theme: SvgTheme): string;