@hot-updater/console 1.0.0-rc.2 → 1.0.0-rc.4

package/src/components/ui/empty.tsx

@@ -0,0 +1,101 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn("flex max-w-sm flex-col items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-sm font-medium tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-xs/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-xs/relaxed text-balance",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+};

package/src/lib/bundle-activity.ts

@@ -0,0 +1,21 @@
+import { useQuery } from "@tanstack/react-query";
+
+import type { RecoveryInput } from "./insights-recovery";
+import { getBundleActivityRpc } from "./insights-recovery-rpc";
+
+export type BundleActivityInput = Pick<
+  RecoveryInput,
+  "platform" | "channel"
+> & { readonly releaseId: string };
+
+export function useBundleActivityQuery(inputs: readonly BundleActivityInput[]) {
+  const sorted = [...inputs].sort((a, b) =>
+    a.releaseId.localeCompare(b.releaseId),
+  );
+  return useQuery({
+    queryKey: ["bundle-activity", sorted],
+    queryFn: () => getBundleActivityRpc({ data: sorted }),
+    enabled: sorted.length > 0,
+    staleTime: 30_000,
+  });
+}

package/src/lib/insights-recovery-rpc.ts

@@ -0,0 +1,38 @@
+import { createServerFn } from "@tanstack/react-start";
+
+import type { BundleActivityInput } from "./bundle-activity";
+import { readRecoveryInput } from "./insights-recovery";
+
+export function readBundleActivityInput(
+  inputs: readonly BundleActivityInput[],
+) {
+  if (!Array.isArray(inputs) || inputs.length > 20)
+    throw new Error("Choose up to 20 bundles.");
+  return inputs.map((input) => {
+    readRecoveryInput({ ...input, window: "30d" });
+    if (!input.releaseId) throw new Error("Choose a bundle ID.");
+    return input;
+  });
+}
+
+export const getBundleActivityRpc = createServerFn({ method: "GET" })
+  .validator(readBundleActivityInput)
+  .handler(async ({ data }) => {
+    const [{ prepareConfig }, { getBundleActivity }] = await Promise.all([
+      import("./server/config.server"),
+      import("./server/bundleActivity"),
+    ]);
+    const { config } = await prepareConfig();
+    return getBundleActivity(config.database.models.insights, data);
+  });
+
+export const getRecoveryReportRpc = createServerFn({ method: "GET" })
+  .validator(readRecoveryInput)
+  .handler(async ({ data }) => {
+    const [{ prepareConfig }, { getRecoveryReport }] = await Promise.all([
+      import("./server/config.server"),
+      import("./server/insightsRecovery"),
+    ]);
+    const { config } = await prepareConfig();
+    return getRecoveryReport(config.database.models.insights, data);
+  });

package/src/lib/insights-recovery.ts

@@ -0,0 +1,59 @@
+import type { InsightsWindow } from "./insights-rpc";
+
+export type RecoveryInput = {
+  readonly platform: "ios" | "android";
+  readonly channel: string;
+  readonly window: InsightsWindow;
+  readonly releaseId?: string;
+};
+
+export type RecoveryPoint = {
+  readonly startMs: number;
+  readonly active: number | null;
+  readonly recoveredInstallations: number;
+  readonly adopted: number;
+  readonly recovered: number;
+  readonly rate: number | null;
+  readonly spike: boolean;
+};
+
+export type RecoverySeries = {
+  readonly releaseId: string;
+  readonly firstAdoptedAtMs: number | null;
+  readonly activeInstallations: number;
+  readonly recoveredInstallations: number;
+  readonly points: readonly RecoveryPoint[];
+};
+
+export type RecoveryReport = {
+  readonly sinceMs: number;
+  readonly beforeReceivedAtMs: number;
+  readonly intervalMs: number;
+  readonly truncated: boolean;
+  readonly unattributedInstallations: number;
+  readonly series: readonly RecoverySeries[];
+};
+
+export const recoveryWindows = {
+  "24h": { durationMs: 86_400_000, intervalMs: 3_600_000 },
+  "7d": { durationMs: 7 * 86_400_000, intervalMs: 6 * 3_600_000 },
+  "30d": { durationMs: 30 * 86_400_000, intervalMs: 86_400_000 },
+} as const;
+
+export function readRecoveryInput(input: RecoveryInput): RecoveryInput {
+  if (
+    !input ||
+    (input.platform !== "ios" && input.platform !== "android") ||
+    typeof input.channel !== "string" ||
+    !input.channel.trim() ||
+    input.channel.length > 1_024 ||
+    !Object.hasOwn(recoveryWindows, input.window) ||
+    (input.releaseId !== undefined &&
+      (typeof input.releaseId !== "string" ||
+        !input.releaseId.trim() ||
+        input.releaseId.length > 1_024))
+  ) {
+    throw new Error("Choose a platform, channel, and time window.");
+  }
+  return input;
+}

package/src/lib/server/bundleActivity.ts

@@ -0,0 +1,37 @@
+import type { InsightsModel } from "@hot-updater/plugin-core";
+
+import type { BundleActivityInput } from "../bundle-activity";
+import type { RecoveryReport } from "../insights-recovery";
+import { readInsightsHistory } from "./insightsHistory";
+import { buildRecoveryReport } from "./insightsRecovery";
+
+export async function getBundleActivity(
+  model: InsightsModel,
+  inputs: readonly BundleActivityInput[],
+  now = Date.now(),
+) {
+  if (inputs.length === 0) return {};
+  // One bounded read for the visible page, independent of the management query.
+  const history = await readInsightsHistory(model, "30d", now);
+  const scopes = new Map<string, RecoveryReport>();
+  const result = new Map<string, RecoveryReport>();
+  for (const input of inputs) {
+    const key = JSON.stringify([input.platform, input.channel]);
+    let report = scopes.get(key);
+    if (!report) {
+      report = buildRecoveryReport(history, {
+        platform: input.platform,
+        channel: input.channel,
+        window: "30d",
+      });
+      scopes.set(key, report);
+    }
+    result.set(input.releaseId, {
+      ...report,
+      series: report.series.filter(
+        (series) => series.releaseId === input.releaseId,
+      ),
+    });
+  }
+  return Object.fromEntries(result);
+}

package/src/lib/server/insightsHistory.ts

@@ -0,0 +1,52 @@
+import type {
+  BundleEventRow,
+  InsightsEventCursor,
+  InsightsModel,
+} from "@hot-updater/plugin-core";
+
+import { recoveryWindows, type RecoveryInput } from "../insights-recovery";
+
+export async function readInsightsHistory(
+  model: InsightsModel,
+  window: RecoveryInput["window"],
+  beforeReceivedAtMs = Date.now(),
+) {
+  const { durationMs, intervalMs } = recoveryWindows[window];
+  const sinceMs = Math.max(0, beforeReceivedAtMs - durationMs);
+  let completeSinceMs = sinceMs;
+  let after: InsightsEventCursor | undefined;
+  let truncated = false;
+  const events: BundleEventRow[] = [];
+  while (events.length < 50_000) {
+    const limit = Math.min(100, 50_000 - events.length);
+    const rows = await model.listEvents({
+      filter: { kind: "all" },
+      sinceMs,
+      beforeReceivedAtMs,
+      after,
+      limit: limit + 1,
+    });
+    const page = rows.slice(0, limit);
+    events.push(...page);
+    const last = page.at(-1);
+    if (!last || rows.length <= limit) break;
+    after = { id: last.id, receivedAtMs: last.received_at_ms };
+    if (events.length === 50_000) {
+      truncated = true;
+      // Exclude the partially read interval, including its unknown denominator.
+      completeSinceMs =
+        Math.floor(last.received_at_ms / intervalMs) * intervalMs + intervalMs;
+    }
+  }
+  return {
+    events: events
+      .filter((row) => row.received_at_ms >= completeSinceMs)
+      .reverse(),
+    sinceMs: completeSinceMs,
+    beforeReceivedAtMs,
+    intervalMs,
+    truncated,
+  };
+}
+
+export type InsightsHistory = Awaited<ReturnType<typeof readInsightsHistory>>;

package/src/lib/server/insightsRecovery.ts

@@ -0,0 +1,186 @@
+import type { InsightsModel } from "@hot-updater/plugin-core";
+
+import {
+  readRecoveryInput,
+  type RecoveryInput,
+  type RecoveryReport,
+  type RecoverySeries,
+} from "../insights-recovery";
+import { readInsightsHistory, type InsightsHistory } from "./insightsHistory";
+
+export async function getRecoveryReport(
+  model: InsightsModel,
+  input: RecoveryInput,
+  beforeReceivedAtMs = Date.now(),
+): Promise<RecoveryReport> {
+  readRecoveryInput(input);
+  return buildRecoveryReport(
+    await readInsightsHistory(model, input.window, beforeReceivedAtMs),
+    input,
+  );
+}
+
+export function buildRecoveryReport(
+  history: InsightsHistory,
+  input: RecoveryInput,
+): RecoveryReport {
+  const { events, sinceMs, beforeReceivedAtMs, intervalMs, truncated } =
+    history;
+  const bucketStart = (time: number) =>
+    Math.floor(time / intervalMs) * intervalMs;
+  const releases = new Map<
+    string,
+    {
+      firstAdoptedAtMs: number | null;
+      recovered: Set<string>;
+      buckets: Map<
+        number,
+        {
+          adopted: number;
+          recovered: number;
+          installations: Set<string>;
+          lastRecoveredAtMs: number;
+        }
+      >;
+    }
+  >();
+  const ensureRelease = (id: string) => {
+    let release = releases.get(id);
+    if (!release) {
+      release = {
+        firstAdoptedAtMs: null,
+        recovered: new Set(),
+        buckets: new Map(),
+      };
+      releases.set(id, release);
+    }
+    return release;
+  };
+  const latest = new Map<
+    string,
+    { releaseId: string | null; bundleId: string; inScope: boolean }
+  >();
+  const active = new Map<string, number>();
+  const snapshots = new Map<number, Map<string, number> | null>();
+  let unattributedInstallations = 0;
+  let observed = false;
+  let eventIndex = 0;
+  for (
+    let startMs = bucketStart(sinceMs);
+    startMs < beforeReceivedAtMs;
+    startMs += intervalMs
+  ) {
+    while (
+      eventIndex < events.length &&
+      events[eventIndex].received_at_ms < startMs + intervalMs
+    ) {
+      const row = events[eventIndex++];
+      const inScope =
+        row.platform === input.platform && row.channel === input.channel;
+      const previous = latest.get(row.install_id);
+      // Older SDKs omit the ID on UNCHANGED. Only retain an observed ID for the same file and scope.
+      const releaseId =
+        row.to_release_id ??
+        (row.type === "UNCHANGED" &&
+        previous?.bundleId === row.to_bundle_id &&
+        previous.inScope === inScope
+          ? previous.releaseId
+          : null);
+      if (previous?.inScope) {
+        if (previous.releaseId)
+          active.set(
+            previous.releaseId,
+            (active.get(previous.releaseId) ?? 0) - 1,
+          );
+        else unattributedInstallations -= 1;
+      }
+      latest.set(row.install_id, {
+        releaseId,
+        bundleId: row.to_bundle_id,
+        inScope,
+      });
+      if (!inScope) continue;
+      observed = true;
+      if (releaseId) {
+        ensureRelease(releaseId);
+        active.set(releaseId, (active.get(releaseId) ?? 0) + 1);
+      } else unattributedInstallations += 1;
+      if (row.from_release_id) ensureRelease(row.from_release_id);
+      const outcomeId =
+        row.type === "RECOVERED" ? row.from_release_id : row.to_release_id;
+      if (
+        !outcomeId ||
+        (row.type !== "RECOVERED" &&
+          row.type !== "RELEASE_ADOPTED" &&
+          row.type !== "UPDATE_APPLIED")
+      )
+        continue;
+      const release = ensureRelease(outcomeId);
+      const bucket = release.buckets.get(startMs) ?? {
+        adopted: 0,
+        recovered: 0,
+        installations: new Set<string>(),
+        lastRecoveredAtMs: -1,
+      };
+      if (row.type === "RECOVERED") {
+        bucket.recovered += 1;
+        bucket.installations.add(row.install_id);
+        bucket.lastRecoveredAtMs = row.received_at_ms;
+        release.recovered.add(row.install_id);
+      } else {
+        bucket.adopted += 1;
+        release.firstAdoptedAtMs ??= row.received_at_ms;
+      }
+      release.buckets.set(startMs, bucket);
+    }
+    // Before the first report there is no observed installation state to chart.
+    snapshots.set(startMs, observed ? new Map(active) : null);
+  }
+  const series: RecoverySeries[] = [];
+  for (const [releaseId, release] of releases) {
+    if (input.releaseId && input.releaseId !== releaseId) continue;
+    let previousRate: number | null = null;
+    const points = Array.from(snapshots, ([startMs, snapshot]) => {
+      const bucket = release.buckets.get(startMs);
+      const adopted = bucket?.adopted ?? 0;
+      const recovered = bucket?.recovered ?? 0;
+      const total = adopted + recovered;
+      const rate = total === 0 ? null : (recovered / total) * 100;
+      const spike =
+        release.firstAdoptedAtMs !== null &&
+        (bucket?.lastRecoveredAtMs ?? -1) >= release.firstAdoptedAtMs &&
+        (!truncated || previousRate !== null) &&
+        rate !== null &&
+        total >= 10 &&
+        recovered >= 3 &&
+        rate >= 10 &&
+        rate - (previousRate ?? 0) >= 10;
+      if (rate !== null) previousRate = rate;
+      return {
+        startMs,
+        active: snapshot ? (snapshot.get(releaseId) ?? 0) : null,
+        recoveredInstallations: bucket?.installations.size ?? 0,
+        adopted,
+        recovered,
+        rate,
+        spike,
+      };
+    });
+    series.push({
+      releaseId,
+      firstAdoptedAtMs: release.firstAdoptedAtMs,
+      activeInstallations: active.get(releaseId) ?? 0,
+      recoveredInstallations: release.recovered.size,
+      points,
+    });
+  }
+  series.sort((a, b) => b.releaseId.localeCompare(a.releaseId));
+  return {
+    sinceMs,
+    beforeReceivedAtMs,
+    intervalMs,
+    truncated,
+    unattributedInstallations,
+    series,
+  };
+}

package/src/routes/index.tsx

@@ -19,6 +19,7 @@ import { BundleIdDisplay } from "@/components/BundleIdDisplay";
 import { ChannelBadge } from "@/components/ChannelBadge";
 import { EnabledStatusIcon } from "@/components/EnabledStatusIcon";
 import { BundleChildrenPanel } from "@/components/features/bundles/BundleChildrenPanel";
+import { BundleMovementSummary } from "@/components/features/bundles/BundleInsightsSummary";
 import { ChannelManagementDialog } from "@/components/features/channels/ChannelManagementDialog";
 import { ReleaseEditorSheet } from "@/components/features/releases/ReleaseEditorSheet";
 import { ReleaseStateBadge } from "@/components/features/releases/ReleaseStateBadge";
@@ -55,6 +56,7 @@ import {
   useChannelsQuery,
   useReleasesQuery,
 } from "@/lib/api";
+import { useBundleActivityQuery } from "@/lib/bundle-activity";
 import type { ReleaseListRow } from "@/lib/server/releaseReachability";
 import { cn } from "@/lib/utils";
 
@@ -395,6 +397,16 @@ function BundlesPage() {
   const patchCountsQuery = useBundleChildCountsQuery(bundleIds);
   const patchCountsByBundleId = patchCountsQuery.data ?? {};
   const pagination = releasesQuery.data?.pagination;
+  const activityQuery = useBundleActivityQuery(
+    releases.flatMap((release) => {
+      const channel = channels.find(
+        (item) => item.id === release.channel_id,
+      )?.name;
+      return channel
+        ? [{ releaseId: release.id, platform: release.platform, channel }]
+        : [];
+    }),
+  );
   const channelNames = new Map(
     channels.map((channel) => [channel.id, channel.name]),
   );
@@ -556,6 +568,17 @@ function BundlesPage() {
                                     : "—"}
                               </dd>
                             </div>
+                            <div className="col-span-2 rounded-md bg-muted/40 p-3">
+                              <dt className="mb-2 text-muted-foreground">
+                                Activity · 30d
+                              </dt>
+                              <dd>
+                                <BundleMovementSummary
+                                  report={activityQuery.data?.[release.id]}
+                                  loading={activityQuery.isFetching}
+                                />
+                              </dd>
+                            </div>
                             <div className="col-span-2 flex flex-wrap items-center gap-2 rounded-md bg-muted/40 p-3">
                               <ReleaseStateBadge release={release} />
                               {release.should_force_update ? (
@@ -618,6 +641,7 @@ function BundlesPage() {
                     <TableHead>Enabled</TableHead>
                     <TableHead>Force update</TableHead>
                     <TableHead>Rollout</TableHead>
+                    <TableHead>Activity · 30d</TableHead>
                     <TableHead>Message</TableHead>
                     <TableHead>Created</TableHead>
                   </TableRow>
@@ -626,7 +650,7 @@ function BundlesPage() {
                   {releasesQuery.isPending
                     ? Array.from({ length: 7 }, (_, index) => (
                         <TableRow key={index}>
-                          <TableCell colSpan={10}>
+                          <TableCell colSpan={11}>
                             <Skeleton className="h-8 w-full" />
                           </TableCell>
                         </TableRow>
@@ -783,6 +807,12 @@ function BundlesPage() {
                                   percentage={release.rollout_cohort_count / 10}
                                 />
                               </TableCell>
+                              <TableCell>
+                                <BundleMovementSummary
+                                  report={activityQuery.data?.[release.id]}
+                                  loading={activityQuery.isFetching}
+                                />
+                              </TableCell>
                               <TableCell
                                 className="text-sm text-muted-foreground"
                                 title={release.message ?? undefined}
@@ -804,7 +834,7 @@ function BundlesPage() {
                               <TableRow className="hover:bg-transparent">
                                 <TableCell
                                   className="border-t-0 p-0"
-                                  colSpan={10}
+                                  colSpan={11}
                                 >
                                   <ReleaseBundleChildrenPanel
                                     onDetailClick={openChildBundle}
@@ -821,7 +851,7 @@ function BundlesPage() {
                     <TableRow>
                       <TableCell
                         className="h-40 text-center text-muted-foreground"
-                        colSpan={10}
+                        colSpan={11}
                       >
                         {search.bundleId ||
                         search.channelId ||

package/src/routes/insights.tsx

@@ -1,18 +1,12 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { useState } from "react";
 
-import {
-  InsightsBundleReports,
-  type InsightsReportSelection,
-} from "@/components/features/insights/InsightsBundleReports";
 import { InsightsControls } from "@/components/features/insights/InsightsControls";
 import { InsightsOverview } from "@/components/features/insights/InsightsOverview";
 import { InsightsPageHeader } from "@/components/features/insights/InsightsPageHeader";
-import { Button } from "@/components/ui/button";
 import {
   type InsightsWindow,
   type InsightsOverviewInput,
-  useReportingInstallationsQuery,
 } from "@/lib/insights-api";
 
 export const Route = createFileRoute("/insights")({
@@ -25,10 +19,6 @@ function InsightsPage() {
     platform: "ios",
     channel: "production",
   });
-  const [selection, setSelection] = useState<InsightsReportSelection | null>(
-    null,
-  );
-  const active = useReportingInstallationsQuery({ ...scope, window });
 
   return (
     <div className="flex h-svh min-h-0 flex-col">
@@ -39,44 +29,13 @@ function InsightsPage() {
             scope={scope}
             onScopeChange={(next) => {
               setScope(next);
-              setSelection(null);
             }}
             onWindowChange={(next) => {
               setWindow(next);
-              setSelection(null);
             }}
             window={window}
           />
-          <Button
-            className="h-11 self-end lg:h-8"
-            variant="outline"
-            disabled={active.isFetching}
-            onClick={() => {
-              setSelection(null);
-              void active.refetch();
-            }}
-          >
-            Refresh overview
-          </Button>
-          {active.isLoading ? (
-            <InsightsOverview status="loading" />
-          ) : active.error ? (
-            <InsightsOverview status="error" error={active.error} />
-          ) : active.data ? (
-            <InsightsOverview
-              status="success"
-              active={active.data}
-              onOutcomeSelect={setSelection}
-            />
-          ) : (
-            <InsightsOverview status="loading" />
-          )}
-          {selection ? (
-            <InsightsBundleReports
-              key={JSON.stringify(selection)}
-              selection={selection}
-            />
-          ) : null}
+          <InsightsOverview input={{ ...scope, window }} />
         </div>
       </div>
     </div>

package/.output/public/assets/HashValueDisplay-CB0Eskit.js

@@ -1 +0,0 @@
-import{Gn as e,Zn as t,_ as n,g as r,xn as i,y as a}from"./createServerFn-CA8fs7QD.js";import{n as o}from"./dist-C_NydL0e.js";var s=e(`chevron-down`,[[`path`,{d:`m6 9 6 6 6-6`,key:`qrunsl`}]]),c=e(`rotate-ccw`,[[`path`,{d:`M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8`,key:`1357e3`}],[`path`,{d:`M3 3v5h5`,key:`1xhq8a`}]]),l=t(),u=(e,t=12)=>e.length>t?`${e.slice(0,Math.max(1,t-4))}…${e.slice(-4)}`:e;function d({value:e,maxLength:t=12,className:s,buttonClassName:c}){let d=e.length>t,f=u(e,t),p=async()=>{try{await navigator.clipboard.writeText(e),o.success(`Copied to clipboard`,{description:e})}catch{o.error(`Failed to copy value`)}},m=e=>{e.preventDefault(),e.stopPropagation(),p()},h=e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),e.stopPropagation(),p())},g=(0,l.jsx)(`span`,{translate:`no`,className:i(`font-mono text-xs tabular-nums whitespace-nowrap`,s),children:f});return(0,l.jsxs)(r,{children:[(0,l.jsx)(a,{render:(0,l.jsx)(`button`,{type:`button`,"aria-label":`Copy full value: ${e}`,translate:`no`,className:i(`ring-ring/30 bg-muted/40 border-border/70 inline-flex min-w-0 max-w-full cursor-pointer items-center rounded-md border px-1.5 py-0.5 align-top shadow-xs outline-none transition-[background-color,border-color,transform,box-shadow]`,`hover:bg-muted/70 active:scale-[0.98] active:bg-muted/85 focus-visible:ring-[2px]`,`touch-manipulation select-none motion-reduce:transition-none motion-reduce:active:scale-100`,!d&&`cursor-copy`,c),onClick:m,onKeyDown:h}),children:g}),(0,l.jsx)(n,{hidden:!d,children:(0,l.jsx)(`p`,{translate:`no`,className:`break-all font-mono text-xs tabular-nums`,children:e})})]})}export{s as i,u as n,c as r,d as t};