@adecore/ui 0.50.5 → 0.50.7

package/dist/FileIcon.js

@@ -1,14 +1,14 @@
 import { c as _c } from "react/compiler-runtime";
 import { useInsertionEffect } from 'react';
 import clsx from 'clsx';
-import { fileIconFor, mountFileIconSprite } from './file-icon.js';
+import { fileIconFor, fileIconOverrideFor, mountFileIconSprite } from './file-icon.js';
 /*
  * The one place the library steps outside Lucide. The glyphs are Seti's, and so are their colors: a
  * TypeScript blue is the mark of the file type, not a theme choice. Decorative like every other icon here.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 export function FileIcon(t0) {
-  const $ = _c(12);
+  const $ = _c(20);
   const {
     path,
     size: t1,
@@ -25,50 +25,86 @@ export function FileIcon(t0) {
   }
   useInsertionEffect(mountFileIconSprite, t2);
   let t3;
-  if ($[1] !== className) {
-    t3 = clsx("file-icon", className);
-    $[1] = className;
+  if ($[1] !== path) {
+    t3 = fileIconOverrideFor(path);
+    $[1] = path;
     $[2] = t3;
   } else {
     t3 = $[2];
   }
+  const own = t3;
+  if (own !== null) {
+    let t4;
+    if ($[3] !== className) {
+      t4 = clsx("file-icon", className);
+      $[3] = className;
+      $[4] = t4;
+    } else {
+      t4 = $[4];
+    }
+    let t5;
+    if ($[5] !== own || $[6] !== size || $[7] !== t4) {
+      t5 = /*#__PURE__*/_jsx("img", {
+        src: own,
+        alt: "",
+        width: size,
+        height: size,
+        className: t4
+      });
+      $[5] = own;
+      $[6] = size;
+      $[7] = t4;
+      $[8] = t5;
+    } else {
+      t5 = $[8];
+    }
+    return t5;
+  }
   let t4;
-  if ($[3] !== path) {
-    t4 = fileIconFor(path);
-    $[3] = path;
-    $[4] = t4;
+  if ($[9] !== className) {
+    t4 = clsx("file-icon", className);
+    $[9] = className;
+    $[10] = t4;
   } else {
-    t4 = $[4];
+    t4 = $[10];
   }
-  const t5 = `#${t4}`;
-  let t6;
-  if ($[5] !== t5) {
-    t6 = /*#__PURE__*/_jsx("use", {
-      href: t5
-    });
-    $[5] = t5;
-    $[6] = t6;
+  let t5;
+  if ($[11] !== path) {
+    t5 = fileIconFor(path);
+    $[11] = path;
+    $[12] = t5;
   } else {
-    t6 = $[6];
+    t5 = $[12];
   }
+  const t6 = `#${t5}`;
   let t7;
-  if ($[7] !== ref || $[8] !== size || $[9] !== t3 || $[10] !== t6) {
-    t7 = /*#__PURE__*/_jsx("svg", {
+  if ($[13] !== t6) {
+    t7 = /*#__PURE__*/_jsx("use", {
+      href: t6
+    });
+    $[13] = t6;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] !== ref || $[16] !== size || $[17] !== t4 || $[18] !== t7) {
+    t8 = /*#__PURE__*/_jsx("svg", {
       ref: ref,
-      className: t3,
+      className: t4,
       width: size,
       height: size,
       viewBox: "0 0 16 16",
       "aria-hidden": true,
-      children: t6
+      children: t7
     });
-    $[7] = ref;
-    $[8] = size;
-    $[9] = t3;
-    $[10] = t6;
-    $[11] = t7;
+    $[15] = ref;
+    $[16] = size;
+    $[17] = t4;
+    $[18] = t7;
+    $[19] = t8;
   } else {
-    t7 = $[11];
+    t8 = $[19];
   }
-  return t7;
+  return t8;
 }

package/dist/file-icon.d.ts

@@ -1,4 +1,6 @@
 import { type FileTreeIconConfig } from '@pierre/trees';
 export declare const FILE_TREE_ICONS: FileTreeIconConfig;
 export declare const fileIconFor: (path: string) => string;
+export declare function setFileIconOverride(next: ((path: string) => string | null) | null): void;
+export declare function fileIconOverrideFor(path: string): string | null;
 export declare const mountFileIconSprite: () => void;

package/dist/file-icon.js

@@ -24,6 +24,14 @@ const resolveIcon = (...args) => {
  * generic file icon: the tree marks a folder with its chevron, not a glyph.
  */
 export const fileIconFor = path => resolveIcon('file-tree-icon-file', path).name;
+let override = null;
+/* What an app knows better about a file's icon: the address of an svg, or null for the icon this set has. */
+export function setFileIconOverride(next) {
+  override = next;
+}
+export function fileIconOverrideFor(path) {
+  return override?.(path) ?? null;
+}
 /* The tree carries the sprite into its own shadow root, out of reach of anything that draws an
    icon next to it, so the document gets a copy of the same sheet to point `<use>` at. */
 export const mountFileIconSprite = () => {

package/dist/index.d.ts

@@ -73,7 +73,7 @@ export { ZoomControls, type ZoomControlsProps, type ZoomLabels, type ZoomSelecti
 export { copyText, readClipboardText } from './clipboard.ts';
 export { messageOf } from './error-message.ts';
 export type { ResetKeys } from './error-boundary.ts';
-export { FILE_TREE_ICONS } from './file-icon.ts';
+export { FILE_TREE_ICONS, setFileIconOverride } from './file-icon.ts';
 export { cameThroughPortal, isInFloatingLayer } from './floating.ts';
 export { LoadedComponent, lazyDialog, lazyNamed, onLazyOpenError } from './lazy.tsx';
 export type { LazyComponent } from './lazy.tsx';

package/dist/index.js

@@ -69,7 +69,7 @@ export { Wipe } from "./Wipe.js";
 export { ZoomControls } from "./ZoomControls.js";
 export { copyText, readClipboardText } from './clipboard.js';
 export { messageOf } from './error-message.js';
-export { FILE_TREE_ICONS } from './file-icon.js';
+export { FILE_TREE_ICONS, setFileIconOverride } from './file-icon.js';
 export { cameThroughPortal, isInFloatingLayer } from './floating.js';
 export { LoadedComponent, lazyDialog, lazyNamed, onLazyOpenError } from "./lazy.js";
 export { LazyBoundary } from "./LazyBoundary.js";

package/dist/theme.css

@@ -825,6 +825,8 @@
        own edge and shadow; those two sit a step darker, in the well behind it. */
     .ade-workspace {
         --workspace-well: color-mix(in srgb, var(--surface) 70%, var(--surface-sunken));
+        /* What shows beyond the sheet's rounded corners. */
+        --workspace-ground: var(--workspace-well);
         display: flex;
         width: 100%;
         height: 100%;
@@ -841,18 +843,39 @@
         flex: 1;
         min-width: 0;
         min-height: 0;
-        overflow: hidden;
+        /* No rounded clip: Chromium leaves tiles of a scaled canvas inside one unpainted while it zooms. The
+           corners are drawn over the content instead. */
         border-radius: 0 12px 12px 0;
         /* The surface its regions draw, so no lighter ground shows where the rounded edge cuts them. Roomy shows its gaps in it. */
         background: var(--surface);
         box-shadow: 0 0 0 1px var(--border), var(--sheet-shadow);
     }
+    .ade-workspace-sheet::before, .ade-workspace-sheet::after {
+        content: "";
+        position: absolute;
+        right: 0;
+        z-index: 1;
+        width: 12px;
+        height: 12px;
+        pointer-events: none;
+    }
+    /* The arc, its hairline just outside it, and the ground beyond, as the box shadow draws them along the straight edges. */
+    .ade-workspace-sheet::before {
+        top: 0;
+        background: radial-gradient(circle at 0 100%, transparent 11px, var(--border) 12px, var(--workspace-ground) 13px);
+    }
+    .ade-workspace-sheet::after {
+        bottom: 0;
+        background: radial-gradient(circle at 0 0, transparent 11px, var(--border) 12px, var(--workspace-ground) 13px);
+    }
     .ade-workspace-center {
         display: flex;
         flex: 1;
         min-width: 0;
         min-height: 0;
         flex-direction: column;
+        /* Keeps what the content stacks under the sheet's corners. */
+        isolation: isolate;
     }
     .ade-workspace-sidebar, .ade-workspace-side-panel {
         flex: none;
@@ -885,6 +908,8 @@
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet { box-shadow: 0 0 0 1px var(--border); }
     /* Roomy's panes round their own corners, so the sheet's corner on the window's bottom stays square. */
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet { border-bottom-right-radius: 0; }
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet::after { display: none; }
+    .ade-workspace[data-layout="roomy"] { --workspace-ground: var(--separator); }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet > .ade-workspace-center { gap: 8px; }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet > .ade-workspace-sidebar:not([data-auto]) { margin-right: 8px; }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-side-panel:not([data-auto]) { margin-left: 8px; }
@@ -1039,6 +1064,9 @@
         outline-offset: -2px;
         white-space: nowrap;
     }
+    /* Only the label gives way; an icon, a detail or a mark keeps its size. */
+    .ade-document-tab-open > * { flex-shrink: 0; }
+    .ade-document-tab-open > .ade-document-tab-label { flex-shrink: 1; min-width: 0; }
     .ade-document-tab-close { opacity: 0; }
     .ade-document-tab:is(:hover, :focus-within, [data-active]) .ade-document-tab-close { opacity: 1; }
     .ade-document-tab[data-detail] .ade-document-tab-open { max-width: 200px; }

package/dist/workspace/PaneBar.js

@@ -249,7 +249,7 @@ export function PaneBar(t0) {
   }
   const t13 = tabs ? "min-w-24 self-stretch" : "min-w-5";
   const t14 = inContainer ? tabs ? "-ml-1" : "pl-2" : !tabs && "pl-1";
-  const t15 = tabs || (folded || !hasActions) && !inContainer ? "grow" : "shrink-100";
+  const t15 = !inContainer && (tabs || folded || !hasActions) ? "grow" : "shrink-100";
   let t16;
   if ($[38] !== t13 || $[39] !== t14 || $[40] !== t15) {
     t16 = clsx("ade-pane-title flex items-center gap-2", t13, t14, t15);
@@ -276,7 +276,7 @@ export function PaneBar(t0) {
   const t18 = !separate && actionsPart;
   let t19;
   if ($[45] !== folded || $[46] !== hasActions || $[47] !== inContainer || $[48] !== tabs) {
-    t19 = inContainer && !tabs && (folded || !hasActions) && /*#__PURE__*/_jsx("span", {
+    t19 = inContainer && (tabs || folded || !hasActions) && /*#__PURE__*/_jsx("span", {
       "aria-hidden": "true",
       className: "grow self-stretch"
     });

package/dist/workspace/TabStrip.js

@@ -728,7 +728,7 @@ export function DocumentTab(t0) {
   let t19;
   if ($[57] !== item.label) {
     t19 = /*#__PURE__*/_jsx("span", {
-      className: "truncate",
+      className: "ade-document-tab-label truncate",
       children: item.label
     });
     $[57] = item.label;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.50.5",
+  "version": "0.50.7",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/FileIcon.tsx

@@ -1,6 +1,6 @@
 import { useInsertionEffect, type Ref } from 'react';
 import clsx from 'clsx';
-import { fileIconFor, mountFileIconSprite } from './file-icon.ts';
+import { fileIconFor, fileIconOverrideFor, mountFileIconSprite } from './file-icon.ts';
 
 export interface FileIconProps {
     /* Absolute or relative; only the last segment decides which icon this is. */
@@ -19,6 +19,12 @@ export function FileIcon({ path, size = 16, className, ref }: FileIconProps) {
     // Before the browser paints, so a `<use>` never points at a symbol that is not in the document yet.
     useInsertionEffect(mountFileIconSprite, []);
 
+    const own = fileIconOverrideFor(path);
+
+    if (own !== null) {
+        return <img src={own} alt="" width={size} height={size} className={clsx('file-icon', className)} />;
+    }
+
     return (
         <svg ref={ref} className={clsx('file-icon', className)} width={size} height={size} viewBox="0 0 16 16" aria-hidden>
             <use href={`#${fileIconFor(path)}`} />

package/src/file-icon.ts

@@ -29,6 +29,17 @@ const resolveIcon: ReturnType<typeof createFileTreeIconResolver>['resolveIcon']
  */
 export const fileIconFor = (path: string): string => resolveIcon('file-tree-icon-file', path).name;
 
+let override: ((path: string) => string | null) | null = null;
+
+/* What an app knows better about a file's icon: the address of an svg, or null for the icon this set has. */
+export function setFileIconOverride(next: ((path: string) => string | null) | null): void {
+    override = next;
+}
+
+export function fileIconOverrideFor(path: string): string | null {
+    return override?.(path) ?? null;
+}
+
 /* The tree carries the sprite into its own shadow root, out of reach of anything that draws an
    icon next to it, so the document gets a copy of the same sheet to point `<use>` at. */
 export const mountFileIconSprite = (): void => {

package/src/index.ts

@@ -92,7 +92,7 @@ export { ZoomControls, type ZoomControlsProps, type ZoomLabels, type ZoomSelecti
 export { copyText, readClipboardText } from './clipboard.ts';
 export { messageOf } from './error-message.ts';
 export type { ResetKeys } from './error-boundary.ts';
-export { FILE_TREE_ICONS } from './file-icon.ts';
+export { FILE_TREE_ICONS, setFileIconOverride } from './file-icon.ts';
 export { cameThroughPortal, isInFloatingLayer } from './floating.ts';
 export { LoadedComponent, lazyDialog, lazyNamed, onLazyOpenError } from './lazy.tsx';
 export type { LazyComponent } from './lazy.tsx';

package/src/theme.css

@@ -825,6 +825,8 @@
        own edge and shadow; those two sit a step darker, in the well behind it. */
     .ade-workspace {
         --workspace-well: color-mix(in srgb, var(--surface) 70%, var(--surface-sunken));
+        /* What shows beyond the sheet's rounded corners. */
+        --workspace-ground: var(--workspace-well);
         display: flex;
         width: 100%;
         height: 100%;
@@ -841,18 +843,39 @@
         flex: 1;
         min-width: 0;
         min-height: 0;
-        overflow: hidden;
+        /* No rounded clip: Chromium leaves tiles of a scaled canvas inside one unpainted while it zooms. The
+           corners are drawn over the content instead. */
         border-radius: 0 12px 12px 0;
         /* The surface its regions draw, so no lighter ground shows where the rounded edge cuts them. Roomy shows its gaps in it. */
         background: var(--surface);
         box-shadow: 0 0 0 1px var(--border), var(--sheet-shadow);
     }
+    .ade-workspace-sheet::before, .ade-workspace-sheet::after {
+        content: "";
+        position: absolute;
+        right: 0;
+        z-index: 1;
+        width: 12px;
+        height: 12px;
+        pointer-events: none;
+    }
+    /* The arc, its hairline just outside it, and the ground beyond, as the box shadow draws them along the straight edges. */
+    .ade-workspace-sheet::before {
+        top: 0;
+        background: radial-gradient(circle at 0 100%, transparent 11px, var(--border) 12px, var(--workspace-ground) 13px);
+    }
+    .ade-workspace-sheet::after {
+        bottom: 0;
+        background: radial-gradient(circle at 0 0, transparent 11px, var(--border) 12px, var(--workspace-ground) 13px);
+    }
     .ade-workspace-center {
         display: flex;
         flex: 1;
         min-width: 0;
         min-height: 0;
         flex-direction: column;
+        /* Keeps what the content stacks under the sheet's corners. */
+        isolation: isolate;
     }
     .ade-workspace-sidebar, .ade-workspace-side-panel {
         flex: none;
@@ -885,6 +908,8 @@
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet { box-shadow: 0 0 0 1px var(--border); }
     /* Roomy's panes round their own corners, so the sheet's corner on the window's bottom stays square. */
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet { border-bottom-right-radius: 0; }
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet::after { display: none; }
+    .ade-workspace[data-layout="roomy"] { --workspace-ground: var(--separator); }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet > .ade-workspace-center { gap: 8px; }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet > .ade-workspace-sidebar:not([data-auto]) { margin-right: 8px; }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-side-panel:not([data-auto]) { margin-left: 8px; }
@@ -1039,6 +1064,9 @@
         outline-offset: -2px;
         white-space: nowrap;
     }
+    /* Only the label gives way; an icon, a detail or a mark keeps its size. */
+    .ade-document-tab-open > * { flex-shrink: 0; }
+    .ade-document-tab-open > .ade-document-tab-label { flex-shrink: 1; min-width: 0; }
     .ade-document-tab-close { opacity: 0; }
     .ade-document-tab:is(:hover, :focus-within, [data-active]) .ade-document-tab-close { opacity: 1; }
     .ade-document-tab[data-detail] .ade-document-tab-open { max-width: 200px; }

package/src/workspace/PaneBar.tsx

@@ -221,7 +221,7 @@ export function PaneBar({
                        stands before it: 16 pixels, of which the gap brings 8 and a tab 12 of its own. */
                     inContainer ? (tabs ? '-ml-1' : 'pl-2') : !tabs && 'pl-1',
                     // A weight rather than `shrink`, since controls whose labels truncate shrink as well.
-                    tabs || ((folded || !hasActions) && !inContainer) ? 'grow' : 'shrink-100'
+                    !inContainer && (tabs || folded || !hasActions) ? 'grow' : 'shrink-100'
                 )}
             >
                 {title}
@@ -229,7 +229,7 @@ export function PaneBar({
             {accessory}
             {!separate && actionsPart}
             {/* The room the title leaves in a container, which the window drags by. */}
-            {inContainer && !tabs && (folded || !hasActions) && <span aria-hidden="true" className="grow self-stretch" />}
+            {inContainer && (tabs || folded || !hasActions) && <span aria-hidden="true" className="grow self-stretch" />}
             {trailing}
             {onClose && (
                 <CloseButton label={closeLabel ?? t('workspace.closePane')} kbd={closeShortcut} size="sm" className="cursor-default" onClick={onClose} />

package/src/workspace/TabStrip.tsx

@@ -382,7 +382,7 @@ export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDra
                             }}
                         >
                             {item.icon}
-                            <span className="truncate">{item.label}</span>
+                            <span className="ade-document-tab-label truncate">{item.label}</span>
                             {item.detail}
                             {item.attention}
                             {item.unsaved && (