@anchrd/intel-ui 0.39.0 → 0.41.0

package/src/styles.css

@@ -44,20 +44,24 @@
      grid of achromatic dots codes nothing, and neither does a graph whose blocked node looks like
      its neighbour.
 
-     ⚠️ A step of the ramp belongs to a POSITION, never to a status id. A board's status list is
-     configured per board — renamed, extended, reordered (`board_configure`) — so `done` is not a
-     colour any more than `column four` is a name. The n-th status takes the n-th step and the ramp
-     wraps; `archived` is the exception and always takes `--muted-foreground`, because a shelf is
-     not a stage (see `board-status.ts`).
+     ⚠️ **A step belongs to a FAMILY, not to a status and not to a depth.** Every card descending
+     from the same root task takes the same step, whatever column it sits in and however deep it
+     hangs — that is what lets somebody see that the card in `Backlog` belongs to the one in
+     `In progress`. Depth is carried by the NUMBER of stripes, never by the hue: two channels for
+     two questions.
 
-     ⚠️ Colour is never the only channel. Every place these are used names the status in text as
-     well, so a reader who does not see the difference reads it instead. */
-  --board-status-1: oklch(0.58 0.02 260);
-  --board-status-2: oklch(0.55 0.16 255);
-  --board-status-3: oklch(0.65 0.15 65);
-  --board-status-4: oklch(0.55 0.14 150);
-  --board-status-5: oklch(0.53 0.18 305);
-  --board-status-6: oklch(0.56 0.15 20);
+     ⚠️ **Six, and then they repeat.** Two families sharing a step is not a fault. At twenty root
+     tasks every other answer is a palette nobody can tell apart, and a colour that cannot be told
+     apart says less than none.
+
+     ⚠️ Colour is never the only channel. Every card that carries stripes also names its level and
+     where its parent sits, in text, so a reader who does not see the difference reads it instead. */
+  --board-family-1: oklch(0.58 0.02 260);
+  --board-family-2: oklch(0.55 0.16 255);
+  --board-family-3: oklch(0.65 0.15 65);
+  --board-family-4: oklch(0.55 0.14 150);
+  --board-family-5: oklch(0.53 0.18 305);
+  --board-family-6: oklch(0.56 0.15 20);
 }
 
 .dark {
@@ -90,12 +94,12 @@
   --sidebar-ring: oklch(0.556 0 0);
   /* The same six steps, lifted for a dark surface. Same hues, same order — a board must not change
      which colour a column has when the reader switches the appearance. */
-  --board-status-1: oklch(0.72 0.02 260);
-  --board-status-2: oklch(0.7 0.14 255);
-  --board-status-3: oklch(0.78 0.13 65);
-  --board-status-4: oklch(0.72 0.13 150);
-  --board-status-5: oklch(0.7 0.16 305);
-  --board-status-6: oklch(0.71 0.14 20);
+  --board-family-1: oklch(0.72 0.02 260);
+  --board-family-2: oklch(0.7 0.14 255);
+  --board-family-3: oklch(0.78 0.13 65);
+  --board-family-4: oklch(0.72 0.13 150);
+  --board-family-5: oklch(0.7 0.16 305);
+  --board-family-6: oklch(0.71 0.14 20);
 }
 
 @theme inline {
@@ -130,12 +134,12 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
-  --color-board-status-1: var(--board-status-1);
-  --color-board-status-2: var(--board-status-2);
-  --color-board-status-3: var(--board-status-3);
-  --color-board-status-4: var(--board-status-4);
-  --color-board-status-5: var(--board-status-5);
-  --color-board-status-6: var(--board-status-6);
+  --color-board-family-1: var(--board-family-1);
+  --color-board-family-2: var(--board-family-2);
+  --color-board-family-3: var(--board-family-3);
+  --color-board-family-4: var(--board-family-4);
+  --color-board-family-5: var(--board-family-5);
+  --color-board-family-6: var(--board-family-6);
 }
 
 @layer base {

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

@@ -67,14 +67,36 @@ export function TitleRowScrollArea({
  */
 export function TitleRow({
   title,
+  crumbs,
   description,
   target,
   separated,
   children,
 }: {
+  /**
+   * ⚠️ **Not drawn while `crumbs` is set** — the path names the thing then, and nothing falls back
+   * to this. It stays required all the same, so every caller has to state in one word what the row
+   * is about: the next reader of this call site should not have to follow a component two files
+   * away to find out.
+   */
   title: string;
+  /**
+   * A path that stands in for the name.
+   *
+   * ⚠️ **It REPLACES the heading, it does not join it.** An open board card carries its name in the
+   * path already, and the same sentence twice above one another says nothing twice (#692). The row
+   * itself, its menu order and its slots stay exactly as they are: only what identifies the thing
+   * changes, because for a card the answer is "where it sits", not just "what it is called".
+   */
+  crumbs?: ReactNode;
   description?: string | null;
-  target: ResourceTarget;
+  /**
+   * What the three-dot menu acts on. ⚠️ **Absent means NO menu**, and that is a real state rather
+   * than an oversight: a card whose node has not arrived yet has nothing the menu could rename,
+   * move or archive, and pointing it at the container instead would archive the wrong thing without
+   * asking (#692).
+   */
+  target?: ResourceTarget;
   /**
    * A separator that does NOT wait for a scroll.
    *
@@ -89,7 +111,8 @@ export function TitleRow({
 }) {
   const scroll = useContext(TitleRowScrollContext);
   const setScrolled = scroll?.setScrolled;
-  const targetId = target.type === "flow" ? target.flow.id : target.node.id;
+  const targetId =
+    target === undefined ? undefined : target.type === "flow" ? target.flow.id : target.node.id;
   useEffect(() => {
     void targetId;
     setScrolled?.(false);
@@ -105,13 +128,17 @@ export function TitleRow({
       <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">
-            <h2 className="truncate text-lg font-semibold">{title}</h2>
-            {target.type === "node" && target.node.kind === "folder" ? (
+            {crumbs === undefined ? (
+              <h2 className="truncate text-lg font-semibold">{title}</h2>
+            ) : (
+              crumbs
+            )}
+            {target?.type === "node" && target.node.kind === "folder" ? (
               <ResourceAccessSummary resourceId={target.node.id} ownerId={target.node.ownerId} />
             ) : null}
             {/* A flow carries its own grants since #530, so who reaches it is worth showing where
                 it stands — the same question the folder above already answers here. */}
-            {target.type === "flow" ? (
+            {target?.type === "flow" ? (
               <ResourceAccessSummary
                 kind="flow"
                 resourceId={target.flow.id}
@@ -129,7 +156,7 @@ export function TitleRow({
       <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" />
+        {target === undefined ? null : <ResourceMenu target={target} variant="title" />}
       </div>
     </div>
   );

package/src/user-name/user-name.ts

@@ -39,3 +39,20 @@ export function useUserName(userId: string | null): string | null {
   if (userId === null || me === null || me.id !== userId) return null;
   return displayNameOf(me);
 }
+
+/**
+ * The one or two letters that stand for a name in a circle.
+ *
+ * ⚠️ Lives here rather than beside the circle that first needed it: two surfaces now draw the same
+ * circle — the access summary and a task's assignee — and two copies of this would drift into two
+ * different abbreviations of the same person.
+ */
+export function initials(value: string): string {
+  const parts = value
+    .replace(/@.*$/, "")
+    .split(/[\s._+-]+/)
+    .filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return (parts[0]?.slice(0, 2) ?? "?").toUpperCase();
+  return `${parts[0]?.[0] ?? ""}${parts.at(-1)?.[0] ?? ""}`.toUpperCase();
+}

package/vite.config.ts

@@ -1,11 +1,119 @@
+import { copyFileSync, mkdirSync, writeFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import { fileViewerRenderers } from "@file-viewer/vite-plugin";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { defineConfig, type Plugin } from "vite";
+
+const require = createRequire(import.meta.url);
+
+function fileViewerLicenses(): Plugin {
+  let outDir = "dist";
+  return {
+    name: "file-viewer-licenses",
+    configResolved(config) {
+      outDir = config.build.outDir;
+    },
+    writeBundle() {
+      const target = resolve(outDir, "licenses/file-viewer");
+      const reactPackage = require.resolve("@file-viewer/react/package.json");
+      const rendererPdfPackage = require.resolve("@file-viewer/renderer-pdf/package.json");
+      const rendererPresentationPackage = require.resolve(
+        "@file-viewer/renderer-presentation/package.json",
+      );
+      const rendererWordPackage = require.resolve("@file-viewer/renderer-word/package.json");
+      const packageLicenses = [
+        ["@file-viewer/react", reactPackage],
+        [
+          "@file-viewer/core",
+          createRequire(reactPackage).resolve("@file-viewer/core/package.json"),
+        ],
+        [
+          "@file-viewer/doc",
+          createRequire(rendererWordPackage).resolve("@file-viewer/doc/package.json"),
+        ],
+        [
+          "@file-viewer/docx",
+          createRequire(rendererWordPackage).resolve("@file-viewer/docx/package.json"),
+        ],
+        [
+          "@file-viewer/ppt",
+          resolve(
+            dirname(createRequire(rendererPresentationPackage).resolve("@file-viewer/ppt")),
+            "package.json",
+          ),
+        ],
+        [
+          "@file-viewer/pptx",
+          createRequire(rendererPresentationPackage).resolve("@file-viewer/pptx/package.json"),
+        ],
+        ["@file-viewer/renderer-pdf", rendererPdfPackage],
+        ["@file-viewer/renderer-presentation", rendererPresentationPackage],
+        [
+          "@file-viewer/renderer-spreadsheet",
+          require.resolve("@file-viewer/renderer-spreadsheet/package.json"),
+        ],
+        ["@file-viewer/renderer-word", rendererWordPackage],
+        ["@file-viewer/vite-plugin", require.resolve("@file-viewer/vite-plugin/package.json")],
+        ["pdfjs-dist", createRequire(rendererPdfPackage).resolve("pdfjs-dist/package.json")],
+      ] as const;
+      mkdirSync(target, { recursive: true });
+      for (const [name, packageJson] of packageLicenses) {
+        copyFileSync(
+          resolve(dirname(packageJson), "LICENSE"),
+          resolve(target, `${name.replace("@file-viewer/", "")}.LICENSE`),
+        );
+      }
+      writeFileSync(
+        resolve(target, "THIRD_PARTY_NOTICES.txt"),
+        [
+          "File Viewer packages used by Intel",
+          "",
+          "Apache-2.0:",
+          "@file-viewer/react",
+          "@file-viewer/core",
+          "@file-viewer/docx",
+          "@file-viewer/pptx",
+          "@file-viewer/renderer-pdf",
+          "@file-viewer/renderer-presentation",
+          "@file-viewer/renderer-spreadsheet",
+          "@file-viewer/renderer-word",
+          "@file-viewer/vite-plugin",
+          "pdfjs-dist",
+          "",
+          "MIT:",
+          "@file-viewer/doc",
+          "",
+          "Package-specific license (bundled transitively, not exposed by Intel; see ppt.LICENSE):",
+          "@file-viewer/ppt",
+          "",
+          "The complete license text for every package is stored beside this notice.",
+          "",
+        ].join("\n"),
+      );
+    },
+  };
+}
 
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  resolve: { alias: { "@": fileURLToPath(new URL("./src", import.meta.url)) } },
+  plugins: [
+    react(),
+    tailwindcss(),
+    fileViewerRenderers({
+      formats: ["pdf", "docx", "xlsx", "pptx"],
+      inject: false,
+      chunkStrategy: "renderer",
+    }),
+    fileViewerLicenses(),
+  ],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+      stream: "readable-stream",
+    },
+  },
   server: {
     proxy: {
       "/api": { target: "http://localhost:8788", changeOrigin: true },