@ui0/theme 0.0.0-stage → 0.1.0

package/src/contracts/elevation/elevation.types.ts

@@ -0,0 +1,21 @@
+import type { ComponentElevation } from '@ui0/types'
+
+export interface ElevationProps {
+  elevation?: ComponentElevation
+}
+
+export interface ElevationThemeAppearanceConfig {
+  steps?: number
+}
+
+// registration: the contract announces itself to the package registries
+// (interface merging - no central import of the contracts anywhere)
+declare module '@ui0/types/theme' {
+  interface Ui0ThemePresetAppearanceConfig {
+    elevation?: ElevationThemeAppearanceConfig
+  }
+  interface Ui0ThemeContractSettings {
+    elevation?: boolean
+  }
+  interface Ui0ThemeContracts extends ElevationProps {}
+}

package/src/contracts/elevation/index.ts

@@ -0,0 +1,20 @@
+import type { ThemeContract } from '@ui0/types'
+
+import { ThemeContractFlags } from '../../constants'
+import { elevationDeal } from './elevation.contract'
+import { ElevationContractKey, ElevationRefKey } from './elevation.keys'
+import type { ElevationProps } from './elevation.types'
+
+export { default as $style } from './elevation.module.css'
+export type * from './elevation.types'
+export * from './elevation.keys'
+export const ElevationPropsKeys: ReadonlyArray<keyof ElevationProps> = ['elevation']
+
+export const elevation: ThemeContract = {
+  key: ElevationContractKey,
+  name: 'elevation',
+  ref: ElevationRefKey,
+  deal: elevationDeal,
+  flag: ThemeContractFlags.dealer + ThemeContractFlags.generator,
+  props: ElevationPropsKeys
+}

package/src/contracts/generator.ts

@@ -0,0 +1,38 @@
+// Contract generator infra - the context a contract factory receives from
+// the orchestrator (src/generator/contracts.ts) and the factory type every
+// <name>.generator.ts implements. A contract generator turns its slice of
+// the preset's settings (Ui0ThemeConfig.<name>) into CSS: the class rules
+// (css()) plus the vars it wants hoisted into the theme blocks (vars()).
+// The values are authored in the theme config; the contract only wires its
+// prop values onto them.
+import type {
+  ThemeContractGenerator,
+  ThemePresetName,
+  Ui0ThemePresetAppearanceConfig,
+  Ui0ThemeContractSettings
+} from '@ui0/types'
+
+export interface ContractContext {
+  /** the preset this generator instance is created for */
+  presetName: ThemePresetName
+  /**
+   * the resolved appearance config (extends flattened, base merged under
+   * the scheme) the vars are generated from
+   */
+  config: Ui0ThemePresetAppearanceConfig
+  /**
+   * the consumer-side contract settings (ThemePluginConfig.contracts) - a
+   * contract reads its own slice to toggle behavior preset-independently
+   * (e.g. which backdrop functions ship at all)
+   */
+  settings: Ui0ThemeContractSettings
+  /** class-name hasher - the same algorithm the distiller hashes module.css with */
+  hash: (name: string) => string
+}
+
+export type ContractFactory = (ctx: ContractContext) => ThemeContractGenerator
+
+/** identity helper so a <name>.generator.ts gets its factory context-typed */
+export function defineContract(factory: ContractFactory): ContractFactory {
+  return factory
+}

package/src/contracts/index.md

@@ -0,0 +1,48 @@
+<size>/ - one folder per component prop contract
+
+<size>.module.css the class registry - the single source of logical names
+<size>.inject.module.scss (or .css) the contract's own static css: rules with
+plain logical selectors whose names are imported from the registry
+(`@value name from './<size>.module.css';`); the build compiles it (sass for
+scss), validates the imports against the registry and the selectors against
+the imports, hashes the selectors (same name-only hash) and inlines the result
+into the generated theme.css; the generator imports it as a string and
+returns it from css(), class() re-exports the registry map
+<size>.scss the matching mixin(s) (@use '@ui0/theme/<size>')
+<size>.types.ts the prop typing (Sizeable and friends)
+<size>.generator.ts the generator endpoint (default-exported factory): theme
+vars + setter classes; may optionally expose localScss() - config-generated
+scss data (varName -> value, like the display breakpoints) the consumer's
+loader writes next to theme.css as <size>.scss
+
+Each contract also builds into the package dist (@ui0/vite/css-modules -
+ui0CssModulesHash, wired via scripts/build-contracts.ts and the theme
+tsdown/vitest configs):
+<size>.scss -> dist/<size>.scss (source copy, relative @use rewritten to
+package exports) and <size>.module.css -> dist/<size>.module.css as
+`@value className: classHash;` lines - the shipped names for consumers.
+An inject module additionally distills to dist/<size>.inject.module.css
+(`@value name: hash;` map lines + the hashed css).
+The hash (name-only sha256 inside ui0-css-modules-hash.ts) is the same one
+the plugin hands to TS imports. The same plugin serves component packages:
+ui0CssModulesHash({ entries: ['src/components'] }) distills every
+`<component>.module.css` the same way.
+
+color/ the paint contract (color/fill/gradient) - see color/index.md for the
+v2 prop dsl, the ColorToken type and the delivery model. v1 is archived at
+color-legacy/ (unregistered, reference only)
+size/ size.scss size.module.css size.types.ts
+round/ round.scss round.module.css round.types.ts
+backdrop/ backdrop.scss backdrop.module.css backdrop.types.ts
+elevation/ elevation.scss elevation.module.css elevation.types.ts
+disabled/ disabled.scss disabled.module.css disabled.types.ts
+
+The generator registry lives at src/generator.ts (contractGenerators) -
+external contracts will merge their default-exported factories there (or pass
+their own map to runContractGenerators' `factories` param).
+
+useThemeContract.ts / useThemeContract.spec.ts
+The useThemeContract(props, $styles) composable: a component-context
+bridge over the contracts - provides/injects the prop refs (color, fill,
+round, size, density, elevation, backdrop, disabled) for descendants and feeds
+them to ContractProvider from contract.ts.

package/src/contracts/index.ts

@@ -0,0 +1,37 @@
+import type { ThemeContract, ThemeContractName } from '@ui0/types'
+
+import { backdrop, BackdropPropsKeys } from './backdrop'
+import { color, ColorPropsKeys } from './color'
+import { disabled, DisabledPropsKeys } from './disabled'
+import { display } from './display'
+import { elevation, ElevationPropsKeys } from './elevation'
+import { round, RoundPropsKeys } from './round'
+import { size, SizePropsKeys } from './size'
+import { style } from './style'
+import { typography } from './typography'
+export type * from './backdrop'
+export type * from './color'
+export type * from './disabled'
+export type * from './elevation'
+export type * from './round'
+export type * from './size'
+
+export const contracts: Record<ThemeContractName, ThemeContract> = {
+  color,
+  backdrop,
+  round,
+  elevation,
+  style,
+  disabled,
+  display,
+  typography,
+  size
+}
+export const props = [
+  ColorPropsKeys,
+  RoundPropsKeys,
+  SizePropsKeys,
+  ElevationPropsKeys,
+  BackdropPropsKeys,
+  DisabledPropsKeys
+].flat()

package/src/contracts/round/index.ts

@@ -0,0 +1,21 @@
+import type { ThemeContract } from '@ui0/types'
+
+import { ThemeContractFlags } from '../../constants'
+import { roundDeal } from './round.contract'
+import { RoundContractKey, RoundRefKey } from './round.keys'
+import type { RoundProps } from './round.types'
+
+export { default as $style } from './round.module.css'
+export type * from './round.types'
+export * from './round.keys'
+
+export const RoundPropsKeys: ReadonlyArray<keyof RoundProps> = ['round', 'round-target']
+
+export const round: ThemeContract = {
+  key: RoundContractKey,
+  name: 'round',
+  ref: RoundRefKey,
+  deal: roundDeal,
+  flag: ThemeContractFlags.dealer + ThemeContractFlags.generator,
+  props: RoundPropsKeys
+}

package/src/contracts/round/round.contract.ts

@@ -0,0 +1,75 @@
+// The round contract's processing endpoint. The runtime wiring is minimal
+// for now: radius values are computed in the component namespace
+// (round.scss) and no round settings land on the theme block yet - the deal
+// returns no classes until a rounding setting arrives in the config.
+import type { CSSModuleClassList, Indexed } from '@ui0/types'
+import type { ContractProvider, ThemeContractDeal } from '@ui0/types'
+import { mergeCssModulesStyles, propsToCssModuleClassNext } from '@ui0/util'
+
+import { EMPTY_OBJ } from '../../constants'
+import type { RoundProps } from './round.types'
+
+import $round from './round.module.css'
+export type PropClassImpl<T = Record<string, unknown>> = keyof T | [keyof T, Indexed]
+
+export function roundDeal(instance: ContractProvider): ThemeContractDeal {
+  return {
+    classes() {
+      const { props, $styles } = instance
+      const $ = mergeCssModulesStyles($round, $styles)
+      console.log('props', instance.props)
+
+      console.log(
+        'propsToCssModuleClassNext(props, [getRoundPropClasses($), getRoundTargetPropClasses($)], $)',
+        propsToCssModuleClassNext(props, [getRoundPropClasses($), getRoundTargetPropClasses($)], $)
+      )
+
+      return propsToCssModuleClassNext(props, [getRoundPropClasses($), getRoundTargetPropClasses($)], $)
+    },
+    styles: () => instance.inject(EMPTY_OBJ)
+  }
+}
+
+function getRoundTargetPropClasses(style: CSSModuleClassList = $round): PropClassImpl<RoundProps> {
+  return [
+    'roundTarget',
+    {
+      'top-left-none': style.tln,
+      'bottom-left-none': style.bln,
+      'top-right-none': style.trn,
+      'bottom-right-none': style.brn,
+
+      'top-none': style.tn,
+      'bottom-none': style.bn,
+      'right-none': style.rn,
+      'left-none': style.ln,
+
+      'bottom-left': style.bl,
+      'bottom-right': style.br,
+      'top-right': style.tr,
+      'top-left': style.tl
+    }
+  ]
+}
+function getRoundPropClasses(style: CSSModuleClassList = $round): PropClassImpl<RoundProps> {
+  return [
+    'round',
+    {
+      true: style.rFull,
+      none: style.rNone,
+      full: style.rFull,
+
+      basic: style.rBasic,
+      smooth: style.rSmooth,
+      hard: style.rHard,
+
+      round: style.round,
+
+      left: [style.tl, style.bl],
+
+      right: [style.tr, style.br],
+      bottom: [style.br, style.bl],
+      top: [style.tl, style.tr]
+    }
+  ]
+}

package/src/contracts/round/round.generator.ts

@@ -0,0 +1,33 @@
+// The round contract's generator endpoint: corner-radius setter classes.
+// The resolved rounding values live in the component namespace (--0c-r-*, see
+// round.scss); a setter class points the per-corner slots at one of
+// them, falling back to the theme-level --0-r-* when the component never ran
+// apply() (its own computed default wins where it did). The setter css is
+// static - it ships in round.inject.module.scss (compiled + hashed at build);
+// class() re-exports the registry map from round.module.css.
+import type { CSSModuleClassList, StyleList } from '@ui0/types'
+import type { ThemeContractGenerator } from '@ui0/types'
+
+import type { ContractFactory } from '../generator'
+
+import roundCss from './round.inject.module.scss'
+import $round from './round.module.css'
+
+const roundGenerator: ContractFactory = (): ThemeContractGenerator => {
+  return {
+    namespace: 'r',
+    vars: () => ({}),
+    css: () => roundCss,
+    class: (): CSSModuleClassList => ({ ...$round }),
+    styles: (): StyleList => ({
+      '--0-r-base': '4px',
+      '--0-r-tl': '0px',
+      '--0-r-tr': '0px',
+      '--0-r-bl': '0px',
+      '--0-r-basic': 'calc(var(--0-s-m, 42px) * var(--0-s-density, 1))',
+      '--0-r-br': '0px'
+    })
+  }
+}
+
+export default roundGenerator

package/src/contracts/round/round.inject.module.scss

@@ -0,0 +1,36 @@
+@value rFull, rSmooth, rBasic, rHard, rNone, rounded, rl, rr, rt, rb, tl, tr, bl, br from './round.module.css';
+
+@mixin corners($name) {
+  --0-r-tl: var(--0c-r-#{$name}, var(--0-r-#{$name}));
+  --0-r-tr: var(--0c-r-#{$name}, var(--0-r-#{$name}));
+  --0-r-bl: var(--0c-r-#{$name}, var(--0-r-#{$name}));
+  --0-r-br: var(--0c-r-#{$name}, var(--0-r-#{$name}));
+}
+
+.rFull { @include corners(full); }
+.rSmooth { @include corners(smooth); }
+.rBasic { @include corners(basic); }
+.rHard { @include corners(hard); }
+.rNone { @include corners(none); }
+.rounded { @include corners(basic); }
+
+.rl {
+  --0-r-tl: var(--0c-r-basic, var(--0-r-basic));
+  --0-r-bl: var(--0c-r-basic, var(--0-r-basic));
+}
+.rr {
+  --0-r-tr: var(--0c-r-basic, var(--0-r-basic));
+  --0-r-br: var(--0c-r-basic, var(--0-r-basic));
+}
+.rt {
+  --0-r-tl: var(--0c-r-basic, var(--0-r-basic));
+  --0-r-tr: var(--0c-r-basic, var(--0-r-basic));
+}
+.rb {
+  --0-r-bl: var(--0c-r-basic, var(--0-r-basic));
+  --0-r-br: var(--0c-r-basic, var(--0-r-basic));
+}
+.tl { --0-r-tl: var(--0c-r-basic, var(--0-r-basic)); }
+.tr { --0-r-tr: var(--0c-r-basic, var(--0-r-basic)); }
+.bl { --0-r-bl: var(--0c-r-basic, var(--0-r-basic)); }
+.br { --0-r-br: var(--0c-r-basic, var(--0-r-basic)); }

package/src/contracts/round/round.keys.ts

@@ -0,0 +1,7 @@
+import type { ComponentRound, ComponentRoundTarget } from '@ui0/types'
+import type { ThemeContractDeal } from '@ui0/types'
+import type { InjectionKey, Ref } from 'vue'
+
+export const RoundRefKey = Symbol('RoundRefKey') as InjectionKey<Ref<ComponentRound>>
+export const RoundTargetRefKey = Symbol('RoundTargetRefKey') as InjectionKey<Ref<ComponentRoundTarget>>
+export const RoundContractKey = Symbol('RoundContractKey') as InjectionKey<ThemeContractDeal>

package/src/contracts/round/round.module.css

@@ -0,0 +1,16 @@
+.rounded,
+.rBasic,
+.rSmooth,
+.rHard,
+.rNone,
+.rFull,
+.rl,
+.rr,
+.rt,
+.rb,
+.br,
+.bl,
+.tl,
+.tr {
+  /*@*/
+}

package/src/contracts/round/round.scss

@@ -0,0 +1,90 @@
+// Corner radius application for a component.
+//
+// Rounding names (--0-r-none/hard/basic/smooth/full) are a THEME concern: the
+// generator emits whatever the config's `roundings` section declares, on the
+// .theme-* rule. This mixin provides a COMPUTED default for each name (a
+// proportion of the control's current height) and resolves it into the
+// --0c-r-* component namespace with the theme value winning via the var()
+// fallback. The resolved defaults MUST live under --0c-r-* (not --0-r-*):
+// a self-referential `--0-r-x: var(--0-r-x, …)` on the element is a CSS cycle
+// (guaranteed-invalid at computed-value time) and kills every consumer - the
+// setter classes read the --0c-r-* names.
+
+@mixin init {
+  @property --0-r-tl {
+    syntax: '<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?';
+    inherits: false;
+    initial-value: 0;
+  }
+  @property --0-r-tr {
+    syntax: '<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?';
+    inherits: false;
+    initial-value: 0;
+  }
+  @property --0-r-bl {
+    syntax: '<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?';
+    inherits: false;
+    initial-value: 0;
+  }
+  @property --0-r-br {
+    syntax: '<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?';
+    inherits: false;
+    initial-value: 0;
+  }
+}
+
+@mixin use() {
+  border-start-start-radius: var(--0-r-tl, 0px);
+  border-start-end-radius: var(--0-r-tr, 0px);
+  border-end-start-radius: var(--0-r-bl, 0px);
+  border-end-end-radius: var(--0-r-br, 0px);
+}
+
+// $basic - the size the proportions are taken from; defaults to the control's
+// current (density-aware) height.
+@mixin apply($basic: null) {
+  @if $basic == null {
+    $basic: calc(var(--0-s-cur, 42px) * var(--0-s-density, 1));
+  }
+
+  // computed defaults in the component namespace; a theme-declared --0-r-*
+  // wins over each via the var() fallback (element-level --0-r-* would be a
+  // self-referential cycle, so the names must differ)
+  --0c-r-full: var(--0-r-full, calc(#{$basic} / 2));
+  --0c-r-smooth: var(--0-r-smooth, calc(#{$basic} / 4));
+  --0c-r-basic: var(--0-r-basic, calc(#{$basic} / 8));
+  --0c-r-hard: var(--0-r-hard, calc(#{$basic} / 14));
+  --0c-r-none: var(--0-r-none, 0px);
+  // @include reset();
+}
+
+@mixin full() {
+  --0-r-tl: var(--0c-r-full, var(--0-r-full));
+  --0-r-tr: var(--0c-r-full, var(--0-r-full));
+  --0-r-bl: var(--0c-r-full, var(--0-r-full));
+  --0-r-br: var(--0c-r-full, var(--0-r-full));
+}
+@mixin smooth() {
+  --0-r-tl: var(--0c-r-smooth, var(--0-r-smooth));
+  --0-r-tr: var(--0c-r-smooth, var(--0-r-smooth));
+  --0-r-bl: var(--0c-r-smooth, var(--0-r-smooth));
+  --0-r-br: var(--0c-r-smooth, var(--0-r-smooth));
+}
+@mixin basic() {
+  --0-r-tl: var(--0c-r-basic, var(--0-r-basic));
+  --0-r-tr: var(--0c-r-basic, var(--0-r-basic));
+  --0-r-bl: var(--0c-r-basic, var(--0-r-basic));
+  --0-r-br: var(--0c-r-basic, var(--0-r-basic));
+}
+@mixin hard() {
+  --0-r-tl: var(--0c-r-hard, var(--0-r-hard));
+  --0-r-tr: var(--0c-r-hard, var(--0-r-hard));
+  --0-r-bl: var(--0c-r-hard, var(--0-r-hard));
+  --0-r-br: var(--0c-r-hard, var(--0-r-hard));
+}
+@mixin reset() {
+  --0-r-tl: 0px;
+  --0-r-tr: 0px;
+  --0-r-bl: 0px;
+  --0-r-br: 0px;
+}

package/src/contracts/round/round.types.ts

@@ -0,0 +1,44 @@
+import type { InheritValue, LiteralUnion } from '@ui0/types'
+
+export interface RoundProps {
+  round?: Round
+  roundTarget?: RoundTarget
+}
+
+export interface RoundThemeAppearanceConfig {
+  rounding: 'relative' | 'static'
+}
+
+// registration: the contract announces itself to the package registries
+// (interface merging - no central import of the contracts anywhere)
+declare module '@ui0/types/theme' {
+  interface Ui0ThemePresetAppearanceConfig {
+    round?: RoundThemeAppearanceConfig
+  }
+  interface Ui0ThemeContractSettings {
+    round?: {
+      rounding: 'relative' | 'static'
+    }
+  }
+  interface Ui0ThemeContracts extends RoundProps {}
+}
+export type RoundTarget =
+  | InheritValue
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top-none'
+  | 'bottom-none'
+  | 'left-none'
+  | 'right-none'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'top-left-none'
+  | 'top-right-none'
+  | 'bottom-left-none'
+  | 'bottom-right-none'
+
+export type Round = LiteralUnion<InheritValue | 'basic' | 'full' | 'none' | 'hard' | 'smooth'>

package/src/contracts/size/index.ts

@@ -0,0 +1,22 @@
+import type { ThemeContract } from '@ui0/types'
+
+import { ThemeContractFlags } from '../../constants'
+import { sizeDeal } from './size.contract'
+import { SizeContractKey, SizeRefKey } from './size.keys'
+import type { DensityProps, SizeProps } from './size.types'
+
+export { default as $style } from './size.module.css'
+export type * from './size.types'
+export * from './size.keys'
+export { default as sizeGenerator } from './size.generator'
+
+export const SizePropsKeys: ReadonlyArray<keyof (SizeProps & DensityProps)> = ['size', 'density']
+
+export const size: ThemeContract = {
+  ref: SizeRefKey,
+  name: 'size',
+  props: SizePropsKeys,
+  deal: sizeDeal,
+  flag: ThemeContractFlags.dealer + ThemeContractFlags.generator,
+  key: SizeContractKey
+}

package/src/contracts/size/size.contract.ts

@@ -0,0 +1,98 @@
+// The size contract's processing endpoint: closes over the provider and
+// returns the deal that maps the `size`/`density` props onto classes,
+// resolving `inherit`/`smaller`/`larger` against the provided context refs.
+import type { ClassList, CSSModuleClassList } from '@ui0/types'
+import type { ContractProvider, ThemeContractDeal } from '@ui0/types'
+import { arrayPickNext, arrayPickPrev, isArray, mergeCssModulesStyles, toCamelCase } from '@ui0/util'
+
+import { EMPTY_OBJ } from '../../constants'
+import type { DensityProps, Size, SizeProps } from './size.types'
+import { SizeValuesAbsolute } from './size.types'
+
+import $size from './size.module.css'
+
+type Sizers = SizeProps & DensityProps
+
+function sizeClasses(props: Sizers, styles?: CSSModuleClassList): ClassList {
+  const out: ClassList = []
+  const { size, density } = props
+  const normalizedSizing = (isArray(density) ? density : [toCamelCase(density)]) as string[]
+
+  const $ = mergeCssModulesStyles($size, styles)
+  if (size) {
+    out.push($.sized)
+    const cls = getSizePropClasses($)[size]
+    if (cls) out.push(cls)
+  }
+
+  if (normalizedSizing) {
+    normalizedSizing.forEach((d) => {
+      if ($ && $[d]) out.push($[d])
+    })
+  }
+  return out
+}
+
+function getSizePropClasses(styles: CSSModuleClassList): Record<Size | 'inherit', string> {
+  return {
+    'xxx-large': styles.sizeXxxl,
+    'xx-large': styles.sizeXxl,
+    'x-large': styles.sizeXl,
+    large: styles.sizeL,
+    'x-small': styles.sizeXs,
+    'xx-small': styles.sizeXxs,
+    'xxx-small': styles.sizeXxxs,
+    small: styles.sizeS,
+    medium: styles.sizeM,
+
+    xxxl: styles.sizeXxxl,
+    xxl: styles.sizeXxl,
+    xl: styles.sizeXl,
+    l: styles.sizeL,
+    xs: styles.sizeXs,
+    xxs: styles.sizeXxs,
+    xxxs: styles.sizeXxxs,
+    s: styles.sizeS,
+    m: styles.sizeM,
+
+    larger: '',
+    inherit: '',
+    smaller: '',
+    custom: styles.sizeCustom
+  }
+}
+
+export function sizeDeal(instance: ContractProvider): ThemeContractDeal {
+  const props = instance.props
+
+  return {
+    classes: () => {
+      const { size, density } = props
+      if (!size && !density) return instance.inject([])
+
+      if (instance.context) {
+        const out: Record<string, any> = {}
+        const ctxSize = instance.context.size
+
+        if (ctxSize) {
+          if (size === 'inherit') out['size'] = ctxSize.value
+          if (size === 'smaller' || size === 'larger') {
+            out['size'] = (size === 'smaller' ? arrayPickPrev : arrayPickNext)(SizeValuesAbsolute, ctxSize.value)
+          }
+        }
+        const ctxDensity = instance.context.density
+        if (ctxDensity && density === 'inherit') {
+          out['density'] = ctxDensity.value
+        }
+
+        if (!('density' in out) && props.density) out['density'] = props.density
+        if (!('size' in out) && props.size) out['size'] = props.size
+
+        return instance.inject(sizeClasses(out, instance.$styles))
+      }
+
+      return instance.inject(sizeClasses(props, instance.$styles))
+    },
+    styles: () => instance.inject(EMPTY_OBJ)
+  }
+}