@womp/kookie-ui 0.3.25 → 0.3.26

package/src/components/shell.css

@@ -70,47 +70,51 @@
   height: 100%;
   overflow: hidden;
 
-  /* Animation setup */
-  transition: width var(--motion-duration-small) var(--motion-ease-standard);
+  /* Above the panel, so a collapsing panel tucks behind it rather than across it. */
+  position: relative;
+  z-index: 2;
 }
 
+/* Steps to its width in one layout pass — see .rt-ShellPanel for why. */
 .rt-ShellRail[data-mode='expanded'] {
   width: var(--rail-size, 64px);
 }
 
-/* Collapsed rail: stay in flow during transition, then hide */
 .rt-ShellRail[data-mode='collapsed'] {
   width: 0px;
-  /* Delay container collapse until content fade completes */
-  transition-delay: var(--motion-duration-small);
+  transition: width 0s var(--motion-duration-small);
 }
 
 /* Peek overlay rules consolidated later to avoid duplication */
 
 .rt-ShellRailContent {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+
   display: flex;
   flex-direction: column;
-  width: var(--rail-size, 64px);
+  width: 100%;
   height: 100%;
   gap: var(--space-2);
 
-  /* Content animation: fade out first, then fade in after width settles */
+  /* Content animation */
   opacity: 0;
   pointer-events: none;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+  transform: translateX(-100%);
+  transition:
+    transform var(--motion-duration-small) var(--motion-ease-standard),
+    opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+
+:where([dir='rtl']) .rt-ShellRailContent {
+  transform: translateX(100%);
 }
 
 .rt-ShellRailContent[data-visible] {
   opacity: 1;
   pointer-events: auto;
-}
-
-.rt-ShellRail[data-mode='collapsed'] .rt-ShellRailContent {
-  /* Exit animation: fade out content first, then collapse */
-  opacity: 0;
-  width: 0;
-  visibility: hidden;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+  transform: translateX(0);
 }
 
 /* Panel - sidebar content next to Rail */
@@ -122,46 +126,67 @@
   overflow: visible;
   position: relative;
   z-index: 1;
-
-  /* Animation setup */
-  transition: width var(--motion-duration-small) var(--motion-ease-standard);
 }
 
+/*
+ * The pane takes its width in one step rather than animating it. `width` is a
+ * layout property, so animating it re-lays-out everything in `.rt-ShellContent`
+ * on every frame of a collapse: measured on this stylesheet, that is 11 layout
+ * passes per toggle and 5.3ms per frame with 100 rows of content beside it,
+ * 10.1ms with 300 and 17.2ms with 800. Stepping to the final width costs one
+ * layout pass, and the pane's contents slide on `transform`, which the
+ * compositor handles without laying anything out.
+ *
+ * Expanding applies the width immediately, so the contents have somewhere to
+ * slide into. Collapsing holds the width until the slide has finished — a `0s`
+ * transition with a delay — so the contents are never sliding across
+ * `.rt-ShellContent`, and the content area widens once, at the end.
+ */
 .rt-ShellPanel[data-visible] {
   width: var(--panel-size, 288px);
 }
 
-/* Collapsed panel: stay in flow during transition, then hide */
 .rt-ShellPanel:not([data-visible]) {
   width: 0px;
-  /* Delay container collapse until content fade completes */
-  transition-delay: var(--motion-duration-small);
+  transition: width 0s var(--motion-duration-small);
 }
 
 .rt-ShellPanelContent {
+  /*
+   * Taken out of flow so it can slide across the space the pane no longer
+   * occupies. `.rt-ShellBody` clips it at the edge of the shell.
+   */
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+
   display: flex;
   flex-direction: column;
-  width: var(--panel-size, 288px);
+  width: 100%;
   height: 100%;
   overflow: hidden;
 
   /* Content animation */
   opacity: 0;
   pointer-events: none;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+  transform: translateX(-100%);
+  transition:
+    transform var(--motion-duration-small) var(--motion-ease-standard),
+    opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+
+:where([dir='rtl']) .rt-ShellPanelContent {
+  transform: translateX(100%);
 }
 
 .rt-ShellPanelContent[data-visible] {
   opacity: 1;
   pointer-events: auto;
+  transform: translateX(0);
 }
 
-.rt-ShellPanel:not([data-visible]) .rt-ShellPanelContent {
-  /* Exit animation: fade out content first, then collapse */
-  opacity: 0;
-  width: 0;
-  visibility: hidden;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+:where([dir='rtl']) .rt-ShellPanelContent[data-visible] {
+  transform: translateX(0);
 }
 
 /* Sidebar - alternative to Rail+Panel */
@@ -174,10 +199,17 @@
   position: relative;
   z-index: 1;
 
-  /* Animation setup */
-  transition: width var(--motion-duration-small) var(--motion-ease-standard);
 }
 
+/*
+ * Steps to its width in one layout pass — see .rt-ShellPanel for why.
+ *
+ * Sidebar has two open sizes, so expanded and thin both apply immediately and
+ * the switch between them is a step rather than a slide: there is no composited
+ * way to move a pane between two widths that both take space in the flow. The
+ * phase rules below already fade the contents out across that switch, so the
+ * step lands while they are not visible.
+ */
 .rt-ShellSidebar[data-mode='expanded'] {
   width: var(--sidebar-size, 288px);
 }
@@ -186,19 +218,16 @@
   width: var(--sidebar-thin-size, 64px);
 }
 
-/* Ensure content matches thin width in thin mode */
-.rt-ShellSidebar[data-mode='thin'] .rt-ShellSidebarContent {
-  width: var(--sidebar-thin-size, 64px);
-}
-
-/* Collapsed sidebar: stay in flow during transition, then hide */
 .rt-ShellSidebar[data-mode='collapsed'] {
   width: 0px;
-  /* Delay container collapse until content fade completes */
-  transition-delay: var(--motion-duration-small);
+  transition: width 0s var(--motion-duration-small);
 }
 
 .rt-ShellSidebarContent {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -208,7 +237,14 @@
   /* Content animation */
   opacity: 0;
   pointer-events: none;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+  transform: translateX(-100%);
+  transition:
+    transform var(--motion-duration-small) var(--motion-ease-standard),
+    opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+
+:where([dir='rtl']) .rt-ShellSidebarContent {
+  transform: translateX(100%);
 }
 
 /* Hide resizer in thin mode */
@@ -219,6 +255,7 @@
 .rt-ShellSidebarContent[data-visible] {
   opacity: 1;
   pointer-events: auto;
+  transform: translateX(0);
 }
 
 /* Sidebar presentation switch sequencing (thin ↔ expanded) */
@@ -237,13 +274,6 @@
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
 
-.rt-ShellSidebar[data-mode='collapsed'] .rt-ShellSidebarContent {
-  /* Exit animation: fade out content first, then collapse */
-  opacity: 0;
-  width: 0;
-  visibility: hidden;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
-}
 
 /* Stacked Sidebar: left side, floating without reflow */
 .rt-ShellSidebar[data-presentation='stacked'] {
@@ -291,10 +321,9 @@
   position: relative;
   z-index: 1;
 
-  /* Animation setup */
-  transition: width var(--motion-duration-small) var(--motion-ease-standard);
 }
 
+/* Steps to its width in one layout pass — see .rt-ShellPanel for why. */
 .rt-ShellInspector[data-mode='expanded'] {
   width: var(--inspector-size, 320px);
 }
@@ -302,34 +331,37 @@
 /* Collapsed inspector: stay in flow during transition, then hide */
 .rt-ShellInspector[data-mode='collapsed'] {
   width: 0px;
-  /* Delay container collapse until content fade completes */
-  transition-delay: var(--motion-duration-small);
+  transition: width 0s var(--motion-duration-small);
 }
 
 .rt-ShellInspectorContent {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+
   display: flex;
   flex-direction: column;
-  width: var(--inspector-size, 320px);
+  width: 100%;
   height: 100%;
   overflow: hidden;
 
   /* Content animation */
   opacity: 0;
   pointer-events: none;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+  transform: translateX(100%);
+  transition:
+    transform var(--motion-duration-small) var(--motion-ease-standard),
+    opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+
+:where([dir='rtl']) .rt-ShellInspectorContent {
+  transform: translateX(-100%);
 }
 
 .rt-ShellInspectorContent[data-visible] {
   opacity: 1;
   pointer-events: auto;
-}
-
-.rt-ShellInspector[data-mode='collapsed'] .rt-ShellInspectorContent {
-  /* Exit animation: fade out content first, then collapse */
-  opacity: 0;
-  width: 0;
-  visibility: hidden;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+  transform: translateX(0);
 }
 
 /* Bottom - bottom panel */
@@ -342,37 +374,42 @@
   flex-shrink: 0;
   position: relative;
 
-  /* Animation setup */
-  transition: height var(--motion-duration-small) var(--motion-ease-standard);
 }
 
+/* Steps to its height in one layout pass — see .rt-ShellPanel for why. */
 .rt-ShellBottom[data-mode='expanded'] {
   height: var(--bottom-size, 200px);
 }
 
-/* Collapsed bottom: stay in flow during transition, then hide */
 .rt-ShellBottom[data-mode='collapsed'] {
   height: 0px;
-  /* Delay container collapse until content fade completes */
-  transition-delay: var(--motion-duration-small);
+  transition: height 0s var(--motion-duration-small);
 }
 
 .rt-ShellBottomContent {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: var(--bottom-size, 200px);
+  height: 100%;
   overflow: hidden;
 
   /* Content animation */
   opacity: 0;
   pointer-events: none;
-  transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+  transform: translateY(100%);
+  transition:
+    transform var(--motion-duration-small) var(--motion-ease-standard),
+    opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
 
 .rt-ShellBottomContent[data-visible] {
   opacity: 1;
   pointer-events: auto;
+  transform: translateY(0);
 }
 
 /* Disable transitions during active resize */

package/src/components/slider.css

@@ -20,7 +20,7 @@
    */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Prevent backdrop-filter stacking with parent elements */
@@ -37,7 +37,7 @@
   
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   &:where([data-orientation='horizontal']) {

package/src/components/switch.css

@@ -20,7 +20,7 @@
    */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Prevent backdrop-filter stacking with parent elements */
@@ -37,7 +37,7 @@
   
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   &::before {

package/src/components/table.css

@@ -121,6 +121,13 @@
 /* surface */
 
 .rt-TableRoot:where(.rt-variant-surface) {
+  /*
+   * This surface blurs its own backdrop, which makes it the backdrop root for
+   * everything inside it. A component nested here would re-blur an already
+   * blurred, already flat surface for the full cost of another blur pass, so
+   * switch the component filter off for the subtree. See tokens/blur.css.
+   */
+  --backdrop-filter-components-enabled: none;
   box-sizing: border-box;
   border: 1px solid var(--gray-a5);
   border-radius: var(--table-border-radius);

package/src/components/text-area.css

@@ -47,7 +47,7 @@
   /* Theme-level translucent override */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Prevent backdrop-filter stacking with parents */
@@ -61,7 +61,7 @@
   
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   &:where(:focus-within) {

package/src/components/text-field.css

@@ -12,7 +12,7 @@
     /* Theme-level translucent override */
     :where([data-panel-background='translucent'], [data-material='translucent']) & {
       backdrop-filter: var(--backdrop-filter-components);
-      --backdrop-filter-components: blur(var(--backdrop-blur-components));
+      --backdrop-filter-components: var(--backdrop-filter-components-enabled);
     }
 
   /* Prevent backdrop-filter stacking with parents */
@@ -26,7 +26,7 @@
   
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   @supports selector(:has(*)) {

package/src/components/theme.tsx

@@ -3,8 +3,11 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Direction, Slot, Tooltip as TooltipPrimitive } from 'radix-ui';
+import { useComposedRefs, useLayoutEffect } from 'radix-ui/internal';
 
 import { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';
+import { usePropSyncedState } from '../hooks/use-prop-synced-state.js';
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import { themePropDefs } from './theme.props.js';
 
 import type { ThemeOwnProps } from './theme.props.js';
@@ -104,42 +107,27 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
       ...rootProps
     } = props;
 
-    // Show deprecation warning for panelBackground when used
-    React.useEffect(() => {
-      if (props.panelBackground !== undefined) {
-        console.warn(
-          'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',
-        );
-      }
-    }, [props.panelBackground]);
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
 
-    const [appearance, setAppearance] = React.useState(appearanceProp);
-    React.useEffect(() => setAppearance(appearanceProp), [appearanceProp]);
-
-    const [accentColor, setAccentColor] = React.useState(accentColorProp);
-    React.useEffect(() => setAccentColor(accentColorProp), [accentColorProp]);
-
-    const [grayColor, setGrayColor] = React.useState(grayColorProp);
-    React.useEffect(() => setGrayColor(grayColorProp), [grayColorProp]);
+    // Each of these follows its prop but stays independently settable, so
+    // `ThemePanel` can change the theme at runtime. Syncing during render
+    // rather than in an effect matters here: an effect would commit the old
+    // theme first and re-render every consumer of the context a second time.
+    const [appearance, setAppearance] = usePropSyncedState(appearanceProp);
+    const [accentColor, setAccentColor] = usePropSyncedState(accentColorProp);
+    const [grayColor, setGrayColor] = usePropSyncedState(grayColorProp);
 
     // Material takes precedence over panelBackground
     const effectiveMaterial =
       materialProp !== themePropDefs.material.default ? materialProp : panelBackgroundProp;
-    const [material, setMaterial] = React.useState(effectiveMaterial);
-    React.useEffect(() => setMaterial(effectiveMaterial), [effectiveMaterial]);
+    const [material, setMaterial] = usePropSyncedState(effectiveMaterial);
 
     // Keep panelBackground in sync with material for backward compatibility
-    const [panelBackground, setPanelBackground] = React.useState(panelBackgroundProp);
-    React.useEffect(() => setPanelBackground(material), [material]);
-
-    const [radius, setRadius] = React.useState(radiusProp);
-    React.useEffect(() => setRadius(radiusProp), [radiusProp]);
-
-    const [scaling, setScaling] = React.useState(scalingProp);
-    React.useEffect(() => setScaling(scalingProp), [scalingProp]);
+    const [panelBackground, setPanelBackground] = usePropSyncedState(material);
 
-    const [fontFamily, setFontFamily] = React.useState(fontFamilyProp);
-    React.useEffect(() => setFontFamily(fontFamilyProp), [fontFamilyProp]);
+    const [radius, setRadius] = usePropSyncedState(radiusProp);
+    const [scaling, setScaling] = usePropSyncedState(scalingProp);
+    const [fontFamily, setFontFamily] = usePropSyncedState(fontFamilyProp);
 
     return (
       <ThemeImpl
@@ -223,10 +211,24 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
   const hasBackground =
     hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;
 
-  const [clientOS, setClientOS] = React.useState<ReturnType<typeof getClientOS>>(undefined);
-  React.useEffect(() => {
-    if (isRoot) setClientOS(getClientOS());
-  }, [isRoot]);
+  // `data-os` can only be resolved on the client. Writing it straight to the
+  // DOM keeps it out of the server markup — so hydration still matches — without
+  // spending a render pass, and a state update here would re-render the whole
+  // application on mount.
+  const rootRef = React.useRef<ThemeImplElement>(null);
+  const composedRef = useComposedRefs(forwardedRef, rootRef);
+  const hasExplicitOS = 'data-os' in themeProps;
+
+  useLayoutEffect(() => {
+    if (!isRoot || hasExplicitOS) return;
+    const node = rootRef.current;
+    if (!node) return;
+
+    const os = getClientOS();
+    if (!os) return;
+    node.setAttribute('data-os', os);
+    return () => node.removeAttribute('data-os');
+  }, [isRoot, hasExplicitOS]);
 
   return (
     <ThemeContext.Provider
@@ -284,8 +286,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
         data-radius={radius}
         data-scaling={scaling}
         data-font-family={fontFamily}
-        data-os={isRoot ? clientOS : undefined}
-        ref={forwardedRef}
+        ref={composedRef}
         {...themeProps}
         className={classNames(
           'radix-themes',

package/src/helpers/compile-prop-defs.ts

@@ -0,0 +1,121 @@
+import type { PropDef } from '../props/prop-def.js';
+
+/**
+ * A prop def pre-processed into the exact shape `extractProps` needs at render
+ * time. Everything that can be derived from the static prop def — enum
+ * membership sets, whether the def is responsive, whether it carries a default
+ * — is computed once here instead of on every render.
+ */
+interface CompiledPropDef {
+  key: string;
+  type: PropDef['type'];
+  default: unknown;
+  hasDefault: boolean;
+  responsive: boolean;
+  className?: string;
+  customProperties?: `--${string}`[];
+  parseValue?: (value: string) => string | undefined;
+  /** The prop def's own enum values, kept for the responsive class name helpers. */
+  values: readonly string[];
+  /** O(1) membership for `values`. */
+  valueSet: ReadonlySet<string>;
+  /**
+   * `values` plus the default, used to coerce invalid enum values back to the
+   * default. Only present for `type: 'enum'` — `'enum | string'` props accept
+   * arbitrary strings and must not be coerced.
+   */
+  enumValueSet?: ReadonlySet<unknown>;
+}
+
+interface CompiledPropDefs {
+  /** Defs that contribute a class name and/or custom properties. */
+  styling: CompiledPropDef[];
+  /**
+   * Defs that pass through to the element but still need a default applied or
+   * an invalid enum value coerced. Defs that can do neither are omitted
+   * entirely — they are already correct as passed.
+   */
+  passthrough: CompiledPropDef[];
+  /** Keys consumed by `styling`, so they can be skipped when copying props. */
+  stylingKeys: ReadonlySet<string>;
+}
+
+const EMPTY_VALUES: readonly string[] = [];
+const EMPTY_SET: ReadonlySet<string> = new Set();
+
+function compile(propDefs: readonly Record<string, PropDef>[]): CompiledPropDefs {
+  const merged: Record<string, PropDef> = Object.assign({}, ...propDefs);
+  const styling: CompiledPropDef[] = [];
+  const passthrough: CompiledPropDef[] = [];
+  const stylingKeys = new Set<string>();
+
+  for (const key in merged) {
+    // The PropDef union is narrowed per-field below; reading the optional
+    // members off the union directly is what the runtime actually needs.
+    const def = merged[key] as PropDef & {
+      default?: unknown;
+      values?: readonly string[];
+      className?: string;
+      customProperties?: `--${string}`[];
+      parseValue?: (value: string) => string | undefined;
+      responsive?: true;
+    };
+
+    const values = def.values ?? EMPTY_VALUES;
+    const compiled: CompiledPropDef = {
+      key,
+      type: def.type,
+      default: def.default,
+      hasDefault: def.default !== undefined,
+      responsive: 'responsive' in def,
+      className: def.className,
+      customProperties: def.customProperties,
+      parseValue: def.parseValue,
+      values,
+      valueSet: values.length > 0 ? new Set(values) : EMPTY_SET,
+      enumValueSet: def.type === 'enum' ? new Set<unknown>([def.default, ...values]) : undefined,
+    };
+
+    if (def.className) {
+      styling.push(compiled);
+      stylingKeys.add(key);
+    } else if (compiled.hasDefault || def.type === 'enum') {
+      // Anything else is copied through untouched, so there is nothing to do.
+      passthrough.push(compiled);
+    }
+  }
+
+  return { styling, passthrough, stylingKeys };
+}
+
+interface CacheNode {
+  children: WeakMap<object, CacheNode>;
+  compiled?: CompiledPropDefs;
+}
+
+const cacheRoot: CacheNode = { children: new WeakMap() };
+
+/**
+ * Compiles a set of prop defs, memoized on the identity of the prop def objects
+ * themselves. Components always pass the same module-level constants, so after
+ * the first render of a given component this is a couple of WeakMap lookups
+ * instead of merging 50-odd prop defs into a fresh object.
+ */
+function getCompiledPropDefs(propDefs: readonly Record<string, PropDef>[]): CompiledPropDefs {
+  let node = cacheRoot;
+
+  for (let i = 0; i < propDefs.length; i++) {
+    const propDef = propDefs[i];
+    let child = node.children.get(propDef);
+    if (child === undefined) {
+      child = { children: new WeakMap() };
+      node.children.set(propDef, child);
+    }
+    node = child;
+  }
+
+  return (node.compiled ??= compile(propDefs));
+}
+
+export { getCompiledPropDefs };
+export type { CompiledPropDef, CompiledPropDefs };