@anchrd/intel-ui 0.25.0 → 0.28.0

package/src/save-button/save-button.tsx

@@ -8,61 +8,42 @@ import { Modal } from "@/modal/modal.tsx";
  * Saving, in the title line beside the name of the thing being saved (#24).
  *
  * ⚠️ Unsaved is a state that must survive colour blindness, so it is never carried by colour alone.
- * At rest the button is a quiet icon; with something to save it fills, grows a dot and spells the
- * word out. Three changes at once, of which two are readable without seeing any colour at all.
+ * The button only exists while there is work to save; it fills, grows a dot and spells the word
+ * out. Three signals at once, of which two are readable without seeing any colour at all.
  *
- * ⚠️ The accessible name names the state as well — "Saved" and "Save unsaved changes" are two
- * different pieces of information, and a screen reader gets neither the fill nor the dot. The
- * visible word stays a prefix of it, so speech input still reaches the button by what it reads.
- *
- * ⚠️ At rest there are TWO states, not one, and `stored` is what tells them apart (#432). A
- * document that has never been written has nothing to save either — and calling that "Saved" is the
- * one sentence an editor must never say untruthfully: whoever reads it closes the tab. The button
- * was already unclickable in that state, which is exactly why it went unnoticed for so long; the
- * tooltip and the accessible name kept claiming a version that does not exist. "Nothing to save"
- * says less and stays true in both readings.
+ * ⚠️ The accessible name names the state as well. A screen reader gets neither the fill nor the
+ * dot, and saving in progress must not sound like another available action. The visible word stays
+ * a prefix of the name, so speech input still reaches the button by what it reads.
  */
 export function SaveButton({
   dirty,
   saving,
-  stored,
   onSave,
 }: {
   dirty: boolean;
   saving: boolean;
-  /** Whether what is being edited has content on the server at all. */
-  stored: boolean;
   onSave(): void;
 }) {
   const i18n = useI18n();
-  const label = i18n.t(dirty ? "common.saveDirty" : stored ? "common.saved" : "common.saveNothing");
+  if (!dirty && !saving) return null;
+  const label = i18n.t(saving ? "common.saving" : "common.saveDirty");
   return (
     <TooltipProvider delayDuration={300}>
       <Tooltip>
-        {/* ⚠️ The wrapper is the trigger, not the button. At rest the button is disabled, and a
-            disabled control fires no pointer events — a tooltip hung on it would stay shut in the
-            one state where the button carries no words at all. */}
+        {/* The wrapper remains the trigger while saving, when the button is deliberately disabled. */}
         <TooltipTrigger asChild>
           <span className="inline-flex">
             <button
               type="button"
-              disabled={!dirty || saving}
+              disabled={saving}
               onClick={onSave}
               aria-label={label}
               data-dirty={dirty}
-              className={
-                dirty
-                  ? "inline-flex h-8 items-center gap-2 rounded-md bg-primary px-2.5 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-70"
-                  : "inline-flex size-8 items-center justify-center rounded-md border bg-background text-muted-foreground outline-none disabled:opacity-60"
-              }
+              className="inline-flex h-8 items-center gap-2 rounded-md bg-primary px-2.5 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-70"
             >
-              {dirty ? (
-                <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-current" />
-              ) : null}
+              <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-current" />
               <Save aria-hidden="true" className="size-4 shrink-0" />
-              {dirty ? (
-                <span>{saving ? i18n.t("common.saving") : i18n.t("common.save")}</span>
-              ) : null}
+              <span>{saving ? i18n.t("common.saving") : i18n.t("common.save")}</span>
             </button>
           </span>
         </TooltipTrigger>

package/src/time/relative-time.tsx

@@ -0,0 +1,41 @@
+import { createContext, type ReactNode, useContext, useEffect, useState } from "react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { useDateTime } from "./time-context.tsx";
+
+const ClockContext = createContext<number | null>(null);
+
+export function RelativeClockProvider({ children }: { children: ReactNode }) {
+  const [now, setNow] = useState(Date.now);
+  useEffect(() => {
+    const timer = window.setInterval(() => setNow(Date.now()), 1_000);
+    return () => window.clearInterval(timer);
+  }, []);
+  return <ClockContext value={now}>{children}</ClockContext>;
+}
+
+export function RelativeTime({ value, className }: { value: string; className?: string }) {
+  const clock = useContext(ClockContext);
+  const dateTime = useDateTime();
+  const now = clock ?? Date.now();
+  return (
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <time
+            dateTime={value}
+            // biome-ignore lint/a11y/noNoninteractiveTabindex: The exact timestamp tooltip must be keyboard reachable, including inside clickable rows.
+            tabIndex={0}
+            className={cn(
+              "rounded-sm text-left outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              className,
+            )}
+          >
+            {dateTime.relative(value, now)}
+          </time>
+        </TooltipTrigger>
+        <TooltipContent>{dateTime.at(value)}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

package/src/time/time-context.tsx

@@ -4,6 +4,7 @@ import {
   DeviceZone,
   formatDate,
   formatDateTime,
+  formatRelativeTime,
   readZoneChoice,
   rememberZoneChoice,
   type TimeZoneStore,
@@ -58,7 +59,11 @@ export function useTimeZone(): ZoneSelection | null {
  * AND zone itself, and the first one that forgets shows the device's zone again — which is the state
  * before #467, only harder to find.
  */
-export function useDateTime(): { at: (value: string) => string; on: (value: string) => string } {
+export function useDateTime(): {
+  at: (value: string) => string;
+  on: (value: string) => string;
+  relative: (value: string, now: number) => string;
+} {
   const i18n = useI18n();
   const zone = useContext(ZoneContext);
   const choice = zone?.current ?? DeviceZone;
@@ -66,6 +71,7 @@ export function useDateTime(): { at: (value: string) => string; on: (value: stri
     () => ({
       at: (value: string) => formatDateTime(value, i18n.locale, choice),
       on: (value: string) => formatDate(value, i18n.locale, choice),
+      relative: (value: string, now: number) => formatRelativeTime(value, i18n.locale, choice, now),
     }),
     [i18n.locale, choice],
   );

package/src/time/time.ts

@@ -115,6 +115,31 @@ export function formatDate(value: string, locale: string, choice: ZoneChoice): s
   return date.toLocaleDateString(locale, { timeZone: resolveZone(choice) });
 }
 
+const Minute = 60_000;
+const Hour = 60 * Minute;
+const Day = 24 * Hour;
+const Month = 30 * Day;
+
+/** A compact list value. Thirty days is the explicit month boundary; calendar labels stay in the tooltip. */
+export function formatRelativeTime(
+  value: string,
+  locale: string,
+  choice: ZoneChoice,
+  now: number,
+): string {
+  const date = new Date(value);
+  const target = date.getTime();
+  if (Number.isNaN(target)) return value;
+  const difference = target - now;
+  const distance = Math.abs(difference);
+  const relative = new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "short" });
+  if (distance < Minute) return relative.format(0, "second");
+  if (distance < Hour) return relative.format(Math.trunc(difference / Minute), "minute");
+  if (distance < Day) return relative.format(Math.trunc(difference / Hour), "hour");
+  if (distance < Month) return relative.format(Math.trunc(difference / Day), "day");
+  return formatDate(value, locale, choice);
+}
+
 // ⚠️ A short curated list rather than `Intl.supportedValuesOf("timeZone")` — that is over 400
 // entries, and a dropdown of 400 rows without a search is not a choice but an imposition. A zone
 // missing here is added once it has been missed three times; until then the device's zone is the

package/src/title-row/title-row.tsx

@@ -1,7 +1,55 @@
-import type * as React from "react";
+import {
+  createContext,
+  type HTMLAttributes,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { ResourceAccessSummary } from "@/access-summary/access-summary.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { cn } from "@/lib/utils";
 import { ResourceMenu, type ResourceTarget } from "@/resource-menu/resource-menu.tsx";
 
+const TitleRowScrollContext = createContext<{
+  scrolled: boolean;
+  setScrolled(scrolled: boolean): void;
+} | null>(null);
+
+export function TitleRowFrame({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  const [scrolled, setScrolled] = useState(false);
+  const value = useMemo(() => ({ scrolled, setScrolled }), [scrolled]);
+  return (
+    <TitleRowScrollContext.Provider value={value}>
+      <div className={className} {...props} />
+    </TitleRowScrollContext.Provider>
+  );
+}
+
+export function TitleRowScrollArea({
+  className,
+  onScroll,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  const scroll = useContext(TitleRowScrollContext);
+  const setScrolled = scroll?.setScrolled;
+  useEffect(() => () => setScrolled?.(false), [setScrolled]);
+  return (
+    <div
+      className={className}
+      onScroll={(event) => {
+        scroll?.setScrolled(event.currentTarget.scrollTop > 0);
+        onScroll?.(event);
+      }}
+      {...props}
+    />
+  );
+}
+
 /**
  * The one line an open thing gets: its name on the left, everything that acts on it on the right
  * (#53).
@@ -26,10 +74,23 @@ export function TitleRow({
   title: string;
   description?: string | null;
   target: ResourceTarget;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }) {
+  const scroll = useContext(TitleRowScrollContext);
+  const setScrolled = scroll?.setScrolled;
+  const targetId = target.type === "flow" ? target.flow.id : target.node.id;
+  useEffect(() => {
+    void targetId;
+    setScrolled?.(false);
+  }, [setScrolled, targetId]);
   return (
-    <div className="flex items-start justify-between gap-5 border-b px-6 py-4">
+    <div
+      data-scrolled={scroll?.scrolled || undefined}
+      className={cn(
+        "relative z-10 flex shrink-0 items-start justify-between gap-5 px-6 py-4 transition-shadow",
+        scroll?.scrolled && "shadow-[inset_0_-1px_0_var(--border)]",
+      )}
+    >
       <div className="flex min-w-0 items-center gap-3">
         <div className="min-w-0">
           <div className="flex min-w-0 flex-wrap items-baseline gap-x-3">
@@ -39,7 +100,7 @@ export function TitleRow({
             ) : null}
             <span data-slot="title-meta" className="text-sm text-muted-foreground" />
           </div>
-          {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
+          {description ? <DescriptionDisclosure key={targetId} description={description} /> : null}
         </div>
       </div>
       {/* ⚠️ Document order is tab order here — nothing carries a `tabIndex`. The menu is therefore
@@ -53,3 +114,62 @@ export function TitleRow({
     </div>
   );
 }
+
+function DescriptionDisclosure({ description }: { description: string }) {
+  const i18n = useI18n();
+  const descriptionId = useId();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLSpanElement>(null);
+  const [clipped, setClipped] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const measure = measureRef.current;
+    if (!container || !measure) return;
+
+    const update = () => setClipped(measure.scrollWidth > container.clientWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(container);
+    observer.observe(measure);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      data-description-container="true"
+      className={cn(
+        "relative mt-1 min-w-0 text-sm text-muted-foreground",
+        expanded && "flex flex-wrap items-baseline gap-x-1",
+      )}
+    >
+      <span
+        ref={measureRef}
+        data-description-measure="true"
+        aria-hidden="true"
+        className="pointer-events-none invisible absolute whitespace-nowrap"
+      >
+        {description}
+      </span>
+      <span id={descriptionId} className={cn(clipped && !expanded && "block truncate")}>
+        {description}
+      </span>
+      {clipped ? (
+        <button
+          type="button"
+          aria-controls={descriptionId}
+          aria-expanded={expanded}
+          onClick={() => setExpanded((current) => !current)}
+          className={cn(
+            "shrink-0 font-medium text-foreground outline-none hover:underline focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-ring",
+            !expanded && "absolute bottom-0 right-0 bg-background pl-1",
+          )}
+        >
+          {i18n.t(expanded ? "title.descriptionLess" : "title.descriptionMore")}
+        </button>
+      ) : null}
+    </div>
+  );
+}