Release v0.1.4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govoplan/files-webui",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "private": true,
   "type": "module",
   "main": "webui/src/index.ts",
@@ -19,7 +19,7 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@govoplan/core-webui": "^0.1.1",
+    "@govoplan/core-webui": "^0.1.4",
     "lucide-react": "^0.555.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

pyproject.toml

@@ -4,14 +4,14 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "govoplan-files"
-version = "0.1.3"
+version = "0.1.4"
 description = "GovOPlaN files module with backend and WebUI integration."
 readme = "README.md"
 requires-python = ">=3.12"
 license = { file = "LICENSE" }
 authors = [{ name = "GovOPlaN" }]
 dependencies = [
-  "govoplan-core>=0.1.3",
+  "govoplan-core>=0.1.4",
 ]
 
 [tool.setuptools.packages.find]

src/govoplan_files/backend/manifest.py

@@ -66,7 +66,7 @@ def _files_router(context: ModuleContext):
 manifest = ModuleManifest(
     id="files",
     name="Files",
-    version="0.1.2",
+    version="0.1.4",
     dependencies=("access",),
     optional_dependencies=(),
     permissions=PERMISSIONS,

src/govoplan_files/backend/router.py

@@ -44,7 +44,7 @@ from govoplan_files.backend.schemas import (
     _conflict_resolutions,
 )
 from govoplan_core.db.models import Group, UserGroupMembership
-from govoplan_files.backend.db.models import FileAsset, FileFolder, FileShare
+from govoplan_files.backend.db.models import CampaignAttachmentUse, FileAsset, FileBlob, FileFolder, FileShare, FileVersion
 from govoplan_core.db.session import get_session
 from govoplan_files.backend.runtime import settings
 from govoplan_files.backend.storage.paths import UnsafeFilePathError, filename_from_path, normalize_logical_path
@@ -195,6 +195,92 @@ def _asset_response(session: Session, asset: FileAsset, *, include_shares: bool
     )
 
 
+def _asset_list_response(session: Session, assets: list[FileAsset], *, include_shares: bool = False) -> list[FileAssetResponse]:
+    if not assets:
+        return []
+
+    asset_ids = [asset.id for asset in assets]
+    version_ids = [asset.current_version_id for asset in assets if asset.current_version_id]
+    if len(version_ids) != len(assets):
+        raise FileStorageError("File has no current version")
+
+    version_blob_rows: list[tuple[FileVersion, FileBlob]] = []
+    for chunk in _chunks(version_ids):
+        version_blob_rows.extend(
+            session.query(FileVersion, FileBlob)
+            .join(FileBlob, FileBlob.id == FileVersion.blob_id)
+            .filter(FileVersion.id.in_(chunk))
+            .all()
+        )
+    versions_by_id = {version.id: version for version, _blob in version_blob_rows}
+    blobs_by_version_id = {version.id: blob for version, blob in version_blob_rows}
+
+    shares_by_asset_id: dict[str, list[FileShareResponse]] = {asset_id: [] for asset_id in asset_ids}
+    if include_shares:
+        for chunk in _chunks(asset_ids):
+            share_rows = (
+                session.query(FileShare)
+                .filter(FileShare.file_asset_id.in_(chunk))
+                .order_by(FileShare.created_at.desc())
+                .all()
+            )
+            for row in share_rows:
+                shares_by_asset_id.setdefault(row.file_asset_id, []).append(
+                    FileShareResponse(
+                        id=row.id,
+                        target_type=row.target_type,
+                        target_id=row.target_id,
+                        permission=row.permission,
+                        created_at=row.created_at.isoformat(),
+                        revoked_at=row.revoked_at.isoformat() if row.revoked_at else None,
+                    )
+                )
+
+    sent_asset_ids: set[str] = set()
+    for chunk in _chunks(asset_ids):
+        sent_rows = (
+            session.query(CampaignAttachmentUse.file_asset_id)
+            .filter(CampaignAttachmentUse.file_asset_id.in_(chunk), CampaignAttachmentUse.use_stage == "sent")
+            .distinct()
+            .all()
+        )
+        sent_asset_ids.update(row[0] for row in sent_rows)
+
+    responses: list[FileAssetResponse] = []
+    for asset in assets:
+        version = versions_by_id.get(asset.current_version_id or "")
+        blob = blobs_by_version_id.get(asset.current_version_id or "")
+        if not version or not blob:
+            raise FileStorageError("File version not found")
+        responses.append(
+            FileAssetResponse(
+                id=asset.id,
+                tenant_id=asset.tenant_id,
+                owner_type=asset.owner_type,
+                owner_id=_owner_id(asset),
+                display_path=asset.display_path,
+                filename=asset.filename,
+                description=asset.description,
+                size_bytes=blob.size_bytes,
+                content_type=blob.content_type,
+                checksum_sha256=blob.checksum_sha256,
+                version_id=version.id,
+                created_at=asset.created_at.isoformat(),
+                updated_at=asset.updated_at.isoformat(),
+                deleted_at=asset.deleted_at.isoformat() if asset.deleted_at else None,
+                audit_relevant=asset.id in sent_asset_ids,
+                metadata=asset.metadata_ or {},
+                shares=shares_by_asset_id.get(asset.id, []),
+            )
+        )
+    return responses
+
+
+def _chunks(values: list[str], size: int = 900):
+    for index in range(0, len(values), size):
+        yield values[index:index + size]
+
+
 def _folder_owner_id(folder: FileFolder) -> str:
     return folder.owner_user_id if folder.owner_type == "user" else folder.owner_group_id  # type: ignore[return-value]
 
@@ -349,7 +435,7 @@ def list_files(
         path_prefix=path_prefix,
         is_admin=_is_admin(principal),
     )
-    return FileListResponse(files=[_asset_response(session, asset, include_shares=True) for asset in assets])
+    return FileListResponse(files=_asset_list_response(session, assets, include_shares=True))
 
 
 @router.post("/upload", response_model=FileUploadResponse)

src/govoplan_files/backend/storage/archives.py

@@ -11,7 +11,7 @@ from sqlalchemy.orm import Session
 from govoplan_files.backend.db.models import FileAsset
 from govoplan_files.backend.storage.common import FileConflictResolution, FileStorageError, UploadedStoredFile
 from govoplan_files.backend.storage.backends import StorageBackendError, get_storage_backend
-from govoplan_files.backend.storage.files import create_file_asset, current_version_and_blob
+from govoplan_files.backend.storage.files import create_file_asset, current_versions_and_blobs
 from govoplan_files.backend.storage.paths import filename_from_path, normalize_folder, normalize_logical_path
 
 
@@ -45,9 +45,11 @@ def _read_zip_member(
 
 def create_zip_file(session: Session, assets: Iterable[FileAsset], output_path: str | Path) -> None:
     backend = get_storage_backend()
+    asset_list = list(assets)
+    version_blobs = current_versions_and_blobs(session, asset_list)
     with zipfile.ZipFile(output_path, mode="w", compression=zipfile.ZIP_DEFLATED) as archive:
-        for asset in assets:
+        for asset in asset_list:
-            _version, blob = current_version_and_blob(session, asset)
+            _version, blob = version_blobs[asset.id]
             info = zipfile.ZipInfo(asset.display_path)
             info.compress_type = zipfile.ZIP_DEFLATED
             with archive.open(info, "w") as member:

src/govoplan_files/backend/storage/campaign_attachments.py

@@ -13,7 +13,9 @@ from typing import Any, Iterator
 from sqlalchemy.orm import Session
 
 from govoplan_files.backend.db.models import FileAsset
-from govoplan_files.backend.storage.files import current_version_and_blob, list_assets_for_user, read_asset_bytes
+from govoplan_files.backend.storage.backends import StorageBackendError, get_storage_backend
+from govoplan_files.backend.storage.common import FileStorageError
+from govoplan_files.backend.storage.files import current_versions_and_blobs, list_assets_for_user
 from govoplan_files.backend.storage.paths import normalize_folder, normalize_logical_path, safe_storage_component
 
 
@@ -172,6 +174,8 @@ def prepare_campaign_snapshot(
         owner_id = _asset_owner_id(asset)
         if owner_id:
             assets_by_owner[(asset.owner_type, owner_id)].append(asset)
+    version_blobs = current_versions_and_blobs(session, shared_assets)
+    backend = get_storage_backend() if include_bytes else None
 
     manifest: dict[str, ManagedAttachmentFile] = {}
     prepared_by_id: dict[str, tuple[str, str]] = {}
@@ -206,11 +210,14 @@ def prepare_campaign_snapshot(
                 continue
             target = _safe_local_target(local_root, relative_path)
             target.parent.mkdir(parents=True, exist_ok=True)
+            version, blob = version_blobs[asset.id]
             if include_bytes:
-                data, version, blob = read_asset_bytes(session, asset)
+                try:
+                    data = backend.get_bytes(blob.storage_key) if backend else b""
+                except StorageBackendError as exc:
+                    raise FileStorageError(str(exc)) from exc
                 target.write_bytes(data)
             else:
-                version, blob = current_version_and_blob(session, asset)
                 target.touch()
             local_key = str(target.resolve())
             manifest[local_key] = ManagedAttachmentFile(

src/govoplan_files/backend/storage/campaign_usage.py

@@ -8,7 +8,7 @@ from sqlalchemy.orm import Session
 
 from govoplan_files.backend.db.models import CampaignAttachmentUse, FileAsset, FileBlob, FileVersion
 from govoplan_files.backend.storage.common import utcnow
-from govoplan_files.backend.storage.files import current_version_and_blob, list_assets_for_user
+from govoplan_files.backend.storage.files import current_versions_and_blobs, list_assets_for_user
 
 if TYPE_CHECKING:
     from govoplan_campaign.backend.db.models import CampaignJob
@@ -204,6 +204,7 @@ def record_campaign_attachment_uses_for_jobs(
             )
 
     assets_by_campaign: dict[tuple[str, str], dict[str, FileAsset]] = {}
+    version_blobs_by_campaign: dict[tuple[str, str], dict[str, tuple[FileVersion, FileBlob]]] = {}
     for job_id, attachments in fallback_attachments_by_job.items():
         job = job_by_id[job_id]
         campaign_key = (job.tenant_id, job.campaign_id)
@@ -221,6 +222,8 @@ def record_campaign_attachment_uses_for_jobs(
                 by_key[asset.display_path.strip("/")] = asset
                 by_key.setdefault(asset.filename, asset)
             assets_by_campaign[campaign_key] = by_key
+            version_blobs_by_campaign[campaign_key] = current_versions_and_blobs(session, assets)
+        version_blobs = version_blobs_by_campaign[campaign_key]
 
         for attachment in attachments:
             matches = attachment.get("matches") if isinstance(attachment.get("matches"), list) else []
@@ -230,7 +233,10 @@ def record_campaign_attachment_uses_for_jobs(
                 asset = next((by_key[key] for key in _candidate_match_keys(raw) if key in by_key), None)
                 if not asset:
                     continue
-                version, blob = current_version_and_blob(session, asset)
+                version_blob = version_blobs.get(asset.id)
+                if not version_blob:
+                    continue
+                version, blob = version_blob
                 _add_use(
                     session,
                     job,

src/govoplan_files/backend/storage/files.py

@@ -265,6 +265,32 @@ def current_version_and_blob(session: Session, asset: FileAsset) -> tuple[FileVe
     return version, blob
 
 
+def current_versions_and_blobs(session: Session, assets: Iterable[FileAsset]) -> dict[str, tuple[FileVersion, FileBlob]]:
+    asset_list = list(assets)
+    if not asset_list:
+        return {}
+    version_ids = [asset.current_version_id for asset in asset_list if asset.current_version_id]
+    if len(version_ids) != len(asset_list):
+        raise FileStorageError("File has no current version")
+
+    rows: list[tuple[FileVersion, FileBlob]] = []
+    for chunk in _chunks(version_ids):
+        rows.extend(
+            session.query(FileVersion, FileBlob)
+            .join(FileBlob, FileBlob.id == FileVersion.blob_id)
+            .filter(FileVersion.id.in_(chunk))
+            .all()
+        )
+    by_version_id = {version.id: (version, blob) for version, blob in rows}
+    result: dict[str, tuple[FileVersion, FileBlob]] = {}
+    for asset in asset_list:
+        version_blob = by_version_id.get(asset.current_version_id or "")
+        if not version_blob:
+            raise FileStorageError("File version not found")
+        result[asset.id] = version_blob
+    return result
+
+
 def read_asset_bytes(session: Session, asset: FileAsset) -> tuple[bytes, FileVersion, FileBlob]:
     version, blob = current_version_and_blob(session, asset)
     backend = get_storage_backend()
@@ -437,6 +463,11 @@ def _asset_owner_id(asset: FileAsset) -> str:
     raise FileStorageError("File has no valid owner")
 
 
+def _chunks(values: list[str], size: int = 900):
+    for index in range(0, len(values), size):
+        yield values[index:index + size]
+
+
 def _active_asset_exists(session: Session, *, tenant_id: str, owner_type: str, owner_id: str, path: str, exclude_asset_id: str | None = None) -> bool:
     return _active_asset_at_path(
         session,

src/govoplan_files/backend/storage/services.py

@@ -33,6 +33,7 @@ from govoplan_files.backend.storage.files import (
     asset_is_audit_relevant,
     create_file_asset,
     current_version_and_blob,
+    current_versions_and_blobs,
     get_asset_for_user,
     list_assets_for_user,
     read_asset_bytes,
@@ -64,6 +65,7 @@ __all__ = [
     "create_folder",
     "create_zip_file",
     "current_version_and_blob",
+    "current_versions_and_blobs",
     "ensure_group_access",
     "ensure_owner_access",
     "extract_zip_upload",

src/govoplan_files/backend/storage/transfers.py

@@ -69,17 +69,13 @@ def transfer_selection(
             if target_folder == folder_path or target_folder.startswith(f"{folder_path}/"):
                 raise FileStorageError("Cannot move a folder into itself or one of its child folders")
 
-    assets_by_id: dict[str, FileAsset] = {}
+    assets_by_id = _selected_assets_for_owner(
-    for file_id in file_ids:
+        session,
-        asset = get_asset_for_user(
+        tenant_id=tenant_id,
-            session,
+        owner_type=source_owner_type,
-            tenant_id=tenant_id,
+        owner_id=source_owner_id,
-            user_id=user_id,
+        file_ids=file_ids,
-            asset_id=file_id,
+    )
-            require_write=operation == "move",
-            is_admin=is_admin,
-        )
-        assets_by_id[asset.id] = asset
 
     folder_asset_targets: dict[str, str] = {}
     folder_target_paths: dict[str, str] = {}
@@ -297,6 +293,33 @@ def _collapse_folder_roots(folder_paths: list[str]) -> list[str]:
     return collapsed
 
 
+def _selected_assets_for_owner(
+    session: Session,
+    *,
+    tenant_id: str,
+    owner_type: str,
+    owner_id: str,
+    file_ids: list[str],
+) -> dict[str, FileAsset]:
+    selected_file_ids = list(dict.fromkeys(file_ids))
+    if not selected_file_ids:
+        return {}
+    assets = {
+        asset.id: asset
+        for asset in _asset_query_for_owner(
+            session,
+            tenant_id=tenant_id,
+            owner_type=owner_type,
+            owner_id=owner_id,
+        )
+        .filter(FileAsset.id.in_(selected_file_ids), FileAsset.deleted_at.is_(None))
+        .all()
+    }
+    if len(assets) != len(selected_file_ids):
+        raise FileStorageError("File not found")
+    return assets
+
+
 def _path_under_root(path: str, root: str) -> bool:
     normalized = normalize_logical_path(path)
     return normalized == root or normalized.startswith(f"{root}/")
@@ -349,13 +372,26 @@ def rename_selection(
     if mode == "direct" and (len(selected_file_ids) + len(selected_folder_roots)) != 1:
         raise FileStorageError("Direct rename requires exactly one selected item")
 
-    assets: dict[str, FileAsset] = {}
-    for file_id in selected_file_ids:
-        asset = get_asset_for_user(session, tenant_id=tenant_id, user_id=user_id, asset_id=file_id, require_write=True, is_admin=is_admin)
-        assets[asset.id] = asset
-
     owner_type_norm = owner_type.lower().strip() if owner_type else None
     owner_id_norm = owner_id
+    assets: dict[str, FileAsset] = {}
+    if selected_file_ids:
+        if owner_type_norm and owner_id_norm:
+            ensure_owner_access(session, tenant_id=tenant_id, owner_type=owner_type_norm, owner_id=owner_id_norm, user_id=user_id, is_admin=is_admin)
+            assets.update(
+                _selected_assets_for_owner(
+                    session,
+                    tenant_id=tenant_id,
+                    owner_type=owner_type_norm,
+                    owner_id=owner_id_norm,
+                    file_ids=selected_file_ids,
+                )
+            )
+        else:
+            for file_id in selected_file_ids:
+                asset = get_asset_for_user(session, tenant_id=tenant_id, user_id=user_id, asset_id=file_id, require_write=True, is_admin=is_admin)
+                assets[asset.id] = asset
+
     folder_rows_by_path: dict[str, FileFolder] = {}
     affected_folder_paths: set[str] = set()
     if selected_folder_roots and owner_type_norm and owner_id_norm:

webui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govoplan/files-webui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
@@ -21,7 +21,7 @@
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.1.1",
     "lucide-react": "^0.555.0",
-    "@govoplan/core-webui": "^0.1.2"
+    "@govoplan/core-webui": "^0.1.4"
   },
   "peerDependenciesMeta": {
     "@govoplan/core-webui": {

webui/src/api/files.ts

@@ -1,4 +1,4 @@
-import { ApiError, apiFetch, apiUrl, authHeaders, csrfToken, type ApiSettings } from "@govoplan/core-webui";
+import { ApiError, apiFetch, apiUrl, authHeaders, csrfToken, type ApiSettings, type FilesManagedFileLinkTarget } from "@govoplan/core-webui";
 
 export type FileSpace = {
   id: string;
@@ -181,13 +181,17 @@ export function bulkDeleteFiles(settings: ApiSettings, fileIds: string[]): Promi
 
 export type FileBulkShareResponse = { shares: FileShare[]; shared_count: number };
 
-export function shareFilesWithCampaign(settings: ApiSettings, fileIds: string[], campaignId: string): Promise<FileBulkShareResponse> {
+export function shareFilesWithTarget(settings: ApiSettings, fileIds: string[], target: FilesManagedFileLinkTarget): Promise<FileBulkShareResponse> {
   return apiFetch<FileBulkShareResponse>(settings, "/api/v1/files/bulk-shares", {
     method: "POST",
-    body: JSON.stringify({ file_ids: fileIds, target_type: "campaign", target_id: campaignId, permission: "read" })
+    body: JSON.stringify({ file_ids: fileIds, target_type: target.type, target_id: target.id, permission: target.permission ?? "read" })
   });
 }
 
+export function shareFilesWithCampaign(settings: ApiSettings, fileIds: string[], campaignId: string): Promise<FileBulkShareResponse> {
+  return shareFilesWithTarget(settings, fileIds, { type: "campaign", id: campaignId, label: "campaign" });
+}
+
 export async function shareFileWithCampaign(settings: ApiSettings, fileId: string, campaignId: string): Promise<FileShare> {
   const response = await shareFilesWithCampaign(settings, [fileId], campaignId);
   const share = response.shares[0];

webui/src/features/files/FilesPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, type DragEvent as ReactDragEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent } from "react";
+import { useEffect, useMemo, useRef, useState, type DragEvent as ReactDragEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent } from "react";
 import { ChevronRight, Copy, Download, File, Folder, Home, Link2, MoveRight, Plus, Search, Trash2, UploadCloud } from "lucide-react";
 import {
   Button,
@@ -78,6 +78,9 @@ import { useFileDragDropState } from "./hooks/useFileDragDropState";
 
 type UploadPhase = "idle" | "uploading" | "unpacking" | "finalizing";
 
+const DEFAULT_FILE_LIST_ROW_HEIGHT = 58;
+const FILE_LIST_OVERSCAN_ROWS = 8;
+
 export default function FilesPage({ settings, auth }: { settings: ApiSettings; auth: AuthInfo }) {
   const canDownload = hasScope(auth, "files:download");
   const canUpload = hasScope(auth, "files:upload");
@@ -141,6 +144,28 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
     const entries = buildExplorerEntries(visibleFiles, folders, currentFolder, searchActive);
     return sortExplorerEntries(entries, sortColumn, sortDirection);
   }, [visibleFiles, folders, currentFolder, searchActive, sortColumn, sortDirection]);
+  const fileListViewportRef = useRef<HTMLDivElement | null>(null);
+  const fileListMeasureRowRef = useRef<HTMLDivElement | null>(null);
+  const [fileListViewportHeight, setFileListViewportHeight] = useState(0);
+  const [fileListScrollTop, setFileListScrollTop] = useState(0);
+  const [fileListRowHeight, setFileListRowHeight] = useState(DEFAULT_FILE_LIST_ROW_HEIGHT);
+  const virtualExplorerRows = useMemo(() => {
+    const rowHeight = Math.max(1, fileListRowHeight);
+    const entryScrollTop = Math.max(0, fileListScrollTop - rowHeight);
+    const viewportHeight = Math.max(fileListViewportHeight, rowHeight * FILE_LIST_OVERSCAN_ROWS);
+    const startIndex = Math.max(0, Math.floor(entryScrollTop / rowHeight) - FILE_LIST_OVERSCAN_ROWS);
+    const endIndex = Math.min(
+      explorerEntries.length,
+      Math.ceil((entryScrollTop + viewportHeight) / rowHeight) + FILE_LIST_OVERSCAN_ROWS
+    );
+
+    return {
+      startIndex,
+      topSpacerHeight: startIndex * rowHeight,
+      bottomSpacerHeight: Math.max(0, (explorerEntries.length - endIndex) * rowHeight),
+      entries: explorerEntries.slice(startIndex, endIndex)
+    };
+  }, [explorerEntries, fileListRowHeight, fileListScrollTop, fileListViewportHeight]);
   const visibleEntryKeys = useMemo(() => explorerEntries.map(entrySelectionKey), [explorerEntries]);
   const {
     selectedFileIds,
@@ -172,6 +197,47 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
   const activeDialogSpace = activeDialogTarget ? spaces.find((space) => space.id === activeDialogTarget.spaceId) ?? null : null;
   const downloadLabel = selectedDownloadFileIds.length > 1 ? "Download ZIP" : "Download";
 
+  useEffect(() => {
+    const viewport = fileListViewportRef.current;
+    if (!viewport) return undefined;
+
+    const updateViewportHeight = () => {
+      setFileListViewportHeight(viewport.clientHeight);
+      setFileListScrollTop(viewport.scrollTop);
+    };
+
+    updateViewportHeight();
+    if (typeof ResizeObserver === "undefined") return undefined;
+
+    const observer = new ResizeObserver(updateViewportHeight);
+    observer.observe(viewport);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const row = fileListMeasureRowRef.current;
+    if (!row) return undefined;
+
+    const updateRowHeight = () => {
+      const measuredHeight = row.getBoundingClientRect().height;
+      if (measuredHeight > 0) setFileListRowHeight(Math.round(measuredHeight));
+    };
+
+    updateRowHeight();
+    if (typeof ResizeObserver === "undefined") return undefined;
+
+    const observer = new ResizeObserver(updateRowHeight);
+    observer.observe(row);
+    return () => observer.disconnect();
+  }, [activeSpaceId, currentFolder]);
+
+  useEffect(() => {
+    const viewport = fileListViewportRef.current;
+    if (!viewport) return;
+    viewport.scrollTop = 0;
+    setFileListScrollTop(0);
+  }, [activeSpaceId, currentFolder, searchActive, searchResults, sortColumn, sortDirection]);
+
   async function loadSpaces() {
     setBusy(true);
     setError("");
@@ -1161,6 +1227,75 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
       : undefined;
   const visibleUploadProgress = uploadPhase === "unpacking" ? null : uploadProgress;
 
+  function renderExplorerEntry(entry: ExplorerEntry, rowIndex: number) {
+    const entryDropTarget = entry.kind === "folder" && activeSpace ? { spaceId: activeSpace.id, folderPath: entry.path } : null;
+    const isDropTarget = entryDropTarget ? dropTargetKey === dropTargetId(entryDropTarget) : false;
+
+    return entry.kind === "folder" ? (
+      <div
+        key={entry.id}
+        className={`file-list-row folder-row ${isEntrySelected(entry) ? "is-selected" : ""} ${isDropTarget ? "is-drop-target" : ""}`}
+        role="row"
+        aria-rowindex={rowIndex}
+        tabIndex={0}
+        draggable
+        onDragStart={(event) => handleInternalDragStart(entry, event)}
+        onDragEnd={() => { setInternalDrag(null); clearDropState(); }}
+        onDragOver={(event) => entryDropTarget && handleDropTargetDragOver(event, entryDropTarget)}
+        onDragLeave={clearDropState}
+        onDrop={(event) => entryDropTarget && void handleDropOnTarget(event, entryDropTarget)}
+        onMouseDown={preventTextSelectionOnShift}
+        onClick={(event) => handleEntrySelection(entry, event)}
+        onDoubleClick={() => { if (!busy && activeSpace) openFolder(activeSpace.id, entry.path); }}
+        onContextMenu={(event) => openContextMenu(event, "folder", entry)}
+        onKeyDown={(event) => handleEntryKeyDown(entry, event)}
+      >
+        <div className="file-list-name-cell">
+          <div className="file-list-name">
+            <Folder className="file-row-icon" size={20} aria-hidden="true" />
+            <span><strong>{entry.name}</strong><small>{folderContentLabel(entry)}</small></span>
+          </div>
+        </div>
+        <span>{formatBytes(entry.totalSize)}</span>
+        <span className="file-row-tail"><span>{formatDate(entry.updatedAt)}</span></span>
+      </div>
+    ) : (
+      <div
+        key={entry.id}
+        className={`file-list-row file-row ${isEntrySelected(entry) ? "is-selected" : ""}`}
+        role="row"
+        aria-rowindex={rowIndex}
+        tabIndex={0}
+        draggable
+        onDragStart={(event) => handleInternalDragStart(entry, event)}
+        onDragEnd={() => { setInternalDrag(null); clearDropState(); }}
+        onMouseDown={preventTextSelectionOnShift}
+        onClick={(event) => handleEntrySelection(entry, event)}
+        onDoubleClick={() => { if (!busy) void downloadFile(settings, entry.file); }}
+        onContextMenu={(event) => openContextMenu(event, "file", entry)}
+        onKeyDown={(event) => handleEntryKeyDown(entry, event)}
+      >
+        <div className="file-list-name-cell">
+          <div className="file-list-name">
+            <File className="file-row-icon" size={20} aria-hidden="true" />
+            <span>
+              <strong>{searchActive ? entry.file.display_path : entry.file.filename}</strong>
+              <small
+                className={`file-linkage-status ${activeCampaignShareCount(entry.file) > 0 ? "is-linked" : ""}`}
+                title={campaignShareTitle(entry.file)}
+              >
+                {activeCampaignShareCount(entry.file) > 0 && <Link2 size={12} aria-hidden="true" />}
+                {campaignShareLabel(entry.file)}
+              </small>
+            </span>
+          </div>
+        </div>
+        <span>{formatBytes(entry.file.size_bytes)}</span>
+        <span className="file-row-tail"><span>{formatDate(entry.file.updated_at)}</span></span>
+      </div>
+    );
+  }
+
   return (
     <div className="workspace-data-page module-entry-page file-manager-page file-manager-fullscreen">
       {error && (
@@ -1258,20 +1393,24 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
 
           <div
             className="file-list-drop-target"
+            ref={fileListViewportRef}
+            onScroll={(event) => setFileListScrollTop(event.currentTarget.scrollTop)}
             onContextMenu={(event) => openContextMenu(event, "empty")}
             onClick={(event) => {
               if (event.target === event.currentTarget) applySelectionKeys(new Set<EntrySelectionKey>());
             }}
           >
-            <div className="file-list-table" role="table" aria-label="Managed files">
+            <div className="file-list-table" role="table" aria-label="Managed files" aria-rowcount={explorerEntries.length + 1}>
               {(() => {
                 const normalizedCurrentFolder = normalizeFolder(currentFolder);
                 const canOpenParent = Boolean(normalizedCurrentFolder && activeSpace);
                 const targetParentFolder = parentFolderPath(normalizedCurrentFolder);
                 return (
                   <div
+                    ref={fileListMeasureRowRef}
                     className={`file-list-row folder-row file-parent-row ${canOpenParent ? "" : "is-disabled"}`}
                     role="row"
+                    aria-rowindex={1}
                     tabIndex={canOpenParent ? 0 : -1}
                     aria-disabled={!canOpenParent}
                     aria-label={canOpenParent ? `Open parent folder ${targetParentFolder || activeSpace?.label || "root"}` : "Already at the root folder"}
@@ -1301,71 +1440,13 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
               {explorerEntries.length === 0 && (
                 <div className="file-list-empty">This folder is empty. Use Upload or Create Folder to add content.</div>
               )}
-              {explorerEntries.map((entry) => {
+              {virtualExplorerRows.topSpacerHeight > 0 && (
-                const entryDropTarget = entry.kind === "folder" && activeSpace ? { spaceId: activeSpace.id, folderPath: entry.path } : null;
+                <div className="file-list-virtual-spacer" style={{ height: virtualExplorerRows.topSpacerHeight }} aria-hidden="true" />
-                const isDropTarget = entryDropTarget ? dropTargetKey === dropTargetId(entryDropTarget) : false;
+              )}
-                return entry.kind === "folder" ? (
+              {virtualExplorerRows.entries.map((entry, index) => renderExplorerEntry(entry, virtualExplorerRows.startIndex + index + 2))}
-                  <div
+              {virtualExplorerRows.bottomSpacerHeight > 0 && (
-                    key={entry.id}
+                <div className="file-list-virtual-spacer" style={{ height: virtualExplorerRows.bottomSpacerHeight }} aria-hidden="true" />
-                    className={`file-list-row folder-row ${isEntrySelected(entry) ? "is-selected" : ""} ${isDropTarget ? "is-drop-target" : ""}`}
+              )}
-                    role="row"
-                    tabIndex={0}
-                    draggable
-                    onDragStart={(event) => handleInternalDragStart(entry, event)}
-                    onDragEnd={() => { setInternalDrag(null); clearDropState(); }}
-                    onDragOver={(event) => entryDropTarget && handleDropTargetDragOver(event, entryDropTarget)}
-                    onDragLeave={clearDropState}
-                    onDrop={(event) => entryDropTarget && void handleDropOnTarget(event, entryDropTarget)}
-                    onMouseDown={preventTextSelectionOnShift}
-                    onClick={(event) => handleEntrySelection(entry, event)}
-                    onDoubleClick={() => { if (!busy && activeSpace) openFolder(activeSpace.id, entry.path); }}
-                    onContextMenu={(event) => openContextMenu(event, "folder", entry)}
-                    onKeyDown={(event) => handleEntryKeyDown(entry, event)}
-                  >
-                    <div className="file-list-name-cell">
-                      <div className="file-list-name">
-                        <Folder className="file-row-icon" size={20} aria-hidden="true" />
-                        <span><strong>{entry.name}</strong><small>{folderContentLabel(entry)}</small></span>
-                      </div>
-                    </div>
-                    <span>{formatBytes(entry.totalSize)}</span>
-                    <span className="file-row-tail"><span>{formatDate(entry.updatedAt)}</span></span>
-                  </div>
-                ) : (
-                  <div
-                    key={entry.id}
-                    className={`file-list-row file-row ${isEntrySelected(entry) ? "is-selected" : ""}`}
-                    role="row"
-                    tabIndex={0}
-                    draggable
-                    onDragStart={(event) => handleInternalDragStart(entry, event)}
-                    onDragEnd={() => { setInternalDrag(null); clearDropState(); }}
-                    onMouseDown={preventTextSelectionOnShift}
-                    onClick={(event) => handleEntrySelection(entry, event)}
-                    onDoubleClick={() => { if (!busy) void downloadFile(settings, entry.file); }}
-                    onContextMenu={(event) => openContextMenu(event, "file", entry)}
-                    onKeyDown={(event) => handleEntryKeyDown(entry, event)}
-                  >
-                    <div className="file-list-name-cell">
-                      <div className="file-list-name">
-                        <File className="file-row-icon" size={20} aria-hidden="true" />
-                        <span>
-                          <strong>{searchActive ? entry.file.display_path : entry.file.filename}</strong>
-                          <small
-                            className={`file-linkage-status ${activeCampaignShareCount(entry.file) > 0 ? "is-linked" : ""}`}
-                            title={campaignShareTitle(entry.file)}
-                          >
-                            {activeCampaignShareCount(entry.file) > 0 && <Link2 size={12} aria-hidden="true" />}
-                            {campaignShareLabel(entry.file)}
-                          </small>
-                        </span>
-                      </div>
-                    </div>
-                    <span>{formatBytes(entry.file.size_bytes)}</span>
-                    <span className="file-row-tail"><span>{formatDate(entry.file.updated_at)}</span></span>
-                  </div>
-                );
-              })}
             </div>
           </div>
         </section>

webui/src/features/files/utils/fileManagerUtils.ts

@@ -2,6 +2,13 @@ import { formatDateTime as formatPlatformDateTime } from "@govoplan/core-webui";
 import type { FileFolder, ManagedFile } from "../../../api/files";
 import type { DragSelectionState, EntrySelectionKey, ExplorerEntry, FileEntry, FolderEntry, FolderNode, SortColumn, SortDirection } from "../types";
 
+type FolderStats = {
+  directFiles: number;
+  childFolders: Set<string>;
+  totalSize: number;
+  updatedAt: string;
+};
+
 export function buildFolderTree(files: ManagedFile[], folders: FileFolder[]): FolderNode[] {
   const byPath = new Map<string, FolderNode>();
   const ensureNode = (path: string, persisted: boolean): FolderNode | null => {
@@ -71,21 +78,23 @@ export function buildExplorerEntries(files: ManagedFile[], folders: FileFolder[]
   const prefix = folder ? `${folder}/` : "";
   const folderMap = new Map<string, FolderEntry>();
   const directFiles: FileEntry[] = [];
+  const folderStats = buildFolderStats(files, folders);
 
   for (const persisted of folders) {
     const path = normalizeFolder(persisted.path);
     if (!path.startsWith(prefix) || path === folder) continue;
     const relative = prefix ? path.slice(prefix.length) : path;
     if (!relative || relative.includes("/")) continue;
+    const stats = folderStats.get(path);
     folderMap.set(path, {
       kind: "folder",
       id: `folder:${path}`,
       name: relative,
       path,
-      fileCount: 0,
+      fileCount: stats?.directFiles ?? 0,
-      folderCount: 0,
+      folderCount: stats?.childFolders.size ?? 0,
-      totalSize: 0,
+      totalSize: stats?.totalSize ?? 0,
-      updatedAt: persisted.updated_at,
+      updatedAt: latestTimestamp(persisted.updated_at, stats?.updatedAt),
       persisted: true
     });
   }
@@ -102,31 +111,22 @@ export function buildExplorerEntries(files: ManagedFile[], folders: FileFolder[]
     }
     const folderName = relativePath.slice(0, slashIndex);
     const folderPath = prefix ? `${folder}/${folderName}` : folderName;
-    const existing = folderMap.get(folderPath);
+    if (!folderMap.has(folderPath)) {
-    if (existing) {
+      const stats = folderStats.get(folderPath);
-      existing.totalSize += file.size_bytes;
-      if (file.updated_at > existing.updatedAt) existing.updatedAt = file.updated_at;
-    } else {
       folderMap.set(folderPath, {
         kind: "folder",
         id: `folder:${folderPath}`,
         name: folderName,
         path: folderPath,
-        fileCount: 0,
+        fileCount: stats?.directFiles ?? 0,
-        folderCount: 0,
+        folderCount: stats?.childFolders.size ?? 0,
-        totalSize: file.size_bytes,
+        totalSize: stats?.totalSize ?? file.size_bytes,
-        updatedAt: file.updated_at,
+        updatedAt: stats?.updatedAt || file.updated_at,
         persisted: false
       });
     }
   }
 
-  for (const entry of folderMap.values()) {
-    const counts = directFolderCounts(files, folders, entry.path);
-    entry.fileCount = counts.files;
-    entry.folderCount = counts.folders;
-  }
-
   return [...Array.from(folderMap.values()), ...directFiles];
 }
 
@@ -164,25 +164,55 @@ export function entryModifiedTime(entry: ExplorerEntry): number {
 }
 
 export function directFolderCounts(files: ManagedFile[], folders: FileFolder[], folderPath: string): { files: number; folders: number } {
-  const normalized = normalizeFolder(folderPath);
+  const stats = buildFolderStats(files, folders).get(normalizeFolder(folderPath));
-  const prefix = normalized ? `${normalized}/` : "";
+  return { files: stats?.directFiles ?? 0, folders: stats?.childFolders.size ?? 0 };
-  const directFiles = files.filter((file) => parentFolderPath(file.display_path) === normalized).length;
+}
-  const childFolders = new Set<string>();
+
+function buildFolderStats(files: ManagedFile[], folders: FileFolder[]): Map<string, FolderStats> {
+  const statsByPath = new Map<string, FolderStats>();
+  const ensureStats = (path: string): FolderStats => {
+    const normalized = normalizeFolder(path);
+    const existing = statsByPath.get(normalized);
+    if (existing) return existing;
+    const stats: FolderStats = { directFiles: 0, childFolders: new Set(), totalSize: 0, updatedAt: "" };
+    statsByPath.set(normalized, stats);
+    return stats;
+  };
+
   for (const folder of folders) {
     const path = normalizeFolder(folder.path);
-    if (!path.startsWith(prefix) || path === normalized) continue;
+    if (!path) continue;
-    const relative = prefix ? path.slice(prefix.length) : path;
+    const parts = path.split("/");
-    if (!relative) continue;
+    const parentPath = normalizeFolder(parts.slice(0, -1).join("/"));
-    childFolders.add(relative.split("/")[0]);
+    const name = parts[parts.length - 1];
+    if (name) ensureStats(parentPath).childFolders.add(name);
+    ensureStats(path);
   }
+
   for (const file of files) {
-    const path = normalizeFilePath(file.display_path);
+    const parts = normalizeFilePath(file.display_path || file.filename).split("/").filter(Boolean);
-    if (!path.startsWith(prefix)) continue;
+    if (parts.length === 0) continue;
-    const relative = prefix ? path.slice(prefix.length) : path;
+    const directParentPath = normalizeFolder(parts.slice(0, -1).join("/"));
-    if (!relative || !relative.includes("/")) continue;
+    ensureStats(directParentPath).directFiles += 1;
-    childFolders.add(relative.split("/")[0]);
+
+    for (let index = 0; index < parts.length - 1; index += 1) {
+      const folderPath = parts.slice(0, index + 1).join("/");
+      const stats = ensureStats(folderPath);
+      stats.totalSize += file.size_bytes;
+      stats.updatedAt = latestTimestamp(stats.updatedAt, file.updated_at);
+
+      const parentPath = normalizeFolder(parts.slice(0, index).join("/"));
+      ensureStats(parentPath).childFolders.add(parts[index]);
+    }
   }
-  return { files: directFiles, folders: childFolders.size };
+
+  return statsByPath;
+}
+
+function latestTimestamp(current: string, candidate?: string): string {
+  if (!candidate) return current;
+  if (!current) return candidate;
+  return candidate > current ? candidate : current;
 }
 
 export function folderContentLabel(entry: FolderEntry): string {
@@ -209,13 +239,14 @@ export function buildFolderEntryFromSources(files: ManagedFile[], folders: FileF
   const sortedDates = childFiles.map((file) => file.updated_at).sort();
   const latestFileDate = sortedDates.length > 0 ? sortedDates[sortedDates.length - 1] : undefined;
   const updatedAt = latestFileDate || persistedFolder?.updated_at || new Date().toISOString();
+  const counts = directFolderCounts(files, folders, normalizedPath);
   return {
     kind: "folder",
     id: `folder:${normalizedPath}`,
     name: lastPathSegment(normalizedPath) || "Root",
     path: normalizedPath,
-    fileCount: directFolderCounts(files, folders, normalizedPath).files,
+    fileCount: counts.files,
-    folderCount: directFolderCounts(files, folders, normalizedPath).folders,
+    folderCount: counts.folders,
     totalSize: childFiles.reduce((total, file) => total + file.size_bytes, 0),
     updatedAt,
     persisted: Boolean(persistedFolder)

webui/src/index.ts

@@ -5,6 +5,8 @@ export { default as FilesPage } from "./features/files/FilesPage";
 export * from "./api/files";
 export type { PlatformWebModule, PlatformNavItem, PlatformRouteContribution, PlatformRouteContext } from "@govoplan/core-webui";
 export { FolderTree } from "./features/files/components/FileManagerComponents";
+export { default as ManagedFileChooser } from "./features/files/components/ManagedFileChooser";
+export type { ManagedAttachmentSelection, ManagedFolderSelection } from "./features/files/components/ManagedFileChooser";
 export { useFileTreeState } from "./features/files/hooks/useFileTreeState";
 export type { FolderNode, SortColumn, SortDirection } from "./features/files/types";
 export { buildExplorerEntries, buildFolderEntryFromSources, buildFolderTree, candidateRenamedPath, directFolderCounts, entryModifiedTime, entryName, entrySelectionKey, entrySize, fileIdsForSelection, folderAncestorPaths, folderBreadcrumbs, folderContentLabel, formatBytes, formatDate, isFileInFolder, isPathUnderOrSame, joinFolder, lastPathSegment, normalizeFilePath, normalizeFolder, parentFolderPath, parseDragState, sortExplorerEntries, sortFolderNodes, treeNodeKey } from "./features/files/utils/fileManagerUtils";

webui/src/module.ts

@@ -1,6 +1,8 @@
 import { createElement, lazy } from "react";
 import type { FilesFileExplorerUiCapability, PlatformWebModule } from "@govoplan/core-webui";
 import { FolderTree } from "./features/files/components/FileManagerComponents";
+import ManagedFileChooser from "./features/files/components/ManagedFileChooser";
+import { listFileSpaces, listFiles, listFolders, resolveFilePatterns, shareFilesWithTarget } from "./api/files";
 
 const FilesPage = lazy(() => import("./features/files/FilesPage"));
 
@@ -16,7 +18,15 @@ export const filesModule: PlatformWebModule = {
     { path: "/files", anyOf: fileRead, order: 40, render: ({ settings, auth }) => createElement(FilesPage, { settings, auth }) }
   ],
   uiCapabilities: {
-    "files.fileExplorer": { FolderTree } satisfies FilesFileExplorerUiCapability
+    "files.fileExplorer": {
+      FolderTree,
+      ManagedFileChooser,
+      listFileSpaces,
+      listFiles,
+      listFolders,
+      resolveFilePatterns,
+      shareFilesWithTarget
+    } satisfies FilesFileExplorerUiCapability
   }
 };
 

webui/src/styles/file-manager.css

@@ -391,6 +391,11 @@
   text-align: center;
 }
 
+.file-list-virtual-spacer {
+  min-height: 0;
+  pointer-events: none;
+}
+
 .file-context-menu {
   position: fixed;
   z-index: 110;
@@ -698,3 +703,467 @@
   color: var(--text-strong);
   outline: none;
 }
+
+/* Managed file chooser exposed through the files.fileExplorer capability. */
+.managed-file-chooser-dialog {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  width: min(1080px, calc(100vw - 40px));
+  height: min(820px, calc(100vh - 40px));
+  max-height: min(820px, calc(100vh - 40px));
+  overflow: hidden;
+}
+
+.managed-file-chooser-dialog > .dialog-header {
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel);
+}
+
+.managed-file-chooser-body {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+.managed-file-chooser-body > .alert {
+  margin: 14px 14px 0;
+}
+
+.managed-file-chooser-footer {
+  flex: 0 0 auto;
+  padding: 12px 18px;
+  border-top: 1px solid var(--line);
+  background: var(--panel);
+  box-shadow: 0 -8px 24px rgba(15, 23, 42, .06);
+}
+
+.managed-file-chooser-layout {
+  display: grid;
+  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
+  border: 0;
+  border-radius: 0;
+  overflow: hidden;
+  background: var(--panel);
+}
+
+.managed-file-chooser-spaces {
+  min-width: 0;
+  padding: 16px;
+  border-right: 1px solid var(--line);
+  background: var(--panel-soft);
+  overflow: auto;
+}
+
+.managed-file-chooser-spaces.file-tree-panel {
+  display: flex;
+  padding: 0;
+  overflow: hidden;
+}
+
+.managed-file-chooser-spaces .file-tree-list {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding-bottom: 12px;
+}
+
+.managed-file-chooser-spaces .file-tree-space.is-active {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.managed-file-chooser-spaces h3 {
+  margin: 0 0 12px;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  color: var(--muted);
+}
+
+.managed-file-space-list {
+  display: grid;
+  gap: 7px;
+}
+
+.managed-file-space-button,
+.managed-file-entry {
+  width: 100%;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--ink);
+  text-align: left;
+  cursor: pointer;
+}
+
+.managed-file-space-button {
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr);
+  gap: 9px;
+  align-items: start;
+  padding: 9px;
+}
+
+.managed-file-space-button span,
+.managed-file-entry > span:not(.managed-file-shared-badge) {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.managed-file-space-button small,
+.managed-file-entry small {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.managed-file-space-button:hover:not(:disabled),
+.managed-file-space-button.is-selected {
+  border-color: var(--line-dark);
+  background: var(--panel);
+}
+
+.managed-file-space-button.is-selected {
+  border-color: var(--accent);
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+
+.managed-file-space-button:disabled {
+  cursor: not-allowed;
+  opacity: .45;
+}
+
+.managed-file-chooser-browser {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.managed-file-chooser-browser.folder-mode {
+  grid-template-rows: auto minmax(0, 1fr) auto;
+}
+
+.managed-file-chooser-toolbar {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--line);
+}
+
+.managed-file-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  align-items: center;
+  min-width: 0;
+}
+
+.managed-file-breadcrumb > button,
+.managed-file-breadcrumb span button {
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--ink);
+  padding: 5px 6px;
+  cursor: pointer;
+}
+
+.managed-file-breadcrumb button:hover:not(:disabled) {
+  background: var(--panel-soft);
+}
+
+.managed-pattern-editor {
+  display: grid;
+  gap: 8px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel-soft);
+}
+
+.managed-pattern-editor label {
+  display: grid;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.managed-file-entry-table {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  min-height: 0;
+  overflow: hidden;
+}
+
+.managed-file-entry-head,
+.managed-file-entry {
+  grid-template-columns: 22px minmax(0, 1fr) 110px 160px;
+}
+
+.managed-file-entry-head {
+  display: grid;
+  gap: 9px;
+  align-items: center;
+  min-height: 38px;
+  padding: 0 20px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel-soft);
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.managed-file-entry-head button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 5px;
+  width: max-content;
+  max-width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 5px 0;
+  font: inherit;
+  cursor: pointer;
+}
+
+.managed-file-entry-head button.is-sorted {
+  color: var(--text-strong);
+}
+
+.managed-file-entry-list {
+  display: block;
+  padding: 10px;
+  min-height: 0;
+  overflow: auto;
+}
+
+.managed-file-entry {
+  display: grid;
+  gap: 9px;
+  align-items: center;
+  min-height: 52px;
+  padding: 8px 10px;
+  margin: 0 0 4px;
+}
+
+.managed-file-entry:last-child {
+  margin-bottom: 0;
+}
+
+.managed-file-entry:hover:not(:disabled) {
+  border-color: var(--line);
+  background: var(--panel-soft);
+}
+
+.managed-file-entry.is-selected {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+
+.managed-file-entry:disabled {
+  color: var(--ink);
+  opacity: 1;
+  cursor: default;
+}
+
+.managed-file-entry.is-folder:not(:disabled) {
+  cursor: pointer;
+}
+
+.managed-file-entry.is-context-only {
+  opacity: .56;
+}
+
+.managed-file-entry.is-parent:disabled {
+  opacity: .38;
+}
+
+.managed-file-entry-name {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.managed-file-entry-name strong,
+.managed-file-entry-name small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.managed-file-entry-name small {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.managed-file-entry-size,
+.managed-file-entry-modified {
+  color: var(--muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.managed-file-shared-badge {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  border: 1px solid var(--success-line, var(--line));
+  border-radius: 999px;
+  padding: 3px 7px;
+  color: var(--success, var(--muted));
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.managed-file-empty {
+  padding: 28px 16px;
+  text-align: center;
+}
+
+.managed-file-virtual-spacer {
+  min-height: 0;
+  pointer-events: none;
+}
+
+.managed-file-tree-virtual-list {
+  flex: 1 1 auto;
+  min-height: 80px;
+  overflow: auto;
+}
+
+.managed-file-chooser-note {
+  margin: 0;
+  padding: 10px 14px;
+  border-top: 1px solid var(--line);
+  background: var(--panel-soft);
+}
+
+.managed-pattern-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.managed-pattern-results {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.managed-pattern-results .file-list-table {
+  min-width: 680px;
+  min-height: 0;
+  overflow: auto;
+}
+
+.managed-pattern-result-row {
+  width: 100%;
+  border-top: 0;
+  border-right: 0;
+  border-left: 0;
+  background: transparent;
+  color: var(--ink);
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+}
+
+.managed-pattern-result-row .file-list-name > span {
+  display: grid;
+  min-width: 0;
+}
+
+.managed-pattern-result-row .file-list-name strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.managed-pattern-result-row .file-list-name small {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.managed-pattern-rendered {
+  display: block;
+  color: var(--muted);
+}
+
+.split-field-action {
+  gap: 0;
+}
+
+.split-field-action > input,
+.split-field-action > select,
+.split-field-action > textarea {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.split-field-action > button,
+.split-field-action > .button,
+.split-field-action > .btn {
+  align-self: stretch;
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  box-shadow: none;
+}
+
+@media (max-width: 850px) {
+  .managed-file-entry-head,
+  .managed-file-entry {
+    grid-template-columns: 22px minmax(0, 1fr) 100px;
+  }
+
+  .managed-file-entry-head > :last-child,
+  .managed-file-entry-modified {
+    display: none;
+  }
+}
+
+@media (max-width: 760px) {
+  .managed-file-chooser-dialog {
+    width: calc(100vw - 20px);
+    height: calc(100vh - 20px);
+  }
+
+  .managed-file-chooser-layout {
+    grid-template-columns: 1fr;
+    max-height: calc(100vh - 220px);
+  }
+
+  .managed-file-chooser-spaces {
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+    max-height: 160px;
+  }
+
+  .managed-file-chooser-toolbar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}