@vitessce/vit-s 3.9.0 → 3.9.2

package/dist-tsc/DebugWindow.d.ts

@@ -1,4 +1,4 @@
 export function DebugWindow({ debugErrors }: {
     debugErrors: any;
-}): import(".pnpm/@types+react@19.1.6/node_modules/@types/react").JSX.Element;
+}): import("react").JSX.Element;
 //# sourceMappingURL=DebugWindow.d.ts.map

package/dist-tsc/DebugWindow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DebugWindow.d.ts","sourceRoot":"","sources":["../src/DebugWindow.js"],"names":[],"mappings":"AAIA;;8EA8BC"}
+{"version":3,"file":"DebugWindow.d.ts","sourceRoot":"","sources":["../src/DebugWindow.js"],"names":[],"mappings":"AAIA;;gCA8BC"}

package/dist-tsc/TitleInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TitleInfo.d.ts","sourceRoot":"","sources":["../src/TitleInfo.js"],"names":[],"mappings":"AAmNA,mDAoEC"}
+{"version":3,"file":"TitleInfo.d.ts","sourceRoot":"","sources":["../src/TitleInfo.js"],"names":[],"mappings":"AAmNA,mDAwEC"}

package/dist-tsc/TitleInfo.js

@@ -102,15 +102,17 @@ export function TitleInfo(props) {
     const { title, info, children, isScroll, isSpatial, removeGridComponent, urls, isReady, options, closeButtonVisible = true, downloadButtonVisible = true, helpText, withPadding = true, errors: errorsProp, } = props;
     const errors = errorsProp?.filter(Boolean);
     const { classes } = useTitleStyles();
+    const hasInfoText = Boolean(info);
     return (
     // d-flex without wrapping div is not always full height; I don't understand the root cause.
-    _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.title, role: "banner", children: [_jsx("div", { className: classes.titleLeft, role: "heading", "aria-level": "1", children: title }), _jsx("div", { className: classes.titleInfo, title: info, role: "note", children: info }), _jsxs("div", { className: classes.titleButtons, role: "toolbar", "aria-label": "Plot options and controls", children: [_jsx(PlotOptions, { options: options }), downloadButtonVisible ? (_jsx(DownloadOptions, { urls: urls })) : null, Array.isArray(errors) && errors.length > 0 ? (_jsx(ErrorInfo, { errors: errors })) : null, helpText ? (_jsx(HelpButton, { helpText: helpText })) : null, closeButtonVisible && removeGridComponent ? (_jsx(ClosePaneButton, { removeGridComponent: removeGridComponent })) : null] })] }), _jsxs("div", { className: clsx(TOOLTIP_ANCESTOR, classes.card, {
+    _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.title, role: "banner", children: [_jsx("div", { className: classes.titleLeft, role: "heading", "aria-level": "1", children: title }), _jsxs("div", { className: classes.titleButtons, role: "toolbar", "aria-label": "Plot options and controls", children: [_jsx(PlotOptions, { options: options }), downloadButtonVisible ? (_jsx(DownloadOptions, { urls: urls })) : null, Array.isArray(errors) && errors.length > 0 ? (_jsx(ErrorInfo, { errors: errors })) : null, helpText ? (_jsx(HelpButton, { helpText: helpText })) : null, closeButtonVisible && removeGridComponent ? (_jsx(ClosePaneButton, { removeGridComponent: removeGridComponent })) : null] })] }), _jsxs("div", { className: clsx(TOOLTIP_ANCESTOR, classes.card, {
                     [classes.scrollCard]: isScroll,
                     [classes.spatialCard]: isSpatial,
                     [classes.noScrollCard]: !isScroll && !isSpatial,
                     [classes.noPaddingCard]: !withPadding,
                     [classes.paddingCard]: withPadding,
-                }), "aria-busy": !isReady, role: "main", children: [!isReady ? _jsx(LoadingIndicator, {}) : null, children] })] })
+                    [classes.cardWithoutInfoText]: !hasInfoText,
+                }), "aria-busy": !isReady, role: "main", children: [!isReady ? _jsx(LoadingIndicator, {}) : null, children] }), hasInfoText ? (_jsx("div", { className: classes.infoText, title: info, role: "note", children: info })) : null] })
     // "pl-2" only matters when the window is very narrow.
     );
 }

package/dist-tsc/VitS.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VitS.d.ts","sourceRoot":"","sources":["../src/VitS.js"],"names":[],"mappings":"AAqCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,4BApCG;IAAsB,MAAM,EAApB,MAAM;IAGkB,SAAS,EAAjC,SAAS,GAAC,MAAM;IACF,MAAM,EAApB,MAAM;IACQ,KAAK,EAAnB,MAAM;IAEU,MAAM;IACN,cAAc;IAEd,cAAc;IAEf,cAAc,EAA7B,OAAO;IAIQ,sBAAsB,EAArC,OAAO;IAGY,GAAG,EAAtB,IAAI,GAAC,MAAM;IAGW,cAAc,EAApC,SAAS,GAAC,IAAI;IAEC,kBAAkB,EAAjC,OAAO;IAEM,SAAS,EAAtB,KAAK;IACQ,SAAS,EAAtB,KAAK;IACQ,cAAc,EAA3B,KAAK;IACQ,iBAAiB,EAA9B,KAAK;IACc,OAAO,EAA1B,IAAI,GAAC,MAAM;IACI,QAAQ,EAAvB,OAAO;IACQ,SAAS,EAAxB,OAAO;IACY,QAAQ,EAA3B,IAAI,GAAC,MAAM;CAErB,eA4PA"}
+{"version":3,"file":"VitS.d.ts","sourceRoot":"","sources":["../src/VitS.js"],"names":[],"mappings":"AAwCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,4BApCG;IAAsB,MAAM,EAApB,MAAM;IAGkB,SAAS,EAAjC,SAAS,GAAC,MAAM;IACF,MAAM,EAApB,MAAM;IACQ,KAAK,EAAnB,MAAM;IAEU,MAAM;IACN,cAAc;IAEd,cAAc;IAEf,cAAc,EAA7B,OAAO;IAIQ,sBAAsB,EAArC,OAAO;IAGY,GAAG,EAAtB,IAAI,GAAC,MAAM;IAGW,cAAc,EAApC,SAAS,GAAC,IAAI;IAEC,kBAAkB,EAAjC,OAAO;IAEM,SAAS,EAAtB,KAAK;IACQ,SAAS,EAAtB,KAAK;IACQ,cAAc,EAA3B,KAAK;IACQ,iBAAiB,EAA9B,KAAK;IACc,OAAO,EAA1B,IAAI,GAAC,MAAM;IACI,QAAQ,EAAvB,OAAO;IACQ,SAAS,EAAxB,OAAO;IACY,QAAQ,EAA3B,IAAI,GAAC,MAAM;CAErB,eAsSA"}

package/dist-tsc/VitS.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect, useMemo, useCallback, useLayoutEffect } from 'react';
 import { ThemeProvider, CacheProvider, createCache, } from '@vitessce/styles';
+// eslint-disable-next-line import/no-unresolved
+import ZipFileStore from '@zarrita/storage/zip';
+import { transformEntriesForZipFileStore } from '@vitessce/zarr-utils';
 import { QueryCache, QueryClient, QueryClientProvider, } from '@tanstack/react-query';
 import { isEqual } from 'lodash-es';
 import { buildConfigSchema, latestConfigSchema } from '@vitessce/schemas';
@@ -54,7 +57,7 @@ import { AsyncFunctionsContext } from './contexts.js';
  * provided by the parent.
  */
 export function VitS(props) {
-    const { config, stores, rowHeight, height, theme, onWarn, onConfigChange, onLoaderChange, validateConfig = true, validateOnConfigChange = false, isBounded = false, uid = null, styleContainer, remountOnUidChange = true, viewTypes: viewTypesProp, fileTypes: fileTypesProp, jointFileTypes: jointFileTypesProp, coordinationTypes: coordinationTypesProp, asyncFunctions: asyncFunctionsProp, warning, pageMode = false, children, debugMode = DEFAULT_DEBUG_MODE, logLevel = DEFAULT_LOG_LEVEL, } = props;
+    const { config, stores: storesProp, rowHeight, height, theme, onWarn, onConfigChange, onLoaderChange, validateConfig = true, validateOnConfigChange = false, isBounded = false, uid = null, styleContainer, remountOnUidChange = true, viewTypes: viewTypesProp, fileTypes: fileTypesProp, jointFileTypes: jointFileTypesProp, coordinationTypes: coordinationTypesProp, asyncFunctions: asyncFunctionsProp, warning, pageMode = false, children, debugMode = DEFAULT_DEBUG_MODE, logLevel = DEFAULT_LOG_LEVEL, } = props;
     // eslint-disable-next-line no-unused-vars
     const [debugErrors, setDebugErrors] = useState([]);
     const viewTypes = useMemo(() => (viewTypesProp || []), [viewTypesProp]);
@@ -81,6 +84,41 @@ export function VitS(props) {
         return JSON.stringify(config);
     }, [config]);
     const pluginSpecificConfigSchema = useMemo(() => buildConfigSchema(fileTypes, jointFileTypes, coordinationTypes, viewTypes), [viewTypes, fileTypes, jointFileTypes, coordinationTypes]);
+    // Pre-create and cache ZipFileStore instances for all zip URLs
+    // This ensures that multiple loaders pointing to the same zip URL
+    // share the same zip store, preserving HTTP2 multiplexing.
+    const mergedStores = useMemo(() => {
+        // Note: this logic could alternatively be located inside createLoaders,
+        // and could initialize all stores (not only zip stores).
+        const result = storesProp ?? {};
+        // Collect unique zip URLs and their requestInit from the config
+        // Maps URL -> requestInit for store creation with authentication headers
+        const urlMap = new Map();
+        if (Array.isArray(config.datasets)) {
+            config.datasets.forEach((dataset) => {
+                dataset.files?.forEach((file) => {
+                    if (file.fileType?.endsWith('.zip') && file.url) {
+                        // Use the first requestInit encountered for each URL.
+                        if (!urlMap.has(file.url)) {
+                            urlMap.set(file.url, file.requestInit);
+                        }
+                    }
+                });
+            });
+        }
+        // Create stores for new zip URLs with their requestInit
+        urlMap.forEach((requestInit, url) => {
+            // Only create a new store if one does not already exist for this URL.
+            if (!result[url]) {
+                result[url] = ZipFileStore.fromUrl(url, {
+                    overrides: requestInit,
+                    transformEntries: transformEntriesForZipFileStore,
+                });
+            }
+        });
+        return result;
+        // TODO: also depend on storesProp here?
+    }, [configKey]);
     // Process the view config and memoize the result:
     // - Validate.
     // - Upgrade, if legacy schema.
@@ -176,7 +214,7 @@ export function VitS(props) {
     // Initialize the view config and loaders in the global state.
     const createViewConfigStoreClosure = useCallback(() => {
         if (success) {
-            const loaders = createLoaders(configOrWarning.datasets, configOrWarning.description, fileTypes, coordinationTypes, stores, queryClient);
+            const loaders = createLoaders(configOrWarning.datasets, configOrWarning.description, fileTypes, coordinationTypes, mergedStores, queryClient);
             return createViewConfigStore(loaders, configOrWarning);
         }
         // No config found, so clear the loaders.
@@ -189,5 +227,5 @@ export function VitS(props) {
     if (debugMode && debugErrors.length > 0) {
         return (_jsx(CacheProvider, { value: muiCache, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(DebugWindow, { debugErrors: debugErrors }) }) }));
     }
-    return success ? (_jsx(CacheProvider, { value: muiCache, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(ViewConfigProvider, { createStore: createViewConfigStoreClosure, children: _jsx(AuxiliaryProvider, { createStore: createAuxiliaryStore, children: _jsxs(AsyncFunctionsContext.Provider, { value: asyncFunctions, children: [_jsx(VitessceGrid, { pageMode: pageMode, success: success, configKey: configKey, viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, config: configOrWarning, rowHeight: rowHeight, height: height, theme: theme, isBounded: isBounded, stores: stores, queryClient: queryClient, children: children }), _jsx(CallbackPublisher, { onWarn: onWarn, onConfigChange: onConfigChange, onLoaderChange: onLoaderChange, validateOnConfigChange: validateOnConfigChange, pluginSpecificConfigSchema: pluginSpecificConfigSchema })] }) }) }, (remountOnUidChange ? configKey : undefined)) }) }) })) : (_jsx(CacheProvider, { value: muiCache, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(Warning, { ...configOrWarning }) }) }));
+    return success ? (_jsx(CacheProvider, { value: muiCache, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(ViewConfigProvider, { createStore: createViewConfigStoreClosure, children: _jsx(AuxiliaryProvider, { createStore: createAuxiliaryStore, children: _jsxs(AsyncFunctionsContext.Provider, { value: asyncFunctions, children: [_jsx(VitessceGrid, { pageMode: pageMode, success: success, configKey: configKey, viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, config: configOrWarning, rowHeight: rowHeight, height: height, theme: theme, isBounded: isBounded, stores: mergedStores, queryClient: queryClient, children: children }), _jsx(CallbackPublisher, { onWarn: onWarn, onConfigChange: onConfigChange, onLoaderChange: onLoaderChange, validateOnConfigChange: validateOnConfigChange, pluginSpecificConfigSchema: pluginSpecificConfigSchema })] }) }) }, (remountOnUidChange ? configKey : undefined)) }) }) })) : (_jsx(CacheProvider, { value: muiCache, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(Warning, { ...configOrWarning }) }) }));
 }

package/dist-tsc/Warning.d.ts

@@ -1,2 +1,2 @@
-export function Warning(props: any): import(".pnpm/@types+react@19.1.6/node_modules/@types/react").JSX.Element;
+export function Warning(props: any): import("react").JSX.Element;
 //# sourceMappingURL=Warning.d.ts.map

package/dist-tsc/Warning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Warning.d.ts","sourceRoot":"","sources":["../src/Warning.js"],"names":[],"mappings":"AAIA,+GAoBC"}
+{"version":3,"file":"Warning.d.ts","sourceRoot":"","sources":["../src/Warning.js"],"names":[],"mappings":"AAIA,iEAoBC"}

package/dist-tsc/shared-mui/container.js

@@ -96,7 +96,7 @@ const gridLayoutStyles = {
     },
     '.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
         bottom: '0',
-        right: '0',
+        right: '10px',
         cursor: 'se-resize',
     },
     '.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {

package/dist-tsc/shared-mui/styles.js

@@ -75,6 +75,7 @@ const lightPalette = {
     gridLayoutBackground: '#FFFFFF',
     paperBackground: '#FFFFFF',
     cardBorder: 'rgba(241, 241, 241, 0.125)',
+    cardInfoBorder: '#ccc',
     tooltipText: 'rgba(0, 0, 0, 0.87)',
 };
 export const muiTheme = {
@@ -100,6 +101,7 @@ export const muiTheme = {
             gridLayoutBackground: '#333333',
             paperBackground: '#2b2b2b',
             cardBorder: 'rgba(0, 0, 0, 0.125)',
+            cardInfoBorder: '#222222',
             tooltipText: '#FFFFFF',
             ...globalColors,
         },
@@ -109,6 +111,7 @@ export const muiTheme = {
     light: createTheme({
         palette: {
             ...lightPalette,
+            cardInfoBorder: '#F1F1F1',
             ...globalColors,
         },
         ...sharedThemeOptions,
@@ -126,6 +129,6 @@ export const muiTheme = {
             ...globalColors,
         },
         ...sharedThemeOptions,
-        cardBorderSize: '2px',
+        cardBorderSize: '1px',
     }),
 };

package/dist-tsc/title-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"title-styles.d.ts","sourceRoot":"","sources":["../src/title-styles.js"],"names":[],"mappings":"AAEA;;cAyB0B,CAAC;;;kBAMR,eACC;gBAEd,WAAK;eACP,WAEJ;EAuCI"}
+{"version":3,"file":"title-styles.d.ts","sourceRoot":"","sources":["../src/title-styles.js"],"names":[],"mappings":"AAEA;;cAyBO,CAAC;;;kBAE+B,eACvC;gBAAyB,WAAU;eAAsB,WACpD;EAyDD"}

package/dist-tsc/title-styles.js

@@ -13,18 +13,23 @@ export const useTitleStyles = makeStyles()(theme => ({
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
     },
-    titleInfo: {
+    infoText: {
+        color: theme.palette.primaryForeground,
         width: '100%',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
-        fontSize: '80% !important',
+        fontSize: '60% !important',
         opacity: '.8',
-        padding: '0 4px',
+        padding: '0',
         justifyContent: 'center',
-        lineHeight: '25px !important',
-        flexShrink: '1',
-        textAlign: 'right !important',
+        textAlign: 'center !important',
+        borderTop: '0px',
+        borderBottom: `1px solid ${theme.palette.cardInfoBorder}`,
+        borderLeft: `1px solid ${theme.palette.cardInfoBorder}`,
+        borderRight: `1px solid ${theme.palette.cardInfoBorder}`,
+        borderBottomLeftRadius: '4px',
+        borderBottomRightRadius: '4px',
     },
     titleButtons: {
         display: 'flex',
@@ -40,15 +45,20 @@ export const useTitleStyles = makeStyles()(theme => ({
         border: `${theme.cardBorderSize} solid ${theme.palette.cardBorder}`,
         flex: '1 1 auto',
         minHeight: '1px',
-        marginTop: '8px',
-        marginBottom: '8px',
+        marginTop: '0',
+        marginBottom: '0',
         position: 'relative',
         display: 'flex',
         flexDirection: 'column',
         minWidth: '0',
         wordWrap: 'break-word',
         backgroundClip: 'border-box',
-        borderRadius: '4px',
+        borderTopLeftRadius: '4px',
+        borderTopRightRadius: '4px',
+    },
+    cardWithoutInfoText: {
+        borderBottomLeftRadius: '4px',
+        borderBottomRightRadius: '4px',
     },
     paddingCard: {
         padding: '12px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "3.9.0",
+  "version": "3.9.2",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -17,6 +17,7 @@
   ],
   "dependencies": {
     "@tanstack/react-query": "^5.80.2",
+    "@zarrita/storage": "0.1.3",
     "clsx": "^1.1.1",
     "d3-array": "^2.4.0",
     "fast-deep-equal": "^3.1.3",
@@ -30,16 +31,17 @@
     "react-error-boundary": "^5.0.0",
     "@placemarkio/flat-drop-files": "^1.0.2",
     "zarrita": "0.5.4",
-    "@vitessce/styles": "3.9.0",
-    "@vitessce/error": "3.9.0",
-    "@vitessce/constants-internal": "3.9.0",
-    "@vitessce/abstract": "3.9.0",
-    "@vitessce/utils": "3.9.0",
-    "@vitessce/schemas": "3.9.0",
-    "@vitessce/sets-utils": "3.9.0",
-    "@vitessce/plugins": "3.9.0",
-    "@vitessce/config": "3.9.0",
-    "@vitessce/globals": "3.9.0"
+    "@vitessce/styles": "3.9.2",
+    "@vitessce/abstract": "3.9.2",
+    "@vitessce/error": "3.9.2",
+    "@vitessce/constants-internal": "3.9.2",
+    "@vitessce/plugins": "3.9.2",
+    "@vitessce/schemas": "3.9.2",
+    "@vitessce/sets-utils": "3.9.2",
+    "@vitessce/zarr-utils": "3.9.2",
+    "@vitessce/config": "3.9.2",
+    "@vitessce/utils": "3.9.2",
+    "@vitessce/globals": "3.9.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -48,7 +50,7 @@
     "react-dom": "18.3.1",
     "vite": "^7.0.0",
     "vitest": "^3.1.4",
-    "@vitessce/types": "3.9.0"
+    "@vitessce/types": "3.9.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"

package/src/TitleInfo.js

@@ -219,6 +219,7 @@ export function TitleInfo(props) {
   const errors = errorsProp?.filter(Boolean);
 
   const { classes } = useTitleStyles();
+  const hasInfoText = Boolean(info);
 
   return (
     // d-flex without wrapping div is not always full height; I don't understand the root cause.
@@ -227,9 +228,6 @@ export function TitleInfo(props) {
         <div className={classes.titleLeft} role="heading" aria-level="1">
           {title}
         </div>
-        <div className={classes.titleInfo} title={info} role="note">
-          {info}
-        </div>
         <div className={classes.titleButtons} role="toolbar" aria-label="Plot options and controls">
           <PlotOptions
             options={options}
@@ -266,6 +264,7 @@ export function TitleInfo(props) {
             [classes.noScrollCard]: !isScroll && !isSpatial,
             [classes.noPaddingCard]: !withPadding,
             [classes.paddingCard]: withPadding,
+            [classes.cardWithoutInfoText]: !hasInfoText,
           },
         )}
         aria-busy={!isReady}
@@ -274,6 +273,11 @@ export function TitleInfo(props) {
         { !isReady ? <LoadingIndicator /> : null }
         {children}
       </div>
+      {hasInfoText ? (
+        <div className={classes.infoText} title={info} role="note">
+          {info}
+        </div>
+      ) : null}
     </>
     // "pl-2" only matters when the window is very narrow.
   );

package/src/VitS.js

@@ -4,6 +4,9 @@ import {
   CacheProvider,
   createCache,
 } from '@vitessce/styles';
+// eslint-disable-next-line import/no-unresolved
+import ZipFileStore from '@zarrita/storage/zip';
+import { transformEntriesForZipFileStore } from '@vitessce/zarr-utils';
 import {
   QueryCache,
   QueryClient,
@@ -77,7 +80,7 @@ import { AsyncFunctionsContext } from './contexts.js';
 export function VitS(props) {
   const {
     config,
-    stores,
+    stores: storesProp,
     rowHeight,
     height,
     theme,
@@ -104,6 +107,7 @@ export function VitS(props) {
 
   // eslint-disable-next-line no-unused-vars
   const [debugErrors, setDebugErrors] = useState([]);
+
   const viewTypes = useMemo(() => (viewTypesProp || []), [viewTypesProp]);
   const fileTypes = useMemo(() => (fileTypesProp || []), [fileTypesProp]);
   const jointFileTypes = useMemo(
@@ -143,6 +147,46 @@ export function VitS(props) {
     viewTypes,
   ), [viewTypes, fileTypes, jointFileTypes, coordinationTypes]);
 
+
+  // Pre-create and cache ZipFileStore instances for all zip URLs
+  // This ensures that multiple loaders pointing to the same zip URL
+  // share the same zip store, preserving HTTP2 multiplexing.
+  const mergedStores = useMemo(() => {
+    // Note: this logic could alternatively be located inside createLoaders,
+    // and could initialize all stores (not only zip stores).
+    const result = storesProp ?? {};
+
+    // Collect unique zip URLs and their requestInit from the config
+    // Maps URL -> requestInit for store creation with authentication headers
+    const urlMap = new Map();
+    if (Array.isArray(config.datasets)) {
+      config.datasets.forEach((dataset) => {
+        dataset.files?.forEach((file) => {
+          if (file.fileType?.endsWith('.zip') && file.url) {
+            // Use the first requestInit encountered for each URL.
+            if (!urlMap.has(file.url)) {
+              urlMap.set(file.url, file.requestInit);
+            }
+          }
+        });
+      });
+    }
+
+    // Create stores for new zip URLs with their requestInit
+    urlMap.forEach((requestInit, url) => {
+      // Only create a new store if one does not already exist for this URL.
+      if (!result[url]) {
+        result[url] = ZipFileStore.fromUrl(url, {
+          overrides: requestInit,
+          transformEntries: transformEntriesForZipFileStore,
+        });
+      }
+    });
+
+    return result;
+    // TODO: also depend on storesProp here?
+  }, [configKey]);
+
   // Process the view config and memoize the result:
   // - Validate.
   // - Upgrade, if legacy schema.
@@ -233,6 +277,7 @@ export function VitS(props) {
     [asyncFunctionsProp, queryClient],
   );
 
+
   const muiCache = useMemo(() => createCache({
     key: uid || 'vit',
     prepend: true,
@@ -256,7 +301,7 @@ export function VitS(props) {
         configOrWarning.description,
         fileTypes,
         coordinationTypes,
-        stores,
+        mergedStores,
         queryClient,
       );
       return createViewConfigStore(loaders, configOrWarning);
@@ -300,7 +345,7 @@ export function VitS(props) {
                   height={height}
                   theme={theme}
                   isBounded={isBounded}
-                  stores={stores}
+                  stores={mergedStores}
                   queryClient={queryClient}
                 >
                   {children}

package/src/shared-mui/container.js

@@ -97,7 +97,7 @@ const gridLayoutStyles = {
   },
   '.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
     bottom: '0',
-    right: '0',
+    right: '10px',
     cursor: 'se-resize',
   },
   '.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {

package/src/shared-mui/styles.js

@@ -78,6 +78,7 @@ const lightPalette = {
   gridLayoutBackground: '#FFFFFF',
   paperBackground: '#FFFFFF',
   cardBorder: 'rgba(241, 241, 241, 0.125)',
+  cardInfoBorder: '#ccc',
   tooltipText: 'rgba(0, 0, 0, 0.87)',
 };
 
@@ -104,6 +105,7 @@ export const muiTheme = {
       gridLayoutBackground: '#333333',
       paperBackground: '#2b2b2b',
       cardBorder: 'rgba(0, 0, 0, 0.125)',
+      cardInfoBorder: '#222222',
       tooltipText: '#FFFFFF',
       ...globalColors,
     },
@@ -113,6 +115,7 @@ export const muiTheme = {
   light: createTheme({
     palette: {
       ...lightPalette,
+      cardInfoBorder: '#F1F1F1',
       ...globalColors,
     },
     ...sharedThemeOptions,
@@ -130,6 +133,6 @@ export const muiTheme = {
       ...globalColors,
     },
     ...sharedThemeOptions,
-    cardBorderSize: '2px',
+    cardBorderSize: '1px',
   }),
 };

package/src/title-styles.js

@@ -14,18 +14,23 @@ export const useTitleStyles = makeStyles()(theme => ({
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
   },
-  titleInfo: {
+  infoText: {
+    color: theme.palette.primaryForeground,
     width: '100%',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
-    fontSize: '80% !important',
+    fontSize: '60% !important',
     opacity: '.8',
-    padding: '0 4px',
+    padding: '0',
     justifyContent: 'center',
-    lineHeight: '25px !important',
-    flexShrink: '1',
-    textAlign: 'right !important',
+    textAlign: 'center !important',
+    borderTop: '0px',
+    borderBottom: `1px solid ${theme.palette.cardInfoBorder}`,
+    borderLeft: `1px solid ${theme.palette.cardInfoBorder}`,
+    borderRight: `1px solid ${theme.palette.cardInfoBorder}`,
+    borderBottomLeftRadius: '4px',
+    borderBottomRightRadius: '4px',
   },
   titleButtons: {
     display: 'flex',
@@ -41,15 +46,20 @@ export const useTitleStyles = makeStyles()(theme => ({
     border: `${theme.cardBorderSize} solid ${theme.palette.cardBorder}`,
     flex: '1 1 auto',
     minHeight: '1px',
-    marginTop: '8px',
-    marginBottom: '8px',
+    marginTop: '0',
+    marginBottom: '0',
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
     minWidth: '0',
     wordWrap: 'break-word',
     backgroundClip: 'border-box',
-    borderRadius: '4px',
+    borderTopLeftRadius: '4px',
+    borderTopRightRadius: '4px',
+  },
+  cardWithoutInfoText: {
+    borderBottomLeftRadius: '4px',
+    borderBottomRightRadius: '4px',
   },
   paddingCard: {
     padding: '12px',