@anchrd/intel-ui 0.40.0 → 0.42.0

package/src/i18n/es.json

@@ -31,11 +31,20 @@
   "archive.title": "Archivo",
   "auth.signOut": "Cerrar sesión",
   "auth.signOutFailed": "El cierre de sesión ha fallado. Comprueba tu conexión e inténtalo de nuevo.",
+  "board.add": "Añadir algo",
+  "board.add.due": "Vencimiento",
+  "board.add.label": "Etiqueta",
+  "board.add.start": "Inicio",
   "board.addCard": "+ Tarea",
   "board.addCardIn": "Añadir una tarea a {column}",
   "board.addLabel": "Añadir etiqueta",
   "board.addLink": "Vínculo",
+  "board.backTo": "Volver a {board}",
   "board.cardLabel": "Abrir {title}, en {column}. Alt y una flecha la mueve.",
+  "board.clearAssignee": "Quitar la responsabilidad de {name}",
+  "board.clearDependsOn": "dejar de esperarlo",
+  "board.clearDue": "quitar",
+  "board.clearStart": "quitar",
   "board.column.archive": "Archivo",
   "board.column.assignee": "Asignada a",
   "board.column.default.backlog": "Backlog",
@@ -45,10 +54,12 @@
   "board.column.dependsOn": "Espera a",
   "board.column.due": "Vence",
   "board.column.labels": "Etiquetas",
+  "board.column.start": "Inicio",
   "board.column.status": "Columna",
   "board.column.title": "Título",
-  "board.columnEmpty": "Aquí todavía no hay nada.",
   "board.createFailed": "No se pudo crear la tarea.",
+  "board.crumbs": "Dónde está esta tarjeta",
+  "board.crumbsFolded": "Mostrar los niveles intermedios",
   "board.drag.lifted": "{card} recogida",
   "board.drag.moved": "{card} movida a {column}",
   "board.drag.putBack": "{card} devuelta",
@@ -65,9 +76,9 @@
   "board.link.outside": "Fuera de este tablero",
   "board.link.subtask": "Subtarea",
   "board.links": "Vinculado",
-  "board.moveTo": "Mover a una columna",
+  "board.moveTo": "moverla a otra columna",
   "board.progress": "{done} de {total} hechas",
-  "board.removeLabel": "Quitar la etiqueta {label}",
+  "board.removeLabel": "quitar esta etiqueta",
   "board.settings.addColumn": "+ Columna",
   "board.settings.columnName": "Nombre de la columna {column}",
   "board.settings.description": "Columnas y lo que muestra el tablero.",
@@ -82,6 +93,10 @@
   "board.settings.showArchive": "Mostrar la columna de archivo",
   "board.settings.showArchiveHint": "Está en todos los tableros. Oculta, sus tarjetas desaparecen de todas las vistas.",
   "board.settings.title": "Ajustes del tablero",
+  "board.sort.asc": "{column}, A a Z",
+  "board.sort.desc": "{column}, Z a A",
+  "board.sort.none": "Sin orden",
+  "board.sortBy": "Ordenar",
   "board.stripes.root": "Nivel {level}, tiene subtareas",
   "board.stripes.under": "Nivel {level} · superior en {column}",
   "board.table.collapse": "Ocultar lo que hay bajo {row}",
@@ -213,14 +228,55 @@
   "flows.validate": "Comprobar si se ejecutaría",
   "flows.validateReady": "Este flujo empezaría ahora mismo.",
   "flows.validateWhen": "Comprobado {when}. El acceso a las herramientas se pide cada vez con tu propio token, así que esta respuesta es una instantánea.",
+  "attachment.details.checksum": "Suma de comprobación",
+  "attachment.details.dimensions": "Dimensiones",
+  "attachment.details.format": "Formato",
+  "attachment.details.mimeType": "Tipo MIME",
+  "attachment.details.name": "Nombre",
+  "attachment.details.pages": "Páginas",
+  "attachment.details.private": "Privado",
+  "attachment.details.size": "Tamaño",
+  "attachment.details.sections": "Secciones",
+  "attachment.details.slides": "Diapositivas",
+  "attachment.details.storage": "Almacenamiento",
+  "attachment.details.technical": "Técnico",
+  "attachment.details.title": "Detalles del archivo",
+  "attachment.details.type": "Tipo",
+  "attachment.details.uploaded": "Subido",
+  "attachment.details.uploadedBy": "Subido por",
+  "attachment.details.version": "Versión",
+  "attachment.details.worksheets": "Hojas",
+  "attachment.kind.image": "Imagen",
+  "attachment.kind.pdf": "Documento PDF",
+  "attachment.kind.presentation": "Presentación",
+  "attachment.kind.spreadsheet": "Hoja de cálculo",
+  "attachment.kind.unsupported": "Archivo",
+  "attachment.kind.word": "Documento de Word",
+  "attachment.detailsHide": "Ocultar detalles del archivo",
+  "attachment.detailsShow": "Mostrar detalles del archivo",
+  "attachment.empty": "Todavía no se ha subido ningún archivo.",
+  "attachment.loadFailed": "No se pudo cargar el archivo. Aún puedes exportar el original desde el menú.",
+  "attachment.unsupported": "No se puede previsualizar este tipo de archivo. Aún puedes exportar el original desde el menú.",
+  "attachment.viewer.controls": "Controles del archivo",
+  "attachment.viewer.navigation": "Mostrar navegación de páginas",
+  "attachment.viewer.nextPage": "Página siguiente",
+  "attachment.viewer.nextResult": "Siguiente resultado de búsqueda",
+  "attachment.viewer.previousPage": "Página anterior",
+  "attachment.viewer.previousResult": "Resultado de búsqueda anterior",
+  "attachment.viewer.resetZoom": "Restablecer zoom",
+  "attachment.viewer.rotateLeft": "Girar a la izquierda",
+  "attachment.viewer.rotateRight": "Girar a la derecha",
+  "attachment.viewer.search": "Buscar en el documento",
+  "attachment.viewer.searchNoResults": "Sin resultados",
+  "attachment.viewer.searchPlaceholder": "Buscar en el documento",
+  "attachment.viewer.searchResults": "Resultado {current} de {total}",
+  "attachment.viewer.zoomIn": "Ampliar",
+  "attachment.viewer.zoomOut": "Reducir",
   "nav.primary": "Navegación principal",
   "nav.tools": "Herramientas",
   "node.access": "Acceso",
   "node.accessDetails": "Mostrar detalles de acceso ({count})",
-  "node.attachmentHelp": "El archivo canónico se guarda en privado en Intel. Su proyección legible por la IA se indexa por separado.",
   "node.changed": "Cambiado",
-  "node.download": "Descargar el archivo",
-  "node.downloadFailed": "El adjunto no se ha podido descargar. Comprueba tu acceso e inténtalo de nuevo.",
   "node.email": "Dirección de correo",
   "node.empty": "Todavía no se ha añadido nada.",
   "node.folderEmpty": "En esta carpeta todavía no hay nada. Crea algo con el más de la barra lateral.",

package/src/nodes/nodes.tsx

@@ -1,11 +1,10 @@
-import type { Node } from "@anchrd/intel-contract/node";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
-import { Download, Paperclip } from "lucide-react";
 import { lazy, Suspense } from "react";
 import { treeLevelKey } from "@/app/tree-move/tree-move.tsx";
 import { ViewToggle } from "@/app/view-toggle/view-toggle.tsx";
 import { BoardPanel } from "@/board/board-panel/board-panel.tsx";
+import { BoardTitleRow } from "@/board/board-title-row/board-title-row.tsx";
 import { RefusalNotice } from "@/data/request-refusal/refusal-notice.tsx";
 import { refusalOf } from "@/data/request-refusal/request-refusal.ts";
 import { FolderContents } from "@/folder-contents/folder-contents.tsx";
@@ -19,6 +18,9 @@ import { TitleRow, TitleRowFrame } from "@/title-row/title-row.tsx";
 const NodeEditor = lazy(async () => ({
   default: (await import("@/node-editor/node-editor.tsx")).NodeEditor,
 }));
+const AttachmentViewer = lazy(async () => ({
+  default: (await import("@/attachment-viewer/attachment-viewer.tsx")).AttachmentViewer,
+}));
 
 export function Nodes() {
   const { data } = useIntelRouterContext();
@@ -138,13 +140,20 @@ export function Nodes() {
                 the search — where what applies everywhere stands. But a graph view does not apply
                 everywhere, it is a view onto THIS item. It is only drawn where there is a graph: on
                 a document it pointed at nothing. */}
-            <TitleRow
-              title={selected.title}
-              description={selected.description}
-              target={{ type: "node", node: selected }}
-            >
-              {graphable && <ViewToggle />}
-            </TitleRow>
+            {/* ⚠️ A board brings its OWN title row, because an open card changes what the line
+                identifies: not the board any more, but where the card sits on it. It is the same
+                `TitleRow` underneath, only with a path in place of the name (#692). */}
+            {selected.kind === "board" ? (
+              <BoardTitleRow node={selected} />
+            ) : (
+              <TitleRow
+                title={selected.title}
+                description={selected.description}
+                target={{ type: "node", node: selected }}
+              >
+                {graphable && <ViewToggle />}
+              </TitleRow>
+            )}
             {graphable && selection.graph ? (
               <GraphPane
                 query={relations}
@@ -158,7 +167,13 @@ export function Nodes() {
             ) : selected.kind === "folder" ? (
               <FolderContents folderId={selected.id} />
             ) : selected.kind === "attachment" ? (
-              <AttachmentPanel node={selected} />
+              <Suspense
+                fallback={
+                  <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+                }
+              >
+                <AttachmentViewer document={document.data} />
+              </Suspense>
             ) : selected.kind === "table" ? (
               <NodeTablePanel node={selected} />
             ) : selected.kind === "board" ? (
@@ -186,44 +201,3 @@ export function Nodes() {
     </TitleRowFrame>
   );
 }
-
-function AttachmentPanel({ node }: { node: Node }) {
-  const { data } = useIntelRouterContext();
-  const i18n = useI18n();
-  const download = useMutation({
-    mutationFn: () => data.getNodeAttachment(node.id),
-    onSuccess: (blob) => {
-      const url = URL.createObjectURL(blob);
-      const anchor = document.createElement("a");
-      anchor.href = url;
-      anchor.download = node.title;
-      document.body.append(anchor);
-      anchor.click();
-      anchor.remove();
-      setTimeout(() => URL.revokeObjectURL(url), 0);
-    },
-  });
-  return (
-    <div className="grid flex-1 place-items-center p-8">
-      <div className="max-w-md rounded-xl border bg-background p-8 text-center shadow-sm">
-        <Paperclip aria-hidden="true" className="mx-auto size-10 text-primary" />
-        <h3 className="mt-4 font-semibold">{node.title}</h3>
-        <p className="mt-2 text-sm text-muted-foreground">{i18n.t("node.attachmentHelp")}</p>
-        <button
-          type="button"
-          onClick={() => download.mutate()}
-          disabled={download.isPending}
-          className="mt-5 inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
-        >
-          <Download aria-hidden="true" className="size-4" />
-          {download.isPending ? i18n.t("common.loading") : i18n.t("node.download")}
-        </button>
-        {download.isError ? (
-          <p role="alert" className="mt-4 text-sm text-destructive">
-            {i18n.t("node.downloadFailed")}
-          </p>
-        ) : null}
-      </div>
-    </div>
-  );
-}

package/src/resource-menu/resource-menu.tsx

@@ -239,19 +239,25 @@ export function ResourceMenu({
     },
   });
 
-  // The export as the user takes it home (#136): the streamed zip as a saved file, named after the
-  // thing itself. The same object-URL dance the attachment download does, because it is the same
-  // gesture — the data provider streams, the browser saves.
-  const exportBundle = useMutation({
-    mutationFn: async () =>
-      target.type === "flow"
-        ? await data.exportFlowBundle(target.flow.id)
-        : await data.exportNodeBundle(target.node.id),
-    onSuccess: (blob) => {
+  // An attachment already is one original file. Every structured Intel resource needs the bundle
+  // that carries its type and relationships, but wrapping uploaded bytes in a zip would make the
+  // one Export entry give a person something other than what they put in (#699).
+  const exportResource = useMutation({
+    mutationFn: async () => {
+      if (node?.kind === "attachment") {
+        return { blob: await data.getNodeAttachment(node.id), filename: title };
+      }
+      const blob =
+        target.type === "flow"
+          ? await data.exportFlowBundle(target.flow.id)
+          : await data.exportNodeBundle(target.node.id);
+      return { blob, filename: `${title}.zip` };
+    },
+    onSuccess: ({ blob, filename }) => {
       const url = URL.createObjectURL(blob);
       const anchor = document.createElement("a");
       anchor.href = url;
-      anchor.download = `${title}.zip`;
+      anchor.download = filename;
       document.body.append(anchor);
       anchor.click();
       anchor.remove();
@@ -326,7 +332,7 @@ export function ResourceMenu({
               `excluded` in the zip's `manifest.json` and `BundleImportResult.excluded` after an
               import, both of which are read only once the zip exists. That is a deliberate trade,
               recorded in ADR-0006 and in #636, and NOT a leftover to be restored. */}
-          <DropdownMenuItem onSelect={() => exportBundle.mutate()}>
+          <DropdownMenuItem onSelect={() => exportResource.mutate()}>
             <FolderDown aria-hidden="true" />
             {i18n.t("resource.export")}
           </DropdownMenuItem>
@@ -392,7 +398,7 @@ export function ResourceMenu({
       ) : null}
       {/* Its own sentence, not `resourceErrorKey`'s: nothing was changed, something failed to
           arrive, and "the change was not saved" would send the reader looking for a change. */}
-      {exportBundle.isError ? <MenuFailure>{i18n.t("resource.exportFailed")}</MenuFailure> : null}
+      {exportResource.isError ? <MenuFailure>{i18n.t("resource.exportFailed")}</MenuFailure> : null}
       {/* The import's own sentence, and its own pickers — only where the entry exists, because two
           file inputs on every document's menu would be two elements nothing can ever open. */}
       {bundleImport.isError ? <MenuFailure>{i18n.t("tree.importFailed")}</MenuFailure> : null}

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/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 },