@anchrd/intel-ui 0.3.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

@@ -7,65 +7,68 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* The default theme is gate's, token for token: an achromatic base whose primary is black rather
+   than Intel's former blue (hue 265). Every value here is a default — `theme/custom.css` is loaded
+   after this file and a customer theme overrides any of them without touching a component. */
 :root {
   --radius: 0.625rem;
-  --background: oklch(0.99 0.005 265);
-  --foreground: oklch(0.18 0.02 265);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.18 0.02 265);
+  --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.18 0.02 265);
-  --primary: oklch(0.45 0.17 265);
-  --primary-foreground: oklch(0.98 0.01 265);
-  --secondary: oklch(0.95 0.02 265);
-  --secondary-foreground: oklch(0.25 0.04 265);
-  --muted: oklch(0.96 0.01 265);
-  --muted-foreground: oklch(0.5 0.03 265);
-  --accent: oklch(0.94 0.03 265);
-  --accent-foreground: oklch(0.25 0.05 265);
-  --destructive: oklch(0.58 0.23 27);
-  --destructive-foreground: oklch(0.98 0.01 27);
-  --border: oklch(0.9 0.02 265);
-  --input: oklch(0.9 0.02 265);
-  --ring: oklch(0.58 0.15 265);
-  --sidebar: oklch(0.97 0.015 265);
-  --sidebar-foreground: oklch(0.2 0.03 265);
-  --sidebar-primary: oklch(0.45 0.17 265);
-  --sidebar-primary-foreground: oklch(0.98 0.01 265);
-  --sidebar-accent: oklch(0.92 0.035 265);
-  --sidebar-accent-foreground: oklch(0.24 0.06 265);
-  --sidebar-border: oklch(0.88 0.025 265);
-  --sidebar-ring: oklch(0.58 0.15 265);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
 .dark {
-  --background: oklch(0.15 0.025 265);
-  --foreground: oklch(0.96 0.01 265);
-  --card: oklch(0.19 0.03 265);
-  --card-foreground: oklch(0.96 0.01 265);
-  --popover: oklch(0.19 0.03 265);
-  --popover-foreground: oklch(0.96 0.01 265);
-  --primary: oklch(0.7 0.16 265);
-  --primary-foreground: oklch(0.16 0.03 265);
-  --secondary: oklch(0.25 0.035 265);
-  --secondary-foreground: oklch(0.95 0.01 265);
-  --muted: oklch(0.24 0.025 265);
-  --muted-foreground: oklch(0.7 0.025 265);
-  --accent: oklch(0.27 0.05 265);
-  --accent-foreground: oklch(0.96 0.01 265);
-  --destructive: oklch(0.7 0.19 25);
-  --destructive-foreground: oklch(0.98 0.01 25);
-  --border: oklch(1 0 0 / 12%);
-  --input: oklch(1 0 0 / 16%);
-  --ring: oklch(0.66 0.14 265);
-  --sidebar: oklch(0.18 0.035 265);
-  --sidebar-foreground: oklch(0.95 0.01 265);
-  --sidebar-primary: oklch(0.7 0.16 265);
-  --sidebar-primary-foreground: oklch(0.16 0.03 265);
-  --sidebar-accent: oklch(0.26 0.05 265);
-  --sidebar-accent-foreground: oklch(0.96 0.01 265);
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.922 0 0);
+  --sidebar-primary-foreground: oklch(0.205 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.66 0.14 265);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
 @theme inline {
@@ -111,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);
+}