@anchrd/intel-ui 0.4.0 → 0.6.0

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

@@ -0,0 +1,103 @@
+import { useBlocker } from "@tanstack/react-router";
+import { Save } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Modal } from "@/modal/modal.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+/**
+ * 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 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.
+ */
+export function SaveButton({
+  dirty,
+  saving,
+  onSave,
+}: {
+  dirty: boolean;
+  saving: boolean;
+  onSave(): void;
+}) {
+  const { i18n } = useIntelRouterContext();
+  const label = i18n.t(dirty ? "common.saveDirty" : "common.saved");
+  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. */}
+        <TooltipTrigger asChild>
+          <span className="inline-flex">
+            <button
+              type="button"
+              disabled={!dirty || 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"
+              }
+            >
+              {dirty ? (
+                <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-current" />
+              ) : null}
+              <Save aria-hidden="true" className="size-4 shrink-0" />
+              {dirty ? (
+                <span>{saving ? i18n.t("common.saving") : i18n.t("common.save")}</span>
+              ) : null}
+            </button>
+          </span>
+        </TooltipTrigger>
+        <TooltipContent>{label}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+/**
+ * The state, said out loud at the moment it would otherwise be lost.
+ *
+ * ⚠️ Without this the button is the only carrier of "not saved yet", and the one person who needs
+ * that answer is the one who has already looked away — clicking the next document in the tree is a
+ * plain navigation, and the editor would unmount with the work in it. `enableBeforeUnload` covers
+ * the other exit, the one the router never sees: closing the tab or reloading.
+ */
+export function UnsavedChangesGuard({ dirty }: { dirty: boolean }) {
+  const { i18n } = useIntelRouterContext();
+  const blocker = useBlocker({
+    shouldBlockFn: () => true,
+    disabled: !dirty,
+    enableBeforeUnload: () => dirty,
+    withResolver: true,
+  });
+  if (blocker.status !== "blocked") return null;
+  return (
+    <Modal title={i18n.t("common.unsavedTitle")} close={blocker.reset}>
+      <p className="text-sm text-muted-foreground">{i18n.t("common.unsavedBody")}</p>
+      <div className="mt-5 flex gap-2">
+        <button
+          type="button"
+          onClick={blocker.reset}
+          className="flex-1 rounded-md border px-4 py-2 text-sm font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {i18n.t("common.unsavedStay")}
+        </button>
+        <button
+          type="button"
+          onClick={blocker.proceed}
+          className="flex-1 rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground outline-none hover:bg-destructive/90 focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {i18n.t("common.unsavedLeave")}
+        </button>
+      </div>
+    </Modal>
+  );
+}

package/src/styles.css

@@ -114,6 +114,43 @@
   }
 }
 
+/* `colorMode` on `<ReactFlow>` decides which of the library's two palettes it paints from; these
+   decide what the palette is made of. They are React Flow's own theming variables — its documented
+   extension point, set on its root class, not overrides hung on the internal class names of its
+   controls — so an installation with its own theme colours the canvas, the grid, the zoom buttons
+   and the overview map along with everything else. Same arrangement as `.react-sigma` below. */
+.react-flow {
+  --xy-background-color: var(--background);
+  --xy-background-pattern-color: var(--border);
+  --xy-controls-button-background-color: var(--card);
+  --xy-controls-button-background-color-hover: var(--accent);
+  --xy-controls-button-color: var(--card-foreground);
+  --xy-controls-button-color-hover: var(--accent-foreground);
+  --xy-controls-button-border-color: var(--border);
+  --xy-minimap-background-color: var(--card);
+  /* The nodes have to read as nodes against the map's own background rather than as one white
+     block, so they take the token that is defined to contrast with it. */
+  --xy-minimap-node-background-color: var(--muted-foreground);
+  /* The veil over everything outside the viewport: a token, thinned, because opaque would hide the
+     part of the graph the map exists to show. */
+  --xy-minimap-mask-background-color: color-mix(in oklab, var(--muted) 70%, transparent);
+}
+
+/* A context edge is not a step in the order of work (#37), so it is drawn as material rather than as
+   procedure: dashed, thinner, and in the muted token instead of the edge colour. The dash pattern is
+   set on the edge itself; the colour belongs here, with the rest of the canvas theming, so an
+   installation's own tokens reach it too. */
+.react-flow .intel-context-edge .react-flow__edge-path {
+  stroke: var(--muted-foreground);
+  stroke-width: 1.5;
+}
+
+/* The start node in the overview map (#39). Nothing is written there, so the only thing that can
+   carry "this is where it begins" that far out is the colour. */
+.react-flow__minimap-node.intel-minimap-start {
+  fill: var(--primary);
+}
+
 .react-sigma {
   --sigma-background-color: var(--background);
   --sigma-controls-background-color: var(--card);

package/src/theme/theme.ts

@@ -1,5 +1,11 @@
+import { useSyncExternalStore } from "react";
+
 export type Theme = "dark" | "light";
 
+// The one query the whole theme hangs off. Exported so that the `.dark` class and everything that
+// has to agree with it read the same string rather than two copies of it.
+export const SystemThemeQuery = "(prefers-color-scheme: dark)";
+
 export function resolveTheme(prefersDark: boolean): Theme {
   return prefersDark ? "dark" : "light";
 }
@@ -14,3 +20,21 @@ export function watchSystemTheme(root: HTMLElement, media: MediaQueryList): () =
   media.addEventListener("change", onChange);
   return () => media.removeEventListener("change", onChange);
 }
+
+function subscribeSystemTheme(onChange: () => void): () => void {
+  const media = window.matchMedia(SystemThemeQuery);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}
+
+function systemTheme(): Theme {
+  return resolveTheme(window.matchMedia(SystemThemeQuery).matches);
+}
+
+// The theme as a value, for the one consumer a CSS class cannot serve: a foreign library that
+// paints from a prop instead of from our tokens. It reads the same media query `watchSystemTheme`
+// puts the `.dark` class on the root from, so the two cannot drift apart — and because it is a
+// subscription rather than a read, a switch mid-session moves both at once, without a reload.
+export function useSystemTheme(): Theme {
+  return useSyncExternalStore(subscribeSystemTheme, systemTheme);
+}

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

@@ -0,0 +1,49 @@
+import type * as React from "react";
+import { ResourceMenu, type ResourceTarget } from "@/resource-menu/resource-menu.tsx";
+
+/**
+ * The one line an open thing gets: its name on the left, everything that acts on it on the right
+ * (#53).
+ *
+ * ⚠️ The order of the right-hand group belongs to this component, not to its callers. Whatever they
+ * pass as `children` is rendered before the menu and the menu is appended last, always — so a screen
+ * that grows a new button cannot push the three dots to the left, and there is no second place where
+ * the rule could be forgotten. That is the whole point: the menu holds rename, move, share and
+ * archive, and a position one has to look for is a position one stops using.
+ *
+ * The two slots are for what belongs to this thing but lives further down the tree, where its state
+ * is. `title-meta` is a quiet word beside the name (a table's row count); `title-actions` is a
+ * button in the group (saving a document, exporting a table). Both are filled through `ActionSlot`
+ * and both sit before the menu for the same reason `children` do.
+ */
+export function TitleRow({
+  title,
+  description,
+  target,
+  children,
+}: {
+  title: string;
+  description?: string | null;
+  target: ResourceTarget;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-start justify-between gap-5 border-b px-6 py-4">
+      <div className="min-w-0">
+        <div className="flex min-w-0 items-baseline gap-3">
+          <h2 className="truncate text-lg font-semibold">{title}</h2>
+          <span data-slot="title-meta" className="shrink-0 text-sm text-muted-foreground" />
+        </div>
+        {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
+      </div>
+      {/* ⚠️ Document order is tab order here — nothing carries a `tabIndex`. The menu is therefore
+          reached last by the keyboard for the same reason it stands last on screen, and the two
+          cannot drift apart without someone rewriting this line. */}
+      <div className="flex shrink-0 items-center gap-2">
+        <div data-slot="title-actions" className="flex items-center gap-2" />
+        {children}
+        <ResourceMenu target={target} variant="title" />
+      </div>
+    </div>
+  );
+}

package/src/tools/tools.tsx

@@ -1,10 +1,9 @@
 import type { ToolCapability } from "@anchrd/intel-contract";
 import { useQuery } from "@tanstack/react-query";
 import { useRouterState } from "@tanstack/react-router";
-import { AlertTriangle, ChevronRight, LogIn, PlugZap, Wrench } from "lucide-react";
-import type * as React from "react";
-import { HeaderActions } from "@/app/header-actions/header-actions.tsx";
-import { Button, buttonVariants } from "@/components/ui/button";
+import { AlertTriangle, ChevronRight, PlugZap, ShieldOff, Wrench } from "lucide-react";
+import * as React from "react";
+import { Button } from "@/components/ui/button";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import type { I18n } from "@/i18n/i18n.types.ts";
 import { useIntelRouterContext } from "@/router/router-context.ts";
@@ -20,6 +19,23 @@ function toolOrigin(name: string): string | null {
   return boundary > 0 ? name.slice(0, boundary) : null;
 }
 
+// Signed in to Intel is signed in to the portal, so the sign-in is attempted at most once per
+// visit. A second attempt after a refusal would be a redirect loop with an unchanging answer, and
+// the marker in the URL only survives until the next navigation — the browser session remembers it
+// instead (#60).
+const SignInAttemptKey = "intel.portal-sign-in-attempted";
+
+// Reading `sessionStorage` throws outright in a few privacy modes, so the guard is a try, not a
+// feature check. Losing the note costs one extra redirect, and the marker the refusal leaves in the
+// URL still ends the walk — it must never cost the screen.
+function attemptStore(): Storage | null {
+  try {
+    return typeof window === "undefined" ? null : window.sessionStorage;
+  } catch {
+    return null;
+  }
+}
+
 // The catalog is one live `tools/list` with the signed-in user's own portal token. Nothing here is
 // stored, mirrored or administered — the screen shows what the portal answers and nothing else.
 export function Tools() {
@@ -28,36 +44,34 @@ export function Tools() {
   // A hit from the header search arrives as `?select=<tool name>`, and the row it names opens with
   // the list. Nothing else about the row changes: it is still only a disclosure.
   const requested = useRouterState({ select: (state) => selectedFrom(state.location.search) });
-  // The portal connect flow returns here with a marker when it refuses. Only its presence is used:
-  // the value is attacker-controlled and could carry provider detail, so it is never rendered.
-  const connectFailed =
+  // The silent sign-in returns here with a marker when the portal refused. Only its presence is
+  // used: the value comes from outside and could carry provider detail, so it is never rendered.
+  const refused =
     typeof window !== "undefined" &&
     new URLSearchParams(window.location.search).has("connectError");
+  const [signingIn, setSigningIn] = React.useState(false);
+
+  // ⚠️ Nobody is asked to start this. The portal sign-in is a browser redirect, so the screen
+  // begins it itself the moment the catalog says there is no portal session yet — that is the whole
+  // of what replaced the "Connect the portal" button.
+  React.useEffect(() => {
+    if (!catalog.data) return;
+    const attempts = attemptStore();
+    if (catalog.data.portalConnected) {
+      // An answered sign-in frees the next one: when the token later expires beyond renewal, the
+      // same silent walk runs again rather than stopping at a screen.
+      attempts?.removeItem(SignInAttemptKey);
+      return;
+    }
+    if (refused || attempts?.getItem(SignInAttemptKey)) return;
+    attempts?.setItem(SignInAttemptKey, "1");
+    setSigningIn(true);
+    data.startPortalSignIn("/tools");
+  }, [catalog.data, data, refused]);
 
   return (
     <div className="min-h-full p-8">
-      {catalog.data?.portalConnected ? (
-        <HeaderActions>
-          <a
-            href={data.portalConnectUrl("/tools")}
-            className={buttonVariants({ variant: "outline", size: "sm" })}
-          >
-            <LogIn aria-hidden="true" />
-            {i18n.t("tools.reconnect")}
-          </a>
-        </HeaderActions>
-      ) : null}
-
       <div className="mx-auto w-full max-w-4xl space-y-5">
-        {connectFailed && (
-          <p
-            role="alert"
-            className="rounded-md border border-destructive/30 p-3 text-sm text-destructive"
-          >
-            {i18n.t("tools.connectFailed")}
-          </p>
-        )}
-
         {catalog.isPending ? (
           <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
         ) : catalog.isError ? (
@@ -74,16 +88,21 @@ export function Tools() {
             </Button>
           </Notice>
         ) : !catalog.data.portalConnected ? (
-          <Notice
-            icon={<PlugZap aria-hidden="true" className="mx-auto size-8 text-muted-foreground" />}
-            title={i18n.t("tools.disconnected")}
-            help={i18n.t("tools.disconnectedHelp")}
-          >
-            <a href={data.portalConnectUrl("/tools")} className={buttonVariants()}>
-              <LogIn aria-hidden="true" />
-              {i18n.t("tools.connect")}
-            </a>
-          </Notice>
+          signingIn ? (
+            <p className="text-sm text-muted-foreground">{i18n.t("tools.signingIn")}</p>
+          ) : (
+            // The end of the silent walk for somebody no Access policy carries. It is a sentence
+            // about access, not an invitation to connect: there is nothing they could click that
+            // would change the answer, and what the portal replied is not repeated here.
+            <Notice
+              alert
+              icon={
+                <ShieldOff aria-hidden="true" className="mx-auto size-8 text-muted-foreground" />
+              }
+              title={i18n.t("tools.noAccess")}
+              help={i18n.t("tools.noAccessHelp")}
+            />
+          )
         ) : catalog.data.items.length === 0 ? (
           <Notice
             icon={<Wrench aria-hidden="true" className="mx-auto size-8 text-muted-foreground" />}

package/src/app/header-actions/header-actions.tsx

@@ -1,15 +0,0 @@
-import type * as React from "react";
-import { useEffect, useState } from "react";
-import { createPortal } from "react-dom";
-
-// The shell owns the header bar, the screen owns what belongs in it: a screen renders its actions
-// here and they appear beside the breadcrumb instead of in a second heading of its own.
-//
-// ⚠️ The slot lives in the shell above the outlet, so it is not in the document while the screen
-// first renders. Looking it up in an effect costs one extra render and is the only order that
-// works; reading it during render finds nothing on the first paint.
-export function HeaderActions({ children }: { children: React.ReactNode }) {
-  const [slot, setSlot] = useState<Element | null>(null);
-  useEffect(() => setSlot(document.querySelector('[data-slot="header-actions"]')), []);
-  return slot ? createPortal(children, slot) : null;
-}