@zylem/ui 0.2.0 → 0.8.8

package/src/components/MenuButton/MenuButton.tsx

@@ -0,0 +1,153 @@
+import { Popover as KPopover } from '@kobalte/core';
+import { Show, createSignal, type JSX } from 'solid-js';
+import { createDismissGuard, useLayer } from '../../layers';
+import { Tooltip } from '../Tooltip/Tooltip';
+
+export interface MenuButtonProps {
+  /** Accessible name, and the tooltip text unless `tooltip` overrides it. */
+  label: string;
+  /** Button face content, usually an icon. */
+  children: JSX.Element;
+  /** Panel content: a menu, a picker, anything. Rendered only while open. */
+  menu: (close: () => void) => JSX.Element;
+  /**
+   * Primary action for the face. Given one, the button splits: the face fires
+   * this and the chevron opens the menu. Without one, the whole button opens
+   * the menu and the chevron is only there to say so.
+   *
+   * Optional props here accept an explicit `undefined` so a caller compiled with
+   * `exactOptionalPropertyTypes` can decide the split at the call site.
+   */
+  onAction?: (() => void) | undefined;
+  /** Renders the face in its selected state. */
+  selected?: boolean | undefined;
+  disabled?: boolean | undefined;
+  /** Tooltip text; defaults to `label`. Pass `null` for no tooltip. */
+  tooltip?: string | null | undefined;
+  placement?:
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'bottom'
+    | 'top-start'
+    | 'top-end'
+    | 'top'
+    | undefined;
+  /** Controlled open state. Omit to let the button own it. */
+  open?: boolean | undefined;
+  onOpenChange?: ((open: boolean) => void) | undefined;
+  class?: string | undefined;
+}
+
+/**
+ * Shown in both modes, because a chevron means "this has a menu" and that is
+ * true whether or not the face carries its own action.
+ */
+const CHEVRON = '▾';
+
+/**
+ * A toolbar button that owns a menu, optionally split.
+ *
+ * Split mode exists because choosing and doing are separate jobs: the face
+ * repeats the last choice and the chevron is there for picking a different one.
+ * Placing ten of the same thing is then one trip through the menu and ten
+ * clicks, rather than ten trips.
+ *
+ * The panel is layered at the `menu` tier and portaled out of the button's own
+ * subtree, so a toolbar that clips its overflow or sits in a lower stacking
+ * context cannot hide it.
+ */
+export function MenuButton(props: MenuButtonProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = createSignal(false);
+  const layer = useLayer('menu');
+  const dismiss = createDismissGuard();
+
+  const isOpen = () => props.open ?? uncontrolledOpen();
+  const setOpen = (open: boolean) => {
+    setUncontrolledOpen(open);
+    props.onOpenChange?.(open);
+  };
+
+  const isSplit = () => props.onAction !== undefined;
+  const tooltipText = () =>
+    props.tooltip === null ? null : props.tooltip ?? props.label;
+
+  /** Wrap in a tooltip only when there is text for one. */
+  const described = (content: JSX.Element) => (
+    <Show when={tooltipText()} fallback={content} keyed>
+      {(text) => <Tooltip content={text}>{content}</Tooltip>}
+    </Show>
+  );
+
+  return (
+    <div
+      class={props.class ? `zylem-menu-button ${props.class}` : 'zylem-menu-button'}
+      data-split={isSplit() ? '' : undefined}
+    >
+      <KPopover.Root
+        open={isOpen()}
+        onOpenChange={setOpen}
+        placement={props.placement ?? 'bottom-start'}
+      >
+        <Show
+          when={isSplit()}
+          fallback={described(
+            <KPopover.Trigger
+              ref={layer.anchorRef}
+              class="zylem-toolbar-btn zylem-menu-button__face"
+              aria-label={props.label}
+              disabled={props.disabled}
+              data-selected={props.selected ? '' : undefined}
+            >
+              {props.children}
+              {/*
+               * Signage only: the button around it already opens the menu, so
+               * this must not read as a second control.
+               */}
+              <span
+                class="zylem-menu-button__chevron zylem-menu-button__chevron--static"
+                aria-hidden="true"
+              >
+                {CHEVRON}
+              </span>
+            </KPopover.Trigger>,
+          )}
+        >
+          {described(
+            <button
+              type="button"
+              ref={layer.anchorRef}
+              class="zylem-toolbar-btn zylem-menu-button__face"
+              aria-label={props.label}
+              disabled={props.disabled}
+              data-selected={props.selected ? '' : undefined}
+              onClick={() => props.onAction?.()}
+            >
+              {props.children}
+            </button>,
+          )}
+          <KPopover.Trigger
+            class="zylem-menu-button__chevron"
+            aria-label={`${props.label} options`}
+            disabled={props.disabled}
+          >
+            <span aria-hidden="true">{CHEVRON}</span>
+          </KPopover.Trigger>
+        </Show>
+
+        <Show when={layer.mount()} keyed>
+          {(mount) => (
+            <KPopover.Portal mount={mount}>
+              <KPopover.Content
+                ref={dismiss.ref}
+                class="zylem-menu-button__panel"
+                onInteractOutside={dismiss.onInteractOutside}
+              >
+                {props.menu(() => setOpen(false))}
+              </KPopover.Content>
+            </KPopover.Portal>
+          )}
+        </Show>
+      </KPopover.Root>
+    </div>
+  );
+}

package/src/components/Property/Property.tsx

@@ -25,17 +25,19 @@ export function PropertyList(props: PropertyListProps) {
 
 export interface PropertyRowProps {
   label: string;
+  // Optional props accept an explicit `undefined` so callers compiled with
+  // `exactOptionalPropertyTypes` can forward their own optional props directly.
   /** The value to display. Can be a string, number, or JSX element. */
-  value?: string | number | JSX.Element;
+  value?: string | number | JSX.Element | undefined;
   /** If true, treat string values as paths and truncate long ones. */
-  isPath?: boolean;
+  isPath?: boolean | undefined;
   /** Maximum path segments to show (default: 3). */
-  maxPathSegments?: number;
+  maxPathSegments?: number | undefined;
   /** Called with the full value when a truncated path is clicked. */
-  onPathClick?: (fullValue: string) => void;
-  valueClass?: string;
+  onPathClick?: ((fullValue: string) => void) | undefined;
+  valueClass?: string | undefined;
   /** Children can be used instead of value for complex content. */
-  children?: JSX.Element;
+  children?: JSX.Element | undefined;
 }
 
 function truncatePath(

package/src/components/SearchInput/SearchInput.tsx

@@ -8,6 +8,8 @@ export interface SearchInputProps {
   class?: string;
   'aria-label'?: string;
   onKeyDown?: JSX.EventHandlerUnion<HTMLInputElement, KeyboardEvent>;
+  /** Handle on the input itself, for callers that need to focus it. */
+  ref?: (element: HTMLInputElement) => void;
 }
 
 /**
@@ -19,6 +21,7 @@ export function SearchInput(props: SearchInputProps) {
       <Search class="zylem-search-icon" />
       <input
         type="search"
+        ref={props.ref}
         class="zylem-field zylem-search-input"
         value={props.value ?? ''}
         placeholder={props.placeholder ?? 'Search...'}

package/src/components/Select/Select.css.ts

@@ -31,7 +31,7 @@ globalStyle('.zylem-select-trigger[data-expanded] .zylem-select-icon', {
 });
 
 globalStyle('.zylem-select-content', {
-  zIndex: 10000,
+  zIndex: vars.layers.menu,
   borderRadius: vars.radii.control,
   border: '1px solid rgba(97, 166, 232, 0.45)',
   background: vars.material.glassPanelDark,

package/src/components/Select/Select.tsx

@@ -1,5 +1,6 @@
 import { Select as KSelect } from '@kobalte/core';
 import { Show } from 'solid-js';
+import { createDismissGuard, useLayer } from '../../layers';
 
 export interface SelectOption {
   value: string;
@@ -22,6 +23,8 @@ export interface SelectProps {
  * HyperGlass select: inset glass trigger opening a floating glass sheet.
  */
 export function Select(props: SelectProps) {
+  const layer = useLayer('menu');
+  const dismiss = createDismissGuard();
   const selected = () =>
     props.options.find((option) => option.value === props.value) ?? null;
 
@@ -50,6 +53,7 @@ export function Select(props: SelectProps) {
         <KSelect.Label class="zylem-field-label">{props.label}</KSelect.Label>
       </Show>
       <KSelect.Trigger
+        ref={layer.anchorRef}
         class="zylem-field zylem-select-trigger"
         aria-label={props.label}
       >
@@ -58,11 +62,19 @@ export function Select(props: SelectProps) {
         </KSelect.Value>
         <KSelect.Icon class="zylem-select-icon">▼</KSelect.Icon>
       </KSelect.Trigger>
-      <KSelect.Portal>
-        <KSelect.Content class="zylem-select-content">
-          <KSelect.Listbox class="zylem-select-listbox zylem-scroll" />
-        </KSelect.Content>
-      </KSelect.Portal>
+      <Show when={layer.mount()} keyed>
+        {(mount) => (
+          <KSelect.Portal mount={mount}>
+            <KSelect.Content
+              ref={dismiss.ref}
+              class="zylem-select-content"
+              onInteractOutside={dismiss.onInteractOutside}
+            >
+              <KSelect.Listbox class="zylem-select-listbox zylem-scroll" />
+            </KSelect.Content>
+          </KSelect.Portal>
+        )}
+      </Show>
     </KSelect.Root>
   );
 }

package/src/components/ToolbarButton/ToolbarButton.tsx

@@ -1,5 +1,6 @@
 import { Button as KButton, Tooltip as KTooltip } from '@kobalte/core';
-import type { JSX } from 'solid-js';
+import { Show, type JSX } from 'solid-js';
+import { useLayer } from '../../layers';
 
 export interface ToolbarButtonProps {
   label: string;
@@ -13,11 +14,16 @@ export interface ToolbarButtonProps {
 /**
  * HyperGlass toolbar button: square glass icon button with a tooltip.
  * Selected state renders as a live-green jewel.
+ *
+ * The tooltip portals into the layer container for its own tree, so it stays
+ * styled when the toolbar lives inside a web component's shadow root.
  */
 export function ToolbarButton(props: ToolbarButtonProps) {
+  const layer = useLayer('tooltip');
+
   return (
     <KTooltip.Root openDelay={400}>
-      <KTooltip.Trigger as="span">
+      <KTooltip.Trigger as="span" ref={layer.anchorRef}>
         <KButton.Root
           aria-label={props.label}
           onClick={props.onClick}
@@ -32,11 +38,15 @@ export function ToolbarButton(props: ToolbarButtonProps) {
           {props.children}
         </KButton.Root>
       </KTooltip.Trigger>
-      <KTooltip.Portal>
-        <KTooltip.Content class="zylem-tooltip">
-          {props.label}
-        </KTooltip.Content>
-      </KTooltip.Portal>
+      <Show when={layer.mount()} keyed>
+        {(mount) => (
+          <KTooltip.Portal mount={mount}>
+            <KTooltip.Content class="zylem-tooltip">
+              {props.label}
+            </KTooltip.Content>
+          </KTooltip.Portal>
+        )}
+      </Show>
     </KTooltip.Root>
   );
 }

package/src/components/Tooltip/Tooltip.css.ts

@@ -8,7 +8,7 @@ const enter = keyframes({
 
 globalStyle('.zylem-tooltip', {
   position: 'relative',
-  zIndex: 10050,
+  zIndex: vars.layers.tooltip,
   maxWidth: '260px',
   padding: `${vars.spacing.xs} ${vars.spacing.sm}`,
   borderRadius: vars.radii.control,

package/src/components/Tooltip/Tooltip.tsx

@@ -1,5 +1,6 @@
 import { Tooltip as KTooltip } from '@kobalte/core';
-import type { JSX } from 'solid-js';
+import { Show, type JSX } from 'solid-js';
+import { useLayer } from '../../layers';
 
 export interface TooltipProps {
   /** Tooltip body. */
@@ -13,21 +14,32 @@ export interface TooltipProps {
 /**
  * HyperGlass tooltip: small floating glass sheet, portaled above page chrome
  * so it is not trapped by local stacking contexts (grids, panels, etc.).
+ *
+ * The portal target is resolved from the trigger rather than assumed to be
+ * `document.body`, so a tooltip inside a web component's shadow root still
+ * picks up the styles injected there.
  */
 export function Tooltip(props: TooltipProps) {
+  const layer = useLayer('tooltip');
+
   return (
     <KTooltip.Root placement={props.placement} openDelay={props.openDelay ?? 400}>
       <KTooltip.Trigger
         as="span"
+        ref={layer.anchorRef}
         style={{ display: 'flex', width: '100%', height: '100%', 'min-width': 0 }}
       >
         {props.children}
       </KTooltip.Trigger>
-      <KTooltip.Portal>
-        <KTooltip.Content class="zylem-tooltip">
-          {props.content}
-        </KTooltip.Content>
-      </KTooltip.Portal>
+      <Show when={layer.mount()}>
+        {(mount) => (
+          <KTooltip.Portal mount={mount()}>
+            <KTooltip.Content class="zylem-tooltip">
+              {props.content}
+            </KTooltip.Content>
+          </KTooltip.Portal>
+        )}
+      </Show>
     </KTooltip.Root>
   );
 }

package/src/components/WindowControls/WindowControls.tsx

@@ -4,14 +4,16 @@ import PanelBottomOpen from 'lucide-solid/icons/panel-bottom-open';
 import X from 'lucide-solid/icons/x';
 
 export interface WindowControlsProps {
-  onClose?: () => void;
-  onCollapse?: () => void;
+  // Optional props accept an explicit `undefined` so callers compiled with
+  // `exactOptionalPropertyTypes` can forward their own optional props directly.
+  onClose?: (() => void) | undefined;
+  onCollapse?: (() => void) | undefined;
   /** Show the "expand" collapse icon when the panel is collapsed. */
-  collapsed?: boolean;
+  collapsed?: boolean | undefined;
   /** Accessible label/title for the close button (default "Close panel"). */
-  closeLabel?: string;
+  closeLabel?: string | undefined;
   /** Forwarded as data-testid on the close button. */
-  closeTestId?: string;
+  closeTestId?: string | undefined;
 }
 
 /**

package/src/components/index.ts

@@ -5,6 +5,24 @@
  * vanilla-extract recipes/styles driven by the Zylem token system.
  */
 
+// Layering. Overlays here use it by default; consumers need it only to scope a
+// subtree (a modal) or to layer their own chrome on the same ladder.
+export {
+  LayerProvider,
+  LayerScope,
+  useLayer,
+  resolveLayerRoot,
+  ensureLayerContainer,
+  createDismissGuard,
+  LAYER_PORTAL_CLASS,
+  type DismissalEvent,
+  type DismissGuard,
+  type LayerProviderProps,
+  type LayerScopeProps,
+  type LayerTier,
+  type ResolvedLayer,
+} from '../layers';
+
 // Primitives
 export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from './Button/Button';
 export { ToolbarButton, type ToolbarButtonProps } from './ToolbarButton/ToolbarButton';
@@ -64,6 +82,15 @@ export {
   type SidebarItemProps,
 } from './Sidebar/Sidebar';
 export { Card, type CardProps } from './Card/Card';
+export { MenuButton, type MenuButtonProps } from './MenuButton/MenuButton';
+export { ItemPicker, type ItemPickerProps } from './ItemPicker/ItemPicker';
+export {
+  filterItems,
+  groupItems,
+  UNGROUPED_LABEL,
+  type PickerItem,
+  type PickerGroup,
+} from './ItemPicker/filter-items';
 export { SearchInput, type SearchInputProps } from './SearchInput/SearchInput';
 export { EmptyState, type EmptyStateProps } from './EmptyState/EmptyState';
 export { ScrollArea, type ScrollAreaProps } from './ScrollArea/ScrollArea';

package/src/global/detached-panel.css.ts

@@ -74,7 +74,10 @@ globalStyle('.accordion-drag-ghost', {
   backdropFilter: `blur(${vars.effects.blurSm})`,
   boxShadow: `0 8px 24px rgba(0, 0, 0, 0.5), ${vars.effects.glowDanger}`,
   position: 'fixed',
-  zIndex: 9999,
+  // Top of the panel tier: the ghost follows the cursor over every panel,
+  // including the one it was torn from, but is still page furniture rather than
+  // an overlay, so it stays under modals and menus.
+  zIndex: `calc(${vars.layers.panel} + 900)`,
   pointerEvents: 'none',
 });
 

package/src/layers/LayerContext.tsx

@@ -0,0 +1,132 @@
+import {
+	createContext,
+	createMemo,
+	createSignal,
+	onMount,
+	useContext,
+	type Accessor,
+	type JSX,
+} from 'solid-js';
+import { ensureLayerContainer, LAYER_PORTAL_CLASS } from './resolve-mount';
+import { layerTierVars, type LayerTier } from './tiers';
+
+export type { LayerTier };
+
+interface LayerContextValue {
+	container: Accessor<HTMLElement | undefined>;
+}
+
+const LayerCtx = createContext<LayerContextValue>();
+
+export interface LayerProviderProps {
+	children: JSX.Element;
+}
+
+/**
+ * Root of the layer system: resolves the tree the app lives in — shadow root or
+ * document — and owns the container overlays portal into.
+ *
+ * Optional. `useLayer` resolves a container by itself when no provider is
+ * mounted, so a page with one `Tooltip` needs no setup. It earns its keep when an
+ * app spans several trees, such as two web components on one page, by pinning
+ * each subtree to the container in its own tree.
+ */
+export function LayerProvider(props: LayerProviderProps) {
+	const [container, setContainer] = createSignal<HTMLElement>();
+	let markerRef: HTMLSpanElement | undefined;
+
+	// Deferred to mount so `getRootNode()` can see an enclosing shadow root.
+	onMount(() => setContainer(ensureLayerContainer(markerRef)));
+
+	return (
+		<LayerCtx.Provider value={{ container }}>
+			<span ref={markerRef} style={{ display: 'none' }} aria-hidden="true" />
+			{props.children}
+		</LayerCtx.Provider>
+	);
+}
+
+export interface LayerScopeProps {
+  children: JSX.Element;
+  class?: string | undefined;
+  style?: JSX.CSSProperties | undefined;
+}
+
+/**
+ * A subtree that layers independently of the rest of the page.
+ *
+ * Two things make that work: the scope is a stacking context, so its
+ * descendants' `z-index` values are only compared with each other and none of
+ * them can paint above anything outside; and the scope owns the portal container
+ * its descendants mount into, so overlays opened inside it stay inside it.
+ *
+ * A dialog wraps its content in one, so a tooltip opened within the dialog floats
+ * over the dialog body without also floating over a menu belonging to the page.
+ */
+export function LayerScope(props: LayerScopeProps) {
+	const [container, setContainer] = createSignal<HTMLElement>();
+
+	return (
+		<div
+			class={props.class ? `zylem-layer-scope ${props.class}` : 'zylem-layer-scope'}
+			style={props.style}
+		>
+			<LayerCtx.Provider value={{ container }}>{props.children}</LayerCtx.Provider>
+			<div class={LAYER_PORTAL_CLASS} ref={setContainer} />
+		</div>
+	);
+}
+
+export interface ResolvedLayer {
+	/** Where to portal. `undefined` until mounted, so callers gate on it. */
+	mount: Accessor<HTMLElement | undefined>;
+	/** Value for the overlay's `z-index`. */
+	zIndex: Accessor<string>;
+	/**
+	 * Attach to any element inside the component. Lets the tree be resolved
+	 * without a `LayerProvider`, which is what keeps overlays styled inside a
+	 * shadow root. Ignored when a provider is present.
+	 */
+	anchorRef: (element: Element) => void;
+}
+
+/**
+ * Resolve a tier to a portal target and a `z-index`.
+ *
+ * @param rank Offset within the tier, for ordering peers — raising a clicked
+ * window above its siblings, say. Bands are 1000 apart, so ranks below that stay
+ * inside their tier. The offset means the same thing inside a `LayerScope` as
+ * out, so a panel can be lifted above a scope's tooltips while staying under its
+ * menus.
+ */
+export function useLayer(
+	tier: LayerTier,
+	rank: Accessor<number> | number = 0,
+): ResolvedLayer {
+	const context = useContext(LayerCtx);
+	const [fallback, setFallback] = createSignal<HTMLElement>();
+	let anchor: Element | undefined;
+
+	if (!context) {
+		// Runs after the ref below has been assigned and the element is in the
+		// document, which `getRootNode()` needs. With no anchor attached this
+		// still resolves, just to the document body.
+		onMount(() => setFallback(ensureLayerContainer(anchor)));
+	}
+
+	const zIndex = createMemo(() => {
+		const offset = typeof rank === 'function' ? rank() : rank;
+		const token = layerTierVars[tier];
+		// Left as a `calc` over the custom property rather than resolved here, so
+		// the cascade stays in charge of the tier's actual value.
+		return offset ? `calc(${token} + ${offset})` : token;
+	});
+
+	return {
+		mount: context ? context.container : fallback,
+		zIndex,
+		anchorRef: (element: Element) => {
+			anchor = element;
+		},
+	};
+}

package/src/layers/dismiss-guard.ts

@@ -0,0 +1,81 @@
+/**
+ * Keeps a dismissable overlay open when the interaction that "left" it never did.
+ *
+ * Kobalte decides an interaction is outside a layer by reading `event.target` in a
+ * capture-phase listener on `document`. Inside a shadow root that target has been
+ * retargeted to the host element, so the check asks whether the panel contains the
+ * whole web component — which it never does. Every pointerdown in the tree then
+ * reads as an outside click and the overlay closes on pointerdown, before the
+ * click can reach whatever was pressed. The same listener serves `focusin`, so
+ * focusing a field inside the panel closes it too.
+ *
+ * The original event survives on the dismissal event's `detail`, and its
+ * `composedPath()` still crosses the shadow boundary, so it can name the element
+ * actually pressed. Preventing the event cancels only the dismissal — a genuine
+ * outside interaction is left alone and still closes the overlay.
+ */
+
+/**
+ * The shape of Kobalte's interact-outside events.
+ *
+ * Declared structurally rather than imported: the type is not re-exported from
+ * `@kobalte/core`'s entry point, and reaching into the package's internals to
+ * borrow it would tie this to their file layout.
+ */
+export interface DismissalEvent {
+	detail: { originalEvent: Event };
+	preventDefault: () => void;
+}
+
+export interface DismissGuard {
+	/** Attach to the overlay's content element. */
+	ref: (element: HTMLElement) => void;
+	/** Pass to the content's `onInteractOutside`. */
+	onInteractOutside: (event: DismissalEvent) => void;
+}
+
+/** Whether a finished event's coordinates fall within `content`. */
+function hitByPoint(event: Event, content: HTMLElement): boolean {
+	if (!('clientX' in event) || !('clientY' in event)) return false;
+	const { clientX, clientY } = event as MouseEvent;
+
+	const rect = content.getBoundingClientRect();
+	return (
+		clientX >= rect.left
+		&& clientX <= rect.right
+		&& clientY >= rect.top
+		&& clientY <= rect.bottom
+	);
+}
+
+function isInside(original: Event, content: HTMLElement): boolean {
+	const path = original.composedPath();
+	if (path.length > 0) return path.includes(content);
+
+	// Touch takes a slower road: Kobalte defers the check to the following
+	// `click`, by which point the pointerdown has finished dispatching and its
+	// composed path has been emptied. Geometry is what is left to go on.
+	return hitByPoint(original, content);
+}
+
+/**
+ * Guard one overlay.
+ *
+ * Per-overlay rather than global because the answer depends on which content
+ * element is asking: a menu nested inside a dialog has to be able to dismiss
+ * without also dismissing the dialog around it.
+ */
+export function createDismissGuard(): DismissGuard {
+	let content: HTMLElement | undefined;
+
+	return {
+		ref: (element: HTMLElement) => {
+			content = element;
+		},
+		onInteractOutside: (event: DismissalEvent) => {
+			if (!content) return;
+			if (!isInside(event.detail.originalEvent, content)) return;
+			event.preventDefault();
+		},
+	};
+}

package/src/layers/index.ts

@@ -0,0 +1,27 @@
+/**
+ * Layering and portal system.
+ *
+ * Overlays read their `z-index` from a named tier instead of picking a number,
+ * and portal into a container resolved from the tree they were opened in rather
+ * than assuming `document.body`. See {@link LayerScope} for nesting.
+ */
+
+export {
+	LayerProvider,
+	LayerScope,
+	useLayer,
+	type LayerProviderProps,
+	type LayerScopeProps,
+	type ResolvedLayer,
+} from './LayerContext';
+export {
+	createDismissGuard,
+	type DismissalEvent,
+	type DismissGuard,
+} from './dismiss-guard';
+export {
+	ensureLayerContainer,
+	resolveLayerRoot,
+	LAYER_PORTAL_CLASS,
+} from './resolve-mount';
+export { layerTierVars, type LayerTier } from './tiers';