@anchrd/intel-ui 0.42.0 → 0.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {

package/src/attachment-viewer/attachment-viewer.tsx

@@ -105,8 +105,6 @@ export function AttachmentViewer({ document }: { document: NodeDocument }) {
   const kind = document.version
     ? attachmentPreviewKind(document.node.title, document.version.mediaType)
     : "unsupported";
-  const hasViewerControls = kind !== "image" && kind !== "unsupported";
-
   return (
     <div className="flex min-h-0 flex-1 flex-col px-6 pb-6">
       <ActionSlot name="title-actions">
@@ -115,12 +113,21 @@ export function AttachmentViewer({ document }: { document: NodeDocument }) {
           aria-label={i18n.t(detailsOpen ? "attachment.detailsHide" : "attachment.detailsShow")}
           aria-expanded={detailsOpen}
           onClick={() => setDetailsOpen((current) => !current)}
-          className="inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-muted outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+          className={cn(
+            "inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-transparent outline-none hover:bg-accent focus-visible:bg-accent focus-visible:ring-2 focus-visible:ring-ring",
+            detailsOpen && "bg-accent",
+          )}
         >
           <Info aria-hidden="true" className="size-4" />
         </button>
       </ActionSlot>
-      <div className="relative flex min-h-0 flex-1 overflow-hidden rounded-xl border bg-background">
+      <div
+        data-preview-kind={kind}
+        className={cn(
+          "relative flex min-h-0 flex-1 overflow-hidden rounded-xl",
+          kind === "image" ? "bg-muted/40" : "border bg-background",
+        )}
+      >
         <div className="relative min-h-0 min-w-0 flex-1 bg-muted/40">
           {document.version === null ? (
             <PreviewMessage message={i18n.t("attachment.empty")} />
@@ -147,17 +154,10 @@ export function AttachmentViewer({ document }: { document: NodeDocument }) {
           <AttachmentDetails
             document={document}
             file={file}
-            footerInset={hasViewerControls}
             kind={kind}
             close={() => setDetailsOpen(false)}
           />
         ) : null}
-        {detailsOpen && hasViewerControls ? (
-          <div
-            aria-hidden="true"
-            className="pointer-events-none absolute inset-x-0 bottom-14 z-10 hidden border-t md:block"
-          />
-        ) : null}
       </div>
     </div>
   );
@@ -212,13 +212,11 @@ function ImagePreview({ file, title }: { file: File; title: string }) {
 function AttachmentDetails({
   document,
   file,
-  footerInset,
   kind,
   close,
 }: {
   document: NodeDocument;
   file: File | null;
-  footerInset: boolean;
   kind: AttachmentPreviewKind;
   close(): void;
 }) {
@@ -257,11 +255,7 @@ function AttachmentDetails({
   return (
     <aside
       aria-label={i18n.t("attachment.details.title")}
-      className={cn(
-        "absolute inset-x-0 bottom-0 z-10 max-h-[80%] overflow-auto border-t bg-background shadow-lg md:static md:z-auto md:w-80 md:max-h-none md:shrink-0 md:border-l md:border-t-0 md:shadow-none",
-        // File renderers keep their controls in a shared footer; the panel ends beside that footer.
-        footerInset && "md:mb-14",
-      )}
+      className="absolute inset-x-0 bottom-0 z-10 max-h-[80%] overflow-auto border-t bg-background shadow-lg md:static md:z-auto md:w-80 md:max-h-none md:shrink-0 md:border-l md:border-t-0 md:shadow-none"
     >
       <div className="flex items-center justify-between border-b px-5 py-4">
         <h3 className="font-semibold">{i18n.t("attachment.details.title")}</h3>

package/src/file-preview/file-preview-view.tsx

@@ -35,12 +35,14 @@ const viewerTheme = `
 }
 .pdf-shell,.pdf-wrapper{background:var(--muted)!important;color:var(--foreground)!important}
 .pdf-nav-pane,.pdf-nav-tabs,.pdf-nav-head{background:var(--background)!important;border-color:var(--border)!important}
-.pdf-nav-head{display:none!important}.pdf-nav-tabs{display:flex!important;justify-content:flex-end;padding:6px!important}
-.pdf-nav-tabs button{width:30px;min-width:30px;padding:0;font-size:0;color:var(--muted-foreground)!important}
+@media (min-width:721px){.pdf-shell:not(.pdf-shell--nav-hidden) .pdf-content{grid-template-columns:6rem minmax(0,1fr)!important}}
+.pdf-nav-head{display:none!important}.pdf-nav-tabs{display:flex!important;justify-content:center;padding:6px!important}
+.pdf-nav-tabs:not([data-outline-available="true"]){display:none!important}.pdf-nav-tabs button.active{display:none!important}
+.pdf-nav-tabs button{width:30px;min-width:30px;padding:0;border:0!important;box-shadow:none!important;font-size:0;color:var(--muted-foreground)!important}
 .pdf-nav-tabs button svg{width:15px;height:15px;margin:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-.pdf-nav-tabs button:hover,.pdf-nav-tabs button.active{background:var(--accent)!important;border-color:var(--border)!important;color:var(--accent-foreground)!important}
-.pdf-page-list{gap:4px!important;padding:6px!important}.pdf-page-button{display:flex!important;min-height:36px!important;padding:4px!important;border-color:transparent!important;background:transparent!important;color:var(--foreground)!important}
-.pdf-page-button:hover,.pdf-page-button--active{background:var(--accent)!important;border-color:var(--border)!important;box-shadow:none!important}
+.pdf-nav-tabs button:hover,.pdf-nav-tabs button.active{background:var(--accent)!important;border:0!important;color:var(--accent-foreground)!important}
+.pdf-page-list{gap:4px!important;padding:6px!important}.pdf-page-button{display:flex!important;width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;margin-inline:auto!important;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important;color:var(--foreground)!important;justify-content:center!important}
+.pdf-page-button:hover,.pdf-page-button--active{background:var(--accent)!important;border:0!important;box-shadow:none!important}
 .pdf-page-thumb{width:28px!important;height:28px!important;border:0!important;background:transparent!important;color:var(--foreground)!important}
 .pdf-page-label{display:none!important}.pdf-outline-button{color:var(--foreground)!important}.pdf-outline-button:hover{background:var(--accent)!important;border-color:var(--border)!important}
 `;
@@ -92,35 +94,83 @@ export function FilePreviewView({
     style.dataset.intelViewerTheme = "true";
     style.textContent = viewerTheme;
     root.append(style);
-    const labelPages = () => {
+    const adaptNavigation = () => {
       for (const button of root.querySelectorAll<HTMLButtonElement>(".pdf-page-button")) {
         const label = button.querySelector(".pdf-page-label")?.textContent?.trim();
         if (label) button.title = label;
       }
-      for (const [index, button] of root
-        .querySelectorAll<HTMLButtonElement>(".pdf-nav-tabs button")
-        .entries()) {
-        if (button.querySelector("[data-intel-navigation-icon]")) continue;
-        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        svg.dataset.intelNavigationIcon = "true";
-        svg.setAttribute("viewBox", "0 0 24 24");
-        svg.setAttribute("aria-hidden", "true");
-        const paths =
-          index === 0
-            ? ["M8 6h13M8 12h13M8 18h13", "M3 6h.01M3 12h.01M3 18h.01"]
-            : ["M4 6h7M9 12h11M13 18h7", "M4 6v12h9M9 6v6M13 12v6"];
-        for (const pathData of paths) {
-          const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-          path.setAttribute("d", pathData);
-          svg.append(path);
+      const tabs = root.querySelector<HTMLElement>(".pdf-nav-tabs");
+      const buttons = tabs?.querySelectorAll<HTMLButtonElement>("button");
+      if (tabs && buttons?.length === 2) {
+        tabs.setAttribute("role", "group");
+        for (const [index, button] of buttons.entries()) {
+          button.setAttribute("role", "button");
+          button.removeAttribute("aria-selected");
+          if (!button.querySelector("[data-intel-navigation-icon]")) {
+            const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            svg.dataset.intelNavigationIcon = "true";
+            svg.setAttribute("viewBox", "0 0 24 24");
+            svg.setAttribute("aria-hidden", "true");
+            const paths =
+              index === 0
+                ? ["M8 6h13M8 12h13M8 18h13", "M3 6h.01M3 12h.01M3 18h.01"]
+                : ["M4 6h7M9 12h11M13 18h7", "M4 6v12h9M9 6v6M13 12v6"];
+            for (const pathData of paths) {
+              const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+              path.setAttribute("d", pathData);
+              svg.append(path);
+            }
+            button.prepend(svg);
+          }
+          if (button.dataset.intelNavigationAdapted !== "true") {
+            button.dataset.intelNavigationAdapted = "true";
+            button.addEventListener("click", () => {
+              if (root.activeElement === button) buttons[index === 0 ? 1 : 0]?.focus();
+              for (const tabButton of buttons) tabButton.removeAttribute("aria-selected");
+            });
+          }
         }
-        button.prepend(svg);
       }
     };
-    labelPages();
-    const observer = new MutationObserver(labelPages);
+    let outlineObserver: MutationObserver;
+    let outlineTarget: HTMLElement | null = null;
+    const probeOutline = () => {
+      const tabs = root.querySelector<HTMLElement>(".pdf-nav-tabs");
+      const [pagesTab, outlineTab] = tabs?.querySelectorAll<HTMLButtonElement>("button") ?? [];
+      const navPane = root.querySelector<HTMLElement>(".pdf-nav-pane");
+      const navList = root.querySelector<HTMLElement>(".pdf-page-list,.pdf-outline-list");
+      if (!tabs || !pagesTab || !outlineTab || !navPane || !navList) return;
+
+      outlineObserver.disconnect();
+      const startedInOutline = outlineTab.classList.contains("active");
+      if (!startedInOutline) {
+        navPane.style.visibility = "hidden";
+        outlineTab.click();
+      }
+      tabs.dataset.outlineAvailable = String(root.querySelector(".pdf-outline-button") !== null);
+      if (!startedInOutline) pagesTab.click();
+      navPane.style.removeProperty("visibility");
+      adaptNavigation();
+      outlineTarget = navList;
+      outlineObserver.observe(navList, { childList: true });
+    };
+    adaptNavigation();
+    const observer = new MutationObserver(() => {
+      adaptNavigation();
+      if (!outlineTarget || !root.contains(outlineTarget)) probeOutline();
+    });
     observer.observe(root, { childList: true, subtree: true });
-    return () => observer.disconnect();
+    outlineObserver = new MutationObserver(() => {
+      const tabs = root.querySelector<HTMLElement>(".pdf-nav-tabs");
+      if (tabs?.dataset.outlineAvailable !== "true") probeOutline();
+    });
+    // The pinned renderer exposes no outline count. Probe synchronously between paints, then let
+    // direct navigation-list mutations trigger another probe whenever a late outline read lands.
+    probeOutline();
+    return () => {
+      observer.disconnect();
+      outlineObserver.disconnect();
+    };
   }, [state?.ready]);
 
   useEffect(() => {
@@ -152,7 +202,7 @@ export function FilePreviewView({
           </button>
         </ActionSlot>
       ) : null}
-      <div className="absolute inset-x-0 top-0 bottom-14 min-h-0">
+      <div className="absolute inset-0 min-h-0">
         <FileViewer
           ref={viewer}
           file={file}
@@ -165,7 +215,11 @@ export function FilePreviewView({
         <div
           role="toolbar"
           aria-label={i18n.t("attachment.viewer.controls")}
-          className="absolute inset-x-3 bottom-2 z-[5] mx-auto flex min-h-10 w-fit max-w-[calc(100%-1.5rem)] items-center gap-1 rounded-full border bg-background/95 p-1 shadow-lg backdrop-blur"
+          className={`absolute right-3 bottom-2 left-3 z-[5] mx-auto flex min-h-10 w-fit max-w-[calc(100%-1.5rem)] items-center gap-1 rounded-full border bg-background/80 p-1 shadow-lg backdrop-blur-md ${
+            viewState?.navigation?.visible
+              ? "[@media(max-width:720px)]:hidden min-[721px]:left-[calc(6rem+0.75rem)]"
+              : ""
+          }`}
         >
           <span role="status" aria-live="polite" aria-atomic="true" className="sr-only">
             {search?.query