@anchrd/intel-ui 0.4.0 → 0.5.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/tools/tools.tsx

@@ -3,7 +3,7 @@ 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 { ActionSlot } from "@/app/action-slot/action-slot.tsx";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import type { I18n } from "@/i18n/i18n.types.ts";
@@ -37,7 +37,7 @@ export function Tools() {
   return (
     <div className="min-h-full p-8">
       {catalog.data?.portalConnected ? (
-        <HeaderActions>
+        <ActionSlot>
           <a
             href={data.portalConnectUrl("/tools")}
             className={buttonVariants({ variant: "outline", size: "sm" })}
@@ -45,7 +45,7 @@ export function Tools() {
             <LogIn aria-hidden="true" />
             {i18n.t("tools.reconnect")}
           </a>
-        </HeaderActions>
+        </ActionSlot>
       ) : null}
 
       <div className="mx-auto w-full max-w-4xl space-y-5">

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;
-}