okengine 0.11.2 → 0.12.0

package/src/console/ui-next/src/components/charts/y-axis-scales.ts

@@ -0,0 +1,108 @@
+import { scaleLinear } from "@visx/scale";
+import type { LineConfig } from "./chart-context";
+
+/** Default axis id when `yAxisId` is omitted (Recharts-style `0` / primary left axis). */
+export const DEFAULT_Y_AXIS_ID = "left";
+
+export type YAxisOrientation = "left" | "right";
+
+export function normalizeYAxisId(id?: string | number): string {
+  if (id == null || id === "") {
+    return DEFAULT_Y_AXIS_ID;
+  }
+  return String(id);
+}
+
+export function groupLinesByYAxisId(lines: LineConfig[]): Map<string, LineConfig[]> {
+  const groups = new Map<string, LineConfig[]>();
+  for (const line of lines) {
+    const axisId = normalizeYAxisId(line.yAxisId);
+    const bucket = groups.get(axisId) ?? [];
+    bucket.push(line);
+    groups.set(axisId, bucket);
+  }
+  return groups;
+}
+
+type YScale = ReturnType<typeof scaleLinear<number>>;
+
+export function getPrimaryYScale(yScales: Record<string, YScale>, fallback: YScale): YScale {
+  const primary = yScales[DEFAULT_Y_AXIS_ID];
+  if (primary) {
+    return primary;
+  }
+  const first = Object.values(yScales)[0];
+  return first ?? fallback;
+}
+
+export function buildYScalesForLines({
+  lines,
+  innerHeight,
+  resolveDomain,
+}: {
+  lines: LineConfig[];
+  /** Passed by callers; domain is resolved via `resolveDomain`. */
+  data?: Record<string, unknown>[];
+  innerHeight: number;
+  resolveDomain: (dataKeys: string[]) => [number, number];
+}): Record<string, YScale> {
+  const groups = groupLinesByYAxisId(lines);
+  const scales: Record<string, YScale> = {};
+
+  for (const [axisId, axisLines] of groups) {
+    const dataKeys = axisLines.map((line) => line.dataKey);
+    const domain = resolveDomain(dataKeys);
+    scales[axisId] = scaleLinear({
+      range: [innerHeight, 0],
+      domain,
+      nice: true,
+    });
+  }
+
+  if (!scales[DEFAULT_Y_AXIS_ID]) {
+    scales[DEFAULT_Y_AXIS_ID] = scaleLinear({
+      range: [innerHeight, 0],
+      domain: [0, 100],
+      nice: true,
+    });
+  }
+
+  return scales;
+}
+
+/** Build y-scales from pre-computed (already nice'd) domain endpoints. */
+export function buildYScalesFromDomains({
+  lines,
+  innerHeight,
+  domainsByAxis,
+}: {
+  lines: LineConfig[];
+  innerHeight: number;
+  domainsByAxis: Record<string, [number, number]>;
+}): Record<string, YScale> {
+  const groups = groupLinesByYAxisId(lines);
+  const scales: Record<string, YScale> = {};
+
+  for (const [axisId] of groups) {
+    const domain =
+      domainsByAxis[axisId] ?? domainsByAxis[DEFAULT_Y_AXIS_ID] ?? ([0, 100] as [number, number]);
+    scales[axisId] = scaleLinear({
+      range: [innerHeight, 0],
+      domain,
+    });
+  }
+
+  if (!scales[DEFAULT_Y_AXIS_ID]) {
+    scales[DEFAULT_Y_AXIS_ID] = scaleLinear({
+      range: [innerHeight, 0],
+      domain: domainsByAxis[DEFAULT_Y_AXIS_ID] ?? [0, 100],
+    });
+  }
+
+  return scales;
+}
+
+/** Single-axis charts (bar, scatter, candlestick, live line). */
+export function wrapSingleYScale(yScale: YScale): Record<string, YScale> {
+  return { [DEFAULT_Y_AXIS_ID]: yScale };
+}

package/src/console/ui-next/src/components/charts/y-axis-ticks.ts

@@ -0,0 +1,25 @@
+export const Y_AXIS_DEFAULT_TICK_COUNT = 5;
+
+/** Minimum valid `numTicks` for `scale.ticks()` — values ≤ 0 yield no ticks. */
+export const Y_AXIS_MIN_TICK_COUNT = 1;
+
+/**
+ * Upper bound for the tick count hint. D3 may return more "nice" ticks above ~10;
+ * keeping the hint in a modest range avoids overcrowded axes.
+ */
+export const Y_AXIS_MAX_TICK_COUNT = 10;
+
+/** Clamps a user `numTicks` value to a valid d3 tick-count hint. */
+export function resolveYAxisTickCount(numTicks?: number): number {
+  if (numTicks == null || !Number.isFinite(numTicks)) {
+    return Y_AXIS_DEFAULT_TICK_COUNT;
+  }
+  const rounded = Math.round(numTicks);
+  if (rounded < Y_AXIS_MIN_TICK_COUNT) {
+    return Y_AXIS_MIN_TICK_COUNT;
+  }
+  if (rounded > Y_AXIS_MAX_TICK_COUNT) {
+    return Y_AXIS_MAX_TICK_COUNT;
+  }
+  return rounded;
+}

package/src/console/ui-next/src/components/charts/y-axis.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { memo, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { useChartStable, useYScale } from "./chart-context";
+import { DEFAULT_Y_DOMAIN_TWEEN_MS } from "./chart-phase";
+import { LINE_LOADING_PULSE_EASE } from "./line-loading-timing";
+import { resolveReferenceDataRange } from "./reference-area-geometry";
+import type { YAxisOrientation } from "./y-axis-scales";
+import { normalizeYAxisId } from "./y-axis-scales";
+import { resolveYAxisTickCount, Y_AXIS_DEFAULT_TICK_COUNT } from "./y-axis-ticks";
+
+const Y_AXIS_POSITION_TWEEN_MS = DEFAULT_Y_DOMAIN_TWEEN_MS;
+
+export interface YAxisProps {
+  /** Scale group id (Recharts `yAxisId`). Default: `"left"`. */
+  yAxisId?: string | number;
+  /** Which side of the chart to render labels. Default: `"left"`. */
+  orientation?: YAxisOrientation;
+  /**
+   * Approximate tick count hint for `scale.ticks()` (d3). Actual label count may differ.
+   * Clamped to {@link Y_AXIS_MIN_TICK_COUNT}–{@link Y_AXIS_MAX_TICK_COUNT}. Default: 5.
+   */
+  numTicks?: number;
+  /** Format large numbers (e.g. 1000 as "1k"). Default: true */
+  formatLargeNumbers?: boolean;
+  /** Custom formatter for tick labels (e.g. USD). Overrides formatLargeNumbers when set. */
+  formatValue?: (value: number) => string;
+}
+
+function formatLabel(
+  value: number,
+  formatLargeNumbers: boolean,
+  formatValue?: (value: number) => string,
+): string {
+  if (formatValue) {
+    return formatValue(value);
+  }
+  if (formatLargeNumbers && value >= 1000) {
+    return `${(value / 1000).toFixed(0)}k`;
+  }
+  return String(value);
+}
+
+function resolveTickLabelColor(
+  tickY: number,
+  axisId: string,
+  yScale: ReturnType<typeof useYScale>,
+  referenceAreas: ReturnType<typeof useChartStable>["referenceAreas"],
+): string | undefined {
+  for (const area of referenceAreas) {
+    if (!area.axisLabelColor) {
+      continue;
+    }
+    if (normalizeYAxisId(area.yAxisId) !== axisId) {
+      continue;
+    }
+    const [low, high] = resolveReferenceDataRange(
+      area.y1,
+      area.y2,
+      yScale.domain() as [number, number],
+    );
+    const topPixel = yScale(high) ?? 0;
+    const bottomPixel = yScale(low) ?? 0;
+    const bandTop = Math.min(topPixel, bottomPixel);
+    const bandBottom = Math.max(topPixel, bottomPixel);
+    if (tickY >= bandTop && tickY <= bandBottom) {
+      return area.axisLabelColor;
+    }
+  }
+  return undefined;
+}
+
+export function YAxis(props: YAxisProps) {
+  const { containerRef } = useChartStable();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const container = containerRef.current;
+  if (!(mounted && container)) {
+    return null;
+  }
+
+  return <YAxisInner {...props} container={container} />;
+}
+
+const YAxisInner = memo(function YAxisInner({
+  yAxisId,
+  orientation = "left",
+  numTicks = Y_AXIS_DEFAULT_TICK_COUNT,
+  formatLargeNumbers = true,
+  formatValue,
+  container,
+}: YAxisProps & { container: HTMLDivElement }) {
+  const { margin, referenceAreas } = useChartStable();
+  const yScale = useYScale(yAxisId);
+  const isLeft = orientation === "left";
+  const axisId = normalizeYAxisId(yAxisId);
+
+  const ticks = useMemo(() => {
+    const tickValues = yScale.ticks(resolveYAxisTickCount(numTicks));
+    return tickValues.map((value) => {
+      const y = (yScale(value) ?? 0) + margin.top;
+      return {
+        value,
+        y,
+        label: formatLabel(value, formatLargeNumbers, formatValue),
+        labelColor: resolveTickLabelColor(y - margin.top, axisId, yScale, referenceAreas),
+      };
+    });
+  }, [yScale, margin.top, numTicks, formatLargeNumbers, formatValue, axisId, referenceAreas]);
+
+  return createPortal(
+    <div className="pointer-events-none absolute inset-0">
+      <div
+        className="absolute top-0 bottom-0"
+        style={isLeft ? { left: 0, width: margin.left } : { right: 0, width: margin.right }}
+      >
+        {ticks.map((tick) => (
+          <div
+            className="absolute flex items-center"
+            key={tick.value}
+            style={{
+              top: tick.y,
+              transform: "translateY(-50%)",
+              transition: `top ${Y_AXIS_POSITION_TWEEN_MS}ms cubic-bezier(${LINE_LOADING_PULSE_EASE.join(", ")})`,
+              ...(isLeft
+                ? { right: 0, justifyContent: "flex-end", paddingRight: 8 }
+                : { left: 0, justifyContent: "flex-start", paddingLeft: 8 }),
+            }}
+          >
+            <span
+              className="text-chart-label text-xs"
+              style={tick.labelColor ? { color: tick.labelColor } : undefined}
+            >
+              {tick.label}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>,
+    container,
+  );
+});
+
+YAxis.displayName = "YAxis";
+
+export default YAxis;

package/src/console/ui-next/src/components/charts/y-domain-utils.ts

@@ -0,0 +1,120 @@
+import { scaleLinear } from "@visx/scale";
+import type { LineConfig } from "./chart-context";
+import { type ChartPhase, Y_DOMAIN_TWEEN_SKIP_THRESHOLD } from "./chart-phase";
+import { groupLinesByYAxisId, normalizeYAxisId } from "./y-axis-scales";
+
+export type YDomain = [number, number];
+
+/** Apply visx `nice()` to raw domain endpoints for stable grid ticks. */
+export function niceYDomain(domain: YDomain): YDomain {
+  const scale = scaleLinear({ domain, range: [0, 1], nice: true });
+  const niceDomain = scale.domain();
+  return [niceDomain[0] ?? domain[0], niceDomain[1] ?? domain[1]];
+}
+
+/**
+ * Skip Y tween when both endpoints move less than the threshold relative to span.
+ * When in doubt callers should tween — beauty wins over micro-optimization.
+ */
+export function shouldTweenYDomain(from: YDomain, to: YDomain): boolean {
+  const span = Math.max(Math.abs(to[1] - to[0]), Math.abs(from[1] - from[0]), 1);
+  const deltaMin = Math.abs(to[0] - from[0]) / span;
+  const deltaMax = Math.abs(to[1] - from[1]) / span;
+  return deltaMin >= Y_DOMAIN_TWEEN_SKIP_THRESHOLD || deltaMax >= Y_DOMAIN_TWEEN_SKIP_THRESHOLD;
+}
+
+/** Phases where the chart shows loading chrome (shimmer, pulse, label). */
+export function isLoadingChromePhase(phase: ChartPhase): boolean {
+  return phase === "loading" || phase === "revealingLoading";
+}
+
+/** Phases where grid lines use loading stroke styling (muted / dashed chrome). */
+export function isLoadingGridChromePhase(phase: ChartPhase): boolean {
+  return phase === "loading" || phase === "exiting" || phase === "gridTweenLoading";
+}
+
+/** Phases where Y-domain tween runs after the series has exited. */
+export function isYDomainTweenPhase(phase: ChartPhase): boolean {
+  return phase === "gridTweenLoading" || phase === "gridTweenReady";
+}
+
+/** Phases where {@link ReferenceArea} bands are shown (fade in/out on transitions). */
+export function isReferenceAreaVisiblePhase(phase: ChartPhase): boolean {
+  return phase === "ready" || phase === "revealing" || phase === "gridTweenReady";
+}
+
+export function resolveAnimatedYDestinationDomains(
+  chartPhase: ChartPhase,
+  skeletonByAxis: Record<string, YDomain>,
+  targetByAxis: Record<string, YDomain>,
+): Record<string, YDomain> {
+  switch (chartPhase) {
+    case "loading":
+    case "exiting":
+    case "gridTweenLoading":
+      return skeletonByAxis;
+    case "exitingReady":
+    case "gridTweenReady":
+    case "revealing":
+    case "ready":
+      return targetByAxis;
+    default:
+      return targetByAxis;
+  }
+}
+
+export function computeYDomainsByAxis({
+  lines,
+  resolveDomain,
+}: {
+  lines: LineConfig[];
+  resolveDomain: (dataKeys: string[]) => YDomain;
+}): Record<string, YDomain> {
+  const groups = groupLinesByYAxisId(lines);
+  const domains: Record<string, YDomain> = {};
+
+  for (const [axisId, axisLines] of groups) {
+    const dataKeys = axisLines.map((line) => line.dataKey);
+    domains[normalizeYAxisId(axisId)] = niceYDomain(resolveDomain(dataKeys));
+  }
+
+  if (!domains.left) {
+    domains.left = niceYDomain([0, 100]);
+  }
+
+  return domains;
+}
+
+/** Merge domain maps, normalizing axis ids to strings. */
+export function mergeYDomainRecords(
+  ...records: Record<string, YDomain>[]
+): Record<string, YDomain> {
+  const merged: Record<string, YDomain> = {};
+  for (const record of records) {
+    for (const [axisId, domain] of Object.entries(record)) {
+      merged[normalizeYAxisId(axisId)] = domain;
+    }
+  }
+  return merged;
+}
+
+export function domainsEqual(
+  left: Record<string, YDomain>,
+  right: Record<string, YDomain>,
+): boolean {
+  const leftKeys = Object.keys(left);
+  const rightKeys = Object.keys(right);
+  if (leftKeys.length !== rightKeys.length) {
+    return false;
+  }
+
+  for (const axisId of leftKeys) {
+    const from = left[axisId];
+    const to = right[axisId];
+    if (!(from && to) || from[0] !== to[0] || from[1] !== to[1]) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/console/ui-next/src/components/console-chrome.tsx

@@ -0,0 +1,50 @@
+/**
+ * Auth/setup frame — wordmark docked to the lock, Console strip at the foot.
+ */
+
+import { CubeIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import type { ReactNode } from "react";
+import { EXPLORER_COUNT_CLASS } from "@/components/explorer/explorer-chrome.ts";
+import { ModeToggle } from "@/components/mode-toggle";
+import { OkeLogo } from "@/components/oke-logo";
+
+type ConsoleChromeProps = {
+  /** Page body (centered in the main column). */
+  children?: ReactNode;
+};
+
+/**
+ * Gate column: wordmark docked to the lock, footer strip (theme + version).
+ *
+ * @param props - Optional children for the main region
+ */
+export function ConsoleChrome({ children }: ConsoleChromeProps) {
+  return (
+    <div className="flex min-h-dvh w-full flex-col bg-background" data-slot="console-chrome">
+      <main className="mx-auto flex w-full max-w-md flex-1 flex-col justify-center px-4 py-10">
+        <div className="flex flex-col items-stretch gap-10">
+          <OkeLogo className="h-7 w-auto self-center" />
+          {children}
+        </div>
+      </main>
+
+      <footer className="grid h-10 shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-stretch border-t border-border/60">
+        <p className="flex min-w-0 items-center truncate px-2 text-[10px] font-medium text-muted-foreground">
+          OKE | Console
+        </p>
+        <ModeToggle />
+        <p className={`${EXPLORER_COUNT_CLASS} flex min-w-0 items-center justify-end gap-1.5 px-2`}>
+          <HugeiconsIcon
+            icon={CubeIcon}
+            size={12}
+            color="currentColor"
+            strokeWidth={1.5}
+            aria-hidden
+          />
+          <span>v{__OKE_VERSION__}</span>
+        </p>
+      </footer>
+    </div>
+  );
+}

package/src/console/ui-next/src/components/document-title.tsx

@@ -0,0 +1,18 @@
+/**
+ * Syncs `document.title` to the current Console route.
+ */
+
+import { useRouterState } from "@tanstack/react-router";
+import { useEffect } from "react";
+import { consoleDocumentTitle } from "@/lib/document-meta.ts";
+
+/**
+ * Sets the browser tab title from the location pathname.
+ */
+export function DocumentTitle() {
+  const pathname = useRouterState({ select: (s) => s.location.pathname });
+  useEffect(() => {
+    document.title = consoleDocumentTitle(pathname);
+  }, [pathname]);
+  return null;
+}

package/src/console/ui-next/src/components/explorer/copy-inline-button.tsx

@@ -0,0 +1,57 @@
+/**
+ * Copy-to-clipboard control used in inspector subtitles.
+ */
+
+import { Copy01Icon, Tick02Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useEffect, useRef, useState, type JSX } from "react";
+import { ToolbarTip } from "@/components/ui/toolbar-tip.tsx";
+import { cn } from "@/lib/utils.ts";
+import { EXPLORER_ICON_BUTTON_BARE_CLASS } from "./explorer-chrome.ts";
+
+/** Props for {@link CopyInlineButton}. */
+export interface CopyInlineButtonProps {
+  readonly value: string;
+  readonly label: string;
+}
+
+/**
+ * Ghost icon button that copies `value` and flashes a tick.
+ *
+ * @param props - Clipboard payload + accessible label
+ */
+export function CopyInlineButton({ value, label }: CopyInlineButtonProps): JSX.Element {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    [],
+  );
+
+  return (
+    <ToolbarTip label={copied ? "Copied" : label}>
+      <button
+        type="button"
+        aria-label={label}
+        className={cn(EXPLORER_ICON_BUTTON_BARE_CLASS, "size-4")}
+        onClick={() => {
+          if (!navigator.clipboard) return;
+          void navigator.clipboard.writeText(value).then(() => {
+            setCopied(true);
+            if (timer.current) clearTimeout(timer.current);
+            timer.current = setTimeout(() => setCopied(false), 1200);
+          });
+        }}
+      >
+        <HugeiconsIcon
+          icon={copied ? Tick02Icon : Copy01Icon}
+          className={copied ? "size-3 text-emerald-600 dark:text-emerald-400" : "size-3"}
+          aria-hidden
+        />
+      </button>
+    </ToolbarTip>
+  );
+}

package/src/console/ui-next/src/components/explorer/detail-header.tsx

@@ -0,0 +1,82 @@
+/**
+ * Inspector identity header — Store / Vault / Flows share one chrome.
+ */
+
+import type { CSSProperties, JSX, ReactNode } from "react";
+import { cn } from "@/lib/utils.ts";
+import {
+  DETAIL_HEADER_CLASS,
+  DETAIL_TITLE_CLASS,
+  EXPLORER_ICON_CLASS,
+  explorerIconInk,
+} from "./explorer-chrome.ts";
+
+/** Props for {@link DetailHeader}. */
+export interface DetailHeaderProps {
+  readonly icon: ReactNode;
+  readonly wellClassName?: string;
+  readonly wellStyle?: CSSProperties;
+  readonly title: ReactNode;
+  readonly badge?: ReactNode;
+  readonly subtitle?: ReactNode;
+  /** First control — typically collapse / expand the start explorer. */
+  readonly leading?: ReactNode;
+  readonly actions?: ReactNode;
+  readonly sticky?: boolean;
+  readonly className?: string;
+  readonly dataSlot?: string;
+}
+
+/**
+ * Monitoring-style identity strip: centered identity, stretch actions.
+ *
+ * @param props - Identity + actions
+ */
+export function DetailHeader({
+  icon,
+  wellClassName,
+  wellStyle,
+  title,
+  badge,
+  subtitle,
+  leading,
+  actions,
+  sticky = false,
+  className,
+  dataSlot = "detail-header",
+}: DetailHeaderProps): JSX.Element {
+  return (
+    <header
+      className={cn(DETAIL_HEADER_CLASS, sticky && "sticky top-0 z-10", className)}
+      data-slot={dataSlot}
+    >
+      {leading ? (
+        <div className="-ml-2 flex h-full shrink-0 items-stretch">
+          {leading}
+          <span className="w-px shrink-0 self-stretch bg-border/60" aria-hidden />
+        </div>
+      ) : null}
+      <div className="flex min-w-0 flex-1 items-center gap-2">
+        <span
+          className={cn(
+            EXPLORER_ICON_CLASS,
+            "flex shrink-0 items-center justify-center",
+            explorerIconInk(wellClassName ?? "text-muted-foreground"),
+          )}
+          style={wellStyle?.color ? { color: wellStyle.color } : undefined}
+          aria-hidden
+        >
+          {icon}
+        </span>
+        <h2 className={cn(DETAIL_TITLE_CLASS, "leading-none")}>{title}</h2>
+        {badge ? (
+          <div className="flex min-w-0 shrink-0 items-center gap-2 leading-none">{badge}</div>
+        ) : null}
+        {subtitle ? (
+          <div className="flex min-w-0 items-center gap-1.5 leading-none">{subtitle}</div>
+        ) : null}
+      </div>
+      {actions ? <div className="flex h-full shrink-0 items-stretch">{actions}</div> : null}
+    </header>
+  );
+}