@cardstack/boxel-cli 0.9.0 → 0.10.0-unstable.0

package/bundled-test-harness/assets/realm-dropdown-CDvL8k3B.js

@@ -0,0 +1,560 @@
+import "./chunk-Rp0pCe6z.js";
+import { n as decorateMethodV2, r as initializeDeferredDecorator, t as decorateFieldV2 } from "./runtime--fcdnjmJ-BoCBNIsz.js";
+import "./runtime-common-ClpqhbwG.js";
+import { a as RealmPaths, v as ri } from "./paths-BYHDgqsT.js";
+import { h as assert } from "./debug-Dg0TiPYl.js";
+import { On as isDestroyed, et as tracked, kn as isDestroying, wn as associateDestroyableChild, wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
+import { d as action, ft as later, lt as cancel, r as service } from "./service-LFpJ8EEP.js";
+import { H as templateFactory, S as on } from "./index-DaCZcoCY-CgzbilMy.js";
+import "./destroyable-mdLYRn_o.js";
+import "./tracking-CNiq91Pk.js";
+import { n as resource } from "./dist-C2IXvIKX.js";
+import { i as fn } from "./helper-m6jA5HmU.js";
+import "./modifier-D0EP-FQ7.js";
+import "./component-BJO47HTh.js";
+import { t as Component } from "./dist-CkA1rgqO.js";
+import { n as tracked$1 } from "./tracking-800VJb8b.js";
+import "./template-factory-ds9s0u8l.js";
+import { a as and, f as not, y as MenuItem } from "./helpers-BN6ReMzK.js";
+import { G as RealmIcon, K as Menu, pt as ButtonComponent, q as BoxelDropdown, z as BoxelInput } from "./components-Ct_agx0G.js";
+import { J as IconComponent } from "./icons-B3SAtRoj.js";
+import { r as modifier } from "./dist-nMt-N14r.js";
+import { a as waitForPromise } from "./dist-CSQ-y1Ft.js";
+import { t as RealmURLTooltip } from "./realm-url-tooltip-qaXTjRb-.js";
+//#region ../../node_modules/.pnpm/reactiveweb@1.9.3_@babel+core@7.29.7_supports-color@8.1.1__@ember+test-waiters@4.1.2_su_015d4b8918b492d4ff90f861561ab904/node_modules/reactiveweb/dist/get-promise-state.js
+var promiseCache = /* @__PURE__ */ new WeakMap();
+var REASON_FUNCTION_EXCEPTION = `Passed function threw an exception`;
+var REASON_PROMISE_REJECTION = `Promise rejected while waiting to resolve`;
+var StateImpl = class {
+	static {
+		decorateFieldV2(this.prototype, "_isLoading", [tracked]);
+	}
+	#_isLoading = (initializeDeferredDecorator(this, "_isLoading"), void 0);
+	/**
+	* @private
+	*/
+	static {
+		decorateFieldV2(this.prototype, "_error", [tracked]);
+	}
+	#_error = (initializeDeferredDecorator(this, "_error"), void 0);
+	/**
+	* @private
+	*/
+	static {
+		decorateFieldV2(this.prototype, "_resolved", [tracked]);
+	}
+	#_resolved = (initializeDeferredDecorator(this, "_resolved"), void 0);
+	/**
+	* @private
+	*/
+	#initial;
+	constructor(fn, initial) {
+		this.#initial = initial;
+		try {
+			var maybePromise = isThennable(fn) ? fn : isFunction(fn) ? fn() : fn;
+		} catch (e) {
+			this.#initial = {
+				isLoading: false,
+				error: {
+					reason: REASON_FUNCTION_EXCEPTION,
+					original: e
+				}
+			};
+			return;
+		}
+		if (typeof maybePromise === "object" && maybePromise !== null && "then" in maybePromise) {
+			waitForPromise(maybePromise.then((value) => this._resolved = value).catch((error) => this._error = {
+				reason: REASON_PROMISE_REJECTION,
+				original: error
+			}).finally(() => this._isLoading = false));
+			return;
+		}
+		this.#initial = {
+			isLoading: false,
+			error: null,
+			resolved: maybePromise
+		};
+	}
+	get isLoading() {
+		return this._isLoading ?? this.#initial?.isLoading ?? false;
+	}
+	get error() {
+		return this._error ?? this.#initial?.error ?? null;
+	}
+	get resolved() {
+		return this._resolved ?? this.#initial?.resolved;
+	}
+	toJSON() {
+		return {
+			isLoading: this.isLoading,
+			error: this.error,
+			resolved: this.resolved
+		};
+	}
+};
+/**
+* Returns a reactive state for a given value, function, promise, or function that returns a promise.
+*
+* Also caches the result for the given value, so `getPromiseState` will become synchronous if the passed value
+* has already been resolved.
+*
+* Normally when trying to derive async state, you'll first need to invoke a function to get the promise from that function's return value.
+* With `getPromiseState`, a passed function will be invoked for you, so you can skip that step.
+*
+* @example
+* We can use `getPromiseState` to dynamically load and render a component
+*
+* ```gjs
+* import { getPromiseState } from 'reactiveweb/get-promise-state';
+*
+* let state = getPromiseState(() => import('./some-module/component'));
+*
+* <template>
+*   {{#if state.isLoading}}
+*     ... pending ...
+*   {{else if state.error}}
+*     oh no!
+*   {{else if state.resolved}}
+*     <state.resolved />
+*   {{/if}}
+* </template>
+* ```
+*
+* @example
+* `getPromiseState` can also be used in a class without `@cached`, because it maintains its own cache.
+* ```gjs
+* import Component from '@glimmer/component';
+* import { getPromiseState } from 'reactiveweb/get-promise-state';
+*
+* async function readFromSomewhere() { // implementation omitted for brevity
+* }
+*
+* export default class Demo extends Component {
+*   // doesn't matter how many times state is accessed, you get a stable state
+*   get state() {
+*     return getPromiseState(readFromSomewhere);
+*   }
+*
+*   <template>
+*     {{#if this.state.resolved}}
+*        ...
+*     {{/if}}
+*   </template>
+* }
+* ```
+*
+* @example
+* A reactively constructed function will also be used and have its result cached between uses
+*
+* ```gjs
+* import Component from '@glimmer/component';
+* import { getPromiseState } from 'reactiveweb/get-promise-state';
+*
+* async function readFromSomewhere() { // implementation omitted for brevity
+* }
+*
+* export default class Demo extends Component {
+*   // Note: the @cached is important here because we don't want repeat accesses
+*   //       to cause doAsync to be called again unless @id changes
+*   @cached
+*   get promise() {
+*     return this.doAsync(this.args.id);
+*   }
+*
+*   get state() {
+*     return getPromiseState(this.promise);
+*   }
+*
+*   <template>
+*     {{#if this.state.resolved}}
+*        ...
+*     {{/if}}
+*   </template>
+* }
+* ```
+*
+* NOTE: This `getPromiseState` is not a replacement for [WarpDrive](https://docs.warp-drive.io/)'s [getRequestState](https://www.npmjs.com/package/@warp-drive/ember#getrequeststate)
+*       namely, the `getPromiseState` in this library (reactiveweb) does not support futures, cancellation, or anything else specific to warp-drive.
+*
+*
+* --------------
+
+_comparison of pure capability_
+
+| . | reactiveweb | @warpdrive/ember |
+| - | ----------- | ---------------- |
+| use in module state[^module-state] | ✅ | ✅ |
+| use in a getter[^cached-getter] | ✅ | ✅ |
+| usable in template | ✅ | ✅  |
+| immediate has resolved value for resolved promise | ✅  | ✅  |
+| test waiter integration | ✅ | ✅ |
+| allows non-promises (forgiving inputs) | ✅ | ❌ |
+| can be used without build | ✅ | ❌[^warp-drive-no-build] |
+| allows prepopulation of result cache by 3rd party | ❌ | ✅ |
+| discriminated states (helpful for TS) | ❌[^needs-work] | ✅ |
+| align with [allSettled's return value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled#return_value) | ❌[^needs-work] | ✅ |
+
+[^warp-drive-no-build]: the warp-drive team is interested in this work, and wants to make REPLs and CDNs easier as well
+
+
+All in all, they are very similar. The primary use case I had for creating my own is that I wanted dynamic module loading (with import) to be one line (shown in the first example).
+
+reactiveweb's `getPromiseState` is made primarily for my needs in my own projects, and I don't intend to say anything negative about `@warp-drive`s `getPromiseState` -- I actually took a lot of code from it! it's a good tool.
+
+These projects of slightly different goals, so some additional information:
+
+_from the perspective of reactiveweb's_ set of goals:
+
+| . | reactiveweb | @warpdrive/ember |
+| - | ----------- | ---------------- |
+| invokes a passed function automatically | ✅ | ❌ |
+| simple state return[^state-compare] | ⚠️[^needs-work] | ⚠️ [^warp-drive-pending-deprecations] |
+
+[^warp-drive-pending-deprecations]: has pending deprecations, otherwise ✅
+[^needs-work]: This is fixable, and probably with little effort, just needs doing
+
+_from the perspective of @warp-drive/core's set of goals_
+
+| . | reactiveweb | @warpdrive/core |
+| - | ----------- | ---------------- |
+| has a simple API surface | ❌ [^invokes-functions] | ✅ |
+| no dependencies | ❌ [^ember-resources] | ⚠️[^warp-drive-no-dependencies] |
+
+
+[^invokes-functions]: `@warp-drive/core` strives for API simplicity, which means few (if any) overloads on its utilities.
+[^warp-drive-no-dependencies]: Does not directly depend on any dependencies, but requires an integration into reactivity (which is technically true for `reactiveweb` as well)
+
+
+[^module-state]: `getPromiseState(promise);`
+[^cached-getter]: requires a stable reference to a promise. getter itself does not need to be cached.
+[^no-dependencies]: warp-drive requires a macros config that isn't compatible with "non-config" projects (it's mostly how they generate macros to not gracefully have some behavior if you don't set up their required babel config -- which affects REPL environments (this is solveable via pushing the responsibility to configure babel to the REPLer)). Also, the warp-drive team says this is on their radar, and the'll address it eventually / soon.
+[^ember-resources]: reactiveweb (as a whole) does depend on on ember-resources, but ember-resources itself has no dependencies (for real), and is a very tiny use of a helper manager. Additionally, `getPromiseState` does not depend on `ember-resources`.
+[^wd-aliases]: warp-drive provides _many_ aliases for states, as well as support some extended promise behavior which is not built in to the platform (Futures, etc). This is still good for convenience and compatibility.
+[^state-compare]: in reactiveweb: [State](https://reactive.nullvoxpopuli.com/interfaces/get-promise-state.State.html), and then in `@warp-drive/*`: the [`PromiseState`](https://warp-drive.io/api/@warp-drive/ember/type-aliases/PromiseState) is made of 3 sub types: [PendingPromise](https://warp-drive.io/api/@warp-drive/core/reactive/interfaces/PendingPromise), [ResolvedPromise](https://warp-drive.io/api/@warp-drive/core/reactive/interfaces/ResolvedPromise), and [RejectedPromise](https://warp-drive.io/api/@warp-drive/core/reactive/interfaces/RejectedPromise). Over time, these will align slightly with [allSettled's return value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled#return_value).
+*
+*/
+function getPromiseState(fn) {
+	if (typeof fn !== "function" && !isThennable(fn)) return {
+		isLoading: false,
+		error: null,
+		resolved: fn,
+		toJSON() {
+			return {
+				isLoading: false,
+				error: null,
+				resolved: fn
+			};
+		}
+	};
+	const existing = promiseCache.get(fn);
+	if (existing) return existing;
+	const state = new StateImpl(fn, { isLoading: true });
+	promiseCache.set(fn, state);
+	return state;
+}
+function isThennable(x) {
+	if (typeof x !== "object") return false;
+	if (!x) return false;
+	return "then" in x;
+}
+/**
+* This exists because when you guard with typeof x === function normally in TS,
+* you just get `& Function` added to your type, which isn't exactly the narrowing I want.
+*
+* This can result in "Value & Function" has no call signatures....
+* which is kinda ridiculous.
+*/
+function isFunction(x) {
+	return typeof x === "function";
+}
+//#endregion
+//#region ../../node_modules/.pnpm/reactiveweb@1.9.3_@babel+core@7.29.7_supports-color@8.1.1__@ember+test-waiters@4.1.2_su_015d4b8918b492d4ff90f861561ab904/node_modules/reactiveweb/dist/function.js
+function trackedFunction(...args) {
+	if (args.length === 1) return classUsable(...args);
+	if (args.length === 2) return directTrackedFunction(...args);
+	assert("Unknown arity: trackedFunction must be called with 1 or 2 arguments");
+}
+var START = Symbol.for("__reactiveweb_trackedFunction__START__");
+function classUsable(fn) {
+	const state = new State(fn);
+	const destroyable = resource(() => {
+		state[START]();
+		return state;
+	});
+	associateDestroyableChild(destroyable, state);
+	return destroyable;
+}
+function directTrackedFunction(context, fn) {
+	const state = new State(fn);
+	const destroyable = resource(context, () => {
+		state[START]();
+		return state;
+	});
+	associateDestroyableChild(destroyable, state);
+	return destroyable;
+}
+/**
+* State container that represents the asynchrony of a `trackedFunction`
+*/
+var State = class {
+	static {
+		decorateFieldV2(this.prototype, "promise", [tracked]);
+	}
+	#promise = (initializeDeferredDecorator(this, "promise"), void 0);
+	static {
+		decorateFieldV2(this.prototype, "caughtError", [tracked]);
+	}
+	#caughtError = (initializeDeferredDecorator(this, "caughtError"), void 0);
+	/**
+	* ember-async-data doesn't catch errors,
+	* so we can't rely on it to protect us from "leaky errors"
+	* during rendering.
+	*
+	* See also: https://github.com/qunitjs/qunit/issues/1736
+	*/
+	#fn;
+	constructor(fn) {
+		this.#fn = fn;
+	}
+	get #state() {
+		return getPromiseState(this.promise);
+	}
+	get state() {
+		if (this.#state.isLoading) return "PENDING";
+		if (this.#state.resolved !== void 0) return "RESOLVED";
+		if (this.#state.error) return "REJECTED";
+		return "UNSTARTED";
+	}
+	/**
+	* Initially true, and remains true
+	* until the underlying promise resolves or rejects.
+	*/
+	get isPending() {
+		return this.#state.isLoading ?? false;
+	}
+	/**
+	* Alias for `isResolved || isRejected`
+	*/
+	get isFinished() {
+		return this.isResolved || this.isRejected;
+	}
+	/**
+	* Alias for `isFinished`
+	* which is in turn an alias for `isResolved || isRejected`
+	*/
+	get isSettled() {
+		return this.isFinished;
+	}
+	/**
+	* Alias for `isPending`
+	*/
+	get isLoading() {
+		return this.isPending;
+	}
+	/**
+	* When true, the function passed to `trackedFunction` has resolved
+	*/
+	get isResolved() {
+		return this.#state.resolved !== void 0;
+	}
+	/**
+	* Alias for `isRejected`
+	*/
+	get isError() {
+		return this.isRejected;
+	}
+	/**
+	* When true, the function passed to `trackedFunction` has errored
+	*/
+	get isRejected() {
+		return Boolean(this.#state.error ?? this.caughtError ?? false);
+	}
+	/**
+	* this.data may not exist yet.
+	*
+	* Additionally, prior iterations of TrackedAsyncData did
+	* not allow the accessing of data before
+	* .state === 'RESOLVED'  (isResolved).
+	*
+	* From a correctness standpoint, this is perfectly reasonable,
+	* as it forces folks to handle the states involved with async functions.
+	*
+	* The original version of `trackedFunction` did not use TrackedAsyncData,
+	* and did not have these strictnesses upon property access, leaving folks
+	* to be as correct or as fast/prototype-y as they wished.
+	*
+	* For now, `trackedFunction` will retain that flexibility.
+	*/
+	get value() {
+		return this.#state.resolved ?? null;
+	}
+	/**
+	* When the function passed to `trackedFunction` throws an error,
+	* that error will be the value returned by this property
+	*/
+	get error() {
+		if (this.state === "UNSTARTED" && this.caughtError) return this.caughtError;
+		if (this.state !== "REJECTED") return null;
+		if (this.caughtError) return this.caughtError;
+		return this.#state.error ?? null;
+	}
+	async [START]() {
+		try {
+			await waitForPromise(this._dangerousRetry({ isRetrying: false }));
+		} catch (e) {
+			if (isDestroyed(this) || isDestroying(this)) return;
+			this.caughtError = e;
+		}
+	}
+	/**
+	* Will re-invoke the function passed to `trackedFunction`
+	* this will also re-set some properties on the `State` instance.
+	* This is the same `State` instance as before, as the `State` instance
+	* is tied to the `fn` passed to `trackedFunction`
+	*
+	* `error` or `resolvedValue` will remain as they were previously
+	* until this promise resolves, and then they'll be updated to the new values.
+	*/
+	retry = async () => {
+		try {
+			await waitForPromise(this._dangerousRetry({ isRetrying: true }));
+		} catch (e) {
+			if (isDestroyed(this) || isDestroying(this)) return;
+			this.caughtError = e;
+		}
+	};
+	_dangerousRetry = async ({ isRetrying }) => {
+		if (isDestroyed(this) || isDestroying(this)) return;
+		this.promise = this.#fn({ isRetrying });
+		await Promise.resolve();
+		if (isDestroyed(this) || isDestroying(this)) return;
+		/**
+		* Before we await to start a new request, let's clear our error.
+		* This is detached from the tracking frame (via the above await),
+		* se the UI can update accordingly, without causing us to refetch
+		*/
+		this.caughtError = null;
+		/**
+		* This looks weird, but we need to cerate the state cache if it doesn't exist already as well as prevent JIT from removing this l ine.
+		*/
+		await this.#state.resolved;
+		return this.promise;
+	};
+};
+//#endregion
+//#region app/components/realm-dropdown.gts
+var focusAfterDropdownOpens = modifier((element) => {
+	let timer = later(() => element.focus(), 0);
+	return () => cancel(timer);
+});
+var RealmDropdown = class extends Component {
+	static {
+		setComponentTemplate(templateFactory({
+			"id": "PZf4rHWz",
+			"block": "[[[8,[32,0],[[24,\"data-test-load-realms-loaded\",\"true\"],[24,\"data-scopedcss-ad7b4c7a09-0889af90f9\",\"\"]],[[\"@contentClass\",\"@matchTriggerWidth\",\"@onClose\"],[[30,1],true,[30,0,[\"clearSearch\"]]]],[[\"trigger\",\"content\"],[[[[1,\"\\n    \"],[8,[32,1],[[24,0,\"realm-dropdown-trigger\"],[24,\"data-realm-dropdown-trigger\",\"\"],[24,\"data-test-realm-dropdown-trigger\",\"\"],[16,\"data-test-realm-name\",[30,0,[\"selectedRealm\",\"name\"]]],[17,3],[24,\"data-scopedcss-ad7b4c7a09-0889af90f9\",\"\"],[4,[30,2],null,null]],[[\"@kind\",\"@size\",\"@disabled\"],[\"secondary-light\",\"small\",[30,4]]],[[\"default\"],[[[[1,\"\\n\"],[41,[30,0,[\"selectedRealm\"]],[[[1,\"        \"],[8,[32,2],[[24,0,\"selected-realm\"],[24,\"data-scopedcss-ad7b4c7a09-0889af90f9\",\"\"]],[[\"@realmURL\",\"@label\"],[[30,0,[\"selectedRealm\",\"path\"]],[30,0,[\"selectedRealm\",\"name\"]]]],[[\"default\"],[[[[1,\"\\n          \"],[8,[32,3],[[24,0,\"icon\"],[24,\"data-scopedcss-ad7b4c7a09-0889af90f9\",\"\"]],[[\"@realmInfo\"],[[30,0,[\"selectedRealm\"]]]],null],[1,\"\\n          \"],[10,0],[14,0,\"selected-item\"],[14,\"data-test-selected-realm\",\"\"],[14,\"data-scopedcss-ad7b4c7a09-0889af90f9\",\"\"],[12],[1,\"\\n            \"],[1,[30,0,[\"selectedItemText\"]]],[1,\"\\n          \"],[13],[1,\"\\n        \"]],[]]]]],[1,\"\\n\"],[41,[28,[32,4],[[30,5],[28,[32,5],[[30,0,[\"selectedRealm\",\"canWrite\"]]],null]],null],[[[1,\"          \"],[10,1],[14,0,\"read-only-tag\"],[14,\"data-test-realm-read-only\",\"\"],[14,\"data-scopedcss-ad7b4c7a09-0889af90f9\",\"\"],[12],[1,\"READ ONLY\"],[13],[1,\"\\n\"]],[]],null]],[]],[[[1,\"        Select a workspace\\n\"]],[]]],[1,\"      \"],[8,[32,6],[[24,0,\"arrow-icon\"],[24,\"width\",\"13px\"],[24,\"height\",\"13px\"],[24,\"data-scopedcss-ad7b4c7a09-0889af90f9\",\"\"]],null,null],[1,\"\\n    \"]],[]]]]],[1,\"\\n  \"]],[2]],[[[1,\"\\n\"],[41,[30,7],[[[1,\"      \"],[10,0],[14,0,\"realm-dropdown-search\"],[14,\"data-scopedcss-ad7b4c7a09-0889af90f9\",\"\"],[12],[1,\"\\n        \"],[8,[32,7],[[24,0,\"realm-dropdown-search-input\"],[24,\"aria-label\",\"Search workspaces\"],[24,\"data-test-realm-dropdown-search\",\"\"],[24,\"data-scopedcss-ad7b4c7a09-0889af90f9\",\"\"],[4,[32,8],null,null],[4,[32,9],[\"keydown\",[28,[32,10],[[30,0,[\"selectFirstMatchOnEnter\"]],[30,6,[\"close\"]]],null]],null]],[[\"@type\",\"@value\",\"@onInput\",\"@placeholder\",\"@autocomplete\"],[\"search\",[30,0,[\"searchTerm\"]],[30,0,[\"updateSearchTerm\"]],\"Search workspaces\",\"off\"]],null],[1,\"\\n      \"],[13],[1,\"\\n\"]],[]],null],[41,[30,0,[\"hasNoSearchMatches\"]],[[[1,\"      \"],[10,2],[14,0,\"realm-dropdown-no-results\"],[14,\"data-test-realm-dropdown-no-results\",\"\"],[14,\"data-scopedcss-ad7b4c7a09-0889af90f9\",\"\"],[12],[1,\"\\n        No workspaces match “\"],[1,[30,0,[\"searchTerm\"]]],[1,\"”\\n      \"],[13],[1,\"\\n\"]],[]],[[[1,\"      \"],[8,[32,11],[[24,0,\"realm-dropdown-menu\"],[24,\"data-test-realm-dropdown-menu\",\"\"],[24,\"data-scopedcss-ad7b4c7a09-0889af90f9\",\"\"]],[[\"@items\",\"@closeMenu\"],[[30,0,[\"menuItems\"]],[30,6,[\"close\"]]]],null],[1,\"\\n\"]],[]]],[1,\"  \"]],[6]]]]],[1,\"\\n\"]],[\"@contentClass\",\"bindings\",\"&attrs\",\"@disabled\",\"@displayReadOnlyTag\",\"dd\",\"@searchable\"],[\"if\"]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/app/components/realm-dropdown.gts",
+			"scope": () => [
+				BoxelDropdown,
+				ButtonComponent,
+				RealmURLTooltip,
+				RealmIcon,
+				and,
+				not,
+				IconComponent,
+				BoxelInput,
+				focusAfterDropdownOpens,
+				on,
+				fn,
+				Menu
+			],
+			"isStrictMode": true
+		}), this);
+	}
+	defaultRealmIcon = "/default-realm-icon.png";
+	static {
+		decorateFieldV2(this.prototype, "realm", [service]);
+	}
+	#realm = (initializeDeferredDecorator(this, "realm"), void 0);
+	static {
+		decorateFieldV2(this.prototype, "searchTerm", [tracked$1], function() {
+			return "";
+		});
+	}
+	#searchTerm = (initializeDeferredDecorator(this, "searchTerm"), void 0);
+	updateSearchTerm(term) {
+		this.searchTerm = term;
+	}
+	static {
+		decorateMethodV2(this.prototype, "updateSearchTerm", [action]);
+	}
+	clearSearch() {
+		this.searchTerm = "";
+	}
+	static {
+		decorateMethodV2(this.prototype, "clearSearch", [action]);
+	}
+	selectFirstMatchOnEnter(close, event) {
+		if (event.key !== "Enter") return;
+		let [firstMatch] = this.filteredRealms;
+		if (firstMatch) {
+			event.preventDefault();
+			this.args.onSelect(firstMatch);
+			close();
+		}
+	}
+	static {
+		decorateMethodV2(this.prototype, "selectFirstMatchOnEnter", [action]);
+	}
+	get selectedItemText() {
+		if (!this.selectedRealm) return "";
+		if (this.args.selectedRealmPrefix) return `${this.args.selectedRealmPrefix} ${this.selectedRealm.name}`;
+		return this.selectedRealm.name;
+	}
+	allRealmsInfo = trackedFunction(this, async () => {
+		if (this.args.selectedRealmURL) await this.realm.ensureRealmMeta(this.args.selectedRealmURL);
+		return this.realm.allRealmsInfo;
+	});
+	get realms() {
+		if (!this.allRealmsInfo.value) return [];
+		let items = [];
+		for (let [url, realmMeta] of Object.entries(this.allRealmsInfo.value)) {
+			if (!realmMeta.canWrite && !this.args.displayReadOnlyTag) continue;
+			items = [{
+				path: url,
+				...realmMeta.info,
+				iconURL: realmMeta.info.iconURL ?? this.defaultRealmIcon,
+				canWrite: realmMeta.canWrite
+			}, ...items];
+		}
+		items.sort((a, b) => a.name.localeCompare(b.name));
+		return items;
+	}
+	get filteredRealms() {
+		let term = this.searchTerm.trim().toLowerCase();
+		if (!this.args.searchable || !term) return this.realms;
+		return this.realms.filter((realm) => realm.name.toLowerCase().includes(term));
+	}
+	get hasNoSearchMatches() {
+		return Boolean(this.args.searchable && this.searchTerm.trim()) && this.filteredRealms.length === 0;
+	}
+	get menuItems() {
+		return this.filteredRealms.map((realm) => new MenuItem({
+			label: realm.name,
+			action: () => this.args.onSelect(realm),
+			checked: realm.path === this.selectedRealm?.path,
+			iconURL: realm.iconURL ?? void 0,
+			subtext: !realm.canWrite ? "READ ONLY" : void 0
+		}));
+	}
+	get selectedRealm() {
+		if (this.realms.length === 0) return;
+		let selectedRealm;
+		if (this.args.selectedRealmURL) selectedRealm = this.realms.find((realm) => realm.path === new RealmPaths(ri(this.args.selectedRealmURL)).url);
+		if (selectedRealm) return selectedRealm;
+		let defaultWritableRealm = this.realm.defaultWritableRealm;
+		if (!defaultWritableRealm) return;
+		return this.realms.find((realm) => realm.path === defaultWritableRealm.path);
+	}
+};
+//#endregion
+export { trackedFunction as n, RealmDropdown as t };

package/bundled-test-harness/assets/realm-et890flh.js

@@ -0,0 +1,2 @@
+import { t as RealmField } from "./realm-82Z5RUM_.js";
+export { RealmField as default };

package/bundled-test-harness/assets/realm-field-test-pBK_x-Xw.js

@@ -0,0 +1,100 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { r as initializeDeferredDecorator, t as decorateFieldV2 } from "./runtime--fcdnjmJ-BoCBNIsz.js";
+import "./runtime-common-ClpqhbwG.js";
+import { b as PermissionsContextName, t as CardContextName } from "./constants-CqKWhRfY.js";
+import { t as getOwner } from "./owner-BT6cj890.js";
+import { t as Service } from "./service-LFpJ8EEP.js";
+import { d as click, o as waitFor } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { M as setupCardLogs, lt as setupRenderingTest, nt as provide } from "./mock-matrix-DPQ0j2MD.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+import { A as field, a as CardDef, w as contains } from "./card-api-Dzje0smT.js";
+import { t as string_default } from "./string-BHZZwNlZ.js";
+import { t as RealmField } from "./realm-82Z5RUM_.js";
+import { t as renderCard } from "./render-component-B15Z0e2v.js";
+//#region tests/integration/components/realm-field-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var StubRealmService = class extends Service {
+	allRealmsInfo = {
+		"https://writable.example/": {
+			info: {
+				name: "Writable Realm",
+				iconURL: "/test-fixtures/realm-images/letter-a.png"
+			},
+			canWrite: true
+		},
+		"https://readonly.example/": {
+			info: {
+				name: "Read-only Realm",
+				iconURL: "/test-fixtures/realm-images/letter-c.png"
+			},
+			canWrite: false
+		}
+	};
+	get defaultWritableRealm() {
+		return {
+			path: "https://writable.example/",
+			info: this.allRealmsInfo["https://writable.example/"].info
+		};
+	}
+	get defaultReadableRealm() {
+		return this.defaultWritableRealm;
+	}
+	async ensureRealmMeta() {}
+	token = (_url) => {};
+};
+(0, import_qunit.module)("Integration | components | realm field", function(hooks) {
+	setupRenderingTest(hooks);
+	hooks.beforeEach(function() {
+		getOwner(this).register("service:realm", StubRealmService);
+	});
+	let loader;
+	let toolContext;
+	setupCardLogs(hooks, async () => {
+		return await getService("loader-service").loader.import("@cardstack/base/card-api");
+	});
+	hooks.beforeEach(function() {
+		loader = getService("loader-service").loader;
+		toolContext = getService("tool-service").toolContext;
+		const store = getService("store");
+		provide(CardContextName, {
+			toolContext,
+			getCard: () => void 0,
+			getCards: () => [],
+			getCardCollection: () => void 0,
+			store
+		});
+		provide(PermissionsContextName, { canWrite: true });
+	});
+	(0, import_qunit.test)("renders writable realms and updates selection", async function(assert) {
+		class RealmPickerCard extends CardDef {
+			static displayName = "Realm Picker";
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "targetRealm", [field], function() {
+					return contains(RealmField);
+				});
+			}
+			#targetRealm = (initializeDeferredDecorator(this, "targetRealm"), void 0);
+		}
+		let card = new RealmPickerCard({
+			cardTitle: "Realm Picker Example",
+			targetRealm: ""
+		});
+		await renderCard(loader, card, "edit");
+		await waitFor("[data-test-field=\"targetRealm\"] .trigger");
+		await click("[data-test-field=\"targetRealm\"] .trigger");
+		await waitFor("[data-test-boxel-menu-item-text=\"Writable Realm\"]");
+		assert.dom("[data-test-boxel-menu-item-text=\"Writable Realm\"]").exists("writable realm is listed");
+		assert.dom("[data-test-boxel-menu-item-text=\"Read-only Realm\"]").doesNotExist("read-only realm is not offered");
+		await click("[data-test-boxel-menu-item-text=\"Writable Realm\"]");
+		assert.dom("[data-test-field=\"targetRealm\"] button .label").hasText("Writable Realm");
+		assert.strictEqual(card.targetRealm, "https://writable.example/");
+	});
+});
+//#endregion