@truenas/ui-components 0.8.14 → 0.8.16

package/fesm2022/truenas-ui-components.mjs

@@ -1,7 +1,7 @@
 import { Overlay, OverlayModule, OverlayPositionBuilder, createGlobalPositionStrategy, createNoopScrollStrategy, createOverlayRef } from "@angular/cdk/overlay";
 import { ComponentPortal, DomPortal, PortalModule, TemplatePortal } from "@angular/cdk/portal";
 import * as i0 from "@angular/core";
-import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostListener, Injectable, InjectionToken, Injector, LOCALE_ID, NgZone, PLATFORM_ID, Pipe, Renderer2, TemplateRef, ViewContainerRef, ViewEncapsulation, afterEveryRender, afterNextRender, booleanAttribute, computed, contentChild, contentChildren, createComponent, effect, forwardRef, inject, input, isDevMode, isSignal, linkedSignal, model, output, signal, untracked, viewChild, viewChildren } from "@angular/core";
+import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostListener, Injectable, InjectionToken, Injector, LOCALE_ID, NgZone, PLATFORM_ID, Pipe, Renderer2, TemplateRef, ViewContainerRef, ViewEncapsulation, afterEveryRender, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, contentChildren, createComponent, effect, forwardRef, inject, input, isDevMode, isSignal, linkedSignal, model, output, signal, untracked, viewChild, viewChildren } from "@angular/core";
 import * as i1 from "@angular/forms";
 import { FormsModule, NG_VALUE_ACCESSOR, NgControl, Validators } from "@angular/forms";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
@@ -26826,30 +26826,28 @@ var TnFilePickerPopupComponent = class TnFilePickerPopupComponent {
 	fileItems = input([], ...ngDevMode ? [{ debugName: "fileItems" }] : /* istanbul ignore next */ []);
 	selectedItems = input([], ...ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []);
 	loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	errorMessage = input(null, ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
 	fileExtensions = input(void 0, ...ngDevMode ? [{ debugName: "fileExtensions" }] : /* istanbul ignore next */ []);
 	testIdBase = input(void 0, ...ngDevMode ? [{ debugName: "testIdBase" }] : /* istanbul ignore next */ []);
 	iconRegistry = inject(TnIconRegistryService);
 	elementRef = inject(ElementRef);
 	constructor() {
 		registerTruenasIcons(this.iconRegistry);
+		afterRenderEffect(() => {
+			if (!this.creationFocusRequested()) return;
+			const creation = this.inlineCreation();
+			if (!creation) {
+				this.creationFocusRequested.set(false);
+				return;
+			}
+			if (creation.loading) return;
+			const nameInput = this.elementRef.nativeElement.querySelector(".inline-create-input");
+			if (!nameInput || nameInput.disabled) return;
+			nameInput.focus();
+			this.creationFocusRequested.set(false);
+		});
 	}
-	pendingCreationFocus = false;
-	ngAfterViewChecked() {
-		if (!this.pendingCreationFocus) return;
-		const creation = this.inlineCreation();
-		if (!creation) {
-			this.pendingCreationFocus = false;
-			return;
-		}
-		if (creation.loading) return;
-		const nameInput = this.elementRef.nativeElement.querySelector(".inline-create-input");
-		if (!nameInput) return;
-		if (document.activeElement === nameInput) {
-			this.pendingCreationFocus = false;
-			return;
-		}
-		setTimeout(() => nameInput.focus());
-	}
+	creationFocusRequested = signal(false, ...ngDevMode ? [{ debugName: "creationFocusRequested" }] : /* istanbul ignore next */ []);
 	itemClick = output();
 	itemDoubleClick = output();
 	pathNavigate = output();
@@ -26865,6 +26863,7 @@ var TnFilePickerPopupComponent = class TnFilePickerPopupComponent {
 		"size",
 		"modified"
 	];
+	emptyIcon = tnIconMarker("folder-open", "mdi");
 	allowCurrentDirectorySelection = computed(() => allowsCurrentDirectorySelection(this.mode()), ...ngDevMode ? [{ debugName: "allowCurrentDirectorySelection" }] : /* istanbul ignore next */ []);
 	baseSegments = computed(() => {
 		const base = this.testIdBase();
@@ -26872,6 +26871,7 @@ var TnFilePickerPopupComponent = class TnFilePickerPopupComponent {
 	}, ...ngDevMode ? [{ debugName: "baseSegments" }] : /* istanbul ignore next */ []);
 	selectTestId = computed(() => ["select", ...this.baseSegments()], ...ngDevMode ? [{ debugName: "selectTestId" }] : /* istanbul ignore next */ []);
 	clearSelectionTestId = computed(() => ["clear-selection", ...this.baseSegments()], ...ngDevMode ? [{ debugName: "clearSelectionTestId" }] : /* istanbul ignore next */ []);
+	errorTestId = computed(() => ["error", ...this.baseSegments()], ...ngDevMode ? [{ debugName: "errorTestId" }] : /* istanbul ignore next */ []);
 	inlineCreateTestId = computed(() => ["create", ...this.baseSegments()], ...ngDevMode ? [{ debugName: "inlineCreateTestId" }] : /* istanbul ignore next */ []);
 	itemTestId(item) {
 		return scopeTestId(this.testIdBase(), item.name);
@@ -26941,7 +26941,7 @@ var TnFilePickerPopupComponent = class TnFilePickerPopupComponent {
 				name: "",
 				loading: false
 			});
-			this.pendingCreationFocus = true;
+			this.creationFocusRequested.set(true);
 			return;
 		}
 		this.createAction.emit({
@@ -26978,7 +26978,7 @@ var TnFilePickerPopupComponent = class TnFilePickerPopupComponent {
 				loading: false,
 				error: message
 			});
-			this.pendingCreationFocus = true;
+			this.creationFocusRequested.set(true);
 		}
 	}
 	onInlineCreationKeyDown(event) {
@@ -27146,6 +27146,13 @@ var TnFilePickerPopupComponent = class TnFilePickerPopupComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			errorMessage: {
+				classPropertyName: "errorMessage",
+				publicName: "errorMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			fileExtensions: {
 				classPropertyName: "fileExtensions",
 				publicName: "fileExtensions",
@@ -27174,8 +27181,8 @@ var TnFilePickerPopupComponent = class TnFilePickerPopupComponent {
 		},
 		host: { classAttribute: "tn-file-picker-popup" },
 		ngImport: i0,
-		template: "<!-- Header with breadcrumb navigation -->\n<div class=\"tn-file-picker-header\">\n  <nav class=\"tn-file-picker-breadcrumb\" aria-label=\"File path\">\n    @for (segment of currentPath() | tnTruncatePath : rootPath(); track $index; let last = $last) {\n      <button\n        class=\"breadcrumb-segment\"\n        tnTestIdType=\"button\"\n        [tnTestId]=\"breadcrumbTestId(segment.name)\"\n        [class.current]=\"last\"\n        [class.nameless]=\"!segment.name\"\n        [disabled]=\"last\"\n        [attr.aria-label]=\"segment.name === '…' || !segment.name ? 'Navigate to ' + segment.path : null\"\n        (click)=\"navigateToPath(segment.path)\">\n        {{ segment.name }}\n      </button>\n    }\n  </nav>\n</div>\n\n<!-- Loading indicator -->\n@if (loading()) {\n  <div class=\"tn-file-picker-loading\">\n    <tn-icon name=\"loading\" library=\"mdi\" />\n    <span>Loading...</span>\n  </div>\n}\n\n<!-- File table -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-content\">\n\n  <tn-table\n    [dataSource]=\"filteredFileItems()\"\n    [displayedColumns]=\"multiSelect() ? displayedColumns : displayedColumns.slice(1)\"\n    [clickable]=\"true\"\n    [activeWhen]=\"isRowSelected\"\n    (rowClick)=\"onItemClick($event)\"\n    (rowDoubleClick)=\"onItemDoubleClick($event)\">\n\n    <!-- Selection column: explicit width so the auto table layout doesn't\n         hand the near-empty column a share of the spare width -->\n    @if (multiSelect()) {\n      <!-- `hideLabel` rather than an empty `tnHeaderCellDef`: a <th> with no\n           text fails axe `empty-table-header`, which is what the Storybook a11y\n           run reported on Components/File Picker > Multi Select Workflow\n           (#337). The empty template that used to sit here OVERRODE the header,\n           so the column was unnamed for anyone reading the header row too —\n           `hideLabel` renders the label into a `.cdk-visually-hidden` span\n           instead, which is the same route tn-table's own row-actions column\n           takes (#246). There is no select-all control, so the name describes\n           what the column holds. -->\n      <ng-container tnColumnDef=\"select\" width=\"20px\" label=\"Select\" [hideLabel]=\"true\">\n      <ng-template let-item tnCellDef>\n        @if (!item.inlineCreate) {\n          <tn-checkbox\n            [hideLabel]=\"true\"\n            [label]=\"'Select ' + item.name\"\n            [testId]=\"itemTestId(item)\"\n            [checked]=\"isSelected(item)\"\n            [disabled]=\"!!item.disabled\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"onItemClick(item)\" />\n        }\n      </ng-template>\n      </ng-container>\n    }\n\n    <!-- Name column -->\n    <ng-container tnColumnDef=\"name\">\n      <ng-template tnHeaderCellDef>Name</ng-template>\n      <ng-template let-item tnCellDef>\n\n        <!-- Inline creation row for create actions with a `create` callback -->\n        @if (item.inlineCreate) {\n          @if (inlineCreation(); as creation) {\n            <div class=\"inline-create-cell\">\n              <div class=\"inline-create-row\" [class.has-error]=\"!!creation.error\">\n                <tn-icon class=\"file-icon\" [name]=\"creation.action.icon || 'mdi-folder'\" />\n                <input\n                  type=\"text\"\n                  class=\"inline-create-input\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  tnTestIdType=\"input\"\n                  [tnTestId]=\"inlineCreateTestId()\"\n                  [attr.aria-label]=\"creation.action.label + ' name'\"\n                  [attr.aria-invalid]=\"creation.error ? true : null\"\n                  [attr.aria-describedby]=\"creation.error ? inlineErrorId : null\"\n                  [class.error]=\"!!creation.error\"\n                  [disabled]=\"creation.loading\"\n                  [value]=\"creation.name\"\n                  (input)=\"onInlineCreationInput($event)\"\n                  (keydown)=\"onInlineCreationKeyDown($event)\"\n                  (blur)=\"onInlineCreationBlur()\">\n                @if (creation.loading) {\n                  <tn-icon name=\"mdi-loading\" class=\"creation-loading-icon\" aria-hidden=\"true\" />\n                }\n              </div>\n              @if (creation.error) {\n                <div class=\"inline-create-error\" role=\"alert\" [id]=\"inlineErrorId\">\n                  <tn-icon name=\"mdi-alert-circle\" class=\"error-icon\" aria-hidden=\"true\" />\n                  <span class=\"error-text\">{{ creation.error }}</span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n        <div\n             class=\"file-name-cell\"\n             tnTestIdType=\"option\"\n             [tnTestId]=\"itemTestId(item)\"\n             [class.selected]=\"isSelected(item)\"\n             [class.disabled]=\"!!item.dimmed\"\n             [class.zfs-object]=\"isZfsObject(item)\">\n          <tn-icon\n            [name]=\"getItemIcon(item)\"\n            [class]=\"'file-icon file-icon-' + item.type\" />\n          <span class=\"file-name\">{{ item.name }}</span>\n\n          <!-- ZFS badge -->\n          @if (isZfsObject(item)) {\n            <span\n              [class]=\"'zfs-badge zfs-badge-' + item.type\">\n              {{ getZfsBadge(item) }}\n            </span>\n          }\n\n          <!-- Permission indicator -->\n          @if (item.permissions === 'none') {\n            <tn-icon\n              name=\"lock\"\n              library=\"mdi\"\n              class=\"permission-icon\" />\n          }\n\n          <!-- Navigation affordance: single click opens the directory -->\n          @if (isNavigatable(item)) {\n            <button\n              type=\"button\"\n              class=\"navigate-button\"\n              tnTestIdType=\"button\"\n              [tnTestId]=\"navigateTestId(item)\"\n              [attr.aria-label]=\"'Open ' + item.name\"\n              [attr.title]=\"'Open ' + item.name\"\n              (click)=\"onNavigateClick($event, item)\"\n              (dblclick)=\"$event.stopPropagation()\">\n              <tn-icon name=\"mdi-chevron-right\" size=\"sm\" />\n            </button>\n          }\n        </div>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Size column -->\n    <ng-container tnColumnDef=\"size\">\n      <ng-template tnHeaderCellDef>Size</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.size !== undefined) {\n          <span>{{ item.size | tnFileSize }}</span>\n        }\n        @if (item.size === undefined && item.type === 'folder') {\n          <span class=\"folder-indicator\">--</span>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Modified column -->\n    <ng-container tnColumnDef=\"modified\">\n      <ng-template tnHeaderCellDef>Modified</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.modified) {\n          <span>{{ formatDate(item.modified) }}</span>\n        }\n      </ng-template>\n    </ng-container>\n\n\n  </tn-table>\n\n  <!-- Empty state -->\n  @if (filteredFileItems().length === 0) {\n    <div class=\"empty-state\">\n      <tn-icon name=\"folder-open\" library=\"mdi\" customSize=\"48px\" />\n      <p>No items found</p>\n    </div>\n  }\n  </div>\n}\n\n<!-- Footer -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-footer\">\n    <div class=\"footer-selection\">\n      @if (selectedItems().length > 0) {\n        <span class=\"selection-count\">\n          {{ selectedItems().length }} item{{ selectedItems().length !== 1 ? 's' : '' }} selected\n        </span>\n        <tn-button\n          variant=\"outline\"\n          label=\"Clear Selection\"\n          [testId]=\"clearSelectionTestId()\"\n          (onClick)=\"onClearSelection()\" />\n      } @else if (allowCurrentDirectorySelection()) {\n        <span class=\"selection-count current-directory-selection\">\n          Current directory selected\n        </span>\n      } @else {\n        <span class=\"selection-count\">\n          No items selected\n        </span>\n      }\n    </div>\n    <div class=\"footer-actions\">\n      @for (action of createActions(); track action.id) {\n        <tn-button\n          variant=\"outline\"\n          [label]=\"action.label\"\n          [testId]=\"createActionTestId(action)\"\n          [disabled]=\"!!inlineCreation()\"\n          (onClick)=\"onCreateAction(action)\" />\n      }\n      <!-- Disabled while the inline creation row is open: its blur auto-submit\n           would race the selection submit -->\n      <tn-button\n        label=\"Select\"\n        [testId]=\"selectTestId()\"\n        [disabled]=\"(selectedItems().length === 0 && !allowCurrentDirectorySelection()) || !!inlineCreation()\"\n        (onClick)=\"onSubmit()\" />\n    </div>\n  </div>\n}",
-		styles: [":host{display:block;background:var(--tn-bg1, white);color:var(--tn-fg1, #333);padding:0;box-shadow:0 4px 16px #0000001f,0 1px 4px #00000014;border-radius:8px;border:1px solid var(--tn-lines, #e0e0e0);width:520px;max-width:calc(100vw - 32px);min-height:min(500px,100vh - 16px);max-height:min(600px,100vh - 16px);font-family:var(--tn-font-family-body);display:flex;flex-direction:column;overflow:hidden}.tn-file-picker-header{display:flex;align-items:center;justify-content:space-between;padding:var(--tn-content-padding, 24px);padding-bottom:16px;border-bottom:1px solid var(--tn-lines)}.tn-file-picker-breadcrumb{display:flex;align-items:center;flex:1;min-width:0}.tn-file-picker-breadcrumb .breadcrumb-segment{background:transparent;border:none;color:var(--tn-primary-text, var(--tn-primary, #0074a7));cursor:pointer;padding:4px 2px;border-radius:4px;font-size:1rem;white-space:nowrap;transition:background-color .15s ease-in-out}.tn-file-picker-breadcrumb .breadcrumb-segment:hover:not(:disabled){background:var(--tn-bg2)}.tn-file-picker-breadcrumb .breadcrumb-segment:disabled,.tn-file-picker-breadcrumb .breadcrumb-segment.current{color:var(--tn-fg1);cursor:default;font-weight:500}.tn-file-picker-breadcrumb .breadcrumb-segment:not(:last-child):after{content:\"/\";margin-left:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment:first-child:before{content:\"/\";margin-right:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment.nameless:not(:last-child):after{content:none}.tn-file-picker-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:40px;color:var(--tn-fg2)}.tn-file-picker-loading tn-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tn-file-picker-content{flex:1;min-height:0;overflow-y:auto}.inline-create-cell{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.inline-create-row{display:flex;align-items:center;gap:8px}.inline-create-row .inline-create-input{flex:1;padding:4px 8px;border:2px solid var(--tn-primary);border-radius:3px;background:var(--tn-bg1);color:var(--tn-fg1);font-size:inherit;font-family:inherit;outline:none;min-width:0}.inline-create-row .inline-create-input.error{border-color:var(--tn-error, var(--tn-red, #bd2626))}.inline-create-row .inline-create-input:disabled{opacity:.6;cursor:not-allowed;background:var(--tn-bg2)}.inline-create-row .creation-loading-icon{animation:spin 1s linear infinite;color:var(--tn-primary);flex-shrink:0}.inline-create-error{display:flex;align-items:center;gap:6px;margin-top:4px;padding:4px 8px;background:color-mix(in srgb,var(--tn-error, var(--tn-red, #bd2626)) 10%,transparent);border-left:3px solid var(--tn-error, var(--tn-red, #bd2626));border-radius:3px;font-size:1rem;color:var(--tn-error, var(--tn-red, #bd2626))}.inline-create-error .error-icon{flex-shrink:0}.inline-create-error .error-text{flex:1}.file-list-viewport{width:100%;height:100%}.file-list-viewport .cdk-virtual-scroll-content-wrapper{width:100%}tn-table{width:100%}tn-table th,tn-table .tn-table__header-cell{font-weight:600;padding:12px 16px;border-bottom:2px solid var(--tn-lines)}tn-table td,tn-table .tn-table__cell{padding:8px 16px;border-bottom:1px solid var(--tn-lines)}.file-name-cell{display:flex;align-items:center;gap:8px;cursor:pointer}.file-name-cell.disabled{opacity:.5;color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-name{color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-icon{opacity:.6}.file-name-cell.disabled:has(.file-icon-folder),.file-name-cell.disabled:has(.file-icon-dataset),.file-name-cell.disabled:has(.file-icon-mountpoint){cursor:pointer}.file-name-cell.disabled:not(:has(.file-icon-folder)):not(:has(.file-icon-dataset)):not(:has(.file-icon-mountpoint)){cursor:not-allowed}.file-icon{display:flex;align-items:center;justify-content:center;font-size:var(--tn-icon-md, 20px);flex-shrink:0;line-height:1}.file-icon.file-icon-folder{color:var(--tn-primary)}.file-icon.file-icon-dataset{color:var(--tn-blue, #007db3)}.file-icon.file-icon-zvol{color:var(--tn-green, #71BF44)}.file-icon.file-icon-mountpoint{color:var(--tn-orange, #E68D37)}.file-name{flex:1;font-weight:500;line-height:1.4}.zfs-badge{display:inline-flex;align-items:center;background:var(--tn-alt-bg2);color:var(--tn-alt-fg2);border:1px solid transparent;font-size:.625rem;font-weight:600;padding:2px 6px;border-radius:12px;text-transform:uppercase;letter-spacing:.5px;line-height:1}.zfs-badge.zfs-badge-dataset{border-color:var(--tn-blue)}.zfs-badge.zfs-badge-zvol{border-color:var(--tn-green)}.zfs-badge.zfs-badge-mountpoint{border-color:var(--tn-orange)}.permission-icon{display:flex;align-items:center;justify-content:center;color:var(--tn-red);font-size:var(--tn-icon-sm, 16px);line-height:1}.navigate-button{display:flex;align-items:center;justify-content:center;margin-left:auto;padding:2px;background:none;border:none;border-radius:4px;color:var(--tn-fg2);cursor:pointer}.navigate-button:hover,.navigate-button:focus-visible{background:var(--tn-bg3);color:var(--tn-primary)}.file-type{font-size:1rem;padding:2px 8px;border-radius:12px}.file-type.type-folder{background:var(--tn-alt-bg1);color:var(--tn-alt-fg2)}.file-type.type-file{background:var(--tn-bg2);color:var(--tn-fg2)}.file-type.type-dataset{background:#007db31a;color:var(--tn-blue)}.file-type.type-zvol{background:#71bf441a;color:var(--tn-green)}.file-type.type-mountpoint{background:#e68d371a;color:var(--tn-orange)}.folder-indicator{color:var(--tn-alt-fg1);font-style:italic}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:var(--tn-alt-fg1);text-align:center}.empty-state tn-icon{margin-bottom:16px;opacity:.5}.empty-state p{margin:0;font-size:1rem}.tn-file-picker-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--tn-content-padding, 24px);border-top:1px solid var(--tn-lines);background:var(--tn-bg2);border-bottom-left-radius:8px;border-bottom-right-radius:8px}.tn-file-picker-footer .footer-selection{display:flex;align-items:center;gap:12px}.selection-count{font-size:1rem;color:var(--tn-fg2);font-weight:500}.footer-actions{display:flex;gap:8px}@media(prefers-reduced-motion:reduce){.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){:host{border-width:2px}.file-item:hover,.file-item.selected{border:2px solid var(--tn-fg1)}.zfs-badge,.zfs-badge.zfs-badge-dataset,.zfs-badge.zfs-badge-zvol,.zfs-badge.zfs-badge-mountpoint{border:1px solid var(--tn-fg1)}}@media(max-width:768px){:host{min-width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.tn-file-picker-header{flex-direction:column;gap:12px;align-items:stretch}.tn-file-picker-breadcrumb{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-file-picker-breadcrumb::-webkit-scrollbar{display:none}.file-item{padding:12px;min-height:56px}.file-info{font-size:1rem}}\n"],
+		template: "<!-- Header with breadcrumb navigation -->\n<div class=\"tn-file-picker-header\">\n  <nav class=\"tn-file-picker-breadcrumb\" aria-label=\"File path\">\n    @for (segment of currentPath() | tnTruncatePath : rootPath(); track $index; let last = $last) {\n      <button\n        class=\"breadcrumb-segment\"\n        tnTestIdType=\"button\"\n        [tnTestId]=\"breadcrumbTestId(segment.name)\"\n        [class.current]=\"last\"\n        [class.nameless]=\"!segment.name\"\n        [disabled]=\"last\"\n        [attr.aria-label]=\"segment.name === '…' || !segment.name ? 'Navigate to ' + segment.path : null\"\n        (click)=\"navigateToPath(segment.path)\">\n        {{ segment.name }}\n      </button>\n    }\n  </nav>\n</div>\n\n<!-- Failed listing or creation, reported by the owning picker -->\n@if (errorMessage(); as message) {\n  <div\n    class=\"tn-file-picker-error\"\n    role=\"alert\"\n    tnTestIdType=\"text\"\n    [tnTestId]=\"errorTestId()\">\n    <tn-icon name=\"mdi-alert-circle\" class=\"error-icon\" aria-hidden=\"true\" />\n    <span class=\"error-text\">{{ message }}</span>\n  </div>\n}\n\n<!-- Loading indicator -->\n@if (loading()) {\n  <div class=\"tn-file-picker-loading\">\n    <tn-icon name=\"loading\" library=\"mdi\" />\n    <span>Loading...</span>\n  </div>\n}\n\n<!-- File table -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-content\">\n\n  <tn-table\n    emptyMessage=\"No items found\"\n    [dataSource]=\"filteredFileItems()\"\n    [displayedColumns]=\"multiSelect() ? displayedColumns : displayedColumns.slice(1)\"\n    [clickable]=\"true\"\n    [activeWhen]=\"isRowSelected\"\n    [emptyIcon]=\"emptyIcon\"\n    (rowClick)=\"onItemClick($event)\"\n    (rowDoubleClick)=\"onItemDoubleClick($event)\">\n\n    <!-- Selection column: explicit width so the auto table layout doesn't\n         hand the near-empty column a share of the spare width -->\n    @if (multiSelect()) {\n      <!-- `hideLabel` rather than an empty `tnHeaderCellDef`: a <th> with no\n           text fails axe `empty-table-header`, which is what the Storybook a11y\n           run reported on Components/File Picker > Multi Select Workflow\n           (#337). The empty template that used to sit here OVERRODE the header,\n           so the column was unnamed for anyone reading the header row too —\n           `hideLabel` renders the label into a `.cdk-visually-hidden` span\n           instead, which is the same route tn-table's own row-actions column\n           takes (#246). There is no select-all control, so the name describes\n           what the column holds. -->\n      <ng-container tnColumnDef=\"select\" width=\"20px\" label=\"Select\" [hideLabel]=\"true\">\n      <ng-template let-item tnCellDef>\n        @if (!item.inlineCreate) {\n          <tn-checkbox\n            [hideLabel]=\"true\"\n            [label]=\"'Select ' + item.name\"\n            [testId]=\"itemTestId(item)\"\n            [checked]=\"isSelected(item)\"\n            [disabled]=\"!!item.disabled\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"onItemClick(item)\" />\n        }\n      </ng-template>\n      </ng-container>\n    }\n\n    <!-- Name column -->\n    <ng-container tnColumnDef=\"name\">\n      <ng-template tnHeaderCellDef>Name</ng-template>\n      <ng-template let-item tnCellDef>\n\n        <!-- Inline creation row for create actions with a `create` callback -->\n        @if (item.inlineCreate) {\n          @if (inlineCreation(); as creation) {\n            <div class=\"inline-create-cell\">\n              <div class=\"inline-create-row\" [class.has-error]=\"!!creation.error\">\n                <tn-icon class=\"file-icon\" [name]=\"creation.action.icon || 'mdi-folder'\" />\n                <input\n                  type=\"text\"\n                  class=\"inline-create-input\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  tnTestIdType=\"input\"\n                  [tnTestId]=\"inlineCreateTestId()\"\n                  [attr.aria-label]=\"creation.action.label + ' name'\"\n                  [attr.aria-invalid]=\"creation.error ? true : null\"\n                  [attr.aria-describedby]=\"creation.error ? inlineErrorId : null\"\n                  [class.error]=\"!!creation.error\"\n                  [disabled]=\"creation.loading\"\n                  [value]=\"creation.name\"\n                  (input)=\"onInlineCreationInput($event)\"\n                  (keydown)=\"onInlineCreationKeyDown($event)\"\n                  (blur)=\"onInlineCreationBlur()\">\n                @if (creation.loading) {\n                  <tn-icon name=\"mdi-loading\" class=\"creation-loading-icon\" aria-hidden=\"true\" />\n                }\n              </div>\n              @if (creation.error) {\n                <div class=\"inline-create-error\" role=\"alert\" [id]=\"inlineErrorId\">\n                  <tn-icon name=\"mdi-alert-circle\" class=\"error-icon\" aria-hidden=\"true\" />\n                  <span class=\"error-text\">{{ creation.error }}</span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n        <div\n             class=\"file-name-cell\"\n             tnTestIdType=\"option\"\n             [tnTestId]=\"itemTestId(item)\"\n             [class.selected]=\"isSelected(item)\"\n             [class.disabled]=\"!!item.dimmed\"\n             [class.zfs-object]=\"isZfsObject(item)\">\n          <tn-icon\n            [name]=\"getItemIcon(item)\"\n            [class]=\"'file-icon file-icon-' + item.type\" />\n          <span class=\"file-name\">{{ item.name }}</span>\n\n          <!-- ZFS badge -->\n          @if (isZfsObject(item)) {\n            <span\n              [class]=\"'zfs-badge zfs-badge-' + item.type\">\n              {{ getZfsBadge(item) }}\n            </span>\n          }\n\n          <!-- Permission indicator -->\n          @if (item.permissions === 'none') {\n            <tn-icon\n              name=\"lock\"\n              library=\"mdi\"\n              class=\"permission-icon\" />\n          }\n\n          <!-- Navigation affordance: single click opens the directory -->\n          @if (isNavigatable(item)) {\n            <button\n              type=\"button\"\n              class=\"navigate-button\"\n              tnTestIdType=\"button\"\n              [tnTestId]=\"navigateTestId(item)\"\n              [attr.aria-label]=\"'Open ' + item.name\"\n              [attr.title]=\"'Open ' + item.name\"\n              (click)=\"onNavigateClick($event, item)\"\n              (dblclick)=\"$event.stopPropagation()\">\n              <tn-icon name=\"mdi-chevron-right\" size=\"sm\" />\n            </button>\n          }\n        </div>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Size column -->\n    <ng-container tnColumnDef=\"size\">\n      <ng-template tnHeaderCellDef>Size</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.size !== undefined) {\n          <span>{{ item.size | tnFileSize }}</span>\n        }\n        @if (item.size === undefined && item.type === 'folder') {\n          <span class=\"folder-indicator\">--</span>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Modified column -->\n    <ng-container tnColumnDef=\"modified\">\n      <ng-template tnHeaderCellDef>Modified</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.modified) {\n          <span>{{ formatDate(item.modified) }}</span>\n        }\n      </ng-template>\n    </ng-container>\n\n\n  </tn-table>\n\n  </div>\n}\n\n<!-- Footer -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-footer\">\n    <div class=\"footer-selection\">\n      @if (selectedItems().length > 0) {\n        <span class=\"selection-count\">\n          {{ selectedItems().length }} item{{ selectedItems().length !== 1 ? 's' : '' }} selected\n        </span>\n        <tn-button\n          variant=\"outline\"\n          label=\"Clear Selection\"\n          [testId]=\"clearSelectionTestId()\"\n          (onClick)=\"onClearSelection()\" />\n      } @else if (allowCurrentDirectorySelection()) {\n        <span class=\"selection-count current-directory-selection\">\n          Current directory selected\n        </span>\n      } @else {\n        <span class=\"selection-count\">\n          No items selected\n        </span>\n      }\n    </div>\n    <div class=\"footer-actions\">\n      @for (action of createActions(); track action.id) {\n        <tn-button\n          variant=\"outline\"\n          [label]=\"action.label\"\n          [testId]=\"createActionTestId(action)\"\n          [disabled]=\"!!inlineCreation()\"\n          (onClick)=\"onCreateAction(action)\" />\n      }\n      <!-- Disabled while the inline creation row is open: its blur auto-submit\n           would race the selection submit -->\n      <tn-button\n        label=\"Select\"\n        [testId]=\"selectTestId()\"\n        [disabled]=\"(selectedItems().length === 0 && !allowCurrentDirectorySelection()) || !!inlineCreation()\"\n        (onClick)=\"onSubmit()\" />\n    </div>\n  </div>\n}",
+		styles: [":host{display:block;background:var(--tn-bg1, white);color:var(--tn-fg1, #333);padding:0;box-shadow:0 4px 16px #0000001f,0 1px 4px #00000014;border-radius:8px;border:1px solid var(--tn-lines, #e0e0e0);width:520px;max-width:calc(100vw - 32px);min-height:min(500px,100vh - 16px);max-height:min(600px,100vh - 16px);font-family:var(--tn-font-family-body);display:flex;flex-direction:column;overflow:hidden}.tn-file-picker-header{display:flex;align-items:center;justify-content:space-between;padding:var(--tn-content-padding, 24px);padding-bottom:16px;border-bottom:1px solid var(--tn-lines)}.tn-file-picker-breadcrumb{display:flex;align-items:center;flex:1;min-width:0}.tn-file-picker-breadcrumb .breadcrumb-segment{background:transparent;border:none;color:var(--tn-primary-text, var(--tn-primary, #0074a7));cursor:pointer;padding:4px 2px;border-radius:4px;font-size:1rem;white-space:nowrap;transition:background-color .15s ease-in-out}.tn-file-picker-breadcrumb .breadcrumb-segment:hover:not(:disabled){background:var(--tn-bg2)}.tn-file-picker-breadcrumb .breadcrumb-segment:disabled,.tn-file-picker-breadcrumb .breadcrumb-segment.current{color:var(--tn-fg1);cursor:default;font-weight:500}.tn-file-picker-breadcrumb .breadcrumb-segment:not(:last-child):after{content:\"/\";margin-left:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment:first-child:before{content:\"/\";margin-right:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment.nameless:not(:last-child):after{content:none}.tn-file-picker-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:40px;color:var(--tn-fg2)}.tn-file-picker-loading tn-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tn-file-picker-content{flex:1;min-height:0;overflow-y:auto}.inline-create-cell{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.inline-create-row{display:flex;align-items:center;gap:8px}.inline-create-row .inline-create-input{flex:1;padding:4px 8px;border:2px solid var(--tn-primary);border-radius:3px;background:var(--tn-bg1);color:var(--tn-fg1);font-size:inherit;font-family:inherit;outline:none;min-width:0}.inline-create-row .inline-create-input.error{border-color:var(--tn-error, var(--tn-red, #bd2626))}.inline-create-row .inline-create-input:disabled{opacity:.6;cursor:not-allowed;background:var(--tn-bg2)}.inline-create-row .creation-loading-icon{animation:spin 1s linear infinite;color:var(--tn-primary);flex-shrink:0}.tn-file-picker-error{display:flex;align-items:center;gap:6px;margin:8px var(--tn-content-padding, 24px) 0;padding:6px 8px;background:color-mix(in srgb,var(--tn-error, var(--tn-red, #bd2626)) 10%,transparent);border-left:3px solid var(--tn-error, var(--tn-red, #bd2626));border-radius:3px;color:var(--tn-error, var(--tn-red, #bd2626))}.tn-file-picker-error .error-icon{flex-shrink:0}.tn-file-picker-error .error-text{flex:1}.inline-create-error{display:flex;align-items:center;gap:6px;margin-top:4px;padding:4px 8px;background:color-mix(in srgb,var(--tn-error, var(--tn-red, #bd2626)) 10%,transparent);border-left:3px solid var(--tn-error, var(--tn-red, #bd2626));border-radius:3px;font-size:1rem;color:var(--tn-error, var(--tn-red, #bd2626))}.inline-create-error .error-icon{flex-shrink:0}.inline-create-error .error-text{flex:1}.file-list-viewport{width:100%;height:100%}.file-list-viewport .cdk-virtual-scroll-content-wrapper{width:100%}tn-table{width:100%}tn-table th,tn-table .tn-table__header-cell{font-weight:600;padding:12px 16px;border-bottom:2px solid var(--tn-lines)}tn-table td,tn-table .tn-table__cell{padding:8px 16px;border-bottom:1px solid var(--tn-lines)}.file-name-cell{display:flex;align-items:center;gap:8px;cursor:pointer}.file-name-cell.disabled{opacity:.5;color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-name{color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-icon{opacity:.6}.file-name-cell.disabled:has(.file-icon-folder),.file-name-cell.disabled:has(.file-icon-dataset),.file-name-cell.disabled:has(.file-icon-mountpoint){cursor:pointer}.file-name-cell.disabled:not(:has(.file-icon-folder)):not(:has(.file-icon-dataset)):not(:has(.file-icon-mountpoint)){cursor:not-allowed}.file-icon{display:flex;align-items:center;justify-content:center;font-size:var(--tn-icon-md, 20px);flex-shrink:0;line-height:1}.file-icon.file-icon-folder{color:var(--tn-primary)}.file-icon.file-icon-dataset{color:var(--tn-blue, #007db3)}.file-icon.file-icon-zvol{color:var(--tn-green, #71BF44)}.file-icon.file-icon-mountpoint{color:var(--tn-orange, #E68D37)}.file-name{flex:1;font-weight:500;line-height:1.4}.zfs-badge{display:inline-flex;align-items:center;background:var(--tn-alt-bg2);color:var(--tn-alt-fg2);border:1px solid transparent;font-size:.625rem;font-weight:600;padding:2px 6px;border-radius:12px;text-transform:uppercase;letter-spacing:.5px;line-height:1}.zfs-badge.zfs-badge-dataset{border-color:var(--tn-blue)}.zfs-badge.zfs-badge-zvol{border-color:var(--tn-green)}.zfs-badge.zfs-badge-mountpoint{border-color:var(--tn-orange)}.permission-icon{display:flex;align-items:center;justify-content:center;color:var(--tn-red);font-size:var(--tn-icon-sm, 16px);line-height:1}.navigate-button{display:flex;align-items:center;justify-content:center;margin-left:auto;padding:2px;background:none;border:none;border-radius:4px;color:var(--tn-fg2);cursor:pointer}.navigate-button:hover,.navigate-button:focus-visible{background:var(--tn-bg3);color:var(--tn-primary)}.file-type{font-size:1rem;padding:2px 8px;border-radius:12px}.file-type.type-folder{background:var(--tn-alt-bg1);color:var(--tn-alt-fg2)}.file-type.type-file{background:var(--tn-bg2);color:var(--tn-fg2)}.file-type.type-dataset{background:#007db31a;color:var(--tn-blue)}.file-type.type-zvol{background:#71bf441a;color:var(--tn-green)}.file-type.type-mountpoint{background:#e68d371a;color:var(--tn-orange)}.folder-indicator{color:var(--tn-alt-fg1);font-style:italic}.tn-file-picker-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--tn-content-padding, 24px);border-top:1px solid var(--tn-lines);background:var(--tn-bg2);border-bottom-left-radius:8px;border-bottom-right-radius:8px}.tn-file-picker-footer .footer-selection{display:flex;align-items:center;gap:12px}.selection-count{font-size:1rem;color:var(--tn-fg2);font-weight:500}.footer-actions{display:flex;gap:8px}@media(prefers-reduced-motion:reduce){.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){:host{border-width:2px}.file-item:hover,.file-item.selected{border:2px solid var(--tn-fg1)}.zfs-badge,.zfs-badge.zfs-badge-dataset,.zfs-badge.zfs-badge-zvol,.zfs-badge.zfs-badge-mountpoint{border:1px solid var(--tn-fg1)}}@media(max-width:768px){:host{min-width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.tn-file-picker-header{flex-direction:column;gap:12px;align-items:stretch}.tn-file-picker-breadcrumb{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-file-picker-breadcrumb::-webkit-scrollbar{display:none}.file-item{padding:12px;min-height:56px}.file-info{font-size:1rem}}\n"],
 		dependencies: [
 			{
 				kind: "component",
@@ -27362,8 +27369,8 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.Eager,
 			host: { "class": "tn-file-picker-popup" },
-			template: "<!-- Header with breadcrumb navigation -->\n<div class=\"tn-file-picker-header\">\n  <nav class=\"tn-file-picker-breadcrumb\" aria-label=\"File path\">\n    @for (segment of currentPath() | tnTruncatePath : rootPath(); track $index; let last = $last) {\n      <button\n        class=\"breadcrumb-segment\"\n        tnTestIdType=\"button\"\n        [tnTestId]=\"breadcrumbTestId(segment.name)\"\n        [class.current]=\"last\"\n        [class.nameless]=\"!segment.name\"\n        [disabled]=\"last\"\n        [attr.aria-label]=\"segment.name === '…' || !segment.name ? 'Navigate to ' + segment.path : null\"\n        (click)=\"navigateToPath(segment.path)\">\n        {{ segment.name }}\n      </button>\n    }\n  </nav>\n</div>\n\n<!-- Loading indicator -->\n@if (loading()) {\n  <div class=\"tn-file-picker-loading\">\n    <tn-icon name=\"loading\" library=\"mdi\" />\n    <span>Loading...</span>\n  </div>\n}\n\n<!-- File table -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-content\">\n\n  <tn-table\n    [dataSource]=\"filteredFileItems()\"\n    [displayedColumns]=\"multiSelect() ? displayedColumns : displayedColumns.slice(1)\"\n    [clickable]=\"true\"\n    [activeWhen]=\"isRowSelected\"\n    (rowClick)=\"onItemClick($event)\"\n    (rowDoubleClick)=\"onItemDoubleClick($event)\">\n\n    <!-- Selection column: explicit width so the auto table layout doesn't\n         hand the near-empty column a share of the spare width -->\n    @if (multiSelect()) {\n      <!-- `hideLabel` rather than an empty `tnHeaderCellDef`: a <th> with no\n           text fails axe `empty-table-header`, which is what the Storybook a11y\n           run reported on Components/File Picker > Multi Select Workflow\n           (#337). The empty template that used to sit here OVERRODE the header,\n           so the column was unnamed for anyone reading the header row too —\n           `hideLabel` renders the label into a `.cdk-visually-hidden` span\n           instead, which is the same route tn-table's own row-actions column\n           takes (#246). There is no select-all control, so the name describes\n           what the column holds. -->\n      <ng-container tnColumnDef=\"select\" width=\"20px\" label=\"Select\" [hideLabel]=\"true\">\n      <ng-template let-item tnCellDef>\n        @if (!item.inlineCreate) {\n          <tn-checkbox\n            [hideLabel]=\"true\"\n            [label]=\"'Select ' + item.name\"\n            [testId]=\"itemTestId(item)\"\n            [checked]=\"isSelected(item)\"\n            [disabled]=\"!!item.disabled\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"onItemClick(item)\" />\n        }\n      </ng-template>\n      </ng-container>\n    }\n\n    <!-- Name column -->\n    <ng-container tnColumnDef=\"name\">\n      <ng-template tnHeaderCellDef>Name</ng-template>\n      <ng-template let-item tnCellDef>\n\n        <!-- Inline creation row for create actions with a `create` callback -->\n        @if (item.inlineCreate) {\n          @if (inlineCreation(); as creation) {\n            <div class=\"inline-create-cell\">\n              <div class=\"inline-create-row\" [class.has-error]=\"!!creation.error\">\n                <tn-icon class=\"file-icon\" [name]=\"creation.action.icon || 'mdi-folder'\" />\n                <input\n                  type=\"text\"\n                  class=\"inline-create-input\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  tnTestIdType=\"input\"\n                  [tnTestId]=\"inlineCreateTestId()\"\n                  [attr.aria-label]=\"creation.action.label + ' name'\"\n                  [attr.aria-invalid]=\"creation.error ? true : null\"\n                  [attr.aria-describedby]=\"creation.error ? inlineErrorId : null\"\n                  [class.error]=\"!!creation.error\"\n                  [disabled]=\"creation.loading\"\n                  [value]=\"creation.name\"\n                  (input)=\"onInlineCreationInput($event)\"\n                  (keydown)=\"onInlineCreationKeyDown($event)\"\n                  (blur)=\"onInlineCreationBlur()\">\n                @if (creation.loading) {\n                  <tn-icon name=\"mdi-loading\" class=\"creation-loading-icon\" aria-hidden=\"true\" />\n                }\n              </div>\n              @if (creation.error) {\n                <div class=\"inline-create-error\" role=\"alert\" [id]=\"inlineErrorId\">\n                  <tn-icon name=\"mdi-alert-circle\" class=\"error-icon\" aria-hidden=\"true\" />\n                  <span class=\"error-text\">{{ creation.error }}</span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n        <div\n             class=\"file-name-cell\"\n             tnTestIdType=\"option\"\n             [tnTestId]=\"itemTestId(item)\"\n             [class.selected]=\"isSelected(item)\"\n             [class.disabled]=\"!!item.dimmed\"\n             [class.zfs-object]=\"isZfsObject(item)\">\n          <tn-icon\n            [name]=\"getItemIcon(item)\"\n            [class]=\"'file-icon file-icon-' + item.type\" />\n          <span class=\"file-name\">{{ item.name }}</span>\n\n          <!-- ZFS badge -->\n          @if (isZfsObject(item)) {\n            <span\n              [class]=\"'zfs-badge zfs-badge-' + item.type\">\n              {{ getZfsBadge(item) }}\n            </span>\n          }\n\n          <!-- Permission indicator -->\n          @if (item.permissions === 'none') {\n            <tn-icon\n              name=\"lock\"\n              library=\"mdi\"\n              class=\"permission-icon\" />\n          }\n\n          <!-- Navigation affordance: single click opens the directory -->\n          @if (isNavigatable(item)) {\n            <button\n              type=\"button\"\n              class=\"navigate-button\"\n              tnTestIdType=\"button\"\n              [tnTestId]=\"navigateTestId(item)\"\n              [attr.aria-label]=\"'Open ' + item.name\"\n              [attr.title]=\"'Open ' + item.name\"\n              (click)=\"onNavigateClick($event, item)\"\n              (dblclick)=\"$event.stopPropagation()\">\n              <tn-icon name=\"mdi-chevron-right\" size=\"sm\" />\n            </button>\n          }\n        </div>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Size column -->\n    <ng-container tnColumnDef=\"size\">\n      <ng-template tnHeaderCellDef>Size</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.size !== undefined) {\n          <span>{{ item.size | tnFileSize }}</span>\n        }\n        @if (item.size === undefined && item.type === 'folder') {\n          <span class=\"folder-indicator\">--</span>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Modified column -->\n    <ng-container tnColumnDef=\"modified\">\n      <ng-template tnHeaderCellDef>Modified</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.modified) {\n          <span>{{ formatDate(item.modified) }}</span>\n        }\n      </ng-template>\n    </ng-container>\n\n\n  </tn-table>\n\n  <!-- Empty state -->\n  @if (filteredFileItems().length === 0) {\n    <div class=\"empty-state\">\n      <tn-icon name=\"folder-open\" library=\"mdi\" customSize=\"48px\" />\n      <p>No items found</p>\n    </div>\n  }\n  </div>\n}\n\n<!-- Footer -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-footer\">\n    <div class=\"footer-selection\">\n      @if (selectedItems().length > 0) {\n        <span class=\"selection-count\">\n          {{ selectedItems().length }} item{{ selectedItems().length !== 1 ? 's' : '' }} selected\n        </span>\n        <tn-button\n          variant=\"outline\"\n          label=\"Clear Selection\"\n          [testId]=\"clearSelectionTestId()\"\n          (onClick)=\"onClearSelection()\" />\n      } @else if (allowCurrentDirectorySelection()) {\n        <span class=\"selection-count current-directory-selection\">\n          Current directory selected\n        </span>\n      } @else {\n        <span class=\"selection-count\">\n          No items selected\n        </span>\n      }\n    </div>\n    <div class=\"footer-actions\">\n      @for (action of createActions(); track action.id) {\n        <tn-button\n          variant=\"outline\"\n          [label]=\"action.label\"\n          [testId]=\"createActionTestId(action)\"\n          [disabled]=\"!!inlineCreation()\"\n          (onClick)=\"onCreateAction(action)\" />\n      }\n      <!-- Disabled while the inline creation row is open: its blur auto-submit\n           would race the selection submit -->\n      <tn-button\n        label=\"Select\"\n        [testId]=\"selectTestId()\"\n        [disabled]=\"(selectedItems().length === 0 && !allowCurrentDirectorySelection()) || !!inlineCreation()\"\n        (onClick)=\"onSubmit()\" />\n    </div>\n  </div>\n}",
-			styles: [":host{display:block;background:var(--tn-bg1, white);color:var(--tn-fg1, #333);padding:0;box-shadow:0 4px 16px #0000001f,0 1px 4px #00000014;border-radius:8px;border:1px solid var(--tn-lines, #e0e0e0);width:520px;max-width:calc(100vw - 32px);min-height:min(500px,100vh - 16px);max-height:min(600px,100vh - 16px);font-family:var(--tn-font-family-body);display:flex;flex-direction:column;overflow:hidden}.tn-file-picker-header{display:flex;align-items:center;justify-content:space-between;padding:var(--tn-content-padding, 24px);padding-bottom:16px;border-bottom:1px solid var(--tn-lines)}.tn-file-picker-breadcrumb{display:flex;align-items:center;flex:1;min-width:0}.tn-file-picker-breadcrumb .breadcrumb-segment{background:transparent;border:none;color:var(--tn-primary-text, var(--tn-primary, #0074a7));cursor:pointer;padding:4px 2px;border-radius:4px;font-size:1rem;white-space:nowrap;transition:background-color .15s ease-in-out}.tn-file-picker-breadcrumb .breadcrumb-segment:hover:not(:disabled){background:var(--tn-bg2)}.tn-file-picker-breadcrumb .breadcrumb-segment:disabled,.tn-file-picker-breadcrumb .breadcrumb-segment.current{color:var(--tn-fg1);cursor:default;font-weight:500}.tn-file-picker-breadcrumb .breadcrumb-segment:not(:last-child):after{content:\"/\";margin-left:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment:first-child:before{content:\"/\";margin-right:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment.nameless:not(:last-child):after{content:none}.tn-file-picker-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:40px;color:var(--tn-fg2)}.tn-file-picker-loading tn-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tn-file-picker-content{flex:1;min-height:0;overflow-y:auto}.inline-create-cell{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.inline-create-row{display:flex;align-items:center;gap:8px}.inline-create-row .inline-create-input{flex:1;padding:4px 8px;border:2px solid var(--tn-primary);border-radius:3px;background:var(--tn-bg1);color:var(--tn-fg1);font-size:inherit;font-family:inherit;outline:none;min-width:0}.inline-create-row .inline-create-input.error{border-color:var(--tn-error, var(--tn-red, #bd2626))}.inline-create-row .inline-create-input:disabled{opacity:.6;cursor:not-allowed;background:var(--tn-bg2)}.inline-create-row .creation-loading-icon{animation:spin 1s linear infinite;color:var(--tn-primary);flex-shrink:0}.inline-create-error{display:flex;align-items:center;gap:6px;margin-top:4px;padding:4px 8px;background:color-mix(in srgb,var(--tn-error, var(--tn-red, #bd2626)) 10%,transparent);border-left:3px solid var(--tn-error, var(--tn-red, #bd2626));border-radius:3px;font-size:1rem;color:var(--tn-error, var(--tn-red, #bd2626))}.inline-create-error .error-icon{flex-shrink:0}.inline-create-error .error-text{flex:1}.file-list-viewport{width:100%;height:100%}.file-list-viewport .cdk-virtual-scroll-content-wrapper{width:100%}tn-table{width:100%}tn-table th,tn-table .tn-table__header-cell{font-weight:600;padding:12px 16px;border-bottom:2px solid var(--tn-lines)}tn-table td,tn-table .tn-table__cell{padding:8px 16px;border-bottom:1px solid var(--tn-lines)}.file-name-cell{display:flex;align-items:center;gap:8px;cursor:pointer}.file-name-cell.disabled{opacity:.5;color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-name{color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-icon{opacity:.6}.file-name-cell.disabled:has(.file-icon-folder),.file-name-cell.disabled:has(.file-icon-dataset),.file-name-cell.disabled:has(.file-icon-mountpoint){cursor:pointer}.file-name-cell.disabled:not(:has(.file-icon-folder)):not(:has(.file-icon-dataset)):not(:has(.file-icon-mountpoint)){cursor:not-allowed}.file-icon{display:flex;align-items:center;justify-content:center;font-size:var(--tn-icon-md, 20px);flex-shrink:0;line-height:1}.file-icon.file-icon-folder{color:var(--tn-primary)}.file-icon.file-icon-dataset{color:var(--tn-blue, #007db3)}.file-icon.file-icon-zvol{color:var(--tn-green, #71BF44)}.file-icon.file-icon-mountpoint{color:var(--tn-orange, #E68D37)}.file-name{flex:1;font-weight:500;line-height:1.4}.zfs-badge{display:inline-flex;align-items:center;background:var(--tn-alt-bg2);color:var(--tn-alt-fg2);border:1px solid transparent;font-size:.625rem;font-weight:600;padding:2px 6px;border-radius:12px;text-transform:uppercase;letter-spacing:.5px;line-height:1}.zfs-badge.zfs-badge-dataset{border-color:var(--tn-blue)}.zfs-badge.zfs-badge-zvol{border-color:var(--tn-green)}.zfs-badge.zfs-badge-mountpoint{border-color:var(--tn-orange)}.permission-icon{display:flex;align-items:center;justify-content:center;color:var(--tn-red);font-size:var(--tn-icon-sm, 16px);line-height:1}.navigate-button{display:flex;align-items:center;justify-content:center;margin-left:auto;padding:2px;background:none;border:none;border-radius:4px;color:var(--tn-fg2);cursor:pointer}.navigate-button:hover,.navigate-button:focus-visible{background:var(--tn-bg3);color:var(--tn-primary)}.file-type{font-size:1rem;padding:2px 8px;border-radius:12px}.file-type.type-folder{background:var(--tn-alt-bg1);color:var(--tn-alt-fg2)}.file-type.type-file{background:var(--tn-bg2);color:var(--tn-fg2)}.file-type.type-dataset{background:#007db31a;color:var(--tn-blue)}.file-type.type-zvol{background:#71bf441a;color:var(--tn-green)}.file-type.type-mountpoint{background:#e68d371a;color:var(--tn-orange)}.folder-indicator{color:var(--tn-alt-fg1);font-style:italic}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:var(--tn-alt-fg1);text-align:center}.empty-state tn-icon{margin-bottom:16px;opacity:.5}.empty-state p{margin:0;font-size:1rem}.tn-file-picker-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--tn-content-padding, 24px);border-top:1px solid var(--tn-lines);background:var(--tn-bg2);border-bottom-left-radius:8px;border-bottom-right-radius:8px}.tn-file-picker-footer .footer-selection{display:flex;align-items:center;gap:12px}.selection-count{font-size:1rem;color:var(--tn-fg2);font-weight:500}.footer-actions{display:flex;gap:8px}@media(prefers-reduced-motion:reduce){.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){:host{border-width:2px}.file-item:hover,.file-item.selected{border:2px solid var(--tn-fg1)}.zfs-badge,.zfs-badge.zfs-badge-dataset,.zfs-badge.zfs-badge-zvol,.zfs-badge.zfs-badge-mountpoint{border:1px solid var(--tn-fg1)}}@media(max-width:768px){:host{min-width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.tn-file-picker-header{flex-direction:column;gap:12px;align-items:stretch}.tn-file-picker-breadcrumb{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-file-picker-breadcrumb::-webkit-scrollbar{display:none}.file-item{padding:12px;min-height:56px}.file-info{font-size:1rem}}\n"]
+			template: "<!-- Header with breadcrumb navigation -->\n<div class=\"tn-file-picker-header\">\n  <nav class=\"tn-file-picker-breadcrumb\" aria-label=\"File path\">\n    @for (segment of currentPath() | tnTruncatePath : rootPath(); track $index; let last = $last) {\n      <button\n        class=\"breadcrumb-segment\"\n        tnTestIdType=\"button\"\n        [tnTestId]=\"breadcrumbTestId(segment.name)\"\n        [class.current]=\"last\"\n        [class.nameless]=\"!segment.name\"\n        [disabled]=\"last\"\n        [attr.aria-label]=\"segment.name === '…' || !segment.name ? 'Navigate to ' + segment.path : null\"\n        (click)=\"navigateToPath(segment.path)\">\n        {{ segment.name }}\n      </button>\n    }\n  </nav>\n</div>\n\n<!-- Failed listing or creation, reported by the owning picker -->\n@if (errorMessage(); as message) {\n  <div\n    class=\"tn-file-picker-error\"\n    role=\"alert\"\n    tnTestIdType=\"text\"\n    [tnTestId]=\"errorTestId()\">\n    <tn-icon name=\"mdi-alert-circle\" class=\"error-icon\" aria-hidden=\"true\" />\n    <span class=\"error-text\">{{ message }}</span>\n  </div>\n}\n\n<!-- Loading indicator -->\n@if (loading()) {\n  <div class=\"tn-file-picker-loading\">\n    <tn-icon name=\"loading\" library=\"mdi\" />\n    <span>Loading...</span>\n  </div>\n}\n\n<!-- File table -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-content\">\n\n  <tn-table\n    emptyMessage=\"No items found\"\n    [dataSource]=\"filteredFileItems()\"\n    [displayedColumns]=\"multiSelect() ? displayedColumns : displayedColumns.slice(1)\"\n    [clickable]=\"true\"\n    [activeWhen]=\"isRowSelected\"\n    [emptyIcon]=\"emptyIcon\"\n    (rowClick)=\"onItemClick($event)\"\n    (rowDoubleClick)=\"onItemDoubleClick($event)\">\n\n    <!-- Selection column: explicit width so the auto table layout doesn't\n         hand the near-empty column a share of the spare width -->\n    @if (multiSelect()) {\n      <!-- `hideLabel` rather than an empty `tnHeaderCellDef`: a <th> with no\n           text fails axe `empty-table-header`, which is what the Storybook a11y\n           run reported on Components/File Picker > Multi Select Workflow\n           (#337). The empty template that used to sit here OVERRODE the header,\n           so the column was unnamed for anyone reading the header row too —\n           `hideLabel` renders the label into a `.cdk-visually-hidden` span\n           instead, which is the same route tn-table's own row-actions column\n           takes (#246). There is no select-all control, so the name describes\n           what the column holds. -->\n      <ng-container tnColumnDef=\"select\" width=\"20px\" label=\"Select\" [hideLabel]=\"true\">\n      <ng-template let-item tnCellDef>\n        @if (!item.inlineCreate) {\n          <tn-checkbox\n            [hideLabel]=\"true\"\n            [label]=\"'Select ' + item.name\"\n            [testId]=\"itemTestId(item)\"\n            [checked]=\"isSelected(item)\"\n            [disabled]=\"!!item.disabled\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"onItemClick(item)\" />\n        }\n      </ng-template>\n      </ng-container>\n    }\n\n    <!-- Name column -->\n    <ng-container tnColumnDef=\"name\">\n      <ng-template tnHeaderCellDef>Name</ng-template>\n      <ng-template let-item tnCellDef>\n\n        <!-- Inline creation row for create actions with a `create` callback -->\n        @if (item.inlineCreate) {\n          @if (inlineCreation(); as creation) {\n            <div class=\"inline-create-cell\">\n              <div class=\"inline-create-row\" [class.has-error]=\"!!creation.error\">\n                <tn-icon class=\"file-icon\" [name]=\"creation.action.icon || 'mdi-folder'\" />\n                <input\n                  type=\"text\"\n                  class=\"inline-create-input\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  tnTestIdType=\"input\"\n                  [tnTestId]=\"inlineCreateTestId()\"\n                  [attr.aria-label]=\"creation.action.label + ' name'\"\n                  [attr.aria-invalid]=\"creation.error ? true : null\"\n                  [attr.aria-describedby]=\"creation.error ? inlineErrorId : null\"\n                  [class.error]=\"!!creation.error\"\n                  [disabled]=\"creation.loading\"\n                  [value]=\"creation.name\"\n                  (input)=\"onInlineCreationInput($event)\"\n                  (keydown)=\"onInlineCreationKeyDown($event)\"\n                  (blur)=\"onInlineCreationBlur()\">\n                @if (creation.loading) {\n                  <tn-icon name=\"mdi-loading\" class=\"creation-loading-icon\" aria-hidden=\"true\" />\n                }\n              </div>\n              @if (creation.error) {\n                <div class=\"inline-create-error\" role=\"alert\" [id]=\"inlineErrorId\">\n                  <tn-icon name=\"mdi-alert-circle\" class=\"error-icon\" aria-hidden=\"true\" />\n                  <span class=\"error-text\">{{ creation.error }}</span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n        <div\n             class=\"file-name-cell\"\n             tnTestIdType=\"option\"\n             [tnTestId]=\"itemTestId(item)\"\n             [class.selected]=\"isSelected(item)\"\n             [class.disabled]=\"!!item.dimmed\"\n             [class.zfs-object]=\"isZfsObject(item)\">\n          <tn-icon\n            [name]=\"getItemIcon(item)\"\n            [class]=\"'file-icon file-icon-' + item.type\" />\n          <span class=\"file-name\">{{ item.name }}</span>\n\n          <!-- ZFS badge -->\n          @if (isZfsObject(item)) {\n            <span\n              [class]=\"'zfs-badge zfs-badge-' + item.type\">\n              {{ getZfsBadge(item) }}\n            </span>\n          }\n\n          <!-- Permission indicator -->\n          @if (item.permissions === 'none') {\n            <tn-icon\n              name=\"lock\"\n              library=\"mdi\"\n              class=\"permission-icon\" />\n          }\n\n          <!-- Navigation affordance: single click opens the directory -->\n          @if (isNavigatable(item)) {\n            <button\n              type=\"button\"\n              class=\"navigate-button\"\n              tnTestIdType=\"button\"\n              [tnTestId]=\"navigateTestId(item)\"\n              [attr.aria-label]=\"'Open ' + item.name\"\n              [attr.title]=\"'Open ' + item.name\"\n              (click)=\"onNavigateClick($event, item)\"\n              (dblclick)=\"$event.stopPropagation()\">\n              <tn-icon name=\"mdi-chevron-right\" size=\"sm\" />\n            </button>\n          }\n        </div>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Size column -->\n    <ng-container tnColumnDef=\"size\">\n      <ng-template tnHeaderCellDef>Size</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.size !== undefined) {\n          <span>{{ item.size | tnFileSize }}</span>\n        }\n        @if (item.size === undefined && item.type === 'folder') {\n          <span class=\"folder-indicator\">--</span>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Modified column -->\n    <ng-container tnColumnDef=\"modified\">\n      <ng-template tnHeaderCellDef>Modified</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.modified) {\n          <span>{{ formatDate(item.modified) }}</span>\n        }\n      </ng-template>\n    </ng-container>\n\n\n  </tn-table>\n\n  </div>\n}\n\n<!-- Footer -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-footer\">\n    <div class=\"footer-selection\">\n      @if (selectedItems().length > 0) {\n        <span class=\"selection-count\">\n          {{ selectedItems().length }} item{{ selectedItems().length !== 1 ? 's' : '' }} selected\n        </span>\n        <tn-button\n          variant=\"outline\"\n          label=\"Clear Selection\"\n          [testId]=\"clearSelectionTestId()\"\n          (onClick)=\"onClearSelection()\" />\n      } @else if (allowCurrentDirectorySelection()) {\n        <span class=\"selection-count current-directory-selection\">\n          Current directory selected\n        </span>\n      } @else {\n        <span class=\"selection-count\">\n          No items selected\n        </span>\n      }\n    </div>\n    <div class=\"footer-actions\">\n      @for (action of createActions(); track action.id) {\n        <tn-button\n          variant=\"outline\"\n          [label]=\"action.label\"\n          [testId]=\"createActionTestId(action)\"\n          [disabled]=\"!!inlineCreation()\"\n          (onClick)=\"onCreateAction(action)\" />\n      }\n      <!-- Disabled while the inline creation row is open: its blur auto-submit\n           would race the selection submit -->\n      <tn-button\n        label=\"Select\"\n        [testId]=\"selectTestId()\"\n        [disabled]=\"(selectedItems().length === 0 && !allowCurrentDirectorySelection()) || !!inlineCreation()\"\n        (onClick)=\"onSubmit()\" />\n    </div>\n  </div>\n}",
+			styles: [":host{display:block;background:var(--tn-bg1, white);color:var(--tn-fg1, #333);padding:0;box-shadow:0 4px 16px #0000001f,0 1px 4px #00000014;border-radius:8px;border:1px solid var(--tn-lines, #e0e0e0);width:520px;max-width:calc(100vw - 32px);min-height:min(500px,100vh - 16px);max-height:min(600px,100vh - 16px);font-family:var(--tn-font-family-body);display:flex;flex-direction:column;overflow:hidden}.tn-file-picker-header{display:flex;align-items:center;justify-content:space-between;padding:var(--tn-content-padding, 24px);padding-bottom:16px;border-bottom:1px solid var(--tn-lines)}.tn-file-picker-breadcrumb{display:flex;align-items:center;flex:1;min-width:0}.tn-file-picker-breadcrumb .breadcrumb-segment{background:transparent;border:none;color:var(--tn-primary-text, var(--tn-primary, #0074a7));cursor:pointer;padding:4px 2px;border-radius:4px;font-size:1rem;white-space:nowrap;transition:background-color .15s ease-in-out}.tn-file-picker-breadcrumb .breadcrumb-segment:hover:not(:disabled){background:var(--tn-bg2)}.tn-file-picker-breadcrumb .breadcrumb-segment:disabled,.tn-file-picker-breadcrumb .breadcrumb-segment.current{color:var(--tn-fg1);cursor:default;font-weight:500}.tn-file-picker-breadcrumb .breadcrumb-segment:not(:last-child):after{content:\"/\";margin-left:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment:first-child:before{content:\"/\";margin-right:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment.nameless:not(:last-child):after{content:none}.tn-file-picker-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:40px;color:var(--tn-fg2)}.tn-file-picker-loading tn-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tn-file-picker-content{flex:1;min-height:0;overflow-y:auto}.inline-create-cell{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.inline-create-row{display:flex;align-items:center;gap:8px}.inline-create-row .inline-create-input{flex:1;padding:4px 8px;border:2px solid var(--tn-primary);border-radius:3px;background:var(--tn-bg1);color:var(--tn-fg1);font-size:inherit;font-family:inherit;outline:none;min-width:0}.inline-create-row .inline-create-input.error{border-color:var(--tn-error, var(--tn-red, #bd2626))}.inline-create-row .inline-create-input:disabled{opacity:.6;cursor:not-allowed;background:var(--tn-bg2)}.inline-create-row .creation-loading-icon{animation:spin 1s linear infinite;color:var(--tn-primary);flex-shrink:0}.tn-file-picker-error{display:flex;align-items:center;gap:6px;margin:8px var(--tn-content-padding, 24px) 0;padding:6px 8px;background:color-mix(in srgb,var(--tn-error, var(--tn-red, #bd2626)) 10%,transparent);border-left:3px solid var(--tn-error, var(--tn-red, #bd2626));border-radius:3px;color:var(--tn-error, var(--tn-red, #bd2626))}.tn-file-picker-error .error-icon{flex-shrink:0}.tn-file-picker-error .error-text{flex:1}.inline-create-error{display:flex;align-items:center;gap:6px;margin-top:4px;padding:4px 8px;background:color-mix(in srgb,var(--tn-error, var(--tn-red, #bd2626)) 10%,transparent);border-left:3px solid var(--tn-error, var(--tn-red, #bd2626));border-radius:3px;font-size:1rem;color:var(--tn-error, var(--tn-red, #bd2626))}.inline-create-error .error-icon{flex-shrink:0}.inline-create-error .error-text{flex:1}.file-list-viewport{width:100%;height:100%}.file-list-viewport .cdk-virtual-scroll-content-wrapper{width:100%}tn-table{width:100%}tn-table th,tn-table .tn-table__header-cell{font-weight:600;padding:12px 16px;border-bottom:2px solid var(--tn-lines)}tn-table td,tn-table .tn-table__cell{padding:8px 16px;border-bottom:1px solid var(--tn-lines)}.file-name-cell{display:flex;align-items:center;gap:8px;cursor:pointer}.file-name-cell.disabled{opacity:.5;color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-name{color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-icon{opacity:.6}.file-name-cell.disabled:has(.file-icon-folder),.file-name-cell.disabled:has(.file-icon-dataset),.file-name-cell.disabled:has(.file-icon-mountpoint){cursor:pointer}.file-name-cell.disabled:not(:has(.file-icon-folder)):not(:has(.file-icon-dataset)):not(:has(.file-icon-mountpoint)){cursor:not-allowed}.file-icon{display:flex;align-items:center;justify-content:center;font-size:var(--tn-icon-md, 20px);flex-shrink:0;line-height:1}.file-icon.file-icon-folder{color:var(--tn-primary)}.file-icon.file-icon-dataset{color:var(--tn-blue, #007db3)}.file-icon.file-icon-zvol{color:var(--tn-green, #71BF44)}.file-icon.file-icon-mountpoint{color:var(--tn-orange, #E68D37)}.file-name{flex:1;font-weight:500;line-height:1.4}.zfs-badge{display:inline-flex;align-items:center;background:var(--tn-alt-bg2);color:var(--tn-alt-fg2);border:1px solid transparent;font-size:.625rem;font-weight:600;padding:2px 6px;border-radius:12px;text-transform:uppercase;letter-spacing:.5px;line-height:1}.zfs-badge.zfs-badge-dataset{border-color:var(--tn-blue)}.zfs-badge.zfs-badge-zvol{border-color:var(--tn-green)}.zfs-badge.zfs-badge-mountpoint{border-color:var(--tn-orange)}.permission-icon{display:flex;align-items:center;justify-content:center;color:var(--tn-red);font-size:var(--tn-icon-sm, 16px);line-height:1}.navigate-button{display:flex;align-items:center;justify-content:center;margin-left:auto;padding:2px;background:none;border:none;border-radius:4px;color:var(--tn-fg2);cursor:pointer}.navigate-button:hover,.navigate-button:focus-visible{background:var(--tn-bg3);color:var(--tn-primary)}.file-type{font-size:1rem;padding:2px 8px;border-radius:12px}.file-type.type-folder{background:var(--tn-alt-bg1);color:var(--tn-alt-fg2)}.file-type.type-file{background:var(--tn-bg2);color:var(--tn-fg2)}.file-type.type-dataset{background:#007db31a;color:var(--tn-blue)}.file-type.type-zvol{background:#71bf441a;color:var(--tn-green)}.file-type.type-mountpoint{background:#e68d371a;color:var(--tn-orange)}.folder-indicator{color:var(--tn-alt-fg1);font-style:italic}.tn-file-picker-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--tn-content-padding, 24px);border-top:1px solid var(--tn-lines);background:var(--tn-bg2);border-bottom-left-radius:8px;border-bottom-right-radius:8px}.tn-file-picker-footer .footer-selection{display:flex;align-items:center;gap:12px}.selection-count{font-size:1rem;color:var(--tn-fg2);font-weight:500}.footer-actions{display:flex;gap:8px}@media(prefers-reduced-motion:reduce){.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){:host{border-width:2px}.file-item:hover,.file-item.selected{border:2px solid var(--tn-fg1)}.zfs-badge,.zfs-badge.zfs-badge-dataset,.zfs-badge.zfs-badge-zvol,.zfs-badge.zfs-badge-mountpoint{border:1px solid var(--tn-fg1)}}@media(max-width:768px){:host{min-width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.tn-file-picker-header{flex-direction:column;gap:12px;align-items:stretch}.tn-file-picker-breadcrumb{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-file-picker-breadcrumb::-webkit-scrollbar{display:none}.file-item{padding:12px;min-height:56px}.file-info{font-size:1rem}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -27432,6 +27439,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		errorMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorMessage",
+				required: false
+			}]
+		}],
 		fileExtensions: [{
 			type: i0.Input,
 			args: [{
@@ -27496,8 +27511,10 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 	openOnClick = input(false, ...ngDevMode ? [{ debugName: "openOnClick" }] : /* istanbul ignore next */ []);
 	placeholder = input("Select file or folder", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
 	testId = input(void 0, ...ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []);
-	startPath = input("/mnt", ...ngDevMode ? [{ debugName: "startPath" }] : /* istanbul ignore next */ []);
+	source = input(void 0, ...ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []);
+	startPath = input(void 0, ...ngDevMode ? [{ debugName: "startPath" }] : /* istanbul ignore next */ []);
 	rootPath = input(void 0, ...ngDevMode ? [{ debugName: "rootPath" }] : /* istanbul ignore next */ []);
 	valueRoot = input(void 0, ...ngDevMode ? [{ debugName: "valueRoot" }] : /* istanbul ignore next */ []);
 	fileExtensions = input(void 0, ...ngDevMode ? [{ debugName: "fileExtensions" }] : /* istanbul ignore next */ []);
@@ -27519,24 +27536,35 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 	selectedItems = signal([], ...ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []);
 	loading = signal(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
 	hasError = signal(false, ...ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []);
+	popupError = signal(null, ...ngDevMode ? [{ debugName: "popupError" }] : /* istanbul ignore next */ []);
 	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
 	fieldAria = injectTnFormFieldAria(this.ariaLabel);
 	listedItems = /* @__PURE__ */ new Map();
 	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	effectiveCallbacks = computed(() => this.callbacks() ?? this.source()?.callbacks, ...ngDevMode ? [{ debugName: "effectiveCallbacks" }] : /* istanbul ignore next */ []);
+	effectiveStartPath = computed(() => this.startPath() ?? this.source()?.startPath ?? "/mnt", ...ngDevMode ? [{ debugName: "effectiveStartPath" }] : /* istanbul ignore next */ []);
+	effectiveValueRoot = computed(() => this.valueRoot() ?? this.source()?.valueRoot, ...ngDevMode ? [{ debugName: "effectiveValueRoot" }] : /* istanbul ignore next */ []);
+	availableCreateActions = computed(() => {
+		const path = this.currentPath();
+		const actions = this.createActions();
+		if (!actions.some((action) => action.canCreateAt)) return actions;
+		const directory = this.listedItems.get(path) ?? null;
+		return actions.filter((action) => action.canCreateAt?.(path, directory) ?? true);
+	}, ...ngDevMode ? [{ debugName: "availableCreateActions" }] : /* istanbul ignore next */ []);
 	resolvedTestId = controlTestId(this.testId);
 	toggleTestId = computed(() => {
 		const base = this.resolvedTestId();
 		if (composeTestId(void 0, base) === "") return;
 		return scopeTestId("toggle", ...Array.isArray(base) ? base : [base]);
 	}, ...ngDevMode ? [{ debugName: "toggleTestId" }] : /* istanbul ignore next */ []);
-	effectiveRootPath = computed(() => normalizeRootPath(this.rootPath() ?? "/mnt"), ...ngDevMode ? [{ debugName: "effectiveRootPath" }] : /* istanbul ignore next */ []);
+	effectiveRootPath = computed(() => normalizeRootPath(this.rootPath() ?? this.source()?.rootPath ?? "/mnt"), ...ngDevMode ? [{ debugName: "effectiveRootPath" }] : /* istanbul ignore next */ []);
 	onChange = (_value) => {};
 	onTouched = () => {};
 	overlay = inject(Overlay);
 	elementRef = inject(ElementRef);
 	viewContainerRef = inject(ViewContainerRef);
 	ngOnInit() {
-		this.currentPath.set(this.clampToRoot(this.startPath()));
+		this.currentPath.set(this.clampToRoot(this.effectiveStartPath()));
 	}
 	ngOnDestroy() {
 		this.destroy$.next();
@@ -27565,6 +27593,7 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 		this.formDisabled.set(isDisabled);
 	}
 	onPathCommit(event) {
+		if (this.readonly()) return;
 		const target = event.target;
 		if (this.allowManualInput() && this.allowFreeText()) {
 			this.commitFreeText(target.value);
@@ -27583,7 +27612,7 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 				this.onTouched();
 				return;
 			}
-			const cb = this.callbacks();
+			const cb = this.effectiveCallbacks();
 			if (cb?.validatePath) cb.validatePath(path).then((isValid) => {
 				if (isValid) this.updateSelection(path);
 				else this.emitError("validation", `Invalid path: ${path}`, path);
@@ -27616,12 +27645,13 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 		this.close();
 	}
 	openFilePicker() {
-		if (this.isOpen() || this.isDisabled()) return;
+		if (this.isOpen() || this.isDisabled() || this.readonly()) return;
 		this.createOverlay();
 		this.isOpen.set(true);
 		this.loadDirectory(this.currentPath());
 	}
 	close() {
+		this.popupError.set(null);
 		if (this.overlayRef) {
 			this.overlayRef.dispose();
 			this.overlayRef = void 0;
@@ -27665,6 +27695,7 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 			this.onChange(value);
 			this.emitSelection(value);
 		}
+		this.onTouched();
 		this.close();
 	}
 	onCancel() {
@@ -27674,7 +27705,29 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 		this.loadDirectory(this.clampToRoot(path));
 	}
 	onCreated(path) {
-		this.selectPath(path);
+		this.selectCreatedPath(path);
+	}
+	async runCreateAction(event) {
+		const action = this.createActions().find((candidate) => candidate.id === event.actionId);
+		if (!action?.run) {
+			this.createAction.emit(event);
+			return;
+		}
+		let createdPath;
+		try {
+			createdPath = await action.run(event.parentPath);
+		} catch (err) {
+			this.emitError("creation", err instanceof Error ? err.message : "Failed to create item", event.parentPath);
+			return;
+		}
+		if (createdPath) await this.selectCreatedPath(createdPath);
+	}
+	async selectCreatedPath(path) {
+		if (!isPathWithinRoot(path, this.effectiveRootPath())) {
+			this.emitError("creation", `Created item is outside of ${this.effectiveRootPath()}`, path);
+			return;
+		}
+		await this.selectPath(path);
 	}
 	async refresh() {
 		await this.loadDirectory(this.currentPath());
@@ -27700,11 +27753,13 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 		this.selectedPath.set("");
 		this.onChange(this.multiSelect() ? [] : "");
 		this.emitSelection(this.multiSelect() ? [] : "");
+		this.onTouched();
 	}
 	async loadDirectory(path) {
 		const directoryChanged = path !== this.currentPath();
-		const cb = this.callbacks();
+		const cb = this.effectiveCallbacks();
 		if (!cb?.getChildren) {
+			this.popupError.set(null);
 			const mockItems = this.getMockFileItems(path);
 			this.indexListedItems(mockItems);
 			this.fileItems.set(mockItems);
@@ -27716,6 +27771,7 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 		this.loading.set(true);
 		try {
 			const items = await cb.getChildren(path) || [];
+			this.popupError.set(null);
 			this.indexListedItems(items);
 			this.fileItems.set(items);
 			this.currentPath.set(path);
@@ -27782,7 +27838,7 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 		for (const item of items) this.listedItems.set(item.path, item);
 	}
 	normalizedValueRoot = computed(() => {
-		const valueRoot = this.valueRoot();
+		const valueRoot = this.effectiveValueRoot();
 		return valueRoot ? normalizeRootPath(valueRoot) : void 0;
 	}, ...ngDevMode ? [{ debugName: "normalizedValueRoot" }] : /* istanbul ignore next */ []);
 	toValueSpace(path) {
@@ -27799,6 +27855,7 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 	}
 	emitError(type, message, path) {
 		this.hasError.set(true);
+		if (type === "navigation" || type === "creation") this.popupError.set(message);
 		this.error.emit({
 			type,
 			message,
@@ -27934,6 +27991,13 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			testId: {
 				classPropertyName: "testId",
 				publicName: "testId",
@@ -27941,6 +28005,13 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			source: {
+				classPropertyName: "source",
+				publicName: "source",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			startPath: {
 				classPropertyName: "startPath",
 				publicName: "startPath",
@@ -28008,7 +28079,7 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div class=\"tn-file-picker-container\" tnTestIdType=\"file-picker\" [tnTestId]=\"resolvedTestId()\">\n  <div #wrapper ixInput class=\"tn-file-picker-wrapper\" style=\"padding-right: 40px;\">\n    <input\n      type=\"text\"\n      class=\"tn-file-picker-input\"\n      tnTestIdType=\"input\"\n      [tnTestId]=\"resolvedTestId()\"\n      [class.error]=\"hasError()\"\n      [value]=\"selectedPath()\"\n      [placeholder]=\"placeholder()\"\n      [readonly]=\"!allowManualInput()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n      [attr.aria-describedby]=\"fieldAria.describedby()\"\n      [attr.aria-invalid]=\"fieldAria.invalid()\"\n      [attr.aria-required]=\"fieldAria.required()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onInputClick()\"\n      (change)=\"onPathCommit($event)\">\n\n    <button\n      type=\"button\"\n      class=\"tn-file-picker-toggle\"\n      aria-label=\"Open file picker\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"toggleTestId()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openFilePicker()\">\n      <tn-icon name=\"folder\" library=\"mdi\" />\n    </button>\n  </div>\n  \n  <ng-template #filePickerTemplate>\n    <tn-file-picker-popup\n      class=\"tn-file-picker-popup\"\n      tnTestIdType=\"file-picker-popup\"\n      [tnTestId]=\"resolvedTestId()\"\n      [testIdBase]=\"resolvedTestId()\"\n      [mode]=\"mode()\"\n      [multiSelect]=\"multiSelect()\"\n      [createActions]=\"createActions()\"\n      [currentPath]=\"currentPath()\"\n      [rootPath]=\"effectiveRootPath()\"\n      [fileItems]=\"fileItems()\"\n      [selectedItems]=\"selectedItems()\"\n      [loading]=\"loading()\"\n      [fileExtensions]=\"fileExtensions()\"\n      (itemClick)=\"onItemClick($event)\"\n      (itemDoubleClick)=\"onItemDoubleClick($event)\"\n      (pathNavigate)=\"navigateToPath($event)\"\n      (createAction)=\"createAction.emit($event)\"\n      (created)=\"onCreated($event)\"\n      (clearSelection)=\"onClearSelection()\"\n      (submit)=\"onSubmit()\"\n      (cancel)=\"onCancel()\"\n      (close)=\"close()\" />\n  </ng-template>\n</div>",
+		template: "<div class=\"tn-file-picker-container\" tnTestIdType=\"file-picker\" [tnTestId]=\"resolvedTestId()\">\n  <div #wrapper ixInput class=\"tn-file-picker-wrapper\" style=\"padding-right: 40px;\">\n    <input\n      type=\"text\"\n      class=\"tn-file-picker-input\"\n      tnTestIdType=\"input\"\n      [tnTestId]=\"resolvedTestId()\"\n      [class.error]=\"hasError()\"\n      [value]=\"selectedPath()\"\n      [placeholder]=\"placeholder()\"\n      [readonly]=\"!allowManualInput() || readonly()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n      [attr.aria-describedby]=\"fieldAria.describedby()\"\n      [attr.aria-invalid]=\"fieldAria.invalid()\"\n      [attr.aria-required]=\"fieldAria.required()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onInputClick()\"\n      (change)=\"onPathCommit($event)\">\n\n    <button\n      type=\"button\"\n      class=\"tn-file-picker-toggle\"\n      aria-label=\"Open file picker\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"toggleTestId()\"\n      [disabled]=\"isDisabled() || readonly()\"\n      (click)=\"openFilePicker()\">\n      <tn-icon name=\"folder\" library=\"mdi\" />\n    </button>\n  </div>\n  \n  <ng-template #filePickerTemplate>\n    <tn-file-picker-popup\n      class=\"tn-file-picker-popup\"\n      tnTestIdType=\"file-picker-popup\"\n      [tnTestId]=\"resolvedTestId()\"\n      [testIdBase]=\"resolvedTestId()\"\n      [mode]=\"mode()\"\n      [multiSelect]=\"multiSelect()\"\n      [createActions]=\"availableCreateActions()\"\n      [currentPath]=\"currentPath()\"\n      [rootPath]=\"effectiveRootPath()\"\n      [fileItems]=\"fileItems()\"\n      [selectedItems]=\"selectedItems()\"\n      [loading]=\"loading()\"\n      [errorMessage]=\"popupError()\"\n      [fileExtensions]=\"fileExtensions()\"\n      (itemClick)=\"onItemClick($event)\"\n      (itemDoubleClick)=\"onItemDoubleClick($event)\"\n      (pathNavigate)=\"navigateToPath($event)\"\n      (createAction)=\"runCreateAction($event)\"\n      (created)=\"onCreated($event)\"\n      (clearSelection)=\"onClearSelection()\"\n      (submit)=\"onSubmit()\"\n      (cancel)=\"onCancel()\"\n      (close)=\"close()\" />\n  </ng-template>\n</div>",
 		styles: [":host{display:block;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-file-picker-container{position:relative;display:flex;align-items:center;width:100%}.tn-file-picker-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-file-picker-input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;outline:none;box-sizing:border-box;font-family:inherit}.tn-file-picker-input::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-file-picker-input:focus{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-file-picker-input:disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-file-picker-input.error{border-color:var(--tn-error, var(--tn-red, #bd2626))}.tn-file-picker-input.error:focus{border-color:var(--tn-error, var(--tn-red, #bd2626));box-shadow:0 0 0 2px #dc354540}.tn-file-picker-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;color:var(--tn-fg1);border-radius:4px}.tn-file-picker-toggle:hover{background:var(--tn-bg2, #f0f0f0)}.tn-file-picker-toggle:focus{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-file-picker-toggle:disabled{cursor:not-allowed;opacity:.5}.tn-file-picker-toggle tn-icon{font-size:var(--tn-icon-md, 20px)}:host:focus-within .tn-file-picker-input{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}:host.error .tn-file-picker-input{border-color:var(--tn-error, var(--tn-red, #bd2626))}:host.error .tn-file-picker-input:focus{border-color:var(--tn-error, var(--tn-red, #bd2626));box-shadow:0 0 0 2px #dc354540}@media(prefers-reduced-motion:reduce){.tn-file-picker-input,.tn-file-picker-toggle,.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){.tn-file-picker-input{border-width:2px}.file-item:hover,.file-item.selected{border:2px solid var(--tn-fg1)}.zfs-badge{border:1px solid var(--tn-fg1)}}@media(max-width:768px){:host ::ng-deep .tn-file-picker-overlay .tn-file-picker-dialog{min-width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.tn-file-picker-header{flex-direction:column;gap:12px;align-items:stretch}.tn-file-picker-breadcrumb{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-file-picker-breadcrumb::-webkit-scrollbar{display:none}.file-item{padding:12px;min-height:56px}.file-info{font-size:1rem}}\n"],
 		dependencies: [
 			{
@@ -28040,6 +28111,7 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 					"fileItems",
 					"selectedItems",
 					"loading",
+					"errorMessage",
 					"fileExtensions",
 					"testIdBase"
 				],
@@ -28107,7 +28179,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[class.error]": "hasError()",
 				"(keydown)": "onHostKeydown($event)"
 			},
-			template: "<div class=\"tn-file-picker-container\" tnTestIdType=\"file-picker\" [tnTestId]=\"resolvedTestId()\">\n  <div #wrapper ixInput class=\"tn-file-picker-wrapper\" style=\"padding-right: 40px;\">\n    <input\n      type=\"text\"\n      class=\"tn-file-picker-input\"\n      tnTestIdType=\"input\"\n      [tnTestId]=\"resolvedTestId()\"\n      [class.error]=\"hasError()\"\n      [value]=\"selectedPath()\"\n      [placeholder]=\"placeholder()\"\n      [readonly]=\"!allowManualInput()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n      [attr.aria-describedby]=\"fieldAria.describedby()\"\n      [attr.aria-invalid]=\"fieldAria.invalid()\"\n      [attr.aria-required]=\"fieldAria.required()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onInputClick()\"\n      (change)=\"onPathCommit($event)\">\n\n    <button\n      type=\"button\"\n      class=\"tn-file-picker-toggle\"\n      aria-label=\"Open file picker\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"toggleTestId()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openFilePicker()\">\n      <tn-icon name=\"folder\" library=\"mdi\" />\n    </button>\n  </div>\n  \n  <ng-template #filePickerTemplate>\n    <tn-file-picker-popup\n      class=\"tn-file-picker-popup\"\n      tnTestIdType=\"file-picker-popup\"\n      [tnTestId]=\"resolvedTestId()\"\n      [testIdBase]=\"resolvedTestId()\"\n      [mode]=\"mode()\"\n      [multiSelect]=\"multiSelect()\"\n      [createActions]=\"createActions()\"\n      [currentPath]=\"currentPath()\"\n      [rootPath]=\"effectiveRootPath()\"\n      [fileItems]=\"fileItems()\"\n      [selectedItems]=\"selectedItems()\"\n      [loading]=\"loading()\"\n      [fileExtensions]=\"fileExtensions()\"\n      (itemClick)=\"onItemClick($event)\"\n      (itemDoubleClick)=\"onItemDoubleClick($event)\"\n      (pathNavigate)=\"navigateToPath($event)\"\n      (createAction)=\"createAction.emit($event)\"\n      (created)=\"onCreated($event)\"\n      (clearSelection)=\"onClearSelection()\"\n      (submit)=\"onSubmit()\"\n      (cancel)=\"onCancel()\"\n      (close)=\"close()\" />\n  </ng-template>\n</div>",
+			template: "<div class=\"tn-file-picker-container\" tnTestIdType=\"file-picker\" [tnTestId]=\"resolvedTestId()\">\n  <div #wrapper ixInput class=\"tn-file-picker-wrapper\" style=\"padding-right: 40px;\">\n    <input\n      type=\"text\"\n      class=\"tn-file-picker-input\"\n      tnTestIdType=\"input\"\n      [tnTestId]=\"resolvedTestId()\"\n      [class.error]=\"hasError()\"\n      [value]=\"selectedPath()\"\n      [placeholder]=\"placeholder()\"\n      [readonly]=\"!allowManualInput() || readonly()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n      [attr.aria-describedby]=\"fieldAria.describedby()\"\n      [attr.aria-invalid]=\"fieldAria.invalid()\"\n      [attr.aria-required]=\"fieldAria.required()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onInputClick()\"\n      (change)=\"onPathCommit($event)\">\n\n    <button\n      type=\"button\"\n      class=\"tn-file-picker-toggle\"\n      aria-label=\"Open file picker\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"toggleTestId()\"\n      [disabled]=\"isDisabled() || readonly()\"\n      (click)=\"openFilePicker()\">\n      <tn-icon name=\"folder\" library=\"mdi\" />\n    </button>\n  </div>\n  \n  <ng-template #filePickerTemplate>\n    <tn-file-picker-popup\n      class=\"tn-file-picker-popup\"\n      tnTestIdType=\"file-picker-popup\"\n      [tnTestId]=\"resolvedTestId()\"\n      [testIdBase]=\"resolvedTestId()\"\n      [mode]=\"mode()\"\n      [multiSelect]=\"multiSelect()\"\n      [createActions]=\"availableCreateActions()\"\n      [currentPath]=\"currentPath()\"\n      [rootPath]=\"effectiveRootPath()\"\n      [fileItems]=\"fileItems()\"\n      [selectedItems]=\"selectedItems()\"\n      [loading]=\"loading()\"\n      [errorMessage]=\"popupError()\"\n      [fileExtensions]=\"fileExtensions()\"\n      (itemClick)=\"onItemClick($event)\"\n      (itemDoubleClick)=\"onItemDoubleClick($event)\"\n      (pathNavigate)=\"navigateToPath($event)\"\n      (createAction)=\"runCreateAction($event)\"\n      (created)=\"onCreated($event)\"\n      (clearSelection)=\"onClearSelection()\"\n      (submit)=\"onSubmit()\"\n      (cancel)=\"onCancel()\"\n      (close)=\"close()\" />\n  </ng-template>\n</div>",
 			styles: [":host{display:block;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-file-picker-container{position:relative;display:flex;align-items:center;width:100%}.tn-file-picker-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-file-picker-input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;outline:none;box-sizing:border-box;font-family:inherit}.tn-file-picker-input::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-file-picker-input:focus{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-file-picker-input:disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-file-picker-input.error{border-color:var(--tn-error, var(--tn-red, #bd2626))}.tn-file-picker-input.error:focus{border-color:var(--tn-error, var(--tn-red, #bd2626));box-shadow:0 0 0 2px #dc354540}.tn-file-picker-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;color:var(--tn-fg1);border-radius:4px}.tn-file-picker-toggle:hover{background:var(--tn-bg2, #f0f0f0)}.tn-file-picker-toggle:focus{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-file-picker-toggle:disabled{cursor:not-allowed;opacity:.5}.tn-file-picker-toggle tn-icon{font-size:var(--tn-icon-md, 20px)}:host:focus-within .tn-file-picker-input{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}:host.error .tn-file-picker-input{border-color:var(--tn-error, var(--tn-red, #bd2626))}:host.error .tn-file-picker-input:focus{border-color:var(--tn-error, var(--tn-red, #bd2626));box-shadow:0 0 0 2px #dc354540}@media(prefers-reduced-motion:reduce){.tn-file-picker-input,.tn-file-picker-toggle,.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){.tn-file-picker-input{border-width:2px}.file-item:hover,.file-item.selected{border:2px solid var(--tn-fg1)}.zfs-badge{border:1px solid var(--tn-fg1)}}@media(max-width:768px){:host ::ng-deep .tn-file-picker-overlay .tn-file-picker-dialog{min-width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.tn-file-picker-header{flex-direction:column;gap:12px;align-items:stretch}.tn-file-picker-breadcrumb{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-file-picker-breadcrumb::-webkit-scrollbar{display:none}.file-item{padding:12px;min-height:56px}.file-info{font-size:1rem}}\n"]
 		}]
 	}],
@@ -28184,6 +28256,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
 		testId: [{
 			type: i0.Input,
 			args: [{
@@ -28192,6 +28272,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		source: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "source",
+				required: false
+			}]
+		}],
 		startPath: [{
 			type: i0.Input,
 			args: [{